xertica-ui 2.2.1 → 2.4.0

package/docs/components/radio-group.md

@@ -1,133 +1,133 @@
-# RadioGroup
-
-## Overview
-
-A set of mutually exclusive options where selecting one automatically deselects all others. Built on Radix UI with full keyboard navigation (arrow keys cycle through options). Use when only one choice from a defined set is valid.
-
----
-
-## When to Use
-
-- Mutually exclusive configuration options (2–6 items)
-- Plan selection (Basic / Pro / Enterprise)
-- Response type selection in forms
-- Gender, salutation, or category selectors when options are few and fixed
-
-## When NOT to Use
-
-- More than 6 options — use `<Select>` instead.
-- Multiple simultaneous selections — use `<Checkbox>` instead.
-
----
-
-## Anatomy
-
-```
-<RadioGroup>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-a" id="option-a" />
-    <Label htmlFor="option-a">Option A</Label>
-  </div>
-</RadioGroup>
-```
-
----
-
-## Props
-
-### RadioGroup
-
-| Prop            | Type                         | Default      | Description                |
-| --------------- | ---------------------------- | ------------ | -------------------------- |
-| `value`         | `string`                     | —            | Controlled selected value  |
-| `defaultValue`  | `string`                     | —            | Uncontrolled initial value |
-| `onValueChange` | `(value: string) => void`    | —            | Change handler             |
-| `disabled`      | `boolean`                    | `false`      | Disables all items         |
-| `orientation`   | `'horizontal' \| 'vertical'` | `'vertical'` | Layout direction           |
-
-### RadioGroupItem
-
-| Prop       | Type                   | Required | Default | Description                                           |
-| ---------- | ---------------------- | -------- | ------- | ----------------------------------------------------- |
-| `value`    | `string`               | **Yes**  | —       | The option value                                      |
-| `id`       | `string`               | **Yes**  | —       | Associates with `<Label htmlFor="...">`               |
-| `size`     | `'sm' \| 'md' \| 'lg'` | No       | `'md'`  | Size variant controlling the radio circle dimensions. |
-| `disabled` | `boolean`              | No       | `false` | Disables this specific item                           |
-
----
-
-## Examples
-
-### Vertical List
-
-```tsx
-import { RadioGroup, RadioGroupItem, Label } from 'xertica-ui/ui';
-
-<RadioGroup defaultValue="editor">
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="admin" id="admin" />
-    <Label htmlFor="admin">Administrator</Label>
-  </div>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="editor" id="editor" />
-    <Label htmlFor="editor">Editor</Label>
-  </div>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="viewer" id="viewer" />
-    <Label htmlFor="viewer">Viewer</Label>
-  </div>
-</RadioGroup>;
-```
-
-### Inside react-hook-form
-
-```tsx
-<FormField
-  control={form.control}
-  name="role"
-  render={({ field }) => (
-    <FormItem>
-      <FormLabel>Role</FormLabel>
-      <FormControl>
-        <RadioGroup
-          onValueChange={field.onChange}
-          defaultValue={field.value}
-          className="flex flex-col space-y-1"
-        >
-          <FormItem className="flex items-center space-x-2 space-y-0">
-            <FormControl>
-              <RadioGroupItem value="admin" />
-            </FormControl>
-            <FormLabel>Administrator</FormLabel>
-          </FormItem>
-          <FormItem className="flex items-center space-x-2 space-y-0">
-            <FormControl>
-              <RadioGroupItem value="editor" />
-            </FormControl>
-            <FormLabel>Editor</FormLabel>
-          </FormItem>
-        </RadioGroup>
-      </FormControl>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
----
-
-## AI Rules
-
-- Each `RadioGroupItem` requires both `value` and `id`.
-- **Sizing** — `RadioGroupItem` supports `sm`, `md`, and `lg`. Ensure the size matches the associated `Label` size.
-- The `Label` `htmlFor` must match the `RadioGroupItem` `id`.
-- In forms, use `onValueChange={field.onChange}` and `defaultValue={field.value}` — **not** `{...field}`.
-- For more than 6 options, switch to `<Select>` instead.
-
----
-
-## Related Components
-
-- [`Checkbox`](./checkbox.md) — For multi-select lists
-- [`Select`](./select.md) — For large option sets
-- [`Form`](./form.md)
+# RadioGroup
+
+## Overview
+
+A set of mutually exclusive options where selecting one automatically deselects all others. Built on Radix UI with full keyboard navigation (arrow keys cycle through options). Use when only one choice from a defined set is valid.
+
+---
+
+## When to Use
+
+- Mutually exclusive configuration options (2–6 items)
+- Plan selection (Basic / Pro / Enterprise)
+- Response type selection in forms
+- Gender, salutation, or category selectors when options are few and fixed
+
+## When NOT to Use
+
+- More than 6 options — use `<Select>` instead.
+- Multiple simultaneous selections — use `<Checkbox>` instead.
+
+---
+
+## Anatomy
+
+```
+<RadioGroup>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-a" id="option-a" />
+    <Label htmlFor="option-a">Option A</Label>
+  </div>
+</RadioGroup>
+```
+
+---
+
+## Props
+
+### RadioGroup
+
+| Prop            | Type                         | Default      | Description                |
+| --------------- | ---------------------------- | ------------ | -------------------------- |
+| `value`         | `string`                     | —            | Controlled selected value  |
+| `defaultValue`  | `string`                     | —            | Uncontrolled initial value |
+| `onValueChange` | `(value: string) => void`    | —            | Change handler             |
+| `disabled`      | `boolean`                    | `false`      | Disables all items         |
+| `orientation`   | `'horizontal' \| 'vertical'` | `'vertical'` | Layout direction           |
+
+### RadioGroupItem
+
+| Prop       | Type                   | Required | Default | Description                                           |
+| ---------- | ---------------------- | -------- | ------- | ----------------------------------------------------- |
+| `value`    | `string`               | **Yes**  | —       | The option value                                      |
+| `id`       | `string`               | **Yes**  | —       | Associates with `<Label htmlFor="...">`               |
+| `size`     | `'sm' \| 'md' \| 'lg'` | No       | `'md'`  | Size variant controlling the radio circle dimensions. |
+| `disabled` | `boolean`              | No       | `false` | Disables this specific item                           |
+
+---
+
+## Examples
+
+### Vertical List
+
+```tsx
+import { RadioGroup, RadioGroupItem, Label } from 'xertica-ui/ui';
+
+<RadioGroup defaultValue="editor">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="admin" id="admin" />
+    <Label htmlFor="admin">Administrator</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="editor" id="editor" />
+    <Label htmlFor="editor">Editor</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="viewer" id="viewer" />
+    <Label htmlFor="viewer">Viewer</Label>
+  </div>
+</RadioGroup>;
+```
+
+### Inside react-hook-form
+
+```tsx
+<FormField
+  control={form.control}
+  name="role"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Role</FormLabel>
+      <FormControl>
+        <RadioGroup
+          onValueChange={field.onChange}
+          defaultValue={field.value}
+          className="flex flex-col space-y-1"
+        >
+          <FormItem className="flex items-center space-x-2 space-y-0">
+            <FormControl>
+              <RadioGroupItem value="admin" />
+            </FormControl>
+            <FormLabel>Administrator</FormLabel>
+          </FormItem>
+          <FormItem className="flex items-center space-x-2 space-y-0">
+            <FormControl>
+              <RadioGroupItem value="editor" />
+            </FormControl>
+            <FormLabel>Editor</FormLabel>
+          </FormItem>
+        </RadioGroup>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## AI Rules
+
+- Each `RadioGroupItem` requires both `value` and `id`.
+- **Sizing** — `RadioGroupItem` supports `sm`, `md`, and `lg`. Ensure the size matches the associated `Label` size.
+- The `Label` `htmlFor` must match the `RadioGroupItem` `id`.
+- In forms, use `onValueChange={field.onChange}` and `defaultValue={field.value}` — **not** `{...field}`.
+- For more than 6 options, switch to `<Select>` instead.
+
+---
+
+## Related Components
+
+- [`Checkbox`](./checkbox.md) — For multi-select lists
+- [`Select`](./select.md) — For large option sets
+- [`Form`](./form.md)

