@g4rcez/components 4.0.2 → 4.1.2

package/ai/docs/Tabs.md

@@ -21,35 +21,35 @@ import { Tabs, Tab } from "@g4rcez/components/tabs";
 
 ### Tabs (Container)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `active` | `string` | — | ID of the currently active tab |
-| `onChange` | `(id: string) => void` | — | Called when the active tab changes |
-| `container` | `string` | — | Additional classes for the outer card container |
-| `className` | `string` | — | Additional classes for the card body (content area) |
-| `children` | `Tab[]` | — | `Tab` panel components |
+| Prop        | Type                   | Default | Description                                         |
+| ----------- | ---------------------- | ------- | --------------------------------------------------- |
+| `active`    | `string`               | —       | ID of the currently active tab                      |
+| `onChange`  | `(id: string) => void` | —       | Called when the active tab changes                  |
+| `container` | `string`               | —       | Additional classes for the outer card container     |
+| `className` | `string`               | —       | Additional classes for the card body (content area) |
+| `children`  | `Tab[]`                | —       | `Tab` panel components                              |
 
 ### Tab (Panel)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | — | Unique identifier; matched against `Tabs.active` |
-| `title` | `string` | — | Tab button label (use when label is a plain string) |
-| `label` | `string` | — | Accessible label when `title` is a non-string React element |
-| `disabled` | `boolean` | `false` | Disables the tab button and skips it during keyboard navigation |
-| `children` | `React.ReactNode` | — | Panel content rendered when this tab is active |
+| Prop       | Type              | Default | Description                                                     |
+| ---------- | ----------------- | ------- | --------------------------------------------------------------- |
+| `id`       | `string`          | —       | Unique identifier; matched against `Tabs.active`                |
+| `title`    | `string`          | —       | Tab button label (use when label is a plain string)             |
+| `label`    | `string`          | —       | Accessible label when `title` is a non-string React element     |
+| `disabled` | `boolean`         | `false` | Disables the tab button and skips it during keyboard navigation |
+| `children` | `React.ReactNode` | —       | Panel content rendered when this tab is active                  |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-card-background` | `--card-background` | Tab panel surface |
-| `border-card-border` | `--card-border` | Tab bar bottom line and card border |
-| `border-primary` | `--primary` | Active tab bottom indicator |
-| `text-primary` | `--primary` | Active tab text color |
-| `text-disabled` | `--disabled` | Disabled tab text |
+| Token                | CSS Variable        | Purpose                             |
+| -------------------- | ------------------- | ----------------------------------- |
+| `bg-card-background` | `--card-background` | Tab panel surface                   |
+| `border-card-border` | `--card-border`     | Tab bar bottom line and card border |
+| `border-primary`     | `--primary`         | Active tab bottom indicator         |
+| `text-primary`       | `--primary`         | Active tab text color               |
+| `text-disabled`      | `--disabled`        | Disabled tab text                   |
 
 ## Examples
 
@@ -59,38 +59,38 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 const [active, setActive] = useState("overview");
 
 <Tabs active={active} onChange={setActive}>
-  <Tab id="overview" title="Overview">
-    <h3>Project Overview</h3>
-    <p>This is the overview of your project.</p>
-  </Tab>
-
-  <Tab id="details" title="Details">
-    <h3>Project Details</h3>
-    <p>Detailed information about your project.</p>
-  </Tab>
-
-  <Tab id="settings" title="Settings">
-    <h3>Project Settings</h3>
-    <p>Configure your project settings here.</p>
-  </Tab>
-</Tabs>
+    <Tab id="overview" title="Overview">
+        <h3>Project Overview</h3>
+        <p>This is the overview of your project.</p>
+    </Tab>
+
+    <Tab id="details" title="Details">
+        <h3>Project Details</h3>
+        <p>Detailed information about your project.</p>
+    </Tab>
+
+    <Tab id="settings" title="Settings">
+        <h3>Project Settings</h3>
+        <p>Configure your project settings here.</p>
+    </Tab>
+</Tabs>;
 ```
 
 ### Tabs with Disabled State
 
 ```tsx
 <Tabs active={activeTab} onChange={setActiveTab}>
-  <Tab id="available" title="Available">
-    <p>This tab is available.</p>
-  </Tab>
+    <Tab id="available" title="Available">
+        <p>This tab is available.</p>
+    </Tab>
 
-  <Tab id="locked" title="Locked" disabled>
-    <p>This content is not accessible yet.</p>
-  </Tab>
+    <Tab id="locked" title="Locked" disabled>
+        <p>This content is not accessible yet.</p>
+    </Tab>
 
-  <Tab id="also-available" title="Also Available">
-    <p>This tab is also available.</p>
-  </Tab>
+    <Tab id="also-available" title="Also Available">
+        <p>This tab is also available.</p>
+    </Tab>
 </Tabs>
 ```
 
