@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Input.md

@@ -21,60 +21,60 @@ import { Input } from "@g4rcez/components/input";
 
 `Input` extends all standard HTML `<input>` attributes plus `InputField` layout props:
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `mask` | `AllMasks \| Array<string \| RegExp> \| ((value: string) => AllMasks)` | - | Input mask pattern |
-| `locale` | `Locales` | - | Locale for currency/number formatting |
-| `currency` | `CurrencyCode` | - | Currency code when using `mask="currency"` |
-| `error` | `string` | - | Error message shown below the field |
-| `title` | `string` | - | Field label |
-| `feedback` | `Label` | - | Success or neutral feedback text below the field |
-| `left` | `Label` | - | Content rendered on the left inside the field border |
-| `right` | `Label` | - | Content rendered on the right inside the field border |
-| `required` | `boolean` | `false` | Marks field as required; hides "Optional" label text |
-| `disabled` | `boolean` | `false` | Disabled state |
-| `loading` | `boolean` | `false` | Loading state |
-| `container` | `string` | - | Extra CSS classes for the outer `fieldset` |
-| `labelClassName` | `string` | - | Extra CSS classes for the label/border wrapper |
-| `next` | `string` | - | `id` of the next field to focus when Enter is pressed with `enterKeyHint="next"` |
-| `hiddenLabel` | `boolean` | `false` | Visually hides the label but keeps it for screen readers |
-| `...props` | `React.InputHTMLAttributes<HTMLInputElement>` | - | All standard input attributes |
+| Prop             | Type                                                                   | Default | Description                                                                      |
+| ---------------- | ---------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------- |
+| `mask`           | `AllMasks \| Array<string \| RegExp> \| ((value: string) => AllMasks)` | -       | Input mask pattern                                                               |
+| `locale`         | `Locales`                                                              | -       | Locale for currency/number formatting                                            |
+| `currency`       | `CurrencyCode`                                                         | -       | Currency code when using `mask="currency"`                                       |
+| `error`          | `string`                                                               | -       | Error message shown below the field                                              |
+| `title`          | `string`                                                               | -       | Field label                                                                      |
+| `feedback`       | `Label`                                                                | -       | Success or neutral feedback text below the field                                 |
+| `left`           | `Label`                                                                | -       | Content rendered on the left inside the field border                             |
+| `right`          | `Label`                                                                | -       | Content rendered on the right inside the field border                            |
+| `required`       | `boolean`                                                              | `false` | Marks field as required; hides "Optional" label text                             |
+| `disabled`       | `boolean`                                                              | `false` | Disabled state                                                                   |
+| `loading`        | `boolean`                                                              | `false` | Loading state                                                                    |
+| `container`      | `string`                                                               | -       | Extra CSS classes for the outer `fieldset`                                       |
+| `labelClassName` | `string`                                                               | -       | Extra CSS classes for the label/border wrapper                                   |
+| `next`           | `string`                                                               | -       | `id` of the next field to focus when Enter is pressed with `enterKeyHint="next"` |
+| `hiddenLabel`    | `boolean`                                                              | `false` | Visually hides the label but keeps it for screen readers                         |
+| `...props`       | `React.InputHTMLAttributes<HTMLInputElement>`                          | -       | All standard input attributes                                                    |
 
 ### Mask patterns
 
-| Pattern char | Matches |
-|---|---|
-| `9` | Digit (0–9) |
-| `A` | Letter (a–z, A–Z) |
-| `S` | Alphanumeric |
-| `*` | Any character |
+| Pattern char | Matches           |
+| ------------ | ----------------- |
+| `9`          | Digit (0–9)       |
+| `A`          | Letter (a–z, A–Z) |
+| `S`          | Alphanumeric      |
+| `*`          | Any character     |
 
 ### Special mask strings
 
