@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Slider.md

@@ -21,27 +21,27 @@ import { Slider } from "@g4rcez/components";
 
 `Slider` accepts all props from `@base-ui/react/slider` Root, plus:
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tooltip` | `boolean` | `false` | Shows a tooltip with the current value above the thumb while dragging. |
-| `value` | `number[]` | — | Controlled value(s). |
-| `defaultValue` | `number[]` | `[0]` | Initial value(s) for uncontrolled usage. |
-| `min` | `number` | `0` | Minimum value. |
-| `max` | `number` | `100` | Maximum value. |
-| `step` | `number` | `1` | Increment between selectable values. |
-| `className` | `string` | — | Additional classes applied to the control track wrapper. |
+| Prop           | Type       | Default | Description                                                            |
+| -------------- | ---------- | ------- | ---------------------------------------------------------------------- |
+| `tooltip`      | `boolean`  | `false` | Shows a tooltip with the current value above the thumb while dragging. |
+| `value`        | `number[]` | —       | Controlled value(s).                                                   |
+| `defaultValue` | `number[]` | `[0]`   | Initial value(s) for uncontrolled usage.                               |
+| `min`          | `number`   | `0`     | Minimum value.                                                         |
+| `max`          | `number`   | `100`   | Maximum value.                                                         |
+| `step`         | `number`   | `1`     | Increment between selectable values.                                   |
+| `className`    | `string`   | —       | Additional classes applied to the control track wrapper.               |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-background` | `--background` | Track background (unfilled area) |
-| `bg-primary` | `--primary` | Indicator fill (filled area) |
-| `border-input-border` | `--input-border` | Thumb border color |
-| `bg-input-switch` | `--input-switch` | Thumb fill color (checked/active) |
-| `focus-within:ring-primary` | `--primary` | Focus ring on thumb |
+| Token                       | CSS Variable     | Purpose                           |
+| --------------------------- | ---------------- | --------------------------------- |
+| `bg-background`             | `--background`   | Track background (unfilled area)  |
+| `bg-primary`                | `--primary`      | Indicator fill (filled area)      |
+| `border-input-border`       | `--input-border` | Thumb border color                |
+| `bg-input-switch`           | `--input-switch` | Thumb fill color (checked/active) |
+| `focus-within:ring-primary` | `--primary`      | Focus ring on thumb               |
 
 ## Variants
 
@@ -61,14 +61,7 @@ Two values in `defaultValue` render two thumbs that define a range.
 import { Slider } from "@g4rcez/components";
 
 export default function VolumeControl() {
-  return (
-    <Slider
-      min={0}
-      max={100}
-      defaultValue={[50]}
-      onChange={(value) => console.log(value)}
-    />
-  );
+    return <Slider min={0} max={100} defaultValue={[50]} onChange={(value) => console.log(value)} />;
 }
 ```
 
@@ -78,14 +71,7 @@ export default function VolumeControl() {
 import { Slider } from "@g4rcez/components";
 
 export default function PriceRangeFilter() {
-  return (
-    <Slider
-      min={0}
-      max={1000}
-      defaultValue={[200, 800]}
-      tooltip
-    />
-  );
+    return <Slider min={0} max={1000} defaultValue={[200, 800]} tooltip />;
 }
 ```
 
