laif-ds 0.2.74 → 0.2.75

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

@@ -12,14 +12,14 @@ Props are passed through to the underlying Radix Accordion primitives. The most
 
 ### Accordion (Root)
 
-| Prop            | Type                                | Default     | Description                                                                 |
-| --------------- | ----------------------------------- | ----------- | --------------------------------------------------------------------------- |
-| `type`          | `"single" \| "multiple"`            | `"single"` | Single allows one item open at a time. Multiple allows many open items.     |
-| `collapsible`   | `boolean`                           | `false`     | Only for `type="single"`. If true, allows closing the last open item.      |
-| `value`         | `string \| string[]`                | `undefined` | Controlled value of the open item(s).                                       |
-| `defaultValue`  | `string \| string[]`                | `undefined` | Uncontrolled default open item(s).                                          |
-| `onValueChange` | `(value: string \| string[]) => any` | `undefined` | Callback fired when open item(s) change.                                    |
-| `className`     | `string`                             | `""`        | Additional classes applied to the root.                                     |
+| Prop            | Type                                 | Default     | Description                                                             |
+| --------------- | ------------------------------------ | ----------- | ----------------------------------------------------------------------- |
+| `type`          | `"single" \| "multiple"`             | `"single"`  | Single allows one item open at a time. Multiple allows many open items. |
+| `collapsible`   | `boolean`                            | `false`     | Only for `type="single"`. If true, allows closing the last open item.   |
+| `value`         | `string \| string[]`                 | `undefined` | Controlled value of the open item(s).                                   |
+| `defaultValue`  | `string \| string[]`                 | `undefined` | Uncontrolled default open item(s).                                      |
+| `onValueChange` | `(value: string \| string[]) => any` | `undefined` | Callback fired when open item(s) change.                                |
+| `className`     | `string`                             | `""`        | Additional classes applied to the root.                                 |
 
 ### Subcomponents
 
