laif-ds 0.2.74 → 0.2.76

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

@@ -1,69 +1,72 @@
- # ThemeSwitcher
- 
- ## Overview
- 
- Theme toggle with three options: system, light, dark. Uses a controlled/uncontrolled API and avoids hydration mismatch by rendering only after mount.
- 
- ---
- 
- ## Props
- 
- | Prop           | Type                               | Default   | Description |
- | -------------- | ---------------------------------- | --------- | ----------- |
- | `value`        | `"light" | "dark" | "system"` | `undefined` | Controlled theme value. |
- | `onChange`     | `(theme: "light" | "dark" | "system") => void` | `undefined` | Called when theme changes. |
- | `defaultValue` | `"light" | "dark" | "system"` | `"system"` | Initial value when uncontrolled. |
- | `className`    | `string`                            | `undefined` | Container classes. |
- 
- ---
- 
- ## Behavior
- 
- - **SSR safe**: Renders `null` until mounted to prevent hydration mismatch.
- - **Active state**: Highlights the active option with a rounded background.
- - **Control**: Works in both controlled (`value`/`onChange`) and uncontrolled (`defaultValue`) modes.
- 
- ---
- 
- ## Examples
- 
- ### Default (uncontrolled)
- 
- ```tsx
- import { ThemeSwitcher } from "laif-ds";
- 
- export function DefaultTheme() {
-   return <ThemeSwitcher defaultValue="system" />;
- }
- ```
- 
- ### Controlled
- 
- ```tsx
- import * as React from "react";
- import { ThemeSwitcher } from "laif-ds";
- 
- export function ControlledTheme() {
-   const [theme, setTheme] = React.useState<"light" | "dark" | "system">("system");
-   return (
-     <div className="flex flex-col items-start gap-2">
-       <ThemeSwitcher value={theme} onChange={setTheme} />
-       <div className="text-d-muted-foreground text-sm">Current theme: <span className="font-medium">{theme}</span></div>
-     </div>
-   );
- }
- ```
- 
- ### Custom styling
- 
- ```tsx
- <ThemeSwitcher defaultValue="system" className="h-10 w-32 p-2" />
- ```
- 
- ---
- 
- ## Notes
- 
- - **Icons**: The component renders icons internally; no configuration required.
- - **Persistence**: Persisting theme choice is up to the app (e.g., localStorage + class on `html`).
- 
+# ThemeSwitcher
+
+## Overview
+
+Theme toggle with three options: system, light, dark. Uses a controlled/uncontrolled API and avoids hydration mismatch by rendering only after mount.
+
+---
+
+## Props
+
+| Prop           | Type             | Default     | Description        |
+| -------------- | ---------------- | ----------- | ------------------ | ----------- | -------------------------------- |
+| `value`        | `"light"         | "dark"      | "system"`          | `undefined` | Controlled theme value.          |
+| `onChange`     | `(theme: "light" | "dark"      | "system") => void` | `undefined` | Called when theme changes.       |
+| `defaultValue` | `"light"         | "dark"      | "system"`          | `"system"`  | Initial value when uncontrolled. |
+| `className`    | `string`         | `undefined` | Container classes. |
+
+---
+
+## Behavior
+
+- **SSR safe**: Renders `null` until mounted to prevent hydration mismatch.
+- **Active state**: Highlights the active option with a rounded background.
+- **Control**: Works in both controlled (`value`/`onChange`) and uncontrolled (`defaultValue`) modes.
+
+---
+
+## Examples
+
+### Default (uncontrolled)
+
+```tsx
+import { ThemeSwitcher } from "laif-ds";
+
+export function DefaultTheme() {
+  return <ThemeSwitcher defaultValue="system" />;
+}
+```
+
+### Controlled
+
+```tsx
+import * as React from "react";
+import { ThemeSwitcher } from "laif-ds";
+
+export function ControlledTheme() {
+  const [theme, setTheme] = React.useState<"light" | "dark" | "system">(
+    "system",
+  );
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <ThemeSwitcher value={theme} onChange={setTheme} />
+      <div className="text-d-muted-foreground text-sm">
+        Current theme: <span className="font-medium">{theme}</span>
+      </div>
+    </div>
+  );
+}
+```
+
+### Custom styling
+
+```tsx
+<ThemeSwitcher defaultValue="system" className="h-10 w-32 p-2" />
+```
+
+---
+
+## Notes
+
+- **Icons**: The component renders icons internally; no configuration required.
+- **Persistence**: Persisting theme choice is up to the app (e.g., localStorage + class on `html`).

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

