laif-ds 0.2.44 → 0.2.45

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

@@ -0,0 +1,146 @@
+ # MultipleSelector (Deprecated)
+ 
+ ## Overview
+ 
+ Tag-style multi-select built on `cmdk` and `Popover` with search, grouping, creatable options, and badges for selections.
+ 
+ - ⚠️ This component is deprecated. Prefer `AppSelect` for new code.
+ 
+ ---
+ 
+ ## Types
+ 
+ ```ts
+ // Deprecated interface. Prefer AppSelect options.
+ export interface Option {
+   value: string;
+   label: string;
+   disable?: boolean;
+   fixed?: boolean; // fixed option that can't be removed
+   [key: string]: string | boolean | undefined; // for grouping keys
+ }
+ ```
+ 
+ ---
+ 
+ ## Props (highlights)
+ 
+ | Prop                          | Type                                   | Default                         | Description |
+ | ----------------------------- | -------------------------------------- | ------------------------------- | ----------- |
+ | `value`                       | `Option[]`                             | `[]`                            | Controlled selected options. |
+ | `defaultOptions`              | `Option[]`                             | `[]`                            | Initial options to display. |
+ | `options`                     | `Option[]`                             | `undefined`                     | Manually controlled options (when not using search). |
+ | `placeholder`                 | `string`                               | `"Cerca..."`                    | Input placeholder. |
+ | `onSearch`                    | `(q: string) => Promise<Option[]>`     | `undefined`                     | Async search. Debounced by `delay`. |
+ | `onSearchSync`                | `(q: string) => Option[]`              | `undefined`                     | Sync search alternative. |
+ | `delay`                       | `number`                               | `500`                           | Debounce ms for `onSearch`. |
+ | `triggerSearchOnFocus`        | `boolean`                              | `false`                         | Trigger search when input focuses. |
+ | `onChange`                    | `(opts: Option[]) => void`             | `undefined`                     | Fired on selection change. |
+ | `maxSelected`                 | `number`                               | `Number.MAX_SAFE_INTEGER`       | Selection limit. |
+ | `onMaxSelected`               | `(limit: number) => void`              | `undefined`                     | Called when limit reached. |
+ | `groupBy`                     | `string`                               | `undefined`                     | Group options by key. |
+ | `disabled`                    | `boolean`                              | `false`                         | Disable interactions. |
+ | `hidePlaceholderWhenSelected` | `boolean`                              | `true`                          | Hide placeholder when badges exist. |
+ | `selectFirstItem`             | `boolean`                              | `true`                          | Cmdk behavior workaround. |
+ | `creatable`                   | `boolean`                              | `false`                         | Allow creating new option if not found. |
+ | `hideClearAllButton`          | `boolean`                              | `false`                         | Hide the clear-all icon. |
+ | `className`                   | `string`                               | `""`                            | Trigger wrapper classes. |
+ | `badgeClassName`              | `string`                               | `""`                            | Badge classes. |
+ | `label`                       | `string | React.ReactNode`             | `undefined`                     | Optional label above control. |
+ 
+ Also exposes `commandProps` and `inputProps` to pass through to internal `Command` and search input.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Search**: Use `onSearch` (async) or `onSearchSync` (sync). Debounced input.
+ - **Grouping**: Provide `groupBy` key to group options.
+ - **Creatable**: When enabled, offers "Create \"query\"" item when not found.
+ - **Badges**: Selected options render as removable badges. `fixed` badges cannot be removed.
+ - **Limits**: Enforces `maxSelected`; calls `onMaxSelected` when exceeded.
+ - **Clear all**: Built-in clear-all icon (hidden with `hideClearAllButton`).
+ - **Disabled**: Disables input and badge removal.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Default
+ 
+ ```tsx
+ import { MultipleSelector } from "laif-ds";
+ 
+ export function DefaultMulti() {
+   return (
+     <div className="w-[400px]">
+       <MultipleSelector
+         placeholder="Seleziona dei tag..."
+         defaultOptions={[
+           { value: "react", label: "React" },
+           { value: "typescript", label: "TypeScript" },
+         ]}
+       />
+     </div>
+   );
+ }
+ ```
+ 
+ ### Grouped Options
+ 
+ ```tsx
+ import { MultipleSelector } from "laif-ds";
+ 
+ const frameworks = [
+   { value: "react", label: "React", category: "Frontend" },
+   { value: "node", label: "Node.js", category: "Backend" },
+ ];
+ 
+ export function Grouped() {
+   return (
+     <div className="w-[400px]">
+       <MultipleSelector
+         placeholder="Seleziona dei framework..."
+         defaultOptions={frameworks}
+         groupBy="category"
+       />
+     </div>
+   );
+ }
+ ```
+ 
+ ### Async Search
+ 
+ ```tsx
+ import { MultipleSelector } from "laif-ds";
+ 
+ async function mockSearch(query: string) {
+   await new Promise((r) => setTimeout(r, 300));
+   const tags = [
+     { value: "react", label: "React" },
+     { value: "typescript", label: "TypeScript" },
+   ];
+   return tags.filter((t) => t.label.toLowerCase().includes(query.toLowerCase()));
+ }
+ 
+ export function AsyncSearch() {
+   return (
+     <div className="w-[400px]">
+       <MultipleSelector
+         placeholder="Cerca dei tag..."
+         onSearch={mockSearch}
+         delay={300}
+         triggerSearchOnFocus
+       />
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Use AppSelect**: Prefer `AppSelect` for multiselect scenarios.
+ - **A11y**: The trigger is keyboard-accessible; ensure label association when using `label`.
+ 

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

@@ -0,0 +1,51 @@
+# NavigationMenu
+
+## Overview
+
+Accessible navigation menu with optional animated viewport. Built on Radix Navigation Menu.
+
+---
+
+## Exports
+
+- `NavigationMenu` (prop: `viewport?: boolean = true`)
+- `NavigationMenuList`
+- `NavigationMenuItem`
+- `NavigationMenuTrigger`
+- `NavigationMenuContent`
+- `NavigationMenuLink`
+- `NavigationMenuIndicator`
+- `NavigationMenuViewport`
+
+---
+
+## Example
+
+```tsx
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+} from "laif-ds";
+
+export function MainNav() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid w-[300px] gap-2 p-2">
+              <NavigationMenuLink href="/products/a">Product A</NavigationMenuLink>
+              <NavigationMenuLink href="/products/b">Product B</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}
+```

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

@@ -0,0 +1,55 @@
+# Pagination
+
+## Overview
+
+Composable pagination controls with first/previous/next/last buttons and page links.
+
+---
+
+## Exports
+
+- `Pagination`, `PaginationContent`, `PaginationItem`
+- `PaginationLink` (props: `isActive?`, `isDisabled?`, `label?`, `size?`)
+- `PaginationFirst`, `PaginationPrevious`, `PaginationNext`, `PaginationLast`
+- `PaginationEllipsis`
+
+---
+
+## Example
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from "laif-ds";
+
+export function Pager() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        {[1, 2, 3].map((p) => (
+          <PaginationItem key={p}>
+            <PaginationLink href="#" isActive={p === 2}>
+              {p}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
+```

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