@@ -96,23 +82,14 @@ import { useState } from "react";
 import { Slider } from "@g4rcez/components";
 
 export default function SteppedSlider() {
-  const [value, setValue] = useState([0.5]);
-
-  return (
-    <div className="flex flex-col gap-base">
-      <Slider
-        min={0}
-        max={1}
-        step={0.1}
-        value={value}
-        tooltip
-        onValueChange={setValue}
-      />
-      <span className="text-sm text-muted-foreground">
-        Current: {value[0].toFixed(1)}
-      </span>
-    </div>
-  );
+    const [value, setValue] = useState([0.5]);
+
+    return (
+        <div className="flex flex-col gap-base">
+            <Slider min={0} max={1} step={0.1} value={value} tooltip onValueChange={setValue} />
+            <span className="text-sm text-muted-foreground">Current: {value[0].toFixed(1)}</span>
+        </div>
+    );
 }
 ```
 

package/ai/docs/Slot.md

@@ -19,28 +19,28 @@ import { Slot, Slottable } from "@g4rcez/components";
 
 ## Exports
 
-| Export | Description |
-|--------|-------------|
-| `Slot` | Merges props into the single child element |
-| `Slottable` | Marks which child is the slot target when the component has internal structure |
-| `createSlot(ownerName)` | Factory to create a named `Slot` (for building design-system components) |
-| `createSlottable(ownerName)` | Factory to create a named `Slottable` |
+| Export                       | Description                                                                    |
+| ---------------------------- | ------------------------------------------------------------------------------ |
+| `Slot`                       | Merges props into the single child element                                     |
+| `Slottable`                  | Marks which child is the slot target when the component has internal structure |
+| `createSlot(ownerName)`      | Factory to create a named `Slot` (for building design-system components)       |
+| `createSlottable(ownerName)` | Factory to create a named `Slottable`                                          |
 
 ## Props
 
 ### Slot
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | A single valid React element that will receive all of Slot's props |
-| `ref` | `React.ForwardedRef<HTMLElement>` | - | Forwarded to the child element |
-| `...props` | `React.HTMLAttributes<HTMLElement>` | - | Props merged into the child |
+| Prop       | Type                                | Default | Description                                                        |
+| ---------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |
+| `children` | `React.ReactNode`                   | -       | A single valid React element that will receive all of Slot's props |
+| `ref`      | `React.ForwardedRef<HTMLElement>`   | -       | Forwarded to the child element                                     |
+| `...props` | `React.HTMLAttributes<HTMLElement>` | -       | Props merged into the child                                        |
 
 ### Slottable
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | The element to render as the slot target |
+| Prop       | Type              | Default | Description                              |
+| ---------- | ----------------- | ------- | ---------------------------------------- |
+| `children` | `React.ReactNode` | -       | The element to render as the slot target |
 
 ## Design Tokens
 
@@ -133,9 +133,7 @@ Both handlers are called when both the `Slot` and the child define the same even
 
 ```tsx
 <Slot onClick={() => console.log("slot handler")}>
-  <button onClick={() => console.log("child handler")}>
-    Click me
-  </button>
+    <button onClick={() => console.log("child handler")}>Click me</button>
 </Slot>
 // Logs: "child handler", then "slot handler"
 ```

package/ai/docs/Spinner.md

@@ -21,9 +21,9 @@ import { Spinner, Loading } from "@g4rcez/components";
 
 ### Spinner
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | — | Additional classes to customize size, color, or border |
+| Prop        | Type     | Default | Description                                            |
+| ----------- | -------- | ------- | ------------------------------------------------------ |
+| `className` | `string` | —       | Additional classes to customize size, color, or border |
 
 Default appearance: `size-12 border-4 border-background border-b-primary animate-spin rounded-full`.
 
@@ -35,10 +35,10 @@ No props. Renders a centered `Spinner` inside a `flex h-full w-full items-center
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
+| Token               | CSS Variable   | Purpose                     |
+| ------------------- | -------------- | --------------------------- |
 | `border-background` | `--background` | Inactive spinner ring color |
-| `border-b-primary` | `--primary` | Active spinner arc color |
+| `border-b-primary`  | `--primary`    | Active spinner arc color    |
 
 ## Examples
 
@@ -51,7 +51,9 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 ### Full-Container Loading State
 
 ```tsx
-{isLoading ? <Loading /> : <Content />}
+{
+    isLoading ? <Loading /> : <Content />;
+}
 ```
 
 ### Custom Size
@@ -64,8 +66,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 <button type="submit" disabled={isSubmitting} className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-button">
-  {isSubmitting && <Spinner className="size-4 border-2 border-primary-foreground border-b-transparent" />}
-  {isSubmitting ? "Saving…" : "Save"}
+    {isSubmitting && <Spinner className="size-4 border-2 border-primary-foreground border-b-transparent" />}
+    {isSubmitting ? "Saving…" : "Save"}
 </button>
 ```
 
@@ -75,10 +77,10 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { Card } from "@g4rcez/components/card";
 
 <Card title="Analytics">
-  <div className="h-64 flex items-center justify-center">
-    <Spinner />
-  </div>
-</Card>
+    <div className="h-64 flex items-center justify-center">
+        <Spinner />
+    </div>
+</Card>;
 ```
 
 ### Lazy Component Fallback
@@ -88,8 +90,8 @@ import { Suspense } from "react";
 import { Loading } from "@g4rcez/components";
 
 <Suspense fallback={<Loading />}>
