@inspirare/design-system 0.0.22 → 0.0.24

package/src/components/ui/table.tsx

@@ -1,8 +1,8 @@
-"use client";
+"use client"
 
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
@@ -16,7 +16,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
         {...props}
       />
     </div>
-  );
+  )
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
@@ -26,7 +26,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
       className={cn("[&_tr]:border-b", className)}
       {...props}
     />
-  );
+  )
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
@@ -36,7 +36,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
       className={cn("[&_tr:last-child]:border-0", className)}
       {...props}
     />
-  );
+  )
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
@@ -44,12 +44,12 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
@@ -57,12 +57,12 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
@@ -70,12 +70,12 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
@@ -83,12 +83,12 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function TableCaption({
@@ -98,10 +98,10 @@ function TableCaption({
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -113,4 +113,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-};
+}

package/src/components/ui/tabs.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+
+const meta = {
+  title: 'Design System/Tabs',
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 w-full h-full flex items-center justify-center">
+      <Tabs defaultValue="account" className="w-[400px]"><TabsList><TabsTrigger value="account">Account</TabsTrigger><TabsTrigger value="password">Password</TabsTrigger></TabsList><TabsContent value="account">Make changes to your account here.</TabsContent><TabsContent value="password">Change your password here.</TabsContent></Tabs>
+    </div>
+  )
+};

package/src/components/ui/tabs.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+
+describe('Tabs Accessibility', () => {
+  it('should have no accessibility violations in basic render', async () => {
+    const Wrapper = () => (
+      <Tabs defaultValue="account" className="w-[400px]"><TabsList><TabsTrigger value="account">Account</TabsTrigger><TabsTrigger value="password">Password</TabsTrigger></TabsList><TabsContent value="account">Make changes to your account here.</TabsContent><TabsContent value="password">Change your password here.</TabsContent></Tabs>
+    );
+    const { container } = render(<Wrapper />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/components/ui/tabs.tsx

@@ -1,66 +1,106 @@
-"use client";
+"use client"
+import * as React from "react"
 
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Tabs({
   className,
+  orientation = "horizontal",
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+}: TabsPrimitive.Root.Props) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
+const tabsListVariants = cva(
+  "group/tabs-list relative inline-flex items-center justify-center p-1 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-background/50 border border-border/40 rounded-lg backdrop-blur-md shadow-sm text-muted-foreground",
+        line: "gap-1 bg-transparent text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
 function TabsList({
   className,
+  variant = "default",
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
-      )}
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
       {...props}
-    />
-  );
+    >
+      {/* Indicador que desliza horizontalmente via CSS variables do Base UI.
+          É um único elemento posicionado absolutamente — sem mount/unmount,
+          sem layoutId, puramente CSS transition. */}
+      <TabsPrimitive.Indicator
+        className="absolute rounded-md bg-primary shadow-md transition-all duration-300 ease-[cubic-bezier(0.65,0,0.35,1)]"
+        style={{
+          left: "var(--active-tab-left)",
+          top: "var(--active-tab-top)",
+          width: "var(--active-tab-width)",
+          height: "var(--active-tab-height)",
+        }}
+      />
+      {props.children}
+    </TabsPrimitive.List>
+  )
 }
 
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<"button">,
+  TabsPrimitive.Tab.Props
+>(({ className, children, ...props }, ref) => {
   return (
-    <TabsPrimitive.Trigger
+    <TabsPrimitive.Tab
+      ref={ref}
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex flex-1 md:flex-none items-center justify-center gap-1.5 rounded-md px-3 sm:px-6 py-2.5 text-xs sm:text-sm font-semibold font-[family-name:var(--font-sans)] whitespace-nowrap transition-colors duration-300 z-10 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+        "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+        "data-active:text-primary-foreground data-active:hover:bg-transparent",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring",
         className
       )}
       {...props}
-    />
-  );
-}
+    >
+      <span className="relative z-20 flex items-center justify-center gap-1.5">
+        {children}
+      </span>
+    </TabsPrimitive.Tab>
+  )
+})
+TabsTrigger.displayName = "TabsTrigger"
 
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
-    <TabsPrimitive.Content
+    <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("flex-1 text-sm outline-none", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/ui/textarea.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from "./textarea";
+
+const meta = {
+  title: 'Design System/Textarea',
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 w-full h-full flex items-center justify-center">
+      <Textarea placeholder="Type your message here." />
+    </div>
+  )
+};

