@g4rcez/components 4.1.3 → 5.0.0

package/ai/docs/AnimatedList.md

@@ -45,7 +45,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | --------------------- | -------------------- | ------------------------------------------- |
 | `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                  |
+| `rounded-card-radius` | `--card-radius`      | 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  |

package/ai/docs/Autocomplete.md

@@ -57,8 +57,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | 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                    |
+| `px-input-padding-x`           | `--input-padding-x`     | Horizontal input padding                  |
+| `py-input-padding-y`           | `--input-padding-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          |

package/ai/docs/Button.md

@@ -54,7 +54,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | `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                  |
+| `rounded-button-radius`      | `--button-radius`         | Default border radius                  |
 | `focus-visible:ring-ring`    | `--ring`                  | Focus ring color                       |
 
 ## Theme Variants

package/ai/docs/Card.md

@@ -48,13 +48,13 @@ A composable header with a title and an optional navigation/action area.
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token                | CSS Variable        | Purpose                         |
-| -------------------- | ------------------- | ------------------------------- |
-| `bg-card-background` | `--card-background` | Card surface color              |
-| `border-card-border` | `--card-border`     | Card border and title separator |
-| `rounded-card`       | `--radius-card`     | Corner radius                   |
-| `shadow-shadow-card` | `--shadow-card`     | Card drop shadow                |
-| `bg-muted`           | `--muted`           | Skeleton loading lines          |
+| Token                 | CSS Variable        | Purpose                         |
+| --------------------- | ------------------- | ------------------------------- |
+| `bg-card-background`  | `--card-background` | Card surface color              |
+| `border-card-border`  | `--card-border`     | Card border and title separator |
+| `rounded-card-radius` | `--card-radius`     | Corner radius                   |
+| `shadow-shadow-card`  | `--shadow-card`     | Card drop shadow                |
+| `bg-muted`            | `--muted`           | Skeleton loading lines          |
 
 ## Examples
 

package/ai/docs/DatePicker.md

@@ -43,8 +43,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | 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               |
+| `px-input-padding-x`     | `--input-padding-x`     | Horizontal input padding             |
+| `py-input-padding-y`     | `--input-padding-y`     | Vertical input padding               |
 | `border-input-border`    | `--input-border`        | Default border color                 |
 | `text-foreground`        | `--foreground`          | Input text color                     |
 | `text-primary`           | `--primary`             | Focus ring and border on focus/hover |

package/ai/docs/Dropdown.md

@@ -76,7 +76,7 @@ function AccountDropdown() {
     return (
         <Dropdown
             trigger={
-                <button className="flex items-center gap-2 px-3 py-2 rounded-button border border-border text-foreground">
+                <button className="flex items-center gap-2 px-3 py-2 rounded-button-radius border border-border text-foreground">
                     <UserIcon size={16} />
                     Account
                     <CaretDownIcon size={16} />
@@ -106,13 +106,13 @@ function ControlledDropdown() {
 
     return (
         <Dropdown
-            trigger={<button className="px-4 py-2 rounded-button bg-muted text-foreground">{isOpen ? "Close" : "Open"} Menu</button>}
+            trigger={<button className="px-4 py-2 rounded-button-radius bg-muted text-foreground">{isOpen ? "Close" : "Open"} Menu</button>}
             open={isOpen}
             onChange={setIsOpen}
         >
             <div className="min-w-48 p-4">
                 <p className="text-foreground">Controlled dropdown content</p>
-                <button onClick={() => setIsOpen(false)} className="mt-2 px-3 py-1 bg-primary text-primary-foreground rounded-button text-sm">
+                <button onClick={() => setIsOpen(false)} className="mt-2 px-3 py-1 bg-primary text-primary-foreground rounded-button-radius text-sm">
                     Close
                 </button>
             </div>
@@ -133,7 +133,7 @@ function FilterDropdown() {
     return (
         <Dropdown
             trigger={
-                <button className="flex items-center gap-2 px-3 py-2 rounded-button border border-border text-foreground">
+                <button className="flex items-center gap-2 px-3 py-2 rounded-button-radius border border-border text-foreground">
                     <FunnelIcon size={16} />
                     Filters
                     {status && <span className="h-2 w-2 rounded-full bg-primary" />}
@@ -147,7 +147,7 @@ function FilterDropdown() {
                     <select
                         value={status}
                         onChange={(e) => setStatus(e.target.value)}
-                        className="w-full px-3 py-2 rounded-button border border-border bg-background text-foreground"
+                        className="w-full px-3 py-2 rounded-button-radius border border-border bg-background text-foreground"
                     >
                         <option value="">All</option>
                         <option value="active">Active</option>
@@ -155,10 +155,10 @@ function FilterDropdown() {
                     </select>
                 </div>
                 <div className="flex gap-2 pt-2">
-                    <button onClick={() => setStatus("")} className="px-3 py-1 text-sm rounded-button border border-border text-foreground">
+                    <button onClick={() => setStatus("")} className="px-3 py-1 text-sm rounded-button-radius border border-border text-foreground">
                         Clear
                     </button>
-                    <button className="px-3 py-1 text-sm rounded-button bg-primary text-primary-foreground">Apply</button>
+                    <button className="px-3 py-1 text-sm rounded-button-radius bg-primary text-primary-foreground">Apply</button>
                 </div>
             </div>
         </Dropdown>

package/ai/docs/Expand.md

@@ -50,14 +50,14 @@ import { PlusIcon } from "@phosphor-icons/react";
 import { Expand } from "@g4rcez/components/expand";
 
 <Expand trigger={<PlusIcon size={16} />} theme="primary" size="icon" rounded="circle">
-    <div className="w-64 rounded-card border border-border bg-background p-4 shadow-shadow-floating">
+    <div className="w-64 rounded-card-radius border border-border bg-background p-4 shadow-shadow-floating">
         <h3 className="font-bold mb-2 text-foreground">Create New</h3>
         <ul className="space-y-2">
             <li>
-                <button className="w-full rounded-button p-2 text-left text-foreground hover:bg-muted">Project</button>
+                <button className="w-full rounded-button-radius p-2 text-left text-foreground hover:bg-muted">Project</button>
             </li>
             <li>
-                <button className="w-full rounded-button p-2 text-left text-foreground hover:bg-muted">Task</button>
+                <button className="w-full rounded-button-radius p-2 text-left text-foreground hover:bg-muted">Task</button>
             </li>
         </ul>
     </div>
@@ -71,7 +71,7 @@ import { Expand } from "@g4rcez/components/expand";
 import { Button } from "@g4rcez/components/button";
 
 <Expand trigger="Open Menu">
-    <div className="rounded-card border border-border bg-background p-4 shadow-shadow-floating">
+    <div className="rounded-card-radius border border-border bg-background p-4 shadow-shadow-floating">
         <p className="text-foreground">Expanded content goes here.</p>
         <Button theme="primary" className="mt-2">
             Action
@@ -91,7 +91,7 @@ function ControlledExpand() {
 
     return (
         <Expand trigger="Options" open={open} theme="ghost-neutral">
-            <div className="rounded-card border border-border bg-background p-4 shadow-shadow-floating">
+            <div className="rounded-card-radius border border-border bg-background p-4 shadow-shadow-floating">
                 <button onClick={() => setOpen(false)} className="text-sm text-foreground">
                     Close
                 </button>

package/ai/docs/Input.md

@@ -64,11 +64,11 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | Token                          | CSS Variable         | Purpose                                          |
 | ------------------------------ | -------------------- | ------------------------------------------------ |
 | `h-input-height`               | `--input-height`     | Input height                                     |
-| `px-input-x`                   | `--input-x`          | Horizontal padding                               |
-| `py-input-y`                   | `--input-y`          | Vertical padding                                 |
+| `px-input-padding-x`           | `--input-padding-x`  | Horizontal padding                               |
+| `py-input-padding-y`           | `--input-padding-y`  | Vertical padding                                 |
 | `mt-input-gap`                 | `--input-gap`        | Gap between field border and error/feedback text |
 | `border-input-border`          | `--input-border`     | Default border color                             |
-| `text-field-label`             | `--field-label`      | Label text color                                 |
+| `text-input-label-text`        | `--input-label-text` | Label text color                                 |
 | `text-foreground`              | `--foreground`       | Input text color                                 |
 | `text-primary`                 | `--primary`          | Focus ring, focus/hover border color             |
 | `text-danger`                  | `--danger`           | Error state border, text, and label color        |

package/ai/docs/InputField.md

@@ -45,14 +45,14 @@ import { InputField } from "@g4rcez/components";
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token                 | CSS Variable     | Purpose                                            |
-| --------------------- | ---------------- | -------------------------------------------------- |
-| `border-input-border` | `--input-border` | Default field border color                         |
-| `text-field-label`    | `--field-label`  | Label text color                                   |
-| `text-primary`        | `--primary`      | Label and border color on focus/hover              |
-| `text-danger`         | `--danger`       | Label, border, and error text color in error state |
-| `text-disabled`       | `--disabled`     | Label and border color when disabled               |
-| `mt-input-gap`        | `--input-gap`    | Gap between border and error/feedback text         |
+| Token                   | CSS Variable         | Purpose                                            |
+| ----------------------- | -------------------- | -------------------------------------------------- |
+| `border-input-border`   | `--input-border`     | Default field border color                         |
+| `text-input-label-text` | `--input-label-text` | Label text color                                   |
+| `text-primary`          | `--primary`          | Label and border color on focus/hover              |
+| `text-danger`           | `--danger`           | Label, border, and error text color in error state |
+| `text-disabled`         | `--disabled`         | Label and border color when disabled               |
+| `mt-input-gap`          | `--input-gap`        | Gap between border and error/feedback text         |
 
 ## Examples
 
@@ -62,7 +62,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { InputField } from "@g4rcez/components";
 
 <InputField title="Username" name="username" required>
-    <input id="username" name="username" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+    <input id="username" name="username" className="h-input-height w-full flex-1 bg-transparent px-input-padding-x text-foreground outline-none" />
 </InputField>;
 ```
 