-  <HeavyComponent />
-</Suspense>
+    <HeavyComponent />
+</Suspense>;
 ```
 
 ## Do

package/ai/docs/Stats.md

@@ -19,27 +19,27 @@ import { Stats } from "@g4rcez/components/stats";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `Label` | — | Metric label displayed above the value |
-| `Icon` | `React.FC<{ className: string }>` | — | Icon component to display (Phosphor recommended) |
-| `iconContainer` | `string` | — | Additional classes for the icon background container |
-| `footer` | `React.ReactElement` | — | Optional footer area for trend data or context |
-| `children` | `React.ReactNode` | — | The metric value (e.g. a number, formatted string) |
+| Prop            | Type                              | Default | Description                                          |
+| --------------- | --------------------------------- | ------- | ---------------------------------------------------- |
+| `title`         | `Label`                           | —       | Metric label displayed above the value               |
+| `Icon`          | `React.FC<{ className: string }>` | —       | Icon component to display (Phosphor recommended)     |
+| `iconContainer` | `string`                          | —       | Additional classes for the icon background container |
+| `footer`        | `React.ReactElement`              | —       | Optional footer area for trend data or context       |
+| `children`      | `React.ReactNode`                 | —       | The metric value (e.g. a number, formatted string)   |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-card-background` | `--card-background` | Card surface |
-| `border-card-border` | `--card-border` | Card border and divider |
-| `rounded-card` | `--radius-card` | 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) |
-| `divide-card-border` | `--card-border` | Divider between header and footer |
+| Token                     | CSS Variable           | Purpose                             |
+| ------------------------- | ---------------------- | ----------------------------------- |
+| `bg-card-background`      | `--card-background`    | Card surface                        |
+| `border-card-border`      | `--card-border`        | Card border and divider             |
+| `rounded-card`            | `--radius-card`        | 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)                |
+| `divide-card-border`      | `--card-border`        | Divider between header and footer   |
 
 ## Examples
 
@@ -49,8 +49,8 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { UsersIcon } from "@phosphor-icons/react";
 
 <Stats title="Active Users" Icon={UsersIcon}>
-  1,234
-</Stats>
+    1,234
+</Stats>;
 ```
 
 ### With Footer Trend
@@ -59,18 +59,18 @@ import { UsersIcon } from "@phosphor-icons/react";
 import { TrendUpIcon, CurrencyDollarIcon } from "@phosphor-icons/react";
 
 <Stats
-  title="Revenue"
-  Icon={CurrencyDollarIcon}
-  iconContainer="bg-success"
-  footer={
-    <div className="flex items-center gap-1 text-success text-sm font-medium">
-      <TrendUpIcon size={14} />
-      <span>+12% from last month</span>
-    </div>
-  }
+    title="Revenue"
+    Icon={CurrencyDollarIcon}
+    iconContainer="bg-success"
+    footer={
+        <div className="flex items-center gap-1 text-success text-sm font-medium">
+            <TrendUpIcon size={14} />
+            <span>+12% from last month</span>
+        </div>
+    }
 >
-  $45,200.00
-</Stats>
+    $45,200.00
+</Stats>;
 ```
 
 ### Custom Icon Container Theme
@@ -78,13 +78,9 @@ import { TrendUpIcon, CurrencyDollarIcon } from "@phosphor-icons/react";
 ```tsx
 import { WarningCircleIcon } from "@phosphor-icons/react";
 
-<Stats
-  title="Error Rate"
-  Icon={WarningCircleIcon}
-  iconContainer="bg-danger"
->
-  0.3%
-</Stats>
+<Stats title="Error Rate" Icon={WarningCircleIcon} iconContainer="bg-danger">
+    0.3%
+</Stats>;
 ```
 
 ### Dashboard Grid
@@ -93,10 +89,16 @@ import { WarningCircleIcon } from "@phosphor-icons/react";
 import { UsersIcon, ClockIcon, TargetIcon } from "@phosphor-icons/react";
 
 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-  <Stats title="Users" Icon={UsersIcon}>1.2k</Stats>