@@ -17,6 +17,7 @@ export function App() {
 ```
 
 Applies classNames for:
+
 - `toast`
 - `description`
 - `actionButton`

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

@@ -1,91 +1,102 @@
- # Tooltip
- 
- ## Overview
- 
- Radix Tooltip wrappers with DS tokens and variants. Includes `TooltipProvider` for global delay, `Tooltip` root, `TooltipTrigger`, and `TooltipContent` with `primary` and `card` looks.
- 
- ---
- 
- ## Components & Props
- 
- - **TooltipProvider**
-   - `delayDuration?: number` (default `0`)
-   - Provides default open delay for nested tooltips.
- - **Tooltip** (Root)
-   - Inherits Radix `TooltipPrimitive.Root` props: `open?`, `defaultOpen?`, `onOpenChange?`, `disableHoverableContent?`.
-   - Note: `delayDuration` is set via `TooltipProvider`, not here.
- - **TooltipTrigger**
-   - Inherits Radix `Trigger` props. Use `asChild` to wrap buttons/links.
- - **TooltipContent**
-   - Inherits Radix `Content` props: `side?`, `align?`, `sideOffset?` (default `0`), `alignOffset?`.
-   - `variant?: "primary" | "card"` (default `"primary"`).
- 
- ---
- 
- ## Examples
- 
- ### Default
- 
- ```tsx
- import { Button, Tooltip, TooltipTrigger, TooltipContent } from "laif-ds";
- 
- export function Basic() {
-   return (
-     <Tooltip>
-       <TooltipTrigger asChild>
-         <Button variant="outline">Passa sopra</Button>
-       </TooltipTrigger>
-       <TooltipContent>Questo è un tooltip</TooltipContent>
-     </Tooltip>
-   );
- }
- ```
- 
- ### Positioning
- 
- ```tsx
- <div className="flex items-center gap-4">
-   <Tooltip>
-     <TooltipTrigger asChild><Button size="sm">Top</Button></TooltipTrigger>
-     <TooltipContent side="top" sideOffset={5}>Tooltip in alto</TooltipContent>
-   </Tooltip>
-   <Tooltip>
-     <TooltipTrigger asChild><Button size="sm">Right</Button></TooltipTrigger>
-     <TooltipContent side="right" sideOffset={5}>Tooltip a destra</TooltipContent>
-   </Tooltip>
- </div>
- ```
- 
- ### With Delay
- 
- ```tsx
- import { TooltipProvider } from "laif-ds";
- 
- export function WithDelay() {
-   return (
-     <TooltipProvider delayDuration={500}>
-       <Tooltip>
-         <TooltipTrigger asChild><Button>Ritardo 500ms</Button></TooltipTrigger>
-         <TooltipContent>Appare dopo 500ms</TooltipContent>
-       </Tooltip>
-     </TooltipProvider>
-   );
- }
- ```
- 
- ### Card Variant
- 
- ```tsx
- <Tooltip>
-   <TooltipTrigger asChild><Button variant="ghost">Info</Button></TooltipTrigger>
-   <TooltipContent variant="card">Contenuto con bordo e shadow</TooltipContent>
- </Tooltip>
- ```
- 
- ---
- 
- ## Notes
- 
- - **Variants**: `primary` for compact color tooltip; `card` for bordered content blocks.
- - **Groups**: Wrap toolbars with multiple triggers; provider can be defined once at app root.
- 
+# Tooltip
+
+## Overview
+
+Radix Tooltip wrappers with DS tokens and variants. Includes `TooltipProvider` for global delay, `Tooltip` root, `TooltipTrigger`, and `TooltipContent` with `primary` and `card` looks.
+
+---
+
+## Components & Props
+
+- **TooltipProvider**
+  - `delayDuration?: number` (default `0`)
+  - Provides default open delay for nested tooltips.
+- **Tooltip** (Root)
+  - Inherits Radix `TooltipPrimitive.Root` props: `open?`, `defaultOpen?`, `onOpenChange?`, `disableHoverableContent?`.
+  - Note: `delayDuration` is set via `TooltipProvider`, not here.
+- **TooltipTrigger**
+  - Inherits Radix `Trigger` props. Use `asChild` to wrap buttons/links.
+- **TooltipContent**
+  - Inherits Radix `Content` props: `side?`, `align?`, `sideOffset?` (default `0`), `alignOffset?`.
+  - `variant?: "primary" | "card"` (default `"primary"`).
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import { Button, Tooltip, TooltipTrigger, TooltipContent } from "laif-ds";
+
+export function Basic() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Passa sopra</Button>
+      </TooltipTrigger>
+      <TooltipContent>Questo è un tooltip</TooltipContent>
+    </Tooltip>
+  );
+}
+```
+
+### Positioning
+
+```tsx
+<div className="flex items-center gap-4">
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="sm">Top</Button>
+    </TooltipTrigger>
+    <TooltipContent side="top" sideOffset={5}>
+      Tooltip in alto
+    </TooltipContent>
+  </Tooltip>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="sm">Right</Button>
+    </TooltipTrigger>
+    <TooltipContent side="right" sideOffset={5}>
+      Tooltip a destra
+    </TooltipContent>
+  </Tooltip>
+</div>
+```
+
+### With Delay
+
+```tsx
+import { TooltipProvider } from "laif-ds";
+
+export function WithDelay() {
+  return (
+    <TooltipProvider delayDuration={500}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button>Ritardo 500ms</Button>
+        </TooltipTrigger>
+        <TooltipContent>Appare dopo 500ms</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+```
+
+### Card Variant
+
+```tsx
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="ghost">Info</Button>
+  </TooltipTrigger>
+  <TooltipContent variant="card">Contenuto con bordo e shadow</TooltipContent>
+</Tooltip>
+```
+
+---
+
+## Notes
+
+- **Variants**: `primary` for compact color tooltip; `card` for bordered content blocks.
+- **Groups**: Wrap toolbars with multiple triggers; provider can be defined once at app root.

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

@@ -1,65 +1,68 @@
- # Typo
- 
- ## Overview
- 
- Typography component with predefined variants for headings, body text, captions, and utility text. Renders a semantic HTML tag per variant (overridable via `as`).
- 
- ---
- 
- ## Props
- 
- | Prop       | Type                              | Default   | Description |
- | ---------- | --------------------------------- | --------- | ----------- |
- | `variant`  | `TypoVariant`                     | `"body"` | Typographic style to apply. |
- | `as`       | `React.ElementType`               | auto      | Override rendered HTML element. |
- | `className`| `string`                          | `undefined` | Extra classes. |
- | `...props` | `React.HTMLAttributes<HTMLElement>` | —         | Spread to rendered element. |
- 
- `TypoVariant`:
- 
- - `"hero-title"`, `"title"`, `"subtitle"`
- - `"body"`, `"body-bold"`
- - `"caption"`, `"overline"`, `"button"`, `"small"`
- - `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`
- 
- ---
- 
- ## Behavior
- 
- - **Semantic tag**: Each variant maps to a sensible HTML tag (e.g., `h1` for `h1`, `p` for `body`).
- - **Theming**: Variants use DS tokens for color and size; add `className` to tweak.
- 
- ---
- 
- ## Examples
- 
- ```tsx
- import { Typo } from "laif-ds";
- 
- export function Variants() {
-   return (
-     <div className="space-y-2">
-       <Typo variant="hero-title">Hero Title</Typo>
-       <Typo variant="title">Page Title</Typo>
-       <Typo variant="subtitle">Subtitle</Typo>
-       <Typo variant="body">Regular body text</Typo>
-       <Typo variant="body-bold">Bold body text</Typo>
-       <Typo variant="caption">Caption</Typo>
-       <Typo variant="overline">Overline</Typo>
-       <Typo variant="small">Small text</Typo>
-     </div>
-   );
- }
- 
- export function OverrideElement() {
-   return <Typo variant="body" as="span">Inline body as span</Typo>;
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Accessibility**: Use heading variants (`h1`–`h5`) to reflect document structure.
- - **Consistency**: Prefer `variant` over ad‑hoc classes for consistent typography.
- 
+# Typo
+
+## Overview
+
+Typography component with predefined variants for headings, body text, captions, and utility text. Renders a semantic HTML tag per variant (overridable via `as`).
+
+---
+
+## Props
+
+| Prop        | Type                                | Default     | Description                     |
+| ----------- | ----------------------------------- | ----------- | ------------------------------- |
+| `variant`   | `TypoVariant`                       | `"body"`    | Typographic style to apply.     |
+| `as`        | `React.ElementType`                 | auto        | Override rendered HTML element. |
+| `className` | `string`                            | `undefined` | Extra classes.                  |
+| `...props`  | `React.HTMLAttributes<HTMLElement>` | —           | Spread to rendered element.     |
+
+`TypoVariant`:
+
+- `"hero-title"`, `"title"`, `"subtitle"`
+- `"body"`, `"body-bold"`
+- `"caption"`, `"overline"`, `"button"`, `"small"`
+- `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`
+
+---
+
+## Behavior
+
+- **Semantic tag**: Each variant maps to a sensible HTML tag (e.g., `h1` for `h1`, `p` for `body`).
+- **Theming**: Variants use DS tokens for color and size; add `className` to tweak.
+
+---
+
+## Examples
+
+```tsx
+import { Typo } from "laif-ds";
+
+export function Variants() {
+  return (
+    <div className="space-y-2">
+      <Typo variant="hero-title">Hero Title</Typo>
+      <Typo variant="title">Page Title</Typo>
+      <Typo variant="subtitle">Subtitle</Typo>
+      <Typo variant="body">Regular body text</Typo>
+      <Typo variant="body-bold">Bold body text</Typo>
+      <Typo variant="caption">Caption</Typo>
+      <Typo variant="overline">Overline</Typo>
+      <Typo variant="small">Small text</Typo>
+    </div>
+  );
+}
+
+export function OverrideElement() {
+  return (
+    <Typo variant="body" as="span">
+      Inline body as span
+    </Typo>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Accessibility**: Use heading variants (`h1`–`h5`) to reflect document structure.
+- **Consistency**: Prefer `variant` over ad‑hoc classes for consistent typography.

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

@@ -1,64 +1,63 @@
- # WeeklyCalendar
- 
- ## Overview
- 
- Week-view calendar with day columns, time column, current timeline, optional week navigation and appointment grouping by category.
- 
- ---
- 
- ## Props
- 
- | Prop               | Type                                         | Default | Description |
- | ------------------ | -------------------------------------------- | ------- | ----------- |
- | `appointments`     | `CalendarAppointment[]`                      | `[]`    | Appointments to render across the week. |
- | `onWeekChange`     | `(weekOffset: number, weekStart: string, weekEnd: string) => void` | `undefined` | Emitted when navigating weeks. |
- | `initialWeekOffset`| `number`                                     | `0`     | 0 = current week; negative/positive for past/future. |
- | `showNavigation`   | `boolean`                                    | `true`  | Show previous/next/current week controls. |
- | `showWeekIndicator`| `boolean`                                    | `false` | Show current week label. |
- | `enableGrouping`   | `boolean`                                    | `false` | Group appointments by `appointment.groupBy`. |
- | `groupLabel`       | `string`                                     | `undefined` | Group header label. |
- | `calendarStartHour`| `number`                                     | `8`     | First visible hour (0-23). |
- | `calendarEndHour`  | `number`                                     | `20`    | Last visible hour (0-23). |
- | `todayString`      | `string`                                     | `"Oggi"` | Label for "today" button.
- 
- `CalendarAppointment` minimal shape: `{ id: number|string; title: string; date: YYYY-MM-DD; startTime: HH:mm; endTime: HH:mm; description?: string; color?: string; attributes?: { key: string; value: string; showTooltip?: boolean; showPreview?: boolean }[]; groupBy?: string }`.
- 
- ---
- 
- ## Behavior
- 
- - **Navigation**: Previous/next/current week; `onWeekChange` returns offset and ISO dates.
- - **Grouping**: When `enableGrouping`, appointments are grouped under `groupBy` headings per day.
- - **Attributes**: Show in tooltip or in preview card depending on flags.
- 
- ---
- 
- ## Examples
- 
- ```tsx
- import { WeeklyCalendar } from "laif-ds";
- import { mockAppointments } from "laif-ds";
- 
- export function GroupedCalendar() {
-   return (
-     <div className="container mx-auto overflow-y-auto">
-       <WeeklyCalendar
-         appointments={mockAppointments}
-         calendarStartHour={6}
-         calendarEndHour={21}
-         enableGrouping
-         groupLabel="Aula studio"
-         showNavigation
-       />
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Localization**: Weekday labels are Italian by default; adapt as needed in upstream module.
- - **Performance**: Efficient day partitioning and rendering; large datasets should still be chunked server-side when possible.
- 
+# WeeklyCalendar
+
+## Overview
+
+Week-view calendar with day columns, time column, current timeline, optional week navigation and appointment grouping by category.
+
+---
+
+## Props
+
+| Prop                | Type                                                               | Default     | Description                                          |
+| ------------------- | ------------------------------------------------------------------ | ----------- | ---------------------------------------------------- |
+| `appointments`      | `CalendarAppointment[]`                                            | `[]`        | Appointments to render across the week.              |
+| `onWeekChange`      | `(weekOffset: number, weekStart: string, weekEnd: string) => void` | `undefined` | Emitted when navigating weeks.                       |
+| `initialWeekOffset` | `number`                                                           | `0`         | 0 = current week; negative/positive for past/future. |
+| `showNavigation`    | `boolean`                                                          | `true`      | Show previous/next/current week controls.            |
+| `showWeekIndicator` | `boolean`                                                          | `false`     | Show current week label.                             |
+| `enableGrouping`    | `boolean`                                                          | `false`     | Group appointments by `appointment.groupBy`.         |
+| `groupLabel`        | `string`                                                           | `undefined` | Group header label.                                  |
+| `calendarStartHour` | `number`                                                           | `8`         | First visible hour (0-23).                           |
+| `calendarEndHour`   | `number`                                                           | `20`        | Last visible hour (0-23).                            |
+| `todayString`       | `string`                                                           | `"Oggi"`    | Label for "today" button.                            |
+
+`CalendarAppointment` minimal shape: `{ id: number|string; title: string; date: YYYY-MM-DD; startTime: HH:mm; endTime: HH:mm; description?: string; color?: string; attributes?: { key: string; value: string; showTooltip?: boolean; showPreview?: boolean }[]; groupBy?: string }`.
+
+---
+
+## Behavior
+
+- **Navigation**: Previous/next/current week; `onWeekChange` returns offset and ISO dates.
+- **Grouping**: When `enableGrouping`, appointments are grouped under `groupBy` headings per day.
+- **Attributes**: Show in tooltip or in preview card depending on flags.
+
+---
+
+## Examples
+
+```tsx
+import { WeeklyCalendar } from "laif-ds";
+import { mockAppointments } from "laif-ds";
+
+export function GroupedCalendar() {
+  return (
+    <div className="container mx-auto overflow-y-auto">
+      <WeeklyCalendar
+        appointments={mockAppointments}
+        calendarStartHour={6}
+        calendarEndHour={21}
+        enableGrouping
+        groupLabel="Aula studio"
+        showNavigation
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Localization**: Weekday labels are Italian by default; adapt as needed in upstream module.
+- **Performance**: Efficient day partitioning and rendering; large datasets should still be chunked server-side when possible.

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

@@ -85,6 +85,7 @@ This document provides a complete mapping of all components available in the lai
 - **Pagination** - Page navigation component for paginated content
 - **Table** - Basic table component with styling
 - **TableSkeleton** - Loading skeleton for table components
+- **TruncatedCell** - Text display component with automatic truncation detection and popover preview
 - **Typo** - Typography component for consistent text styling
 
 ### Content & Media Components