xertica-ui 2.2.1 → 2.4.0

package/docs/components/input.md

@@ -1,130 +1,130 @@
-# Input
-
-## Overview
-
-The standard text field component. Use it for all single-line text inputs: names, emails, search queries, codes. Integrates seamlessly with `react-hook-form` via the `{...field}` spread pattern.
-
----
-
-## When to Use
-
-- Single-line text input in forms
-- Search bars (pair with the `relative`/absolute icon pattern)
-- Inline editing fields
-
-## When NOT to Use
-
-- Multi-line text entry — use `<Textarea>` instead.
-- Numeric ranges — use `<Slider>` instead.
-- Date selection — use `<Calendar>` instead.
-- Never use native `<input>` — always use `<Input>` from `xertica-ui`.
-
----
-
-## Props
-
-All native `<input>` HTML attributes are forwarded.
-
-| Prop          | Type                   | Default  | Description                                                       |
-| ------------- | ---------------------- | -------- | ----------------------------------------------------------------- |
-| `type`        | `string`               | `'text'` | Input type: `text`, `email`, `password`, `number`, `search`, etc. |
-| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`   | Size variant controlling height, padding, and font size.          |
-| `placeholder` | `string`               | —        | Placeholder text                                                  |
-| `disabled`    | `boolean`              | `false`  | Disables interaction                                              |
-| `className`   | `string`               | —        | Additional CSS classes                                            |
-
-### Standardized Sizing Scale
-
-All form input components (`Input`, `SelectTrigger`, `Textarea`, `Search`) share the same sizing scale:
-
-| Size | Height        | Padding     | Font        |
-| ---- | ------------- | ----------- | ----------- |
-| `sm` | `h-8` (32px)  | `px-2 py-1` | `text-sm`   |
-| `md` | `h-10` (40px) | `px-3 py-2` | `text-base` |
-| `lg` | `h-12` (48px) | `px-4 py-3` | `text-base` |
-
-This ensures all form elements align perfectly when placed side-by-side in grid layouts.
-
----
-
-## Examples
-
-### Basic Text Input
-
-```tsx
-import { Input } from 'xertica-ui/ui';
-
-<Input placeholder="Enter your name" />;
-```
-
-### With Label (standalone)
-
-```tsx
-import { Input, Label } from 'xertica-ui/ui';
-
-<div className="grid gap-2">
-  <Label htmlFor="email">Email</Label>
-  <Input id="email" type="email" placeholder="you@example.com" />
-</div>;
-```
-
-### Search Input with Icon
-
-```tsx
-import { Search } from 'lucide-react';
-
-<div className="relative w-full max-w-sm">
-  <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
-  <Input placeholder="Search..." className="pl-8" />
-</div>;
-```
-
-### Inside react-hook-form
-
-```tsx
-<FormField
-  control={form.control}
-  name="email"
-  render={({ field }) => (
-    <FormItem>
-      <FormLabel>Email</FormLabel>
-      <FormControl>
-        <Input type="email" placeholder="you@example.com" {...field} />
-      </FormControl>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
----
-
-## Accessibility
-
-- Always pair with a `<Label>` component. Use the `htmlFor` prop on the label and `id` on the input to link them.
-- If a visual label is not possible (e.g., search bars), **you must provide an `aria-label`** prop:
-  ```tsx
-  <Input aria-label="Search items" placeholder="Search..." />
-  ```
-- Use the `disabled` prop to indicate non-interactive fields correctly to assistive technologies.
-- Maintain a minimum 1.5:1 contrast for placeholder text (handled by design system defaults).
-
----
-
-## AI Rules
-
-- **Never** use native `<input>` — always use `<Input>` from `xertica-ui`.
-- **Sizing** — The default size is `md` (h-10, 40px). Use the same `size` prop across `Input`, `SelectTrigger`, `Textarea`, and `Search` to ensure consistent alignment.
-- **Accessibility Requirement**: Always provide a `<Label>` or an explicit `aria-label`. Placeholder text is NOT an accessible name.
-- When in a form with `react-hook-form`, **always spread `{...field}`** on the `<Input>` inside `<FormControl>`.
-- Search inputs always use the `relative` + `absolute icon` + `pl-8` pattern — never place the icon outside the input container.
-- Do not add `border`, `rounded`, or `bg-` classes to override the input style — it already inherits from the design system tokens.
-
----
-
-## Related Components
-
-- [`Textarea`](./textarea.md) — Multi-line text input
-- [`Form`](./form.md) — Form integration context
-- [`Label`](./label.md) — Always pair with a Label for accessibility
-- [`Search`](./search.md) — Pre-built search input component
+# Input
+
+## Overview
+
+The standard text field component. Use it for all single-line text inputs: names, emails, search queries, codes. Integrates seamlessly with `react-hook-form` via the `{...field}` spread pattern.
+
+---
+
+## When to Use
+
+- Single-line text input in forms
+- Search bars (pair with the `relative`/absolute icon pattern)
+- Inline editing fields
+
+## When NOT to Use
+
+- Multi-line text entry — use `<Textarea>` instead.
+- Numeric ranges — use `<Slider>` instead.
+- Date selection — use `<Calendar>` instead.
+- Never use native `<input>` — always use `<Input>` from `xertica-ui`.
+
+---
+
+## Props
+
+All native `<input>` HTML attributes are forwarded.
+
+| Prop          | Type                   | Default  | Description                                                       |
+| ------------- | ---------------------- | -------- | ----------------------------------------------------------------- |
+| `type`        | `string`               | `'text'` | Input type: `text`, `email`, `password`, `number`, `search`, etc. |
+| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`   | Size variant controlling height, padding, and font size.          |
+| `placeholder` | `string`               | —        | Placeholder text                                                  |
+| `disabled`    | `boolean`              | `false`  | Disables interaction                                              |
+| `className`   | `string`               | —        | Additional CSS classes                                            |
+
+### Standardized Sizing Scale
+
+All form input components (`Input`, `SelectTrigger`, `Textarea`, `Search`) share the same sizing scale:
+
+| Size | Height        | Padding     | Font        |
+| ---- | ------------- | ----------- | ----------- |
+| `sm` | `h-8` (32px)  | `px-2 py-1` | `text-sm`   |
+| `md` | `h-10` (40px) | `px-3 py-2` | `text-base` |
+| `lg` | `h-12` (48px) | `px-4 py-3` | `text-base` |
+
+This ensures all form elements align perfectly when placed side-by-side in grid layouts.
+
+---
+
+## Examples
+
+### Basic Text Input
+
+```tsx
+import { Input } from 'xertica-ui/ui';
+
+<Input placeholder="Enter your name" />;
+```
+
+### With Label (standalone)
+
+```tsx
+import { Input, Label } from 'xertica-ui/ui';
+
+<div className="grid gap-2">
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" placeholder="you@example.com" />
+</div>;
+```
+
+### Search Input with Icon
+
+```tsx
+import { Search } from 'lucide-react';
+
+<div className="relative w-full max-w-sm">
+  <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
+  <Input placeholder="Search..." className="pl-8" />
+</div>;
+```
+
+### Inside react-hook-form
+
+```tsx
+<FormField
+  control={form.control}
+  name="email"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Email</FormLabel>
+      <FormControl>
+        <Input type="email" placeholder="you@example.com" {...field} />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## Accessibility
+
+- Always pair with a `<Label>` component. Use the `htmlFor` prop on the label and `id` on the input to link them.
+- If a visual label is not possible (e.g., search bars), **you must provide an `aria-label`** prop:
+  ```tsx
+  <Input aria-label="Search items" placeholder="Search..." />
+  ```
+- Use the `disabled` prop to indicate non-interactive fields correctly to assistive technologies.
+- Maintain a minimum 1.5:1 contrast for placeholder text (handled by design system defaults).
+
+---
+
+## AI Rules
+
+- **Never** use native `<input>` — always use `<Input>` from `xertica-ui`.
+- **Sizing** — The default size is `md` (h-10, 40px). Use the same `size` prop across `Input`, `SelectTrigger`, `Textarea`, and `Search` to ensure consistent alignment.
+- **Accessibility Requirement**: Always provide a `<Label>` or an explicit `aria-label`. Placeholder text is NOT an accessible name.
+- When in a form with `react-hook-form`, **always spread `{...field}`** on the `<Input>` inside `<FormControl>`.
+- Search inputs always use the `relative` + `absolute icon` + `pl-8` pattern — never place the icon outside the input container.
+- Do not add `border`, `rounded`, or `bg-` classes to override the input style — it already inherits from the design system tokens.
+
+---
+
+## Related Components
+
+- [`Textarea`](./textarea.md) — Multi-line text input
+- [`Form`](./form.md) — Form integration context
+- [`Label`](./label.md) — Always pair with a Label for accessibility
+- [`Search`](./search.md) — Pre-built search input component

package/docs/components/label.md

@@ -1,69 +1,69 @@
-# Label
-
-## Overview
-
-An accessible form field label that is always associated with a specific input via `htmlFor`. Automatically applies styling that visually communicates field relationships and disabled states. Used in every form — standalone or via `<FormLabel>` inside the `Form` system.
-
----
-
-## When to Use
-
-- Above or beside every form input (`<Input>`, `<Textarea>`, `<Select>`, `<Checkbox>`)
-- As a visual pointer for non-form groups (settings toggles with `<Switch>`)
-
-## When NOT to Use
-
-- As generic body text — use a `<p>` or `<span>` instead.
-- Do not omit labels from forms for aesthetic reasons — accessibility requires them.
-
----
-
-## Props
-
-| Prop        | Type                   | Required             | Default | Description                         |
-| ----------- | ---------------------- | -------------------- | ------- | ----------------------------------- |
-| `htmlFor`   | `string`               | **Yes** (standalone) | —       | ID of the associated input element  |
-| `size`      | `'sm' \| 'md' \| 'lg'` | No                   | `'md'`  | Size variant controlling font size. |
-| `className` | `string"               | No                   | —       | Additional CSS classes              |
-
----
-
-## Examples
-
-### Standalone Label + Input
-
-```tsx
-import { Label, Input } from 'xertica-ui/ui';
-
-<div className="grid gap-2">
-  <Label htmlFor="username">Username</Label>
-  <Input id="username" placeholder="johndoe" />
-</div>;
-```
-
-### With Switch
-
-```tsx
-import { Label, Switch } from 'xertica-ui/ui';
-
-<div className="flex items-center space-x-2">
-  <Switch id="notifications" />
-  <Label htmlFor="notifications">Enable notifications</Label>
-</div>;
-```
-
----
-
-## AI Rules
-
-- Every standalone `<Input>`, `<Textarea>`, or `<Select>` must have a `<Label htmlFor="...">`. No exceptions.
-- **Sizing** — Matches the standard scale (`sm`, `md`, `lg`). Always set the same `size` as the associated input component.
-- When using inside `<FormField>` from `react-hook-form`, use `<FormLabel>` instead — it auto-links to the field.
-- `htmlFor` must match the `id` prop on the associated input exactly.
-
----
-
-## Related Components
-
-- [`Form`](./form.md) — Uses `<FormLabel>` which wraps `<Label>` with automatic `htmlFor` linking
-- [`Input`](./input.md), [`Textarea`](./textarea.md), [`Select`](./select.md)
+# Label
+
+## Overview
+
+An accessible form field label that is always associated with a specific input via `htmlFor`. Automatically applies styling that visually communicates field relationships and disabled states. Used in every form — standalone or via `<FormLabel>` inside the `Form` system.
+
+---
+
+## When to Use
+
+- Above or beside every form input (`<Input>`, `<Textarea>`, `<Select>`, `<Checkbox>`)
+- As a visual pointer for non-form groups (settings toggles with `<Switch>`)
+
+## When NOT to Use
+
+- As generic body text — use a `<p>` or `<span>` instead.
+- Do not omit labels from forms for aesthetic reasons — accessibility requires them.
+
+---
+
+## Props
+
+| Prop        | Type                   | Required             | Default | Description                         |
+| ----------- | ---------------------- | -------------------- | ------- | ----------------------------------- |
+| `htmlFor`   | `string`               | **Yes** (standalone) | —       | ID of the associated input element  |
+| `size`      | `'sm' \| 'md' \| 'lg'` | No                   | `'md'`  | Size variant controlling font size. |
+| `className` | `string"               | No                   | —       | Additional CSS classes              |
+
+---
+
+## Examples
+
+### Standalone Label + Input
+
+```tsx
+import { Label, Input } from 'xertica-ui/ui';
+
+<div className="grid gap-2">
+  <Label htmlFor="username">Username</Label>
+  <Input id="username" placeholder="johndoe" />
+</div>;
+```
+
+### With Switch
+
+```tsx
+import { Label, Switch } from 'xertica-ui/ui';
+
+<div className="flex items-center space-x-2">
+  <Switch id="notifications" />
+  <Label htmlFor="notifications">Enable notifications</Label>
+</div>;
+```
+
+---
+
+## AI Rules
+
+- Every standalone `<Input>`, `<Textarea>`, or `<Select>` must have a `<Label htmlFor="...">`. No exceptions.
+- **Sizing** — Matches the standard scale (`sm`, `md`, `lg`). Always set the same `size` as the associated input component.
+- When using inside `<FormField>` from `react-hook-form`, use `<FormLabel>` instead — it auto-links to the field.
+- `htmlFor` must match the `id` prop on the associated input exactly.
+
+---
+
+## Related Components
+
+- [`Form`](./form.md) — Uses `<FormLabel>` which wraps `<Label>` with automatic `htmlFor` linking
+- [`Input`](./input.md), [`Textarea`](./textarea.md), [`Select`](./select.md)

package/docs/components/language-selector.md

@@ -45,21 +45,23 @@ The `Header` component accepts `showLanguageSelector` and renders `<LanguageSele
 ### Minimal variant (short code only)
 
 ```tsx
-<LanguageSelector variant="minimal" showIcon={false} />
-{/* Trigger displays "PT", "EN", "ES" (or the LanguageDefinition.shortLabel of custom locales) */}
+<LanguageSelector variant="minimal" showIcon={false} />;
+{
+  /* Trigger displays "PT", "EN", "ES" (or the LanguageDefinition.shortLabel of custom locales) */
+}
 ```
 
 ---
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `variant` | `'default' \| 'minimal'` | `'default'` | `minimal` shows the short label (`PT`, `EN`, …); `default` shows the full label |
-| `showIcon` | `boolean` | `true` | Show the Globe icon in the trigger |
-| `showLabel` | `boolean` | `false` | Reserved — currently has no visual effect |
-| `className` | `string` | `''` | Additional CSS classes applied to the `SelectTrigger` |
-| `showWhenMonolingual` | `boolean` | `false` | Render the selector even when only one language is configured (would otherwise auto-hide) |
+| Prop                  | Type                     | Default     | Description                                                                               |
+| --------------------- | ------------------------ | ----------- | ----------------------------------------------------------------------------------------- |
+| `variant`             | `'default' \| 'minimal'` | `'default'` | `minimal` shows the short label (`PT`, `EN`, …); `default` shows the full label           |
+| `showIcon`            | `boolean`                | `true`      | Show the Globe icon in the trigger                                                        |
+| `showLabel`           | `boolean`                | `false`     | Reserved — currently has no visual effect                                                 |
+| `className`           | `string`                 | `''`        | Additional CSS classes applied to the `SelectTrigger`                                     |
+| `showWhenMonolingual` | `boolean`                | `false`     | Render the selector even when only one language is configured (would otherwise auto-hide) |
 
 > **Removed props**: `initialLanguage` and `onLanguageChange` no longer exist. The component reads from `LanguageContext` and drives language changes through `i18n.changeLanguage()` internally.
 
@@ -69,11 +71,11 @@ The `Header` component accepts `showLanguageSelector` and renders `<LanguageSele
 
 By default the library ships with three languages (`DEFAULT_LANGUAGES`):
 
-| Code | Display | Short label |
-|---|---|---|
-| `'pt-BR'` | Português (BR) | PT |
-| `'en'` | English | EN |
-| `'es'` | Español | ES |
+| Code      | Display        | Short label |
+| --------- | -------------- | ----------- |
+| `'pt-BR'` | Português (BR) | PT          |
+| `'en'`    | English        | EN          |
+| `'es'`    | Español        | ES          |
 
 **The list is fully runtime-configurable.** Pass `availableLanguages` on `<XerticaProvider>` to add, remove, or restrict the set of languages exposed by the selector — no source-file edits required. See [`docs/i18n.md`](../i18n.md#configuring-available-languages) for the full API.
 
@@ -91,7 +93,7 @@ import fr from './locales/fr.json';
 >
   <LanguageSelector />
   {/* French appears in the dropdown; bundle auto-registered with i18next */}
-</XerticaProvider>
+</XerticaProvider>;
 ```
 
 ### Monolingual app — selector auto-hides
@@ -147,7 +149,9 @@ function ProfileSettings() {
   return (
     <select value={language} onChange={e => setLanguage(e.target.value)}>
       {availableLanguages.map(lang => (
-        <option key={lang.code} value={lang.code}>{lang.label}</option>
+        <option key={lang.code} value={lang.code}>
+          {lang.label}
+        </option>
       ))}
     </select>
   );