laif-ds 0.2.74 → 0.2.76

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

@@ -1,135 +1,150 @@
- # Checkbox
- 
- ## Overview
- 
- Accessible checkbox with support for checked, unchecked, and indeterminate states. Keyboard focus styles and disabled state included.
- 
- ---
- 
- ## Props
- 
- ### Checkbox (Root)
- 
- | Prop               | Type                                   | Default      | Description                                        |
- | ------------------ | -------------------------------------- | ------------ | -------------------------------------------------- |
- | `checked`          | `boolean \| "indeterminate"`          | `false`      | Current state of the checkbox.                     |
- | `disabled`         | `boolean`                               | `false`      | Disables interactions.                             |
- | `onCheckedChange`  | `(checked: boolean) => void`            | `undefined`  | Called when the state changes.                     |
- | `id`               | `string`                                | `undefined`  | Useful when paired with a label's `htmlFor`.       |
- | `className`        | `string`                                | `""`         | Additional classes for size/layout.                 |
- 
- ---
- 
- ## Behavior
- 
- - **Indeterminate**: Use `checked="indeterminate"` to display a dash indicator.
- - **Focus & invalid**: Visual feedback for focus and invalid states is included.
- - **Labeling**: Pair with `Label` and `htmlFor` for accessible labeling.
- 
- ---
- 
- ## Examples
- 
- ### Default
- 
- ```tsx
- import { Checkbox } from "laif-ds";
- import { Label } from "laif-ds";
- 
- export function DefaultCheckbox() {
-   return (
-     <div className="flex items-center gap-2">
-       <Checkbox id="terms" />
-       <Label htmlFor="terms">Accept terms and conditions</Label>
-     </div>
-   );
- }
- ```
- 
- ### Indeterminate
- 
- ```tsx
- import { Checkbox } from "laif-ds";
- import { Label } from "laif-ds";
- 
- export function IndeterminateCheckbox() {
-   return (
-     <div className="flex items-center gap-2">
-       <Checkbox id="partial" checked="indeterminate" />
-       <Label htmlFor="partial">Partially selected options</Label>
-     </div>
-   );
- }
- ```
- 
- ### Disabled
- 
- ```tsx
- import { Checkbox } from "laif-ds";
- import { Label } from "laif-ds";
- 
- export function DisabledCheckbox() {
-   return (
-     <div className="flex items-center gap-2">
-       <Checkbox id="disabled" disabled />
-       <Label htmlFor="disabled">Accept terms and conditions</Label>
-     </div>
-   );
- }
- ```
- 
- ### Select All Pattern
- 
- ```tsx
- import * as React from "react";
- import { Checkbox } from "laif-ds";
- import { Label } from "laif-ds";
- 
- export function SelectAllExample() {
-   const [items, setItems] = React.useState([
-     { id: "item1", label: "Item 1", checked: false },
-     { id: "item2", label: "Item 2", checked: true },
-     { id: "item3", label: "Item 3", checked: false },
-   ]);
- 
-   const checkedCount = items.filter((i) => i.checked).length;
-   const selectAllState =
-     checkedCount === 0 ? false : checkedCount === items.length ? true : ("indeterminate" as const);
- 
-   const handleSelectAll = () => {
-     const newChecked = selectAllState !== true;
-     setItems(items.map((i) => ({ ...i, checked: newChecked })));
-   };
- 
-   return (
-     <div className="space-y-4">
-       <div className="flex items-center gap-2 border-b pb-2">
-         <Checkbox id="select-all" checked={selectAllState} onCheckedChange={handleSelectAll} />
-         <Label htmlFor="select-all">Select All ({checkedCount}/{items.length})</Label>
-       </div>
-       <div className="space-y-2 pl-6">
-         {items.map((item) => (
-           <div key={item.id} className="flex items-center gap-2">
-             <Checkbox
-               id={item.id}
-               checked={item.checked}
-               onCheckedChange={(checked) =>
-                 setItems(items.map((i) => (i.id === item.id ? { ...i, checked: checked as boolean } : i)))
-               }
-             />
-             <Label htmlFor={item.id}>{item.label}</Label>
-           </div>
-         ))}
-       </div>
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Indicator**: A check icon is shown when `checked=true`, a dash for indeterminate.
- - **Disabled**: Applies reduced opacity and disables pointer events.
- 
+# Checkbox
+
+## Overview
+
+Accessible checkbox with support for checked, unchecked, and indeterminate states. Keyboard focus styles and disabled state included.
+
+---
+
+## Props
+
+### Checkbox (Root)
+
+| Prop              | Type                         | Default     | Description                                  |
+| ----------------- | ---------------------------- | ----------- | -------------------------------------------- |
+| `checked`         | `boolean \| "indeterminate"` | `false`     | Current state of the checkbox.               |
+| `disabled`        | `boolean`                    | `false`     | Disables interactions.                       |
+| `onCheckedChange` | `(checked: boolean) => void` | `undefined` | Called when the state changes.               |
+| `id`              | `string`                     | `undefined` | Useful when paired with a label's `htmlFor`. |
+| `className`       | `string`                     | `""`        | Additional classes for size/layout.          |
+
+---
+
+## Behavior
+
+- **Indeterminate**: Use `checked="indeterminate"` to display a dash indicator.
+- **Focus & invalid**: Visual feedback for focus and invalid states is included.
+- **Labeling**: Pair with `Label` and `htmlFor` for accessible labeling.
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import { Checkbox } from "laif-ds";
+import { Label } from "laif-ds";
+
+export function DefaultCheckbox() {
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  );
+}
+```
+
+### Indeterminate
+
+```tsx
+import { Checkbox } from "laif-ds";
+import { Label } from "laif-ds";
+
+export function IndeterminateCheckbox() {
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox id="partial" checked="indeterminate" />
+      <Label htmlFor="partial">Partially selected options</Label>
+    </div>
+  );
+}
+```
+
+### Disabled
+
+```tsx
+import { Checkbox } from "laif-ds";
+import { Label } from "laif-ds";
+
+export function DisabledCheckbox() {
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox id="disabled" disabled />
+      <Label htmlFor="disabled">Accept terms and conditions</Label>
+    </div>
+  );
+}
+```
+
+### Select All Pattern
+
+```tsx
+import * as React from "react";
+import { Checkbox } from "laif-ds";
+import { Label } from "laif-ds";
+
+export function SelectAllExample() {
+  const [items, setItems] = React.useState([
+    { id: "item1", label: "Item 1", checked: false },
+    { id: "item2", label: "Item 2", checked: true },
+    { id: "item3", label: "Item 3", checked: false },
+  ]);
+
+  const checkedCount = items.filter((i) => i.checked).length;
+  const selectAllState =
+    checkedCount === 0
+      ? false
+      : checkedCount === items.length
+        ? true
+        : ("indeterminate" as const);
+
+  const handleSelectAll = () => {
+    const newChecked = selectAllState !== true;
+    setItems(items.map((i) => ({ ...i, checked: newChecked })));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2 border-b pb-2">
+        <Checkbox
+          id="select-all"
+          checked={selectAllState}
+          onCheckedChange={handleSelectAll}
+        />
+        <Label htmlFor="select-all">
+          Select All ({checkedCount}/{items.length})
+        </Label>
+      </div>
+      <div className="space-y-2 pl-6">
+        {items.map((item) => (
+          <div key={item.id} className="flex items-center gap-2">
+            <Checkbox
+              id={item.id}
+              checked={item.checked}
+              onCheckedChange={(checked) =>
+                setItems(
+                  items.map((i) =>
+                    i.id === item.id
+                      ? { ...i, checked: checked as boolean }
+                      : i,
+                  ),
+                )
+              }
+            />
+            <Label htmlFor={item.id}>{item.label}</Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Indicator**: A check icon is shown when `checked=true`, a dash for indeterminate.
+- **Disabled**: Applies reduced opacity and disables pointer events.

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

@@ -1,49 +1,53 @@
- # CircularProgress
- 
- ## Overview
- 
- SVG-based circular progress with customizable size, stroke widths, end-cap shape, and optional centered label.
- 
- ---
- 
- ## Props
- 
- | Prop                | Type                                 | Default     | Description |
- | ------------------- | ------------------------------------ | ----------- | ----------- |
- | `value`             | `number`                              | **required**| Percentage [0-100]. |
- | `renderLabel`       | `(progress: number) => number|string`| `undefined` | Custom label renderer. |
- | `size`              | `number`                              | `100`       | Diameter in px. |
- | `strokeWidth`       | `number`                              | `undefined` | Overrides both circle and progress stroke widths. |
- | `circleStrokeWidth` | `number`                              | `10`        | Base circle stroke width. |
- | `progressStrokeWidth`| `number`                             | `10`        | Progress stroke width. |
- | `shape`             | `"square" | "round"`                 | `"round"`  | Stroke line cap. |
- | `className`         | `string`                              | `undefined` | Base circle classes. |
- | `progressClassName` | `string`                              | `undefined` | Progress circle classes. |
- | `labelClassName`    | `string`                              | `undefined` | Center label classes. |
- | `showLabel`         | `boolean`                             | `false`     | Show `{value}` (or `renderLabel(value)`) inside.
- 
- ---
- 
- ## Examples
- 
- ```tsx
- import { CircularProgress } from "laif-ds";
- 
- export function Basic() {
-   return <CircularProgress value={65} size={100} showLabel />;
- }
- 
- export function CustomLabel() {
-   return (
-     <CircularProgress value={42} size={120} showLabel renderLabel={(v) => `${v}%`} />
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Theming**: Base circle uses `stroke-d-primary/25`; progress uses `stroke-d-primary`.
- - **Performance**: Pure SVG; safe to animate via CSS if needed.
- 
+# CircularProgress
+
+## Overview
+
+SVG-based circular progress with customizable size, stroke widths, end-cap shape, and optional centered label.
+
+---
+
+## Props
+
+| Prop                  | Type                          | Default      | Description                                       |
+| --------------------- | ----------------------------- | ------------ | ------------------------------------------------- | ---------------------- |
+| `value`               | `number`                      | **required** | Percentage [0-100].                               |
+| `renderLabel`         | `(progress: number) => number | string`      | `undefined`                                       | Custom label renderer. |
+| `size`                | `number`                      | `100`        | Diameter in px.                                   |
+| `strokeWidth`         | `number`                      | `undefined`  | Overrides both circle and progress stroke widths. |
+| `circleStrokeWidth`   | `number`                      | `10`         | Base circle stroke width.                         |
+| `progressStrokeWidth` | `number`                      | `10`         | Progress stroke width.                            |
+| `shape`               | `"square"                     | "round"`     | `"round"`                                         | Stroke line cap.       |
+| `className`           | `string`                      | `undefined`  | Base circle classes.                              |
+| `progressClassName`   | `string`                      | `undefined`  | Progress circle classes.                          |
+| `labelClassName`      | `string`                      | `undefined`  | Center label classes.                             |
+| `showLabel`           | `boolean`                     | `false`      | Show `{value}` (or `renderLabel(value)`) inside.  |
+
+---
+
+## Examples
+
+```tsx
+import { CircularProgress } from "laif-ds";
+
+export function Basic() {
+  return <CircularProgress value={65} size={100} showLabel />;
+}
+
+export function CustomLabel() {
+  return (
+    <CircularProgress
+      value={42}
+      size={120}
+      showLabel
+      renderLabel={(v) => `${v}%`}
+    />
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Theming**: Base circle uses `stroke-d-primary/25`; progress uses `stroke-d-primary`.
+- **Performance**: Pure SVG; safe to animate via CSS if needed.

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

@@ -8,10 +8,10 @@ Client-side code highlighter using Shiki with internal loading state and gracefu
 
 ## Props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `children` | `string` | Code string |
-| `language` | `string` | Shiki language key |
+| Prop        | Type     | Description                  |
+| ----------- | -------- | ---------------------------- |
+| `children`  | `string` | Code string                  |
+| `language`  | `string` | Shiki language key           |
 | `className` | `string` | Optional classes for `<pre>` |
 
 ---

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

@@ -1,95 +1,114 @@
- # Collapsible
- 
- ## Overview
- 
- A simple container that can show/hide content. Provides a trigger element and animated content area. Useful for progressive disclosure of details.
- 
- ---
- 
- ## Props
- 
- ### Collapsible (Root)
- 
- | Prop           | Type                 | Default     | Description                                   |
- | -------------- | -------------------- | ----------- | --------------------------------------------- |
- | `open`         | `boolean`            | `undefined` | Controlled open state.                        |
- | `defaultOpen`  | `boolean`            | `false`     | Uncontrolled initial open state.              |
- | `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.            |
- | `className`    | `string`             | `""`        | Additional classes for the root.              |
- 
- ### Subcomponents
- 
- - `CollapsibleTrigger`: The element that toggles visibility (can be used with `asChild`).
- - `CollapsibleContent`: The collapsible content region.
- 
- ---
- 
- ## Behavior
- 
- - **Controlled**: Use `open` + `onOpenChange` to control state.
- - **Uncontrolled**: Use `defaultOpen` for initial state.
- - **Accessibility**: Works with button triggers and keyboard navigation.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import { useState } from "react";
- import { Button } from "laif-ds";
- import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
- 
- export function BasicCollapsible() {
-   const [isOpen, setIsOpen] = useState(false);
-   return (
-     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-       <div className="flex items-center justify-between gap-4 px-4">
-         <h4 className="text-sm font-semibold">Details</h4>
-         <CollapsibleTrigger asChild>
-           <Button variant="ghost" size="sm">Toggle</Button>
-         </CollapsibleTrigger>
-       </div>
-       <CollapsibleContent className="space-y-2">
-         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item A</div>
-         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item B</div>
-         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item C</div>
-       </CollapsibleContent>
-     </Collapsible>
-   );
- }
- ```
- 
- ### Open by Default
- 
- ```tsx
- import { useState } from "react";
- import { Button } from "laif-ds";
- import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
- 
- export function OpenByDefault() {
-   const [isOpen, setIsOpen] = useState(true);
-   return (
-     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-       <div className="flex items-center justify-between gap-4 px-4">
-         <h4 className="text-sm font-semibold">Details</h4>
-         <CollapsibleTrigger asChild>
-           <Button variant="ghost" size="sm">Toggle</Button>
-         </CollapsibleTrigger>
-       </div>
-       <CollapsibleContent className="space-y-2">
-         <div className="rounded-md border px-4 py-3 text-sm">This is additional information.</div>
-       </CollapsibleContent>
-     </Collapsible>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **asChild**: Wrap your own button/link as trigger while preserving styles.
- - **Styling**: Use `className` on root/content to adjust spacing and borders.
- 
+# Collapsible
+
+## Overview
+
+A simple container that can show/hide content. Provides a trigger element and animated content area. Useful for progressive disclosure of details.
+
+---
+
+## Props
+
+### Collapsible (Root)
+
+| Prop           | Type                      | Default     | Description                      |
+| -------------- | ------------------------- | ----------- | -------------------------------- |
+| `open`         | `boolean`                 | `undefined` | Controlled open state.           |
+| `defaultOpen`  | `boolean`                 | `false`     | Uncontrolled initial open state. |
+| `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.  |
+| `className`    | `string`                  | `""`        | Additional classes for the root. |
+
+### Subcomponents
+
+- `CollapsibleTrigger`: The element that toggles visibility (can be used with `asChild`).
+- `CollapsibleContent`: The collapsible content region.
+
+---
+
+## Behavior
+
+- **Controlled**: Use `open` + `onOpenChange` to control state.
+- **Uncontrolled**: Use `defaultOpen` for initial state.
+- **Accessibility**: Works with button triggers and keyboard navigation.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { useState } from "react";
+import { Button } from "laif-ds";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
+
+export function BasicCollapsible() {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between gap-4 px-4">
+        <h4 className="text-sm font-semibold">Details</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            Toggle
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="border-d-border rounded-md border px-4 py-3 text-sm">
+          Item A
+        </div>
+        <div className="border-d-border rounded-md border px-4 py-3 text-sm">
+          Item B
+        </div>
+        <div className="border-d-border rounded-md border px-4 py-3 text-sm">
+          Item C
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+```
+
+### Open by Default
+
+```tsx
+import { useState } from "react";
+import { Button } from "laif-ds";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
+
+export function OpenByDefault() {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between gap-4 px-4">
+        <h4 className="text-sm font-semibold">Details</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            Toggle
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-3 text-sm">
+          This is additional information.
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **asChild**: Wrap your own button/link as trigger while preserving styles.
+- **Styling**: Use `className` on root/content to adjust spacing and borders.