laif-ds 0.2.74 → 0.2.76

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

@@ -1,97 +1,94 @@
- # InputSelector
- 
- ## Overview
- 
- Compact numeric selector with increment/decrement buttons, value bounds, and subtle animations. Useful for choosing small integer quantities (e.g., seats, guests).
- 
- ---
- 
- ## Props
- 
- | Prop               | Type                 | Default   | Description                                  |
- | ------------------ | -------------------- | --------- | -------------------------------------------- |
- | `value`            | `number`             | `1`       | Current numeric value.                       |
- | `onChange`         | `(value: number) => void` | `undefined` | Called with the new value.               |
- | `min`              | `number`             | `1`       | Minimum allowed value.                       |
- | `max`              | `number`             | `4`       | Maximum allowed value.                       |
- | `className`        | `string`             | `""`      | Wrapper classes.                              |
- | `buttonClassName`  | `string`             | `""`      | Classes for +/- buttons.                      |
- | `counterClassName` | `string`             | `""`      | Classes for the numeric counter.              |
- 
- ---
- 
- ## Behavior
- 
- - **Controlled**: `value` is controlled; emits `onChange(newValue)` on clicks within bounds.
- - **Bounds**: At min or max, the component vibrates (subtle shake animation) instead of changing value.
- - **A11y**: Buttons are real `<button>` elements with clear `+`/`-` labels.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import { useState } from "react";
- import { InputSelector } from "laif-ds";
- 
- export function BasicSelector() {
-   const [value, setValue] = useState(2);
- 
-   return (
-     <InputSelector value={value} onChange={setValue} min={1} max={4} />
-   );
- }
- ```
- 
- ### Controlled
- 
- ```tsx
- import { useState } from "react";
- import { InputSelector } from "laif-ds";
- 
- export function ControlledSelector() {
-   const [value, setValue] = useState(2);
- 
-   return (
-     <div className="flex flex-col items-center gap-2">
-       <InputSelector value={value} onChange={setValue} min={1} max={6} />
-       <div className="text-d-secondary-foreground text-sm">
-         Current value: {value}
-       </div>
-     </div>
-   );
- }
- ```
- 
- ### Custom Styling
- 
- ```tsx
- import { useState } from "react";
- import { InputSelector } from "laif-ds";
- 
- export function CustomStyledSelector() {
-   const [value, setValue] = useState(2);
- 
-   return (
-     <InputSelector
-       value={value}
-       onChange={setValue}
-       min={1}
-       max={4}
-       className="bg-d-secondary/10 p-6 rounded-xl"
-       buttonClassName="bg-d-primary text-d-primary-foreground hover:bg-d-primary/90 border-0"
-       counterClassName="text-d-primary font-bold"
-     />
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Bounds UX**: The slight vibration on bound hit provides feedback without changing the value.
- - **Styling**: Prefer design tokens (`bg-d-*`, `text-d-*`) over raw colors.
- 
+# InputSelector
+
+## Overview
+
+Compact numeric selector with increment/decrement buttons, value bounds, and subtle animations. Useful for choosing small integer quantities (e.g., seats, guests).
+
+---
+
+## Props
+
+| Prop               | Type                      | Default     | Description                      |
+| ------------------ | ------------------------- | ----------- | -------------------------------- |
+| `value`            | `number`                  | `1`         | Current numeric value.           |
+| `onChange`         | `(value: number) => void` | `undefined` | Called with the new value.       |
+| `min`              | `number`                  | `1`         | Minimum allowed value.           |
+| `max`              | `number`                  | `4`         | Maximum allowed value.           |
+| `className`        | `string`                  | `""`        | Wrapper classes.                 |
+| `buttonClassName`  | `string`                  | `""`        | Classes for +/- buttons.         |
+| `counterClassName` | `string`                  | `""`        | Classes for the numeric counter. |
+
+---
+
+## Behavior
+
+- **Controlled**: `value` is controlled; emits `onChange(newValue)` on clicks within bounds.
+- **Bounds**: At min or max, the component vibrates (subtle shake animation) instead of changing value.
+- **A11y**: Buttons are real `<button>` elements with clear `+`/`-` labels.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { useState } from "react";
+import { InputSelector } from "laif-ds";
+
+export function BasicSelector() {
+  const [value, setValue] = useState(2);
+
+  return <InputSelector value={value} onChange={setValue} min={1} max={4} />;
+}
+```
+
+### Controlled
+
+```tsx
+import { useState } from "react";
+import { InputSelector } from "laif-ds";
+
+export function ControlledSelector() {
+  const [value, setValue] = useState(2);
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <InputSelector value={value} onChange={setValue} min={1} max={6} />
+      <div className="text-d-secondary-foreground text-sm">
+        Current value: {value}
+      </div>
+    </div>
+  );
+}
+```
+
+### Custom Styling
+
+```tsx
+import { useState } from "react";
+import { InputSelector } from "laif-ds";
+
+export function CustomStyledSelector() {
+  const [value, setValue] = useState(2);
+
+  return (
+    <InputSelector
+      value={value}
+      onChange={setValue}
+      min={1}
+      max={4}
+      className="bg-d-secondary/10 rounded-xl p-6"
+      buttonClassName="bg-d-primary text-d-primary-foreground hover:bg-d-primary/90 border-0"
+      counterClassName="text-d-primary font-bold"
+    />
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Bounds UX**: The slight vibration on bound hit provides feedback without changing the value.
+- **Styling**: Prefer design tokens (`bg-d-*`, `text-d-*`) over raw colors.

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

@@ -8,10 +8,10 @@ Animated prompt that appears to allow interrupting an action (e.g., hitting Ente
 
 ## Props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `isOpen` | `boolean` | Whether the prompt is visible |
-| `close` | `() => void` | Close handler |
+| Prop     | Type         | Description                   |
+| -------- | ------------ | ----------------------------- |
+| `isOpen` | `boolean`    | Whether the prompt is visible |
+| `close`  | `() => void` | Close handler                 |
 
 ---
 

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

@@ -11,10 +11,13 @@ Renders Markdown with GitHub-flavored Markdown (GFM) and async syntax highlighti
 ```tsx
 import { MarkdownRenderer } from "laif-ds";
 
-const content = `
+const content =
+  `
 # Hello
 
-Some ` + "`code`" + ` and a list:
+Some ` +
+  "`code`" +
+  ` and a list:
 
 - Item A
 - Item B

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

@@ -1,47 +1,47 @@
- # Menubar
- 
- ## Overview
- 
- Top-level horizontal application menu built on Radix Menubar. Supports nested submenus, checkbox and radio items, separators, and keyboard navigation.
- 
- ---
- 
- ## Subcomponents & Props
- 
- - **Menubar**: Root container. Extends `@radix-ui/react-menubar` Root props.
- - **MenubarMenu**: Wraps a single menu.
- - **MenubarTrigger**: Button that opens its menu.
- - **MenubarContent**: The floating panel with items.
-   - `align`: `start | center | end` (default `start`)
-   - `alignOffset`: `number` (default `-4`)
-   - `sideOffset`: `number` (default `8`)
- - **MenubarItem**: Clickable action item.
-   - `variant`: `"default" | "destructive"` (default `"default"`)
-   - `inset`: `boolean` (indent the item)
- - **MenubarCheckboxItem**: Checkbox item.
-   - `checked`: `boolean`
- - **MenubarRadioGroup**: Groups radio items.
-   - `value`, `onValueChange`: controlled selection
- - **MenubarRadioItem**: Radio item in a group.
- - **MenubarLabel**: Non-interactive label.
- - **MenubarSeparator**: Horizontal separator.
- - **MenubarShortcut**: Right-aligned keyboard shortcut hint.
- - **MenubarSub / MenubarSubTrigger / MenubarSubContent**: Submenu primitives.
- 
- ---
- 
- ## Behavior
- 
- - **Keyboard navigation**: Arrow keys to move between triggers and items, Enter/Space to select.
- - **States**: Triggers reflect open/focus states. `variant="destructive"` styles an item for dangerous actions.
- - **Accessibility**: Proper roles and aria attributes via Radix primitives.
- 
- ---
- 
+# Menubar
+
+## Overview
+
+Top-level horizontal application menu built on Radix Menubar. Supports nested submenus, checkbox and radio items, separators, and keyboard navigation.
+
+---
+
+## Subcomponents & Props
+
+- **Menubar**: Root container. Extends `@radix-ui/react-menubar` Root props.
+- **MenubarMenu**: Wraps a single menu.
+- **MenubarTrigger**: Button that opens its menu.
+- **MenubarContent**: The floating panel with items.
+  - `align`: `start | center | end` (default `start`)
+  - `alignOffset`: `number` (default `-4`)
+  - `sideOffset`: `number` (default `8`)
+- **MenubarItem**: Clickable action item.
+  - `variant`: `"default" | "destructive"` (default `"default"`)
+  - `inset`: `boolean` (indent the item)
+- **MenubarCheckboxItem**: Checkbox item.
+  - `checked`: `boolean`
+- **MenubarRadioGroup**: Groups radio items.
+  - `value`, `onValueChange`: controlled selection
+- **MenubarRadioItem**: Radio item in a group.
+- **MenubarLabel**: Non-interactive label.
+- **MenubarSeparator**: Horizontal separator.
+- **MenubarShortcut**: Right-aligned keyboard shortcut hint.
+- **MenubarSub / MenubarSubTrigger / MenubarSubContent**: Submenu primitives.
+
+---
+
+## Behavior
+
+- **Keyboard navigation**: Arrow keys to move between triggers and items, Enter/Space to select.
+- **States**: Triggers reflect open/focus states. `variant="destructive"` styles an item for dangerous actions.
+- **Accessibility**: Proper roles and aria attributes via Radix primitives.
+
+---
+
 ## Examples
- 
+
 ### Basic
- 
+
 ```tsx
 import {
   Menubar,
@@ -87,9 +87,9 @@ export function BasicMenubar() {
   );
 }
 ```
- 
+
 ### With Groups and Radios
- 
+
 ```tsx
 import {
   Menubar,
@@ -121,9 +121,9 @@ export function MenubarWithGroups() {
   );
 }
 ```
- 
+
 ### Destructive Item
- 
+
 ```tsx
 import {
   Menubar,
@@ -141,8 +141,12 @@ export function DestructiveExample() {
       <MenubarMenu>
         <MenubarTrigger>Actions</MenubarTrigger>
         <MenubarContent>
-          <MenubarItem>Copy <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
-          <MenubarItem>Paste <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
+          <MenubarItem>
+            Copy <MenubarShortcut>⌘C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Paste <MenubarShortcut>⌘V</MenubarShortcut>
+          </MenubarItem>
           <MenubarSeparator />
           <MenubarItem variant="destructive">
             Delete <MenubarShortcut>⌘⌫</MenubarShortcut>
@@ -153,12 +157,11 @@ export function DestructiveExample() {
   );
 }
 ```
- 
- ---
- 
- ## Notes
- 
- - **Composition**: Combine subcomponents to build complex menus.
- - **Shortcuts**: Use `MenubarShortcut` for right-aligned hints.
- - **A11y**: Labels and roles are handled by Radix primitives and DS styling.
- 
+
+---
+
+## Notes
+
+- **Composition**: Combine subcomponents to build complex menus.
+- **Shortcuts**: Use `MenubarShortcut` for right-aligned hints.
+- **A11y**: Labels and roles are handled by Radix primitives and DS styling.

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

@@ -1,131 +1,134 @@
- # MessageInput
- 
- ## Overview
- 
- Chat composer with autosizing textarea, optional file attachments, voice input (record/transcribe), and intelligent Enter-to-send behavior with interruption prompts.
- 
- ---
- 
- ## Props
- 
- Extends native `<textarea>` props.
- 
- | Prop               | Type                                           | Default    | Description |
- | ------------------ | ---------------------------------------------- | ---------- | ----------- |
- | `value`            | `string`                                       | **required** | Controlled text value. |
- | `isGenerating`     | `boolean`                                      | `false`    | If true, shows stop button and may display interrupt prompt. |
- | `submitOnEnter`    | `boolean`                                      | `true`     | Press Enter to submit (Shift+Enter for newline). |
- | `stop`             | `() => void`                                   | `undefined`| Stop generation handler (used with `isGenerating`). |
- | `enableInterrupt`  | `boolean`                                      | `true`     | If true, pressing Enter while generating shows confirm to interrupt. |
- | `transcribeAudio`  | `(blob: Blob) => Promise<string>`              | `undefined`| Optional audio-to-text function. |
- | `allowAttachments` | `boolean`                                      | `false`    | Enable file attachments UI. |
- | `files`            | `File[] | null`                                | `null`     | Current attached files (when `allowAttachments`). |
- | `setFiles`         | `React.Dispatch<React.SetStateAction<File[] | null>>` | `undefined`| Setter for attachments. |
- 
- ---
- 
- ## Behavior
- 
- - **Enter to submit**: If `submitOnEnter` and not `shiftKey`, calls `form.requestSubmit()`.
- - **Interrupt flow**: If `isGenerating` and `stop` and `enableInterrupt`, pressing Enter shows a prompt to confirm stopping the generation and sending the new message.
- - **Autosize**: Textarea grows up to a max height, then scrolls.
- - **Attachments**: Drag & drop, paste files; long pasted text (> 500 chars) becomes a text file. Uses `FilePreview` to show chips.
- - **Voice input**: If supported, toggles microphone recording; shows visualizer while recording and a "transcribing" overlay after.
- - **Actions**: Right-aligned action buttons: attach, mic, send/stop.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import * as React from "react";
- import { MessageInput } from "laif-ds";
- 
- export function BasicComposer() {
-   const [value, setValue] = React.useState("");
-   const onSubmit = (e: React.FormEvent) => {
-     e.preventDefault();
-     console.log("Messaggio inviato:", value);
-     setValue("");
-   };
-   return (
-     <form onSubmit={onSubmit} className="w-full max-w-2xl">
-       <MessageInput value={value} onChange={(e) => setValue(e.target.value)} isGenerating={false} />
-     </form>
-   );
- }
- ```
- 
- ### With Attachments
- 
- ```tsx
- import * as React from "react";
- import { MessageInput } from "laif-ds";
- 
- export function WithAttachments() {
-   const [value, setValue] = React.useState("");
-   const [files, setFiles] = React.useState<File[] | null>(null);
-   const onSubmit = (e: React.FormEvent) => {
-     e.preventDefault();
-     console.log("Messaggio inviato:", value, files);
-     setValue("");
-     setFiles(null);
-   };
-   return (
-     <form onSubmit={onSubmit} className="w-full max-w-2xl">
-       <MessageInput
-         value={value}
-         onChange={(e) => setValue(e.target.value)}
-         isGenerating={false}
-         allowAttachments
-         files={files}
-         setFiles={setFiles}
-         placeholder="Scrivi un messaggio o trascina file qui..."
-       />
-     </form>
-   );
- }
- ```
- 
- ### Generating + Interrupt
- 
- ```tsx
- import * as React from "react";
- import { MessageInput } from "laif-ds";
- 
- export function Generating() {
-   const [value, setValue] = React.useState("");
-   const [isGenerating, setIsGenerating] = React.useState(true);
-   const stop = () => setIsGenerating(false);
-   const onSubmit = (e: React.FormEvent) => {
-     e.preventDefault();
-     if (isGenerating) return;
-     console.log("Messaggio inviato:", value);
-     setValue("");
-     setIsGenerating(true);
-     setTimeout(() => setIsGenerating(false), 3000);
-   };
-   return (
-     <form onSubmit={onSubmit} className="w-full max-w-2xl">
-       <MessageInput
-         value={value}
-         onChange={(e) => setValue(e.target.value)}
-         isGenerating={isGenerating}
-         stop={stop}
-         placeholder="L'AI sta generando una risposta..."
-       />
-     </form>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **File preview**: Uses `FilePreview` for attachment chips.
- - **Paste handling**: Long text paste becomes a `.txt` file when attachments are enabled.
- - **A11y**: Textarea has aria-label; action buttons have aria-labels as well.
- 
+# MessageInput
+
+## Overview
+
+Chat composer with autosizing textarea, optional file attachments, voice input (record/transcribe), and intelligent Enter-to-send behavior with interruption prompts.
+
+---
+
+## Props
+
+Extends native `<textarea>` props.
+
+| Prop               | Type                                        | Default      | Description                                                          |
+| ------------------ | ------------------------------------------- | ------------ | -------------------------------------------------------------------- | ------------------------------------------------- |
+| `value`            | `string`                                    | **required** | Controlled text value.                                               |
+| `isGenerating`     | `boolean`                                   | `false`      | If true, shows stop button and may display interrupt prompt.         |
+| `submitOnEnter`    | `boolean`                                   | `true`       | Press Enter to submit (Shift+Enter for newline).                     |
+| `stop`             | `() => void`                                | `undefined`  | Stop generation handler (used with `isGenerating`).                  |
+| `enableInterrupt`  | `boolean`                                   | `true`       | If true, pressing Enter while generating shows confirm to interrupt. |
+| `transcribeAudio`  | `(blob: Blob) => Promise<string>`           | `undefined`  | Optional audio-to-text function.                                     |
+| `allowAttachments` | `boolean`                                   | `false`      | Enable file attachments UI.                                          |
+| `files`            | `File[]                                     | null`        | `null`                                                               | Current attached files (when `allowAttachments`). |
+| `setFiles`         | `React.Dispatch<React.SetStateAction<File[] | null>>`      | `undefined`                                                          | Setter for attachments.                           |
+
+---
+
+## Behavior
+
+- **Enter to submit**: If `submitOnEnter` and not `shiftKey`, calls `form.requestSubmit()`.
+- **Interrupt flow**: If `isGenerating` and `stop` and `enableInterrupt`, pressing Enter shows a prompt to confirm stopping the generation and sending the new message.
+- **Autosize**: Textarea grows up to a max height, then scrolls.
+- **Attachments**: Drag & drop, paste files; long pasted text (> 500 chars) becomes a text file. Uses `FilePreview` to show chips.
+- **Voice input**: If supported, toggles microphone recording; shows visualizer while recording and a "transcribing" overlay after.
+- **Actions**: Right-aligned action buttons: attach, mic, send/stop.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import * as React from "react";
+import { MessageInput } from "laif-ds";
+
+export function BasicComposer() {
+  const [value, setValue] = React.useState("");
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Messaggio inviato:", value);
+    setValue("");
+  };
+  return (
+    <form onSubmit={onSubmit} className="w-full max-w-2xl">
+      <MessageInput
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        isGenerating={false}
+      />
+    </form>
+  );
+}
+```
+
+### With Attachments
+
+```tsx
+import * as React from "react";
+import { MessageInput } from "laif-ds";
+
+export function WithAttachments() {
+  const [value, setValue] = React.useState("");
+  const [files, setFiles] = React.useState<File[] | null>(null);
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Messaggio inviato:", value, files);
+    setValue("");
+    setFiles(null);
+  };
+  return (
+    <form onSubmit={onSubmit} className="w-full max-w-2xl">
+      <MessageInput
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        isGenerating={false}
+        allowAttachments
+        files={files}
+        setFiles={setFiles}
+        placeholder="Scrivi un messaggio o trascina file qui..."
+      />
+    </form>
+  );
+}
+```
+
+### Generating + Interrupt
+
+```tsx
+import * as React from "react";
+import { MessageInput } from "laif-ds";
+
+export function Generating() {
+  const [value, setValue] = React.useState("");
+  const [isGenerating, setIsGenerating] = React.useState(true);
+  const stop = () => setIsGenerating(false);
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isGenerating) return;
+    console.log("Messaggio inviato:", value);
+    setValue("");
+    setIsGenerating(true);
+    setTimeout(() => setIsGenerating(false), 3000);
+  };
+  return (
+    <form onSubmit={onSubmit} className="w-full max-w-2xl">
+      <MessageInput
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        isGenerating={isGenerating}
+        stop={stop}
+        placeholder="L'AI sta generando una risposta..."
+      />
+    </form>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **File preview**: Uses `FilePreview` for attachment chips.
+- **Paste handling**: Long text paste becomes a `.txt` file when attachments are enabled.
+- **A11y**: Textarea has aria-label; action buttons have aria-labels as well.