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.