@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/AnimatedList.md

@@ -21,19 +21,19 @@ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
 
 ### AnimatedList
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | — | One or more `AnimatedListItem` elements. |
+| Prop       | Type              | Default | Description                              |
+| ---------- | ----------------- | ------- | ---------------------------------------- |
+| `children` | `React.ReactNode` | —       | One or more `AnimatedListItem` elements. |
 
 ### AnimatedListItem
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `Label` | — | Primary heading shown in the list row and the overlay header. |
-| `description` | `Label` | — | Secondary text shown below the title in both the row and overlay header. |
-| `children` | `Label` | — | Content rendered inside the expanded overlay below the header. |
-| `avatar` | `Label` | — | Optional node (icon, image, or element) shown at the leading edge of the row. |
-| `leading` | `React.FC<{ open: () => void }>` | — | Optional render-prop component placed at the trailing edge of the row. Receives an `open` function to trigger the overlay programmatically. |
+| Prop          | Type                             | Default | Description                                                                                                                                 |
+| ------------- | -------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`       | `Label`                          | —       | Primary heading shown in the list row and the overlay header.                                                                               |
+| `description` | `Label`                          | —       | Secondary text shown below the title in both the row and overlay header.                                                                    |
+| `children`    | `Label`                          | —       | Content rendered inside the expanded overlay below the header.                                                                              |
+| `avatar`      | `Label`                          | —       | Optional node (icon, image, or element) shown at the leading edge of the row.                                                               |
+| `leading`     | `React.FC<{ open: () => void }>` | —       | Optional render-prop component placed at the trailing edge of the row. Receives an `open` function to trigger the overlay programmatically. |
 
 `Label` is `string | number | ReactNode`.
 
@@ -41,19 +41,19 @@ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `border-card-border` | `--card-border` | Row separator border and overlay border |
-| `bg-card-background` | `--card-background` | Overlay card background |
-| `rounded-card` | `--radius-card` | Overlay card border radius |
-| `shadow-shadow-card` | `--shadow-card` | Overlay card drop shadow |
-| `text-foreground` | `--foreground` | Default row and overlay text color |
-| `text-secondary` | `--secondary` | Description text color in rows and overlay |
-| `text-primary` | `--primary` | Row title hover color |
-| `text-danger` | `--danger` | Close button hover color |
+| Token                 | CSS Variable         | Purpose                                     |
+| --------------------- | -------------------- | ------------------------------------------- |
+| `border-card-border`  | `--card-border`      | Row separator border and overlay border     |
+| `bg-card-background`  | `--card-background`  | Overlay card background                     |
+| `rounded-card`        | `--radius-card`      | Overlay card border radius                  |
+| `shadow-shadow-card`  | `--shadow-card`      | Overlay card drop shadow                    |
+| `text-foreground`     | `--foreground`       | Default row and overlay text color          |
+| `text-secondary`      | `--secondary`        | Description text color in rows and overlay  |
+| `text-primary`        | `--primary`          | Row title hover color                       |
+| `text-danger`         | `--danger`           | Close button hover color                    |
 | `bg-floating-overlay` | `--floating-overlay` | Overlay backdrop tint (used at 70% opacity) |
-| `z-floating` | `--z-floating` | `z-index` for the overlay (value: 22) |
-| `z-overlay` | `--z-overlay` | `z-index` for the backdrop scrim |
+| `z-floating`          | `--z-floating`       | `z-index` for the overlay (value: 22)       |
+| `z-overlay`           | `--z-overlay`        | `z-index` for the backdrop scrim            |
 
 ## Examples
 
@@ -63,26 +63,20 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
 
 const items = [
-  { id: "1", name: "Alice Johnson", role: "Engineering" },
-  { id: "2", name: "Bob Smith", role: "Design" },
+    { id: "1", name: "Alice Johnson", role: "Engineering" },
+    { id: "2", name: "Bob Smith", role: "Design" },
 ];
 
 export function TeamList() {
-  return (
-    <AnimatedList>
-      {items.map((member) => (
-        <AnimatedListItem
-          key={member.id}
-          title={member.name}
-          description={member.role}
-        >
-          <p className="text-foreground">
-            Full profile details for {member.name}.
-          </p>
-        </AnimatedListItem>
-      ))}
-    </AnimatedList>
-  );
+    return (
+        <AnimatedList>
+            {items.map((member) => (
+                <AnimatedListItem key={member.id} title={member.name} description={member.role}>
+                    <p className="text-foreground">Full profile details for {member.name}.</p>
+                </AnimatedListItem>
+            ))}
+        </AnimatedList>
+    );
 }
 ```
 