-| Value | Description |
-|---|---|
-| `"currency"` | Currency formatting (requires `locale` and `currency`) |
-| `"percentage"` | Percentage input with `%` symbol |
-| `"decimal"` | Decimal number formatting |
+| Value          | Description                                            |
+| -------------- | ------------------------------------------------------ |
+| `"currency"`   | Currency formatting (requires `locale` and `currency`) |
+| `"percentage"` | Percentage input with `%` symbol                       |
+| `"decimal"`    | Decimal number formatting                              |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `h-input-height` | `--input-height` | Input height |
-| `px-input-x` | `--input-x` | Horizontal padding |
-| `py-input-y` | `--input-y` | Vertical padding |
-| `mt-input-gap` | `--input-gap` | Gap between field border and error/feedback text |
-| `border-input-border` | `--input-border` | Default border color |
-| `text-field-label` | `--field-label` | Label text color |
-| `text-foreground` | `--foreground` | Input text color |
-| `text-primary` | `--primary` | Focus ring, focus/hover border color |
-| `text-danger` | `--danger` | Error state border, text, and label color |
-| `text-disabled` | `--disabled` | Disabled text and border color |
-| `placeholder-input-mask` | `--input-mask` | Placeholder text color |
-| `placeholder-input-mask-error` | `--input-mask-error` | Placeholder color in error state |
+| Token                          | CSS Variable         | Purpose                                          |
+| ------------------------------ | -------------------- | ------------------------------------------------ |
+| `h-input-height`               | `--input-height`     | Input height                                     |
+| `px-input-x`                   | `--input-x`          | Horizontal padding                               |
+| `py-input-y`                   | `--input-y`          | Vertical padding                                 |
+| `mt-input-gap`                 | `--input-gap`        | Gap between field border and error/feedback text |
+| `border-input-border`          | `--input-border`     | Default border color                             |
+| `text-field-label`             | `--field-label`      | Label text color                                 |
+| `text-foreground`              | `--foreground`       | Input text color                                 |
+| `text-primary`                 | `--primary`          | Focus ring, focus/hover border color             |
+| `text-danger`                  | `--danger`           | Error state border, text, and label color        |
+| `text-disabled`                | `--disabled`         | Disabled text and border color                   |
+| `placeholder-input-mask`       | `--input-mask`       | Placeholder text color                           |
+| `placeholder-input-mask-error` | `--input-mask-error` | Placeholder color in error state                 |
 
 ## Examples
 
@@ -83,47 +83,27 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 ```tsx
 import { Input } from "@g4rcez/components/input";
 
-<Input name="name" title="Full name" placeholder="Jane Smith" required />
+<Input name="name" title="Full name" placeholder="Jane Smith" required />;
 ```
 
 ### Phone number mask
 
 ```tsx
-<Input
-  name="phone"
-  title="Phone"
-  mask="(99) 99999-9999"
-  placeholder="(00) 00000-0000"
-/>
+<Input name="phone" title="Phone" mask="(99) 99999-9999" placeholder="(00) 00000-0000" />
 ```
 
 ### Currency input
 
 ```tsx
-<Input
-  name="price"
-  title="Price"
-  mask="currency"
-  currency="USD"
-  locale="en-US"
-  placeholder="0.00"
-/>
+<Input name="price" title="Price" mask="currency" currency="USD" locale="en-US" placeholder="0.00" />
 ```
 
 ### Dynamic mask (CPF / CNPJ)
 
 ```tsx
-const docMask = (value: string) =>
-  value.replace(/\D/g, "").length <= 11
-    ? "999.999.999-99"
-    : "99.999.999/9999-99";
+const docMask = (value: string) => (value.replace(/\D/g, "").length <= 11 ? "999.999.999-99" : "99.999.999/9999-99");
 
-<Input
-  name="document"
-  title="CPF or CNPJ"
-  mask={docMask}
-  placeholder="000.000.000-00"
-/>
+<Input name="document" title="CPF or CNPJ" mask={docMask} placeholder="000.000.000-00" />;
 ```
 
 ### Input with inline left/right slots
@@ -131,31 +111,24 @@ const docMask = (value: string) =>
 ```tsx
 import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 
-<Input
-  name="search"
-  title="Search"
-  left={<MagnifyingGlassIcon size={16} className="text-muted-foreground" />}
-  placeholder="Type to search..."
-/>
+<Input name="search" title="Search" left={<MagnifyingGlassIcon size={16} className="text-muted-foreground" />} placeholder="Type to search..." />;
 ```
 
 ### Input with error and feedback
 
 ```tsx
 const [email, setEmail] = useState("");
-const error = email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
-  ? "Enter a valid email address"
-  : undefined;
+const error = email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? "Enter a valid email address" : undefined;
 
 <Input
-  name="email"
-  type="email"
-  title="Email"
-  value={email}
-  onChange={(e) => setEmail(e.target.value)}
-  error={error}
-  feedback={!error && email ? "Looks good!" : undefined}
-/>
+    name="email"
+    type="email"
+    title="Email"
+    value={email}
+    onChange={(e) => setEmail(e.target.value)}
+    error={error}
+    feedback={!error && email ? "Looks good!" : undefined}
+/>;
 ```
 
 ### Enter-to-advance between fields
