laif-ds 0.2.74 → 0.2.76

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

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

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

@@ -24,24 +24,24 @@ export interface AppRadioGroupOption {
 
 ## Props
 
-| Prop              | Type                             | Default      | Description                                    |
-| ----------------- | -------------------------------- | ------------ | ---------------------------------------------- |
-| `options`         | `AppRadioGroupOption[]`          | **required** | Array of radio options                         |
-| `value`           | `string`                         | `undefined`  | Controlled value                               |
-| `defaultValue`    | `string`                         | `undefined`  | Uncontrolled default value                     |
-| `onValueChange`   | `(value: string) => void`        | `undefined`  | Callback when value changes                    |
-| `label`           | `string \| React.ReactNode`      | `undefined`  | Label for the radio group                      |
-| `description`     | `string \| React.ReactNode`      | `undefined`  | Description text below label                   |
-| `disabled`        | `boolean`                        | `false`      | Disables all options                           |
-| `required`        | `boolean`                        | `false`      | Shows required asterisk                        |
-| `name`            | `string`                         | `undefined`  | Form name attribute                            |
-| `orientation`     | `"horizontal" \| "vertical"`     | `"vertical"` | Layout orientation                             |
-| `loop`            | `boolean`                        | `true`       | Enable keyboard navigation looping             |
-| `className`       | `string`                         | `""`         | Additional classes for radio group container   |
-| `wrpClassName`    | `string`                         | `""`         | Additional classes for outer wrapper           |
-| `optionClassName` | `string`                         | `""`         | Additional classes for each option             |
-| `layout`          | `"default" \| "card"`            | `"default"`  | Visual layout style                            |
-| `error`           | `string`                         | `undefined`  | Error message to display                       |
+| Prop              | Type                         | Default      | Description                                  |
+| ----------------- | ---------------------------- | ------------ | -------------------------------------------- |
+| `options`         | `AppRadioGroupOption[]`      | **required** | Array of radio options                       |
+| `value`           | `string`                     | `undefined`  | Controlled value                             |
+| `defaultValue`    | `string`                     | `undefined`  | Uncontrolled default value                   |
+| `onValueChange`   | `(value: string) => void`    | `undefined`  | Callback when value changes                  |
+| `label`           | `string \| React.ReactNode`  | `undefined`  | Label for the radio group                    |
+| `description`     | `string \| React.ReactNode`  | `undefined`  | Description text below label                 |
+| `disabled`        | `boolean`                    | `false`      | Disables all options                         |
+| `required`        | `boolean`                    | `false`      | Shows required asterisk                      |
+| `name`            | `string`                     | `undefined`  | Form name attribute                          |
+| `orientation`     | `"horizontal" \| "vertical"` | `"vertical"` | Layout orientation                           |
+| `loop`            | `boolean`                    | `true`       | Enable keyboard navigation looping           |
+| `className`       | `string`                     | `""`         | Additional classes for radio group container |
+| `wrpClassName`    | `string`                     | `""`         | Additional classes for outer wrapper         |
+| `optionClassName` | `string`                     | `""`         | Additional classes for each option           |
+| `layout`          | `"default" \| "card"`        | `"default"`  | Visual layout style                          |
+| `error`           | `string`                     | `undefined`  | Error message to display                     |
 
 ---
 

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

@@ -1,122 +1,129 @@
- # AppSidebar
- 
- ## Overview
- 
- High-level app sidebar built on top of `Sidebar` primitives. Renders navigation groups, nested items, header/footer content, optional versions area and an optional rail for resizing/collapsing.
- 
- ---
- 
- ## Props
- 
- | Prop               | Type                                 | Default     | Description |
- | ------------------ | ------------------------------------ | ----------- | ----------- |
- | `navigation`       | `NavGroup[]`                         | **required**| Main navigation groups. |
- | `navigationFooter` | `NavGroup[]`                         | `undefined` | Footer navigation groups. |
- | `versions`         | `string[]`                           | `undefined` | Optional versions list. |
- | `defaultVersion`   | `string`                             | `undefined` | Default selected version. |
- | `headerContent`    | `React.ReactNode`                    | `undefined` | Custom content at the top. |
- | `footerContent`    | `React.ReactNode`                    | `undefined` | Custom content at the bottom. |
- | `showRail`         | `boolean`                            | `true`      | Show the draggable sidebar rail. |
- | `linkComponent`    | `React.ComponentType<any>`           | `undefined` | Custom link component for items. |
- | `linkProps`        | `Record<string, any>`                | `{}`        | Extra props passed to the link component. |
- 
- `NavGroup` → `{ title: string; url?: string; items: NavItem[] }`
- 
- `NavItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName; subItems?: NavSubItem[] }`
- 
- `NavSubItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName }`
- 
- Inherits other props from `Sidebar` via `React.ComponentProps<typeof Sidebar>`.
- 
- ---
- 
- ## Behavior
- 
- - **Collapsible groups**: Clicking items with `subItems` toggles nested lists.
- - **Active state**: `isActive` highlights and expands relevant items/groups.
- - **Links**: Use `linkComponent` for framework routers (e.g., Next.js `Link`).
- - **Rail**: `showRail` displays a thin draggable handle to collapse/expand.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import { SidebarProvider, SidebarTrigger } from "laif-ds";
- import { AppSidebar } from "laif-ds";
- 
- const navigation = [
-   {
-     title: "Generale",
-     items: [
-       { title: "Dashboard", url: "#", isActive: true, iconName: "Home" },
-       { title: "Utenti", url: "#", iconName: "Users" },
-       {
-         title: "Messaggi",
-         url: "#",
-         iconName: "MessageSquare",
-         subItems: [
-           { title: "Inbox", url: "#inbox", iconName: "Inbox" },
-           { title: "Inviati", url: "#sent", iconName: "Send" },
-         ],
-       },
-     ],
-   },
- ];
- 
- export function Layout() {
-   return (
-     <SidebarProvider>
-       <div className="flex h-[100vh] overflow-hidden">
-         <AppSidebar navigation={navigation} showRail />
-         <div className="flex-1 overflow-auto p-4">
-           <SidebarTrigger />
-           {/* Page content */}
-         </div>
-       </div>
-     </SidebarProvider>
-   );
- }
- ```
- 
- ### With Header/Footer Content
- 
- ```tsx
- import { Button, Input } from "laif-ds";
- 
- export function WithHeaderFooter() {
-   return (
-     <SidebarProvider>
-       <div className="flex h-[100vh] overflow-hidden">
-         <AppSidebar
-           navigation={[]}
-           headerContent={
-             <div className="p-4">
-               <Input iconLeft="Search" placeholder="Cerca..." className="bg-d-background pl-8" />
-             </div>
-           }
-           footerContent={
-             <div className="border-d-border border-t p-4">
-               <Button variant="ghost" className="w-full justify-start" iconLeft="Settings">
-                 Impostazioni
-               </Button>
-             </div>
-           }
-         />
-         <div className="flex-1 overflow-auto p-4" />
-       </div>
-     </SidebarProvider>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Routing**: Prefer `linkComponent` to avoid full page reloads (e.g., `next/link`).
- - **Icons**: Use `laif-ds` `Icon` by passing `iconName` in navigation items.
- - **Accessibility**: Sidebar primitives manage keyboard navigation and focus.
- 
+# AppSidebar
+
+## Overview
+
+High-level app sidebar built on top of `Sidebar` primitives. Renders navigation groups, nested items, header/footer content, optional versions area and an optional rail for resizing/collapsing.
+
+---
+
+## Props
+
+| Prop               | Type                       | Default      | Description                               |
+| ------------------ | -------------------------- | ------------ | ----------------------------------------- |
+| `navigation`       | `NavGroup[]`               | **required** | Main navigation groups.                   |
+| `navigationFooter` | `NavGroup[]`               | `undefined`  | Footer navigation groups.                 |
+| `versions`         | `string[]`                 | `undefined`  | Optional versions list.                   |
+| `defaultVersion`   | `string`                   | `undefined`  | Default selected version.                 |
+| `headerContent`    | `React.ReactNode`          | `undefined`  | Custom content at the top.                |
+| `footerContent`    | `React.ReactNode`          | `undefined`  | Custom content at the bottom.             |
+| `showRail`         | `boolean`                  | `true`       | Show the draggable sidebar rail.          |
+| `linkComponent`    | `React.ComponentType<any>` | `undefined`  | Custom link component for items.          |
+| `linkProps`        | `Record<string, any>`      | `{}`         | Extra props passed to the link component. |
+
+`NavGroup` → `{ title: string; url?: string; items: NavItem[] }`
+
+`NavItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName; subItems?: NavSubItem[] }`
+
+`NavSubItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName }`
+
+Inherits other props from `Sidebar` via `React.ComponentProps<typeof Sidebar>`.
+
+---
+
+## Behavior
+
+- **Collapsible groups**: Clicking items with `subItems` toggles nested lists.
+- **Active state**: `isActive` highlights and expands relevant items/groups.
+- **Links**: Use `linkComponent` for framework routers (e.g., Next.js `Link`).
+- **Rail**: `showRail` displays a thin draggable handle to collapse/expand.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { SidebarProvider, SidebarTrigger } from "laif-ds";
+import { AppSidebar } from "laif-ds";
+
+const navigation = [
+  {
+    title: "Generale",
+    items: [
+      { title: "Dashboard", url: "#", isActive: true, iconName: "Home" },
+      { title: "Utenti", url: "#", iconName: "Users" },
+      {
+        title: "Messaggi",
+        url: "#",
+        iconName: "MessageSquare",
+        subItems: [
+          { title: "Inbox", url: "#inbox", iconName: "Inbox" },
+          { title: "Inviati", url: "#sent", iconName: "Send" },
+        ],
+      },
+    ],
+  },
+];
+
+export function Layout() {
+  return (
+    <SidebarProvider>
+      <div className="flex h-[100vh] overflow-hidden">
+        <AppSidebar navigation={navigation} showRail />
+        <div className="flex-1 overflow-auto p-4">
+          <SidebarTrigger />
+          {/* Page content */}
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
+```
+
+### With Header/Footer Content
+
+```tsx
+import { Button, Input } from "laif-ds";
+
+export function WithHeaderFooter() {
+  return (
+    <SidebarProvider>
+      <div className="flex h-[100vh] overflow-hidden">
+        <AppSidebar
+          navigation={[]}
+          headerContent={
+            <div className="p-4">
+              <Input
+                iconLeft="Search"
+                placeholder="Cerca..."
+                className="bg-d-background pl-8"
+              />
+            </div>
+          }
+          footerContent={
+            <div className="border-d-border border-t p-4">
+              <Button
+                variant="ghost"
+                className="w-full justify-start"
+                iconLeft="Settings"
+              >
+                Impostazioni
+              </Button>
+            </div>
+          }
+        />
+        <div className="flex-1 overflow-auto p-4" />
+      </div>
+    </SidebarProvider>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Routing**: Prefer `linkComponent` to avoid full page reloads (e.g., `next/link`).
+- **Icons**: Use `laif-ds` `Icon` by passing `iconName` in navigation items.
+- **Accessibility**: Sidebar primitives manage keyboard navigation and focus.