@@ -93,20 +87,20 @@ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
 import { UserCircleIcon } from "@phosphor-icons/react";
 
 export function UserDirectory() {
-  return (
-    <AnimatedList>
-      <AnimatedListItem
-        title="Carol White"
-        description="Product Manager"
-        avatar={<UserCircleIcon size={40} className="text-muted-foreground" />}
-      >
-        <div className="flex flex-col gap-2 text-foreground">
-          <p>Department: Product</p>
-          <p>Location: San Francisco</p>
-        </div>
-      </AnimatedListItem>
-    </AnimatedList>
-  );
+    return (
+        <AnimatedList>
+            <AnimatedListItem
+                title="Carol White"
+                description="Product Manager"
+                avatar={<UserCircleIcon size={40} className="text-muted-foreground" />}
+            >
+                <div className="flex flex-col gap-2 text-foreground">
+                    <p>Department: Product</p>
+                    <p>Location: San Francisco</p>
+                </div>
+            </AnimatedListItem>
+        </AnimatedList>
+    );
 }
 ```
 
@@ -117,24 +111,24 @@ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
 import { Button } from "@g4rcez/components/button";
 
 export function OrderList({ orders }: { orders: Order[] }) {
-  return (
-    <AnimatedList>
-      {orders.map((order) => (
-        <AnimatedListItem
-          key={order.id}
-          title={`Order #${order.id}`}
-          description={`Total: ${order.total}`}
-          leading={({ open }) => (
-            <Button size="small" theme="ghost-muted" onClick={open}>
-              View details
-            </Button>
-          )}
-        >
-          <OrderDetailContent order={order} />
-        </AnimatedListItem>
-      ))}
-    </AnimatedList>
-  );
+    return (
+        <AnimatedList>
+            {orders.map((order) => (
+                <AnimatedListItem
+                    key={order.id}
+                    title={`Order #${order.id}`}
+                    description={`Total: ${order.total}`}
+                    leading={({ open }) => (
+                        <Button size="small" theme="ghost-muted" onClick={open}>
+                            View details
+                        </Button>
+                    )}
+                >
+                    <OrderDetailContent order={order} />
+                </AnimatedListItem>
+            ))}
+        </AnimatedList>
+    );
 }
 ```
 
@@ -145,25 +139,32 @@ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
 import { BellIcon, CheckCircleIcon, WarningIcon } from "@phosphor-icons/react";
 
 const activities = [
-  { id: "a1", icon: <CheckCircleIcon size={20} className="text-success" />, title: "Deployment succeeded", description: "2 minutes ago", detail: "All 3 services started." },
-  { id: "a2", icon: <WarningIcon size={20} className="text-warn" />, title: "High memory usage", description: "15 minutes ago", detail: "Instance i-0ab2c was at 91%." },
+    {
+        id: "a1",
+        icon: <CheckCircleIcon size={20} className="text-success" />,
+        title: "Deployment succeeded",
+        description: "2 minutes ago",
+        detail: "All 3 services started.",
+    },
+    {
+        id: "a2",
+        icon: <WarningIcon size={20} className="text-warn" />,
+        title: "High memory usage",
+        description: "15 minutes ago",
+        detail: "Instance i-0ab2c was at 91%.",
+    },
 ];
 
 export function ActivityFeed() {
-  return (
-    <AnimatedList>
-      {activities.map((a) => (
-        <AnimatedListItem
-          key={a.id}
-          title={a.title}
-          description={a.description}
-          avatar={a.icon}
-        >
-          <p className="text-sm text-muted-foreground">{a.detail}</p>
-        </AnimatedListItem>
-      ))}
-    </AnimatedList>
-  );
+    return (
+        <AnimatedList>
+            {activities.map((a) => (
+                <AnimatedListItem key={a.id} title={a.title} description={a.description} avatar={a.icon}>
+                    <p className="text-sm text-muted-foreground">{a.detail}</p>
+                </AnimatedListItem>
+            ))}
+        </AnimatedList>
+    );
 }
 ```
 

