laif-ds 0.2.74 → 0.2.76

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

@@ -1,142 +1,141 @@
- # Command
- 
- ## Overview
- 
- Command palette and command list built on `cmdk`. Provides an input for filtering, groups, items, separators, and a dialog wrapper for modal usage.
- 
- ---
- 
- ## Props
- 
- ### Command (Root)
- 
- | Prop        | Type              | Default     | Description                                        |
- | ----------- | ----------------- | ----------- | -------------------------------------------------- |
- | `className` | `string`          | `""`        | Additional classes for layout/size.                 |
- | `children`  | `React.ReactNode` | **required**| Compose with input, list, groups, items, etc.      |
- 
- ### CommandDialog
- 
- Wraps a `Dialog` and renders a `Command` inside.
- 
- | Prop           | Type                     | Default                                | Description                      |
- | -------------- | ------------------------ | -------------------------------------- | -------------------------------- |
- | `open`         | `boolean`                | `undefined`                            | Controlled open state.           |
- | `onOpenChange` | `(open: boolean) => any` | `undefined`                            | Called when dialog state changes.|
- | `title`        | `string`                 | `"Command Palette"`                   | Accessible dialog title.         |
- | `description`  | `string`                 | `"Search for a command to run..."`    | Accessible dialog description.   |
- 
- ### Subcomponents
- 
- - `CommandInput`: Search input with a leading search icon.
- - `CommandList`: Scrollable list container.
- - `CommandEmpty`: Empty state when no results match.
- - `CommandGroup`: Group with optional `heading` prop.
- - `CommandItem`: Selectable item (supports disabled state).
- - `CommandSeparator`: Visual separator between groups.
- - `CommandShortcut`: Right-aligned shortcut hint (e.g., `⌘K`).
- 
- ---
- 
- ## Behavior
- 
- - **Filtering**: Typing in `CommandInput` filters visible items.
- - **Keyboard**: Arrow keys navigate, Enter selects, Esc can close the dialog.
- - **Accessibility**: Proper roles/aria set by `cmdk` and dialog wrapper.
- 
- ---
- 
- ## Examples
- 
- ### Basic List
- 
- ```tsx
- import {
-   Command,
-   CommandEmpty,
-   CommandGroup,
-   CommandInput,
-   CommandItem,
-   CommandList,
-   CommandSeparator,
-   CommandShortcut,
- } from "laif-ds";
- 
- export function BasicCommand() {
-   return (
-     <Command className="border-d-border w-[400px] rounded-lg border shadow-md">
-       <CommandInput placeholder="Type a command or search..." />
-       <CommandList>
-         <CommandEmpty>No results found.</CommandEmpty>
-         <CommandGroup heading="Suggestions">
-           <CommandItem>Calendar</CommandItem>
-           <CommandItem>Search</CommandItem>
-           <CommandItem>Settings</CommandItem>
-         </CommandGroup>
-         <CommandSeparator />
-         <CommandGroup heading="User">
-           <CommandItem>
-             Profile
-             <CommandShortcut>⌘P</CommandShortcut>
-           </CommandItem>
-           <CommandItem>Billing</CommandItem>
-           <CommandItem>Logout</CommandItem>
-         </CommandGroup>
-       </CommandList>
-     </Command>
-   );
- }
- ```
- 
- ### Command Dialog
- 
- ```tsx
- import { useState } from "react";
- import { Button } from "laif-ds";
- import {
-   CommandDialog,
-   CommandInput,
-   CommandList,
-   CommandEmpty,
-   CommandGroup,
-   CommandItem,
-   CommandSeparator,
- } from "laif-ds";
- 
- export function CommandDialogExample() {
-   const [open, setOpen] = useState(false);
-   return (
-     <>
-       <Button onClick={() => setOpen(true)} variant="outline">
-         Open Command Dialog
-       </Button>
-       <CommandDialog open={open} onOpenChange={setOpen}>
-         <CommandInput placeholder="Type a command or search..." />
-         <CommandList>
-           <CommandEmpty>No results found.</CommandEmpty>
-           <CommandGroup heading="Suggestions">
-             <CommandItem>Calendar</CommandItem>
-             <CommandItem>Search</CommandItem>
-             <CommandItem>Settings</CommandItem>
-           </CommandGroup>
-           <CommandSeparator />
-           <CommandGroup heading="User">
-             <CommandItem>Profile</CommandItem>
-             <CommandItem>Billing</CommandItem>
-             <CommandItem>Logout</CommandItem>
-           </CommandGroup>
-         </CommandList>
-       </CommandDialog>
-     </>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Shortcuts**: Use `CommandShortcut` for right-aligned hints within `CommandItem`.
- - **Layout**: Set explicit width on `Command` (e.g., `w-[400px]`) when used inline.
- - **Dialog**: `CommandDialog` hides its title/description visually but preserves accessibility.
- 
+# Command
+
+## Overview
+
+Command palette and command list built on `cmdk`. Provides an input for filtering, groups, items, separators, and a dialog wrapper for modal usage.
+
+---
+
+## Props
+
+### Command (Root)
+
+| Prop        | Type              | Default      | Description                                   |
+| ----------- | ----------------- | ------------ | --------------------------------------------- |
+| `className` | `string`          | `""`         | Additional classes for layout/size.           |
+| `children`  | `React.ReactNode` | **required** | Compose with input, list, groups, items, etc. |
+
+### CommandDialog
+
+Wraps a `Dialog` and renders a `Command` inside.
+
+| Prop           | Type                     | Default                            | Description                       |
+| -------------- | ------------------------ | ---------------------------------- | --------------------------------- |
+| `open`         | `boolean`                | `undefined`                        | Controlled open state.            |
+| `onOpenChange` | `(open: boolean) => any` | `undefined`                        | Called when dialog state changes. |
+| `title`        | `string`                 | `"Command Palette"`                | Accessible dialog title.          |
+| `description`  | `string`                 | `"Search for a command to run..."` | Accessible dialog description.    |
+
+### Subcomponents
+
+- `CommandInput`: Search input with a leading search icon.
+- `CommandList`: Scrollable list container.
+- `CommandEmpty`: Empty state when no results match.
+- `CommandGroup`: Group with optional `heading` prop.
+- `CommandItem`: Selectable item (supports disabled state).
+- `CommandSeparator`: Visual separator between groups.
+- `CommandShortcut`: Right-aligned shortcut hint (e.g., `⌘K`).
+
+---
+
+## Behavior
+
+- **Filtering**: Typing in `CommandInput` filters visible items.
+- **Keyboard**: Arrow keys navigate, Enter selects, Esc can close the dialog.
+- **Accessibility**: Proper roles/aria set by `cmdk` and dialog wrapper.
+
+---
+
+## Examples
+
+### Basic List
+
+```tsx
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "laif-ds";
+
+export function BasicCommand() {
+  return (
+    <Command className="border-d-border w-[400px] rounded-lg border shadow-md">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search</CommandItem>
+          <CommandItem>Settings</CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="User">
+          <CommandItem>
+            Profile
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>Billing</CommandItem>
+          <CommandItem>Logout</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+```
+
+### Command Dialog
+
+```tsx
+import { useState } from "react";
+import { Button } from "laif-ds";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from "laif-ds";
+
+export function CommandDialogExample() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="outline">
+        Open Command Dialog
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>Calendar</CommandItem>
+            <CommandItem>Search</CommandItem>
+            <CommandItem>Settings</CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="User">
+            <CommandItem>Profile</CommandItem>
+            <CommandItem>Billing</CommandItem>
+            <CommandItem>Logout</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Shortcuts**: Use `CommandShortcut` for right-aligned hints within `CommandItem`.
+- **Layout**: Set explicit width on `Command` (e.g., `w-[400px]`) when used inline.
+- **Dialog**: `CommandDialog` hides its title/description visually but preserves accessibility.

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

@@ -1,175 +1,182 @@
- # Confirmer
- 
- ## Overview
- 
- Promise-based confirmation dialog utility built on top of `AlertDialog`. Mount the `Confirmer` component once, then call `confirm()` to open a dialog and await the user decision.
- 
- ---
- 
- ## API
- 
- ### `Confirmer` (Component)
- 
- Mount this once at app root (or Story scope) to enable dialogs.
- 
- ```tsx
- import { Confirmer } from "laif-ds";
- 
- export function AppRoot() {
-   return (
-     <>
-       {/* ...your app... */}
-       <Confirmer />
-     </>
-   );
- }
- ```
- 
- ### `confirm(options)`
- 
- Returns a Promise that resolves when the user confirms and rejects when the user cancels.
- 
- ```ts
- type ConfirmOptions = {
-   title?: React.ReactNode;
-   description?: React.ReactNode;
-   cancelText?: React.ReactNode;
-   actionText?: React.ReactNode;
-   CancelProps?: React.ComponentProps<typeof AlertDialogCancel>;
-   ActionProps?: React.ComponentProps<typeof Button>;
-   variant?: "default" | "destructive";
- };
- 
- declare function confirm(options: ConfirmOptions): Promise<boolean>;
- declare function safeConfirm(options: ConfirmOptions): Promise<boolean | undefined>;
- ```
- 
- - `variant`: when set to `"destructive"`, shows a destructive style and warning icon.
- - `safeConfirm`: resolves `undefined` instead of throwing on cancel.
- 
- ---
- 
- ## Behavior
- 
- - **Resolve/Reject**: `confirm()` resolves on action click, rejects on cancel or close.
- - **Destructive mode**: Adds an alert icon and uses destructive button variant.
- - **Custom buttons**: Pass `ActionProps` and `CancelProps` to customize.
- 
- ---
- 
- ## Examples
- 
- ### Destructive
- 
- ```tsx
- import { Button } from "laif-ds";
- import { Confirmer, confirm } from "laif-ds";
- 
- export function DeleteFile() {
-   const onClick = async () => {
-     try {
-       await confirm({
-         variant: "destructive",
-         title: "Permanently delete file?",
-         description: "This action cannot be undone. The file will be removed permanently.",
-         cancelText: "Cancel",
-         actionText: "Delete",
-       });
-       console.log("File deleted");
-     } catch {
-       console.log("Deletion cancelled");
-     }
-   };
- 
-   return (
-     <>
-       <Button variant="destructive" onClick={onClick}>Delete File</Button>
-       <Confirmer />
-     </>
-   );
- }
- ```
- 
- ### Custom Text and Buttons
- 
- ```tsx
- import { Button } from "laif-ds";
- import { Confirmer, confirm } from "laif-ds";
- 
- export function PublishArticle() {
-   const onClick = async () => {
-     try {
-       await confirm({
-         title: "Publish article?",
-         description: "This will make your article visible to the public.",
-         cancelText: "Save as draft",
-         actionText: "Publish now",
-         ActionProps: {
-           variant: "default",
-         },
-       });
-       console.log("Article published");
-     } catch {
-       console.log("Article saved as draft");
-     }
-   };
- 
-   return (
-     <>
-       <Button onClick={onClick}>Publish Article</Button>
-       <Confirmer />
-     </>
-   );
- }
- ```
- 
- ### Multiple Confirmers (independent flows)
- 
- ```tsx
- import { Button } from "laif-ds";
- import { Confirmer, confirm } from "laif-ds";
- 
- export function MultipleActions() {
-   const accept1 = async () => {
-     try {
-       await confirm({ title: "Confirm action 1", description: "This is the first confirmation dialog." });
-       console.log("Action 1 confirmed");
-     } catch {
-       console.log("Action 1 cancelled");
-     }
-   };
- 
-   const accept2 = async () => {
-     try {
-       await confirm({
-         title: "Confirm action 2",
-         description: "This is the second confirmation dialog.",
-         cancelText: "Reject",
-         actionText: "Accept",
-       });
-       console.log("Action 2 confirmed");
-     } catch {
-       console.log("Action 2 cancelled");
-     }
-   };
- 
-   return (
-     <>
-       <div className="flex gap-4">
-         <Button onClick={accept1}>Action 1</Button>
-         <Button onClick={accept2}>Action 2</Button>
-       </div>
-       <Confirmer />
-     </>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Mount once**: Add a single `<Confirmer />` near app root.
- - **Error handling**: Use `try/catch` with `confirm()`; or `safeConfirm()` to avoid throwing.
- - **Theming**: `variant="destructive"` changes icon and button styling accordingly.
- 
+# Confirmer
+
+## Overview
+
+Promise-based confirmation dialog utility built on top of `AlertDialog`. Mount the `Confirmer` component once, then call `confirm()` to open a dialog and await the user decision.
+
+---
+
+## API
+
+### `Confirmer` (Component)
+
+Mount this once at app root (or Story scope) to enable dialogs.
+
+```tsx
+import { Confirmer } from "laif-ds";
+
+export function AppRoot() {
+  return (
+    <>
+      {/* ...your app... */}
+      <Confirmer />
+    </>
+  );
+}
+```
+
+### `confirm(options)`
+
+Returns a Promise that resolves when the user confirms and rejects when the user cancels.
+
+```ts
+type ConfirmOptions = {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  cancelText?: React.ReactNode;
+  actionText?: React.ReactNode;
+  CancelProps?: React.ComponentProps<typeof AlertDialogCancel>;
+  ActionProps?: React.ComponentProps<typeof Button>;
+  variant?: "default" | "destructive";
+};
+
+declare function confirm(options: ConfirmOptions): Promise<boolean>;
+declare function safeConfirm(
+  options: ConfirmOptions,
+): Promise<boolean | undefined>;
+```
+
+- `variant`: when set to `"destructive"`, shows a destructive style and warning icon.
+- `safeConfirm`: resolves `undefined` instead of throwing on cancel.
+
+---
+
+## Behavior
+
+- **Resolve/Reject**: `confirm()` resolves on action click, rejects on cancel or close.
+- **Destructive mode**: Adds an alert icon and uses destructive button variant.
+- **Custom buttons**: Pass `ActionProps` and `CancelProps` to customize.
+
+---
+
+## Examples
+
+### Destructive
+
+```tsx
+import { Button } from "laif-ds";
+import { Confirmer, confirm } from "laif-ds";
+
+export function DeleteFile() {
+  const onClick = async () => {
+    try {
+      await confirm({
+        variant: "destructive",
+        title: "Permanently delete file?",
+        description:
+          "This action cannot be undone. The file will be removed permanently.",
+        cancelText: "Cancel",
+        actionText: "Delete",
+      });
+      console.log("File deleted");
+    } catch {
+      console.log("Deletion cancelled");
+    }
+  };
+
+  return (
+    <>
+      <Button variant="destructive" onClick={onClick}>
+        Delete File
+      </Button>
+      <Confirmer />
+    </>
+  );
+}
+```
+
+### Custom Text and Buttons
+
+```tsx
+import { Button } from "laif-ds";
+import { Confirmer, confirm } from "laif-ds";
+
+export function PublishArticle() {
+  const onClick = async () => {
+    try {
+      await confirm({
+        title: "Publish article?",
+        description: "This will make your article visible to the public.",
+        cancelText: "Save as draft",
+        actionText: "Publish now",
+        ActionProps: {
+          variant: "default",
+        },
+      });
+      console.log("Article published");
+    } catch {
+      console.log("Article saved as draft");
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>Publish Article</Button>
+      <Confirmer />
+    </>
+  );
+}
+```
+
+### Multiple Confirmers (independent flows)
+
+```tsx
+import { Button } from "laif-ds";
+import { Confirmer, confirm } from "laif-ds";
+
+export function MultipleActions() {
+  const accept1 = async () => {
+    try {
+      await confirm({
+        title: "Confirm action 1",
+        description: "This is the first confirmation dialog.",
+      });
+      console.log("Action 1 confirmed");
+    } catch {
+      console.log("Action 1 cancelled");
+    }
+  };
+
+  const accept2 = async () => {
+    try {
+      await confirm({
+        title: "Confirm action 2",
+        description: "This is the second confirmation dialog.",
+        cancelText: "Reject",
+        actionText: "Accept",
+      });
+      console.log("Action 2 confirmed");
+    } catch {
+      console.log("Action 2 cancelled");
+    }
+  };
+
+  return (
+    <>
+      <div className="flex gap-4">
+        <Button onClick={accept1}>Action 1</Button>
+        <Button onClick={accept2}>Action 2</Button>
+      </div>
+      <Confirmer />
+    </>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Mount once**: Add a single `<Confirmer />` near app root.
+- **Error handling**: Use `try/catch` with `confirm()`; or `safeConfirm()` to avoid throwing.
+- **Theming**: `variant="destructive"` changes icon and button styling accordingly.