@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Modal.md

@@ -19,36 +19,36 @@ import { Modal, ModalConfirmProvider, useConfirm } from "@g4rcez/components/moda
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | — | Controls modal visibility |
-| `onChange` | `(nextState: boolean) => void` | — | Callback when modal state changes |
-| `title` | `React.ReactNode` | — | Modal title; creates a `<h2>` header |
-| `ariaTitle` | `string` | — | ARIA label used when no visible `title` is provided |
-| `footer` | `React.ReactNode` | — | Footer content |
-| `type` | `"dialog" \| "drawer" \| "sheet"` | `"dialog"` | Modal display variant |
-| `position` | `"left" \| "right"` | `"right"` | Drawer slide-in side (drawer type only) |
-| `animated` | `boolean` | `true` | Enable enter/exit animations |
-| `closable` | `boolean` | `true` | Show the close button |
-| `resizer` | `boolean` | `true` | Show the drag-to-resize handle (drawer and sheet) |
-| `forceType` | `boolean` | `false` | Disable responsive behavior — keep `type` on all screen sizes |
-| `overlayClickClose` | `boolean` | `false` | Close when clicking the backdrop |
-| `trigger` | `React.ReactNode \| React.FC` | — | Element that toggles the modal when clicked |
-| `asChild` | `boolean` | `false` | Merge trigger props onto the child element via `Slot` |
-| `className` | `string` | — | Additional classes for the modal surface |
-| `bodyClassName` | `string` | — | Additional classes for the scrollable body |
-| `overlayClassName` | `string` | — | Additional classes for the backdrop overlay |
-| `layoutId` | `string` | — | Framer Motion layout ID for shared-element transitions |
-| `role` | `"dialog"` | `"dialog"` | ARIA role |
-| `interactions` | `ElementProps[]` | `[]` | Extra Floating UI interaction hooks |
+| Prop                | Type                              | Default    | Description                                                   |
+| ------------------- | --------------------------------- | ---------- | ------------------------------------------------------------- |
+| `open`              | `boolean`                         | —          | Controls modal visibility                                     |
+| `onChange`          | `(nextState: boolean) => void`    | —          | Callback when modal state changes                             |
+| `title`             | `React.ReactNode`                 | —          | Modal title; creates a `<h2>` header                          |
+| `ariaTitle`         | `string`                          | —          | ARIA label used when no visible `title` is provided           |
+| `footer`            | `React.ReactNode`                 | —          | Footer content                                                |
+| `type`              | `"dialog" \| "drawer" \| "sheet"` | `"dialog"` | Modal display variant                                         |
+| `position`          | `"left" \| "right"`               | `"right"`  | Drawer slide-in side (drawer type only)                       |
+| `animated`          | `boolean`                         | `true`     | Enable enter/exit animations                                  |
+| `closable`          | `boolean`                         | `true`     | Show the close button                                         |
+| `resizer`           | `boolean`                         | `true`     | Show the drag-to-resize handle (drawer and sheet)             |
+| `forceType`         | `boolean`                         | `false`    | Disable responsive behavior — keep `type` on all screen sizes |
+| `overlayClickClose` | `boolean`                         | `false`    | Close when clicking the backdrop                              |
+| `trigger`           | `React.ReactNode \| React.FC`     | —          | Element that toggles the modal when clicked                   |
+| `asChild`           | `boolean`                         | `false`    | Merge trigger props onto the child element via `Slot`         |
+| `className`         | `string`                          | —          | Additional classes for the modal surface                      |
+| `bodyClassName`     | `string`                          | —          | Additional classes for the scrollable body                    |
+| `overlayClassName`  | `string`                          | —          | Additional classes for the backdrop overlay                   |
+| `layoutId`          | `string`                          | —          | Framer Motion layout ID for shared-element transitions        |
+| `role`              | `"dialog"`                        | `"dialog"` | ARIA role                                                     |
+| `interactions`      | `ElementProps[]`                  | `[]`       | Extra Floating UI interaction hooks                           |
 
 ## Modal Types
 
-| Type | Behavior | Best for |
-|------|----------|---------|
-| `dialog` | Centered overlay with backdrop | Confirmations, forms |
+| Type     | Behavior                                  | Best for                  |
+| -------- | ----------------------------------------- | ------------------------- |
+| `dialog` | Centered overlay with backdrop            | Confirmations, forms      |
 | `drawer` | Slides in from left or right; full height | Navigation, detail panels |
-| `sheet` | Slides up from bottom; full width | Mobile action sheets |
+| `sheet`  | Slides up from bottom; full width         | Mobile action sheets      |
 
 On mobile (`< 64 rem`) drawers automatically become sheets unless `forceType` is set.
 