@@ -0,0 +1,103 @@
+ # Popover
+ 
+ ## Overview
+ 
+ Small floating content panel anchored to a trigger. Useful for lightweight forms, hints, and quick actions.
+ 
+ ---
+ 
+ ## Subcomponents & Props
+ 
+ - **Popover**: Root container. Extends Radix Popover Root props.
+ - **PopoverTrigger**: The element that opens the popover (often `asChild`).
+ - **PopoverContent**: Floating panel.
+   - `align`: `start | center | end` (default `center`)
+   - `side`: `top | right | bottom | left` (Radix prop)
+   - `sideOffset`: `number` (default `4`)
+   - `container`: `HTMLElement | null` (portal target)
+ - **PopoverAnchor**: Optional explicit anchor element.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Positioning**: Uses Radix positioning with transform-origin aware animations.
+ - **Focus management**: Traps focus while open, returns focus on close.
+ - **Accessibility**: Proper aria attributes via Radix; close on outside click/Escape.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Basic
+ 
+ ```tsx
+ import { Button, Input, Label } from "laif-ds";
+ import { Popover, PopoverTrigger, PopoverContent } from "laif-ds";
+ 
+ export function BasicPopover() {
+   return (
+     <Popover>
+       <PopoverTrigger asChild>
+         <Button variant="outline">Open Popover</Button>
+       </PopoverTrigger>
+       <PopoverContent className="w-80">
+         <div className="grid gap-4">
+           <div className="space-y-2">
+             <h4 className="font-medium leading-none">Dimensions</h4>
+             <p className="text-d-muted-foreground text-sm">Set layer dimensions.</p>
+           </div>
+           <div className="grid gap-2">
+             <div className="grid grid-cols-3 items-center gap-4">
+               <Label htmlFor="width">Width</Label>
+               <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+             </div>
+             <div className="grid grid-cols-3 items-center gap-4">
+               <Label htmlFor="maxWidth">Max. width</Label>
+               <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
+             </div>
+           </div>
+         </div>
+       </PopoverContent>
+     </Popover>
+   );
+ }
+ ```
+ 
+ ### Positioned
+ 
+ ```tsx
+ import { Button } from "laif-ds";
+ import { Popover, PopoverTrigger, PopoverContent } from "laif-ds";
+ 
+ export function PositionedPopovers() {
+   return (
+     <div className="flex space-x-4">
+       <Popover>
+         <PopoverTrigger asChild>
+           <Button variant="outline">Top</Button>
+         </PopoverTrigger>
+         <PopoverContent side="top" className="w-40">
+           <p className="text-sm">Appears on top.</p>
+         </PopoverContent>
+       </Popover>
+       <Popover>
+         <PopoverTrigger asChild>
+           <Button variant="outline">Right</Button>
+         </PopoverTrigger>
+         <PopoverContent side="right" className="w-40">
+           <p className="text-sm">Appears on the right.</p>
+         </PopoverContent>
+       </Popover>
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Portal container**: Use `container` on `PopoverContent` to mount into a specific element.
+ - **Sizing**: Set width/height via utility classes; content scrolls when needed.
+ 

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

@@ -0,0 +1,30 @@
+# Progress
+
+## Overview
+
+Linear progress bar built on Radix Progress. Controlled via a `value` number. Styles are theme-aware.
+
+---
+
+## Props
+
+Extends `@radix-ui/react-progress` Root props.
+
+- `value?: number` — 0 to 100. Determines the filled portion.
+- `className?: string`
+
+---
+
+## Examples
+
+```tsx
+import { Progress } from "laif-ds";
+
+export function UploadProgress({ percent }: { percent: number }) {
+  return <Progress value={percent} className="w-full" />;
+}
+```
+
+### Indeterminate style hint
+
+When `value` is `undefined`, the bar renders empty by default. Provide your own animation class for indeterminate states if needed.

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

@@ -0,0 +1,33 @@
+# PromptSuggestions
+
+## Overview
+
+Clickable suggestion chips that append a user message via provided callback.
+
+---
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `label` | `string` | Header text |
+| `append` | `(message: { role: "user"; content: string }) => void` | Callback invoked when a suggestion is clicked |
+| `suggestions` | `string[]` | List of suggestion texts |
+
+---
+
+## Example
+
+```tsx
+import { PromptSuggestions } from "laif-ds";
+
+export function SuggestionsDemo() {
+  return (
+    <PromptSuggestions
+      label="Try one of these"
+      suggestions={["What is React?", "Explain TypeScript", "Show me a chart"]}
+      append={(msg) => console.log("append", msg)}
+    />
+  );
+}
+```

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

@@ -0,0 +1,90 @@
+ # RadioGroup
+ 
+ ## Overview
+ 
+ Set of mutually exclusive options with accessible keyboard navigation. Includes an item component styled for DS tokens.
+ 
+ ---
+ 
+ ## Subcomponents & Props
+ 
+ - **RadioGroup**: Root container (Radix RadioGroup Root props)
+   - `value`, `defaultValue`: controlled/uncontrolled
+   - `onValueChange(value: string)`: change handler
+   - `orientation`: `"horizontal" | "vertical"` (default `"vertical"`)
+   - `disabled`: `boolean`
+   - `required`: `boolean`
+   - `name`: `string`
+ - **RadioGroupItem**: Individual radio control (Radix Item props)
+   - `value`: `string`
+   - `disabled`: `boolean`
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Keyboard**: Arrow keys move focus; Space/Enter selects.
+ - **Validation styles**: `aria-invalid` triggers error ring/border.
+ - **Accessibility**: Pair with `Label` using `htmlFor` and `id`.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Default
+ 
+ ```tsx
+ import { useState } from "react";
+ import { Label, RadioGroup, RadioGroupItem } from "laif-ds";
+ 
+ export function PlanSelector() {
+   const [plan, setPlan] = useState("startup");
+   return (
+     <RadioGroup value={plan} onValueChange={setPlan} className="space-y-4">
+       <div className="flex items-start space-x-3">
+         <RadioGroupItem value="startup" id="startup" className="mt-1" />
+         <div className="grid gap-1">
+           <Label htmlFor="startup" className="font-medium">Startup</Label>
+           <p className="text-d-muted-foreground text-sm">Fino a 10 utenti</p>
+         </div>
+       </div>
+       <div className="flex items-start space-x-3">
+         <RadioGroupItem value="business" id="business" className="mt-1" />
+         <div className="grid gap-1">
+           <Label htmlFor="business" className="font-medium">Business</Label>
+           <p className="text-d-muted-foreground text-sm">Fino a 100 utenti</p>
+         </div>
+       </div>
+     </RadioGroup>
+   );
+ }
+ ```
+ 
+ ### Disabled
+ 
+ ```tsx
+ import { Label, RadioGroup, RadioGroupItem } from "laif-ds";
+ 
+ export function DisabledRadios() {
+   return (
+     <RadioGroup defaultValue="option1" disabled className="space-y-2">
+       <div className="flex items-center space-x-2">
+         <RadioGroupItem value="option1" id="disabled1" />
+         <Label htmlFor="disabled1" className="text-d-muted-foreground">Opzione 1</Label>
+       </div>
+       <div className="flex items-center space-x-2">
+         <RadioGroupItem value="option2" id="disabled2" />
+         <Label htmlFor="disabled2" className="text-d-muted-foreground">Opzione 2</Label>
+       </div>
+     </RadioGroup>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Deprecated?** In some projects a higher-level `AppRadioGroup` may be preferred. Check your project conventions.
+ - **A11y**: Always link `Label` to `RadioGroupItem` via `htmlFor`/`id`.
+ 

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

@@ -0,0 +1,35 @@
+# Resizable
+
+## Overview
+
+Resizable panel group with handles. Built on `react-resizable-panels`.
+
+---
+
+## Exports
+
+- `ResizablePanelGroup` — container (horizontal by default; vertical when `direction="vertical"`)
+- `ResizablePanel` — content panel
+- `ResizableHandle` — draggable separator (prop: `withHandle?: boolean`)
+
+---
+
+## Example
+
+```tsx
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "laif-ds";
+
+export function SplitLayout() {
+  return (
+    <ResizablePanelGroup direction="horizontal" className="h-64 rounded-md border">
+      <ResizablePanel defaultSize={50}>
+        <div className="p-4">Left</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="p-4">Right</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}
+```

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

@@ -0,0 +1,13 @@
+ # ResizePrompt
+ 
+ ## Status
+ 
+ This component is deprecated and no longer available in the UI library.
+ 
+ ---
+ 
+ ## Notes
+ 
+ - If you need resizable layouts or panels, refer to current layout primitives or container-level CSS techniques used in the design system.
+ - For responsive behavior, prefer flexbox utilities and app-specific layout components.
+ 

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

@@ -0,0 +1,49 @@
+# ScrollArea
+
+## Overview
+
+Custom scrollable area with styled scrollbars. Built on Radix Scroll Area.
+
+---
+
+## Exports
+
+- `ScrollArea`
+- `ScrollBar` (prop: `orientation = "vertical"`)
+
+---
+
+## Examples
+
+```tsx
+import { ScrollArea } from "laif-ds";
+
+export function VerticalScroll() {
+  return (
+    <ScrollArea className="h-40 w-64 rounded-md border p-2">
+      <div className="space-y-2">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div key={i} className="rounded bg-muted p-2">Row {i + 1}</div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
+```
+
+```tsx
+import { ScrollArea, ScrollBar } from "laif-ds";
+
+export function HorizontalScroll() {
+  return (
+    <ScrollArea className="w-64 rounded-md border p-2">
+      <div className="flex w-[600px] gap-2">
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div key={i} className="w-48 shrink-0 rounded bg-muted p-2">Card {i + 1}</div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
+}
+```

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

@@ -0,0 +1,38 @@
+# SecurePdfViewer
+
+## Overview
+
+PDF viewer with secure defaults and dynamic worker setup. Uses `react-pdf` with automatic worker URL and responsive sizing.
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `url` | `string` | — | PDF URL to load |
+| `initialPage` | `number` | `1` | Starting page number |
+| `className` | `string` | `""` | Additional wrapper classes |
+
+---
+
+## Behavior
+
+- Dynamically imports `react-pdf` and sets `pdfjs` worker src
+- Measures container width to render pages responsively
+- Provides basic pagination controls (prev/next)
+- Shows loading and error placeholders
+
+---
+
+## Example
+
+```tsx
+import { SecurePdfViewer } from "laif-ds";
+
+export function InvoiceViewer() {
+  return (
+    <SecurePdfViewer url="/docs/invoice.pdf" initialPage={1} className="h-[700px]" />
+  );
+}
+```