laif-ds/dist/agent-docs/components/Tabs.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # Tabs
 
 ## Overview
 
 Radix Tabs with design-system styling. Provides a list of triggers and matching content panels, supporting horizontal and vertical orientations, disabled tabs, and manual/automatic activation.
 
 ---
 
 ## Components & Props
 
 - **Tabs** (`Root`)
   - `defaultValue?: string`
   - `value?: string`
   - `onValueChange?: (value: string) => void`
   - `orientation?: "horizontal" | "vertical"` (default `"horizontal"`)
   - `dir?: "ltr" | "rtl"` (default `"ltr"`)
   - `activationMode?: "automatic" | "manual"` (default `"automatic"`)
   - `className?: string`
 - **TabsList**: Visual container for triggers.
 - **TabsTrigger**
   - `value: string`
   - `disabled?: boolean`
   - `className?: string`
 - **TabsContent**
   - `value: string`
   - `className?: string`
 
 ---
 
 ## Behavior
 
 - **Activation**: `automatic` switches on focus; `manual` switches on click/Enter.
 - **Orientation**: Vertical layout supported via `orientation="vertical"`.
 - **Disabled**: `TabsTrigger` can be disabled and will not activate.
 
 ---
 
 ## Examples
 
 ### Default
 
 ```tsx
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "laif-ds";
 
 export function BasicTabs() {
   return (
     <Tabs defaultValue="account" className="w-[400px]">
       <TabsList className="grid w-full grid-cols-2">
         <TabsTrigger value="account">Account</TabsTrigger>
         <TabsTrigger value="password">Password</TabsTrigger>
       </TabsList>
       <TabsContent value="account">Contenuto Account</TabsContent>
       <TabsContent value="password">Contenuto Password</TabsContent>
     </Tabs>
   );
 }
 ```
 
 ### Vertical
 
 ```tsx
 export function VerticalTabs() {
   return (
     <Tabs defaultValue="tab1" orientation="vertical" className="flex w-[600px]">
       <TabsList className="flex h-auto w-[200px] flex-col">
         <TabsTrigger value="tab1" className="justify-start">Profilo</TabsTrigger>
         <TabsTrigger value="tab2" className="justify-start">Preferenze</TabsTrigger>
         <TabsTrigger value="tab3" className="justify-start">Notifiche</TabsTrigger>
       </TabsList>
       <div className="ml-4 flex-1">
         <TabsContent value="tab1" className="border-d-border rounded-md border p-4">Profilo</TabsContent>
         <TabsContent value="tab2" className="border-d-border rounded-md border p-4">Preferenze</TabsContent>
         <TabsContent value="tab3" className="border-d-border rounded-md border p-4">Notifiche</TabsContent>
       </div>
     </Tabs>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Styling**: `TabsList` uses DS tokens for backgrounds; `TabsTrigger` highlights when active.
 - **Accessibility**: Uses Radix semantics for roles/aria and keyboard navigation out of the box.