feat(components): Chip added

apps/storybook-react/stories/Chip.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from '@blandui/blandui-react';
+
+const meta: Meta<typeof Chip> = {
+	title:     'Component/Chip',
+	component: Chip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+const max = 10000;
+const min = 0;
+
+export const Default: Story = {
+	render: () => {
+		const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+		return (
+				<div className="flex flex-col gap-lg items-start justify-center">
+					<div className="flex gap-md">
+						<Chip size="sm" type="empty">Small</Chip>
+						<Chip size="md" type="empty">Medium</Chip>
+					</div>
+
+					<div className="flex gap-md">
+						<Chip size="sm" type="cancellable">Small</Chip>
+						<Chip size="md" type="cancellable">Medium</Chip>
+					</div>
+
+					<div className="flex gap-md">
+						<Chip size="sm" type="countable" count={randomNumber}>Small</Chip>
+						<Chip size="md" type="countable" count={randomNumber}>Medium</Chip>
+					</div>
+				</div>
+		);
+	},
+};

packages/blandui-react/package.json

@@ -41,6 +41,7 @@
 	"dependencies": {
 		"@blandui/blandui": "workspace:*",
 		"clsx": "^2.1.1",
+		"lucide-react": "^0.395.0",
 		"tailwind-merge": "^2.3.0"
 	},
 	"devDependencies": {

packages/blandui-react/src/components/Chip/Chip.tsx

@@ -0,0 +1,85 @@
+import { ComponentProps, forwardRef } from 'react';
+import { X } from 'lucide-react';
+import cn from '../../utils/cn';
+
+type ChipSize = 'sm' | 'md';
+type ChipType = 'empty' | 'cancellable' | 'countable';
+
+export interface ChipProps extends ComponentProps<'div'> {
+	className?: string;
+	size?: ChipSize;
+	type?: ChipType;
+
+	cancellableClassName?: string;
+
+	countableClassName?: string;
+	count?: number;
+}
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>((
+	{
+		children,
+		className,
+
+		size = 'md',
+		type = 'empty',
+
+		cancellableClassName,
+
+		countableClassName,
+		count = 0,
+		...props
+	},
+	ref,
+) => {
+	const baseCn = 'flex items-center gap-sm border border-subtle rounded-sm bg-surface-4 body-md text-bold';
+
+	const typeCn = {
+		empty:       'px-sm',
+		cancellable: 'pl-sm pr-xs',
+		countable:   'pl-sm pr-xs',
+
+	};
+
+	const sizeCn = {
+		sm: 'h-xl',
+		md: 'h-2xl',
+	};
+
+	const chipCn = cn(
+		baseCn,
+		typeCn[type],
+		sizeCn[size],
+		className,
+	);
+
+	const baseExtraCn = 'flex items-center justify-center p-2xs rounded-xs bg-surface-3 body-sm text-subtle font-semibold';
+
+	const cancellableCn = cn(
+		baseExtraCn,
+		'cursor-pointer',
+		cancellableClassName,
+	);
+
+	const countableCn = cn(
+		baseExtraCn,
+		'min-w-lg',
+		countableClassName,
+	);
+
+	return (
+		<div className={chipCn} ref={ref} {...props}>
+			{ children }
+
+			{ type === 'cancellable' && <span className={cancellableCn}>
+				<X size="0.75rem" className="text-subtle" />
+			</span>}
+
+			{ type === 'countable' && <span className={countableCn}>
+				{ count }
+			</span>}
+		</div>
+	);
+});
+
+Chip.displayName = 'Chip';

packages/blandui-react/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';