laif-ds 0.2.74 → 0.2.76

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

@@ -1,191 +1,196 @@
- # ContextMenu
- 
- ## Overview
- 
- Right-click context menu built on Radix. Supports items, groups, separators, submenus, checkbox items, radio groups, and keyboard shortcuts.
- 
- ---
- 
- ## Props
- 
- ### ContextMenu (Root)
- 
- | Prop        | Type              | Default     | Description                               |
- | ----------- | ----------------- | ----------- | ----------------------------------------- |
- | `children`  | `React.ReactNode` | **required**| Include `ContextMenuTrigger` and content. |
- 
- ### Subcomponents
- 
- - `ContextMenuTrigger`: The element that opens the menu on right-click.
- - `ContextMenuContent`: The menu panel container.
- - `ContextMenuItem`: A clickable item. Props:
-   - `variant?: "default" | "destructive"`
-   - `inset?: boolean`
- - `ContextMenuCheckboxItem`: Checkbox-like item. Props:
-   - `checked?: boolean`
- - `ContextMenuRadioGroup`: Radio group container. Props: `value: string`.
- - `ContextMenuRadioItem`: A radio item. Props: `value: string`.
- - `ContextMenuSub` / `ContextMenuSubTrigger` / `ContextMenuSubContent`: Submenu controls.
- - `ContextMenuLabel`: Section label. Props: `inset?: boolean`.
- - `ContextMenuSeparator`: Horizontal separator.
- - `ContextMenuShortcut`: Right-aligned text (e.g., keyboard shortcut).
- 
- ---
- 
- ## Behavior
- 
- - **Trigger**: Right-click (contextmenu) on the trigger shows the menu.
- - **Submenus**: Use `ContextMenuSub` to nest menus.
- - **Checkbox/Radio**: Use state to control `checked` and `value` props.
- - **Accessibility**: Keyboard navigation and ARIA attributes handled by Radix.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import {
-   ContextMenu,
-   ContextMenuTrigger,
-   ContextMenuContent,
-   ContextMenuItem,
-   ContextMenuSeparator,
-   ContextMenuShortcut,
- } from "laif-ds";
- 
- export function BasicContextMenu() {
-   return (
-     <ContextMenu>
-       <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-         Right click here
-       </ContextMenuTrigger>
-       <ContextMenuContent className="w-64">
-         <ContextMenuItem>
-           Back
-           <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-         </ContextMenuItem>
-         <ContextMenuItem>
-           Forward
-           <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-         </ContextMenuItem>
-         <ContextMenuItem>
-           Reload
-           <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-         </ContextMenuItem>
-         <ContextMenuSeparator />
-         <ContextMenuItem>
-           Save As...
-           <ContextMenuShortcut>⌘S</ContextMenuShortcut>
-         </ContextMenuItem>
-         <ContextMenuItem>
-           Print...
-           <ContextMenuShortcut>⌘P</ContextMenuShortcut>
-         </ContextMenuItem>
-       </ContextMenuContent>
-     </ContextMenu>
-   );
- }
- ```
- 
- ### With Submenu
- 
- ```tsx
- import {
-   ContextMenu,
-   ContextMenuTrigger,
-   ContextMenuContent,
-   ContextMenuItem,
-   ContextMenuSub,
-   ContextMenuSubTrigger,
-   ContextMenuSubContent,
-   ContextMenuSeparator,
-   ContextMenuShortcut,
- } from "laif-ds";
- 
- export function WithSubmenu() {
-   return (
-     <ContextMenu>
-       <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-         Right click here
-       </ContextMenuTrigger>
-       <ContextMenuContent className="w-64">
-         <ContextMenuItem>
-           Back
-           <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-         </ContextMenuItem>
-         <ContextMenuItem>
-           Forward
-           <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-         </ContextMenuItem>
-         <ContextMenuSub>
-           <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
-           <ContextMenuSubContent className="w-48">
-             <ContextMenuItem>
-               Save Page As...
-               <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-             </ContextMenuItem>
-             <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-             <ContextMenuItem>Name Window...</ContextMenuItem>
-             <ContextMenuSeparator />
-             <ContextMenuItem>Developer Tools</ContextMenuItem>
-           </ContextMenuSubContent>
-         </ContextMenuSub>
-         <ContextMenuSeparator />
-         <ContextMenuItem>
-           Print...
-           <ContextMenuShortcut>⌘P</ContextMenuShortcut>
-         </ContextMenuItem>
-       </ContextMenuContent>
-     </ContextMenu>
-   );
- }
- ```
- 
- ### With Checkbox and Radio
- 
- ```tsx
- import {
-   ContextMenu,
-   ContextMenuTrigger,
-   ContextMenuContent,
-   ContextMenuCheckboxItem,
-   ContextMenuLabel,
-   ContextMenuSeparator,
-   ContextMenuRadioGroup,
-   ContextMenuRadioItem,
- } from "laif-ds";
- 
- export function WithCheckboxAndRadio() {
-   return (
-     <ContextMenu>
-       <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-         Right click here
-       </ContextMenuTrigger>
-       <ContextMenuContent className="w-64">
-         <ContextMenuLabel>Options</ContextMenuLabel>
-         <ContextMenuSeparator />
-         <ContextMenuCheckboxItem>Show Bookmarks Bar</ContextMenuCheckboxItem>
-         <ContextMenuCheckboxItem checked>Show Full URLs</ContextMenuCheckboxItem>
-         <ContextMenuSeparator />
-         <ContextMenuLabel>View</ContextMenuLabel>
-         <ContextMenuRadioGroup value="comfortable">
-           <ContextMenuRadioItem value="comfortable">Comfortable</ContextMenuRadioItem>
-           <ContextMenuRadioItem value="compact">Compact</ContextMenuRadioItem>
-           <ContextMenuRadioItem value="condensed">Condensed</ContextMenuRadioItem>
-         </ContextMenuRadioGroup>
-       </ContextMenuContent>
-     </ContextMenu>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Variants**: Use `variant="destructive"` on `ContextMenuItem` for dangerous actions.
- - **Inset**: Use `inset` on items/labels to align with other content.
- - **Keyboard**: Use arrow keys and Enter to navigate/activate items.
- 
+# ContextMenu
+
+## Overview
+
+Right-click context menu built on Radix. Supports items, groups, separators, submenus, checkbox items, radio groups, and keyboard shortcuts.
+
+---
+
+## Props
+
+### ContextMenu (Root)
+
+| Prop       | Type              | Default      | Description                               |
+| ---------- | ----------------- | ------------ | ----------------------------------------- |
+| `children` | `React.ReactNode` | **required** | Include `ContextMenuTrigger` and content. |
+
+### Subcomponents
+
+- `ContextMenuTrigger`: The element that opens the menu on right-click.
+- `ContextMenuContent`: The menu panel container.
+- `ContextMenuItem`: A clickable item. Props:
+  - `variant?: "default" | "destructive"`
+  - `inset?: boolean`
+- `ContextMenuCheckboxItem`: Checkbox-like item. Props:
+  - `checked?: boolean`
+- `ContextMenuRadioGroup`: Radio group container. Props: `value: string`.
+- `ContextMenuRadioItem`: A radio item. Props: `value: string`.
+- `ContextMenuSub` / `ContextMenuSubTrigger` / `ContextMenuSubContent`: Submenu controls.
+- `ContextMenuLabel`: Section label. Props: `inset?: boolean`.
+- `ContextMenuSeparator`: Horizontal separator.
+- `ContextMenuShortcut`: Right-aligned text (e.g., keyboard shortcut).
+
+---
+
+## Behavior
+
+- **Trigger**: Right-click (contextmenu) on the trigger shows the menu.
+- **Submenus**: Use `ContextMenuSub` to nest menus.
+- **Checkbox/Radio**: Use state to control `checked` and `value` props.
+- **Accessibility**: Keyboard navigation and ARIA attributes handled by Radix.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+} from "laif-ds";
+
+export function BasicContextMenu() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>
+          Save As...
+          <ContextMenuShortcut>⌘S</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          Print...
+          <ContextMenuShortcut>⌘P</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+```
+
+### With Submenu
+
+```tsx
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+} from "laif-ds";
+
+export function WithSubmenu() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuItem>
+          Print...
+          <ContextMenuShortcut>⌘P</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+```
+
+### With Checkbox and Radio
+
+```tsx
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuCheckboxItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+} from "laif-ds";
+
+export function WithCheckboxAndRadio() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuLabel>Options</ContextMenuLabel>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem>Show Bookmarks Bar</ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem checked>
+          Show Full URLs
+        </ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>View</ContextMenuLabel>
+        <ContextMenuRadioGroup value="comfortable">
+          <ContextMenuRadioItem value="comfortable">
+            Comfortable
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="compact">Compact</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="condensed">
+            Condensed
+          </ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Variants**: Use `variant="destructive"` on `ContextMenuItem` for dangerous actions.
+- **Inset**: Use `inset` on items/labels to align with other content.
+- **Keyboard**: Use arrow keys and Enter to navigate/activate items.

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

