laif-ds 0.2.44 → 0.2.45

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

@@ -0,0 +1,97 @@
+ # 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.
+ 

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

@@ -0,0 +1,32 @@
+# InterruptPrompt
+
+## Overview
+
+Animated prompt that appears to allow interrupting an action (e.g., hitting Enter twice). Built with Framer Motion.
+
+---
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `isOpen` | `boolean` | Whether the prompt is visible |
+| `close` | `() => void` | Close handler |
+
+---
+
+## Example
+
+```tsx
+import { useState } from "react";
+import { InterruptPrompt } from "laif-ds";
+
+export function Demo() {
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="relative h-32">
+      <InterruptPrompt isOpen={open} close={() => setOpen(false)} />
+    </div>
+  );
+}
+```

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

@@ -0,0 +1,28 @@
+# Label
+
+## Overview
+
+Accessible label component built on Radix Label with default spacing and disabled styles.
+
+---
+
+## Props
+
+Extends `@radix-ui/react-label` Root props.
+
+---
+
+## Example
+
+```tsx
+import { Label, Input } from "laif-ds";
+
+export function LabeledInput() {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" placeholder="you@example.com" />
+    </div>
+  );
+}
+```

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

@@ -0,0 +1,36 @@
+# MarkdownRenderer
+
+## Overview
+
+Renders Markdown with GitHub-flavored Markdown (GFM) and async syntax highlighting using Shiki. Includes Copy button for code blocks.
+
+---
+
+## Usage
+
+```tsx
+import { MarkdownRenderer } from "laif-ds";
+
+const content = `
+# Hello
+
+Some ` + "`code`" + ` and a list:
+
+- Item A
+- Item B
+`;
+
+export function Doc() {
+  return <MarkdownRenderer>{content}</MarkdownRenderer>;
+}
+```
+
+- Supports headings, lists, tables, links, blockquotes, and inline code
+- Code blocks highlighted when a language class is provided (e.g., `language-ts`)
+
+---
+
+## Notes
+
+- Uses `react-markdown` + `remark-gfm`
+- Code highlighting falls back to plain `<pre>` if language is unsupported

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

@@ -0,0 +1,164 @@
+ # 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,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarShortcut,
+} from "laif-ds";
+
+export function BasicMenubar() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email Link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+}
+```
+ 
+### With Groups and Radios
+ 
+```tsx
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarLabel,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+} from "laif-ds";
+
+export function MenubarWithGroups() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Options</MenubarTrigger>
+        <MenubarContent>
+          <MenubarLabel>Theme</MenubarLabel>
+          <MenubarSeparator />
+          <MenubarRadioGroup value="light">
+            <MenubarRadioItem value="light">Light</MenubarRadioItem>
+            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+            <MenubarRadioItem value="system">System</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+}
+```
+ 
+### Destructive Item
+ 
+```tsx
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarShortcut,
+} from "laif-ds";
+
+export function DestructiveExample() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Actions</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Copy <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
+          <MenubarItem>Paste <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem variant="destructive">
+            Delete <MenubarShortcut>⌘⌫</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+}
+```
+ 
+ ---
+ 
+ ## 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

@@ -0,0 +1,131 @@
+ # 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.
+ 

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

@@ -0,0 +1,96 @@
+ # MessageList
+ 
+ ## Overview
+ 
+ Vertical list of chat messages with optional typing indicator. Renders each message via `ChatMessage` and supports per-message actions.
+ 
+ ---
+ 
+ ## Props
+ 
+ | Prop              | Type                                                                 | Default     | Description |
+ | ----------------- | -------------------------------------------------------------------- | ----------- | ----------- |
+ | `messages`        | `Message[]`                                                          | `[]`        | Array of messages to render. |
+ | `showTimeStamps`  | `boolean`                                                            | `true`      | Show timestamps on each message. |
+ | `isTyping`        | `boolean`                                                            | `false`     | Shows a typing indicator at the end of the list. |
+ | `messageOptions`  | `AdditionalMessageOptions \| (message: Message) => AdditionalMessageOptions` | `undefined` | Additional props/actions per message (static or function of message). |
+ | `onEdit`          | `(id: string, newContent: string) => void`                           | `undefined` | Called when a message enters edit mode and changes. |
+ | `onMessageSave`   | `(id: string, content: string) => void`                              | `undefined` | Called when a message edit is saved. |
+ 
+ `AdditionalMessageOptions` mirrors `ChatMessageProps` except base `Message` fields.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Per-message customization**: Pass `messageOptions` as a function to supply contextual actions.
+ - **Typing indicator**: `isTyping` renders `TypingIndicator` as the last item.
+ - **Composition**: Each message is passed to `ChatMessage` with merged props.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Default
+ 
+ ```tsx
+ import { MessageList } from "laif-ds";
+ 
+ export function Chat() {
+   const messages = [
+     { id: "1", role: "user", content: "Ciao!", createdAt: new Date() },
+     { id: "2", role: "assistant", content: "Come posso aiutarti?", createdAt: new Date() },
+   ];
+   return (
+     <div className="border-d-border w-full max-w-2xl rounded-lg border p-4">
+       <MessageList messages={messages} showTimeStamps />
+     </div>
+   );
+ }
+ ```
+ 
+ ### With Actions
+ 
+ ```tsx
+ import { Button, Icon } from "laif-ds";
+ import { MessageList } from "laif-ds";
+ 
+ export function ChatWithActions() {
+   const messages = [
+     { id: "1", role: "user", content: "Spiegami il virtual DOM", createdAt: new Date() },
+     { id: "2", role: "assistant", content: "Il Virtual DOM è...", createdAt: new Date() },
+   ];
+ 
+   return (
+     <div className="border-d-border w-full max-w-2xl rounded-lg border p-4">
+       <MessageList
+         messages={messages}
+         messageOptions={(m) =>
+           m.role === "assistant"
+             ? {
+                 actions: (
+                   <>
+                     <Button variant="ghost" size="icon" className="h-6 w-6">
+                       <Icon name="ThumbsUp" className="size-4" />
+                     </Button>
+                     <Button variant="ghost" size="icon" className="h-6 w-6">
+                       <Icon name="ThumbsDown" className="size-4" />
+                     </Button>
+                   </>
+                 ),
+               }
+             : {}
+         }
+       />
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Data model**: See `ChatMessage` for the `Message` shape and advanced features (tool invocations, reasoning parts, edits).
+ - **A11y**: Provide readable timestamps and roles; actions should include accessible labels.
+