xertica-ui 2.2.1 → 2.4.0

package/docs/components/select.md

@@ -1,144 +1,144 @@
-# Select
-
-## Overview
-
-A styled dropdown for selecting a single option from a list. Built on Radix UI, it provides a fully accessible combobox with keyboard navigation, portaled content, and proper ARIA semantics. Always use `<Select>` from `xertica-ui` — never use native `<select>`.
-
----
-
-## When to Use
-
-- Choosing a single value from a list of 5+ options
-- Role selection, category selection, status filters
-- Period selectors in analytics dashboards
-
-## When NOT to Use
-
-- Binary choices — use `<Switch>` or `<RadioGroup>` instead.
-- Multiple selection — use `<Checkbox>` groups.
-- Fewer than 4 options that should all be visible — use `<RadioGroup>`.
-
----
-
-## Anatomy
-
-```
-<Select>
-  <SelectTrigger>
-    <SelectValue placeholder="..." />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="...">Label</SelectItem>
-    <SelectItem value="...">Label</SelectItem>
-  </SelectContent>
-</Select>
-```
-
----
-
-## Props
-
-### Select
-
-| Prop            | Type                      | Description                |
-| --------------- | ------------------------- | -------------------------- |
-| `value`         | `string`                  | Controlled selected value  |
-| `defaultValue`  | `string`                  | Uncontrolled default value |
-| `onValueChange` | `(value: string) => void` | Change handler             |
-| `disabled`      | `boolean`                 | Disables the select        |
-
-### SelectTrigger
-
-| Prop          | Type                   | Default | Description                                                |
-| ------------- | ---------------------- | ------- | ---------------------------------------------------------- |
-| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`  | Size variant — matches Input sizing scale (h-8/h-10/h-12). |
-| `className`   | `string`               | —       | Add width or style overrides                               |
-| `placeholder` | `string`               | —       | Forwarded to `SelectValue`                                 |
-
-### SelectItem
-
-| Prop    | Type     | Required | Description      |
-| ------- | -------- | -------- | ---------------- |
-| `value` | `string` | **Yes**  | The option value |
-
----
-
-## Examples
-
-### Standalone
-
-```tsx
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'xertica-ui/ui';
-
-<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Select role" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="admin">Administrator</SelectItem>
-    <SelectItem value="editor">Editor</SelectItem>
-    <SelectItem value="viewer">Viewer</SelectItem>
-  </SelectContent>
-</Select>;
-```
-
-### Controlled
-
-```tsx
-const [role, setRole] = useState('editor');
-
-<Select value={role} onValueChange={setRole}>
-  <SelectTrigger className="w-[200px]">
-    <SelectValue />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="admin">Administrator</SelectItem>
-    <SelectItem value="editor">Editor</SelectItem>
-    <SelectItem value="viewer">Viewer</SelectItem>
-  </SelectContent>
-</Select>;
-```
-
-### Inside react-hook-form
-
-```tsx
-<FormField
-  control={form.control}
-  name="role"
-  render={({ field }) => (
-    <FormItem>
-      <FormLabel>Role</FormLabel>
-      <Select onValueChange={field.onChange} defaultValue={field.value}>
-        <FormControl>
-          <SelectTrigger>
-            <SelectValue placeholder="Select a role" />
-          </SelectTrigger>
-        </FormControl>
-        <SelectContent>
-          <SelectItem value="admin">Administrator</SelectItem>
-          <SelectItem value="editor">Editor</SelectItem>
-        </SelectContent>
-      </Select>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
----
-
-## AI Rules
-
-- **Never** use native `<select>` — always use the full `<Select>/<SelectTrigger>/<SelectContent>/<SelectItem>` composition.
-- **Sizing** — SelectTrigger defaults to `md` (h-10, 40px), matching Input's default. Use the same `size` prop across `Input`, `SelectTrigger`, `Textarea`, and `Search` to ensure consistent alignment in form rows.
-- When used inside a form, wrap `<SelectTrigger>` in `<FormControl>` — the `field` spread goes on the `<Select>` (`onValueChange={field.onChange}`), not on the trigger.
-- `SelectItem` requires a non-empty string `value` prop — never use empty strings or numbers.
-- To set a default selected option, use `defaultValue` on `<Select>` — not on `<SelectItem>`.
-
----
-
-## Related Components
-
-- [`Form`](./form.md)
-- [`RadioGroup`](./radio-group.md) — Alternative for small, always-visible option sets
-- [`Checkbox`](./checkbox.md) — For multi-select scenarios
+# Select
+
+## Overview
+
+A styled dropdown for selecting a single option from a list. Built on Radix UI, it provides a fully accessible combobox with keyboard navigation, portaled content, and proper ARIA semantics. Always use `<Select>` from `xertica-ui` — never use native `<select>`.
+
+---
+
+## When to Use
+
+- Choosing a single value from a list of 5+ options
+- Role selection, category selection, status filters
+- Period selectors in analytics dashboards
+
+## When NOT to Use
+
+- Binary choices — use `<Switch>` or `<RadioGroup>` instead.
+- Multiple selection — use `<Checkbox>` groups.
+- Fewer than 4 options that should all be visible — use `<RadioGroup>`.
+
+---
+
+## Anatomy
+
+```
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="..." />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="...">Label</SelectItem>
+    <SelectItem value="...">Label</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+---
+
+## Props
+
+### Select
+
+| Prop            | Type                      | Description                |
+| --------------- | ------------------------- | -------------------------- |
+| `value`         | `string`                  | Controlled selected value  |
+| `defaultValue`  | `string`                  | Uncontrolled default value |
+| `onValueChange` | `(value: string) => void` | Change handler             |
+| `disabled`      | `boolean`                 | Disables the select        |
+
+### SelectTrigger
+
+| Prop          | Type                   | Default | Description                                                |
+| ------------- | ---------------------- | ------- | ---------------------------------------------------------- |
+| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`  | Size variant — matches Input sizing scale (h-8/h-10/h-12). |
+| `className`   | `string`               | —       | Add width or style overrides                               |
+| `placeholder` | `string`               | —       | Forwarded to `SelectValue`                                 |
+
+### SelectItem
+
+| Prop    | Type     | Required | Description      |
+| ------- | -------- | -------- | ---------------- |
+| `value` | `string` | **Yes**  | The option value |
+
+---
+
+## Examples
+
+### Standalone
+
+```tsx
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'xertica-ui/ui';
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select role" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="admin">Administrator</SelectItem>
+    <SelectItem value="editor">Editor</SelectItem>
+    <SelectItem value="viewer">Viewer</SelectItem>
+  </SelectContent>
+</Select>;
+```
+
+### Controlled
+
+```tsx
+const [role, setRole] = useState('editor');
+
+<Select value={role} onValueChange={setRole}>
+  <SelectTrigger className="w-[200px]">
+    <SelectValue />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="admin">Administrator</SelectItem>
+    <SelectItem value="editor">Editor</SelectItem>
+    <SelectItem value="viewer">Viewer</SelectItem>
+  </SelectContent>
+</Select>;
+```
+
+### Inside react-hook-form
+
+```tsx
+<FormField
+  control={form.control}
+  name="role"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Role</FormLabel>
+      <Select onValueChange={field.onChange} defaultValue={field.value}>
+        <FormControl>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a role" />
+          </SelectTrigger>
+        </FormControl>
+        <SelectContent>
+          <SelectItem value="admin">Administrator</SelectItem>
+          <SelectItem value="editor">Editor</SelectItem>
+        </SelectContent>
+      </Select>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## AI Rules
+
+- **Never** use native `<select>` — always use the full `<Select>/<SelectTrigger>/<SelectContent>/<SelectItem>` composition.
+- **Sizing** — SelectTrigger defaults to `md` (h-10, 40px), matching Input's default. Use the same `size` prop across `Input`, `SelectTrigger`, `Textarea`, and `Search` to ensure consistent alignment in form rows.
+- When used inside a form, wrap `<SelectTrigger>` in `<FormControl>` — the `field` spread goes on the `<Select>` (`onValueChange={field.onChange}`), not on the trigger.
+- `SelectItem` requires a non-empty string `value` prop — never use empty strings or numbers.
+- To set a default selected option, use `defaultValue` on `<Select>` — not on `<SelectItem>`.
+
+---
+
+## Related Components
+
+- [`Form`](./form.md)
+- [`RadioGroup`](./radio-group.md) — Alternative for small, always-visible option sets
+- [`Checkbox`](./checkbox.md) — For multi-select scenarios

package/docs/components/separator.md

@@ -1,58 +1,58 @@
-# Separator
-
-## Overview
-
-A thin horizontal (or vertical) line that visually divides sections of content. Primarily decorative but semantically meaningful as an `<hr>` element. Used to create visual breathing room between logically distinct sections.
-
----
-
-## When to Use
-
-- Between major content sections within a page
-- Between action groups in menus or footers
-- Dividing the header from the body in a panel or sidebar
-
----
-
-## Props
-
-| Prop          | Type                         | Default        | Description                                 |
-| ------------- | ---------------------------- | -------------- | ------------------------------------------- |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Line direction                              |
-| `decorative`  | `boolean`                    | `true`         | When `true`, hidden from accessibility tree |
-| `className`   | `string`                     | —              | Additional CSS classes                      |
-
----
-
-## Examples
-
-```tsx
-import { Separator } from 'xertica-ui/ui';
-
-<div>
-  <h3>Section A</h3>
-  <p>Content</p>
-</div>
-<Separator className="my-6" />
-<div>
-  <h3>Section B</h3>
-</div>
-```
-
-### Vertical (in a toolbar)
-
-```tsx
-<div className="flex items-center gap-2">
-  <Button variant="ghost">Bold</Button>
-  <Separator orientation="vertical" className="h-6" />
-  <Button variant="ghost">Italic</Button>
-</div>
-```
-
----
-
-## AI Rules
-
-- Add `className="my-6"` or `my-8` for proper vertical spacing between sections.
-- Use `orientation="vertical"` in flex toolbars — remember to set a fixed `h-*` class for the height.
-- `decorative` should remain `true` (default) unless the separator conveys structural meaning for screen readers.
+# Separator
+
+## Overview
+
+A thin horizontal (or vertical) line that visually divides sections of content. Primarily decorative but semantically meaningful as an `<hr>` element. Used to create visual breathing room between logically distinct sections.
+
+---
+
+## When to Use
+
+- Between major content sections within a page
+- Between action groups in menus or footers
+- Dividing the header from the body in a panel or sidebar
+
+---
+
+## Props
+
+| Prop          | Type                         | Default        | Description                                 |
+| ------------- | ---------------------------- | -------------- | ------------------------------------------- |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Line direction                              |
+| `decorative`  | `boolean`                    | `true`         | When `true`, hidden from accessibility tree |
+| `className`   | `string`                     | —              | Additional CSS classes                      |
+
+---
+
+## Examples
+
+```tsx
+import { Separator } from 'xertica-ui/ui';
+
+<div>
+  <h3>Section A</h3>
+  <p>Content</p>
+</div>
+<Separator className="my-6" />
+<div>
+  <h3>Section B</h3>
+</div>
+```
+
+### Vertical (in a toolbar)
+
+```tsx
+<div className="flex items-center gap-2">
+  <Button variant="ghost">Bold</Button>
+  <Separator orientation="vertical" className="h-6" />
+  <Button variant="ghost">Italic</Button>
+</div>
+```
+
+---
+
+## AI Rules
+
+- Add `className="my-6"` or `my-8` for proper vertical spacing between sections.
+- Use `orientation="vertical"` in flex toolbars — remember to set a fixed `h-*` class for the height.
+- `decorative` should remain `true` (default) unless the separator conveys structural meaning for screen readers.

package/docs/components/sheet.md

@@ -1,122 +1,122 @@
-# Sheet
-
-## Overview
-
-An edge-anchored slide-in panel that overlays the current page from one side — top, right, bottom, or left. Like `Dialog` but more suitable for forms or detail views that benefit from more vertical space, or for secondary navigation and controls on mobile.
-
----
-
-## When to Use
-
-- Wide create/edit forms that need more room than a Dialog
-- Detail/preview panels for selected records (record details sidebar)
-- Filter panels that slide in from the right
-- Mobile navigation drawers (slide from left)
-
-## When NOT to Use
-
-- Simple short confirmations — use `Dialog` instead.
-- Destructive confirmations — use `AlertDialog` instead.
-- Mobile bottom panels — use `Drawer` instead.
-
----
-
-## Anatomy
-
-```
-<Sheet>
-  <SheetTrigger asChild>
-    <Button />
-  </SheetTrigger>
-  <SheetContent side="right">
-    <SheetHeader>
-      <SheetTitle />
-      <SheetDescription />
-    </SheetHeader>
-    {/* Content */}
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button variant="ghost">Cancel</Button>
-      </SheetClose>
-      <Button>Save</Button>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>
-```
-
----
-
-## Props
-
-### Sheet
-
-| Prop           | Type                      | Description           |
-| -------------- | ------------------------- | --------------------- |
-| `open`         | `boolean`                 | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | State handler         |
-
-### SheetContent
-
-| Prop        | Type                                     | Default   | Description                          |
-| ----------- | ---------------------------------------- | --------- | ------------------------------------ |
-| `side`      | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Which edge the panel slides from     |
-| `className` | `string`                                 | —         | Width override (e.g., `sm:max-w-md`) |
-
----
-
-## Examples
-
-### Edit Record Side Panel
-
-```tsx
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  SheetClose,
-  Button,
-} from 'xertica-ui/ui';
-
-<Sheet>
-  <SheetTrigger asChild>
-    <Button variant="ghost" size="sm">
-      Edit
-    </Button>
-  </SheetTrigger>
-  <SheetContent className="sm:max-w-md">
-    <SheetHeader>
-      <SheetTitle>Edit Member</SheetTitle>
-      <SheetDescription>Update member information below.</SheetDescription>
-    </SheetHeader>
-    <div className="py-6">{/* Form fields */}</div>
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button variant="ghost">Cancel</Button>
-      </SheetClose>
-      <Button onClick={handleSave}>Save Changes</Button>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>;
-```
-
----
-
-## AI Rules
-
-- `SheetTitle` is **required** for accessibility.
-- Use `side="right"` for record edit panels and filter drawers. Use `side="left"` for navigation drawers.
-- Override width with `className="sm:max-w-md"` or `sm:max-w-lg` on `<SheetContent>` — the default is narrow.
-- Use `<SheetClose asChild>` wrapping a `<Button>` for the cancel action — this auto-closes the sheet.
-- Always use `<SheetTrigger asChild>` wrapping a `<Button>` — never a raw button element.
-
----
-
-## Related Components
-
-- [`Dialog`](./dialog.md) — Centered modal alternative
-- [`Drawer`](./drawer.md) — Mobile bottom panel
-- [`Form`](./form.md) — Commonly rendered inside Sheet
+# Sheet
+
+## Overview
+
+An edge-anchored slide-in panel that overlays the current page from one side — top, right, bottom, or left. Like `Dialog` but more suitable for forms or detail views that benefit from more vertical space, or for secondary navigation and controls on mobile.
+
+---
+
+## When to Use
+
+- Wide create/edit forms that need more room than a Dialog
+- Detail/preview panels for selected records (record details sidebar)
+- Filter panels that slide in from the right
+- Mobile navigation drawers (slide from left)
+
+## When NOT to Use
+
+- Simple short confirmations — use `Dialog` instead.
+- Destructive confirmations — use `AlertDialog` instead.
+- Mobile bottom panels — use `Drawer` instead.
+
+---
+
+## Anatomy
+
+```
+<Sheet>
+  <SheetTrigger asChild>
+    <Button />
+  </SheetTrigger>
+  <SheetContent side="right">
+    <SheetHeader>
+      <SheetTitle />
+      <SheetDescription />
+    </SheetHeader>
+    {/* Content */}
+    <SheetFooter>
+      <SheetClose asChild>
+        <Button variant="ghost">Cancel</Button>
+      </SheetClose>
+      <Button>Save</Button>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+```
+
+---
+
+## Props
+
+### Sheet
+
+| Prop           | Type                      | Description           |
+| -------------- | ------------------------- | --------------------- |
+| `open`         | `boolean`                 | Controlled open state |
+| `onOpenChange` | `(open: boolean) => void` | State handler         |
+
+### SheetContent
+
+| Prop        | Type                                     | Default   | Description                          |
+| ----------- | ---------------------------------------- | --------- | ------------------------------------ |
+| `side`      | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Which edge the panel slides from     |
+| `className` | `string`                                 | —         | Width override (e.g., `sm:max-w-md`) |
+
+---
+
+## Examples
+
+### Edit Record Side Panel
+
+```tsx
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetClose,
+  Button,
+} from 'xertica-ui/ui';
+
+<Sheet>
+  <SheetTrigger asChild>
+    <Button variant="ghost" size="sm">
+      Edit
+    </Button>
+  </SheetTrigger>
+  <SheetContent className="sm:max-w-md">
+    <SheetHeader>
+      <SheetTitle>Edit Member</SheetTitle>
+      <SheetDescription>Update member information below.</SheetDescription>
+    </SheetHeader>
+    <div className="py-6">{/* Form fields */}</div>
+    <SheetFooter>
+      <SheetClose asChild>
+        <Button variant="ghost">Cancel</Button>
+      </SheetClose>
+      <Button onClick={handleSave}>Save Changes</Button>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>;
+```
+
+---
+
+## AI Rules
+
+- `SheetTitle` is **required** for accessibility.
+- Use `side="right"` for record edit panels and filter drawers. Use `side="left"` for navigation drawers.
+- Override width with `className="sm:max-w-md"` or `sm:max-w-lg` on `<SheetContent>` — the default is narrow.
+- Use `<SheetClose asChild>` wrapping a `<Button>` for the cancel action — this auto-closes the sheet.
+- Always use `<SheetTrigger asChild>` wrapping a `<Button>` — never a raw button element.
+
+---
+
+## Related Components
+
+- [`Dialog`](./dialog.md) — Centered modal alternative
+- [`Drawer`](./drawer.md) — Mobile bottom panel
+- [`Form`](./form.md) — Commonly rendered inside Sheet