laif-ds 0.2.43 → 0.2.45

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

@@ -0,0 +1,62 @@
+# Form
+
+## Overview
+
+React Hook Form helpers: provider and primitives to build accessible fields with labels, descriptions, and error messages.
+
+---
+
+## Exports
+
+- `Form` — React Hook Form provider (alias of `FormProvider`)
+- `FormField` — Wraps `Controller` and provides field context
+- `FormItem` — Field container that provides IDs to children
+- `FormLabel` — Label bound to the current field
+- `FormControl` — Slot wrapper that wires aria-attributes
+- `FormDescription` — Helper text
+- `FormMessage` — Error message (auto reads from RHF state)
+- `useFormField` — Hook to access field context
+
+---
+
+## Example
+
+```tsx
+import { useForm } from "react-hook-form";
+import { Input, Button } from "laif-ds";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "laif-ds";
+
+export function ProfileForm() {
+  const form = useForm<{ email: string }>({ defaultValues: { email: "" } });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit((v) => console.log(v))}>
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="you@example.com" {...field} />
+              </FormControl>
+              <FormDescription>We will never share your email.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="mt-4">Save</Button>
+      </form>
+    </Form>
+  );
+}
+```

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

@@ -0,0 +1,137 @@
+ # FormComposer
+ 
+ ## Overview
+ 
+ Declarative form builder using `react-hook-form` (with optional Zod). Renders inputs, selects, textareas, and checkboxes from a simple items config, handles validation, and provides a submit button with loading state.
+ 
+ ---
+ 
+ ## Types
+ 
+ ### FormComposerItem
+ 
+ ```ts
+ interface FormComposerItem {
+   label: string;
+   component: "input" | "select" | "textarea" | "checkbox";
+   name: string;
+   defaultValue?: string | boolean | number;
+   options?: AppSelectOption[]; // only for "select"
+   disabled?: boolean;
+   placeholder?: string;
+ }
+ ```
+ 
+ ---
+ 
+ ## Props
+ 
+ | Prop           | Type                     | Default     | Description                                           |
+ | -------------- | ------------------------ | ----------- | ----------------------------------------------------- |
+ | `cols`         | `"1" | "2" | "3"`          | `"2"`       | Grid columns for the items.                           |
+ | `items`        | `FormComposerItem[]`     | **required**| Field configuration list.                             |
+ | `schema`       | `ZodTypeAny`             | `undefined` | Optional Zod schema to enable validation/resolver.    |
+ | `defaultValues`| `Record<string, any>`    | `undefined` | RHF default values; overrides item `defaultValue`.    |
+ | `submitText`   | `string`                 | `"Invia"`   | Submit button label.                                  |
+ | `onSubmit`     | `(data: any) => void`    | `undefined` | Called with valid form values.                        |
+ | `isSubmitting` | `boolean`                | `false`     | Controls submit button loading/disabled state.        |
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Validation**: If `schema` is provided, a Zod resolver is attached; otherwise native validity is used.
+ - **Defaults**: Each `item.defaultValue` is merged into RHF defaults, unless `defaultValues` is passed.
+ - **Components**:
+   - `component: "input"` → `Input` with `label` and `placeholder`.
+   - `component: "textarea"` → `Textarea` with `label`.
+   - `component: "select"` → `AppSelect` with `options`.
+   - `component: "checkbox"` → `Checkbox` + `Label` inline.
+ - **Errors**: Zod error messages are rendered under each field.
+ - **Layout**: Items are placed in a responsive grid with `cols` columns; last item may span full width.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### With Zod Schema
+ 
+ ```tsx
+ import { z } from "zod";
+ import { FormComposer } from "laif-ds";
+ 
+ const formSchema = z.object({
+   name: z.string().min(2, "Il nome è troppo corto"),
+   email: z.string().email("Email non valida"),
+   message: z.string().min(10, "Almeno 10 caratteri"),
+   select: z.string().min(1, "Seleziona una opzione"),
+   checkbox: z.boolean().default(false),
+ });
+ 
+ export function ContactForm() {
+   return (
+     <div className="w-[800px]">
+       <FormComposer
+         schema={formSchema}
+         items={[
+           { label: "Name", component: "input", name: "name", placeholder: "Inserisci il tuo nome", defaultValue: "ciao" },
+           { label: "Select", component: "select", name: "select", defaultValue: "1", options: [
+             { value: "1", label: "Option 1" },
+             { value: "2", label: "Option 2" },
+             { value: "3", label: "Option 3" },
+           ] },
+           { label: "Email", component: "input", name: "email", placeholder: "Inserisci la tua email" },
+           { label: "Checkbox", component: "checkbox", name: "checkbox", defaultValue: true },
+           { label: "Message", component: "textarea", name: "message", placeholder: "Inserisci il tuo messaggio" },
+         ]}
+         onSubmit={(data) => console.log(data)}
+       />
+     </div>
+   );
+ }
+ ```
+ 
+ ### Submit State
+ 
+ ```tsx
+ import * as React from "react";
+ import { z } from "zod";
+ import { FormComposer } from "laif-ds";
+ 
+ const schema = z.object({ name: z.string().min(2), email: z.string().email() });
+ 
+ export function SubmitExample() {
+   const [values, setValues] = React.useState({});
+   const [isSubmitting, setSubmitting] = React.useState(false);
+ 
+   const onSubmit = (data: any) => {
+     setSubmitting(true);
+     setTimeout(() => setSubmitting(false), 2000);
+     setValues(data);
+   };
+ 
+   return (
+     <div className="w-[800px]">
+       <FormComposer
+         schema={schema}
+         items={[
+           { label: "Name", component: "input", name: "name" },
+           { label: "Email", component: "input", name: "email" },
+         ]}
+         onSubmit={onSubmit}
+         isSubmitting={isSubmitting}
+       />
+       <pre>{JSON.stringify(values, null, 2)}</pre>
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Extensibility**: Use `startContent`, `endContent`, `iconLeft`, `iconRight` props of `Input` for richer fields.
+ - **Select**: Provide `options` for `component: "select"` (`AppSelectOption[]`).
+ - **Accessibility**: Labels are wired via `htmlFor`/`id`; errors use `role="alert"` and `aria-live` when relevant.
+ 

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

@@ -0,0 +1,122 @@
+ # GanttChart
+ 
+ ## Overview
+ 
+ Composable Gantt chart with a tree, time scale, and draggable bars. Built as a root `Gantt` component with subcomponents `Gantt.Controls` and `Gantt.Chart`. Supports zoom dimensions, drag step sizes, programmatic callbacks, and custom left-render content for items.
+ 
+ ---
+ 
+ ## Components & Props
+ 
+ ### Gantt (root)
+ 
+ | Prop                  | Type                                   | Default                | Description |
+ | --------------------- | -------------------------------------- | ---------------------- | ----------- |
+ | `children`            | `React.ReactNode`                      | —                      | Compose `Gantt.Controls` and `Gantt.Chart`. |
+ | `draggable`           | `boolean`                              | `false`                | Enable dragging/resizing of bars. |
+ | `defaultDimension`    | `GanttDimensions`                      | `GanttDimensions.HOUR` | Initial zoom (hour, day, etc.). |
+ | `defaultDragStepSize` | `DragStepSizes`                        | `DragStepSizes.THIRTY_MIN` | Initial drag step. |
+ | `treeTitle`           | `string`                               | `"Attività"`          | Title of the left tree column. |
+ 
+ See `enums` in `ui/gantt/enums/` for `GanttDimensions` and `DragStepSizes` values.
+ 
+ ### Gantt.Chart
+ 
+ | Prop              | Type                        | Default     | Description |
+ | ----------------- | --------------------------- | ----------- | ----------- |
+ | `data`            | `GanttDataType[]`           | **required**| Items to render (with optional nested children). |
+ | `className`       | `string`                    | `undefined` | Wrapper classes. |
+ | `onBarDoubleClick`| `(bar) => void`             | `undefined` | Invoked on item double click. |
+ | `onBarChange`     | `(bar, newData) => void`    | `undefined` | Invoked after drag/resize changes. |
+ 
+ ### Gantt.Controls
+ 
+ | Prop        | Type     | Default     | Description |
+ | ----------- | -------- | ----------- | ----------- |
+ | `className` | `string` | `undefined` | Toolbar wrapper classes. |
+ 
+ ---
+ 
+ ## Data Types
+ 
+ Minimal item structure (`ui/gantt/types/GanttData.tsx`):
+ 
+ ```ts
+ type RawGanttDataType = {
+   key: string
+   title: string
+   color?: string
+   data?: BarItemDataType            // Repeat or fixed datetime interval
+   children?: GanttDataType[]        // Nested items
+   leftRender?: React.ReactNode | ((bar) => React.ReactNode)
+ }
+ 
+ type NoRepeatDataType = { startDate: string; endDate: string }
+ type RepeatDataType = {
+   repeatType: DataRepeatTypes
+   fromTime: number
+   toTime: number
+   fromDate?: string
+   toDate?: string
+   weekdays?: number[]
+   monthdays?: number[]
+ }
+ ```
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Default
+ 
+ ```tsx
+ import Gantt from "laif-ds/ui/gantt/components/Gantt/Gantt";
+ 
+ export function Basic() {
+   return (
+     <div className="h-[500px]">
+       <Gantt>
+         <Gantt.Controls />
+         <Gantt.Chart data={sampleData} />
+       </Gantt>
+     </div>
+   );
+ }
+ ```
+ 
+ ### Draggable + Defaults
+ 
+ ```tsx
+ import { GanttDimensions, DragStepSizes } from "laif-ds/ui/gantt/enums";
+ 
+ export function Draggable() {
+   return (
+     <div className="h-[500px]">
+       <Gantt draggable defaultDimension={GanttDimensions.DAY} defaultDragStepSize={DragStepSizes.ONE_DAY}>
+         <Gantt.Controls />
+         <Gantt.Chart data={sampleData} />
+       </Gantt>
+     </div>
+   );
+ }
+ ```
+ 
+ ### Custom Tree Title
+ 
+ ```tsx
+ <div className="h-[500px]">
+   <Gantt draggable treeTitle="Progetti">
+     <Gantt.Controls />
+     <Gantt.Chart data={sampleData} />
+   </Gantt>
+ </div>
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Virtualization**: Tree, bars, and scale use windowed lists for performance.
+ - **Current time**: Auto-updates while scrolling to keep the date indicator in sync.
+ - **Left render**: Use `leftRender` to inject icons/actions next to item titles.
+ 

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