-  <Stats title="Sessions" Icon={ClockIcon}>450</Stats>
-  <Stats title="Conversion" Icon={TargetIcon}>3.2%</Stats>
-</div>
+    <Stats title="Users" Icon={UsersIcon}>
+        1.2k
+    </Stats>
+    <Stats title="Sessions" Icon={ClockIcon}>
+        450
+    </Stats>
+    <Stats title="Conversion" Icon={TargetIcon}>
+        3.2%
+    </Stats>
+</div>;
 ```
 
 ### With Skeleton Loading
@@ -106,8 +108,8 @@ import { ChartBarIcon } from "@phosphor-icons/react";
 import { Skeleton } from "@g4rcez/components";
 
 <Stats title="Page Views" Icon={ChartBarIcon}>
-  {isLoading ? <Skeleton className="h-9 w-24" /> : "48,301"}
-</Stats>
+    {isLoading ? <Skeleton className="h-9 w-24" /> : "48,301"}
+</Stats>;
 ```
 
 ## Do

package/ai/docs/Step.md

@@ -21,32 +21,32 @@ import { Steps, Step } from "@g4rcez/components";
 
 ### Steps (Container)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `currentStep` | `number` | — | Index of the currently active step |
-| `steps` | `number` | — | Total number of steps |
-| `children` | `React.ReactNode` | — | `Step` components |
+| Prop          | Type              | Default | Description                        |
+| ------------- | ----------------- | ------- | ---------------------------------- |
+| `currentStep` | `number`          | —       | Index of the currently active step |
+| `steps`       | `number`          | —       | Total number of steps              |
+| `children`    | `React.ReactNode` | —       | `Step` components                  |
 
 ### Step
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `step` | `number` | — | Index of this step |
-| `currentStep` | `number` | — | Index of the currently active step (usually from parent) |
-| `title` | `Label` | — | Step label |
-| `status` | `StepStatus` | — | Override automatic status (`"active" \| "inactive" \| "complete" \| "error"`) |
-| `titleClassName` | `string` | — | Additional classes for the title text |
+| Prop             | Type         | Default | Description                                                                   |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `step`           | `number`     | —       | Index of this step                                                            |
+| `currentStep`    | `number`     | —       | Index of the currently active step (usually from parent)                      |
+| `title`          | `Label`      | —       | Step label                                                                    |
+| `status`         | `StepStatus` | —       | Override automatic status (`"active" \| "inactive" \| "complete" \| "error"`) |
+| `titleClassName` | `string`     | —       | Additional classes for the title text                                         |
 
 Standard `<button>` props are also forwarded (e.g. `onClick`, `disabled`).
 
 ## Step Statuses
 
-| Status | Visual | Icon |
-|--------|--------|------|
-| `active` | Primary color ring | Step number |
-| `inactive` | Muted border | Step number |
+| Status     | Visual             | Icon                |
+| ---------- | ------------------ | ------------------- |
+| `active`   | Primary color ring | Step number         |
+| `inactive` | Muted border       | Step number         |
 | `complete` | Success color fill | Animated check mark |
-| `error` | Danger color fill | Animated X mark |
+| `error`    | Danger color fill  | Animated X mark     |
 
 Status is derived automatically from `step` vs. `currentStep` unless overridden via `status`.
 
@@ -54,17 +54,17 @@ Status is derived automatically from `step` vs. `currentStep` unless overridden
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-primary` / `border-primary` | `--primary-DEFAULT` | Active step fill and border |
-| `text-primary-foreground` | `--primary-foreground` | Active step text |
-| `bg-success` / `border-success` | `--success-DEFAULT` | Complete step fill and border |
-| `text-success-foreground` | `--success-foreground` | Complete step check icon |
-| `bg-danger` / `border-danger` | `--danger-DEFAULT` / `--danger-hover` | Error step fill and border |
-| `text-danger-foreground` | `--danger-foreground` | Error step X icon |
-| `text-disabled` | `--disabled` | Inactive step text |
-| `bg-card-border` / `border-card-border` | `--card-border` | Connector line and inactive border |
-| `bg-background` | `--background` | Inactive step background |
+| Token                                   | CSS Variable                          | Purpose                            |
+| --------------------------------------- | ------------------------------------- | ---------------------------------- |
+| `bg-primary` / `border-primary`         | `--primary-DEFAULT`                   | Active step fill and border        |
+| `text-primary-foreground`               | `--primary-foreground`                | Active step text                   |
+| `bg-success` / `border-success`         | `--success-DEFAULT`                   | Complete step fill and border      |
+| `text-success-foreground`               | `--success-foreground`                | Complete step check icon           |
+| `bg-danger` / `border-danger`           | `--danger-DEFAULT` / `--danger-hover` | Error step fill and border         |
+| `text-danger-foreground`                | `--danger-foreground`                 | Error step X icon                  |
+| `text-disabled`                         | `--disabled`                          | Inactive step text                 |
+| `bg-card-border` / `border-card-border` | `--card-border`                       | Connector line and inactive border |
+| `bg-background`                         | `--background`                        | Inactive step background           |
 
 ## Examples
 
@@ -72,9 +72,9 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 <Steps currentStep={2} steps={3}>
-  <Step step={1} currentStep={2} title="Account" />
-  <Step step={2} currentStep={2} title="Profile" />
-  <Step step={3} currentStep={2} title="Review" />
+    <Step step={1} currentStep={2} title="Account" />
+    <Step step={2} currentStep={2} title="Profile" />
+    <Step step={3} currentStep={2} title="Review" />
 </Steps>
 ```
 
