@g4rcez/components 4.0.1 → 4.1.1

package/{dist/ai → ai}/docs/Skeleton.md

@@ -27,11 +27,11 @@ A pre-built table-cell skeleton with `h-6 w-10/12 animate-pulse rounded bg-muted
 
 A configurable block skeleton.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | — | Override or extend dimensions and shape |
-| `as` | `React.ElementType` | `"span"` | Polymorphic root element |
-| `style` | `CSSProperties` | — | Inline styles (e.g. dynamic `width`) |
+| Prop        | Type                | Default  | Description                             |
+| ----------- | ------------------- | -------- | --------------------------------------- |
+| `className` | `string`            | —        | Override or extend dimensions and shape |
+| `as`        | `React.ElementType` | `"span"` | Polymorphic root element                |
+| `style`     | `CSSProperties`     | —        | Inline styles (e.g. dynamic `width`)    |
 
 Default appearance: `block h-8 w-32 animate-pulse rounded bg-muted`.
 
@@ -39,18 +39,18 @@ Default appearance: `block h-8 w-32 animate-pulse rounded bg-muted`.
 
 A vertical list of randomized-width `Skeleton` lines.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `rows` | `number` | — | Number of skeleton lines to render |
-| `className` | `string` | — | Additional classes for the `<ul>` container |
+| Prop        | Type     | Default | Description                                 |
+| ----------- | -------- | ------- | ------------------------------------------- |
+| `rows`      | `number` | —       | Number of skeleton lines to render          |
+| `className` | `string` | —       | Additional classes for the `<ul>` container |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-muted` | `--muted` | Pulse animation background for all skeleton variants |
+| Token      | CSS Variable | Purpose                                              |
+| ---------- | ------------ | ---------------------------------------------------- |
+| `bg-muted` | `--muted`    | Pulse animation background for all skeleton variants |
 
 ## Examples
 
@@ -58,19 +58,25 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 function TableSkeleton() {
-  return (
-    <table className="w-full">
-      <tbody>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <tr key={index} className="border-b border-border">
-            <td className="py-3 px-4"><SkeletonCell /></td>
-            <td className="py-3 px-4"><SkeletonCell /></td>
-            <td className="py-3 px-4"><SkeletonCell /></td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
+    return (
+        <table className="w-full">
+            <tbody>
+                {Array.from({ length: 5 }).map((_, index) => (
+                    <tr key={index} className="border-b border-border">
+                        <td className="py-3 px-4">
+                            <SkeletonCell />
+                        </td>
+                        <td className="py-3 px-4">
+                            <SkeletonCell />
+                        </td>
+                        <td className="py-3 px-4">
+                            <SkeletonCell />
+                        </td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
 }
 ```
 
@@ -78,20 +84,20 @@ function TableSkeleton() {
 
 ```tsx
 function CardSkeleton() {
-  return (
-    <div className="rounded-card 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 />
-        <SkeletonCell />
-        <Skeleton className="h-2 w-1/2" />
-      </div>
-      <div className="flex gap-2">
-        <Skeleton className="h-8 w-20" />
-        <Skeleton className="h-8 w-16" />
-      </div>
-    </div>
-  );
+    return (
+        <div className="rounded-card 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 />
+                <SkeletonCell />
+                <Skeleton className="h-2 w-1/2" />
+            </div>
+            <div className="flex gap-2">
+                <Skeleton className="h-8 w-20" />
+                <Skeleton className="h-8 w-16" />
+            </div>
+        </div>
+    );
 }
 ```
 
@@ -105,15 +111,7 @@ function CardSkeleton() {
 
 ```tsx
 function DataSection({ data, loading }: { data?: Item; loading: boolean }) {
-  return (
-    <div>
-      {loading ? (
-        <Skeleton className="h-6 w-full" />
-      ) : (
-        <p>{data?.name}</p>
-      )}
-    </div>
-  );
+    return <div>{loading ? <Skeleton className="h-6 w-full" /> : <p>{data?.name}</p>}</div>;
 }
 ```
 
@@ -121,15 +119,15 @@ function DataSection({ data, loading }: { data?: Item; loading: boolean }) {
 
 ```tsx
 function UserRowSkeleton() {
-  return (
-    <div className="flex items-center gap-3">
-      <Skeleton className="size-10 rounded-full" />
-      <div className="flex-1 space-y-1">
-        <SkeletonCell />
-        <Skeleton className="h-2 w-1/3" />
-      </div>
-    </div>
-  );
+    return (
+        <div className="flex items-center gap-3">
+            <Skeleton className="size-10 rounded-full" />
+            <div className="flex-1 space-y-1">
+                <SkeletonCell />
+                <Skeleton className="h-2 w-1/3" />
+            </div>
+        </div>
+    );
 }
 ```
 
@@ -155,9 +153,7 @@ function UserRowSkeleton() {
 - Consider `aria-label="Loading content"` on the skeleton container for additional context.
 
 ```tsx
-<div aria-live="polite">
-  {loading ? <SkeletonCell /> : <ActualContent />}
-</div>
+<div aria-live="polite">{loading ? <SkeletonCell /> : <ActualContent />}</div>
 ```
 
 ## Notes

package/{dist/ai → 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/{dist/ai → 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/{dist/ai → 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/{dist/ai → 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