design system token v0.1

2026-04-13 15:33:00 -05:00
parent 52b4156653
commit c3215945f2
63 changed files with 11562 additions and 181 deletions
--- a/stories/Primitives/Toggle.stories.tsx
+++ b/stories/Primitives/Toggle.stories.tsx
@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Bold, Italic, Underline } from 'lucide-react'
+
+import { Toggle } from '@/components/ui/toggle'
+
+const meta = {
+  title: 'Primitives/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Toggle>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: <Bold className="size-4" />,
+    'aria-label': 'Toggle bold',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: <Italic className="size-4" />,
+    'aria-label': 'Toggle italic',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: <Bold className="size-4" />,
+    'aria-label': 'Toggle bold',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: <Bold className="size-4" />,
+    'aria-label': 'Toggle bold',
+  },
+}
+
+export const WithText: Story = {
+  args: {
+    children: (
+      <>
+        <Italic className="size-4" />
+        Italic
+      </>
+    ),
+    'aria-label': 'Toggle italic',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: <Bold className="size-4" />,
+    'aria-label': 'Toggle bold',
+  },
+}
+
+export const Pressed: Story = {
+  args: {
+    defaultPressed: true,
+    children: <Bold className="size-4" />,
+    'aria-label': 'Toggle bold',
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <span className="w-20 text-sm text-muted-foreground">default</span>
+        <Toggle size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
+        <Toggle size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
+        <Toggle size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="w-20 text-sm text-muted-foreground">outline</span>
+        <Toggle variant="outline" size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
+        <Toggle variant="outline" size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
+        <Toggle variant="outline" size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
+      </div>
+    </div>
+  ),
+}