package/ai/docs/Autocomplete.md

@@ -19,34 +19,34 @@ import { Autocomplete } from "@g4rcez/components/autocomplete";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | - | Field label |
-| `value` | `string` | - | Controlled selected value |
-| `options` | `AutocompleteItemProps[]` | - | List of selectable options |
-| `emptyMessage` | `Label` | - | Message displayed when no options match |
-| `dynamicOption` | `boolean` | `false` | Allow creating new options from typed text |
-| `onChange` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | - | Change handler |
-| `error` | `string` | - | Error message displayed below the field |
-| `feedback` | `Label` | - | Success/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" text |
-| `disabled` | `boolean` | `false` | Disables the field |
-| `loading` | `boolean` | `false` | Shows loading state |
-| `container` | `string` | - | Extra CSS classes for the outer `fieldset` |
-| `labelClassName` | `string` | - | Extra CSS classes for the label/border wrapper |
+| Prop             | Type                                               | Default | Description                                           |
+| ---------------- | -------------------------------------------------- | ------- | ----------------------------------------------------- |
+| `title`          | `string`                                           | -       | Field label                                           |
+| `value`          | `string`                                           | -       | Controlled selected value                             |
+| `options`        | `AutocompleteItemProps[]`                          | -       | List of selectable options                            |
+| `emptyMessage`   | `Label`                                            | -       | Message displayed when no options match               |
+| `dynamicOption`  | `boolean`                                          | `false` | Allow creating new options from typed text            |
+| `onChange`       | `(e: React.ChangeEvent<HTMLInputElement>) => void` | -       | Change handler                                        |
+| `error`          | `string`                                           | -       | Error message displayed below the field               |
+| `feedback`       | `Label`                                            | -       | Success/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" text        |
+| `disabled`       | `boolean`                                          | `false` | Disables the field                                    |
+| `loading`        | `boolean`                                          | `false` | Shows loading state                                   |
+| `container`      | `string`                                           | -       | Extra CSS classes for the outer `fieldset`            |
+| `labelClassName` | `string`                                           | -       | Extra CSS classes for the label/border wrapper        |
 
 ### AutocompleteItemProps
 
 ```tsx
 type AutocompleteItemProps = {
-  value: string;
-  label?: string;
-  hidden?: boolean;
-  disabled?: boolean;
-  "data-dynamic"?: string;
-  Render?: React.FC<OptionProps>;
+    value: string;
+    label?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    "data-dynamic"?: string;
+    Render?: React.FC<OptionProps>;
 } & Record<`data-${string}`, string>;
 ```
 
