laif-ds 0.2.74 → 0.2.76

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

@@ -1,77 +1,81 @@
- # AppStepper
- 
- ## Overview
- 
- High-level stepper built on `Stepper` primitives. Renders labeled steps with indicators and panels, supports horizontal/vertical layouts, separators, controlled navigation and custom click behavior.
- 
- ---
- 
- ## Props
- 
- | Prop                     | Type                                             | Default       | Description |
- | ------------------------ | ------------------------------------------------ | ------------- | ----------- |
- | `steps`                  | `{ id: number; label: ReactNode; component: ReactNode; completed?; disabled?; loading?; }[]` | **required** | Steps to render (id is the step value). |
- | `align`                  | `"horizontal" | "vertical"`                    | `"horizontal"` | Layout orientation. |
- | `size`                   | `"sm" | "md"`                                 | `"sm"`        | Indicator/title sizing. |
- | `showSeparators`         | `boolean`                                        | `true`        | Show separators between steps. |
- | `value`                  | `number`                                         | first step id | Current step value (controlled). |
- | `onValueChange`          | `(value: number) => void`                        | `undefined`   | Called when step changes. |
- | `defaultStep`            | `number`                                         | `undefined`   | Initial step if `value` is not provided. |
- | `allowStepNavigation`    | `boolean`                                        | `true`        | If `false`, steps are not clickable. |
- | `allowClickOnlyCompleted`| `boolean`                                        | `false`       | If `true`, only completed steps are clickable. |
- | `onStepClick`            | `(step, index) => void`                          | `undefined`   | Custom click handler; if provided, handles activation manually. |
- | `indicators`             | `{ active?; completed?; inactive?; loading? }`   | `undefined`   | Custom indicator content per state. |
- 
- Inherits the rest of `StepperProps` (e.g., `orientation` is controlled by `align`).
- 
- ---
- 
- ## Behavior
- 
- - **Controlled**: Always passes a `value` to `Stepper`. Update via `onValueChange`.
- - **Clickable steps**: Governed by `allowStepNavigation` and `allowClickOnlyCompleted`.
- - **Indicators**: Customize the indicator content through `indicators`.
- 
- ---
- 
- ## Examples
- 
- ```tsx
- import * as React from "react";
- import { AppStepper } from "laif-ds";
- 
- const steps = [
-   { id: 1, label: "Account Setup", component: <div>Step 1</div> },
-   { id: 2, label: "Profile Information", component: <div>Step 2</div> },
-   { id: 3, label: "Preferences", component: <div>Step 3</div> },
- ] as const;
- 
- export function HorizontalStepper() {
-   const [current, setCurrent] = React.useState(1);
-   return (
-     <AppStepper
-       steps={steps}
-       value={current}
-       onValueChange={setCurrent}
-       align="horizontal"
-       size="md"
-       showSeparators
-     />
-   );
- }
- 
- export function VerticalStepper() {
-   const [current, setCurrent] = React.useState(1);
-   return (
-     <AppStepper steps={steps} value={current} onValueChange={setCurrent} align="vertical" />
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Accessibility**: Based on `Stepper` primitives which manage keyboard and focus.
- - **Custom click logic**: Provide `onStepClick` to intercept clicks (e.g., validation before navigation).
- 
+# AppStepper
+
+## Overview
+
+High-level stepper built on `Stepper` primitives. Renders labeled steps with indicators and panels, supports horizontal/vertical layouts, separators, controlled navigation and custom click behavior.
+
+---
+
+## Props
+
+| Prop                      | Type                                                                                         | Default       | Description                                                     |
+| ------------------------- | -------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------- | ----------------------- |
+| `steps`                   | `{ id: number; label: ReactNode; component: ReactNode; completed?; disabled?; loading?; }[]` | **required**  | Steps to render (id is the step value).                         |
+| `align`                   | `"horizontal"                                                                                | "vertical"`   | `"horizontal"`                                                  | Layout orientation.     |
+| `size`                    | `"sm"                                                                                        | "md"`         | `"sm"`                                                          | Indicator/title sizing. |
+| `showSeparators`          | `boolean`                                                                                    | `true`        | Show separators between steps.                                  |
+| `value`                   | `number`                                                                                     | first step id | Current step value (controlled).                                |
+| `onValueChange`           | `(value: number) => void`                                                                    | `undefined`   | Called when step changes.                                       |
+| `defaultStep`             | `number`                                                                                     | `undefined`   | Initial step if `value` is not provided.                        |
+| `allowStepNavigation`     | `boolean`                                                                                    | `true`        | If `false`, steps are not clickable.                            |
+| `allowClickOnlyCompleted` | `boolean`                                                                                    | `false`       | If `true`, only completed steps are clickable.                  |
+| `onStepClick`             | `(step, index) => void`                                                                      | `undefined`   | Custom click handler; if provided, handles activation manually. |
+| `indicators`              | `{ active?; completed?; inactive?; loading? }`                                               | `undefined`   | Custom indicator content per state.                             |
+
+Inherits the rest of `StepperProps` (e.g., `orientation` is controlled by `align`).
+
+---
+
+## Behavior
+
+- **Controlled**: Always passes a `value` to `Stepper`. Update via `onValueChange`.
+- **Clickable steps**: Governed by `allowStepNavigation` and `allowClickOnlyCompleted`.
+- **Indicators**: Customize the indicator content through `indicators`.
+
+---
+
+## Examples
+
+```tsx
+import * as React from "react";
+import { AppStepper } from "laif-ds";
+
+const steps = [
+  { id: 1, label: "Account Setup", component: <div>Step 1</div> },
+  { id: 2, label: "Profile Information", component: <div>Step 2</div> },
+  { id: 3, label: "Preferences", component: <div>Step 3</div> },
+] as const;
+
+export function HorizontalStepper() {
+  const [current, setCurrent] = React.useState(1);
+  return (
+    <AppStepper
+      steps={steps}
+      value={current}
+      onValueChange={setCurrent}
+      align="horizontal"
+      size="md"
+      showSeparators
+    />
+  );
+}
+
+export function VerticalStepper() {
+  const [current, setCurrent] = React.useState(1);
+  return (
+    <AppStepper
+      steps={steps}
+      value={current}
+      onValueChange={setCurrent}
+      align="vertical"
+    />
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Accessibility**: Based on `Stepper` primitives which manage keyboard and focus.
+- **Custom click logic**: Provide `onStepClick` to intercept clicks (e.g., validation before navigation).

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

@@ -1,87 +1,95 @@
- # AspectRatio
- 
- ## Overview
- 
- A container that maintains a consistent aspect ratio for its content. Useful for images, videos, and any media that requires a fixed ratio.
- 
- ---
- 
- ## Props
- 
- ### AspectRatio (Root)
- 
- | Prop        | Type                | Default     | Description                                     |
- | ----------- | ------------------- | ----------- | ----------------------------------------------- |
- | `ratio`     | `number`            | `undefined` | Aspect ratio expressed as a number (e.g., 16/9).|
- | `className` | `string`            | `""`        | Additional classes applied to the container.     |
- | `children`  | `React.ReactNode`   | **required**| Content inside the ratio-constrained container.  |
- 
- ---
- 
- ## Behavior
- 
- - **Responsive**: The container scales while preserving the specified ratio.
- - **Content fill**: Child content should handle its own layout (e.g., `object-cover`).
- - **Styling**: Apply width/height and styling via `className`.
- 
- ---
- 
- ## Examples
- 
+# AspectRatio
+
+## Overview
+
+A container that maintains a consistent aspect ratio for its content. Useful for images, videos, and any media that requires a fixed ratio.
+
+---
+
+## Props
+
+### AspectRatio (Root)
+
+| Prop        | Type              | Default      | Description                                      |
+| ----------- | ----------------- | ------------ | ------------------------------------------------ |
+| `ratio`     | `number`          | `undefined`  | Aspect ratio expressed as a number (e.g., 16/9). |
+| `className` | `string`          | `""`         | Additional classes applied to the container.     |
+| `children`  | `React.ReactNode` | **required** | Content inside the ratio-constrained container.  |
+
+---
+
+## Behavior
+
+- **Responsive**: The container scales while preserving the specified ratio.
+- **Content fill**: Child content should handle its own layout (e.g., `object-cover`).
+- **Styling**: Apply width/height and styling via `className`.
+
+---
+
+## Examples
+
 ### 16:9 Ratio
- 
+
 ```tsx
 import { AspectRatio } from "laif-ds";
- 
+
 export function Ratio16x9() {
   return (
-    <AspectRatio ratio={16 / 9} className="bg-d-secondary/10 w-[400px] rounded-md overflow-hidden">
+    <AspectRatio
+      ratio={16 / 9}
+      className="bg-d-secondary/10 w-[400px] overflow-hidden rounded-md"
+    >
       <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-d-secondary-foreground">16:9 Aspect Ratio</p>
+        <p className="text-d-secondary-foreground text-sm">16:9 Aspect Ratio</p>
       </div>
     </AspectRatio>
   );
 }
 ```
- 
+
 ### Square (1:1)
- 
+
 ```tsx
 import { AspectRatio } from "laif-ds";
- 
+
 export function Square() {
   return (
-    <AspectRatio ratio={1 / 1} className="bg-d-secondary/10 w-[400px] rounded-md overflow-hidden">
+    <AspectRatio
+      ratio={1 / 1}
+      className="bg-d-secondary/10 w-[400px] overflow-hidden rounded-md"
+    >
       <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-d-secondary-foreground">1:1 Aspect Ratio</p>
+        <p className="text-d-secondary-foreground text-sm">1:1 Aspect Ratio</p>
       </div>
     </AspectRatio>
   );
 }
 ```
- 
+
 ### With Image
- 
+
 ```tsx
 import { AspectRatio } from "laif-ds";
- 
- export function ImageRatio() {
-   return (
-     <AspectRatio ratio={16 / 9} className="w-[400px] rounded-md overflow-hidden">
-       <img
-         src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-         alt="Image"
-         className="h-full w-full object-cover"
-       />
-     </AspectRatio>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Children**: Place any content inside; use `object-cover` for images to avoid distortion.
- - **Width**: Control width via `className`; height is computed from the ratio.
- 
+
+export function ImageRatio() {
+  return (
+    <AspectRatio
+      ratio={16 / 9}
+      className="w-[400px] overflow-hidden rounded-md"
+    >
+      <img
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="Image"
+        className="h-full w-full object-cover"
+      />
+    </AspectRatio>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Children**: Place any content inside; use `object-cover` for images to avoid distortion.
+- **Width**: Control width via `className`; height is computed from the ratio.

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

@@ -8,11 +8,11 @@ Canvas-based audio waveform visualizer for a MediaStream. Starts/stops with `isR
 
 ## Props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `stream` | `MediaStream | null` | Input audio stream |
-| `isRecording` | `boolean` | Whether to render visualization |
-| `onClick` | `() => void` | Click handler (e.g., to toggle state) |
+| Prop          | Type         | Description                           |
+| ------------- | ------------ | ------------------------------------- | ------------------ |
+| `stream`      | `MediaStream | null`                                 | Input audio stream |
+| `isRecording` | `boolean`    | Whether to render visualization       |
+| `onClick`     | `() => void` | Click handler (e.g., to toggle state) |
 
 ---
 

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

@@ -1,113 +1,112 @@
- # Avatar
- 
- ## Overview
- 
- Circular user/avatar component with image and fallback. Accessible and easily styled.
- 
- ---
- 
- ## Props
- 
- ### Avatar (Root)
- 
- | Prop        | Type              | Default     | Description                                      |
- | ----------- | ----------------- | ----------- | ------------------------------------------------ |
- | `className` | `string`          | `""`        | Additional classes for size/border/layout.        |
- | `children`  | `React.ReactNode` | **required**| Typically `AvatarImage` and `AvatarFallback`.     |
- 
- ### Subcomponents
- 
- - `AvatarImage`: The image element.
-   - Props: `src`, `alt`, `className`.
- - `AvatarFallback`: Fallback content shown when the image fails or loads slowly.
-   - Props: `children` (e.g., initials), `className`.
- 
- ---
- 
- ## Behavior
- 
- - **Shape**: Circular by default (`rounded-full`).
- - **Sizing**: Control via `className` (e.g., `h-16 w-16`).
- - **Fallback**: Displays initials or an icon when the image is unavailable.
- 
- ---
- 
- ## Examples
- 
- ### With Image
- 
- ```tsx
- import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
- 
- export function WithImage() {
-   return (
-     <Avatar>
-       <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-       <AvatarFallback>CN</AvatarFallback>
-     </Avatar>
-   );
- }
- ```
- 
- ### With Fallback
- 
- ```tsx
- import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
- 
- export function WithFallback() {
-   return (
-     <Avatar>
-       <AvatarImage src="" alt="User" />
-       <AvatarFallback>JD</AvatarFallback>
-     </Avatar>
-   );
- }
- ```
- 
- ### Custom Size
- 
- ```tsx
- import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
- 
- export function CustomSize() {
-   return (
-     <Avatar className="h-16 w-16">
-       <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-       <AvatarFallback>CN</AvatarFallback>
-     </Avatar>
-   );
- }
- ```
- 
- ### Avatar Group
- 
- ```tsx
- import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
- 
- export function AvatarGroup() {
-   return (
-     <div className="flex -space-x-2">
-       <Avatar className="border-background border-2">
-         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-         <AvatarFallback>CN</AvatarFallback>
-       </Avatar>
-       <Avatar className="border-background border-2">
-         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-         <AvatarFallback>JD</AvatarFallback>
-       </Avatar>
-       <Avatar className="border-background border-2">
-         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-         <AvatarFallback>MK</AvatarFallback>
-       </Avatar>
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Accessibility**: Provide `alt` text for `AvatarImage`.
- - **Styling**: Combine with borders/shadows via `className`.
- 
+# Avatar
+
+## Overview
+
+Circular user/avatar component with image and fallback. Accessible and easily styled.
+
+---
+
+## Props
+
+### Avatar (Root)
+
+| Prop        | Type              | Default      | Description                                   |
+| ----------- | ----------------- | ------------ | --------------------------------------------- |
+| `className` | `string`          | `""`         | Additional classes for size/border/layout.    |
+| `children`  | `React.ReactNode` | **required** | Typically `AvatarImage` and `AvatarFallback`. |
+
+### Subcomponents
+
+- `AvatarImage`: The image element.
+  - Props: `src`, `alt`, `className`.
+- `AvatarFallback`: Fallback content shown when the image fails or loads slowly.
+  - Props: `children` (e.g., initials), `className`.
+
+---
+
+## Behavior
+
+- **Shape**: Circular by default (`rounded-full`).
+- **Sizing**: Control via `className` (e.g., `h-16 w-16`).
+- **Fallback**: Displays initials or an icon when the image is unavailable.
+
+---
+
+## Examples
+
+### With Image
+
+```tsx
+import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
+
+export function WithImage() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  );
+}
+```
+
+### With Fallback
+
+```tsx
+import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
+
+export function WithFallback() {
+  return (
+    <Avatar>
+      <AvatarImage src="" alt="User" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  );
+}
+```
+
+### Custom Size
+
+```tsx
+import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
+
+export function CustomSize() {
+  return (
+    <Avatar className="h-16 w-16">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  );
+}
+```
+
+### Avatar Group
+
+```tsx
+import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";
+
+export function AvatarGroup() {
+  return (
+    <div className="flex -space-x-2">
+      <Avatar className="border-background border-2">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-background border-2">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-background border-2">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>MK</AvatarFallback>
+      </Avatar>
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Accessibility**: Provide `alt` text for `AvatarImage`.
+- **Styling**: Combine with borders/shadows via `className`.