@@ -43,7 +43,12 @@ Props are passed through to the underlying Radix Accordion primitives. The most
 ### Basic (Single)
 
 ```tsx
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "laif-ds";
 
 export function BasicAccordion() {
   return (
@@ -74,7 +79,12 @@ export function BasicAccordion() {
 ### With Default Open (Single, collapsible)
 
 ```tsx
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "laif-ds";
 
 export function AccordionWithDefaultOpen() {
   return (
@@ -101,11 +111,20 @@ export function AccordionWithDefaultOpen() {
 ### Multiple Mode with Multiple Default Open
 
 ```tsx
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "laif-ds";
 
 export function MultipleModeAccordion() {
   return (
-    <Accordion type="multiple" defaultValue={["item-1", "item-3"]} className="w-96">
+    <Accordion
+      type="multiple"
+      defaultValue={["item-1", "item-3"]}
+      className="w-96"
+    >
       <AccordionItem value="item-1">
         <AccordionTrigger>First section (default open)</AccordionTrigger>
         <AccordionContent>This section is open by default.</AccordionContent>
@@ -116,7 +135,9 @@ export function MultipleModeAccordion() {
       </AccordionItem>
       <AccordionItem value="item-3">
         <AccordionTrigger>Third section (default open)</AccordionTrigger>
-        <AccordionContent>This section is also open by default.</AccordionContent>
+        <AccordionContent>
+          This section is also open by default.
+        </AccordionContent>
       </AccordionItem>
     </Accordion>
   );
@@ -127,13 +148,23 @@ export function MultipleModeAccordion() {
 
 ```tsx
 import { useState } from "react";
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "laif-ds";
 
 export function ControlledAccordion() {
   const [open, setOpen] = useState<string>("item-1");
 
   return (
-    <Accordion type="single" value={open} onValueChange={(v) => setOpen(v as string)} className="w-96">
+    <Accordion
+      type="single"
+      value={open}
+      onValueChange={(v) => setOpen(v as string)}
+      className="w-96"
+    >
       <AccordionItem value="item-1">
         <AccordionTrigger>First</AccordionTrigger>
         <AccordionContent>First content</AccordionContent>
@@ -154,4 +185,3 @@ export function ControlledAccordion() {
 - **Accessibility**: Uses proper ARIA roles/attributes and keyboard navigation.
 - **Animations**: `AccordionContent` has built-in open/close animations.
 - **Styling**: Customize with `className` on root/items/triggers/contents.
-

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

@@ -1,95 +1,90 @@
- # Alert
- 
- ## Overview
- 
- A simple, accessible alert component with title and description. Supports variants for information and destructive/error states.
- 
- ---
- 
- ## Props
- 
- ### Alert (Root)
- 
- | Prop        | Type                                   | Default     | Description                                    |
- | ----------- | -------------------------------------- | ----------- | ---------------------------------------------- |
- | `variant`   | `"default" | "destructive"`         | `"default"` | Visual style of the alert.                     |
- | `className` | `string`                                | `""`        | Additional classes applied to the root element.|
- | `children`  | `React.ReactNode`                       | **required**| Content of the alert (title/description/icon). |
- 
- ### Subcomponents
- 
- - `AlertTitle`: Title area of the alert (bold line).
- - `AlertDescription`: Secondary text, supports rich content and paragraphs.
- 
- ---
- 
- ## Behavior
- 
- - **Accessible**: Uses `role="alert"` and semantic slots for screen readers.
- - **Variants**: `destructive` applies error coloring; `default` uses neutral styling.
- - **Layout**: Supports optional leading icon; layout adapts when an icon is present.
- 
- ---
- 
- ## Examples
- 
- ### Default
- 
- ```tsx
- import { Alert, AlertTitle, AlertDescription } from "laif-ds";
- 
- export function DefaultAlert() {
-   return (
-     <Alert>
-       <AlertTitle>Default Alert</AlertTitle>
-       <AlertDescription>
-         This is a default alert message.
-       </AlertDescription>
-     </Alert>
-   );
- }
- ```
- 
- ### With Icon
- 
- ```tsx
- import { Alert, AlertTitle, AlertDescription, Icon } from "laif-ds";
- 
- export function AlertWithIcon() {
-   return (
-     <Alert>
-       <Icon name="Info" />
-       <AlertTitle>Information</AlertTitle>
-       <AlertDescription>
-         This alert includes an icon.
-       </AlertDescription>
-     </Alert>
-   );
- }
- ```
- 
- ### Destructive
- 
- ```tsx
- import { Alert, AlertTitle, AlertDescription } from "laif-ds";
- 
- export function DestructiveAlert() {
-   return (
-     <Alert variant="destructive">
-       <AlertTitle>Error</AlertTitle>
-       <AlertDescription>
-         Something went wrong. Please try again.
-       </AlertDescription>
-     </Alert>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Styling**: Use `className` on the root to add layout constraints (e.g., width).
- - **Content**: `AlertDescription` supports rich content and multi-line paragraphs.
- - **Icons**: Use `Icon` from `laif-ds` to add an optional leading icon.
- 
+# Alert
+
+## Overview
+
+A simple, accessible alert component with title and description. Supports variants for information and destructive/error states.
+
+---
+
+## Props
+
+### Alert (Root)
+
+| Prop        | Type              | Default        | Description                                     |
+| ----------- | ----------------- | -------------- | ----------------------------------------------- | -------------------------- |
+| `variant`   | `"default"        | "destructive"` | `"default"`                                     | Visual style of the alert. |
+| `className` | `string`          | `""`           | Additional classes applied to the root element. |
+| `children`  | `React.ReactNode` | **required**   | Content of the alert (title/description/icon).  |
+
+### Subcomponents
+
+- `AlertTitle`: Title area of the alert (bold line).
+- `AlertDescription`: Secondary text, supports rich content and paragraphs.
+
+---
+
+## Behavior
+
+- **Accessible**: Uses `role="alert"` and semantic slots for screen readers.
+- **Variants**: `destructive` applies error coloring; `default` uses neutral styling.
+- **Layout**: Supports optional leading icon; layout adapts when an icon is present.
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import { Alert, AlertTitle, AlertDescription } from "laif-ds";
+
+export function DefaultAlert() {
+  return (
+    <Alert>
+      <AlertTitle>Default Alert</AlertTitle>
+      <AlertDescription>This is a default alert message.</AlertDescription>
+    </Alert>
+  );
+}
+```
+
+### With Icon
+
+```tsx
+import { Alert, AlertTitle, AlertDescription, Icon } from "laif-ds";
+
+export function AlertWithIcon() {
+  return (
+    <Alert>
+      <Icon name="Info" />
+      <AlertTitle>Information</AlertTitle>
+      <AlertDescription>This alert includes an icon.</AlertDescription>
+    </Alert>
+  );
+}
+```
+
+### Destructive
+
+```tsx
+import { Alert, AlertTitle, AlertDescription } from "laif-ds";
+
+export function DestructiveAlert() {
+  return (
+    <Alert variant="destructive">
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Something went wrong. Please try again.
+      </AlertDescription>
+    </Alert>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Styling**: Use `className` on the root to add layout constraints (e.g., width).
+- **Content**: `AlertDescription` supports rich content and multi-line paragraphs.
+- **Icons**: Use `Icon` from `laif-ds` to add an optional leading icon.

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

@@ -1,126 +1,132 @@
- # AlertDialog
- 
- ## Overview
- 
- Accessible modal dialog for critical confirmations. Built on Radix Alert Dialog primitives with composable subcomponents and focus management.
- 
- ---
- 
- ## Props
- 
- ### AlertDialog (Root)
- 
- | Prop            | Type              | Default     | Description                                  |
- | --------------- | ----------------- | ----------- | -------------------------------------------- |
- | `open`          | `boolean`         | `undefined` | Controlled open state.                        |
- | `defaultOpen`   | `boolean`         | `false`     | Uncontrolled initial open state.              |
- | `onOpenChange`  | `(open: boolean) => void` | `undefined` | Callback when open state changes.        |
- 
- ### Subcomponents
- 
- - `AlertDialogTrigger`: Element that opens the dialog (can be `asChild`).
- - `AlertDialogContent`: The dialog content container.
- - `AlertDialogHeader` / `AlertDialogFooter`: Layout sections for content and actions.
- - `AlertDialogTitle` / `AlertDialogDescription`: Title and supporting description.
- - `AlertDialogAction`: Primary action button.
- - `AlertDialogCancel`: Secondary cancel button.
- - `AlertDialogPortal`, `AlertDialogOverlay`: Portal and overlay elements.
- 
- ---
- 
- ## Behavior
- 
- - **Focus management**: Traps focus within the dialog, returns focus on close.
- - **Accessibility**: Proper ARIA roles and keyboard interactions (Esc to close).
- - **Composability**: Use any button (e.g., `Button`) with `AlertDialogTrigger asChild`.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import {
-   AlertDialog,
-   AlertDialogAction,
-   AlertDialogCancel,
-   AlertDialogContent,
-   AlertDialogDescription,
-   AlertDialogFooter,
-   AlertDialogHeader,
-   AlertDialogTitle,
-   AlertDialogTrigger,
- } from "laif-ds";
- import { Button } from "laif-ds";
- 
- export function BasicAlertDialog() {
-   return (
-     <AlertDialog>
-       <AlertDialogTrigger asChild>
-         <Button variant="outline">Show Alert Dialog</Button>
-       </AlertDialogTrigger>
-       <AlertDialogContent>
-         <AlertDialogHeader>
-           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-           <AlertDialogDescription>
-             This action cannot be undone. This will permanently delete your account and remove your data from our servers.
-           </AlertDialogDescription>
-         </AlertDialogHeader>
-         <AlertDialogFooter>
-           <AlertDialogCancel>Cancel</AlertDialogCancel>
-           <AlertDialogAction>Continue</AlertDialogAction>
-         </AlertDialogFooter>
-       </AlertDialogContent>
-     </AlertDialog>
-   );
- }
- ```
- 
- ### Controlled
- 
- ```tsx
- import { useState } from "react";
- import {
-   AlertDialog,
-   AlertDialogAction,
-   AlertDialogCancel,
-   AlertDialogContent,
-   AlertDialogDescription,
-   AlertDialogFooter,
-   AlertDialogHeader,
-   AlertDialogTitle,
- } from "laif-ds";
- import { Button } from "laif-ds";
- 
- export function ControlledAlertDialog() {
-   const [open, setOpen] = useState(false);
- 
-   return (
-     <>
-       <Button onClick={() => setOpen(true)}>Open dialog</Button>
-       <AlertDialog open={open} onOpenChange={setOpen}>
-         <AlertDialogContent>
-           <AlertDialogHeader>
-             <AlertDialogTitle>Confirm action</AlertDialogTitle>
-             <AlertDialogDescription>Are you sure you want to proceed?</AlertDialogDescription>
-           </AlertDialogHeader>
-           <AlertDialogFooter>
-             <AlertDialogCancel onClick={() => setOpen(false)}>Cancel</AlertDialogCancel>
-             <AlertDialogAction onClick={() => setOpen(false)}>Confirm</AlertDialogAction>
-           </AlertDialogFooter>
-         </AlertDialogContent>
-       </AlertDialog>
-     </>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Styling**: `AlertDialogContent` is centered and responsive; customize with `className`.
- - **Overlay**: `AlertDialogOverlay` provides a backdrop with fade animations.
- - **Buttons**: `AlertDialogAction` uses default button styles; pass `className` to adjust.
- 
+# AlertDialog
+
+## Overview
+
+Accessible modal dialog for critical confirmations. Built on Radix Alert Dialog primitives with composable subcomponents and focus management.
+
+---
+
+## Props
+
+### AlertDialog (Root)
+
+| Prop           | Type                      | Default     | Description                       |
+| -------------- | ------------------------- | ----------- | --------------------------------- |
+| `open`         | `boolean`                 | `undefined` | Controlled open state.            |
+| `defaultOpen`  | `boolean`                 | `false`     | Uncontrolled initial open state.  |
+| `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when open state changes. |
+
+### Subcomponents
+
+- `AlertDialogTrigger`: Element that opens the dialog (can be `asChild`).
+- `AlertDialogContent`: The dialog content container.
+- `AlertDialogHeader` / `AlertDialogFooter`: Layout sections for content and actions.
+- `AlertDialogTitle` / `AlertDialogDescription`: Title and supporting description.
+- `AlertDialogAction`: Primary action button.
+- `AlertDialogCancel`: Secondary cancel button.
+- `AlertDialogPortal`, `AlertDialogOverlay`: Portal and overlay elements.
+
+---
+
+## Behavior
+
+- **Focus management**: Traps focus within the dialog, returns focus on close.
+- **Accessibility**: Proper ARIA roles and keyboard interactions (Esc to close).
+- **Composability**: Use any button (e.g., `Button`) with `AlertDialogTrigger asChild`.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "laif-ds";
+import { Button } from "laif-ds";
+
+export function BasicAlertDialog() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Alert Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+```
+
+### Controlled
+
+```tsx
+import { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "laif-ds";
+import { Button } from "laif-ds";
+
+export function ControlledAlertDialog() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm action</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to proceed?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setOpen(false)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={() => setOpen(false)}>
+              Confirm
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Styling**: `AlertDialogContent` is centered and responsive; customize with `className`.
+- **Overlay**: `AlertDialogOverlay` provides a backdrop with fade animations.
+- **Buttons**: `AlertDialogAction` uses default button styles; pass `className` to adjust.