xertica-ui 2.2.1 → 2.4.0

package/docs/components/checkbox.md

@@ -1,88 +1,88 @@
-# Checkbox
-
-## Overview
-
-A binary toggle that lets users select or deselect a single option, or mark multiple independent options in a list. Built on Radix UI with accessible keyboard behavior and ARIA roles.
-
----
-
-## When to Use
-
-- Multi-select option lists (permissions, feature flags, filter tags)
-- "Agree to terms" consent fields
-- Row selection in tables
-- Individual boolean settings
-
-## When NOT to Use
-
-- Mutually exclusive choices (only one can be true) — use `<RadioGroup>` instead.
-- A single prominent on/off toggle — use `<Switch>` instead.
-
----
-
-## Props
-
-| Prop              | Type                         | Default | Required | Description                                       |
-| ----------------- | ---------------------------- | ------- | -------- | ------------------------------------------------- |
-| `id`              | `string`                     | —       | No       | Associates with `<Label htmlFor="...">`           |
-| `size`            | `'sm' \| 'md' \| 'lg'`       | `'md'`  | No       | Size variant controlling the checkbox dimensions. |
-| `checked`         | `boolean`                    | —       | No       | Controlled checked state                          |
-| `defaultChecked`  | `boolean`                    | `false` | No       | Uncontrolled initial state                        |
-| `onCheckedChange` | `(checked: boolean) => void` | —       | No       | Change handler                                    |
-| `disabled`        | `boolean`                    | `false` | No       | Disables interaction                              |
-| `className`       | `string`                     | —       | No       | Additional CSS classes                            |
-
----
-
-## Examples
-
-### Standalone with Label
-
-```tsx
-import { Checkbox, Label } from 'xertica-ui/ui';
-
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">
-    I agree to the{' '}
-    <a href="/terms" className="underline">
-      terms of service
-    </a>
-  </Label>
-</div>;
-```
-
-### Inside react-hook-form
-
-```tsx
-<FormField
-  control={form.control}
-  name="acceptTerms"
-  render={({ field }) => (
-    <FormItem className="flex items-center space-x-2">
-      <FormControl>
-        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
-      </FormControl>
-      <FormLabel>Accept Terms</FormLabel>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
----
-
-## AI Rules
-
-- **Do not spread `{...field}`** on `<Checkbox>` — use `checked={field.value}` and `onCheckedChange={field.onChange}` explicitly.
-- **Sizing** — Matches the standard form sizing scale (`sm`, `md`, `lg`). Ensure the size matches the surrounding inputs and labels.
-- Always pair with a `<Label>` linked via `htmlFor` for accessibility.
-- For mutually exclusive choices, use `<RadioGroup>` instead.
-
----
-
-## Related Components
-
-- [`RadioGroup`](./radio-group.md) — For single-choice selections
-- [`Switch`](./switch.md) — For prominent on/off toggles
-- [`Form`](./form.md)
+# Checkbox
+
+## Overview
+
+A binary toggle that lets users select or deselect a single option, or mark multiple independent options in a list. Built on Radix UI with accessible keyboard behavior and ARIA roles.
+
+---
+
+## When to Use
+
+- Multi-select option lists (permissions, feature flags, filter tags)
+- "Agree to terms" consent fields
+- Row selection in tables
+- Individual boolean settings
+
+## When NOT to Use
+
+- Mutually exclusive choices (only one can be true) — use `<RadioGroup>` instead.
+- A single prominent on/off toggle — use `<Switch>` instead.
+
+---
+
+## Props
+
+| Prop              | Type                         | Default | Required | Description                                       |
+| ----------------- | ---------------------------- | ------- | -------- | ------------------------------------------------- |
+| `id`              | `string`                     | —       | No       | Associates with `<Label htmlFor="...">`           |
+| `size`            | `'sm' \| 'md' \| 'lg'`       | `'md'`  | No       | Size variant controlling the checkbox dimensions. |
+| `checked`         | `boolean`                    | —       | No       | Controlled checked state                          |
+| `defaultChecked`  | `boolean`                    | `false` | No       | Uncontrolled initial state                        |
+| `onCheckedChange` | `(checked: boolean) => void` | —       | No       | Change handler                                    |
+| `disabled`        | `boolean`                    | `false` | No       | Disables interaction                              |
+| `className`       | `string`                     | —       | No       | Additional CSS classes                            |
+
+---
+
+## Examples
+
+### Standalone with Label
+
+```tsx
+import { Checkbox, Label } from 'xertica-ui/ui';
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">
+    I agree to the{' '}
+    <a href="/terms" className="underline">
+      terms of service
+    </a>
+  </Label>
+</div>;
+```
+
+### Inside react-hook-form
+
+```tsx
+<FormField
+  control={form.control}
+  name="acceptTerms"
+  render={({ field }) => (
+    <FormItem className="flex items-center space-x-2">
+      <FormControl>
+        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+      </FormControl>
+      <FormLabel>Accept Terms</FormLabel>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## AI Rules
+
+- **Do not spread `{...field}`** on `<Checkbox>` — use `checked={field.value}` and `onCheckedChange={field.onChange}` explicitly.
+- **Sizing** — Matches the standard form sizing scale (`sm`, `md`, `lg`). Ensure the size matches the surrounding inputs and labels.
+- Always pair with a `<Label>` linked via `htmlFor` for accessibility.
+- For mutually exclusive choices, use `<RadioGroup>` instead.
+
+---
+
+## Related Components
+
+- [`RadioGroup`](./radio-group.md) — For single-choice selections
+- [`Switch`](./switch.md) — For prominent on/off toggles
+- [`Form`](./form.md)

package/docs/components/code-block.md

@@ -1,105 +1,105 @@
-# CodeBlock
-
-A syntax-highlighted code display component with a one-click copy button. Designed for use inside AI chat messages and documentation panels.
-
----
-
-## Import
-
-```tsx
-import { CodeBlock } from 'xertica-ui/assistant';
-```
-
----
-
-## Basic Usage
-
-```tsx
-<CodeBlock
-  language="typescript"
-  code={`function greet(name: string): string {
-  return \`Hello, \${name}!\`;
-}`}
-/>
-```
-
----
-
-## Props
-
-| Prop        | Type     | Default      | Description                                                                             |
-| ----------- | -------- | ------------ | --------------------------------------------------------------------------------------- |
-| `code`      | `string` | _(required)_ | The source code string to display                                                       |
-| `language`  | `string` | `'text'`     | Language identifier for syntax highlighting (e.g. `'typescript'`, `'python'`, `'bash'`) |
-| `className` | `string` | —            | Additional CSS classes for the outer container                                          |
-
----
-
-## Features
-
-### Syntax Highlighting
-
-Uses `react-syntax-highlighter` (Prism engine) with a custom theme built on Xertica UI design tokens:
-
-- **Keywords / operators**: `var(--chart-1)` (primary accent)
-- **Strings**: `var(--chart-2)` (green-toned)
-- **Numbers / booleans**: `var(--chart-5)` (amber-toned)
-- **Properties / attributes**: `var(--chart-4)` (blue-toned)
-- **Comments**: `var(--muted-foreground)` (subdued)
-- **Background**: transparent (inherits from parent card)
-
-The theme automatically adapts to light and dark mode via CSS custom properties.
-
-### Copy Button
-
-A copy-to-clipboard button appears in the top-right corner of the code block. After clicking:
-
-- The icon changes from `Copy` to `Check` for 2 seconds
-- The code string is written to the clipboard via the Clipboard API
-
-### Supported Languages
-
-Any language supported by Prism.js is valid. Common examples:
-
-```
-typescript  javascript  tsx  jsx
-python      bash        sql  json
-css         html        yaml markdown
-```
-
----
-
-## Usage in AI Context
-
-`CodeBlock` is used internally by `XerticaAssistant` to render code snippets returned by the AI. When the assistant response contains a fenced code block (` ```language `), it is automatically rendered as a `CodeBlock`.
-
-To render code blocks in a standalone context:
-
-```tsx
-import { CodeBlock } from 'xertica-ui/assistant';
-
-function AiResponse({ content }: { content: string }) {
-  // Parse code blocks from markdown and render them
-  return <CodeBlock language="python" code="print('Hello from AI')" />;
-}
-```
-
----
-
-## Design Notes
-
-- The component uses `font-mono` (CSS variable `--font-mono`) for the code font
-- Font size is fixed at `0.875rem` (14px) for readability in narrow panels
-- Line height is `1.6` for comfortable reading
-- Tab size is 2 spaces
-- Horizontal overflow scrolls within the block (no line wrapping)
-
----
-
-## AI Rules
-
-> [!IMPORTANT]
->
-> - **Always provide `language`**: Without it, syntax highlighting falls back to plain text. Use the correct language identifier (e.g. `'typescript'` not `'ts'`, `'javascript'` not `'js'`).
-> - **Do not wrap in `<pre>` or `<code>`**: `CodeBlock` renders its own `<pre>` via `react-syntax-highlighter`. Wrapping it will break the layout.
-> - **Optimized for narrow panels**: This component is designed for the AI Assistant sidebar (~400px). For full-page code display, consider adding `className="w-full"`.
+# CodeBlock
+
+A syntax-highlighted code display component with a one-click copy button. Designed for use inside AI chat messages and documentation panels.
+
+---
+
+## Import
+
+```tsx
+import { CodeBlock } from 'xertica-ui/assistant';
+```
+
+---
+
+## Basic Usage
+
+```tsx
+<CodeBlock
+  language="typescript"
+  code={`function greet(name: string): string {
+  return \`Hello, \${name}!\`;
+}`}
+/>
+```
+
+---
+
+## Props
+
+| Prop        | Type     | Default      | Description                                                                             |
+| ----------- | -------- | ------------ | --------------------------------------------------------------------------------------- |
+| `code`      | `string` | _(required)_ | The source code string to display                                                       |
+| `language`  | `string` | `'text'`     | Language identifier for syntax highlighting (e.g. `'typescript'`, `'python'`, `'bash'`) |
+| `className` | `string` | —            | Additional CSS classes for the outer container                                          |
+
+---
+
+## Features
+
+### Syntax Highlighting
+
+Uses `react-syntax-highlighter` (Prism engine) with a custom theme built on Xertica UI design tokens:
+
+- **Keywords / operators**: `var(--chart-1)` (primary accent)
+- **Strings**: `var(--chart-2)` (green-toned)
+- **Numbers / booleans**: `var(--chart-5)` (amber-toned)
+- **Properties / attributes**: `var(--chart-4)` (blue-toned)
+- **Comments**: `var(--muted-foreground)` (subdued)
+- **Background**: transparent (inherits from parent card)
+
+The theme automatically adapts to light and dark mode via CSS custom properties.
+
+### Copy Button
+
+A copy-to-clipboard button appears in the top-right corner of the code block. After clicking:
+
+- The icon changes from `Copy` to `Check` for 2 seconds
+- The code string is written to the clipboard via the Clipboard API
+
+### Supported Languages
+
+Any language supported by Prism.js is valid. Common examples:
+
+```
+typescript  javascript  tsx  jsx
+python      bash        sql  json
+css         html        yaml markdown
+```
+
+---
+
+## Usage in AI Context
+
+`CodeBlock` is used internally by `XerticaAssistant` to render code snippets returned by the AI. When the assistant response contains a fenced code block (` ```language `), it is automatically rendered as a `CodeBlock`.
+
+To render code blocks in a standalone context:
+
+```tsx
+import { CodeBlock } from 'xertica-ui/assistant';
+
+function AiResponse({ content }: { content: string }) {
+  // Parse code blocks from markdown and render them
+  return <CodeBlock language="python" code="print('Hello from AI')" />;
+}
+```
+
+---
+
+## Design Notes
+
+- The component uses `font-mono` (CSS variable `--font-mono`) for the code font
+- Font size is fixed at `0.875rem` (14px) for readability in narrow panels
+- Line height is `1.6` for comfortable reading
+- Tab size is 2 spaces
+- Horizontal overflow scrolls within the block (no line wrapping)
+
+---
+
+## AI Rules
+
+> [!IMPORTANT]
+>
+> - **Always provide `language`**: Without it, syntax highlighting falls back to plain text. Use the correct language identifier (e.g. `'typescript'` not `'ts'`, `'javascript'` not `'js'`).
+> - **Do not wrap in `<pre>` or `<code>`**: `CodeBlock` renders its own `<pre>` via `react-syntax-highlighter`. Wrapping it will break the layout.
+> - **Optimized for narrow panels**: This component is designed for the AI Assistant sidebar (~400px). For full-page code display, consider adding `className="w-full"`.