@@ -84,7 +84,7 @@ import { MagnifyingGlassIcon, CheckIcon } from "@phosphor-icons/react";
         id="api_key"
         name="api_key"
         type="password"
-        className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none"
+        className="h-input-height w-full flex-1 bg-transparent px-input-padding-x text-foreground outline-none"
     />
 </InputField>;
 ```
@@ -96,14 +96,24 @@ import { MagnifyingGlassIcon, CheckIcon } from "@phosphor-icons/react";
     /* Required — "Optional" badge is hidden */
 }
 <InputField title="Email" name="email" required>
-    <input id="email" name="email" type="email" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+    <input
+        id="email"
+        name="email"
+        type="email"
+        className="h-input-height w-full flex-1 bg-transparent px-input-padding-x text-foreground outline-none"
+    />
 </InputField>;
 
 {
     /* Optional — shows "Optional" badge */
 }
 <InputField title="Website" name="website">
-    <input id="website" name="website" type="url" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+    <input
+        id="website"
+        name="website"
+        type="url"
+        className="h-input-height w-full flex-1 bg-transparent px-input-padding-x text-foreground outline-none"
+    />
 </InputField>;
 ```
 
@@ -115,7 +125,7 @@ import { MagnifyingGlassIcon, CheckIcon } from "@phosphor-icons/react";
         id="search"
         name="search"
         placeholder="Search..."
