add storybook, fix ui, v0.1.6

src/components/Chip.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from './Chip';
+
+const meta = {
+  title: 'Components/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.'
+      }
+    }
+  },
+  argTypes: {
+    variant: {
+      description: 'Chip visual style.',
+      options: ['solid', 'outlined'],
+      control: 'inline-radio',
+      table: { type: { summary: "'solid' | 'outlined'" } }
+    },
+    tone: {
+      description: 'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    as: {
+      description: "Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
+      control: false,
+      table: { type: { summary: 'ElementType' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the root element.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    children: {
+      description: 'Text or React node rendered inside the chip.',
+      control: 'text',
+      table: { type: { summary: 'ReactNode' } }
+    }
+  },
+  args: {
+    children: 'Published',
+    variant: 'solid'
+  }
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SolidDefault: Story = {};
+
+export const OutlinedIndigo: Story = {
+  args: {
+    variant: 'outlined',
+    tone: 'indigo-700',
+    children: 'Draft'
+  }
+};
+
+export const OutlinedCyan: Story = {
+  args: {
+    variant: 'outlined',
+    tone: 'cyan-700',
+    children: 'Archived'
+  }
+};
+
+export const ToneMatrix: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Chip variant="solid">Default</Chip>
+      <Chip variant="solid" tone="indigo-700">Indigo</Chip>
+      <Chip variant="solid" tone="cyan-700">Cyan</Chip>
+      <Chip variant="solid" tone="rose-600">Rose</Chip>
+      <Chip variant="outlined">Default</Chip>
+      <Chip variant="outlined" tone="indigo-700">Indigo</Chip>
+      <Chip variant="outlined" tone="cyan-700">Cyan</Chip>
+      <Chip variant="outlined" tone="rose-600">Rose</Chip>
+    </div>
+  )
+};