laif-ds 0.2.74 → 0.2.76

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

@@ -1,118 +1,123 @@
- # Badge
- 
- ## Overview
- 
- Small, inline label for status and metadata. Supports many visual variants, optional icons, link mode, and disabled state.
- 
- ---
- 
- ## Props
- 
- ### Badge (Root)
- 
- | Prop         | Type                                                                                                                                                                                                                      | Default      | Description                                 |
- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------- |
- | `variant`    | `"default" \| "destructive" \| "warning" \| "success" \| "outline" \| "outline-primary" \| "outline-destructive" \| "outline-warning" \| "outline-success" \| "secondary" \| "ghost" \| "ghost-destructive" \| "ghost-accent" \| "ghost-warning" \| "ghost-success" \| "link"` | `"default"` | Visual style of the badge.                  |
- | `asChild`    | `boolean`                                                                                                                                                                                                                 | `false`      | Renders the badge as its child element.     |
- | `disabled`   | `boolean`                                                                                                                                                                                                                 | `false`      | Disables interactions and dims the badge.   |
- | `iconLeft`   | `IconName`                                                                                                                                                                                                                | `undefined`  | Optional left icon (uses `Icon` component). |
- | `iconRight`  | `IconName`                                                                                                                                                                                                                | `undefined`  | Optional right icon (uses `Icon` component).|
- | `className`  | `string`                                                                                                                                                                                                                  | `""`         | Additional classes on the root element.      |
- | `children`   | `React.ReactNode`                                                                                                                                                                                                         | **required** | Text or content inside the badge.           |
- 
- ---
- 
- ## Behavior
- 
- - **Variants**: Outline, ghost, and semantic variants available for flexible UIs.
- - **As child**: Use `asChild` to render as an anchor or any custom element.
- - **Icons**: `iconLeft`/`iconRight` render `Icon` with appropriate sizes.
- - **Disabled**: Applies `cursor-not-allowed` and reduces opacity.
- 
- ---
- 
- ## Examples
- 
- ### Default
- 
- ```tsx
- import { Badge } from "laif-ds";
- 
- export function DefaultBadge() {
-   return <Badge>Badge</Badge>;
- }
- ```
- 
- ### Variants Grid
- 
- ```tsx
- import { Badge, type BadgeProps } from "laif-ds";
- 
- const variants: BadgeProps["variant"][] = [
-   "default",
-   "destructive",
-   "warning",
-   "success",
-   "outline",
-   "outline-primary",
-   "outline-destructive",
-   "outline-warning",
-   "outline-success",
-   "secondary",
-   "ghost",
-   "ghost-accent",
-   "ghost-destructive",
-   "ghost-warning",
-   "ghost-success",
-   "link",
- ];
- 
- export function VariantsShowcase() {
-   return (
-     <div className="flex flex-wrap gap-2">
-       {variants.map((v) => (
-         <Badge key={v} variant={v}>
-           {v}
-         </Badge>
-       ))}
-     </div>
-   );
- }
- ```
- 
- ### With Icons
- 
- ```tsx
- import { Badge } from "laif-ds";
- 
- export function WithIcons() {
-   return (
-     <div className="flex gap-2">
-       <Badge iconLeft="Check" iconRight="X">Approved</Badge>
-       <Badge variant="outline-primary" iconLeft="Pencil">Edit</Badge>
-     </div>
-   );
- }
- ```
- 
- ### As Link (asChild)
- 
- ```tsx
- import { Badge } from "laif-ds";
- 
- export function LinkBadge() {
-   return (
-     <Badge asChild>
-       <a href="#" className="cursor-pointer">Clickable Badge</a>
-     </Badge>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Icons**: Use `IconName` values supported by the design system.
- - **AsChild**: Useful to keep semantics (e.g., anchors) while styling as badges.
- 
+# Badge
+
+## Overview
+
+Small, inline label for status and metadata. Supports many visual variants, optional icons, link mode, and disabled state.
+
+---
+
+## Props
+
+### Badge (Root)
+
+| Prop        | Type                                                                                                                                                                                                                                                                           | Default      | Description                                  |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | -------------------------------------------- |
+| `variant`   | `"default" \| "destructive" \| "warning" \| "success" \| "outline" \| "outline-primary" \| "outline-destructive" \| "outline-warning" \| "outline-success" \| "secondary" \| "ghost" \| "ghost-destructive" \| "ghost-accent" \| "ghost-warning" \| "ghost-success" \| "link"` | `"default"`  | Visual style of the badge.                   |
+| `asChild`   | `boolean`                                                                                                                                                                                                                                                                      | `false`      | Renders the badge as its child element.      |
+| `disabled`  | `boolean`                                                                                                                                                                                                                                                                      | `false`      | Disables interactions and dims the badge.    |
+| `iconLeft`  | `IconName`                                                                                                                                                                                                                                                                     | `undefined`  | Optional left icon (uses `Icon` component).  |
+| `iconRight` | `IconName`                                                                                                                                                                                                                                                                     | `undefined`  | Optional right icon (uses `Icon` component). |
+| `className` | `string`                                                                                                                                                                                                                                                                       | `""`         | Additional classes on the root element.      |
+| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                              | **required** | Text or content inside the badge.            |
+
+---
+
+## Behavior
+
+- **Variants**: Outline, ghost, and semantic variants available for flexible UIs.
+- **As child**: Use `asChild` to render as an anchor or any custom element.
+- **Icons**: `iconLeft`/`iconRight` render `Icon` with appropriate sizes.
+- **Disabled**: Applies `cursor-not-allowed` and reduces opacity.
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import { Badge } from "laif-ds";
+
+export function DefaultBadge() {
+  return <Badge>Badge</Badge>;
+}
+```
+
+### Variants Grid
+
+```tsx
+import { Badge, type BadgeProps } from "laif-ds";
+
+const variants: BadgeProps["variant"][] = [
+  "default",
+  "destructive",
+  "warning",
+  "success",
+  "outline",
+  "outline-primary",
+  "outline-destructive",
+  "outline-warning",
+  "outline-success",
+  "secondary",
+  "ghost",
+  "ghost-accent",
+  "ghost-destructive",
+  "ghost-warning",
+  "ghost-success",
+  "link",
+];
+
+export function VariantsShowcase() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {variants.map((v) => (
+        <Badge key={v} variant={v}>
+          {v}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+```
+
+### With Icons
+
+```tsx
+import { Badge } from "laif-ds";
+
+export function WithIcons() {
+  return (
+    <div className="flex gap-2">
+      <Badge iconLeft="Check" iconRight="X">
+        Approved
+      </Badge>
+      <Badge variant="outline-primary" iconLeft="Pencil">
+        Edit
+      </Badge>
+    </div>
+  );
+}
+```
+
+### As Link (asChild)
+
+```tsx
+import { Badge } from "laif-ds";
+
+export function LinkBadge() {
+  return (
+    <Badge asChild>
+      <a href="#" className="cursor-pointer">
+        Clickable Badge
+      </a>
+    </Badge>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Icons**: Use `IconName` values supported by the design system.
+- **AsChild**: Useful to keep semantics (e.g., anchors) while styling as badges.

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

@@ -58,7 +58,14 @@ export function BasicBreadcrumb() {
 ### Custom Separator
 
 ```tsx