package/docs/components/rating.md

@@ -1,77 +1,77 @@
-# Rating
-
-## Overview
-
-A star-based rating input that allows users to rate items on a 1–5 (or custom range) scale. Supports both interactive rating input and read-only display modes.
-
----
-
-## When to Use
-
-- Product or service reviews
-- Satisfaction ratings in feedback forms
-- Read-only quality scores in lists and tables
-
----
-
-## Props
-
-| Prop           | Type                      | Default | Required | Description                                 |
-| -------------- | ------------------------- | ------- | -------- | ------------------------------------------- |
-| `value`        | `number`                  | —       | No       | Current rating value                        |
-| `defaultValue` | `number`                  | `0`     | No       | Uncontrolled initial value                  |
-| `onChange`     | `(value: number) => void` | —       | No       | Change handler                              |
-| `max`          | `number`                  | `5`     | No       | Maximum rating                              |
-| `readonly`     | `boolean`                 | `false` | No       | Disables interaction, shows read-only stars |
-| `size`         | `'sm' \| 'md' \| 'lg'`    | `'md'`  | No       | Star size                                   |
-| `className`    | `string`                  | —       | No       | Additional CSS classes                      |
-
----
-
-## Examples
-
-### Interactive Rating
-
-```tsx
-import { Rating } from 'xertica-ui/ui';
-import { useState } from 'react';
-
-const [rating, setRating] = useState(0);
-
-<div className="space-y-2">
-  <Rating value={rating} onChange={setRating} />
-  <p className="text-sm text-muted-foreground">{rating} out of 5 stars</p>
-</div>;
-```
-
-### Read-Only (in a card or table)
-
-```tsx
-<Rating value={4.5} readonly size="sm" />
-```
-
-### In a Form
-
-```tsx
-<FormField
-  control={form.control}
-  name="rating"
-  render={({ field }) => (
-    <FormItem>
-      <FormLabel>Your Rating</FormLabel>
-      <FormControl>
-        <Rating value={field.value} onChange={field.onChange} />
-      </FormControl>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
----
-
-## AI Rules
-
-- Use `readonly` (lowercase) for display-only contexts — never add `pointer-events-none` manually.
-- Do not use `{...field}` spread — use `value={field.value}` and `onChange={field.onChange}`.
-- For half-star display values (e.g., `4.5`), only use in `readonly` mode.
+# Rating
+
+## Overview
+
+A star-based rating input that allows users to rate items on a 1–5 (or custom range) scale. Supports both interactive rating input and read-only display modes.
+
+---
+
+## When to Use
+
+- Product or service reviews
+- Satisfaction ratings in feedback forms
+- Read-only quality scores in lists and tables
+
+---
+
+## Props
+
+| Prop           | Type                      | Default | Required | Description                                 |
+| -------------- | ------------------------- | ------- | -------- | ------------------------------------------- |
+| `value`        | `number`                  | —       | No       | Current rating value                        |
+| `defaultValue` | `number`                  | `0`     | No       | Uncontrolled initial value                  |
+| `onChange`     | `(value: number) => void` | —       | No       | Change handler                              |
+| `max`          | `number`                  | `5`     | No       | Maximum rating                              |
+| `readonly`     | `boolean`                 | `false` | No       | Disables interaction, shows read-only stars |
+| `size`         | `'sm' \| 'md' \| 'lg'`    | `'md'`  | No       | Star size                                   |
+| `className`    | `string`                  | —       | No       | Additional CSS classes                      |
+
+---
+
+## Examples
+
+### Interactive Rating
+
+```tsx
+import { Rating } from 'xertica-ui/ui';
+import { useState } from 'react';
+
+const [rating, setRating] = useState(0);
+
+<div className="space-y-2">
+  <Rating value={rating} onChange={setRating} />
+  <p className="text-sm text-muted-foreground">{rating} out of 5 stars</p>
+</div>;
+```
+
+### Read-Only (in a card or table)
+
+```tsx
+<Rating value={4.5} readonly size="sm" />
+```
+
+### In a Form
+
+```tsx
+<FormField
+  control={form.control}
+  name="rating"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Your Rating</FormLabel>
+      <FormControl>
+        <Rating value={field.value} onChange={field.onChange} />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## AI Rules
+
+- Use `readonly` (lowercase) for display-only contexts — never add `pointer-events-none` manually.
+- Do not use `{...field}` spread — use `value={field.value}` and `onChange={field.onChange}`.
+- For half-star display values (e.g., `4.5`), only use in `readonly` mode.