@@ -98,15 +98,15 @@ const [active, setActive] = useState("overview");
 
 ```tsx
 <Tabs active={activeTab} onChange={setActiveTab}>
-  <Tab id="general" title="General">
-    <GeneralSettings />
-  </Tab>
-  <Tab id="privacy" title="Privacy">
-    <PrivacySettings />
-  </Tab>
-  <Tab id="notifications" title="Notifications">
-    <NotificationSettings />
-  </Tab>
+    <Tab id="general" title="General">
+        <GeneralSettings />
+    </Tab>
+    <Tab id="privacy" title="Privacy">
+        <PrivacySettings />
+    </Tab>
+    <Tab id="notifications" title="Notifications">
+        <NotificationSettings />
+    </Tab>
 </Tabs>
 ```
 
@@ -114,33 +114,33 @@ const [active, setActive] = useState("overview");
 
 ```tsx
 function DynamicTabs() {
-  const [tabs, setTabs] = useState([
-    { id: "tab1", title: "Tab 1", content: "Content 1" },
-    { id: "tab2", title: "Tab 2", content: "Content 2" },
-  ]);
-  const [activeTab, setActiveTab] = useState("tab1");
-
-  const addTab = () => {
-    const newId = `tab${tabs.length + 1}`;
-    setTabs([...tabs, { id: newId, title: `Tab ${tabs.length + 1}`, content: `Content ${tabs.length + 1}` }]);
-    setActiveTab(newId);
-  };
-
-  return (
-    <div className="space-y-4">
-      <button onClick={addTab} className="px-3 py-1 bg-primary text-primary-foreground rounded-button">
-        Add Tab
-      </button>
-
-      <Tabs active={activeTab} onChange={setActiveTab}>
-        {tabs.map((tab) => (
-          <Tab key={tab.id} id={tab.id} title={tab.title}>
-            <p>{tab.content}</p>
-          </Tab>
-        ))}
-      </Tabs>
-    </div>
-  );
+    const [tabs, setTabs] = useState([
+        { id: "tab1", title: "Tab 1", content: "Content 1" },
+        { id: "tab2", title: "Tab 2", content: "Content 2" },
+    ]);
+    const [activeTab, setActiveTab] = useState("tab1");
+
+    const addTab = () => {
+        const newId = `tab${tabs.length + 1}`;
+        setTabs([...tabs, { id: newId, title: `Tab ${tabs.length + 1}`, content: `Content ${tabs.length + 1}` }]);
+        setActiveTab(newId);
+    };
+
+    return (
+        <div className="space-y-4">
+            <button onClick={addTab} className="px-3 py-1 bg-primary text-primary-foreground rounded-button">
+                Add Tab
+            </button>
+
+            <Tabs active={activeTab} onChange={setActiveTab}>
+                {tabs.map((tab) => (
+                    <Tab key={tab.id} id={tab.id} title={tab.title}>
+                        <p>{tab.content}</p>
+                    </Tab>
+                ))}
+            </Tabs>
+        </div>
+    );
 }
 ```
 