@@ -56,16 +56,16 @@ On mobile (`< 64 rem`) drawers automatically become sheets unless `forceType` is
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-floating-background` | `--floating-background` | Modal surface background |
-| `border-floating-border` | `--floating-border` | Modal border, header/footer dividers, resizer |
-| `bg-floating-overlay` | `--floating-overlay` | Backdrop color (with `/70` opacity) |
-| `z-overlay` | `--z-overlay` | Z-index of the backdrop |
-| `z-floating` | `--z-floating` | Z-index of the modal surface and close button |
-| `w-dialog` | `--dialog` | Default max-width for dialog type (`max-w-dialog`) |
-| `text-foreground` | `--foreground` | Body text color |
-| `text-danger` | `--danger` | Close button hover color |
+| Token                    | CSS Variable            | Purpose                                            |
+| ------------------------ | ----------------------- | -------------------------------------------------- |
+| `bg-floating-background` | `--floating-background` | Modal surface background                           |
+| `border-floating-border` | `--floating-border`     | Modal border, header/footer dividers, resizer      |
+| `bg-floating-overlay`    | `--floating-overlay`    | Backdrop color (with `/70` opacity)                |
+| `z-overlay`              | `--z-overlay`           | Z-index of the backdrop                            |
+| `z-floating`             | `--z-floating`          | Z-index of the modal surface and close button      |
+| `w-dialog`               | `--dialog`              | Default max-width for dialog type (`max-w-dialog`) |
+| `text-foreground`        | `--foreground`          | Body text color                                    |
+| `text-danger`            | `--danger`              | Close button hover color                           |
 
 ## Examples
 
@@ -77,25 +77,25 @@ import { Modal } from "@g4rcez/components/modal";
 import { Button } from "@g4rcez/components/button";
 
 function BasicDialog() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
-
-      <Modal open={open} onChange={setOpen} title="Confirm Action">
-        <p className="text-foreground">Are you sure you want to proceed?</p>
-        <div className="flex gap-2 mt-4">
-          <Button theme="ghost-muted" onClick={() => setOpen(false)}>
-            Cancel
-          </Button>
-          <Button theme="danger" onClick={() => setOpen(false)}>
-            Confirm
-          </Button>
-        </div>
-      </Modal>
-    </>
-  );
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+
+            <Modal open={open} onChange={setOpen} title="Confirm Action">
+                <p className="text-foreground">Are you sure you want to proceed?</p>
+                <div className="flex gap-2 mt-4">
+                    <Button theme="ghost-muted" onClick={() => setOpen(false)}>
+                        Cancel
+                    </Button>
+                    <Button theme="danger" onClick={() => setOpen(false)}>
+                        Confirm
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
 }
 ```
 