@@ -182,19 +155,21 @@ import { Form } from "@g4rcez/components/form";
 import { Button } from "@g4rcez/components/button";
 
 function SignUpForm() {
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    const data = new FormData(e.currentTarget);
-    console.log(Object.fromEntries(data));
-  };
-
-  return (
-    <Form onSubmit={handleSubmit} className="flex flex-col gap-base max-w-md">
-      <Input name="name" title="Full name" required />
-      <Input name="email" type="email" title="Email" required />
-      <Input name="phone" title="Phone" mask="(99) 99999-9999" />
-      <Button theme="primary" type="submit">Sign up</Button>
-    </Form>
-  );
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        const data = new FormData(e.currentTarget);
+        console.log(Object.fromEntries(data));
+    };
+
+    return (
+        <Form onSubmit={handleSubmit} className="flex flex-col gap-base max-w-md">
+            <Input name="name" title="Full name" required />
+            <Input name="email" type="email" title="Email" required />
+            <Input name="phone" title="Phone" mask="(99) 99999-9999" />
+            <Button theme="primary" type="submit">
+                Sign up
+            </Button>
+        </Form>
+    );
 }
 ```
 

package/ai/docs/InputField.md

@@ -19,40 +19,40 @@ import { InputField } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `Label` | - | Main label text for the field |
-| `info` | `Label` | - | Informational text shown in a `Tooltip` icon next to the label |
-| `error` | `string` | - | Error message rendered below the field border |
-| `feedback` | `Label` | - | Success or neutral feedback message (hidden when `error` is present) |
-| `left` | `Label` | - | Content rendered to the left inside the field border |
-| `right` | `Label` | - | Content rendered to the right inside the field border |
-| `rightLabel` | `Label` | - | Content rendered to the right of the label text |
-| `required` | `boolean` | `false` | If `true`, hides the "Optional" badge |
-| `optionalText` | `string` | `"Optional"` | Text shown for optional fields (translatable) |
-| `disabled` | `boolean` | `false` | Applies disabled styling to the wrapper and label |
-| `interactive` | `boolean` | `false` | Sets `data-interactive` on the fieldset |
-| `container` | `string` | - | Extra CSS classes for the outer `<fieldset>` |
-| `labelClassName` | `string` | - | Extra CSS classes for the inner label/border wrapper `<div>` |
-| `hiddenLabel` | `boolean` | `false` | Visually hides the label row while keeping it accessible |
-| `reportStatus` | `boolean` | - | Show `CheckCircle`/`XCircle` icons alongside the label based on validity |
-| `componentName` | `string` | - | Sets `data-component` on the fieldset (e.g., `"input"`, `"select"`) |
-| `id` | `string` | - | `id` linked to the inner control via `htmlFor` on the label |
-| `name` | `string` | - | Fallback for `id` when `id` is not provided |
-| `children` | `React.ReactNode` | - | The actual form control (input, select, etc.) |
+| Prop             | Type              | Default      | Description                                                              |
+| ---------------- | ----------------- | ------------ | ------------------------------------------------------------------------ |
+| `title`          | `Label`           | -            | Main label text for the field                                            |
+| `info`           | `Label`           | -            | Informational text shown in a `Tooltip` icon next to the label           |
+| `error`          | `string`          | -            | Error message rendered below the field border                            |
+| `feedback`       | `Label`           | -            | Success or neutral feedback message (hidden when `error` is present)     |
+| `left`           | `Label`           | -            | Content rendered to the left inside the field border                     |
+| `right`          | `Label`           | -            | Content rendered to the right inside the field border                    |
+| `rightLabel`     | `Label`           | -            | Content rendered to the right of the label text                          |
+| `required`       | `boolean`         | `false`      | If `true`, hides the "Optional" badge                                    |
+| `optionalText`   | `string`          | `"Optional"` | Text shown for optional fields (translatable)                            |
+| `disabled`       | `boolean`         | `false`      | Applies disabled styling to the wrapper and label                        |
+| `interactive`    | `boolean`         | `false`      | Sets `data-interactive` on the fieldset                                  |
+| `container`      | `string`          | -            | Extra CSS classes for the outer `<fieldset>`                             |
+| `labelClassName` | `string`          | -            | Extra CSS classes for the inner label/border wrapper `<div>`             |
+| `hiddenLabel`    | `boolean`         | `false`      | Visually hides the label row while keeping it accessible                 |
+| `reportStatus`   | `boolean`         | -            | Show `CheckCircle`/`XCircle` icons alongside the label based on validity |
+| `componentName`  | `string`          | -            | Sets `data-component` on the fieldset (e.g., `"input"`, `"select"`)      |
+| `id`             | `string`          | -            | `id` linked to the inner control via `htmlFor` on the label              |
+| `name`           | `string`          | -            | Fallback for `id` when `id` is not provided                              |
+| `children`       | `React.ReactNode` | -            | The actual form control (input, select, etc.)                            |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `border-input-border` | `--input-border` | Default field border color |
-| `text-field-label` | `--field-label` | Label text color |
-| `text-primary` | `--primary` | Label and border color on focus/hover |
-| `text-danger` | `--danger` | Label, border, and error text color in error state |
-| `text-disabled` | `--disabled` | Label and border color when disabled |
-| `mt-input-gap` | `--input-gap` | Gap between border and error/feedback text |
+| Token                 | CSS Variable     | Purpose                                            |
+| --------------------- | ---------------- | -------------------------------------------------- |
+| `border-input-border` | `--input-border` | Default field border color                         |
+| `text-field-label`    | `--field-label`  | Label text color                                   |
+| `text-primary`        | `--primary`      | Label and border color on focus/hover              |
+| `text-danger`         | `--danger`       | Label, border, and error text color in error state |
+| `text-disabled`       | `--disabled`     | Label and border color when disabled               |
+| `mt-input-gap`        | `--input-gap`    | Gap between border and error/feedback text         |
 
 ## Examples
 
@@ -62,12 +62,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { InputField } from "@g4rcez/components";
 
 <InputField title="Username" name="username" required>
-  <input
-    id="username"
-    name="username"
-    className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none"
-  />
-</InputField>
+    <input id="username" name="username" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+</InputField>;
 ```
 
 ### With info tooltip and error
