@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Select.md

@@ -19,44 +19,44 @@ import { Select } from "@g4rcez/components/select";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `OptionProps[]` | — | Array of option objects. |
-| `selectContainer` | `string` | `""` | Additional CSS classes for the select container. |
-| `required` | `boolean` | `true` | Whether the field is required. |
-| `error` | `string` | — | Error message to display. |
-| `loading` | `boolean` | `false` | Shows a loading indicator and disables the field. |
-| `disabled` | `boolean` | `false` | Disables the select. |
-| `placeholder` | `string` | — | Placeholder shown as a disabled hidden option. |
-| `value` | `string` | — | Controlled selected value. |
-| `onChange` | `(e: ChangeEvent<HTMLSelectElement>) => void` | — | Change handler. |
-| `...inputFieldProps` | `InputFieldProps` | — | All `InputField` props (title, left, right, feedback, etc.). |
+| Prop                 | Type                                          | Default | Description                                                  |
+| -------------------- | --------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `options`            | `OptionProps[]`                               | —       | Array of option objects.                                     |
+| `selectContainer`    | `string`                                      | `""`    | Additional CSS classes for the select container.             |
+| `required`           | `boolean`                                     | `true`  | Whether the field is required.                               |
+| `error`              | `string`                                      | —       | Error message to display.                                    |
+| `loading`            | `boolean`                                     | `false` | Shows a loading indicator and disables the field.            |
+| `disabled`           | `boolean`                                     | `false` | Disables the select.                                         |
+| `placeholder`        | `string`                                      | —       | Placeholder shown as a disabled hidden option.               |
+| `value`              | `string`                                      | —       | Controlled selected value.                                   |
+| `onChange`           | `(e: ChangeEvent<HTMLSelectElement>) => void` | —       | Change handler.                                              |
+| `...inputFieldProps` | `InputFieldProps`                             | —       | All `InputField` props (title, left, right, feedback, etc.). |
 
 ### OptionProps
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `value` | `string` | Option value (required). |
-| `label` | `string` | Display text (falls back to `value` if omitted). |
-| `disabled` | `boolean` | Disables this individual option. |
-| `data-dynamic` | `string` | Marks a dynamically generated option. |
-| `data-*` | `string` | Any custom data attributes forwarded to the `<option>`. |
+| Prop           | Type      | Description                                             |
+| -------------- | --------- | ------------------------------------------------------- |
+| `value`        | `string`  | Option value (required).                                |
+| `label`        | `string`  | Display text (falls back to `value` if omitted).        |
+| `disabled`     | `boolean` | Disables this individual option.                        |
+| `data-dynamic` | `string`  | Marks a dynamically generated option.                   |
+| `data-*`       | `string`  | Any custom data attributes forwarded to the `<option>`. |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `text-foreground` | `--foreground` | Selected option text color |
-| `text-input-placeholder` | `--input-placeholder` | Color when no option is selected |
-| `placeholder-input-placeholder` | `--input-placeholder` | Placeholder styling |
-| `bg-input-mask-error` (via `group-error`) | `--input-mask-error` | Placeholder tint in error state |
-| `text-danger` (via `group-error`) | `--danger` | Text color in error state |
-| `hover:text-primary` | `--primary` | Caret icon hover color |
-| `h-input-height` | `--input-height` | Control height (2.5 rem) |
-| `px-input-x` | `--input-x` | Horizontal padding |
-| `py-input-y` | `--input-y` | Vertical padding |
+| Token                                     | CSS Variable          | Purpose                          |
+| ----------------------------------------- | --------------------- | -------------------------------- |
+| `text-foreground`                         | `--foreground`        | Selected option text color       |
+| `text-input-placeholder`                  | `--input-placeholder` | Color when no option is selected |
+| `placeholder-input-placeholder`           | `--input-placeholder` | Placeholder styling              |
+| `bg-input-mask-error` (via `group-error`) | `--input-mask-error`  | Placeholder tint in error state  |
+| `text-danger` (via `group-error`)         | `--danger`            | Text color in error state        |
+| `hover:text-primary`                      | `--primary`           | Caret icon hover color           |
+| `h-input-height`                          | `--input-height`      | Control height (2.5 rem)         |
+| `px-input-x`                              | `--input-x`           | Horizontal padding               |
+| `py-input-y`                              | `--input-y`           | Vertical padding                 |
 
 ## Examples
 
