laif-ds 0.2.74 → 0.2.76

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

@@ -1,103 +1,112 @@
- # 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.
- 
+# 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="leading-none font-medium">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/PromptSuggestions.md

@@ -8,11 +8,11 @@ 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 |
+| 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                      |
 
 ---
 

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

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

@@ -21,7 +21,10 @@ import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "laif-ds";
 
 export function SplitLayout() {
   return (
-    <ResizablePanelGroup direction="horizontal" className="h-64 rounded-md border">
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="h-64 rounded-md border"
+    >
       <ResizablePanel defaultSize={50}>
         <div className="p-4">Left</div>
       </ResizablePanel>

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

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

@@ -23,7 +23,9 @@ export function VerticalScroll() {
     <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 key={i} className="bg-muted rounded p-2">
+            Row {i + 1}
+          </div>
         ))}
       </div>
     </ScrollArea>
@@ -39,7 +41,9 @@ export function HorizontalScroll() {
     <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 key={i} className="bg-muted w-48 shrink-0 rounded p-2">
+            Card {i + 1}
+          </div>
         ))}
       </div>
       <ScrollBar orientation="horizontal" />

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

@@ -8,11 +8,11 @@ PDF viewer with secure defaults and dynamic worker setup. Uses `react-pdf` with
 
 ## Props
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `url` | `string` | — | PDF URL to load |
-| `initialPage` | `number` | `1` | Starting page number |
-| `className` | `string` | `""` | Additional wrapper classes |
+| Prop          | Type     | Default | Description                |
+| ------------- | -------- | ------- | -------------------------- |
+| `url`         | `string` | —       | PDF URL to load            |
+| `initialPage` | `number` | `1`     | Starting page number       |
+| `className`   | `string` | `""`    | Additional wrapper classes |
 
 ---
 
@@ -32,7 +32,11 @@ import { SecurePdfViewer } from "laif-ds";
 
 export function InvoiceViewer() {
   return (
-    <SecurePdfViewer url="/docs/invoice.pdf" initialPage={1} className="h-[700px]" />
+    <SecurePdfViewer
+      url="/docs/invoice.pdf"
+      initialPage={1}
+      className="h-[700px]"
+    />
   );
 }
 ```