-        className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none"
+        className="h-input-height w-full flex-1 bg-transparent px-input-padding-x text-foreground outline-none"
     />
 </InputField>
 ```
@@ -130,7 +140,7 @@ import { MagnifyingGlassIcon, CheckIcon } from "@phosphor-icons/react";
     error={!isAvailable ? "Slug is already taken." : undefined}
     required
 >
-    <input id="slug" name="slug" className="h-input-height w-full flex-1 bg-transparent px-input-x text-foreground outline-none" />
+    <input id="slug" name="slug" className="h-input-height w-full flex-1 bg-transparent px-input-padding-x text-foreground outline-none" />
 </InputField>
 ```
 

package/ai/docs/List.md

@@ -47,7 +47,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | --------------------- | -------------------- | ------------------------------------------------------------------- |
 | `border-card-border`  | `--card-border`      | Row separator and overlay card border                               |
 | `bg-card-background`  | `--card-background`  | Overlay card background color                                       |
-| `rounded-card`        | `--radius-card`      | Overlay card corner radius                                          |
+| `rounded-list-radius` | `--list-radius`      | Overlay card corner radius                                          |
 | `shadow-shadow-card`  | `--shadow-card`      | Overlay card drop shadow                                            |
 | `text-foreground`     | `--foreground`       | Default text color for row and overlay content                      |
 | `text-secondary`      | `--secondary`        | Description text color                                              |

