xertica-ui 2.2.1 → 2.3.0

package/docs/components/tabs.md

@@ -1,117 +1,117 @@
-# Tabs
-
-## Overview
-
-A content switcher that organizes related views under labelled tab triggers. One tab is active at a time. Used for multi-view dashboards, analytics pages, settings sections, and any context where content is segmented but logically related.
-
----
-
-## When to Use
-
-- Switching between related views on the same page (e.g., "Overview", "Settings", "History")
-- Analytics dashboards with multiple metric categories
-- Settings pages with distinct sections (General, Security, Notifications)
-
-## When NOT to Use
-
-- Navigating between separate pages — use `<Sidebar>` or `<NavigationMenu>` instead.
-- Showing/hiding a single section — use `<Collapsible>` or `<Accordion>`.
-
----
-
-## Anatomy
-
-```
-<Tabs defaultValue="tab1">
-  <TabsList>
-    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">Content for tab 1</TabsContent>
-  <TabsContent value="tab2">Content for tab 2</TabsContent>
-</Tabs>
-```
-
----
-
-## Props
-
-### Tabs
-
-| Prop            | Type                         | Default        | Description                       |
-| --------------- | ---------------------------- | -------------- | --------------------------------- |
-| `defaultValue`  | `string`                     | —              | Initial active tab (uncontrolled) |
-| `value`         | `string`                     | —              | Controlled active tab             |
-| `onValueChange` | `(value: string) => void`    | —              | Change handler                    |
-| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation                |
-
-### TabsTrigger
-
-| Prop       | Type      | Required | Description                                      |
-| ---------- | --------- | -------- | ------------------------------------------------ |
-| `value`    | `string`  | **Yes**  | Must match the corresponding `TabsContent` value |
-| `disabled` | `boolean` | No       | Disables this tab                                |
-
-### TabsContent
-
-| Prop    | Type     | Required | Description                                      |
-| ------- | -------- | -------- | ------------------------------------------------ |
-| `value` | `string` | **Yes**  | Must match the corresponding `TabsTrigger` value |
-
----
-
-## Examples
-
-### Analytics Tabs
-
-```tsx
-import { Tabs, TabsList, TabsTrigger, TabsContent } from 'xertica-ui/ui';
-
-<Tabs defaultValue="general">
-  <TabsList>
-    <TabsTrigger value="general">General</TabsTrigger>
-    <TabsTrigger value="performance">Performance</TabsTrigger>
-    <TabsTrigger value="reports">Reports</TabsTrigger>
-  </TabsList>
-  <TabsContent value="general" className="mt-6">
-    {/* General content */}
-  </TabsContent>
-  <TabsContent value="performance" className="mt-6">
-    {/* Performance charts */}
-  </TabsContent>
-  <TabsContent value="reports" className="mt-6">
-    {/* Reports table */}
-  </TabsContent>
-</Tabs>;
-```
-
-### Controlled
-
-```tsx
-const [tab, setTab] = useState('general');
-
-<Tabs value={tab} onValueChange={setTab}>
-  <TabsList>
-    <TabsTrigger value="general">General</TabsTrigger>
-    <TabsTrigger value="security">Security</TabsTrigger>
-  </TabsList>
-  <TabsContent value="general">...</TabsContent>
-  <TabsContent value="security">...</TabsContent>
-</Tabs>;
-```
-
----
-
-## AI Rules
-
-- Every `TabsTrigger` must have a `value` that exactly matches a `TabsContent` `value`.
-- `TabsContent` should add `className="mt-6"` or `className="mt-4"` for spacing between the tabs and content.
-- `TabsList` should not have its width constrained to auto — let it fill the available horizontal space unless the design requires otherwise.
-- Do not use Tabs for page-level navigation — use router and `Sidebar` for that.
-
----
-
-## Related Components
-
-- [`Accordion`](./accordion.md) — For expandable sections instead of tabs
-- [`Card`](./card.md) — Tabs content often lives inside a Card
+# Tabs
+
+## Overview
+
+A content switcher that organizes related views under labelled tab triggers. One tab is active at a time. Used for multi-view dashboards, analytics pages, settings sections, and any context where content is segmented but logically related.
+
+---
+
+## When to Use
+
+- Switching between related views on the same page (e.g., "Overview", "Settings", "History")
+- Analytics dashboards with multiple metric categories
+- Settings pages with distinct sections (General, Security, Notifications)
+
+## When NOT to Use
+
+- Navigating between separate pages — use `<Sidebar>` or `<NavigationMenu>` instead.
+- Showing/hiding a single section — use `<Collapsible>` or `<Accordion>`.
+
+---
+
+## Anatomy
+
+```
+<Tabs defaultValue="tab1">
+  <TabsList>
+    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Content for tab 1</TabsContent>
+  <TabsContent value="tab2">Content for tab 2</TabsContent>
+</Tabs>
+```
+
+---
+
+## Props
+
+### Tabs
+
+| Prop            | Type                         | Default        | Description                       |
+| --------------- | ---------------------------- | -------------- | --------------------------------- |
+| `defaultValue`  | `string`                     | —              | Initial active tab (uncontrolled) |
+| `value`         | `string`                     | —              | Controlled active tab             |
+| `onValueChange` | `(value: string) => void`    | —              | Change handler                    |
+| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation                |
+
+### TabsTrigger
+
+| Prop       | Type      | Required | Description                                      |
+| ---------- | --------- | -------- | ------------------------------------------------ |
+| `value`    | `string`  | **Yes**  | Must match the corresponding `TabsContent` value |
+| `disabled` | `boolean` | No       | Disables this tab                                |
+
+### TabsContent
+
+| Prop    | Type     | Required | Description                                      |
+| ------- | -------- | -------- | ------------------------------------------------ |
+| `value` | `string` | **Yes**  | Must match the corresponding `TabsTrigger` value |
+
+---
+
+## Examples
+
+### Analytics Tabs
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from 'xertica-ui/ui';
+
+<Tabs defaultValue="general">
+  <TabsList>
+    <TabsTrigger value="general">General</TabsTrigger>
+    <TabsTrigger value="performance">Performance</TabsTrigger>
+    <TabsTrigger value="reports">Reports</TabsTrigger>
+  </TabsList>
+  <TabsContent value="general" className="mt-6">
+    {/* General content */}
+  </TabsContent>
+  <TabsContent value="performance" className="mt-6">
+    {/* Performance charts */}
+  </TabsContent>
+  <TabsContent value="reports" className="mt-6">
+    {/* Reports table */}
+  </TabsContent>
+</Tabs>;
+```
+
+### Controlled
+
+```tsx
+const [tab, setTab] = useState('general');
+
+<Tabs value={tab} onValueChange={setTab}>
+  <TabsList>
+    <TabsTrigger value="general">General</TabsTrigger>
+    <TabsTrigger value="security">Security</TabsTrigger>
+  </TabsList>
+  <TabsContent value="general">...</TabsContent>
+  <TabsContent value="security">...</TabsContent>
+</Tabs>;
+```
+
+---
+
+## AI Rules
+
+- Every `TabsTrigger` must have a `value` that exactly matches a `TabsContent` `value`.
+- `TabsContent` should add `className="mt-6"` or `className="mt-4"` for spacing between the tabs and content.
+- `TabsList` should not have its width constrained to auto — let it fill the available horizontal space unless the design requires otherwise.
+- Do not use Tabs for page-level navigation — use router and `Sidebar` for that.
+
+---
+
+## Related Components
+
+- [`Accordion`](./accordion.md) — For expandable sections instead of tabs
+- [`Card`](./card.md) — Tabs content often lives inside a Card

package/docs/components/textarea.md

@@ -1,86 +1,86 @@
-# Textarea
-
-## Overview
-
-A multi-line text input for longer content: descriptions, notes, messages, and rich text fields. Automatically resizable or fixed, depending on the `resize` CSS class applied.
-
----
-
-## When to Use
-
-- Bio, description, or notes fields in forms
-- Message composition in chat or email forms
-- Multi-line configuration values
-
-## When NOT to Use
-
-- Single-line inputs — use `<Input>` instead.
-- Never use native `<textarea>` — always use `<Textarea>` from `xertica-ui`.
-
----
-
-## Props
-
-All native `<textarea>` HTML attributes are forwarded.
-
-| Prop          | Type                   | Default | Description                                                                   |
-| ------------- | ---------------------- | ------- | ----------------------------------------------------------------------------- |
-| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`  | Size variant controlling padding and font size. Matches Input's sizing scale. |
-| `placeholder` | `string`               | —       | Placeholder text                                                              |
-| `disabled`    | `boolean`              | `false` | Disables interaction                                                          |
-| `className`   | `string`               | —       | Additional CSS classes                                                        |
-| `rows`        | `number`               | —       | Initial height in rows                                                        |
-
-> **Note:** The `size` prop controls padding and font size only — not height. Use the `rows` prop to control vertical height.
-
----
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { Textarea } from 'xertica-ui/ui';
-
-<Textarea placeholder="Write a description..." />;
-```
-
-### Non-Resizable (fixed height)
-
-```tsx
-<Textarea className="resize-none" rows={4} placeholder="Your message..." />
-```
-
-### Inside react-hook-form
-
-```tsx
-<FormField
-  control={form.control}
-  name="bio"
-  render={({ field }) => (
-    <FormItem className="col-span-full">
-      <FormLabel>Bio</FormLabel>
-      <FormControl>
-        <Textarea placeholder="Tell us about yourself..." className="resize-none" {...field} />
-      </FormControl>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
----
-
-## AI Rules
-
-- **Sizing** — The `size` prop controls padding and font, matching `Input`, `SelectTrigger`, and `Search`. Use the same `size` across all form elements for consistent alignment.
-- In form grids, `<Textarea>` fields always use `className="col-span-full"` to span the full width.
-- Use `className="resize-none"` in most corporate contexts — free resize can break card/panel layouts.
-- Always spread `{...field}` when used inside `react-hook-form` `FormField`.
-
----
-
-## Related Components
-
-- [`Input`](./input.md) — Single-line text input
-- [`Form`](./form.md) — Form integration context
+# Textarea
+
+## Overview
+
+A multi-line text input for longer content: descriptions, notes, messages, and rich text fields. Automatically resizable or fixed, depending on the `resize` CSS class applied.
+
+---
+
+## When to Use
+
+- Bio, description, or notes fields in forms
+- Message composition in chat or email forms
+- Multi-line configuration values
+
+## When NOT to Use
+
+- Single-line inputs — use `<Input>` instead.
+- Never use native `<textarea>` — always use `<Textarea>` from `xertica-ui`.
+
+---
+
+## Props
+
+All native `<textarea>` HTML attributes are forwarded.
+
+| Prop          | Type                   | Default | Description                                                                   |
+| ------------- | ---------------------- | ------- | ----------------------------------------------------------------------------- |
+| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`  | Size variant controlling padding and font size. Matches Input's sizing scale. |
+| `placeholder` | `string`               | —       | Placeholder text                                                              |
+| `disabled`    | `boolean`              | `false` | Disables interaction                                                          |
+| `className`   | `string`               | —       | Additional CSS classes                                                        |
+| `rows`        | `number`               | —       | Initial height in rows                                                        |
+
+> **Note:** The `size` prop controls padding and font size only — not height. Use the `rows` prop to control vertical height.
+
+---
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { Textarea } from 'xertica-ui/ui';
+
+<Textarea placeholder="Write a description..." />;
+```
+
+### Non-Resizable (fixed height)
+
+```tsx
+<Textarea className="resize-none" rows={4} placeholder="Your message..." />
+```
+
+### Inside react-hook-form
+
+```tsx
+<FormField
+  control={form.control}
+  name="bio"
+  render={({ field }) => (
+    <FormItem className="col-span-full">
+      <FormLabel>Bio</FormLabel>
+      <FormControl>
+        <Textarea placeholder="Tell us about yourself..." className="resize-none" {...field} />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## AI Rules
+
+- **Sizing** — The `size` prop controls padding and font, matching `Input`, `SelectTrigger`, and `Search`. Use the same `size` across all form elements for consistent alignment.
+- In form grids, `<Textarea>` fields always use `className="col-span-full"` to span the full width.
+- Use `className="resize-none"` in most corporate contexts — free resize can break card/panel layouts.
+- Always spread `{...field}` when used inside `react-hook-form` `FormField`.
+
+---
+
+## Related Components
+
+- [`Input`](./input.md) — Single-line text input
+- [`Form`](./form.md) — Form integration context

package/docs/components/theme-toggle.md

@@ -1,73 +1,73 @@
-# ThemeToggle — Xertica UI
-
-A self-contained light/dark mode toggle button that operates directly on the `document.documentElement` class list.
-
----
-
-## Import
-
-```tsx
-import { ThemeToggle } from 'xertica-ui/brand';
-```
-
----
-
-## Usage
-
-### Basic (icon only)
-
-```tsx
-<ThemeToggle />
-```
-
-### With label text
-
-```tsx
-<ThemeToggle showLabel />
-```
-
-### Size and variant variants
-
-```tsx
-<ThemeToggle size="sm" variant="outline" />
-<ThemeToggle size="lg" variant="default" />
-```
-
----
-
-## Props
-
-| Prop        | Type                                | Default   | Description                                       |
-| ----------- | ----------------------------------- | --------- | ------------------------------------------------- |
-| `size`      | `'sm' \| 'md' \| 'lg'`              | `'md'`    | Controls the button and icon size                 |
-| `variant`   | `'default' \| 'outline' \| 'ghost'` | `'ghost'` | Visual style of the underlying `<Button>`         |
-| `showLabel` | `boolean`                           | `false`   | Whether to show "Modo Claro" / "Modo Escuro" text |
-| `className` | `string`                            | `''`      | Additional CSS classes                            |
-
----
-
-## Behavior
-
-- On click, the component toggles the `dark` class on `<html>`.
-- Initial state is read from `document.documentElement.classList` on mount.
-- Does **not** persist to localStorage or any global state — use a shared state or `localStorage` listener at the app root level if persistence is required.
-- Fully operates without any context provider.
-
----
-
-## Placement Guidelines
-
-The component is typically placed in one of two locations:
-
-1. **Sidebar footer** — always visible regardless of current page
-2. **Header actions** — adjacent to the user avatar menu
-
----
-
-## AI Rules
-
-> [!IMPORTANT]
->
-> - **Do not create manual dark-mode toggles** — always use `<ThemeToggle>` from the library.
-> - **One per layout shell** — do not render multiple instances simultaneously, they will conflict.
-> - **No provider needed** — this component is self-contained and works anywhere in the React tree.
+# ThemeToggle — Xertica UI
+
+A self-contained light/dark mode toggle button that operates directly on the `document.documentElement` class list.
+
+---
+
+## Import
+
+```tsx
+import { ThemeToggle } from 'xertica-ui/brand';
+```
+
+---
+
+## Usage
+
+### Basic (icon only)
+
+```tsx
+<ThemeToggle />
+```
+
+### With label text
+
+```tsx
+<ThemeToggle showLabel />
+```
+
+### Size and variant variants
+
+```tsx
+<ThemeToggle size="sm" variant="outline" />
+<ThemeToggle size="lg" variant="default" />
+```
+
+---
+
+## Props
+
+| Prop        | Type                                | Default   | Description                                       |
+| ----------- | ----------------------------------- | --------- | ------------------------------------------------- |
+| `size`      | `'sm' \| 'md' \| 'lg'`              | `'md'`    | Controls the button and icon size                 |
+| `variant`   | `'default' \| 'outline' \| 'ghost'` | `'ghost'` | Visual style of the underlying `<Button>`         |
+| `showLabel` | `boolean`                           | `false`   | Whether to show "Modo Claro" / "Modo Escuro" text |
+| `className` | `string`                            | `''`      | Additional CSS classes                            |
+
+---
+
+## Behavior
+
+- On click, the component toggles the `dark` class on `<html>`.
+- Initial state is read from `document.documentElement.classList` on mount.
+- Does **not** persist to localStorage or any global state — use a shared state or `localStorage` listener at the app root level if persistence is required.
+- Fully operates without any context provider.
+
+---
+
+## Placement Guidelines
+
+The component is typically placed in one of two locations:
+
+1. **Sidebar footer** — always visible regardless of current page
+2. **Header actions** — adjacent to the user avatar menu
+
+---
+
+## AI Rules
+
+> [!IMPORTANT]
+>
+> - **Do not create manual dark-mode toggles** — always use `<ThemeToggle>` from the library.
+> - **One per layout shell** — do not render multiple instances simultaneously, they will conflict.
+> - **No provider needed** — this component is self-contained and works anywhere in the React tree.