@@ -82,25 +82,25 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 function Wizard() {
-  const [currentStep, setCurrentStep] = useState(1);
-
-  return (
-    <div className="space-y-8">
-      <Steps currentStep={currentStep} steps={4}>
-        <Step step={1} currentStep={currentStep} title="Account" onClick={() => setCurrentStep(1)} />
-        <Step step={2} currentStep={currentStep} title="Profile" onClick={() => setCurrentStep(2)} />
-        <Step step={3} currentStep={currentStep} title="Payment" onClick={() => setCurrentStep(3)} />
-        <Step step={4} currentStep={currentStep} title="Review" onClick={() => setCurrentStep(4)} />
-      </Steps>
-
-      <div className="p-6 rounded-card border border-card-border bg-card-background">
-        {currentStep === 1 && <AccountForm />}
-        {currentStep === 2 && <ProfileForm />}
-        {currentStep === 3 && <PaymentForm />}
-        {currentStep === 4 && <ReviewSummary />}
-      </div>
-    </div>
-  );
+    const [currentStep, setCurrentStep] = useState(1);
+
+    return (
+        <div className="space-y-8">
+            <Steps currentStep={currentStep} steps={4}>
+                <Step step={1} currentStep={currentStep} title="Account" onClick={() => setCurrentStep(1)} />
+                <Step step={2} currentStep={currentStep} title="Profile" onClick={() => setCurrentStep(2)} />
+                <Step step={3} currentStep={currentStep} title="Payment" onClick={() => setCurrentStep(3)} />
+                <Step step={4} currentStep={currentStep} title="Review" onClick={() => setCurrentStep(4)} />
+            </Steps>
+
+            <div className="p-6 rounded-card border border-card-border bg-card-background">
+                {currentStep === 1 && <AccountForm />}
+                {currentStep === 2 && <ProfileForm />}
+                {currentStep === 3 && <PaymentForm />}
+                {currentStep === 4 && <ReviewSummary />}
+            </div>
+        </div>
+    );
 }
 ```
 
@@ -108,9 +108,9 @@ function Wizard() {
 
 ```tsx
 <Steps currentStep={2} steps={3}>
-  <Step step={1} currentStep={2} title="Identity" />
-  <Step step={2} currentStep={2} title="Payment" status="error" />
-  <Step step={3} currentStep={2} title="Finish" />
+    <Step step={1} currentStep={2} title="Identity" />
+    <Step step={2} currentStep={2} title="Payment" status="error" />
+    <Step step={3} currentStep={2} title="Finish" />
 </Steps>
 ```
 
@@ -118,13 +118,13 @@ function Wizard() {
 
 ```tsx
 function CheckoutSteps({ step }: { step: number }) {
-  return (
-    <Steps currentStep={step} steps={3}>
-      <Step step={1} currentStep={step} title="Cart" />
-      <Step step={2} currentStep={step} title="Shipping" />
-      <Step step={3} currentStep={step} title="Confirmation" />
-    </Steps>
-  );
+    return (
+        <Steps currentStep={step} steps={3}>
+            <Step step={1} currentStep={step} title="Cart" />
+            <Step step={2} currentStep={step} title="Shipping" />
+            <Step step={3} currentStep={step} title="Confirmation" />
+        </Steps>
+    );
 }
 ```