package/ai/docs/Modal.md

@@ -118,7 +118,7 @@ function BasicDialog() {
     <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" />
+            <input type="text" className="w-full p-2 rounded-button-radius border border-border bg-background text-foreground" />
         </div>
     </form>
 </Modal>
@@ -129,13 +129,13 @@ function BasicDialog() {
 ```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">
+        <a href="/dashboard" className="block rounded-button-radius p-2 text-foreground hover:bg-muted">
             Dashboard
         </a>
-        <a href="/profile" className="block rounded-button p-2 text-foreground hover:bg-muted">
+        <a href="/profile" className="block rounded-button-radius p-2 text-foreground hover:bg-muted">
             Profile
         </a>
-        <a href="/settings" className="block rounded-button p-2 text-foreground hover:bg-muted">
+        <a href="/settings" className="block rounded-button-radius p-2 text-foreground hover:bg-muted">
             Settings
         </a>
     </nav>

package/ai/docs/MultiSelect.md

@@ -59,8 +59,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | `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                       |
+| `px-input-padding-x`           | `--input-padding-x`     | Horizontal padding                     |
+| `py-input-padding-y`           | `--input-padding-y`     | Vertical padding                       |
 
 ## Examples
 

package/ai/docs/PageCalendar.md

@@ -153,7 +153,7 @@ export function DetailCalendar() {
             events={events}
             defaultView="day"
             renderEvent={(event) => (
-                <div className="flex flex-col gap-1 p-2 bg-muted rounded-card">
+                <div className="flex flex-col gap-1 p-2 bg-muted rounded-card-radius">
                     <span className="font-semibold text-foreground">{event.title}</span>
                     <span className="flex items-center gap-1 text-sm text-muted-foreground">
                         <MapPinIcon size={12} />
@@ -203,7 +203,7 @@ export function CustomFilterCalendar() {
         <PageCalendar
             events={events}
             filterArea={
-                <div className="flex items-center gap-2 rounded-card bg-muted px-3 py-1.5">
+                <div className="flex items-center gap-2 rounded-card-radius bg-muted px-3 py-1.5">
                     <Button theme="ghost-muted" size="small">
                         All
                     </Button>

package/ai/docs/Polymorph.md

@@ -91,7 +91,7 @@ type CardProps<T extends React.ElementType = "div"> = PolymorphicProps<{ variant
 const Card = <T extends React.ElementType = "div">({ as, variant = "default", className, ...props }: CardProps<T>) => (
     <Polymorph
         as={as ?? "div"}
-        className={`rounded-card border border-border ${variant === "muted" ? "bg-muted" : "bg-card-background"} ${className ?? ""}`}
+        className={`rounded-card-radius border border-border ${variant === "muted" ? "bg-muted" : "bg-card-background"} ${className ?? ""}`}
         {...props}
     />
 );

package/ai/docs/Resizable.md

@@ -45,7 +45,7 @@ const CollapsiblePanel = () => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
-        <div className="border border-border rounded-card">
+        <div className="border border-border rounded-card-radius">
             <button type="button" className="w-full px-4 py-3 text-left font-medium text-foreground" onClick={() => setIsOpen((v) => !v)}>
                 Toggle Details
             </button>
@@ -108,7 +108,7 @@ const TabbedContent = ({ activeTab }: { activeTab: string }) => (
 
 ```tsx
 const AsyncCard = ({ data }: { data: string[] | null }) => (
-    <div className="rounded-card border border-border bg-card-background shadow-shadow-card">
+    <div className="rounded-card-radius border border-border bg-card-background shadow-shadow-card">
         <Resizable>
             {data === null ? (
                 <div className="p-4 text-muted-foreground">Loading…</div>
@@ -131,7 +131,7 @@ const AsyncCard = ({ data }: { data: string[] | null }) => (
 - Use `Resizable` around any content that changes height to provide a polished animation
 - Wrap only the specific dynamic section — not large, stable portions of the page
 - Apply visual styles (`bg-*`, `border-*`, `rounded-*`) to elements inside `Resizable`, not to `Resizable` itself
-- Use design-token classes for all styling (`bg-background`, `border-border`, `rounded-card`)
+- Use design-token classes for all styling (`bg-background`, `border-border`, `rounded-card-radius`)
 
 ## Don't
 

package/ai/docs/Select.md

@@ -55,8 +55,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | `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                 |
+| `px-input-padding-x`                      | `--input-padding-x`   | Horizontal padding               |
+| `py-input-padding-y`                      | `--input-padding-y`   | Vertical padding                 |
 
 ## Examples
 

package/ai/docs/Skeleton.md

@@ -85,7 +85,7 @@ function TableSkeleton() {
 ```tsx
 function CardSkeleton() {
     return (
-        <div className="rounded-card border border-card-border bg-card-background p-6 space-y-4">
+        <div className="rounded-card-radius 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 />

package/ai/docs/Slot.md

@@ -70,7 +70,7 @@ const StyledButton = ({ asChild, children, ...props }: ButtonProps) => {
   const Component = asChild ? Slot : "button";
   return (
     <Component
-      className="inline-flex items-center rounded-button bg-button-primary-bg text-button-primary-text px-4 py-2 font-medium"
+      className="inline-flex items-center rounded-button-radius bg-button-primary-bg text-button-primary-text px-4 py-2 font-medium"
       {...props}
     >
       {children}
@@ -98,7 +98,7 @@ const IconButton = ({ asChild, children, ...props }: { asChild?: boolean; childr
   const Component = asChild ? Slot : "button";
   return (
     <Component
-      className="inline-flex items-center gap-1.5 rounded-button bg-button-success-bg text-button-success-text px-4 py-2"
+      className="inline-flex items-center gap-1.5 rounded-button-radius bg-button-success-bg text-button-success-text px-4 py-2"
       {...props}
     >
       <Slottable>{children}</Slottable>
@@ -143,7 +143,7 @@ Both handlers are called when both the `Slot` and the child define the same even
 - Use `Slot` when building reusable components that should support any element type via `asChild`
 - Use `Slottable` when your component wraps children with internal structure (icons, labels)
 - Pass accessibility attributes (`aria-*`, `role`) to `Slot` — they will be merged into the child
-- Use design-token classes in the `className` passed to `Slot` (`rounded-button`, `bg-button-primary-bg`)
+- Use design-token classes in the `className` passed to `Slot` (`rounded-button-radius`, `bg-button-primary-bg`)
 
 ## Don't
 

package/ai/docs/Spinner.md

@@ -65,7 +65,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 ### Spinner Inside a Button
 
 ```tsx
-<button type="submit" disabled={isSubmitting} className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-button">
+<button type="submit" disabled={isSubmitting} className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-button-radius">
     {isSubmitting && <Spinner className="size-4 border-2 border-primary-foreground border-b-transparent" />}
     {isSubmitting ? "Saving…" : "Save"}
 </button>

package/ai/docs/Stats.md

@@ -35,7 +35,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | ------------------------- | ---------------------- | ----------------------------------- |
 | `bg-card-background`      | `--card-background`    | Card surface                        |
 | `border-card-border`      | `--card-border`        | Card border and divider             |
-| `rounded-card`            | `--radius-card`        | Corner radius                       |
+| `rounded-stats-radius`    | `--stats-radius`       | Corner radius                       |
 | `shadow-shadow-card`      | `--shadow-card`        | Card drop shadow                    |
 | `bg-primary`              | `--primary`            | Icon container background (default) |
 | `text-primary-foreground` | `--primary-foreground` | Icon color (default)                |

package/ai/docs/Step.md

@@ -93,7 +93,7 @@ function Wizard() {
                 <Step step={4} currentStep={currentStep} title="Review" onClick={() => setCurrentStep(4)} />
             </Steps>
 
-            <div className="p-6 rounded-card border border-card-border bg-card-background">
+            <div className="p-6 rounded-card-radius border border-card-border bg-card-background">
                 {currentStep === 1 && <AccountForm />}
                 {currentStep === 2 && <ProfileForm />}
                 {currentStep === 3 && <PaymentForm />}

package/ai/docs/Tabs.md

@@ -128,7 +128,7 @@ function DynamicTabs() {
 
     return (
         <div className="space-y-4">
-            <button onClick={addTab} className="px-3 py-1 bg-primary text-primary-foreground rounded-button">
+            <button onClick={addTab} className="px-3 py-1 bg-primary text-primary-foreground rounded-button-radius">
                 Add Tab
             </button>
 

package/ai/docs/Tag.md

@@ -52,7 +52,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | `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 |
+| `rounded-tag-radius`      | `--tag-radius`         | Tag border radius                      |
 | `bg-primary`              | `--primary`            | Dot color for primary indicator        |
 | `bg-secondary`            | `--secondary`          | Dot color for secondary indicator      |
 | `bg-info`                 | `--info`               | Dot color for info indicator           |

package/ai/docs/TaskList.md

@@ -47,7 +47,7 @@ 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">
+        <TaskList className="flex flex-col gap-sm border border-border rounded-card-radius p-4">
             <Checkbox asTask>Complete initial setup</Checkbox>
             <Checkbox asTask>Upload profile picture</Checkbox>
             <Checkbox asTask>Verify email address</Checkbox>
@@ -90,7 +90,7 @@ 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">
+        <TaskList className="flex flex-col gap-sm rounded-card-radius 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>
@@ -105,7 +105,7 @@ export default function ProjectSubtasks() {
 - Use `asTask` on every `Checkbox` inside `TaskList` so they are counted for the completion animation.
 - Group closely related tasks — the animation is most meaningful when all items belong to one milestone.
 - Provide adequate vertical spacing between items (`gap-sm`, `gap-base`) for readability.
-- Use design-token classes for wrappers (`bg-background`, `border-border`, `rounded-card`).
+- Use design-token classes for wrappers (`bg-background`, `border-border`, `rounded-card-radius`).
 
 ## Don't
 

package/ai/docs/Textarea.md

@@ -47,8 +47,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 | `group-focus-within:border-primary`                | `--primary`          | Border highlight on focus                            |
 | `group-hover:border-primary`                       | `--primary`          | Border highlight on hover                            |
 | `h-input-height`                                   | `--input-height`     | Base height token (overridden by `rows` in practice) |
-| `px-input-x`                                       | `--input-x`          | Horizontal padding                                   |
-| `py-input-y`                                       | `--input-y`          | Vertical padding                                     |
+| `px-input-padding-x`                               | `--input-padding-x`  | Horizontal padding                                   |
+| `py-input-padding-y`                               | `--input-padding-y`  | Vertical padding                                     |
 
 ## Examples
 

package/ai/docs/Tooltip.md

@@ -59,7 +59,7 @@ Supports all Floating UI placements: `"top"`, `"top-start"`, `"top-end"`, `"bott
 ```tsx
 import { Tooltip } from "@g4rcez/components/tooltip";
 
-<Tooltip title={<button className="px-4 py-2 bg-primary text-primary-foreground rounded-button">Hover me</button>}>
+<Tooltip title={<button className="px-4 py-2 bg-primary text-primary-foreground rounded-button-radius">Hover me</button>}>
     This is a helpful tooltip
 </Tooltip>;
 ```
@@ -90,7 +90,11 @@ import { Tooltip } from "@g4rcez/components/tooltip";
 {
     /* Hover only */
 }
-<Tooltip title={<button className="px-4 py-2 rounded-button border border-border text-foreground">Hover Only</button>} focus={false} popover={false}>
+<Tooltip
+    title={<button className="px-4 py-2 rounded-button-radius border border-border text-foreground">Hover Only</button>}
+    focus={false}
+    popover={false}
+>
     Shown on hover
 </Tooltip>;
 
@@ -98,7 +102,7 @@ import { Tooltip } from "@g4rcez/components/tooltip";
     /* Focus only — keyboard accessible */
 }
 <Tooltip
-    title={<input placeholder="Focus me with tab" className="px-3 py-2 rounded-button border border-border bg-background text-foreground" />}
+    title={<input placeholder="Focus me with tab" className="px-3 py-2 rounded-button-radius border border-border bg-background text-foreground" />}
     hover={false}
     popover={false}
 >
@@ -108,7 +112,7 @@ import { Tooltip } from "@g4rcez/components/tooltip";
 {
     /* Click only — acts like a popover */
 }
-<Tooltip title={<button className="px-4 py-2 bg-primary text-primary-foreground rounded-button">Click me</button>} hover={false} focus={false}>
+<Tooltip title={<button className="px-4 py-2 bg-primary text-primary-foreground rounded-button-radius">Click me</button>} hover={false} focus={false}>
     Shown on click
 </Tooltip>;
 ```
@@ -122,7 +126,7 @@ import { Tooltip } from "@g4rcez/components/tooltip";
     followCursor
     placement="top-start"
     title={
-        <div className="w-full h-32 rounded-card border border-border bg-muted flex items-center justify-center">
+        <div className="w-full h-32 rounded-card-radius border border-border bg-muted flex items-center justify-center">
             <span className="text-muted-foreground">Move your mouse over this area</span>
         </div>
     }
@@ -143,7 +147,7 @@ function ControlledTooltip() {
     return (
         <>
             <Tooltip
-                title={<button className="px-4 py-2 rounded-button border border-border text-foreground">Target</button>}
+                title={<button className="px-4 py-2 rounded-button-radius border border-border text-foreground">Target</button>}
                 open={isOpen}
                 onChange={setIsOpen}
                 hover={false}
@@ -154,10 +158,10 @@ function ControlledTooltip() {
             </Tooltip>
 
             <div className="mt-4 flex gap-2">
-                <button onClick={() => setIsOpen(true)} className="px-3 py-1 bg-primary text-primary-foreground rounded-button text-sm">
+                <button onClick={() => setIsOpen(true)} className="px-3 py-1 bg-primary text-primary-foreground rounded-button-radius text-sm">
                     Show
                 </button>
-                <button onClick={() => setIsOpen(false)} className="px-3 py-1 bg-muted text-foreground rounded-button text-sm">
+                <button onClick={() => setIsOpen(false)} className="px-3 py-1 bg-muted text-foreground rounded-button-radius text-sm">
                     Hide
                 </button>
             </div>
@@ -174,7 +178,7 @@ import { Tooltip } from "@g4rcez/components/tooltip";
 {
     /* Render as <div> */
 }
-<Tooltip as="div" title={<span className="p-3 bg-muted rounded-button inline-block text-foreground">Div with tooltip</span>}>
+<Tooltip as="div" title={<span className="p-3 bg-muted rounded-button-radius inline-block text-foreground">Div with tooltip</span>}>
     Tooltip on a div
 </Tooltip>;
 

package/ai/docs/Typography.md

@@ -143,7 +143,7 @@ import { Button } from "@g4rcez/components/button";
 ### Profile Card
 
 ```tsx
-<div className="flex flex-col gap-base rounded-card border border-border bg-card-background p-4">
+<div className="flex flex-col gap-base rounded-card-radius border border-border bg-card-background p-4">
     <PageTitle title="John Doe">Software Engineer</PageTitle>
     <div className="flex flex-col gap-sm">
         <Info label="Email" row>