@@ -103,48 +103,42 @@ function BasicDialog() {
 
 ```tsx
 <Modal
-  open={open}
-  onChange={setOpen}
-  title="User Profile"
-  footer={
-    <div className="flex justify-end gap-2">
-      <Button theme="ghost-muted" onClick={() => setOpen(false)}>
-        Cancel
-      </Button>
-      <Button theme="primary">Save Changes</Button>
-    </div>
-  }
+    open={open}
+    onChange={setOpen}
+    title="User Profile"
+    footer={
+        <div className="flex justify-end gap-2">
+            <Button theme="ghost-muted" onClick={() => setOpen(false)}>
+                Cancel
+            </Button>
+            <Button theme="primary">Save Changes</Button>
+        </div>
+    }
 >
-  <form className="space-y-4">
-    <div>
-      <label className="text-sm font-medium text-foreground">Name</label>
-      <input type="text" className="w-full p-2 rounded-button border border-border bg-background text-foreground" />
-    </div>
-  </form>
+    <form className="space-y-4">
+        <div>
+            <label className="text-sm font-medium text-foreground">Name</label>
+            <input type="text" className="w-full p-2 rounded-button border border-border bg-background text-foreground" />
+        </div>
+    </form>
 </Modal>
 ```
 
 ### Drawer
 
 ```tsx
-<Modal
-  open={open}
-  onChange={setOpen}
-  type="drawer"
-  position="right"
-  title="Navigation"
->
-  <nav className="space-y-2">
-    <a href="/dashboard" className="block rounded-button p-2 text-foreground hover:bg-muted">
-      Dashboard
-    </a>
-    <a href="/profile" className="block rounded-button p-2 text-foreground hover:bg-muted">
-      Profile
-    </a>
-    <a href="/settings" className="block rounded-button p-2 text-foreground hover:bg-muted">
-      Settings
-    </a>
-  </nav>
+<Modal open={open} onChange={setOpen} type="drawer" position="right" title="Navigation">
+    <nav className="space-y-2">
+        <a href="/dashboard" className="block rounded-button p-2 text-foreground hover:bg-muted">
+            Dashboard
+        </a>
+        <a href="/profile" className="block rounded-button p-2 text-foreground hover:bg-muted">
+            Profile
+        </a>
+        <a href="/settings" className="block rounded-button p-2 text-foreground hover:bg-muted">
+            Settings
+        </a>
+    </nav>
 </Modal>
 ```
 
@@ -152,27 +146,22 @@ function BasicDialog() {
 
 ```tsx
 <Modal open={open} onChange={setOpen} type="sheet" title="Quick Actions">
-  <div className="grid grid-cols-2 gap-4">
-    <Button theme="ghost-neutral" className="flex-col h-24">
-      Analytics
-    </Button>
-    <Button theme="ghost-neutral" className="flex-col h-24">
-      Revenue
-    </Button>
-  </div>
+    <div className="grid grid-cols-2 gap-4">
+        <Button theme="ghost-neutral" className="flex-col h-24">
+            Analytics
+        </Button>
+        <Button theme="ghost-neutral" className="flex-col h-24">
+            Revenue
+        </Button>
+    </div>
 </Modal>
 ```
 
 ### Modal with Built-in Trigger
 
 ```tsx
-<Modal
-  open={open}
-  onChange={setOpen}
-  title="Settings"
-  trigger={<Button theme="primary">Open Settings</Button>}
->
-  <p className="text-foreground">Settings content here.</p>
+<Modal open={open} onChange={setOpen} title="Settings" trigger={<Button theme="primary">Open Settings</Button>}>
+    <p className="text-foreground">Settings content here.</p>
 </Modal>
 ```
 
@@ -180,10 +169,10 @@ function BasicDialog() {
 
 ```tsx
 <Modal open={open} onChange={setOpen} title="Processing..." closable={false}>
-  <div className="text-center text-foreground">
-    <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4" />
-    <p>Please wait while we process your request.</p>
-  </div>
+    <div className="text-center text-foreground">
+        <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4" />
+        <p>Please wait while we process your request.</p>
+    </div>
 </Modal>
 ```
 
@@ -195,7 +184,7 @@ Wrap your app with `ModalConfirmProvider` once:
 import { ModalConfirmProvider } from "@g4rcez/components/modal";
 
 export default function App({ children }) {
-  return <ModalConfirmProvider>{children}</ModalConfirmProvider>;
+    return <ModalConfirmProvider>{children}</ModalConfirmProvider>;
 }
 ```
 
@@ -205,16 +194,16 @@ Then call `Modal.confirm` anywhere:
 import { Modal } from "@g4rcez/components/modal";
 
 async function handleDelete() {
-  const confirmed = await Modal.confirm({
-    title: "Delete item",
-    description: "This action cannot be undone.",
-    confirm: { text: "Delete", theme: "danger" },
-    cancel: { text: "Cancel" },
-  });
-
-  if (confirmed) {
-    // proceed with deletion
-  }
+    const confirmed = await Modal.confirm({
+        title: "Delete item",
+        description: "This action cannot be undone.",
+        confirm: { text: "Delete", theme: "danger" },
+        cancel: { text: "Cancel" },
+    });
+
+    if (confirmed) {
+        // proceed with deletion
+    }
 }
 ```
 
@@ -224,19 +213,23 @@ Or use the `useConfirm` hook inside a `ModalConfirmProvider` subtree:
 import { useConfirm } from "@g4rcez/components/modal";
 
 function DeleteButton() {
-  const confirm = useConfirm();
-
-  const handleClick = async () => {
-    const ok = await confirm({
-      title: "Delete item",
-      description: "Are you sure?",
-    });
-    if (ok) {
-      // delete
-    }
-  };
-
-  return <Button theme="danger" onClick={handleClick}>Delete</Button>;
+    const confirm = useConfirm();
+
+    const handleClick = async () => {
+        const ok = await confirm({
+            title: "Delete item",
+            description: "Are you sure?",
+        });
+        if (ok) {
+            // delete
+        }
+    };
+
+    return (
+        <Button theme="danger" onClick={handleClick}>
+            Delete
+        </Button>
+    );
 }
 ```
 
@@ -266,9 +259,9 @@ function DeleteButton() {
 
 ## Data Attributes
 
-| Attribute | Applied to | Description |
-|-----------|-----------|-------------|
-| `data-component="modal"` | Modal surface `<div>` | Identifies the modal root |
+| Attribute                     | Applied to                  | Description                 |
+| ----------------------------- | --------------------------- | --------------------------- |
+| `data-component="modal"`      | Modal surface `<div>`       | Identifies the modal root   |
 | `data-component="modal-body"` | Scrollable body `<section>` | Identifies the content area |
 
 ## Notes

package/ai/docs/MultiSelect.md

@@ -21,46 +21,46 @@ import { MultiSelect } from "@g4rcez/components";
 
 The `MultiSelect` component inherits all props from `InputField`, plus:
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `MultiSelectItemProps[]` | — | Array of `{ value, label, Render? }` option objects. |
-| `value` | `string[]` | — | Controlled selected values. |
-| `defaultValue` | `string[]` | `[]` | Initial selected values for uncontrolled usage. |
-| `onChangeOptions` | `(options: string[]) => void` | — | Called when the selection changes. |
-| `dynamicOption` | `boolean` | `false` | Allows users to select their search query as a new option. |
-| `emptyMessage` | `Label` | — | Message shown when no options match the search. |
-| `selectedLabel` | `string` | — | Text shown in the overflow counter (e.g., "selected"). |
+| Prop              | Type                          | Default | Description                                                |
+| ----------------- | ----------------------------- | ------- | ---------------------------------------------------------- |
+| `options`         | `MultiSelectItemProps[]`      | —       | Array of `{ value, label, Render? }` option objects.       |
+| `value`           | `string[]`                    | —       | Controlled selected values.                                |
+| `defaultValue`    | `string[]`                    | `[]`    | Initial selected values for uncontrolled usage.            |
+| `onChangeOptions` | `(options: string[]) => void` | —       | Called when the selection changes.                         |
+| `dynamicOption`   | `boolean`                     | `false` | Allows users to select their search query as a new option. |
+| `emptyMessage`    | `Label`                       | —       | Message shown when no options match the search.            |
+| `selectedLabel`   | `string`                      | —       | Text shown in the overflow counter (e.g., "selected").     |
 
 ### MultiSelectItemProps
 
 Extends `OptionProps` with an optional custom renderer:
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `value` | `string` | Option value. |
-| `label` | `string` | Option display text. |
+| Field    | Type                    | Description                                   |
+| -------- | ----------------------- | --------------------------------------------- |
+| `value`  | `string`                | Option value.                                 |
+| `label`  | `string`                | Option display text.                          |
 | `Render` | `React.FC<OptionProps>` | Custom render component for the dropdown row. |
-| `hidden` | `boolean` | Hides the option from the list. |
+| `hidden` | `boolean`               | Hides the option from the list.               |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `placeholder-input-mask` | `--input-mask` | Placeholder text color |
-| `placeholder-input-mask-error` | `--input-mask-error` | Placeholder color in error state |
-| `border-input-border` | `--input-border` | Search input bottom border in dropdown |
-| `bg-floating-background` | `--floating-background` | Dropdown panel background |
-| `border-floating-border` | `--floating-border` | Dropdown panel border |
-| `bg-floating-hover` | `--floating-hover` | Option row hover/active background |
-| `text-foreground` | `--foreground` | Option text color |
-| `text-input-placeholder` | `--input-placeholder` | Placeholder li color |
-| `text-disabled` | `--disabled` | Empty-state text color |
-| `focus:ring-primary` | `--primary` | Keyboard focus ring |
-| `h-input-height` | `--input-height` | Trigger element height (2.5 rem) |
-| `px-input-x` | `--input-x` | Horizontal padding |
-| `py-input-y` | `--input-y` | Vertical padding |
+| Token                          | CSS Variable            | Purpose                                |
+| ------------------------------ | ----------------------- | -------------------------------------- |
+| `placeholder-input-mask`       | `--input-mask`          | Placeholder text color                 |
+| `placeholder-input-mask-error` | `--input-mask-error`    | Placeholder color in error state       |
+| `border-input-border`          | `--input-border`        | Search input bottom border in dropdown |
+| `bg-floating-background`       | `--floating-background` | Dropdown panel background              |
+| `border-floating-border`       | `--floating-border`     | Dropdown panel border                  |
+| `bg-floating-hover`            | `--floating-hover`      | Option row hover/active background     |
+| `text-foreground`              | `--foreground`          | Option text color                      |
+| `text-input-placeholder`       | `--input-placeholder`   | Placeholder li color                   |
+| `text-disabled`                | `--disabled`            | Empty-state text color                 |
+| `focus:ring-primary`           | `--primary`             | Keyboard focus ring                    |
+| `h-input-height`               | `--input-height`        | Trigger element height (2.5 rem)       |
+| `px-input-x`                   | `--input-x`             | Horizontal padding                     |
+| `py-input-y`                   | `--input-y`             | Vertical padding                       |
 
 ## Examples
 
@@ -70,19 +70,13 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { MultiSelect } from "@g4rcez/components";
 
 const options = [
-  { value: "react", label: "React" },
-  { value: "vue", label: "Vue" },
-  { value: "angular", label: "Angular" },
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
 ];
 
 export default function FrameworkPicker() {
-  return (
-    <MultiSelect
-      title="Frameworks"
-      options={options}
-      onChangeOptions={(values) => console.log(values)}
-    />
-  );
+    return <MultiSelect title="Frameworks" options={options} onChangeOptions={(values) => console.log(values)} />;
 }
 ```
 
@@ -93,20 +87,20 @@ import { useState } from "react";
 import { MultiSelect } from "@g4rcez/components";
 
 export default function ControlledMultiSelect() {
-  const [selected, setSelected] = useState<string[]>(["react"]);
-
-  return (
-    <MultiSelect
-      title="Frameworks"
-      options={[
-        { value: "react", label: "React" },
-        { value: "vue", label: "Vue" },
-        { value: "angular", label: "Angular" },
-      ]}
-      value={selected}
-      onChangeOptions={setSelected}
-    />
-  );
+    const [selected, setSelected] = useState<string[]>(["react"]);
+
+    return (
+        <MultiSelect
+            title="Frameworks"
+            options={[
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" },
+                { value: "angular", label: "Angular" },
+            ]}
+            value={selected}
+            onChangeOptions={setSelected}
+        />
+    );
 }
 ```
 
@@ -117,24 +111,18 @@ import { ShieldIcon } from "@phosphor-icons/react";
 import { MultiSelect } from "@g4rcez/components";
 
 const roleOptions = roles.map((r) => ({
-  value: r.id,
-  label: r.name,
-  Render: () => (
-    <span className="flex items-center gap-base">
-      <ShieldIcon size={14} className="text-primary" />
-      {r.name}
-    </span>
-  ),
+    value: r.id,
+    label: r.name,
+    Render: () => (
+        <span className="flex items-center gap-base">
+            <ShieldIcon size={14} className="text-primary" />
+            {r.name}
+        </span>
+    ),
 }));
 
 export default function RolePicker() {
-  return (
-    <MultiSelect
-      title="Roles"
-      options={roleOptions}
-      onChangeOptions={(ids) => console.log(ids)}
-    />
-  );
+    return <MultiSelect title="Roles" options={roleOptions} onChangeOptions={(ids) => console.log(ids)} />;
 }
 ```
 
@@ -144,14 +132,7 @@ export default function RolePicker() {
 import { MultiSelect } from "@g4rcez/components";
 
 export default function TagInput() {
-  return (
-    <MultiSelect
-      title="Tags"
-      dynamicOption
-      options={existingTags}
-      onChangeOptions={(tags) => console.log(tags)}
-    />
-  );
+    return <MultiSelect title="Tags" dynamicOption options={existingTags} onChangeOptions={(tags) => console.log(tags)} />;
 }
 ```
 
@@ -178,14 +159,14 @@ export default function TagInput() {
 
 ## Data Attributes
 
-| Attribute | Element | Value | Description |
-|-----------|---------|-------|-------------|
-| `data-component` | trigger `ul` | `"autocomplete"` | Identifies the component type. |
-| `data-shadow` | trigger `ul` | `"true"` | Marks the visual shadow trigger. |
-| `data-value` | trigger `ul` | JSON string | Currently selected values as a JSON array. |
-| `data-floating` | dropdown root | `"true"` | Marks the floating panel. |
-| `data-dynamic` | option button | `"true"` | Marks options injected via `dynamicOption`. |
-| `data-error` | trigger `ul` | boolean string | Reflects the error state. |
+| Attribute        | Element       | Value            | Description                                 |
+| ---------------- | ------------- | ---------------- | ------------------------------------------- |
+| `data-component` | trigger `ul`  | `"autocomplete"` | Identifies the component type.              |
+| `data-shadow`    | trigger `ul`  | `"true"`         | Marks the visual shadow trigger.            |
+| `data-value`     | trigger `ul`  | JSON string      | Currently selected values as a JSON array.  |
+| `data-floating`  | dropdown root | `"true"`         | Marks the floating panel.                   |
+| `data-dynamic`   | option button | `"true"`         | Marks options injected via `dynamicOption`. |
+| `data-error`     | trigger `ul`  | boolean string   | Reflects the error state.                   |
 
 ## Notes