package/src/components/ui/textarea.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { Textarea } from "./textarea";
+
+describe('Textarea Accessibility', () => {
+  it('should have no accessibility violations in basic render', async () => {
+    const Wrapper = () => (
+      <Textarea placeholder="Type your message here." />
+    );
+    const { container } = render(<Wrapper />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/components/ui/textarea.tsx

@@ -1,18 +1,20 @@
-import * as React from "react";
+"use client"
 
-import { cn } from "@/lib/utils";
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Textarea };
+export { Textarea }

package/src/components/ui/theme-toggle.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'Design System/ThemeToggle',
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 w-full h-full flex items-center justify-center">
+      <div className="p-4 border rounded bg-muted/50 text-muted-foreground text-sm">ThemeToggle — needs manual template</div>
+    </div>
+  )
+};

package/src/components/ui/theme-toggle.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+describe('ThemeToggle Accessibility', () => {
+  it('should have no accessibility violations in basic render', async () => {
+    const Wrapper = () => (
+      <div className="p-4 border rounded bg-muted/50 text-muted-foreground text-sm">ThemeToggle — needs manual template</div>
+    );
+    const { container } = render(<Wrapper />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/components/ui/theme-toggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -42,56 +43,53 @@ export const ThemeToggle = memo(function ThemeToggle({
     }
   };
 
-  const getThemeLabel = () => {
-    if (!mounted) return "Tema escuro";
 
-    switch (theme) {
-      case "light":
-        return "Tema claro";
-      case "dark":
-      default:
-        return "Tema escuro";
-    }
-  };
 
   const getNextThemeLabel = () => {
-    if (!mounted) return "Mudar para tema claro";
+    if (!mounted) return "Alternar tema";
 
     switch (theme) {
       case "light":
-        return "Mudar para tema escuro";
+        return "Ativar tema escuro";
       case "dark":
       default:
-        return "Mudar para tema claro";
+        return "Ativar tema claro";
     }
   };
 
   return (
     <div className="relative">
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={cycleTheme}
-        className={cn(
-          "h-9 p-0 text-primary transition-all duration-300 rounded-lg",
-          "hover:bg-accent/50 active:scale-95",
-          !showLabel ? "w-9" : "px-3 w-auto",
-          className
-        )}
-        title={getNextThemeLabel()}
-        aria-label={getThemeLabel()}
-      >
-        <div className={cn("flex items-center gap-1.5", !showLabel && "justify-center")}>
-          <div className="transition-transform duration-300 hover:rotate-12">
-            {getThemeIcon()}
-          </div>
-          {showLabel && (
-            <span className="text-sm font-medium hidden lg:inline">
-              Tema
-            </span>
-          )}
-        </div>
-      </Button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={cycleTheme}
+              className={cn(
+                "h-11 p-0 text-primary transition-all duration-300 rounded-lg md:h-9",
+                "hover:bg-accent/50 active:scale-95",
+                !showLabel ? "w-11 md:w-9" : "px-3 w-auto",
+                className
+              )}
+              aria-label={getNextThemeLabel()}
+              aria-live="polite"
+            >
+              <div className={cn("flex items-center gap-1.5", !showLabel && "justify-center")}>
+                <div className="transition-transform duration-300 hover:rotate-12">
+                  {getThemeIcon()}
+                </div>
+                {showLabel && (
+                  <span className="text-sm font-medium hidden lg:inline">
+                    Tema
+                  </span>
+                )}
+              </div>
+            </Button>
+          }
+        />
+        <TooltipContent>{getNextThemeLabel()}</TooltipContent>
+      </Tooltip>
     </div>
   );
 });

package/src/components/ui/toggle-group.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+const meta = {
+  title: 'Design System/ToggleGroup',
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 w-full h-full flex items-center justify-center">
+      <ToggleGroup><ToggleGroupItem value="bold" aria-label="Toggle bold">B</ToggleGroupItem><ToggleGroupItem value="italic" aria-label="Toggle italic">I</ToggleGroupItem></ToggleGroup>
+    </div>
+  )
+};

package/src/components/ui/toggle-group.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+describe('ToggleGroup Accessibility', () => {
+  it('should have no accessibility violations in basic render', async () => {
+    const Wrapper = () => (
+      <ToggleGroup><ToggleGroupItem value="bold" aria-label="Toggle bold">B</ToggleGroupItem><ToggleGroupItem value="italic" aria-label="Toggle italic">I</ToggleGroupItem></ToggleGroup>
+    );
+    const { container } = render(<Wrapper />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/components/ui/toggle-group.tsx

@@ -1,73 +1,89 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
 >({
   size: "default",
   variant: "default",
-});
+  spacing: 2,
+  orientation: "horizontal",
+})
 
 function ToggleGroup({
   className,
   variant,
   size,
+  spacing = 2,
+  orientation = "horizontal",
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
   return (
-    <ToggleGroupPrimitive.Root
+    <ToggleGroupPrimitive
       data-slot="toggle-group"
       data-variant={variant}
       data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
         {children}
       </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
+    </ToggleGroupPrimitive>
+  )
 }
 
 function ToggleGroupItem({
   className,
   children,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
 
   return (
-    <ToggleGroupPrimitive.Item
+    <TogglePrimitive
       data-slot="toggle-group-item"
       data-variant={context.variant || variant}
       data-size={context.size || size}
+      data-spacing={context.spacing}
       className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
         className
       )}
       {...props}
     >
       {children}
-    </ToggleGroupPrimitive.Item>
-  );
+    </TogglePrimitive>
+  )
 }
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Toggle } from "./toggle";
+
+const meta = {
+  title: 'Design System/Toggle',
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 w-full h-full flex items-center justify-center">
+      <Toggle aria-label="Toggle italic">I</Toggle>
+    </div>
+  )
+};