@@ -1,94 +1,114 @@
- # DataCrossTable
- 
- ## Overview
- 
- Cross table component that renders a matrix from two headers (top/left) with virtualized rows, sticky headers/first column, optional filtering/sorting, and an edit mode supported by a context provider and action buttons.
- 
- ---
- 
- ## Props
- 
- | Prop               | Type                    | Default | Description |
- | ------------------ | ----------------------- | ------- | ----------- |
- | `crossTableData`   | `CrossTableData`        | —       | Matrix data and headers. |
- | `filterable`       | `boolean`               | `false` | Enables sorting via header buttons and row sorting by selected row. |
- | `loading`          | `boolean`               | `false` | Shows a skeleton table. |
- | `emptyComponent`   | `ReactNode`             | `undefined` | Shown when no data. |
- | `className`        | `string`                | `undefined` | Wrapper classes. |
- | `notFoundMessage`  | `string`                | `"Nessun risultato trovato."` | Fallback empty message. |
- | `cornerHeaderFrom` | `string`                | `"Da"`  | Corner label (top-left) from. |
- | `cornerHeaderTo`   | `string`                | `"A"`   | Corner label (top-left) to. |
- | `minWidthCell`     | `number`                | `160`   | Minimum cell width in px. |
- | `editable`         | `boolean`               | `false` | Enable edit mode features. |
- | `editMode`         | `boolean`               | `false` | Control edit mode from outside. |
- | `onEditModeChange` | `(editMode: boolean) => void` | `undefined` | Notified when edit mode changes. |
- | `onSelectedRow`    | `(row: CrossTableHeader) => void` | `undefined` | Emitted when selecting a row for sorting. |
- | `selectedRow`      | `CrossTableHeader`      | `undefined` | Controlled selected row. |
- | `rowSortAsc`       | `boolean`               | `true`  | Sort ascending when selecting a row. |
- 
- ### Types
- 
- - `CrossTableHeader` → `{ id: string; label: string }`
- - `CrossTableCell` → `{ render?:(fromId,toId,id?)=>ReactNode; value?: number|string|null; bgColor?: string; textColor?: string; fromId: string; toId: string; id?: string; editable?: boolean }`
- - `CrossTableData` → `{ headerTop: CrossTableHeader[]; headerLeft: CrossTableHeader[]; data: (CrossTableCell|null)[][] }`
- 
- ---
- 
- ## Provider & Actions
- 
- Use `DataCrossTableProvider` to manage edit state across the table and expose a buttons group.
- 
- - `DataCrossTableProvider` props:
-   - `onConfirmedCells?(data: { editedCells: ConfirmedCell[]; toDefaultCells: ConfirmedCell[] })`
-   - Labels: `editConfirmLabel`, `editCancelLabel`, `editRestoreDefaultLabel`
-   - Flags: `initialEditMode` (default `false`), `showDefaultActionButton` (default `false`)
-   - Editable input labels: `cellEditTitleLabel`, `cellEditModifiedLabel`, `cellConfirmButtonLabel`, `cellCancelButtonLabel`, `cellResetButtonLabel`
- - `DataCrossTableButtonsGroup`: shows Confirm/Cancel/Restore actions when `editMode=true`.
- 
- ---
- 
- ## Examples
- 
- ### Default with Provider
- 
- ```tsx
- import { DataCrossTable, DataCrossTableProvider, DataCrossTableButtonsGroup } from "laif-ds";
- 
- export function CrossEditable({ data }: { data: CrossTableData }) {
-   return (
-     <DataCrossTableProvider initialEditMode onConfirmedCells={(cells) => console.log(cells)}>
-       {({ editMode }) => (
-         <div className="space-y-3">
-           <DataCrossTableButtonsGroup />
-           <DataCrossTable crossTableData={data} editable editMode={editMode} minWidthCell={200} />
-         </div>
-       )}
-     </DataCrossTableProvider>
-   );
- }
- ```
- 
- ### Filterable
- 
- ```tsx
- <DataCrossTableProvider>
-   <DataCrossTable crossTableData={data} filterable minWidthCell={200} cornerHeaderFrom="From" cornerHeaderTo="To" />
- </DataCrossTableProvider>
- ```
- 
- ### Loading State
- 
- ```tsx
- <DataCrossTableProvider>
-   <DataCrossTable loading crossTableData={{ headerTop: [], headerLeft: [], data: [] }} />
- </DataCrossTableProvider>
- ```
- 
- ---
- 
- ## Notes
- 
- - **Virtualization**: Rows are virtualized for performance on large datasets.
- - **Sticky**: Top header row and first column are sticky; corner cell has higher z-index.
- - **Editing**: Editable cells open a popover editor; edited/reset markers are shown per cell.
- 
+# DataCrossTable
+
+## Overview
+
+Cross table component that renders a matrix from two headers (top/left) with virtualized rows, sticky headers/first column, optional filtering/sorting, and an edit mode supported by a context provider and action buttons.
+
+---
+
+## Props
+
+| Prop               | Type                              | Default                       | Description                                                         |
+| ------------------ | --------------------------------- | ----------------------------- | ------------------------------------------------------------------- |
+| `crossTableData`   | `CrossTableData`                  | —                             | Matrix data and headers.                                            |
+| `filterable`       | `boolean`                         | `false`                       | Enables sorting via header buttons and row sorting by selected row. |
+| `loading`          | `boolean`                         | `false`                       | Shows a skeleton table.                                             |
+| `emptyComponent`   | `ReactNode`                       | `undefined`                   | Shown when no data.                                                 |
+| `className`        | `string`                          | `undefined`                   | Wrapper classes.                                                    |
+| `notFoundMessage`  | `string`                          | `"Nessun risultato trovato."` | Fallback empty message.                                             |
+| `cornerHeaderFrom` | `string`                          | `"Da"`                        | Corner label (top-left) from.                                       |
+| `cornerHeaderTo`   | `string`                          | `"A"`                         | Corner label (top-left) to.                                         |
+| `minWidthCell`     | `number`                          | `160`                         | Minimum cell width in px.                                           |
+| `editable`         | `boolean`                         | `false`                       | Enable edit mode features.                                          |
+| `editMode`         | `boolean`                         | `false`                       | Control edit mode from outside.                                     |
+| `onEditModeChange` | `(editMode: boolean) => void`     | `undefined`                   | Notified when edit mode changes.                                    |
+| `onSelectedRow`    | `(row: CrossTableHeader) => void` | `undefined`                   | Emitted when selecting a row for sorting.                           |
+| `selectedRow`      | `CrossTableHeader`                | `undefined`                   | Controlled selected row.                                            |
+| `rowSortAsc`       | `boolean`                         | `true`                        | Sort ascending when selecting a row.                                |
+
+### Types
+
+- `CrossTableHeader` → `{ id: string; label: string }`
+- `CrossTableCell` → `{ render?:(fromId,toId,id?)=>ReactNode; value?: number|string|null; bgColor?: string; textColor?: string; fromId: string; toId: string; id?: string; editable?: boolean }`
+- `CrossTableData` → `{ headerTop: CrossTableHeader[]; headerLeft: CrossTableHeader[]; data: (CrossTableCell|null)[][] }`
+
+---
+
+## Provider & Actions
+
+Use `DataCrossTableProvider` to manage edit state across the table and expose a buttons group.
+
+- `DataCrossTableProvider` props:
+  - `onConfirmedCells?(data: { editedCells: ConfirmedCell[]; toDefaultCells: ConfirmedCell[] })`
+  - Labels: `editConfirmLabel`, `editCancelLabel`, `editRestoreDefaultLabel`
+  - Flags: `initialEditMode` (default `false`), `showDefaultActionButton` (default `false`)
+  - Editable input labels: `cellEditTitleLabel`, `cellEditModifiedLabel`, `cellConfirmButtonLabel`, `cellCancelButtonLabel`, `cellResetButtonLabel`
+- `DataCrossTableButtonsGroup`: shows Confirm/Cancel/Restore actions when `editMode=true`.
+
+---
+
+## Examples
+
+### Default with Provider
+
+```tsx
+import {
+  DataCrossTable,
+  DataCrossTableProvider,
+  DataCrossTableButtonsGroup,
+} from "laif-ds";
+
+export function CrossEditable({ data }: { data: CrossTableData }) {
+  return (
+    <DataCrossTableProvider
+      initialEditMode
+      onConfirmedCells={(cells) => console.log(cells)}
+    >
+      {({ editMode }) => (
+        <div className="space-y-3">
+          <DataCrossTableButtonsGroup />
+          <DataCrossTable
+            crossTableData={data}
+            editable
+            editMode={editMode}
+            minWidthCell={200}
+          />
+        </div>
+      )}
+    </DataCrossTableProvider>
+  );
+}
+```
+
+### Filterable
+
+```tsx
+<DataCrossTableProvider>
+  <DataCrossTable
+    crossTableData={data}
+    filterable
+    minWidthCell={200}
+    cornerHeaderFrom="From"
+    cornerHeaderTo="To"
+  />
+</DataCrossTableProvider>
+```
+
+### Loading State
+
+```tsx
+<DataCrossTableProvider>
+  <DataCrossTable
+    loading
+    crossTableData={{ headerTop: [], headerLeft: [], data: [] }}
+  />
+</DataCrossTableProvider>
+```
+
+---
+
+## Notes
+
+- **Virtualization**: Rows are virtualized for performance on large datasets.
+- **Sticky**: Top header row and first column are sticky; corner cell has higher z-index.
+- **Editing**: Editable cells open a popover editor; edited/reset markers are shown per cell.