@@ -76,47 +72,51 @@ import { InputField } from "@g4rcez/components";
 import { MagnifyingGlassIcon, CheckIcon } from "@phosphor-icons/react";
 
 <InputField
-  title="API Key"
-  name="api_key"
-  info="Your secret API key from the developer portal."
-  error={apiKeyError}
-  left={<MagnifyingGlassIcon size={16} className="text-muted-foreground" />}
-  right={isValid ? <CheckIcon size={16} className="text-success" /> : null}
-  required
->
-  <input
-    id="api_key"
+    title="API Key"
     name="api_key"
-    type="password"
-    className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none"
-  />
-</InputField>
+    info="Your secret API key from the developer portal."
+    error={apiKeyError}
+    left={<MagnifyingGlassIcon size={16} className="text-muted-foreground" />}
+    right={isValid ? <CheckIcon size={16} className="text-success" /> : null}
+    required
+>
+    <input
+        id="api_key"
+        name="api_key"
+        type="password"
+        className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none"
+    />
+</InputField>;
 ```
 
 ### Optional vs required
 
 ```tsx
-{/* Required — "Optional" badge is hidden */}
+{
+    /* Required — "Optional" badge is hidden */
+}
 <InputField title="Email" name="email" required>
-  <input id="email" name="email" type="email" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
-</InputField>
+    <input id="email" name="email" type="email" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+</InputField>;
 
-{/* Optional — shows "Optional" badge */}
+{
+    /* Optional — shows "Optional" badge */
+}
 <InputField title="Website" name="website">
-  <input id="website" name="website" type="url" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
-</InputField>
+    <input id="website" name="website" type="url" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+</InputField>;
 ```
 
 ### Hidden label (accessible)
 
 ```tsx
 <InputField title="Search" name="search" hiddenLabel>
-  <input
-    id="search"
-    name="search"
-    placeholder="Search..."
-    className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none"
-  />
+    <input
+        id="search"
+        name="search"
+        placeholder="Search..."
+        className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none"
+    />
 </InputField>
 ```
 
@@ -124,13 +124,13 @@ import { MagnifyingGlassIcon, CheckIcon } from "@phosphor-icons/react";
 
 ```tsx
 <InputField
-  title="Slug"
-  name="slug"
-  feedback={isAvailable ? "This slug is available." : undefined}
-  error={!isAvailable ? "Slug is already taken." : undefined}
-  required
+    title="Slug"
+    name="slug"
+    feedback={isAvailable ? "This slug is available." : undefined}
+    error={!isAvailable ? "Slug is already taken." : undefined}
+    required
 >
-  <input id="slug" name="slug" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+    <input id="slug" name="slug" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
 </InputField>
 ```