@@ -67,21 +67,21 @@ import { useState } from "react";
 import { Select } from "@g4rcez/components/select";
 
 export default function FruitPicker() {
-  const [value, setValue] = useState("");
-
-  return (
-    <Select
-      title="Fruit"
-      options={[
-        { value: "apple", label: "Apple" },
-        { value: "banana", label: "Banana" },
-        { value: "orange", label: "Orange" },
-      ]}
-      placeholder="Select a fruit"
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
+    const [value, setValue] = useState("");
+
+    return (
+        <Select
+            title="Fruit"
+            options={[
+                { value: "apple", label: "Apple" },
+                { value: "banana", label: "Banana" },
+                { value: "orange", label: "Orange" },
+            ]}
+            placeholder="Select a fruit"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+        />
+    );
 }
 ```
 
@@ -92,27 +92,27 @@ import { useState } from "react";
 import { Select } from "@g4rcez/components/select";
 
 export default function CountrySelect() {
-  const [country, setCountry] = useState("");
-  const [error, setError] = useState("");
-
-  return (
-    <Select
-      title="Country"
-      options={[
-        { value: "us", label: "United States" },
-        { value: "ca", label: "Canada" },
-        { value: "uk", label: "United Kingdom" },
-      ]}
-      placeholder="Select country"
-      value={country}
-      error={error}
-      required
-      onChange={(e) => {
-        setCountry(e.target.value);
-        setError(e.target.value ? "" : "Please select a country");
-      }}
-    />
-  );
+    const [country, setCountry] = useState("");
+    const [error, setError] = useState("");
+
+    return (
+        <Select
+            title="Country"
+            options={[
+                { value: "us", label: "United States" },
+                { value: "ca", label: "Canada" },
+                { value: "uk", label: "United Kingdom" },
+            ]}
+            placeholder="Select country"
+            value={country}
+            error={error}
+            required
+            onChange={(e) => {
+                setCountry(e.target.value);
+                setError(e.target.value ? "" : "Please select a country");
+            }}
+        />
+    );
 }
 ```
 
@@ -122,18 +122,18 @@ export default function CountrySelect() {
 import { Select } from "@g4rcez/components/select";
 
 export default function StatusSelect() {
-  return (
-    <Select
-      title="Status"
-      options={[
-        { value: "active", label: "Active" },
-        { value: "pending", label: "Pending" },
-        { value: "legacy", label: "Legacy (deprecated)", disabled: true },
-        { value: "inactive", label: "Inactive" },
-      ]}
-      placeholder="Select status"
-    />
-  );
+    return (
+        <Select
+            title="Status"
+            options={[
+                { value: "active", label: "Active" },
+                { value: "pending", label: "Pending" },
+                { value: "legacy", label: "Legacy (deprecated)", disabled: true },
+                { value: "inactive", label: "Inactive" },
+            ]}
+            placeholder="Select status"
+        />
+    );
 }
 ```
 
@@ -144,29 +144,29 @@ import { useEffect, useState } from "react";
 import { Select } from "@g4rcez/components/select";
 
 export default function AsyncSelect() {
-  const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [value, setValue] = useState("");
-
-  useEffect(() => {
-    setLoading(true);
-    fetchOptions().then((data) => {
-      setOptions(data);
-      setLoading(false);
-    });
-  }, []);
-
-  return (
-    <Select
-      title="Region"
-      options={options}
-      placeholder={loading ? "Loading..." : "Select a region"}
-      value={value}
-      loading={loading}
-      disabled={loading}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
+    const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [value, setValue] = useState("");
+
+    useEffect(() => {
+        setLoading(true);
+        fetchOptions().then((data) => {
+            setOptions(data);
+            setLoading(false);
+        });
+    }, []);
+
+    return (
+        <Select
+            title="Region"
+            options={options}
+            placeholder={loading ? "Loading..." : "Select a region"}
+            value={value}
+            loading={loading}
+            disabled={loading}
+            onChange={(e) => setValue(e.target.value)}
+        />
+    );
 }
 ```
 
@@ -177,21 +177,21 @@ import { Select } from "@g4rcez/components/select";
 import { useForm } from "@g4rcez/components/form";
 
 export default function UserForm() {
-  const form = useForm(schema, "userForm");
-
-  return (
-    <form {...form.props}>
-      <Select
-        {...form.select("role")}
-        options={[
-          { value: "admin", label: "Administrator" },
-          { value: "editor", label: "Editor" },
-          { value: "viewer", label: "Viewer" },
-        ]}
-        placeholder="Select role"
-      />
-    </form>
-  );
+    const form = useForm(schema, "userForm");
+
+    return (
+        <form {...form.props}>
+            <Select
+                {...form.select("role")}
+                options={[
+                    { value: "admin", label: "Administrator" },
+                    { value: "editor", label: "Editor" },
+                    { value: "viewer", label: "Viewer" },
+                ]}
+                placeholder="Select role"
+            />
+        </form>
+    );
 }
 ```
 
@@ -202,47 +202,47 @@ import { useState } from "react";
 import { Select } from "@g4rcez/components/select";
 
 const subcategories: Record<string, { value: string; label: string }[]> = {
-  electronics: [
-    { value: "phones", label: "Phones" },
-    { value: "laptops", label: "Laptops" },
-  ],
-  clothing: [
-    { value: "shirts", label: "Shirts" },
-    { value: "pants", label: "Pants" },
-  ],
+    electronics: [
+        { value: "phones", label: "Phones" },
+        { value: "laptops", label: "Laptops" },
+    ],
+    clothing: [
+        { value: "shirts", label: "Shirts" },
+        { value: "pants", label: "Pants" },
+    ],
 };
 
 export default function CascadingSelect() {
-  const [category, setCategory] = useState("");
-  const [subcategory, setSubcategory] = useState("");
-
-  return (
-    <div className="flex flex-col gap-base">
-      <Select
-        title="Category"
-        options={[
-          { value: "electronics", label: "Electronics" },
-          { value: "clothing", label: "Clothing" },
-        ]}
-        placeholder="Select category"
-        value={category}
-        onChange={(e) => {
-          setCategory(e.target.value);
-          setSubcategory("");
-        }}
-      />
-
-      {category && (
-        <Select
-          title="Subcategory"
-          options={subcategories[category] ?? []}
-          placeholder="Select subcategory"
-          value={subcategory}
-          onChange={(e) => setSubcategory(e.target.value)}
-        />
-      )}
-    </div>
-  );
+    const [category, setCategory] = useState("");
+    const [subcategory, setSubcategory] = useState("");
+
+    return (
+        <div className="flex flex-col gap-base">
+            <Select
+                title="Category"
+                options={[
+                    { value: "electronics", label: "Electronics" },
+                    { value: "clothing", label: "Clothing" },
+                ]}
+                placeholder="Select category"
+                value={category}
+                onChange={(e) => {
+                    setCategory(e.target.value);
+                    setSubcategory("");
+                }}
+            />
+
+            {category && (
+                <Select
+                    title="Subcategory"
+                    options={subcategories[category] ?? []}
+                    placeholder="Select subcategory"
+                    value={subcategory}
+                    onChange={(e) => setSubcategory(e.target.value)}
+                />
+            )}
+        </div>
+    );
 }
 ```
 
@@ -271,10 +271,10 @@ export default function CascadingSelect() {
 
 ## Data Attributes
 
-| Attribute | Element | Value | Description |
-|-----------|---------|-------|-------------|
-| `data-component` | `InputField` root | `"select"` | Identifies the component. |
-| `data-selected` | `<select>` | `"true" \| "false"` | Whether a non-placeholder option is selected. |
+| Attribute        | Element           | Value               | Description                                   |
+| ---------------- | ----------------- | ------------------- | --------------------------------------------- |
+| `data-component` | `InputField` root | `"select"`          | Identifies the component.                     |
+| `data-selected`  | `<select>`        | `"true" \| "false"` | Whether a non-placeholder option is selected. |
 
 ## Notes
 

package/ai/docs/Shortcut.md

@@ -19,9 +19,9 @@ import { Shortcut } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | — | Shortcut string to display, e.g. `"Mod + K"` or `"Shift + Alt + P"` |
+| Prop    | Type     | Default | Description                                                         |
+| ------- | -------- | ------- | ------------------------------------------------------------------- |
+| `value` | `string` | —       | Shortcut string to display, e.g. `"Mod + K"` or `"Shift + Alt + P"` |
 
 ## Design Tokens
 
@@ -31,10 +31,10 @@ The `Shortcut` component inherits text color and size from its parent. No compon
 
 The component automatically maps keys based on the user's operating system:
 
-| Key token | macOS | Other |
-|-----------|-------|-------|
-| `Mod` | `⌘` (CommandIcon, `size={12}`) | `Ctrl` |
-| `Alt` | `⌥` (OptionIcon, `size={12}`) | `Alt` |
+| Key token | macOS                          | Other  |
+| --------- | ------------------------------ | ------ |
+| `Mod`     | `⌘` (CommandIcon, `size={12}`) | `Ctrl` |
+| `Alt`     | `⌥` (OptionIcon, `size={12}`)  | `Alt`  |
 
 All other key tokens are rendered as-is.
 
@@ -50,9 +50,9 @@ All other key tokens are rendered as-is.
 
 ```tsx
 <Tooltip title="Save changes">
-  <div className="flex gap-2 items-center">
-    Save <Shortcut value="Mod + S" />
-  </div>
+    <div className="flex gap-2 items-center">
+        Save <Shortcut value="Mod + S" />
+    </div>
 </Tooltip>
 ```
 
@@ -60,8 +60,8 @@ All other key tokens are rendered as-is.
 
 ```tsx
 <div className="flex items-center justify-between w-full">
-  <span>Open command palette</span>
-  <Shortcut value="Mod + K" />
+    <span>Open command palette</span>
+    <Shortcut value="Mod + K" />
 </div>
 ```
 
@@ -76,8 +76,8 @@ All other key tokens are rendered as-is.
 
 ```tsx
 <div className="flex items-center justify-between px-4 py-2">
-  <span className="text-foreground">New File</span>
-  <Shortcut value="Mod + N" />
+    <span className="text-foreground">New File</span>
+    <Shortcut value="Mod + N" />
 </div>
 ```
 

package/ai/docs/Skeleton.md

@@ -27,11 +27,11 @@ A pre-built table-cell skeleton with `h-6 w-10/12 animate-pulse rounded bg-muted
 
 A configurable block skeleton.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | — | Override or extend dimensions and shape |
-| `as` | `React.ElementType` | `"span"` | Polymorphic root element |
-| `style` | `CSSProperties` | — | Inline styles (e.g. dynamic `width`) |
+| Prop        | Type                | Default  | Description                             |
+| ----------- | ------------------- | -------- | --------------------------------------- |
+| `className` | `string`            | —        | Override or extend dimensions and shape |
+| `as`        | `React.ElementType` | `"span"` | Polymorphic root element                |
+| `style`     | `CSSProperties`     | —        | Inline styles (e.g. dynamic `width`)    |
 
 Default appearance: `block h-8 w-32 animate-pulse rounded bg-muted`.
 
@@ -39,18 +39,18 @@ Default appearance: `block h-8 w-32 animate-pulse rounded bg-muted`.
 
 A vertical list of randomized-width `Skeleton` lines.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `rows` | `number` | — | Number of skeleton lines to render |
-| `className` | `string` | — | Additional classes for the `<ul>` container |
+| Prop        | Type     | Default | Description                                 |
+| ----------- | -------- | ------- | ------------------------------------------- |
+| `rows`      | `number` | —       | Number of skeleton lines to render          |
+| `className` | `string` | —       | Additional classes for the `<ul>` container |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-muted` | `--muted` | Pulse animation background for all skeleton variants |
+| Token      | CSS Variable | Purpose                                              |
+| ---------- | ------------ | ---------------------------------------------------- |
+| `bg-muted` | `--muted`    | Pulse animation background for all skeleton variants |
 
 ## Examples
 
@@ -58,19 +58,25 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 function TableSkeleton() {
-  return (
-    <table className="w-full">
-      <tbody>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <tr key={index} className="border-b border-border">
-            <td className="py-3 px-4"><SkeletonCell /></td>
-            <td className="py-3 px-4"><SkeletonCell /></td>
-            <td className="py-3 px-4"><SkeletonCell /></td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
+    return (
+        <table className="w-full">
+            <tbody>
+                {Array.from({ length: 5 }).map((_, index) => (
+                    <tr key={index} className="border-b border-border">
+                        <td className="py-3 px-4">
+                            <SkeletonCell />
+                        </td>
+                        <td className="py-3 px-4">
+                            <SkeletonCell />
+                        </td>
+                        <td className="py-3 px-4">
+                            <SkeletonCell />
+                        </td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
 }
 ```
 
@@ -78,20 +84,20 @@ function TableSkeleton() {
 
 ```tsx
 function CardSkeleton() {
-  return (
-    <div className="rounded-card border border-card-border bg-card-background p-6 space-y-4">
-      <Skeleton className="h-4 w-3/4" />
-      <div className="space-y-2">
-        <SkeletonCell />
-        <SkeletonCell />
-        <Skeleton className="h-2 w-1/2" />
-      </div>
-      <div className="flex gap-2">
-        <Skeleton className="h-8 w-20" />
-        <Skeleton className="h-8 w-16" />
-      </div>
-    </div>
-  );
+    return (
+        <div className="rounded-card border border-card-border bg-card-background p-6 space-y-4">
+            <Skeleton className="h-4 w-3/4" />
+            <div className="space-y-2">
+                <SkeletonCell />
+                <SkeletonCell />
+                <Skeleton className="h-2 w-1/2" />
+            </div>
+            <div className="flex gap-2">
+                <Skeleton className="h-8 w-20" />
+                <Skeleton className="h-8 w-16" />
+            </div>
+        </div>
+    );
 }
 ```
 
@@ -105,15 +111,7 @@ function CardSkeleton() {
 
 ```tsx
 function DataSection({ data, loading }: { data?: Item; loading: boolean }) {
-  return (
-    <div>
-      {loading ? (
-        <Skeleton className="h-6 w-full" />
-      ) : (
-        <p>{data?.name}</p>
-      )}
-    </div>
-  );
+    return <div>{loading ? <Skeleton className="h-6 w-full" /> : <p>{data?.name}</p>}</div>;
 }
 ```
 
@@ -121,15 +119,15 @@ function DataSection({ data, loading }: { data?: Item; loading: boolean }) {
 
 ```tsx
 function UserRowSkeleton() {
-  return (
-    <div className="flex items-center gap-3">
-      <Skeleton className="size-10 rounded-full" />
-      <div className="flex-1 space-y-1">
-        <SkeletonCell />
-        <Skeleton className="h-2 w-1/3" />
-      </div>
-    </div>
-  );
+    return (
+        <div className="flex items-center gap-3">
+            <Skeleton className="size-10 rounded-full" />
+            <div className="flex-1 space-y-1">
+                <SkeletonCell />
+                <Skeleton className="h-2 w-1/3" />
+            </div>
+        </div>
+    );
 }
 ```
 
@@ -155,9 +153,7 @@ function UserRowSkeleton() {
 - Consider `aria-label="Loading content"` on the skeleton container for additional context.
 
 ```tsx
-<div aria-live="polite">
-  {loading ? <SkeletonCell /> : <ActualContent />}
-</div>
+<div aria-live="polite">{loading ? <SkeletonCell /> : <ActualContent />}</div>
 ```
 
 ## Notes