-import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from "laif-ds";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+  BreadcrumbPage,
+} from "laif-ds";
 
 export function CustomSeparator() {
   return (

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

@@ -1,129 +1,131 @@
- # Button
- 
- ## Overview
- 
- Versatile button with multiple variants and sizes, optional leading/trailing icons, loading state, and support for rendering as a child element.
- 
- ---
- 
- ## Props
- 
- ### Button (Root)
- 
- | Prop         | Type                                                                                                                                             | Default       | Description                                              |
- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------------------------------------------------------- |
- | `variant`    | `"default" | "destructive" | "outline" | "outline-primary" | "outline-destructive" | "secondary" | "ghost" | "ghost-destructive" | "ghost-accent" | "link"` | `"default"`  | Visual style of the button.                              |
- | `size`       | `"default" | "sm" | "lg" | "icon"`                                                                                                             | `"default"`  | Size of the button.                                      |
- | `asChild`    | `boolean`                                                                                                                                         | `false`       | Render as child (e.g., anchor) while preserving styles. |
- | `iconLeft`   | `IconName`                                                                                                                                        | `undefined`   | Optional left icon name.                                 |
- | `iconRight`  | `IconName`                                                                                                                                        | `undefined`   | Optional right icon name.                                |
- | `isLoading`  | `boolean`                                                                                                                                         | `false`       | Shows a loading spinner; overrides `iconLeft`.          |
- | `className`  | `string`                                                                                                                                          | `""`          | Additional classes for layout/width.                     |
- | `disabled`   | `boolean`                                                                                                                                         | `false`       | Disables the button.                                     |
- | `onClick`    | `(e: React.MouseEvent<HTMLButtonElement>) => void`                                                                                                | `undefined`   | Click handler.                                            |
- | `children`   | `React.ReactNode`                                                                                                                                 | **required**  | Button label or content.                                 |
- 
- ---
- 
- ## Behavior
- 
- - **Loading**: When `isLoading` is `true`, a spinner is shown and `iconLeft` is hidden.
- - **Icons**: Icon sizes adapt to the button size (`sm`, `default`, `lg`, `icon`).
- - **As Child**: Use `asChild` to render the button as a link or custom element while keeping button styles.
- - **Accessibility**: Keyboard-focus ring and proper semantics are included.
- 
- ---
- 
- ## Examples
- 
- ### Default
- 
- ```tsx
- import { Button } from "laif-ds";
- 
- export function DefaultButton() {
-   return <Button>Button</Button>;
- }
- ```
- 
- ### Showcase (Variants × Sizes)
- 
- ```tsx
- import { Button, type ButtonProps } from "laif-ds";
- 
- const variants: ButtonProps["variant"][] = [
-   "default",
-   "destructive",
-   "outline",
-   "outline-primary",
-   "outline-destructive",
-   "secondary",
-   "ghost",
-   "ghost-accent",
-   "ghost-destructive",
-   "link",
- ];
- 
- const sizes: ButtonProps["size"][] = ["lg", "default", "sm", "icon"];
- 
- export function ButtonsGrid() {
-   return (
-     <div className="flex flex-col gap-4">
-       {variants.map((variant) => (
-         <div key={variant} className="flex items-center gap-2 flex-wrap">
-           {sizes.map((size) => (
-             size === "icon" ? (
-               <Button key={`${variant}-${size}`} variant={variant} size={size} iconLeft="BadgeInfo" />
-             ) : (
-               <Button key={`${variant}-${size}`} variant={variant} size={size}>
-                 {variant} - {size}
-               </Button>
-             )
-           ))}
-         </div>
-       ))}
-     </div>
-   );
- }
- ```
- 
- ### Full Width
- 
- ```tsx
- import { Button } from "laif-ds";
- 
- export function FullWidthButton() {
-   return (
-     <Button className="w-full">Full Width Button</Button>
-   );
- }
- ```
- 
- ### With Icon
- 
- ```tsx
- import { Button } from "laif-ds";
- 
- export function WithIcon() {
-   return <Button iconLeft="Check">Button with Icon</Button>;
- }
- ```
- 
- ### Loading
- 
- ```tsx
- import { Button } from "laif-ds";
- 
- export function LoadingButton() {
-   return <Button isLoading>Loading Button</Button>;
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Disabled**: Applies reduced opacity and prevents interactions.
- - **Icon-only**: Use `size="icon"` for square icon buttons.
- - **Theming**: Use variants to match semantic meaning (primary, destructive, etc.).
- 
+# Button
+
+## Overview
+
+Versatile button with multiple variants and sizes, optional leading/trailing icons, loading state, and support for rendering as a child element.
+
+---
+
+## Props
+
+### Button (Root)
+
+| Prop        | Type                                               | Default       | Description                                             |
+| ----------- | -------------------------------------------------- | ------------- | ------------------------------------------------------- | ----------------- | --------------------- | ------------------- | ------- | ------------------- | -------------- | ------- | ----------- | --------------------------- |
+| `variant`   | `"default"                                         | "destructive" | "outline"                                               | "outline-primary" | "outline-destructive" | "secondary"         | "ghost" | "ghost-destructive" | "ghost-accent" | "link"` | `"default"` | Visual style of the button. |
+| `size`      | `"default"                                         | "sm"          | "lg"                                                    | "icon"`           | `"default"`           | Size of the button. |
+| `asChild`   | `boolean`                                          | `false`       | Render as child (e.g., anchor) while preserving styles. |
+| `iconLeft`  | `IconName`                                         | `undefined`   | Optional left icon name.                                |
+| `iconRight` | `IconName`                                         | `undefined`   | Optional right icon name.                               |
+| `isLoading` | `boolean`                                          | `false`       | Shows a loading spinner; overrides `iconLeft`.          |
+| `className` | `string`                                           | `""`          | Additional classes for layout/width.                    |
+| `disabled`  | `boolean`                                          | `false`       | Disables the button.                                    |
+| `onClick`   | `(e: React.MouseEvent<HTMLButtonElement>) => void` | `undefined`   | Click handler.                                          |
+| `children`  | `React.ReactNode`                                  | **required**  | Button label or content.                                |
+
+---
+
+## Behavior
+
+- **Loading**: When `isLoading` is `true`, a spinner is shown and `iconLeft` is hidden.
+- **Icons**: Icon sizes adapt to the button size (`sm`, `default`, `lg`, `icon`).
+- **As Child**: Use `asChild` to render the button as a link or custom element while keeping button styles.
+- **Accessibility**: Keyboard-focus ring and proper semantics are included.
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import { Button } from "laif-ds";
+
+export function DefaultButton() {
+  return <Button>Button</Button>;
+}
+```
+
+### Showcase (Variants × Sizes)
+
+```tsx
+import { Button, type ButtonProps } from "laif-ds";
+
+const variants: ButtonProps["variant"][] = [
+  "default",
+  "destructive",
+  "outline",
+  "outline-primary",
+  "outline-destructive",
+  "secondary",
+  "ghost",
+  "ghost-accent",
+  "ghost-destructive",
+  "link",
+];
+
+const sizes: ButtonProps["size"][] = ["lg", "default", "sm", "icon"];
+
+export function ButtonsGrid() {
+  return (
+    <div className="flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex flex-wrap items-center gap-2">
+          {sizes.map((size) =>
+            size === "icon" ? (
+              <Button
+                key={`${variant}-${size}`}
+                variant={variant}
+                size={size}
+                iconLeft="BadgeInfo"
+              />
+            ) : (
+              <Button key={`${variant}-${size}`} variant={variant} size={size}>
+                {variant} - {size}
+              </Button>
+            ),
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Full Width
+
+```tsx
+import { Button } from "laif-ds";
+
+export function FullWidthButton() {
+  return <Button className="w-full">Full Width Button</Button>;
+}
+```
+
+### With Icon
+
+```tsx
+import { Button } from "laif-ds";
+
+export function WithIcon() {
+  return <Button iconLeft="Check">Button with Icon</Button>;
+}
+```
+
+### Loading
+
+```tsx
+import { Button } from "laif-ds";
+
+export function LoadingButton() {
+  return <Button isLoading>Loading Button</Button>;
+}
+```
+
+---
+
+## Notes
+
+- **Disabled**: Applies reduced opacity and prevents interactions.
+- **Icon-only**: Use `size="icon"` for square icon buttons.
+- **Theming**: Use variants to match semantic meaning (primary, destructive, etc.).