extract ui to lib

src/components/Chip.tsx

@@ -0,0 +1,36 @@
+import type { ElementType, ReactNode } from 'react';
+
+type ChipVariant = 'solid' | 'outlined';
+type ChipTone = 'neutral' | 'indigo' | 'cyan';
+
+type ChipProps<T extends ElementType> = {
+  variant?: ChipVariant;
+  tone?: ChipTone;
+  as?: T;
+  className?: string;
+  children: ReactNode;
+};
+
+const variantClassMap: Record<ChipVariant, string> = {
+  solid: 'chip-solid',
+  outlined: 'chip-outlined'
+};
+
+const toneClassMap: Record<ChipTone, string> = {
+  neutral: 'chip-neutral',
+  indigo: 'chip-indigo',
+  cyan: 'chip-cyan'
+};
+
+export function Chip<T extends ElementType = 'span'>({
+  variant = 'solid',
+  tone = 'neutral',
+  as,
+  className = '',
+  children
+}: Readonly<ChipProps<T>>) {
+  const Component = as ?? 'span' as ElementType;
+  const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();
+
+  return <Component className={classes}>{children}</Component>;
+}