laif-ds 0.2.74 → 0.2.76

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

@@ -1,99 +1,98 @@
- # Icon
- 
- ## Overview
- 
- Wrapper around `lucide-react` icons with design-system sizes and convenient color/className support.
- 
- ---
- 
- ## Props
- 
- | Prop        | Type                                        | Default   | Description                                     |
- | ----------- | ------------------------------------------- | --------- | ----------------------------------------------- |
- | `name`      | `IconName` (key of `lucide-react` exports)  | **required** | Icon name from `lucide-react`.               |
- | `size`      | `"xs" | "sm" | "md" | "lg" | "xl"`     | `"md"`   | Predefined pixel sizes: 16, 20, 24, 32, 40.     |
- | `className` | `string`                                    | `""`      | Additional classes (e.g., color via theme tokens). |
- | `color`     | `string`                                    | `undefined` | Overrides color style directly.                 |
- 
- Any extra props are passed to the underlying `lucide-react` icon component.
- 
- ---
- 
- ## Behavior
- 
- - **Sizing**: The `size` prop maps to pixel sizes (`xs=16`, `sm=20`, `md=24`, `lg=32`, `xl=40`).
- - **Coloring**: Prefer theme tokens via `className` (e.g., `text-d-destructive`). For one-off colors, use `color`.
- - **Safety**: If `name` is not found, the component renders `null` and logs a warning.
- 
- ---
- 
- ## Examples
- 
- ### Default
- 
- ```tsx
- import { Icon } from "laif-ds";
- 
- export function DefaultIcon() {
-   return <Icon name="Check" size="md" />;
- }
- ```
- 
- ### Sizes
- 
- ```tsx
- import { Icon } from "laif-ds";
- 
- export function IconSizes() {
-   return (
-     <div className="flex items-end gap-4">
-       <div className="flex flex-col items-center gap-2">
-         <Icon name="Check" size="xs" />
-         <span className="text-xs">xs</span>
-       </div>
-       <div className="flex flex-col items-center gap-2">
-         <Icon name="Check" size="sm" />
-         <span className="text-xs">sm</span>
-       </div>
-       <div className="flex flex-col items-center gap-2">
-         <Icon name="Check" size="md" />
-         <span className="text-xs">md</span>
-       </div>
-       <div className="flex flex-col items-center gap-2">
-         <Icon name="Check" size="lg" />
-         <span className="text-xs">lg</span>
-       </div>
-       <div className="flex flex-col items-center gap-2">
-         <Icon name="Check" size="xl" />
-         <span className="text-xs">xl</span>
-       </div>
-     </div>
-   );
- }
- ```
- 
- ### Colors
- 
- ```tsx
- import { Icon } from "laif-ds";
- 
- export function IconColors() {
-   return (
-     <div className="flex gap-4">
-       <Icon name="Heart" size="lg" className="text-d-destructive" />
-       <Icon name="Heart" size="lg" className="text-d-primary" />
-       <Icon name="Heart" size="lg" className="text-d-muted-foreground" />
-       <Icon name="Heart" size="lg" color="#8B5CF6" />
-       <Icon name="Heart" size="lg" color="#EC4899" />
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Design tokens**: Use theme token classes (`text-d-*`) rather than raw Tailwind colors.
- - **Icon library**: Use only `laif-ds` `Icon` (no external icon libraries).
- 
+# Icon
+
+## Overview
+
+Wrapper around `lucide-react` icons with design-system sizes and convenient color/className support.
+
+---
+
+## Props
+
+| Prop        | Type                                       | Default      | Description                                        |
+| ----------- | ------------------------------------------ | ------------ | -------------------------------------------------- | ---- | ----- | ------ | ------------------------------------------- |
+| `name`      | `IconName` (key of `lucide-react` exports) | **required** | Icon name from `lucide-react`.                     |
+| `size`      | `"xs"                                      | "sm"         | "md"                                               | "lg" | "xl"` | `"md"` | Predefined pixel sizes: 16, 20, 24, 32, 40. |
+| `className` | `string`                                   | `""`         | Additional classes (e.g., color via theme tokens). |
+| `color`     | `string`                                   | `undefined`  | Overrides color style directly.                    |
+
+Any extra props are passed to the underlying `lucide-react` icon component.
+
+---
+
+## Behavior
+
+- **Sizing**: The `size` prop maps to pixel sizes (`xs=16`, `sm=20`, `md=24`, `lg=32`, `xl=40`).
+- **Coloring**: Prefer theme tokens via `className` (e.g., `text-d-destructive`). For one-off colors, use `color`.
+- **Safety**: If `name` is not found, the component renders `null` and logs a warning.
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import { Icon } from "laif-ds";
+
+export function DefaultIcon() {
+  return <Icon name="Check" size="md" />;
+}
+```
+
+### Sizes
+
+```tsx
+import { Icon } from "laif-ds";
+
+export function IconSizes() {
+  return (
+    <div className="flex items-end gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="Check" size="xs" />
+        <span className="text-xs">xs</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="Check" size="sm" />
+        <span className="text-xs">sm</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="Check" size="md" />
+        <span className="text-xs">md</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="Check" size="lg" />
+        <span className="text-xs">lg</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="Check" size="xl" />
+        <span className="text-xs">xl</span>
+      </div>
+    </div>
+  );
+}
+```
+
+### Colors
+
+```tsx
+import { Icon } from "laif-ds";
+
+export function IconColors() {
+  return (
+    <div className="flex gap-4">
+      <Icon name="Heart" size="lg" className="text-d-destructive" />
+      <Icon name="Heart" size="lg" className="text-d-primary" />
+      <Icon name="Heart" size="lg" className="text-d-muted-foreground" />
+      <Icon name="Heart" size="lg" color="#8B5CF6" />
+      <Icon name="Heart" size="lg" color="#EC4899" />
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Design tokens**: Use theme token classes (`text-d-*`) rather than raw Tailwind colors.
+- **Icon library**: Use only `laif-ds` `Icon` (no external icon libraries).

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

@@ -1,138 +1,173 @@
- # Input
- 
- ## Overview
- 
- Text input component with label, sizes, optional left/right icons, custom start/end content, built-in password toggle, validation styles and accessible error messaging.
- 
- ---
- 
- ## Props
- 
- Extends native `<input>` props (except `size` and `label` which are redefined).
- 
- | Prop            | Type                                   | Default     | Description                                                          |
- | --------------- | -------------------------------------- | ----------- | -------------------------------------------------------------------- |
- | `label`         | `string | React.ReactNode`             | `undefined` | Field label shown above the input.                                   |
- | `labelClassName`| `string`                               | `""`        | Extra classes for the label.                                         |
- | `size`          | `"sm" | "default" | "lg"`           | `"default"` | Controls height and font-size.                                       |
- | `iconLeft`      | `IconName`                             | `undefined` | Optional left icon (uses `Icon`).                                    |
- | `iconRight`     | `IconName`                             | `undefined` | Optional right icon (ignored when `type="password"`).              |
- | `startContent`  | `React.ReactNode`                      | `undefined` | Custom content before the input (coexists with `iconLeft`).          |
- | `endContent`    | `React.ReactNode`                      | `undefined` | Custom content after the input (coexists with `iconRight`).          |
- | `errorMessage`  | `string`                               | `undefined` | Custom error message (shown after interaction/invalid state).        |
- 
- All other standard input attributes (e.g., `type`, `placeholder`, `required`, `min`, `max`, `pattern`, etc.) are supported.
- 
- ---
- 
- ## Behavior
- 
- - **Wrapper focus**: Clicking the wrapper focuses the input; selects text for non-password types (except file).
- - **Password toggle**: When `type="password"`, a toggle button switches visibility with accessible labels (`Mostra/Nascondi password`).
- - **Validation**: The wrapper reflects validity (`aria-invalid`) and shows `errorMessage` or the browser validation message once touched/invalid.
- - **Accessibility**: Errors use `role="alert"` and `aria-live="polite"`; labels link via `htmlFor`/`id`.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import { Input } from "laif-ds";
- 
- export function BasicInput() {
-   return (
-     <Input
-       label="Nome"
-       placeholder="Inserisci testo..."
-       className="w-full max-w-sm"
-     />
-   );
- }
- ```
- 
- ### Sizes and Icons
- 
- ```tsx
- import { Input } from "laif-ds";
- 
- export function SizesAndIcons() {
-   return (
-     <div className="flex flex-col gap-3 w-full max-w-sm">
-       <Input size="sm" label="Email" type="email" iconLeft="Mail" placeholder="esempio@dominio.com" />
-       <Input size="default" label="Cerca" type="search" iconLeft="Search" placeholder="Cerca..." />
-       <Input size="lg" label="Prezzo" type="number" iconRight="Euro" placeholder="0.00" />
-     </div>
-   );
- }
- ```
- 
- ### Custom Start/End Content
- 
- ```tsx
- import { Input } from "laif-ds";
- 
- export function CustomContent() {
-   return (
-     <div className="flex flex-col gap-3 w-full max-w-sm">
-       <Input
-         label="Importo"
-         type="number"
-         placeholder="0.00"
-         startContent={<span className="text-d-muted-foreground text-sm font-medium">€</span>}
-       />
-       <Input
-         label="Percentuale"
-         type="number"
-         placeholder="0"
-         endContent={<span className="text-d-muted-foreground text-sm font-medium">%</span>}
-       />
-     </div>
-   );
- }
- ```
- 
- ### Password with Toggle
- 
- ```tsx
- import { Input } from "laif-ds";
- 
- export function PasswordField() {
-   return (
-     <Input
-       label="Password"
-       type="password"
-       placeholder="Inserisci la tua password"
-       className="w-full max-w-sm"
-       required
-     />
-   );
- }
- ```
- 
- ### Validation States
- 
- ```tsx
- import { Input } from "laif-ds";
- 
- export function ValidationStates() {
-   return (
-     <div className="flex flex-col gap-3 w-full max-w-sm">
-       <Input label="Campo obbligatorio" placeholder="Questo campo è obbligatorio" required />
-       <Input label="Email" type="email" placeholder="email@esempio.com" required />
-       <Input label="URL" type="url" placeholder="https://esempio.com" required />
-       <Input label="Età (18-65)" type="number" min={18} max={65} required />
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Icons**: Prefer `iconLeft`/`iconRight` rather than embedding icons manually.
- - **Content**: `startContent`/`endContent` are ideal for units, prefixes/suffixes, or badges.
- - **A11y**: Include helpful placeholders and `aria-describedby` for extra guidance when needed.
- 
+# Input
+
+## Overview
+
+Text input component with label, sizes, optional left/right icons, custom start/end content, built-in password toggle, validation styles and accessible error messaging.
+
+---
+
+## Props
+
+Extends native `<input>` props (except `size` and `label` which are redefined).
+
+| Prop             | Type              | Default          | Description                                                   |
+| ---------------- | ----------------- | ---------------- | ------------------------------------------------------------- | ---------------------------------- | ------------------------------ |
+| `label`          | `string           | React.ReactNode` | `undefined`                                                   | Field label shown above the input. |
+| `labelClassName` | `string`          | `""`             | Extra classes for the label.                                  |
+| `size`           | `"sm"             | "default"        | "lg"`                                                         | `"default"`                        | Controls height and font-size. |
+| `iconLeft`       | `IconName`        | `undefined`      | Optional left icon (uses `Icon`).                             |
+| `iconRight`      | `IconName`        | `undefined`      | Optional right icon (ignored when `type="password"`).         |
+| `startContent`   | `React.ReactNode` | `undefined`      | Custom content before the input (coexists with `iconLeft`).   |
+| `endContent`     | `React.ReactNode` | `undefined`      | Custom content after the input (coexists with `iconRight`).   |
+| `errorMessage`   | `string`          | `undefined`      | Custom error message (shown after interaction/invalid state). |
+
+All other standard input attributes (e.g., `type`, `placeholder`, `required`, `min`, `max`, `pattern`, etc.) are supported.
+
+---
+
+## Behavior
+
+- **Wrapper focus**: Clicking the wrapper focuses the input; selects text for non-password types (except file).
+- **Password toggle**: When `type="password"`, a toggle button switches visibility with accessible labels (`Mostra/Nascondi password`).
+- **Validation**: The wrapper reflects validity (`aria-invalid`) and shows `errorMessage` or the browser validation message once touched/invalid.
+- **Accessibility**: Errors use `role="alert"` and `aria-live="polite"`; labels link via `htmlFor`/`id`.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { Input } from "laif-ds";
+
+export function BasicInput() {
+  return (
+    <Input
+      label="Nome"
+      placeholder="Inserisci testo..."
+      className="w-full max-w-sm"
+    />
+  );
+}
+```
+
+### Sizes and Icons
+
+```tsx
+import { Input } from "laif-ds";
+
+export function SizesAndIcons() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <Input
+        size="sm"
+        label="Email"
+        type="email"
+        iconLeft="Mail"
+        placeholder="esempio@dominio.com"
+      />
+      <Input
+        size="default"
+        label="Cerca"
+        type="search"
+        iconLeft="Search"
+        placeholder="Cerca..."
+      />
+      <Input
+        size="lg"
+        label="Prezzo"
+        type="number"
+        iconRight="Euro"
+        placeholder="0.00"
+      />
+    </div>
+  );
+}
+```
+
+### Custom Start/End Content
+
+```tsx
+import { Input } from "laif-ds";
+
+export function CustomContent() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <Input
+        label="Importo"
+        type="number"
+        placeholder="0.00"
+        startContent={
+          <span className="text-d-muted-foreground text-sm font-medium">€</span>
+        }
+      />
+      <Input
+        label="Percentuale"
+        type="number"
+        placeholder="0"
+        endContent={
+          <span className="text-d-muted-foreground text-sm font-medium">%</span>
+        }
+      />
+    </div>
+  );
+}
+```
+
+### Password with Toggle
+
+```tsx
+import { Input } from "laif-ds";
+
+export function PasswordField() {
+  return (
+    <Input
+      label="Password"
+      type="password"
+      placeholder="Inserisci la tua password"
+      className="w-full max-w-sm"
+      required
+    />
+  );
+}
+```
+
+### Validation States
+
+```tsx
+import { Input } from "laif-ds";
+
+export function ValidationStates() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <Input
+        label="Campo obbligatorio"
+        placeholder="Questo campo è obbligatorio"
+        required
+      />
+      <Input
+        label="Email"
+        type="email"
+        placeholder="email@esempio.com"
+        required
+      />
+      <Input
+        label="URL"
+        type="url"
+        placeholder="https://esempio.com"
+        required
+      />
+      <Input label="Età (18-65)" type="number" min={18} max={65} required />
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Icons**: Prefer `iconLeft`/`iconRight` rather than embedding icons manually.
+- **Content**: `startContent`/`endContent` are ideal for units, prefixes/suffixes, or badges.
+- **A11y**: Include helpful placeholders and `aria-describedby` for extra guidance when needed.

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

@@ -18,7 +18,12 @@ OTP (One-Time Password) input built on `input-otp`. Includes grouped slots and a
 ## Example
 
 ```tsx
-import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "laif-ds";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from "laif-ds";
 
 export function OtpExample() {
   return (