laif-ds 0.2.74 → 0.2.76

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

@@ -1,132 +1,131 @@
- # Select (Deprecated)
- 
- ## Overview
- 
- Single-selection dropdown built on Radix Select.
- 
- - ⚠️ This component is deprecated. Prefer `AppSelect` for new code.
- 
- ---
- 
- ## Subcomponents & Props
- 
- - **Select**: Root container with optional label
-   - `size`: `"sm" | "default" | "lg"` (default `"default"`)
-   - `label`: `string | React.ReactNode`
-   - `className`, `labelClassName`
- - **SelectTrigger**: Button that opens the list
-   - `size?`: optional override of context size
- - **SelectContent**: Floating list panel (Radix Content props)
- - **SelectGroup**: Group wrapper
- - **SelectItem**: Option row
- - **SelectLabel**: Group label
- - **SelectSeparator**: Separator line
- - **SelectValue**: Selected value placeholder/slot
- - **SelectScrollUpButton / SelectScrollDownButton**: Scroll affordances
- 
- Root also exposes typical controlled props from Radix (`value`, `defaultValue`, `onValueChange`, `disabled`, `required`, `name`).
- 
- ---
- 
- ## Behavior
- 
- - **Sizes**: `size` controls trigger height and font size.
- - **Keyboard**: Typeahead, arrow navigation, Enter/Space to select.
- - **Accessibility**: Labels via `Label` + `htmlFor`/`id`.
- 
- ---
- 
- ## Examples
- 
- ### Interactive
- 
- ```tsx
- import { useState } from "react";
- import { Label } from "laif-ds";
- import {
-   Select,
-   SelectTrigger,
-   SelectValue,
-   SelectContent,
-   SelectGroup,
-   SelectLabel,
-   SelectItem,
-   SelectSeparator,
- } from "laif-ds";
- 
- export function InteractiveSelect() {
-   const [value, setValue] = useState("");
-   return (
-     <div className="w-full max-w-sm space-y-6">
-       <div className="space-y-2">
-         <Label htmlFor="framework">Framework</Label>
-         <Select value={value} onValueChange={setValue}>
-           <SelectTrigger id="framework" className="w-full">
-             <SelectValue placeholder="Seleziona un framework" />
-           </SelectTrigger>
-           <SelectContent>
-             <SelectGroup>
-               <SelectLabel>Frontend</SelectLabel>
-               <SelectItem value="react">React</SelectItem>
-               <SelectItem value="vue">Vue</SelectItem>
-               <SelectItem value="angular">Angular</SelectItem>
-             </SelectGroup>
-             <SelectSeparator />
-             <SelectGroup>
-               <SelectLabel>Backend</SelectLabel>
-               <SelectItem value="node">Node.js</SelectItem>
-               <SelectItem value="django">Django</SelectItem>
-             </SelectGroup>
-           </SelectContent>
-         </Select>
-       </div>
-     </div>
-   );
- }
- ```
- 
- ### Sizes
- 
- ```tsx
- import {
-   Select,
-   SelectTrigger,
-   SelectValue,
-   SelectContent,
-   SelectItem,
- } from "laif-ds";
- 
- export function SelectSizes() {
-   return (
-     <div className="flex flex-col space-y-4">
-       <Select>
-         <SelectTrigger size="sm" className="w-[180px]">
-           <SelectValue placeholder="Small" />
-         </SelectTrigger>
-         <SelectContent>
-           <SelectItem value="1">Opzione 1</SelectItem>
-           <SelectItem value="2">Opzione 2</SelectItem>
-         </SelectContent>
-       </Select>
- 
-       <Select>
-         <SelectTrigger className="w-[180px]">
-           <SelectValue placeholder="Default" />
-         </SelectTrigger>
-         <SelectContent>
-           <SelectItem value="1">Opzione 1</SelectItem>
-           <SelectItem value="2">Opzione 2</SelectItem>
-         </SelectContent>
-       </Select>
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Use AppSelect**: Prefer `AppSelect` for production features (search, multiselect, async, etc.).
- - **A11y**: Keep labels synchronized with triggers using `id` and `htmlFor`.
- 
+# Select (Deprecated)
+
+## Overview
+
+Single-selection dropdown built on Radix Select.
+
+- ⚠️ This component is deprecated. Prefer `AppSelect` for new code.
+
+---
+
+## Subcomponents & Props
+
+- **Select**: Root container with optional label
+  - `size`: `"sm" | "default" | "lg"` (default `"default"`)
+  - `label`: `string | React.ReactNode`
+  - `className`, `labelClassName`
+- **SelectTrigger**: Button that opens the list
+  - `size?`: optional override of context size
+- **SelectContent**: Floating list panel (Radix Content props)
+- **SelectGroup**: Group wrapper
+- **SelectItem**: Option row
+- **SelectLabel**: Group label
+- **SelectSeparator**: Separator line
+- **SelectValue**: Selected value placeholder/slot
+- **SelectScrollUpButton / SelectScrollDownButton**: Scroll affordances
+
+Root also exposes typical controlled props from Radix (`value`, `defaultValue`, `onValueChange`, `disabled`, `required`, `name`).
+
+---
+
+## Behavior
+
+- **Sizes**: `size` controls trigger height and font size.
+- **Keyboard**: Typeahead, arrow navigation, Enter/Space to select.
+- **Accessibility**: Labels via `Label` + `htmlFor`/`id`.
+
+---
+
+## Examples
+
+### Interactive
+
+```tsx
+import { useState } from "react";
+import { Label } from "laif-ds";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from "laif-ds";
+
+export function InteractiveSelect() {
+  const [value, setValue] = useState("");
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="framework">Framework</Label>
+        <Select value={value} onValueChange={setValue}>
+          <SelectTrigger id="framework" className="w-full">
+            <SelectValue placeholder="Seleziona un framework" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Frontend</SelectLabel>
+              <SelectItem value="react">React</SelectItem>
+              <SelectItem value="vue">Vue</SelectItem>
+              <SelectItem value="angular">Angular</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Backend</SelectLabel>
+              <SelectItem value="node">Node.js</SelectItem>
+              <SelectItem value="django">Django</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
+```
+
+### Sizes
+
+```tsx
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "laif-ds";
+
+export function SelectSizes() {
+  return (
+    <div className="flex flex-col space-y-4">
+      <Select>
+        <SelectTrigger size="sm" className="w-[180px]">
+          <SelectValue placeholder="Small" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Opzione 1</SelectItem>
+          <SelectItem value="2">Opzione 2</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Default" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Opzione 1</SelectItem>
+          <SelectItem value="2">Opzione 2</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Use AppSelect**: Prefer `AppSelect` for production features (search, multiselect, async, etc.).
+- **A11y**: Keep labels synchronized with triggers using `id` and `htmlFor`.

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

@@ -18,7 +18,14 @@ Side sheet/dialog component with overlay, animated content, header/footer and cl
 ## Example
 
 ```tsx
-import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "laif-ds";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "laif-ds";
 import { Button } from "laif-ds";
 
 export function FiltersSheet() {

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

@@ -8,11 +8,11 @@ Client-side code highlighter using Shiki tokens. Falls back to plain `<pre><code
 
 ## Props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `children` | `string` | Code string to highlight |
-| `language` | `string` | Language key supported by Shiki |
-| `className` | `string` | Optional classes for `<pre>` |
+| Prop        | Type     | Description                     |
+| ----------- | -------- | ------------------------------- |
+| `children`  | `string` | Code string to highlight        |
+| `language`  | `string` | Language key supported by Shiki |
+| `className` | `string` | Optional classes for `<pre>`    |
 
 ---
 

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

@@ -1,85 +1,94 @@
- # Sidebar (Primitives)
- 
- ## Overview
- 
- Low-level primitives to build responsive sidebars with desktop/offcanvas modes, collapsible icon mode, floating/inset variants, groups, menus, badges, actions and a keyboard shortcut (⌘/Ctrl + B) to toggle.
- 
- ---
- 
- ## Main Components
- 
- - **SidebarProvider**: Context provider. Props: `defaultOpen?`, `open?`, `onOpenChange?`.
- - **Sidebar**: Shell. Props: `side="left|right"`, `variant="sidebar|floating|inset"`, `collapsible="offcanvas|icon|none"`.
- - **SidebarTrigger**: Button to toggle (uses provider).
- - **SidebarRail**: Thin draggable/toggle rail.
- - **SidebarInset**: Main content wrapper that adapts to inset variant.
- - **SidebarHeader / SidebarFooter**: Top/bottom containers.
- - **SidebarContent**: Scrollable body.
- - **SidebarGroup / SidebarGroupLabel / SidebarGroupAction / SidebarGroupContent**: Labeled groups with optional action.
- - **SidebarMenu / SidebarMenuItem / SidebarMenuButton / SidebarMenuAction / SidebarMenuBadge**: Menu building blocks.
- - **SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton**: Nested menus.
- 
- ---
- 
- ## Behavior
- 
- - **Mobile**: Offcanvas via `Sheet` when on mobile; desktop uses fixed panel.
- - **Collapsible**: `icon` mode shows only icons and tooltips; `offcanvas` moves panel off-screen.
- - **Keyboard**: Toggle with ⌘/Ctrl + B.
- - **Tooltips**: Menu buttons show tooltips only when collapsed on desktop.
- 
- ---
- 
- ## Example
- 
- ```tsx
- import {
-   SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter,
-   SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuBadge,
-   SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarTrigger
- } from "laif-ds";
- 
- export function Shell() {
-   return (
-     <SidebarProvider>
-       <div className="flex h-[100vh] overflow-hidden">
-         <Sidebar>
-           <SidebarHeader>Header</SidebarHeader>
-           <SidebarContent>
-             <SidebarMenu>
-               <SidebarMenuItem>
-                 <SidebarMenuButton isActive>
-                   <span>Dashboard</span>
-                 </SidebarMenuButton>
-                 <SidebarMenuBadge>3</SidebarMenuBadge>
-               </SidebarMenuItem>
-             </SidebarMenu>
-             <SidebarGroup>
-               <SidebarGroupLabel>Section</SidebarGroupLabel>
-               <SidebarGroupContent>
-                 <SidebarMenu>
-                   <SidebarMenuItem>
-                     <SidebarMenuButton>Item</SidebarMenuButton>
-                   </SidebarMenuItem>
-                 </SidebarMenu>
-               </SidebarGroupContent>
-             </SidebarGroup>
-           </SidebarContent>
-           <SidebarFooter>Footer</SidebarFooter>
-         </Sidebar>
-         <div className="flex-1 overflow-auto p-4">
-           <SidebarTrigger />
-         </div>
-       </div>
-     </SidebarProvider>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Icons**: Use `laif-ds` `Icon` component inside buttons.
- - **A11y**: Focus management, ARIA attributes and tooltips included in primitives.
- 
+# Sidebar (Primitives)
+
+## Overview
+
+Low-level primitives to build responsive sidebars with desktop/offcanvas modes, collapsible icon mode, floating/inset variants, groups, menus, badges, actions and a keyboard shortcut (⌘/Ctrl + B) to toggle.
+
+---
+
+## Main Components
+
+- **SidebarProvider**: Context provider. Props: `defaultOpen?`, `open?`, `onOpenChange?`.
+- **Sidebar**: Shell. Props: `side="left|right"`, `variant="sidebar|floating|inset"`, `collapsible="offcanvas|icon|none"`.
+- **SidebarTrigger**: Button to toggle (uses provider).
+- **SidebarRail**: Thin draggable/toggle rail.
+- **SidebarInset**: Main content wrapper that adapts to inset variant.
+- **SidebarHeader / SidebarFooter**: Top/bottom containers.
+- **SidebarContent**: Scrollable body.
+- **SidebarGroup / SidebarGroupLabel / SidebarGroupAction / SidebarGroupContent**: Labeled groups with optional action.
+- **SidebarMenu / SidebarMenuItem / SidebarMenuButton / SidebarMenuAction / SidebarMenuBadge**: Menu building blocks.
+- **SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton**: Nested menus.
+
+---
+
+## Behavior
+
+- **Mobile**: Offcanvas via `Sheet` when on mobile; desktop uses fixed panel.
+- **Collapsible**: `icon` mode shows only icons and tooltips; `offcanvas` moves panel off-screen.
+- **Keyboard**: Toggle with ⌘/Ctrl + B.
+- **Tooltips**: Menu buttons show tooltips only when collapsed on desktop.
+
+---
+
+## Example
+
+```tsx
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuBadge,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarTrigger,
+} from "laif-ds";
+
+export function Shell() {
+  return (
+    <SidebarProvider>
+      <div className="flex h-[100vh] overflow-hidden">
+        <Sidebar>
+          <SidebarHeader>Header</SidebarHeader>
+          <SidebarContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton isActive>
+                  <span>Dashboard</span>
+                </SidebarMenuButton>
+                <SidebarMenuBadge>3</SidebarMenuBadge>
+              </SidebarMenuItem>
+            </SidebarMenu>
+            <SidebarGroup>
+              <SidebarGroupLabel>Section</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>Item</SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>Footer</SidebarFooter>
+        </Sidebar>
+        <div className="flex-1 overflow-auto p-4">
+          <SidebarTrigger />
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Icons**: Use `laif-ds` `Icon` component inside buttons.
+- **A11y**: Focus management, ARIA attributes and tooltips included in primitives.

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

@@ -1,58 +1,62 @@
- # Slider
- 
- ## Overview
- 
- Radix-based slider with DS styling, optional value labels, sticky labels on thumbs, predefined step snapping, and center-offset fill.
- 
- ---
- 
- ## Props
- 
- | Prop              | Type                                               | Default     | Description |
- | ----------------- | -------------------------------------------------- | ----------- | ----------- |
- | `value`           | `number[]`                                         | `undefined` | Controlled value (single `[n]` or range `[a,b]`). |
- | `defaultValue`    | `number[]`                                         | `undefined` | Uncontrolled initial value. |
- | `min`             | `number`                                           | `0`         | Minimum. |
- | `max`             | `number`                                           | `100`       | Maximum. |
- | `step`            | `number`                                           | `1`         | Increment. |
- | `size`            | `"base" | "medium" | "large"`                 | `"base"`   | Track/thumb sizing. |
- | `formatValue`     | `(value: number) => string`                        | `undefined` | Formatter for labels. |
- | `showValues`      | `boolean`                                          | `false`     | Show min/current (and max for single-value). |
- | `showStickyLabel` | `boolean`                                          | `false`     | Show a `Badge` over the thumb with current value. |
- | `stickyLabelSuffix`| `string`                                          | `""`       | Suffix for sticky label. |
- | `fillOffset`      | `boolean`                                          | `false`     | Fill track from center/`offsetValue` to current value. |
- | `offsetValue`     | `number`                                           | `undefined` | Center reference for `fillOffset`. |
- | `steps`           | `number[]`                                         | `undefined` | Predefined snapping steps. |
- | `showStepMarkers` | `boolean`                                          | `false`     | Visual markers for `steps`. |
- 
- Inherits other Radix `Slider` props.
- 
- ---
- 
- ## Examples
- 
- ```tsx
- import * as React from "react";
- import { Slider } from "laif-ds";
- 
- export function Controlled() {
-   const [value, setValue] = React.useState([25]);
-   return <Slider value={value} onValueChange={setValue} size="medium" />;
- }
- 
- export function WithSteps() {
-   const [val, setVal] = React.useState([50]);
-   return (
-     <Slider value={val} onValueChange={setVal} steps={[0,25,50,75,100]} showStepMarkers />
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Snapping**: When `steps` provided, values snap to nearest step.
- - **Range**: Provide two values like `[min, max]` to enable a range slider.
- - **Theming**: Uses DS tokens for track, range and thumb states.
- 
+# Slider
+
+## Overview
+
+Radix-based slider with DS styling, optional value labels, sticky labels on thumbs, predefined step snapping, and center-offset fill.
+
+---
+
+## Props
+
+| Prop                | Type                        | Default     | Description                                            |
+| ------------------- | --------------------------- | ----------- | ------------------------------------------------------ | -------- | ------------------- |
+| `value`             | `number[]`                  | `undefined` | Controlled value (single `[n]` or range `[a,b]`).      |
+| `defaultValue`      | `number[]`                  | `undefined` | Uncontrolled initial value.                            |
+| `min`               | `number`                    | `0`         | Minimum.                                               |
+| `max`               | `number`                    | `100`       | Maximum.                                               |
+| `step`              | `number`                    | `1`         | Increment.                                             |
+| `size`              | `"base"                     | "medium"    | "large"`                                               | `"base"` | Track/thumb sizing. |
+| `formatValue`       | `(value: number) => string` | `undefined` | Formatter for labels.                                  |
+| `showValues`        | `boolean`                   | `false`     | Show min/current (and max for single-value).           |
+| `showStickyLabel`   | `boolean`                   | `false`     | Show a `Badge` over the thumb with current value.      |
+| `stickyLabelSuffix` | `string`                    | `""`        | Suffix for sticky label.                               |
+| `fillOffset`        | `boolean`                   | `false`     | Fill track from center/`offsetValue` to current value. |
+| `offsetValue`       | `number`                    | `undefined` | Center reference for `fillOffset`.                     |
+| `steps`             | `number[]`                  | `undefined` | Predefined snapping steps.                             |
+| `showStepMarkers`   | `boolean`                   | `false`     | Visual markers for `steps`.                            |
+
+Inherits other Radix `Slider` props.
+
+---
+
+## Examples
+
+```tsx
+import * as React from "react";
+import { Slider } from "laif-ds";
+
+export function Controlled() {
+  const [value, setValue] = React.useState([25]);
+  return <Slider value={value} onValueChange={setValue} size="medium" />;
+}
+
+export function WithSteps() {
+  const [val, setVal] = React.useState([50]);
+  return (
+    <Slider
+      value={val}
+      onValueChange={setVal}
+      steps={[0, 25, 50, 75, 100]}
+      showStepMarkers
+    />
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Snapping**: When `steps` provided, values snap to nearest step.
+- **Range**: Provide two values like `[min, max]` to enable a range slider.
+- **Theming**: Uses DS tokens for track, range and thumb states.

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

@@ -17,5 +17,6 @@ export function App() {
 ```
 
 Notes:
+
 - Sets CSS variables for popover colors to match the design system
 - `theme` derives from `useTheme()` (system, light, dark)

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

@@ -8,25 +8,25 @@ Animated loading spinner component with multiple size and color variants. Provid
 
 ## Props
 
-| Prop       | Type                                                      | Default     | Description                                  |
-| ---------- | --------------------------------------------------------- | ----------- | -------------------------------------------- |
-| `size`     | `"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| number` | `"md"`      | Size of the spinner (preset or custom px)    |
-| `variant`  | `"default" \| "destructive" \| "primary" \| "secondary"`  | `"default"` | Color variant of the spinner                 |
-| `className`| `string`                                                  | `""`        | Additional Tailwind classes                  |
+| Prop        | Type                                                               | Default     | Description                               |
+| ----------- | ------------------------------------------------------------------ | ----------- | ----------------------------------------- |
+| `size`      | `"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| number` | `"md"`      | Size of the spinner (preset or custom px) |
+| `variant`   | `"default" \| "destructive" \| "primary" \| "secondary"`           | `"default"` | Color variant of the spinner              |
+| `className` | `string`                                                           | `""`        | Additional Tailwind classes               |
 
 ---
 
 ## Size Mapping
 
-| Size    | Pixels |
-| ------- | ------ |
-| `xxs`   | 12px   |
-| `xs`    | 14px   |
-| `sm`    | 16px   |
-| `md`    | 20px   |
-| `lg`    | 24px   |
-| `xl`    | 28px   |
-| `xxl`   | 36px   |
+| Size  | Pixels |
+| ----- | ------ |
+| `xxs` | 12px   |
+| `xs`  | 14px   |
+| `sm`  | 16px   |
+| `md`  | 20px   |
+| `lg`  | 24px   |
+| `xl`  | 28px   |
+| `xxl` | 36px   |
 
 You can also provide a custom number for precise pixel sizing.