@@ -148,15 +148,15 @@ function DynamicTabs() {
 
 ```tsx
 <Tabs active={currentStep} onChange={setCurrentStep}>
-  <Tab id="step1" title="Personal Info">
-    <PersonalInfoForm />
-  </Tab>
-  <Tab id="step2" title="Address" disabled={!step1Complete}>
-    <AddressForm />
-  </Tab>
-  <Tab id="step3" title="Payment" disabled={!step2Complete}>
-    <PaymentForm />
-  </Tab>
+    <Tab id="step1" title="Personal Info">
+        <PersonalInfoForm />
+    </Tab>
+    <Tab id="step2" title="Address" disabled={!step1Complete}>
+        <AddressForm />
+    </Tab>
+    <Tab id="step3" title="Payment" disabled={!step2Complete}>
+        <PaymentForm />
+    </Tab>
 </Tabs>
 ```
 

package/ai/docs/Tag.md

@@ -19,47 +19,47 @@ import { Tag } from "@g4rcez/components/tag";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `theme` | `"primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "muted" \| "neutral" \| "custom" \| "disabled" \| "loading"` | `"primary"` | Visual theme/variant of the tag |
-| `size` | `"icon" \| "small" \| "default" \| "big" \| "tiny"` | `"default"` | Size of the tag |
-| `icon` | `React.ReactNode` | - | Icon to display inside the tag |
-| `indicator` | `"primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "muted" \| "neutral"` | - | Shows a small colored dot before the label |
-| `loading` | `boolean` | `false` | Overrides theme with pulse animation |
-| `as` | `React.ElementType` | `"span"` | HTML element to render as |
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Tag content |
+| Prop        | Type                                                                                                                                   | Default     | Description                                |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------ |
+| `theme`     | `"primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "muted" \| "neutral" \| "custom" \| "disabled" \| "loading"` | `"primary"` | Visual theme/variant of the tag            |
+| `size`      | `"icon" \| "small" \| "default" \| "big" \| "tiny"`                                                                                    | `"default"` | Size of the tag                            |
+| `icon`      | `React.ReactNode`                                                                                                                      | -           | Icon to display inside the tag             |
+| `indicator` | `"primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "muted" \| "neutral"`                                        | -           | Shows a small colored dot before the label |
+| `loading`   | `boolean`                                                                                                                              | `false`     | Overrides theme with pulse animation       |
+| `as`        | `React.ElementType`                                                                                                                    | `"span"`    | HTML element to render as                  |
+| `className` | `string`                                                                                                                               | -           | Additional CSS classes                     |
+| `children`  | `React.ReactNode`                                                                                                                      | -           | Tag content                                |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-tag-primary-bg` | `--tag-primary-bg` | Background for primary theme |
-| `text-tag-primary-text` | `--tag-primary-text` | Text color for primary theme |
-| `bg-tag-secondary-bg` | `--tag-secondary-bg` | Background for secondary theme |
-| `text-tag-secondary-text` | `--tag-secondary-text` | Text color for secondary theme |
-| `bg-tag-info-bg` | `--tag-info-bg` | Background for info theme |
-| `text-tag-info-text` | `--tag-info-text` | Text color for info theme |
-| `bg-tag-warn-bg` | `--tag-warn-bg` | Background for warn theme |
-| `text-tag-warn-text` | `--tag-warn-text` | Text color for warn theme |
-| `bg-tag-danger-bg` | `--tag-danger-bg` | Background for danger theme |
-| `text-tag-danger-text` | `--tag-danger-text` | Text color for danger theme |
-| `bg-tag-success-bg` | `--tag-success-bg` | Background for success theme |
-| `text-tag-success-text` | `--tag-success-text` | Text color for success theme |
-| `bg-tag-muted-bg` | `--tag-muted-bg` | Background for muted theme |
-| `text-tag-muted-text` | `--tag-muted-text` | Text color for muted theme |
-| `bg-disabled` | `--disabled` | Background for disabled/loading states |
-| `border-card-border` | `--card-border` | Border color for neutral theme |
-| `rounded-pill` | `--radius-pill` | Pill border radius applied to all tags |
-| `bg-primary` | `--primary` | Dot color for primary indicator |
-| `bg-secondary` | `--secondary` | Dot color for secondary indicator |
-| `bg-info` | `--info` | Dot color for info indicator |
-| `bg-warn` | `--warn` | Dot color for warn indicator |
-| `bg-danger` | `--danger` | Dot color for danger indicator |
-| `bg-success` | `--success` | Dot color for success indicator |
-| `bg-muted` | `--muted` | Dot color for muted indicator |
+| Token                     | CSS Variable           | Purpose                                |
+| ------------------------- | ---------------------- | -------------------------------------- |
+| `bg-tag-primary-bg`       | `--tag-primary-bg`     | Background for primary theme           |
+| `text-tag-primary-text`   | `--tag-primary-text`   | Text color for primary theme           |
+| `bg-tag-secondary-bg`     | `--tag-secondary-bg`   | Background for secondary theme         |
+| `text-tag-secondary-text` | `--tag-secondary-text` | Text color for secondary theme         |
+| `bg-tag-info-bg`          | `--tag-info-bg`        | Background for info theme              |
+| `text-tag-info-text`      | `--tag-info-text`      | Text color for info theme              |
+| `bg-tag-warn-bg`          | `--tag-warn-bg`        | Background for warn theme              |
+| `text-tag-warn-text`      | `--tag-warn-text`      | Text color for warn theme              |
+| `bg-tag-danger-bg`        | `--tag-danger-bg`      | Background for danger theme            |
+| `text-tag-danger-text`    | `--tag-danger-text`    | Text color for danger theme            |
+| `bg-tag-success-bg`       | `--tag-success-bg`     | Background for success theme           |
+| `text-tag-success-text`   | `--tag-success-text`   | Text color for success theme           |
+| `bg-tag-muted-bg`         | `--tag-muted-bg`       | Background for muted theme             |
+| `text-tag-muted-text`     | `--tag-muted-text`     | Text color for muted theme             |
+| `bg-disabled`             | `--disabled`           | Background for disabled/loading states |
+| `border-card-border`      | `--card-border`        | Border color for neutral theme         |
+| `rounded-pill`            | `--radius-pill`        | Pill border radius applied to all tags |
+| `bg-primary`              | `--primary`            | Dot color for primary indicator        |
+| `bg-secondary`            | `--secondary`          | Dot color for secondary indicator      |
+| `bg-info`                 | `--info`               | Dot color for info indicator           |
+| `bg-warn`                 | `--warn`               | Dot color for warn indicator           |
+| `bg-danger`               | `--danger`             | Dot color for danger indicator         |
+| `bg-success`              | `--success`            | Dot color for success indicator        |
+| `bg-muted`                | `--muted`              | Dot color for muted indicator          |
 
 ## Theme Variants
 
@@ -119,26 +119,28 @@ import { StarIcon, CheckIcon } from "@phosphor-icons/react";
 
 ```tsx
 const statusMap: Record<string, { theme: "success" | "warn" | "muted" | "danger" }> = {
-  active:   { theme: "success" },
-  pending:  { theme: "warn" },
-  inactive: { theme: "muted" },
-  error:    { theme: "danger" },
+    active: { theme: "success" },
+    pending: { theme: "warn" },
+    inactive: { theme: "muted" },
+    error: { theme: "danger" },
 };
 
 const StatusTag = ({ status }: { status: string }) => {
-  const config = statusMap[status] ?? statusMap.inactive;
-  return (
-    <Tag theme={config.theme} indicator={config.theme}>
-      {status.charAt(0).toUpperCase() + status.slice(1)}
-    </Tag>
-  );
+    const config = statusMap[status] ?? statusMap.inactive;
+    return (
+        <Tag theme={config.theme} indicator={config.theme}>
+            {status.charAt(0).toUpperCase() + status.slice(1)}
+        </Tag>
+    );
 };
 ```
 
 ### Loading State
 
 ```tsx
-<Tag loading theme="primary">Processing...</Tag>
+<Tag loading theme="primary">
+    Processing...
+</Tag>
 ```
 
 ### Polymorphic Usage
@@ -157,18 +159,18 @@ const StatusTag = ({ status }: { status: string }) => {
 
 ```tsx
 const categories = [
-  { name: "React",      theme: "info"    },
-  { name: "TypeScript", theme: "primary" },
-  { name: "CSS",        theme: "success" },
+    { name: "React", theme: "info" },
+    { name: "TypeScript", theme: "primary" },
+    { name: "CSS", theme: "success" },
 ];
 
 <div className="flex gap-2 flex-wrap">
-  {categories.map((cat) => (
-    <Tag key={cat.name} theme={cat.theme as any}>
-      {cat.name}
-    </Tag>
-  ))}
-</div>
+    {categories.map((cat) => (
+        <Tag key={cat.name} theme={cat.theme as any}>
+            {cat.name}
+        </Tag>
+    ))}
+</div>;
 ```
 
 ### Notification Badge
@@ -177,15 +179,11 @@ const categories = [
 import { BellIcon } from "@phosphor-icons/react";
 
 <div className="relative">
-  <BellIcon size={24} />
-  <Tag
-    size="small"
-    theme="danger"
-    className="absolute -top-2 -right-2 min-w-[20px] h-5 text-xs"
-  >
-    3
-  </Tag>
-</div>
+    <BellIcon size={24} />
+    <Tag size="small" theme="danger" className="absolute -top-2 -right-2 min-w-[20px] h-5 text-xs">
+        3
+    </Tag>
+</div>;
 ```
 
 ## Do

package/ai/docs/TaskList.md

@@ -22,20 +22,20 @@ import { Checkbox } from "@g4rcez/components/checkbox";
 
 Accepts all standard HTML `<fieldset>` attributes.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | — | `Checkbox` components with the `asTask` prop. |
-| `className` | `string` | — | Additional CSS classes for the `<fieldset>`. |
+| Prop        | Type              | Default | Description                                   |
+| ----------- | ----------------- | ------- | --------------------------------------------- |
+| `children`  | `React.ReactNode` | —       | `Checkbox` components with the `asTask` prop. |
+| `className` | `string`          | —       | Additional CSS classes for the `<fieldset>`.  |
 
 ## Design Tokens
 
 `TaskList` itself is a plain `<fieldset>` and inherits ambient tokens from its children. No component-scoped tokens are consumed directly. Style the container using semantic tokens:
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `border-border` | `--border` | Optional border around the task group |
-| `bg-background` | `--background` | Container background |
-| `text-foreground` | `--foreground` | Task label text |
+| Token             | CSS Variable   | Purpose                               |
+| ----------------- | -------------- | ------------------------------------- |
+| `border-border`   | `--border`     | Optional border around the task group |
+| `bg-background`   | `--background` | Container background                  |
+| `text-foreground` | `--foreground` | Task label text                       |
 
 ## Examples
 
@@ -46,13 +46,13 @@ import { TaskList } from "@g4rcez/components/task-list";
 import { Checkbox } from "@g4rcez/components/checkbox";
 
 export default function OnboardingChecklist() {
-  return (
-    <TaskList className="flex flex-col gap-sm border border-border rounded-card p-4">
-      <Checkbox asTask>Complete initial setup</Checkbox>
-      <Checkbox asTask>Upload profile picture</Checkbox>
-      <Checkbox asTask>Verify email address</Checkbox>
-    </TaskList>
-  );
+    return (
+        <TaskList className="flex flex-col gap-sm border border-border rounded-card p-4">
+            <Checkbox asTask>Complete initial setup</Checkbox>
+            <Checkbox asTask>Upload profile picture</Checkbox>
+            <Checkbox asTask>Verify email address</Checkbox>
+        </TaskList>
+    );
 }
 ```
 
@@ -66,27 +66,19 @@ import { Checkbox } from "@g4rcez/components/checkbox";
 type Task = { id: string; text: string; done: boolean };
 
 export default function DynamicTaskList({ tasks }: { tasks: Task[] }) {
-  const [items, setItems] = useState(tasks);
-
-  const toggle = (id: string) =>
-    setItems((prev) =>
-      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
+    const [items, setItems] = useState(tasks);
+
+    const toggle = (id: string) => setItems((prev) => prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
+
+    return (
+        <TaskList className="flex flex-col gap-sm">
+            {items.map((task) => (
+                <Checkbox key={task.id} asTask checked={task.done} onChange={() => toggle(task.id)}>
+                    {task.text}
+                </Checkbox>
+            ))}
+        </TaskList>
     );
-
-  return (
-    <TaskList className="flex flex-col gap-sm">
-      {items.map((task) => (
-        <Checkbox
-          key={task.id}
-          asTask
-          checked={task.done}
-          onChange={() => toggle(task.id)}
-        >
-          {task.text}
-        </Checkbox>
-      ))}
-    </TaskList>
-  );
 }
 ```
 
@@ -97,16 +89,14 @@ import { TaskList } from "@g4rcez/components/task-list";
 import { Checkbox } from "@g4rcez/components/checkbox";
 
 export default function ProjectSubtasks() {
-  return (
-    <TaskList className="flex flex-col gap-sm rounded-card border border-border p-4">
-      <legend className="px-1 text-sm font-medium text-foreground">
-        Phase 1 — Design
-      </legend>
-      <Checkbox asTask>Create wireframes</Checkbox>
-      <Checkbox asTask>Review with stakeholders</Checkbox>
-      <Checkbox asTask>Export design tokens</Checkbox>
-    </TaskList>
-  );
+    return (
+        <TaskList className="flex flex-col gap-sm rounded-card border border-border p-4">
+            <legend className="px-1 text-sm font-medium text-foreground">Phase 1 — Design</legend>
+            <Checkbox asTask>Create wireframes</Checkbox>
+            <Checkbox asTask>Review with stakeholders</Checkbox>
+            <Checkbox asTask>Export design tokens</Checkbox>
+        </TaskList>
+    );
 }
 ```
 
@@ -132,10 +122,10 @@ export default function ProjectSubtasks() {
 
 ## Data Attributes
 
-| Attribute | Element | Value | Description |
-|-----------|---------|-------|-------------|
-| `data-component` | `fieldset` | `"task-list"` | Identifies the component. |
-| `data-task` | child `input` | `"true"` | Must be present on child checkbox inputs for them to be counted in the completion check. Set automatically via `asTask`. |
+| Attribute        | Element       | Value         | Description                                                                                                              |
+| ---------------- | ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `data-component` | `fieldset`    | `"task-list"` | Identifies the component.                                                                                                |
+| `data-task`      | child `input` | `"true"`      | Must be present on child checkbox inputs for them to be counted in the completion check. Set automatically via `asTask`. |
 
 ## Notes