package/docs/components/resizable.md

@@ -1,84 +1,84 @@
-# Resizable
-
-## Overview
-
-A panel splitter that lets users resize adjacent panels by dragging a handle. Used in IDE-style layouts, split-view editors, and any interface where two panels need to share space dynamically.
-
----
-
-## When to Use
-
-- Split-panel views (code editor + preview, list + detail)
-- Dashboard panels that users want to resize
-- Complex tool interfaces
-
----
-
-## Anatomy
-
-```
-<ResizablePanelGroup direction="horizontal">
-  <ResizablePanel defaultSize={50}>
-    {/* Left panel */}
-  </ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={50}>
-    {/* Right panel */}
-  </ResizablePanel>
-</ResizablePanelGroup>
-```
-
----
-
-## Props
-
-### ResizablePanelGroup
-
-| Prop        | Type                         | Default | Description                    |
-| ----------- | ---------------------------- | ------- | ------------------------------ |
-| `direction` | `'horizontal' \| 'vertical'` | —       | **Required**. Split direction. |
-| `className` | `string`                     | —       | Applied to the container       |
-
-### ResizablePanel
-
-| Prop          | Type     | Default | Description                     |
-| ------------- | -------- | ------- | ------------------------------- |
-| `defaultSize` | `number` | —       | Initial percentage size (0–100) |
-| `minSize`     | `number` | `10`    | Minimum percentage size         |
-| `maxSize`     | `number` | `90`    | Maximum percentage size         |
-
-### ResizableHandle
-
-| Prop         | Type      | Description                             |
-| ------------ | --------- | --------------------------------------- |
-| `withHandle` | `boolean` | Shows a visible grip icon on the handle |
-
----
-
-## Examples
-
-```tsx
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'xertica-ui/ui';
-
-<ResizablePanelGroup direction="horizontal" className="min-h-[400px] rounded-lg border">
-  <ResizablePanel defaultSize={30} minSize={20}>
-    <div className="p-4">
-      <h3 className="font-semibold">Side Panel</h3>
-    </div>
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={70}>
-    <div className="p-4">
-      <h3 className="font-semibold">Main Panel</h3>
-    </div>
-  </ResizablePanel>
-</ResizablePanelGroup>;
-```
-
----
-
-## AI Rules
-
-- `direction` is **required** — always specify `"horizontal"` or `"vertical"`.
-- `defaultSize` values across all panels must sum to `100`.
-- The parent container must have a defined height (`min-h-[400px]` or `h-full`) — without a bounded height the vertical split will collapse.
+# Resizable
+
+## Overview
+
+A panel splitter that lets users resize adjacent panels by dragging a handle. Used in IDE-style layouts, split-view editors, and any interface where two panels need to share space dynamically.
+
+---
+
+## When to Use
+
+- Split-panel views (code editor + preview, list + detail)
+- Dashboard panels that users want to resize
+- Complex tool interfaces
+
+---
+
+## Anatomy
+
+```
+<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel defaultSize={50}>
+    {/* Left panel */}
+  </ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={50}>
+    {/* Right panel */}
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+---
+
+## Props
+
+### ResizablePanelGroup
+
+| Prop        | Type                         | Default | Description                    |
+| ----------- | ---------------------------- | ------- | ------------------------------ |
+| `direction` | `'horizontal' \| 'vertical'` | —       | **Required**. Split direction. |
+| `className` | `string`                     | —       | Applied to the container       |
+
+### ResizablePanel
+
+| Prop          | Type     | Default | Description                     |
+| ------------- | -------- | ------- | ------------------------------- |
+| `defaultSize` | `number` | —       | Initial percentage size (0–100) |
+| `minSize`     | `number` | `10`    | Minimum percentage size         |
+| `maxSize`     | `number` | `90`    | Maximum percentage size         |
+
+### ResizableHandle
+
+| Prop         | Type      | Description                             |
+| ------------ | --------- | --------------------------------------- |
+| `withHandle` | `boolean` | Shows a visible grip icon on the handle |
+
+---
+
+## Examples
+
+```tsx
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'xertica-ui/ui';
+
+<ResizablePanelGroup direction="horizontal" className="min-h-[400px] rounded-lg border">
+  <ResizablePanel defaultSize={30} minSize={20}>
+    <div className="p-4">
+      <h3 className="font-semibold">Side Panel</h3>
+    </div>
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize={70}>
+    <div className="p-4">
+      <h3 className="font-semibold">Main Panel</h3>
+    </div>
+  </ResizablePanel>
+</ResizablePanelGroup>;
+```
+
+---
+
+## AI Rules
+
+- `direction` is **required** — always specify `"horizontal"` or `"vertical"`.
+- `defaultSize` values across all panels must sum to `100`.
+- The parent container must have a defined height (`min-h-[400px]` or `h-full`) — without a bounded height the vertical split will collapse.