laif-ds 0.2.74 → 0.2.76

package/dist/agent-docs/components/Stepper.md

@@ -1,67 +1,93 @@
- # Stepper (Primitives)
- 
- ## Overview
- 
- Accessible stepper primitives to build multi-step flows with keyboard navigation, indicators, separators and panels. Supports horizontal and vertical layouts.
- 
- ---
- 
- ## Subcomponents & Props
- 
- - **Stepper**: Root context.
-   - `defaultValue?: number` (default `1`)
-   - `value?: number`, `onValueChange?: (n:number)=>void`
-   - `orientation?: "horizontal" | "vertical"` (default `"horizontal"`)
-   - `indicators?: { active?, completed?, inactive?, loading? }`
- - **StepperItem**: Defines a step. Props: `step` (number), `completed?`, `disabled?`, `loading?`, `orientation?`.
- - **StepperTrigger**: Click/keyboard target to activate step. Props: `size?: "sm"|"default"|"lg"`.
- - **StepperIndicator**: Circular indicator; accepts `size`.
- - **StepperTitle / StepperDescription**: Labels; accept `size`.
- - **StepperSeparator**: Visual separator between steps; respects orientation.
- - **StepperNav**: Wraps triggers; accepts `orientation?`.
- - **StepperPanel**: Container for contents.
- - **StepperContent**: Conditional render area for a given `value` (step id). `forceMount?` keeps DOM mounted.
- 
- ---
- 
- ## Behavior
- 
- - **Keyboard**: Arrow keys navigate between triggers; Home/End jump to first/last; Enter/Space selects.
- - **Controlled/Uncontrolled**: Use `value/onValueChange` or `defaultValue`.
- - **Indicators**: Provide custom nodes for states via `indicators`.
- 
- ---
- 
- ## Example
- 
- ```tsx
- import { Stepper, StepperNav, StepperItem, StepperTrigger, StepperIndicator, StepperTitle, StepperSeparator, StepperPanel, StepperContent } from "laif-ds";
- 
- export function BasicStepper() {
-   const [step, setStep] = React.useState(1);
-   return (
-     <Stepper value={step} onValueChange={setStep}>
-       <div className="flex w-full flex-col">
-         <StepperNav>
-           <StepperItem step={1}><StepperTrigger><StepperIndicator>1</StepperIndicator><StepperTitle>Account</StepperTitle></StepperTrigger><StepperSeparator/></StepperItem>
-           <StepperItem step={2}><StepperTrigger><StepperIndicator>2</StepperIndicator><StepperTitle>Profile</StepperTitle></StepperTrigger><StepperSeparator/></StepperItem>
-           <StepperItem step={3}><StepperTrigger><StepperIndicator>3</StepperIndicator><StepperTitle>Done</StepperTitle></StepperTrigger></StepperItem>
-         </StepperNav>
-         <StepperPanel className="mt-6">
-           <StepperContent value={1}>Step 1</StepperContent>
-           <StepperContent value={2}>Step 2</StepperContent>
-           <StepperContent value={3}>Step 3</StepperContent>
-         </StepperPanel>
-       </div>
-     </Stepper>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Focus**: Triggers manage focus order for accessible navigation.
- - **Layouts**: Use `orientation="vertical"` to show left rail of steps with content on the right.
- 
+# Stepper (Primitives)
+
+## Overview
+
+Accessible stepper primitives to build multi-step flows with keyboard navigation, indicators, separators and panels. Supports horizontal and vertical layouts.
+
+---
+
+## Subcomponents & Props
+
+- **Stepper**: Root context.
+  - `defaultValue?: number` (default `1`)
+  - `value?: number`, `onValueChange?: (n:number)=>void`
+  - `orientation?: "horizontal" | "vertical"` (default `"horizontal"`)
+  - `indicators?: { active?, completed?, inactive?, loading? }`
+- **StepperItem**: Defines a step. Props: `step` (number), `completed?`, `disabled?`, `loading?`, `orientation?`.
+- **StepperTrigger**: Click/keyboard target to activate step. Props: `size?: "sm"|"default"|"lg"`.
+- **StepperIndicator**: Circular indicator; accepts `size`.
+- **StepperTitle / StepperDescription**: Labels; accept `size`.
+- **StepperSeparator**: Visual separator between steps; respects orientation.
+- **StepperNav**: Wraps triggers; accepts `orientation?`.
+- **StepperPanel**: Container for contents.
+- **StepperContent**: Conditional render area for a given `value` (step id). `forceMount?` keeps DOM mounted.
+
+---
+
+## Behavior
+
+- **Keyboard**: Arrow keys navigate between triggers; Home/End jump to first/last; Enter/Space selects.
+- **Controlled/Uncontrolled**: Use `value/onValueChange` or `defaultValue`.
+- **Indicators**: Provide custom nodes for states via `indicators`.
+
+---
+
+## Example
+
+```tsx
+import {
+  Stepper,
+  StepperNav,
+  StepperItem,
+  StepperTrigger,
+  StepperIndicator,
+  StepperTitle,
+  StepperSeparator,
+  StepperPanel,
+  StepperContent,
+} from "laif-ds";
+
+export function BasicStepper() {
+  const [step, setStep] = React.useState(1);
+  return (
+    <Stepper value={step} onValueChange={setStep}>
+      <div className="flex w-full flex-col">
+        <StepperNav>
+          <StepperItem step={1}>
+            <StepperTrigger>
+              <StepperIndicator>1</StepperIndicator>
+              <StepperTitle>Account</StepperTitle>
+            </StepperTrigger>
+            <StepperSeparator />
+          </StepperItem>
+          <StepperItem step={2}>
+            <StepperTrigger>
+              <StepperIndicator>2</StepperIndicator>
+              <StepperTitle>Profile</StepperTitle>
+            </StepperTrigger>
+            <StepperSeparator />
+          </StepperItem>
+          <StepperItem step={3}>
+            <StepperTrigger>
+              <StepperIndicator>3</StepperIndicator>
+              <StepperTitle>Done</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
+        </StepperNav>
+        <StepperPanel className="mt-6">
+          <StepperContent value={1}>Step 1</StepperContent>
+          <StepperContent value={2}>Step 2</StepperContent>
+          <StepperContent value={3}>Step 3</StepperContent>
+        </StepperPanel>
+      </div>
+    </Stepper>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Focus**: Triggers manage focus order for accessible navigation.
+- **Layouts**: Use `orientation="vertical"` to show left rail of steps with content on the right.

package/dist/agent-docs/components/Switch.md

@@ -1,42 +1,41 @@
- # Switch
- 
- ## Overview
- 
- Accessible on/off toggle built on Radix Switch with DS tokens and smooth thumb slide.
- 
- ---
- 
- ## Props
- 
- Inherits Radix Switch props:
- 
- - `checked?`, `defaultChecked?`
- - `onCheckedChange?(checked: boolean)`
- - `disabled?`, `required?`, `name?`, `value?`
- 
- ---
- 
- ## Example
- 
- ```tsx
- import * as React from "react";
- import { Switch } from "laif-ds";
- 
- export function ControlledSwitch() {
-   const [checked, setChecked] = React.useState(false);
-   return (
-     <div className="flex items-center gap-2">
-       <Switch id="wifi" checked={checked} onCheckedChange={setChecked} />
-       <label htmlFor="wifi">Wi‑Fi {checked ? "on" : "off"}</label>
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - Track uses `bg-d-primary` when checked and `bg-d-foreground/20` when unchecked.
- - Thumb translation is optimized for a 32px track with 16px thumb.
- 
+# Switch
+
+## Overview
+
+Accessible on/off toggle built on Radix Switch with DS tokens and smooth thumb slide.
+
+---
+
+## Props
+
+Inherits Radix Switch props:
+
+- `checked?`, `defaultChecked?`
+- `onCheckedChange?(checked: boolean)`
+- `disabled?`, `required?`, `name?`, `value?`
+
+---
+
+## Example
+
+```tsx
+import * as React from "react";
+import { Switch } from "laif-ds";
+
+export function ControlledSwitch() {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <div className="flex items-center gap-2">
+      <Switch id="wifi" checked={checked} onCheckedChange={setChecked} />
+      <label htmlFor="wifi">Wi‑Fi {checked ? "on" : "off"}</label>
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- Track uses `bg-d-primary` when checked and `bg-d-foreground/20` when unchecked.
+- Thumb translation is optimized for a 32px track with 16px thumb.

package/dist/agent-docs/components/TableSkeleton.md

@@ -8,14 +8,14 @@ Skeleton placeholder for tables. Renders a header row and a configurable number
 
 ## Props
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `headerRow` | `string[]` | `[]` | Column headers. If empty, headers are skeletons |
-| `rowCount` | `number` | `5` | Number of skeleton rows |
-| `columnCount` | `number` | `5` | Used when `headerRow` is empty to define columns |
-| `className` | `string` | `undefined` | Additional wrapper classes |
-| `cornerHeaderFrom` | `string` | `undefined` | Top-left corner label (top-left) |
-| `cornerHeaderTo` | `string` | `undefined` | Top-left corner label (bottom-right) |
+| Prop               | Type       | Default     | Description                                      |
+| ------------------ | ---------- | ----------- | ------------------------------------------------ |
+| `headerRow`        | `string[]` | `[]`        | Column headers. If empty, headers are skeletons  |
+| `rowCount`         | `number`   | `5`         | Number of skeleton rows                          |
+| `columnCount`      | `number`   | `5`         | Used when `headerRow` is empty to define columns |
+| `className`        | `string`   | `undefined` | Additional wrapper classes                       |
+| `cornerHeaderFrom` | `string`   | `undefined` | Top-left corner label (top-left)                 |
+| `cornerHeaderTo`   | `string`   | `undefined` | Top-left corner label (bottom-right)             |
 
 ---
 

package/dist/agent-docs/components/Tabs.md

@@ -1,86 +1,106 @@
- # 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.
- 
+# 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.

package/dist/agent-docs/components/TextArea.md

@@ -1,52 +1,51 @@
- # TextArea
- 
- ## Overview
- 
- Textarea with optional label wrapper and design-system focus/invalid styles. Accepts all native `<textarea>` props.
- 
- ---
- 
- ## Props
- 
- | Prop             | Type               | Default     | Description |
- | ---------------- | ------------------ | ----------- | ----------- |
- | `label`          | `React.ReactNode`  | `undefined` | Optional label text/node above the textarea. |
- | `labelClassName` | `string`           | `undefined` | Classes for `Label`. |
- | `wrpClassName`   | `string`           | `undefined` | Wrapper classes. |
- | `id`             | `string`           | `auto`      | If omitted and `label` is provided, an id is generated. |
- | `...props`       | `React.ComponentProps<'textarea'>` | — | All native textarea props (e.g., `rows`, `placeholder`, `disabled`). |
- 
- ---
- 
- ## Behavior
- 
- - **Auto id**: When `label` exists and `id` is not provided, an id is generated and linked via `Label htmlFor`.
- - **Styling**: Uses DS tokens for border, focus ring, disabled, and invalid states (`aria-invalid`).
- 
- ---
- 
- ## Example
- 
- ```tsx
- import { Textarea } from "laif-ds";
- 
- export function Example() {
-   return (
-     <Textarea
-       label="Descrizione"
-       placeholder="Scrivi qui..."
-       defaultValue="Testo di esempio"
-       rows={4}
-       wrpClassName="w-[500px]"
-     />
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Validation**: Add `aria-invalid` to reflect error state.
- - **Resize**: Control with native CSS `resize` via `className` if needed.
- 
+# TextArea
+
+## Overview
+
+Textarea with optional label wrapper and design-system focus/invalid styles. Accepts all native `<textarea>` props.
+
+---
+
+## Props
+
+| Prop             | Type                               | Default     | Description                                                          |
+| ---------------- | ---------------------------------- | ----------- | -------------------------------------------------------------------- |
+| `label`          | `React.ReactNode`                  | `undefined` | Optional label text/node above the textarea.                         |
+| `labelClassName` | `string`                           | `undefined` | Classes for `Label`.                                                 |
+| `wrpClassName`   | `string`                           | `undefined` | Wrapper classes.                                                     |
+| `id`             | `string`                           | `auto`      | If omitted and `label` is provided, an id is generated.              |
+| `...props`       | `React.ComponentProps<'textarea'>` | —           | All native textarea props (e.g., `rows`, `placeholder`, `disabled`). |
+
+---
+
+## Behavior
+
+- **Auto id**: When `label` exists and `id` is not provided, an id is generated and linked via `Label htmlFor`.
+- **Styling**: Uses DS tokens for border, focus ring, disabled, and invalid states (`aria-invalid`).
+
+---
+
+## Example
+
+```tsx
+import { Textarea } from "laif-ds";
+
+export function Example() {
+  return (
+    <Textarea
+      label="Descrizione"
+      placeholder="Scrivi qui..."
+      defaultValue="Testo di esempio"
+      rows={4}
+      wrpClassName="w-[500px]"
+    />
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Validation**: Add `aria-invalid` to reflect error state.
+- **Resize**: Control with native CSS `resize` via `className` if needed.