feat: toggle component docs

docs/src/stories/Toggle/Item.stories.tsx

@@ -0,0 +1,70 @@
+import { Toggle, ToggleItemProps } from '@droz-js/visu'
+import { Meta, StoryObj } from '@storybook/react'
+import { Alien } from 'phosphor-react'
+
+const meta: Meta<ToggleItemProps> = {
+  title: 'Toggle/Item',
+  component: Toggle.Item,
+  argTypes: {
+    children: {
+      control: 'none',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+      type: { name: 'other', required: false, value: 'React.ReactNode' },
+    },
+    text: {
+      control: 'text',
+      description: 'Aplica o text em ToggleItem',
+      table: {
+        type: { summary: 'text' },
+      },
+      type: { name: 'string', required: false },
+    },
+    value: {
+      control: 'text',
+      description: 'Aplica o value em ToggleItem',
+      table: {
+        type: { summary: 'text' },
+      },
+      type: { name: 'string', required: true },
+    },
+    icon: {
+      control: 'text',
+      description: 'Aplica o icon em ToggleItem',
+      table: {
+        type: { summary: 'text' },
+      },
+      type: { name: 'string', required: false },
+    },
+    notification: {
+      control: 'boolean',
+      description: 'Aplica o notification em ToggleItem',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      type: { name: 'boolean', required: false },
+    },
+  },
+  args: {
+    children: '',
+    text: 'Alien',
+    icon: <Alien />,
+    value: 'alien',
+  },
+} as Meta<ToggleItemProps>
+
+export default meta
+type ToggleItemStory = StoryObj<ToggleItemProps>
+
+export const Comum: ToggleItemStory = {
+  render: (args: ToggleItemProps) => {
+    return (
+      <Toggle.Root type="single" expanded>
+        <Toggle.Item {...args} />
+      </Toggle.Root>
+    )
+  },
+}

docs/src/stories/Toggle/Toggle.stories.tsx

@@ -0,0 +1,61 @@
+import { Toggle, ToggleRootProps } from '@droz-js/visu'
+import { Meta, StoryObj } from '@storybook/react'
+import { Alien, FlyingSaucer, Planet } from 'phosphor-react'
+
+const meta: Meta<ToggleRootProps> = {
+  title: 'Toggle/Toggle',
+  component: Toggle.Root,
+  argTypes: {
+    children: {
+      control: 'none',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+      type: { name: 'other', required: false, value: 'React.ReactNode' },
+    },
+    expanded: {
+      control: 'boolean',
+      description: 'Aplica o expanded em ToggleToggle',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+      },
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+    },
+    type: {
+      control: 'inline-radio',
+      description: 'Aplica o type em ToggleToggle',
+      options: ['multiple', 'single'] as ToggleRootProps['type'][],
+      table: {
+        type: {
+          summary: ['multiple', 'single'].join('|'),
+        },
+      },
+      type: { name: 'string', required: true },
+    },
+  },
+  args: {
+    children: '',
+    type: 'single',
+    expanded: true,
+  },
+} as Meta<ToggleRootProps>
+
+export default meta
+type ToggleRootStory = StoryObj<ToggleRootProps>
+
+export const Comum: ToggleRootStory = {
+  render: (args: ToggleRootProps) => {
+    return (
+      <Toggle.Root {...args}>
+        <Toggle.Item value="ufo" text="UFO" icon={<FlyingSaucer />} />
+        <Toggle.Item value="alien" text="Alien" icon={<Alien />} />
+        <Toggle.Item value="planet" text="Planet" icon={<Planet />} />
+      </Toggle.Root>
+    )
+  },
+}