package/docs/components/collapsible.md

@@ -1,86 +1,86 @@
-# Collapsible
-
-## Overview
-
-A single expandable/collapsible content section with a trigger header. Unlike `<Accordion>`, `Collapsible` is a standalone element — it has no sibling items and no managed "only one open" behavior.
-
----
-
-## When to Use
-
-- A single section of additional details that is hidden by default
-- "Show more" / "Show less" controls
-- Expandable code snippets or technical details
-- A configuration section that most users skip
-
-## When NOT to Use
-
-- Multiple related collapsible sections — use `<Accordion>` instead.
-
----
-
-## Anatomy
-
-```
-<Collapsible>
-  <CollapsibleTrigger asChild>
-    <Button />
-  </CollapsibleTrigger>
-  <CollapsibleContent>
-    {/* Hidden content */}
-  </CollapsibleContent>
-</Collapsible>
-```
-
----
-
-## Props
-
-### Collapsible
-
-| Prop           | Type                      | Default | Description           |
-| -------------- | ------------------------- | ------- | --------------------- |
-| `open`         | `boolean`                 | —       | Controlled open state |
-| `defaultOpen`  | `boolean`                 | `false` | Uncontrolled default  |
-| `onOpenChange` | `(open: boolean) => void` | —       | Change handler        |
-| `disabled`     | `boolean`                 | `false` | Prevents toggling     |
-
----
-
-## Examples
-
-```tsx
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button } from 'xertica-ui/ui';
-import { ChevronsUpDown } from 'lucide-react';
-import { useState } from 'react';
-
-const [isOpen, setIsOpen] = useState(false);
-
-<Collapsible open={isOpen} onOpenChange={setIsOpen}>
-  <div className="flex items-center justify-between">
-    <h4 className="text-sm font-semibold">Advanced Settings</h4>
-    <CollapsibleTrigger asChild>
-      <Button variant="ghost" size="icon">
-        <ChevronsUpDown className="size-4" />
-      </Button>
-    </CollapsibleTrigger>
-  </div>
-  <CollapsibleContent className="space-y-2 mt-4">
-    <p className="text-sm text-muted-foreground">Advanced configuration options appear here.</p>
-  </CollapsibleContent>
-</Collapsible>;
-```
-
----
-
-## AI Rules
-
-- For multiple related collapsible sections, use `<Accordion>` instead.
-- `<CollapsibleTrigger asChild>` is required when wrapping a `<Button>`.
-- `CollapsibleContent` is animated by default — do not add custom height transitions.
-
----
-
-## Related Components
-
-- [`Accordion`](./accordion.md) — For multiple related collapsible sections
+# Collapsible
+
+## Overview
+
+A single expandable/collapsible content section with a trigger header. Unlike `<Accordion>`, `Collapsible` is a standalone element — it has no sibling items and no managed "only one open" behavior.
+
+---
+
+## When to Use
+
+- A single section of additional details that is hidden by default
+- "Show more" / "Show less" controls
+- Expandable code snippets or technical details
+- A configuration section that most users skip
+
+## When NOT to Use
+
+- Multiple related collapsible sections — use `<Accordion>` instead.
+
+---
+
+## Anatomy
+
+```
+<Collapsible>
+  <CollapsibleTrigger asChild>
+    <Button />
+  </CollapsibleTrigger>
+  <CollapsibleContent>
+    {/* Hidden content */}
+  </CollapsibleContent>
+</Collapsible>
+```
+
+---
+
+## Props
+
+### Collapsible
+
+| Prop           | Type                      | Default | Description           |
+| -------------- | ------------------------- | ------- | --------------------- |
+| `open`         | `boolean`                 | —       | Controlled open state |
+| `defaultOpen`  | `boolean`                 | `false` | Uncontrolled default  |
+| `onOpenChange` | `(open: boolean) => void` | —       | Change handler        |
+| `disabled`     | `boolean`                 | `false` | Prevents toggling     |
+
+---
+
+## Examples
+
+```tsx
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button } from 'xertica-ui/ui';
+import { ChevronsUpDown } from 'lucide-react';
+import { useState } from 'react';
+
+const [isOpen, setIsOpen] = useState(false);
+
+<Collapsible open={isOpen} onOpenChange={setIsOpen}>
+  <div className="flex items-center justify-between">
+    <h4 className="text-sm font-semibold">Advanced Settings</h4>
+    <CollapsibleTrigger asChild>
+      <Button variant="ghost" size="icon">
+        <ChevronsUpDown className="size-4" />
+      </Button>
+    </CollapsibleTrigger>
+  </div>
+  <CollapsibleContent className="space-y-2 mt-4">
+    <p className="text-sm text-muted-foreground">Advanced configuration options appear here.</p>
+  </CollapsibleContent>
+</Collapsible>;
+```
+
+---
+
+## AI Rules
+
+- For multiple related collapsible sections, use `<Accordion>` instead.
+- `<CollapsibleTrigger asChild>` is required when wrapping a `<Button>`.
+- `CollapsibleContent` is animated by default — do not add custom height transitions.
+
+---
+
+## Related Components
+
+- [`Accordion`](./accordion.md) — For multiple related collapsible sections