laif-ds 0.2.43 → 0.2.45

package/dist/_virtual/index6.js

@@ -1,5 +1,5 @@
 "use client";
-var e = { exports: {} };
+var e = {};
 export {
-  e as __module
+  e as __exports
 };

package/dist/_virtual/index7.js

@@ -1,5 +1,5 @@
 "use client";
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };

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

@@ -0,0 +1,157 @@
+# Accordion
+
+## Overview
+
+An accessible, animated accordion to organize content in collapsible sections. Supports single or multiple open items, keyboard navigation, and flexible styling.
+
+---
+
+## Props
+
+Props are passed through to the underlying Radix Accordion primitives. The most relevant props for `Accordion` (root) are listed below.
+
+### Accordion (Root)
+
+| Prop            | Type                                | Default     | Description                                                                 |
+| --------------- | ----------------------------------- | ----------- | --------------------------------------------------------------------------- |
+| `type`          | `"single" \| "multiple"`            | `"single"` | Single allows one item open at a time. Multiple allows many open items.     |
+| `collapsible`   | `boolean`                           | `false`     | Only for `type="single"`. If true, allows closing the last open item.      |
+| `value`         | `string \| string[]`                | `undefined` | Controlled value of the open item(s).                                       |
+| `defaultValue`  | `string \| string[]`                | `undefined` | Uncontrolled default open item(s).                                          |
+| `onValueChange` | `(value: string \| string[]) => any` | `undefined` | Callback fired when open item(s) change.                                    |
+| `className`     | `string`                             | `""`        | Additional classes applied to the root.                                     |
+
+### Subcomponents
+
+- `AccordionItem`: Container for a single section. Requires a unique `value` prop.
+- `AccordionTrigger`: The clickable header that toggles the item.
+- `AccordionContent`: The collapsible content area with open/close animations.
+
+---
+
+## Behavior
+
+- **Single mode**: Only one `AccordionItem` can be open at a time. If `collapsible` is `false`, one item must remain open.
+- **Multiple mode**: Any number of items can be open simultaneously.
+- **Keyboard navigation**: Fully accessible trigger buttons with ARIA attributes.
+- **Animations**: Smooth open/close transitions for content.
+
+---
+
+## Examples
+
+### Basic (Single)
+
+```tsx
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+
+export function BasicAccordion() {
+  return (
+    <Accordion type="single" className="w-96">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that match the other components.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+### With Default Open (Single, collapsible)
+
+```tsx
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+
+export function AccordionWithDefaultOpen() {
+  return (
+    <Accordion type="single" collapsible defaultValue="item-2" className="w-96">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First section</AccordionTrigger>
+        <AccordionContent>This is the first section content.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second section (default open)</AccordionTrigger>
+        <AccordionContent>
+          This section is open by default because we set defaultValue="item-2".
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Third section</AccordionTrigger>
+        <AccordionContent>This is the third section content.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+### Multiple Mode with Multiple Default Open
+
+```tsx
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+
+export function MultipleModeAccordion() {
+  return (
+    <Accordion type="multiple" defaultValue={["item-1", "item-3"]} className="w-96">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First section (default open)</AccordionTrigger>
+        <AccordionContent>This section is open by default.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second section</AccordionTrigger>
+        <AccordionContent>This section is closed by default.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Third section (default open)</AccordionTrigger>
+        <AccordionContent>This section is also open by default.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+### Controlled Single Mode
+
+```tsx
+import { useState } from "react";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+
+export function ControlledAccordion() {
+  const [open, setOpen] = useState<string>("item-1");
+
+  return (
+    <Accordion type="single" value={open} onValueChange={(v) => setOpen(v as string)} className="w-96">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First</AccordionTrigger>
+        <AccordionContent>First content</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second</AccordionTrigger>
+        <AccordionContent>Second content</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Accessibility**: Uses proper ARIA roles/attributes and keyboard navigation.
+- **Animations**: `AccordionContent` has built-in open/close animations.
+- **Styling**: Customize with `className` on root/items/triggers/contents.
+

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

@@ -0,0 +1,95 @@
+ # Alert
+ 
+ ## Overview
+ 
+ A simple, accessible alert component with title and description. Supports variants for information and destructive/error states.
+ 
+ ---
+ 
+ ## Props
+ 
+ ### Alert (Root)
+ 
+ | Prop        | Type                                   | Default     | Description                                    |
+ | ----------- | -------------------------------------- | ----------- | ---------------------------------------------- |
+ | `variant`   | `"default" | "destructive"`         | `"default"` | Visual style of the alert.                     |
+ | `className` | `string`                                | `""`        | Additional classes applied to the root element.|
+ | `children`  | `React.ReactNode`                       | **required**| Content of the alert (title/description/icon). |
+ 
+ ### Subcomponents
+ 
+ - `AlertTitle`: Title area of the alert (bold line).
+ - `AlertDescription`: Secondary text, supports rich content and paragraphs.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Accessible**: Uses `role="alert"` and semantic slots for screen readers.
+ - **Variants**: `destructive` applies error coloring; `default` uses neutral styling.
+ - **Layout**: Supports optional leading icon; layout adapts when an icon is present.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Default
+ 
+ ```tsx
+ import { Alert, AlertTitle, AlertDescription } from "laif-ds";
+ 
+ export function DefaultAlert() {
+   return (
+     <Alert>
+       <AlertTitle>Default Alert</AlertTitle>
+       <AlertDescription>
+         This is a default alert message.
+       </AlertDescription>
+     </Alert>
+   );
+ }
+ ```
+ 
+ ### With Icon
+ 
+ ```tsx
+ import { Alert, AlertTitle, AlertDescription, Icon } from "laif-ds";
+ 
+ export function AlertWithIcon() {
+   return (
+     <Alert>
+       <Icon name="Info" />
+       <AlertTitle>Information</AlertTitle>
+       <AlertDescription>
+         This alert includes an icon.
+       </AlertDescription>
+     </Alert>
+   );
+ }
+ ```
+ 
+ ### Destructive
+ 
+ ```tsx
+ import { Alert, AlertTitle, AlertDescription } from "laif-ds";
+ 
+ export function DestructiveAlert() {
+   return (
+     <Alert variant="destructive">
+       <AlertTitle>Error</AlertTitle>
+       <AlertDescription>
+         Something went wrong. Please try again.
+       </AlertDescription>
+     </Alert>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Styling**: Use `className` on the root to add layout constraints (e.g., width).
+ - **Content**: `AlertDescription` supports rich content and multi-line paragraphs.
+ - **Icons**: Use `Icon` from `laif-ds` to add an optional leading icon.
+ 

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

@@ -0,0 +1,126 @@
+ # AlertDialog
+ 
+ ## Overview
+ 
+ Accessible modal dialog for critical confirmations. Built on Radix Alert Dialog primitives with composable subcomponents and focus management.
+ 
+ ---
+ 
+ ## Props
+ 
+ ### AlertDialog (Root)
+ 
+ | Prop            | Type              | Default     | Description                                  |
+ | --------------- | ----------------- | ----------- | -------------------------------------------- |
+ | `open`          | `boolean`         | `undefined` | Controlled open state.                        |
+ | `defaultOpen`   | `boolean`         | `false`     | Uncontrolled initial open state.              |
+ | `onOpenChange`  | `(open: boolean) => void` | `undefined` | Callback when open state changes.        |
+ 
+ ### Subcomponents
+ 
+ - `AlertDialogTrigger`: Element that opens the dialog (can be `asChild`).
+ - `AlertDialogContent`: The dialog content container.
+ - `AlertDialogHeader` / `AlertDialogFooter`: Layout sections for content and actions.
+ - `AlertDialogTitle` / `AlertDialogDescription`: Title and supporting description.
+ - `AlertDialogAction`: Primary action button.
+ - `AlertDialogCancel`: Secondary cancel button.
+ - `AlertDialogPortal`, `AlertDialogOverlay`: Portal and overlay elements.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Focus management**: Traps focus within the dialog, returns focus on close.
+ - **Accessibility**: Proper ARIA roles and keyboard interactions (Esc to close).
+ - **Composability**: Use any button (e.g., `Button`) with `AlertDialogTrigger asChild`.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Basic
+ 
+ ```tsx
+ import {
+   AlertDialog,
+   AlertDialogAction,
+   AlertDialogCancel,
+   AlertDialogContent,
+   AlertDialogDescription,
+   AlertDialogFooter,
+   AlertDialogHeader,
+   AlertDialogTitle,
+   AlertDialogTrigger,
+ } from "laif-ds";
+ import { Button } from "laif-ds";
+ 
+ export function BasicAlertDialog() {
+   return (
+     <AlertDialog>
+       <AlertDialogTrigger asChild>
+         <Button variant="outline">Show Alert Dialog</Button>
+       </AlertDialogTrigger>
+       <AlertDialogContent>
+         <AlertDialogHeader>
+           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+           <AlertDialogDescription>
+             This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+           </AlertDialogDescription>
+         </AlertDialogHeader>
+         <AlertDialogFooter>
+           <AlertDialogCancel>Cancel</AlertDialogCancel>
+           <AlertDialogAction>Continue</AlertDialogAction>
+         </AlertDialogFooter>
+       </AlertDialogContent>
+     </AlertDialog>
+   );
+ }
+ ```
+ 
+ ### Controlled
+ 
+ ```tsx
+ import { useState } from "react";
+ import {
+   AlertDialog,
+   AlertDialogAction,
+   AlertDialogCancel,
+   AlertDialogContent,
+   AlertDialogDescription,
+   AlertDialogFooter,
+   AlertDialogHeader,
+   AlertDialogTitle,
+ } from "laif-ds";
+ import { Button } from "laif-ds";
+ 
+ export function ControlledAlertDialog() {
+   const [open, setOpen] = useState(false);
+ 
+   return (
+     <>
+       <Button onClick={() => setOpen(true)}>Open dialog</Button>
+       <AlertDialog open={open} onOpenChange={setOpen}>
+         <AlertDialogContent>
+           <AlertDialogHeader>
+             <AlertDialogTitle>Confirm action</AlertDialogTitle>
+             <AlertDialogDescription>Are you sure you want to proceed?</AlertDialogDescription>
+           </AlertDialogHeader>
+           <AlertDialogFooter>
+             <AlertDialogCancel onClick={() => setOpen(false)}>Cancel</AlertDialogCancel>
+             <AlertDialogAction onClick={() => setOpen(false)}>Confirm</AlertDialogAction>
+           </AlertDialogFooter>
+         </AlertDialogContent>
+       </AlertDialog>
+     </>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Styling**: `AlertDialogContent` is centered and responsive; customize with `className`.
+ - **Overlay**: `AlertDialogOverlay` provides a backdrop with fade animations.
+ - **Buttons**: `AlertDialogAction` uses default button styles; pass `className` to adjust.
+ 

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

@@ -0,0 +1,90 @@
+ # AppEditor
+ 
+ ## Overview
+ 
+ Rich text editor powered by Lexical with optional Markdown sync. Supports configurable toolbars (block format, font format, history), clear action, and character counter.
+ 
+ ---
+ 
+ ## Props
+ 
+ | Prop            | Type                                 | Default   | Description |
+ | --------------- | ------------------------------------ | --------- | ----------- |
+ | `defaultValue`  | `string`                              | `undefined` | Initial content. Interpreted as Markdown when `onlyMarkdown=true`, plain text otherwise. |
+ | `onMarkdownEdit`| `(markdown: string) => void`          | `undefined` | Emits current content as Markdown on change. |
+ | `plugins`       | `("clear" | "counter")[]`            | `[]`      | Enable optional plugins: clear buttons, character counter. |
+ | `toolbars`      | `("block-format" | "font-format" | "history")[]` | `[]` | Enable toolbar groups. |
+ | `placeholder`   | `string`                              | `"Start typing..."` | Placeholder for empty editor. |
+ | `onlyMarkdown`  | `boolean`                             | `true`    | Treat `defaultValue` as Markdown and sync editor to Markdown. If `false`, `defaultValue` is plain text. |
+ | `className`     | `string`                              | `"overflow-hidden rounded-lg border border-d-border"` | Extra classes for the content editable. |
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Markdown sync**: When `onlyMarkdown=true`, initializes from Markdown and emits Markdown on every change.
+ - **Toolbars**:
+   - `history`: undo/redo toolbar.
+   - `block-format`: heading levels, list types, quote.
+   - `font-format`: bold/italic/underline/strikethrough.
+ - **Plugins**:
+   - `clear`: clear actions in the footer.
+   - `counter`: UTF-16 character counter in the footer.
+ - **Editing**: Autosave via `onMarkdownEdit`. Keyboard navigation and selection per Lexical defaults.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Full Toolbar + Plugins
+ 
+ ```tsx
+ import * as React from "react";
+ import { AppEditor } from "laif-ds";
+ 
+ export function EditorFull() {
+   const [markdown, setMarkdown] = React.useState("Hello world");
+   return (
+     <div className="space-y-4">
+       <AppEditor
+         defaultValue={markdown}
+         onMarkdownEdit={setMarkdown}
+         toolbars={["block-format", "font-format", "history"]}
+         plugins={["clear", "counter"]}
+         className="h-96"
+       />
+       <div className="text-d-muted-foreground text-sm">
+         <span className="font-medium">Current markdown:</span> {markdown || "(empty)"}
+       </div>
+     </div>
+   );
+ }
+ ```
+ 
+ ### Markdown Default Value
+ 
+ ```tsx
+ import * as React from "react";
+ import { AppEditor } from "laif-ds";
+ 
+ export function MarkdownDefault() {
+   const initial = "**Titolo** con testo in markdown";
+   const [md, setMd] = React.useState(initial);
+   return (
+     <AppEditor
+       defaultValue={initial}
+       onMarkdownEdit={setMd}
+       toolbars={["block-format", "font-format", "history"]}
+     />
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Sizing**: Control height via `className` (e.g., `h-96`).
+ - **Performance**: Prefer Markdown mode for content pipelines that store Markdown; use `onlyMarkdown=false` for plain text initialization.
+ - **Accessibility**: Toolbar buttons and editor area follow Lexical best practices.
+