@@ -0,0 +1,37 @@
+# HoverCard
+
+## Overview
+
+Small informational card that appears on hover. Built on Radix Hover Card.
+
+---
+
+## Exports
+
+- `HoverCard`
+- `HoverCardTrigger`
+- `HoverCardContent` (props: `align = "center"`, `sideOffset = 4`)
+
+---
+
+## Example
+
+```tsx
+import { HoverCard, HoverCardTrigger, HoverCardContent, Button } from "laif-ds";
+
+export function UserHover() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-64">
+        <div className="space-y-1">
+          <p className="font-medium">John Doe</p>
+          <p className="text-sm text-muted-foreground">Frontend Engineer</p>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+```

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

@@ -0,0 +1,99 @@
+ # Icon
+ 
+ ## Overview
+ 
+ Wrapper around `lucide-react` icons with design-system sizes and convenient color/className support.
+ 
+ ---
+ 
+ ## Props
+ 
+ | Prop        | Type                                        | Default   | Description                                     |
+ | ----------- | ------------------------------------------- | --------- | ----------------------------------------------- |
+ | `name`      | `IconName` (key of `lucide-react` exports)  | **required** | Icon name from `lucide-react`.               |
+ | `size`      | `"xs" | "sm" | "md" | "lg" | "xl"`     | `"md"`   | Predefined pixel sizes: 16, 20, 24, 32, 40.     |
+ | `className` | `string`                                    | `""`      | Additional classes (e.g., color via theme tokens). |
+ | `color`     | `string`                                    | `undefined` | Overrides color style directly.                 |
+ 
+ Any extra props are passed to the underlying `lucide-react` icon component.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Sizing**: The `size` prop maps to pixel sizes (`xs=16`, `sm=20`, `md=24`, `lg=32`, `xl=40`).
+ - **Coloring**: Prefer theme tokens via `className` (e.g., `text-d-destructive`). For one-off colors, use `color`.
+ - **Safety**: If `name` is not found, the component renders `null` and logs a warning.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Default
+ 
+ ```tsx
+ import { Icon } from "laif-ds";
+ 
+ export function DefaultIcon() {
+   return <Icon name="Check" size="md" />;
+ }
+ ```
+ 
+ ### Sizes
+ 
+ ```tsx
+ import { Icon } from "laif-ds";
+ 
+ export function IconSizes() {
+   return (
+     <div className="flex items-end gap-4">
+       <div className="flex flex-col items-center gap-2">
+         <Icon name="Check" size="xs" />
+         <span className="text-xs">xs</span>
+       </div>
+       <div className="flex flex-col items-center gap-2">
+         <Icon name="Check" size="sm" />
+         <span className="text-xs">sm</span>
+       </div>
+       <div className="flex flex-col items-center gap-2">
+         <Icon name="Check" size="md" />
+         <span className="text-xs">md</span>
+       </div>
+       <div className="flex flex-col items-center gap-2">
+         <Icon name="Check" size="lg" />
+         <span className="text-xs">lg</span>
+       </div>
+       <div className="flex flex-col items-center gap-2">
+         <Icon name="Check" size="xl" />
+         <span className="text-xs">xl</span>
+       </div>
+     </div>
+   );
+ }
+ ```
+ 
+ ### Colors
+ 
+ ```tsx
+ import { Icon } from "laif-ds";
+ 
+ export function IconColors() {
+   return (
+     <div className="flex gap-4">
+       <Icon name="Heart" size="lg" className="text-d-destructive" />
+       <Icon name="Heart" size="lg" className="text-d-primary" />
+       <Icon name="Heart" size="lg" className="text-d-muted-foreground" />
+       <Icon name="Heart" size="lg" color="#8B5CF6" />
+       <Icon name="Heart" size="lg" color="#EC4899" />
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Design tokens**: Use theme token classes (`text-d-*`) rather than raw Tailwind colors.
+ - **Icon library**: Use only `laif-ds` `Icon` (no external icon libraries).
+ 

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

@@ -0,0 +1,138 @@
+ # Input
+ 
+ ## Overview
+ 
+ Text input component with label, sizes, optional left/right icons, custom start/end content, built-in password toggle, validation styles and accessible error messaging.
+ 
+ ---
+ 
+ ## Props
+ 
+ Extends native `<input>` props (except `size` and `label` which are redefined).
+ 
+ | Prop            | Type                                   | Default     | Description                                                          |
+ | --------------- | -------------------------------------- | ----------- | -------------------------------------------------------------------- |
+ | `label`         | `string | React.ReactNode`             | `undefined` | Field label shown above the input.                                   |
+ | `labelClassName`| `string`                               | `""`        | Extra classes for the label.                                         |
+ | `size`          | `"sm" | "default" | "lg"`           | `"default"` | Controls height and font-size.                                       |
+ | `iconLeft`      | `IconName`                             | `undefined` | Optional left icon (uses `Icon`).                                    |
+ | `iconRight`     | `IconName`                             | `undefined` | Optional right icon (ignored when `type="password"`).              |
+ | `startContent`  | `React.ReactNode`                      | `undefined` | Custom content before the input (coexists with `iconLeft`).          |
+ | `endContent`    | `React.ReactNode`                      | `undefined` | Custom content after the input (coexists with `iconRight`).          |
+ | `errorMessage`  | `string`                               | `undefined` | Custom error message (shown after interaction/invalid state).        |
+ 
+ All other standard input attributes (e.g., `type`, `placeholder`, `required`, `min`, `max`, `pattern`, etc.) are supported.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Wrapper focus**: Clicking the wrapper focuses the input; selects text for non-password types (except file).
+ - **Password toggle**: When `type="password"`, a toggle button switches visibility with accessible labels (`Mostra/Nascondi password`).
+ - **Validation**: The wrapper reflects validity (`aria-invalid`) and shows `errorMessage` or the browser validation message once touched/invalid.
+ - **Accessibility**: Errors use `role="alert"` and `aria-live="polite"`; labels link via `htmlFor`/`id`.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Basic
+ 
+ ```tsx
+ import { Input } from "laif-ds";
+ 
+ export function BasicInput() {
+   return (
+     <Input
+       label="Nome"
+       placeholder="Inserisci testo..."
+       className="w-full max-w-sm"
+     />
+   );
+ }
+ ```
+ 
+ ### Sizes and Icons
+ 
+ ```tsx
+ import { Input } from "laif-ds";
+ 
+ export function SizesAndIcons() {
+   return (
+     <div className="flex flex-col gap-3 w-full max-w-sm">
+       <Input size="sm" label="Email" type="email" iconLeft="Mail" placeholder="esempio@dominio.com" />
+       <Input size="default" label="Cerca" type="search" iconLeft="Search" placeholder="Cerca..." />
+       <Input size="lg" label="Prezzo" type="number" iconRight="Euro" placeholder="0.00" />
+     </div>
+   );
+ }
+ ```
+ 
+ ### Custom Start/End Content
+ 
+ ```tsx
+ import { Input } from "laif-ds";
+ 
+ export function CustomContent() {
+   return (
+     <div className="flex flex-col gap-3 w-full max-w-sm">
+       <Input
+         label="Importo"
+         type="number"
+         placeholder="0.00"
+         startContent={<span className="text-d-muted-foreground text-sm font-medium">€</span>}
+       />
+       <Input
+         label="Percentuale"
+         type="number"
+         placeholder="0"
+         endContent={<span className="text-d-muted-foreground text-sm font-medium">%</span>}
+       />
+     </div>
+   );
+ }
+ ```
+ 
+ ### Password with Toggle
+ 
+ ```tsx
+ import { Input } from "laif-ds";
+ 
+ export function PasswordField() {
+   return (
+     <Input
+       label="Password"
+       type="password"
+       placeholder="Inserisci la tua password"
+       className="w-full max-w-sm"
+       required
+     />
+   );
+ }
+ ```
+ 
+ ### Validation States
+ 
+ ```tsx
+ import { Input } from "laif-ds";
+ 
+ export function ValidationStates() {
+   return (
+     <div className="flex flex-col gap-3 w-full max-w-sm">
+       <Input label="Campo obbligatorio" placeholder="Questo campo è obbligatorio" required />
+       <Input label="Email" type="email" placeholder="email@esempio.com" required />
+       <Input label="URL" type="url" placeholder="https://esempio.com" required />
+       <Input label="Età (18-65)" type="number" min={18} max={65} required />
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Icons**: Prefer `iconLeft`/`iconRight` rather than embedding icons manually.
+ - **Content**: `startContent`/`endContent` are ideal for units, prefixes/suffixes, or badges.
+ - **A11y**: Include helpful placeholders and `aria-describedby` for extra guidance when needed.
+ 

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

@@ -0,0 +1,40 @@
+# InputOtp
+
+## Overview
+
+OTP (One-Time Password) input built on `input-otp`. Includes grouped slots and an optional separator.
+
+---
+
+## Exports
+
+- `InputOTP` (accepts all `input-otp` props, plus `containerClassName`)
+- `InputOTPGroup`
+- `InputOTPSlot` (requires `index: number`)
+- `InputOTPSeparator`
+
+---
+
+## Example
+
+```tsx
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "laif-ds";
+
+export function OtpExample() {
+  return (
+    <InputOTP maxLength={6} containerClassName="w-full justify-center">
+      <InputOTPGroup>
+        {Array.from({ length: 3 }).map((_, i) => (
+          <InputOTPSlot key={i} index={i} />
+        ))}
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        {Array.from({ length: 3 }).map((_, i) => (
+          <InputOTPSlot key={i + 3} index={i + 3} />
+        ))}
+      </InputOTPGroup>
+    </InputOTP>
+  );
+}
+```