laif-ds 0.2.74 → 0.2.76

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

@@ -1,147 +1,172 @@
- # Card
- 
- ## Overview
- 
- Composable container with header, content, footer, and optional action area. Supports size variants that control internal padding and spacing.
- 
- ---
- 
- ## Props
- 
- ### Card (Root)
- 
- | Prop        | Type                          | Default     | Description                                  |
- | ----------- | ----------------------------- | ----------- | -------------------------------------------- |
- | `size`      | `"default" | "sm" | "lg" | "none"` | `"default"` | Controls internal padding and spacing.       |
- | `className` | `string`                      | `""`        | Additional classes for layout and width.      |
- | `children`  | `React.ReactNode`             | **required**| Compose with subcomponents below.             |
- 
- ### Subcomponents
- 
- - `CardHeader`: Top section, usually with `CardTitle`, `CardDescription`, and optional `CardAction`.
- - `CardTitle`: Title text area.
- - `CardDescription`: Secondary text under the title.
- - `CardAction`: Right-aligned area inside the header for buttons/menus.
- - `CardContent`: Main content area.
- - `CardFooter`: Bottom area for actions or summaries.
- 
- ---
- 
- ## Behavior
- 
- - **Size variants**: `sm`, `default`, `lg`, `none` change vertical padding and gaps.
- - **Header/Footer borders**: Apply border utilities on header/footer to create separators.
- - **Layout**: Use `className` for width and responsive behavior.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "laif-ds";
- import { Button } from "laif-ds";
- 
- export function BasicCard() {
-   return (
-     <Card className="w-[350px]">
-       <CardHeader>
-         <CardTitle>Card Title</CardTitle>
-         <CardDescription>Card description goes here</CardDescription>
-       </CardHeader>
-       <CardContent>
-         <p>This is the main content of the card. You can put any content here.</p>
-       </CardContent>
-       <CardFooter>
-         <Button>Action</Button>
-       </CardFooter>
-     </Card>
-   );
- }
- ```
- 
- ### With Action
- 
- ```tsx
- import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent } from "laif-ds";
- import { Button } from "laif-ds";
- 
- export function CardWithAction() {
-   return (
-     <Card className="w-[350px]">
-       <CardHeader>
-         <CardTitle>Card with Action</CardTitle>
-         <CardDescription>Card with an action button in the header</CardDescription>
-         <CardAction>
-           <Button variant="ghost" size="icon">⋯</Button>
-         </CardAction>
-       </CardHeader>
-       <CardContent>
-         <p>This card has an action button in the top right corner.</p>
-       </CardContent>
-     </Card>
-   );
- }
- ```
- 
- ### Size Variants
- 
- ```tsx
- import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "laif-ds";
- 
- export function SizeVariants() {
-   return (
-     <div className="flex flex-col gap-8">
-       <Card size="sm" className="w-[350px]">
-         <CardHeader>
-           <CardTitle>Size: Small</CardTitle>
-           <CardDescription>Reduced padding (sm)</CardDescription>
-         </CardHeader>
-         <CardContent>
-           <p>This card uses size="sm".</p>
-         </CardContent>
-       </Card>
- 
-       <Card size="default" className="w-[350px]">
-         <CardHeader>
-           <CardTitle>Size: Default</CardTitle>
-           <CardDescription>Standard padding (default)</CardDescription>
-         </CardHeader>
-         <CardContent>
-           <p>This card uses size="default".</p>
-         </CardContent>
-       </Card>
- 
-       <Card size="lg" className="w-[350px]">
-         <CardHeader>
-           <CardTitle>Size: Large</CardTitle>
-           <CardDescription>Spacious padding (lg)</CardDescription>
-         </CardHeader>
-         <CardContent>
-           <p>This card uses size="lg".</p>
-         </CardContent>
-       </Card>
- 
-       <Card size="none" className="w-[350px]">
-         <CardHeader className="border-d-border border-b p-4">
-           <CardTitle>Size: None</CardTitle>
-           <CardDescription>No default padding (none)</CardDescription>
-         </CardHeader>
-         <CardContent className="p-4">
-           <p>This card uses size="none" with custom padding.</p>
-         </CardContent>
-       </Card>
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Composability**: Use only the subcomponents you need.
- - **Borders**: Add `border-b`/`border-t` to header/footer for separation.
- - **Action area**: `CardAction` aligns content to the top-right in the header.
- 
+# Card
+
+## Overview
+
+Composable container with header, content, footer, and optional action area. Supports size variants that control internal padding and spacing.
+
+---
+
+## Props
+
+### Card (Root)
+
+| Prop        | Type              | Default      | Description                              |
+| ----------- | ----------------- | ------------ | ---------------------------------------- | ------- | ----------- | -------------------------------------- |
+| `size`      | `"default"        | "sm"         | "lg"                                     | "none"` | `"default"` | Controls internal padding and spacing. |
+| `className` | `string`          | `""`         | Additional classes for layout and width. |
+| `children`  | `React.ReactNode` | **required** | Compose with subcomponents below.        |
+
+### Subcomponents
+
+- `CardHeader`: Top section, usually with `CardTitle`, `CardDescription`, and optional `CardAction`.
+- `CardTitle`: Title text area.
+- `CardDescription`: Secondary text under the title.
+- `CardAction`: Right-aligned area inside the header for buttons/menus.
+- `CardContent`: Main content area.
+- `CardFooter`: Bottom area for actions or summaries.
+
+---
+
+## Behavior
+
+- **Size variants**: `sm`, `default`, `lg`, `none` change vertical padding and gaps.
+- **Header/Footer borders**: Apply border utilities on header/footer to create separators.
+- **Layout**: Use `className` for width and responsive behavior.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "laif-ds";
+import { Button } from "laif-ds";
+
+export function BasicCard() {
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          This is the main content of the card. You can put any content here.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button>Action</Button>
+      </CardFooter>
+    </Card>
+  );
+}
+```
+
+### With Action
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+} from "laif-ds";
+import { Button } from "laif-ds";
+
+export function CardWithAction() {
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card with Action</CardTitle>
+        <CardDescription>
+          Card with an action button in the header
+        </CardDescription>
+        <CardAction>
+          <Button variant="ghost" size="icon">
+            ⋯
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>This card has an action button in the top right corner.</p>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Size Variants
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "laif-ds";
+
+export function SizeVariants() {
+  return (
+    <div className="flex flex-col gap-8">
+      <Card size="sm" className="w-[350px]">
+        <CardHeader>
+          <CardTitle>Size: Small</CardTitle>
+          <CardDescription>Reduced padding (sm)</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>This card uses size="sm".</p>
+        </CardContent>
+      </Card>
+
+      <Card size="default" className="w-[350px]">
+        <CardHeader>
+          <CardTitle>Size: Default</CardTitle>
+          <CardDescription>Standard padding (default)</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>This card uses size="default".</p>
+        </CardContent>
+      </Card>
+
+      <Card size="lg" className="w-[350px]">
+        <CardHeader>
+          <CardTitle>Size: Large</CardTitle>
+          <CardDescription>Spacious padding (lg)</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>This card uses size="lg".</p>
+        </CardContent>
+      </Card>
+
+      <Card size="none" className="w-[350px]">
+        <CardHeader className="border-d-border border-b p-4">
+          <CardTitle>Size: None</CardTitle>
+          <CardDescription>No default padding (none)</CardDescription>
+        </CardHeader>
+        <CardContent className="p-4">
+          <p>This card uses size="none" with custom padding.</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Composability**: Use only the subcomponents you need.
+- **Borders**: Add `border-b`/`border-t` to header/footer for separation.
+- **Action area**: `CardAction` aligns content to the top-right in the header.

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

@@ -1,129 +1,148 @@
- # Carousel
- 
- ## Overview
- 
- A flexible, accessible carousel built on Embla. Supports horizontal/vertical orientation, previous/next controls, keyboard navigation, and responsive layouts.
- 
- ---
- 
- ## Props
- 
- ### Carousel (Root)
- 
- | Prop           | Type                                   | Default        | Description                                        |
- | -------------- | -------------------------------------- | -------------- | -------------------------------------------------- |
- | `orientation`  | `"horizontal" | "vertical"`         | `"horizontal"` | Scroll axis for the carousel.                      |
- | `opts`         | `EmblaOptionsType`                      | `{}`           | Embla options (e.g., loop).                        |
- | `plugins`      | `EmblaPluginType[]`                     | `[]`           | Embla plugins.                                     |
- | `setApi`       | `(api: CarouselApi) => void`            | `undefined`    | Receives the Embla API instance.                   |
- | `className`    | `string`                                | `""`           | Additional classes for the container.              |
- | `children`     | `React.ReactNode`                       | **required**   | Compose with subcomponents below.                  |
- 
- ### Subcomponents
- 
- - `CarouselContent`: Scroll container (wraps slides).
- - `CarouselItem`: A single slide.
- - `CarouselPrevious`: Previous button (disabled when not scrollable).
- - `CarouselNext`: Next button (disabled when not scrollable).
- 
- ---
- 
- ## Behavior
- 
- - **Keyboard**: Left/Right arrows move slides (when horizontal).
- - **Controls**: Prev/Next buttons enable/disable based on scroll availability.
- - **Orientation**: Vertical orientation rotates controls appropriately.
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "laif-ds";
- import { Card, CardContent } from "laif-ds";
- 
- export function BasicCarousel() {
-   return (
-     <Carousel className="w-full max-w-xs">
-       <CarouselContent>
-         {Array.from({ length: 5 }).map((_, index) => (
-           <CarouselItem key={index}>
-             <div className="p-1">
-               <Card>
-                 <CardContent className="flex aspect-square items-center justify-center p-6">
-                   <span className="text-xl font-semibold">{index + 1}</span>
-                 </CardContent>
-               </Card>
-             </div>
-           </CarouselItem>
-         ))}
-       </CarouselContent>
-       <CarouselPrevious />
-       <CarouselNext />
-     </Carousel>
-   );
- }
- ```
- 
- ### Multiple Items per Row
- 
- ```tsx
- import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "laif-ds";
- import { Card, CardContent } from "laif-ds";
- 
- export function MultipleItems() {
-   return (
-     <Carousel className="w-full max-w-md">
-       <CarouselContent className="-ml-1">
-         {Array.from({ length: 10 }).map((_, index) => (
-           <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-             <div className="p-1">
-               <Card>
-                 <CardContent className="flex aspect-square items-center justify-center p-6">
-                   <span className="text-lg font-semibold">{index + 1}</span>
-                 </CardContent>
-               </Card>
-             </div>
-           </CarouselItem>
-         ))}
-       </CarouselContent>
-       <CarouselPrevious />
-       <CarouselNext />
-     </Carousel>
-   );
- }
- ```
- 
- ### With API (loop)
- 
- ```tsx
- import { useState } from "react";
- import type { CarouselApi } from "laif-ds";
- import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "laif-ds";
- 
- export function CarouselWithApi() {
-   const [api, setApi] = useState<CarouselApi | null>(null);
-   return (
-     <Carousel className="w-full max-w-xs" setApi={setApi} opts={{ loop: true }}>
-       <CarouselContent>
-         {[1, 2, 3, 4, 5].map((n) => (
-           <CarouselItem key={n}><div className="p-6">Slide {n}</div></CarouselItem>
-         ))}
-       </CarouselContent>
-       <CarouselPrevious />
-       <CarouselNext />
-     </Carousel>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Focus**: The root handles arrow keys via `onKeyDownCapture`.
- - **Responsiveness**: Use `basis-*` utilities on `CarouselItem` for multi-column layouts.
- - **Plugins**: Pass Embla plugins via `plugins` prop when needed.
- 
+# Carousel
+
+## Overview
+
+A flexible, accessible carousel built on Embla. Supports horizontal/vertical orientation, previous/next controls, keyboard navigation, and responsive layouts.
+
+---
+
+## Props
+
+### Carousel (Root)
+
+| Prop          | Type                         | Default      | Description                           |
+| ------------- | ---------------------------- | ------------ | ------------------------------------- | ----------------------------- |
+| `orientation` | `"horizontal"                | "vertical"`  | `"horizontal"`                        | Scroll axis for the carousel. |
+| `opts`        | `EmblaOptionsType`           | `{}`         | Embla options (e.g., loop).           |
+| `plugins`     | `EmblaPluginType[]`          | `[]`         | Embla plugins.                        |
+| `setApi`      | `(api: CarouselApi) => void` | `undefined`  | Receives the Embla API instance.      |
+| `className`   | `string`                     | `""`         | Additional classes for the container. |
+| `children`    | `React.ReactNode`            | **required** | Compose with subcomponents below.     |
+
+### Subcomponents
+
+- `CarouselContent`: Scroll container (wraps slides).
+- `CarouselItem`: A single slide.
+- `CarouselPrevious`: Previous button (disabled when not scrollable).
+- `CarouselNext`: Next button (disabled when not scrollable).
+
+---
+
+## Behavior
+
+- **Keyboard**: Left/Right arrows move slides (when horizontal).
+- **Controls**: Prev/Next buttons enable/disable based on scroll availability.
+- **Orientation**: Vertical orientation rotates controls appropriately.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from "laif-ds";
+import { Card, CardContent } from "laif-ds";
+
+export function BasicCarousel() {
+  return (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  );
+}
+```
+
+### Multiple Items per Row
+
+```tsx
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from "laif-ds";
+import { Card, CardContent } from "laif-ds";
+
+export function MultipleItems() {
+  return (
+    <Carousel className="w-full max-w-md">
+      <CarouselContent className="-ml-1">
+        {Array.from({ length: 10 }).map((_, index) => (
+          <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-lg font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  );
+}
+```
+
+### With API (loop)
+
+```tsx
+import { useState } from "react";
+import type { CarouselApi } from "laif-ds";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "laif-ds";
+
+export function CarouselWithApi() {
+  const [api, setApi] = useState<CarouselApi | null>(null);
+  return (
+    <Carousel className="w-full max-w-xs" setApi={setApi} opts={{ loop: true }}>
+      <CarouselContent>
+        {[1, 2, 3, 4, 5].map((n) => (
+          <CarouselItem key={n}>
+            <div className="p-6">Slide {n}</div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Focus**: The root handles arrow keys via `onKeyDownCapture`.
+- **Responsiveness**: Use `basis-*` utilities on `CarouselItem` for multi-column layouts.
+- **Plugins**: Pass Embla plugins via `plugins` prop when needed.