@@ -54,24 +54,24 @@ type AutocompleteItemProps = {
 
 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 input padding |
-| `py-input-y` | `--input-y` | Vertical input padding |
-| `border-input-border` | `--input-border` | Default field border color |
-| `placeholder-input-mask` | `--input-mask` | Placeholder text color |
-| `placeholder-input-mask-error` | `--input-mask-error` | Placeholder color in error state |
-| `text-foreground` | `--foreground` | Input text color |
-| `text-danger` | `--danger` | Text color in error state |
-| `text-primary` | `--primary` | Focus/hover border and ring color |
-| `bg-floating-background` | `--floating-background` | Dropdown background |
-| `border-floating-border` | `--floating-border` | Dropdown border color |
-| `bg-floating-hover` | `--floating-hover` | Option background on hover/keyboard focus |
-| `text-disabled` | `--disabled` | Empty message text color |
-| `border-tooltip-border` | `--tooltip-border` | Separator inside dropdown |
-| `z-floating` | `--z-floating` | Z-index for the floating panel |
-| `shadow-floating` | `--shadow-floating` | Drop shadow for the floating panel |
+| Token                          | CSS Variable            | Purpose                                   |
+| ------------------------------ | ----------------------- | ----------------------------------------- |
+| `h-input-height`               | `--input-height`        | Input height                              |
+| `px-input-x`                   | `--input-x`             | Horizontal input padding                  |
+| `py-input-y`                   | `--input-y`             | Vertical input padding                    |
+| `border-input-border`          | `--input-border`        | Default field border color                |
+| `placeholder-input-mask`       | `--input-mask`          | Placeholder text color                    |
+| `placeholder-input-mask-error` | `--input-mask-error`    | Placeholder color in error state          |
+| `text-foreground`              | `--foreground`          | Input text color                          |
+| `text-danger`                  | `--danger`              | Text color in error state                 |
+| `text-primary`                 | `--primary`             | Focus/hover border and ring color         |
+| `bg-floating-background`       | `--floating-background` | Dropdown background                       |
+| `border-floating-border`       | `--floating-border`     | Dropdown border color                     |
+| `bg-floating-hover`            | `--floating-hover`      | Option background on hover/keyboard focus |
+| `text-disabled`                | `--disabled`            | Empty message text color                  |
+| `border-tooltip-border`        | `--tooltip-border`      | Separator inside dropdown                 |
+| `z-floating`                   | `--z-floating`          | Z-index for the floating panel            |
+| `shadow-floating`              | `--shadow-floating`     | Drop shadow for the floating panel        |
 
 ## Examples
 
@@ -81,23 +81,23 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { Autocomplete } from "@g4rcez/components/autocomplete";
 
 const options = [
-  { value: "react", label: "React" },
-  { value: "vue", label: "Vue" },
-  { value: "svelte", label: "Svelte" },
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "svelte", label: "Svelte" },
 ];
 
 function FrameworkPicker() {
-  const [value, setValue] = useState("");
-
-  return (
-    <Autocomplete
-      title="Framework"
-      placeholder="Search frameworks..."
-      options={options}
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
+    const [value, setValue] = useState("");
+
+    return (
+        <Autocomplete
+            title="Framework"
+            placeholder="Search frameworks..."
+            options={options}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+        />
+    );
 }
 ```
 
@@ -105,31 +105,31 @@ function FrameworkPicker() {
 
 ```tsx
 function TagPicker() {
-  const [value, setValue] = useState("");
-  const [tags, setTags] = useState([
-    { value: "typescript", label: "TypeScript" },
-    { value: "javascript", label: "JavaScript" },
-  ]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const next = e.target.value;
-    setValue(next);
-    if (next && !tags.find((t) => t.value === next)) {
-      setTags((prev) => [...prev, { value: next, label: next }]);
-    }
-  };
-
-  return (
-    <Autocomplete
-      title="Tag"
-      placeholder="Search or create a tag..."
-      options={tags}
-      value={value}
-      onChange={handleChange}
-      dynamicOption
-      emptyMessage="Type to create a new tag"
-    />
-  );
+    const [value, setValue] = useState("");
+    const [tags, setTags] = useState([
+        { value: "typescript", label: "TypeScript" },
+        { value: "javascript", label: "JavaScript" },
+    ]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const next = e.target.value;
+        setValue(next);
+        if (next && !tags.find((t) => t.value === next)) {
+            setTags((prev) => [...prev, { value: next, label: next }]);
+        }
+    };
+
+    return (
+        <Autocomplete
+            title="Tag"
+            placeholder="Search or create a tag..."
+            options={tags}
+            value={value}
+            onChange={handleChange}
+            dynamicOption
+            emptyMessage="Type to create a new tag"
+        />
+    );
 }
 ```
 
@@ -139,15 +139,15 @@ function TagPicker() {
 type UserOption = AutocompleteItemProps & { email: string; role: string };
 
 const UserRow = ({ value, label, ...props }: UserOption) => (
-  <div className="flex flex-col gap-0.5 py-1">
-    <span className="font-medium text-sm text-foreground">{label}</span>
-    <span className="text-xs text-muted-foreground">{props.email}</span>
-  </div>
+    <div className="flex flex-col gap-0.5 py-1">
+        <span className="font-medium text-sm text-foreground">{label}</span>
+        <span className="text-xs text-muted-foreground">{props.email}</span>
+    </div>
 );
 
 const users: UserOption[] = [
-  { value: "alice", label: "Alice", email: "alice@example.com", role: "admin", Render: UserRow },
-  { value: "bob", label: "Bob", email: "bob@example.com", role: "member", Render: UserRow },
+    { value: "alice", label: "Alice", email: "alice@example.com", role: "admin", Render: UserRow },
+    { value: "bob", label: "Bob", email: "bob@example.com", role: "member", Render: UserRow },
 ];
 
 <Autocomplete title="Assign to" options={users} value="" onChange={() => {}} />;
@@ -160,29 +160,25 @@ import { Form } from "@g4rcez/components/form";
 import { Button } from "@g4rcez/components/button";
 
 const countries = [
-  { value: "br", label: "Brazil" },
-  { value: "us", label: "United States" },
-  { value: "de", label: "Germany" },
+    { value: "br", label: "Brazil" },
+    { value: "us", label: "United States" },
+    { value: "de", label: "Germany" },
 ];
 
 function ContactForm() {
-  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">
-      <Autocomplete
-        name="country"
-        title="Country"
-        options={countries}
-        required
-        emptyMessage="No countries found"
-      />
-      <Button theme="primary" type="submit">Submit</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">
+            <Autocomplete name="country" title="Country" options={countries} required emptyMessage="No countries found" />
+            <Button theme="primary" type="submit">
+                Submit
+            </Button>
+        </Form>
+    );
 }
 ```
 

package/ai/docs/Button.md

@@ -19,43 +19,43 @@ import { Button } from "@g4rcez/components/button";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `theme` | `"main" \| "primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "muted" \| "neutral" \| "ghost-primary" \| "ghost-secondary" \| "ghost-info" \| "ghost-warn" \| "ghost-danger" \| "ghost-success" \| "ghost-muted" \| "ghost-neutral" \| "raw" \| "disabled" \| "loading"` | `"main"` | Visual theme/variant of the button |
-| `size` | `"icon" \| "min" \| "small" \| "default" \| "big" \| "tiny"` | `"default"` | Size of the button |
-| `rounded` | `"rough" \| "squared" \| "default" \| "circle"` | `"default"` | Border radius style |
-| `icon` | `React.ReactNode` | - | Icon to display before button content |
-| `loading` | `boolean` | `false` | Shows loading state with pulse animation and disables interaction |
-| `disabled` | `boolean` | `false` | Disables the button |
-| `as` | `React.ElementType` | `"button"` | HTML element to render as |
-| `type` | `string` | `"button"` | Button type attribute |
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Button content |
+| Prop        | Type                                                                                                                                                                                                                                                                                           | Default     | Description                                                       |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------- |
+| `theme`     | `"main" \| "primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "muted" \| "neutral" \| "ghost-primary" \| "ghost-secondary" \| "ghost-info" \| "ghost-warn" \| "ghost-danger" \| "ghost-success" \| "ghost-muted" \| "ghost-neutral" \| "raw" \| "disabled" \| "loading"` | `"main"`    | Visual theme/variant of the button                                |
+| `size`      | `"icon" \| "min" \| "small" \| "default" \| "big" \| "tiny"`                                                                                                                                                                                                                                   | `"default"` | Size of the button                                                |
+| `rounded`   | `"rough" \| "squared" \| "default" \| "circle"`                                                                                                                                                                                                                                                | `"default"` | Border radius style                                               |
+| `icon`      | `React.ReactNode`                                                                                                                                                                                                                                                                              | -           | Icon to display before button content                             |
+| `loading`   | `boolean`                                                                                                                                                                                                                                                                                      | `false`     | Shows loading state with pulse animation and disables interaction |
+| `disabled`  | `boolean`                                                                                                                                                                                                                                                                                      | `false`     | Disables the button                                               |
+| `as`        | `React.ElementType`                                                                                                                                                                                                                                                                            | `"button"`  | HTML element to render as                                         |
+| `type`      | `string`                                                                                                                                                                                                                                                                                       | `"button"`  | Button type attribute                                             |
+| `className` | `string`                                                                                                                                                                                                                                                                                       | -           | Additional CSS classes                                            |
+| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                              | -           | Button content                                                    |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-button-primary-bg` | `--button-primary-bg` | Background for primary/main theme |
-| `text-button-primary-text` | `--button-primary-text` | Text color for primary/main theme |
-| `bg-button-secondary-bg` | `--button-secondary-bg` | Background for secondary theme |
-| `text-button-secondary-text` | `--button-secondary-text` | Text color for secondary theme |
-| `bg-button-info-bg` | `--button-info-bg` | Background for info theme |
-| `text-button-info-text` | `--button-info-text` | Text color for info theme |
-| `bg-button-warn-bg` | `--button-warn-bg` | Background for warn theme |
-| `text-button-warn-text` | `--button-warn-text` | Text color for warn theme |
-| `bg-button-danger-bg` | `--button-danger-bg` | Background for danger theme |
-| `text-button-danger-text` | `--button-danger-text` | Text color for danger theme |
-| `bg-button-success-bg` | `--button-success-bg` | Background for success theme |
-| `text-button-success-text` | `--button-success-text` | Text color for success theme |
-| `bg-button-muted-bg` | `--button-muted-bg` | Background for muted theme |
-| `text-button-muted-text` | `--button-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-button` | `--radius-button` | Default border radius |
-| `focus-visible:ring-ring` | `--ring` | Focus ring color |
+| Token                        | CSS Variable              | Purpose                                |
+| ---------------------------- | ------------------------- | -------------------------------------- |
+| `bg-button-primary-bg`       | `--button-primary-bg`     | Background for primary/main theme      |
+| `text-button-primary-text`   | `--button-primary-text`   | Text color for primary/main theme      |
+| `bg-button-secondary-bg`     | `--button-secondary-bg`   | Background for secondary theme         |
+| `text-button-secondary-text` | `--button-secondary-text` | Text color for secondary theme         |
+| `bg-button-info-bg`          | `--button-info-bg`        | Background for info theme              |
+| `text-button-info-text`      | `--button-info-text`      | Text color for info theme              |
+| `bg-button-warn-bg`          | `--button-warn-bg`        | Background for warn theme              |
+| `text-button-warn-text`      | `--button-warn-text`      | Text color for warn theme              |
+| `bg-button-danger-bg`        | `--button-danger-bg`      | Background for danger theme            |
+| `text-button-danger-text`    | `--button-danger-text`    | Text color for danger theme            |
+| `bg-button-success-bg`       | `--button-success-bg`     | Background for success theme           |
+| `text-button-success-text`   | `--button-success-text`   | Text color for success theme           |
+| `bg-button-muted-bg`         | `--button-muted-bg`       | Background for muted theme             |
+| `text-button-muted-text`     | `--button-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-button`             | `--radius-button`         | Default border radius                  |
+| `focus-visible:ring-ring`    | `--ring`                  | Focus ring color                       |
 
 ## Theme Variants
 
@@ -131,7 +131,7 @@ import { PlusIcon } from "@phosphor-icons/react";
 
 ```tsx
 <Button as="a" href="/dashboard" theme="primary">
-  Go to Dashboard
+    Go to Dashboard
 </Button>
 ```