@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Progress.md

@@ -19,24 +19,24 @@ import { Progress } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `percent` | `number` | — | Current progress value (0–100) |
-| `max` | `number` | — | Maximum value (forwarded to Base UI `Progress.Root`) |
-| `label` | `Label` | — | Custom text overlay; overrides the default `{percent} %` |
-| `container` | `string` | — | Additional classes for the track element |
-| `className` | `string` | — | Additional classes for the indicator (fill) element |
-| `textClassName` | `string` | — | Additional classes for the label text overlay |
+| Prop            | Type     | Default | Description                                              |
+| --------------- | -------- | ------- | -------------------------------------------------------- |
+| `percent`       | `number` | —       | Current progress value (0–100)                           |
+| `max`           | `number` | —       | Maximum value (forwarded to Base UI `Progress.Root`)     |
+| `label`         | `Label`  | —       | Custom text overlay; overrides the default `{percent} %` |
+| `container`     | `string` | —       | Additional classes for the track element                 |
+| `className`     | `string` | —       | Additional classes for the indicator (fill) element      |
+| `textClassName` | `string` | —       | Additional classes for the label text overlay            |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-background` | `--background` | Track (unfilled) background |
-| `bg-primary` | `--primary` | Indicator (fill) color |
-| `text-primary-foreground` | `--primary-foreground` | Default label text color |
+| Token                     | CSS Variable           | Purpose                     |
+| ------------------------- | ---------------------- | --------------------------- |
+| `bg-background`           | `--background`         | Track (unfilled) background |
+| `bg-primary`              | `--primary`            | Indicator (fill) color      |
+| `text-primary-foreground` | `--primary-foreground` | Default label text color    |
 
 ## Examples
 
@@ -50,16 +50,16 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 function AnimatedProgress() {
-  const [progress, setProgress] = useState(0);
+    const [progress, setProgress] = useState(0);
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
-    }, 500);
-    return () => clearInterval(timer);
-  }, []);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
+        }, 500);
+        return () => clearInterval(timer);
+    }, []);
 
-  return <Progress percent={progress} />;
+    return <Progress percent={progress} />;
 }
 ```
 
@@ -74,26 +74,30 @@ function AnimatedProgress() {
 When `percent` is `undefined` the indicator is not rendered and the label is hidden, leaving only the track. Combine with a separate `Spinner` for unknown-duration operations.
 
 ```tsx
-{isLoading ? <Spinner /> : <Progress percent={uploadPercent} />}
+{
+    isLoading ? <Spinner /> : <Progress percent={uploadPercent} />;
+}
 ```
 
 ### Multi-Step Form Progress
 
 ```tsx
 function MultiStepForm() {
-  const [currentStep, setCurrentStep] = useState(1);
-  const totalSteps = 4;
-  const progress = (currentStep / totalSteps) * 100;
-
-  return (
-    <div className="space-y-4">
-      <div className="flex justify-between items-center text-sm text-muted-foreground">
-        <span>Step {currentStep} of {totalSteps}</span>
-        <span>{Math.round(progress)}% complete</span>
-      </div>
-      <Progress percent={progress} />
-    </div>
-  );
+    const [currentStep, setCurrentStep] = useState(1);
+    const totalSteps = 4;
+    const progress = (currentStep / totalSteps) * 100;
+
+    return (
+        <div className="space-y-4">
+            <div className="flex justify-between items-center text-sm text-muted-foreground">
+                <span>
+                    Step {currentStep} of {totalSteps}
+                </span>
+                <span>{Math.round(progress)}% complete</span>
+            </div>
+            <Progress percent={progress} />
+        </div>
+    );
 }
 ```
 
@@ -101,22 +105,22 @@ function MultiStepForm() {
 
 ```tsx
 function FileUploadProgress({ fileName, percent }: { fileName: string; percent: number }) {
-  const isDone = percent >= 100;
-
-  return (
-    <div className="space-y-1">
-      <div className="flex justify-between text-sm">
-        <span className="text-foreground">{fileName}</span>
-        <span className="text-muted-foreground">{percent}%</span>
-      </div>
-      <Progress
-        percent={percent}
-        label={isDone ? "Complete" : undefined}
-        container={isDone ? "bg-success/20" : undefined}
-        className={isDone ? "bg-success" : undefined}
-      />
-    </div>
-  );
+    const isDone = percent >= 100;
+
+    return (
+        <div className="space-y-1">
+            <div className="flex justify-between text-sm">
+                <span className="text-foreground">{fileName}</span>
+                <span className="text-muted-foreground">{percent}%</span>
+            </div>
+            <Progress
+                percent={percent}
+                label={isDone ? "Complete" : undefined}
+                container={isDone ? "bg-success/20" : undefined}
+                className={isDone ? "bg-success" : undefined}
+            />
+        </div>
+    );
 }
 ```
 

package/ai/docs/Radiobox.md

@@ -21,22 +21,22 @@ import { Radiobox } from "@g4rcez/components/radiobox";
 
 Accepts all standard HTML `input[type="radio"]` attributes, plus:
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | — | Label text or element displayed next to the radio button. |
-| `size` | `"medium" \| "large"` | `"medium"` | Visual size of the radio button. |
-| `className` | `string` | — | Additional CSS classes for the `<input>` element. |
+| Prop        | Type                  | Default    | Description                                               |
+| ----------- | --------------------- | ---------- | --------------------------------------------------------- |
+| `children`  | `React.ReactNode`     | —          | Label text or element displayed next to the radio button. |
+| `size`      | `"medium" \| "large"` | `"medium"` | Visual size of the radio button.                          |
+| `className` | `string`              | —          | Additional CSS classes for the `<input>` element.         |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `border-card-border` | `--card-border` | Default border color of the radio circle |
-| `text-primary` | `--primary` | Checked fill color (via `accent-color`) |
-| `focus:ring-primary` | `--primary` | Focus ring color |
-| `disabled:opacity-70` | — | Reduced opacity for disabled state |
+| Token                 | CSS Variable    | Purpose                                  |
+| --------------------- | --------------- | ---------------------------------------- |
+| `border-card-border`  | `--card-border` | Default border color of the radio circle |
+| `text-primary`        | `--primary`     | Checked fill color (via `accent-color`)  |
+| `focus:ring-primary`  | `--primary`     | Focus ring color                         |
+| `disabled:opacity-70` | —               | Reduced opacity for disabled state       |
 
 ## Examples
 
@@ -46,19 +46,19 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { Radiobox } from "@g4rcez/components/radiobox";
 
 export default function PlanSelector() {
-  return (
-    <div className="flex flex-col gap-sm">
-      <Radiobox name="plan" value="basic" defaultChecked>
-        Basic Plan
-      </Radiobox>
-      <Radiobox name="plan" value="pro">
-        Pro Plan
-      </Radiobox>
-      <Radiobox name="plan" value="enterprise">
-        Enterprise Plan
-      </Radiobox>
-    </div>
-  );
+    return (
+        <div className="flex flex-col gap-sm">
+            <Radiobox name="plan" value="basic" defaultChecked>
+                Basic Plan
+            </Radiobox>
+            <Radiobox name="plan" value="pro">
+                Pro Plan
+            </Radiobox>
+            <Radiobox name="plan" value="enterprise">
+                Enterprise Plan
+            </Radiobox>
+        </div>
+    );
 }
 ```
 
@@ -68,11 +68,11 @@ export default function PlanSelector() {
 import { Radiobox } from "@g4rcez/components/radiobox";
 
 export default function DisabledOption() {
-  return (
-    <Radiobox disabled name="option" value="legacy">
-      Legacy (unavailable)
-    </Radiobox>
-  );
+    return (
+        <Radiobox disabled name="option" value="legacy">
+            Legacy (unavailable)
+        </Radiobox>
+    );
 }
 ```
 
@@ -82,14 +82,22 @@ export default function DisabledOption() {
 import { Radiobox } from "@g4rcez/components/radiobox";
 
 export default function GenderSelector() {
-  return (
-    <div className="grid grid-cols-2 gap-base">
-      <Radiobox name="gender" value="male">Male</Radiobox>
-      <Radiobox name="gender" value="female">Female</Radiobox>
-      <Radiobox name="gender" value="non-binary">Non-binary</Radiobox>
-      <Radiobox name="gender" value="prefer-not">Prefer not to say</Radiobox>
-    </div>
-  );
+    return (
+        <div className="grid grid-cols-2 gap-base">
+            <Radiobox name="gender" value="male">
+                Male
+            </Radiobox>
+            <Radiobox name="gender" value="female">
+                Female
+            </Radiobox>
+            <Radiobox name="gender" value="non-binary">
+                Non-binary
+            </Radiobox>
+            <Radiobox name="gender" value="prefer-not">
+                Prefer not to say
+            </Radiobox>
+        </div>
+    );
 }
 ```
 
@@ -116,10 +124,10 @@ export default function GenderSelector() {
 
 ## Data Attributes
 
-| Attribute | Element | Value | Description |
-|-----------|---------|-------|-------------|
-| `data-component` | `label` | `"radiobox"` | Identifies the component. |
-| `data-disabled` | `label` | `true \| undefined` | Set when the radio is disabled. |
+| Attribute        | Element | Value               | Description                     |
+| ---------------- | ------- | ------------------- | ------------------------------- |
+| `data-component` | `label` | `"radiobox"`        | Identifies the component.       |
+| `data-disabled`  | `label` | `true \| undefined` | Set when the radio is disabled. |
 
 ## Notes
 

package/ai/docs/RenderOnView.md

@@ -19,12 +19,12 @@ import { RenderOnView } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `onIntersection` | `() => void` | - | Callback fired once when the container first enters the viewport |
-| `children` | `React.ReactNode` | - | Content to render when the container is visible |
-| `as` | `React.ElementType` | `"div"` | HTML element to render the container as |
-| `...props` | `React.ComponentPropsWithoutRef<T>` | - | All props valid for the chosen element type |
+| Prop             | Type                                | Default | Description                                                      |
+| ---------------- | ----------------------------------- | ------- | ---------------------------------------------------------------- |
+| `onIntersection` | `() => void`                        | -       | Callback fired once when the container first enters the viewport |
+| `children`       | `React.ReactNode`                   | -       | Content to render when the container is visible                  |
+| `as`             | `React.ElementType`                 | `"div"` | HTML element to render the container as                          |
+| `...props`       | `React.ComponentPropsWithoutRef<T>` | -       | All props valid for the chosen element type                      |
 
 ## Design Tokens
 
@@ -44,13 +44,11 @@ None — `RenderOnView` is a layout/performance primitive that applies no styles
 
 ```tsx
 <div>
-  <div className="h-screen flex items-center justify-center text-foreground">
-    Scroll down to see lazy content
-  </div>
+    <div className="h-screen flex items-center justify-center text-foreground">Scroll down to see lazy content</div>
 
-  <RenderOnView>
-    <ExpensiveChart data={largeDataset} />
-  </RenderOnView>
+    <RenderOnView>
+        <ExpensiveChart data={largeDataset} />
+    </RenderOnView>
 </div>
 ```
 
@@ -58,11 +56,7 @@ None — `RenderOnView` is a layout/performance primitive that applies no styles
 
 ```tsx
 const TrackableSection = ({ sectionName, children }: { sectionName: string; children: React.ReactNode }) => (
-  <RenderOnView
-    onIntersection={() => analytics.track("Section Viewed", { section: sectionName })}
-  >
-    {children}
-  </RenderOnView>
+    <RenderOnView onIntersection={() => analytics.track("Section Viewed", { section: sectionName })}>{children}</RenderOnView>
 );
 ```
 
@@ -70,19 +64,19 @@ const TrackableSection = ({ sectionName, children }: { sectionName: string; chil
 
 ```tsx
 <main>
-  <HeroSection />
+    <HeroSection />
 
-  <RenderOnView>
-    <FeaturesSection />
-  </RenderOnView>
+    <RenderOnView>
+        <FeaturesSection />
+    </RenderOnView>
 
-  <RenderOnView>
-    <TestimonialsSection />
-  </RenderOnView>
+    <RenderOnView>
+        <TestimonialsSection />
+    </RenderOnView>
 
-  <RenderOnView>
-    <ContactForm />
-  </RenderOnView>
+    <RenderOnView>
+        <ContactForm />
+    </RenderOnView>
 </main>
 ```
 
@@ -90,7 +84,7 @@ const TrackableSection = ({ sectionName, children }: { sectionName: string; chil
 
 ```tsx
 <RenderOnView as="section" aria-label="Analytics charts">
-  <RevenueChart />
+    <RevenueChart />
 </RenderOnView>
 ```
 
@@ -103,10 +97,10 @@ import { Spinner } from "@g4rcez/components";
 const HeavyComponent = lazy(() => import("./HeavyComponent"));
 
 <RenderOnView>
-  <Suspense fallback={<Spinner />}>
-    <HeavyComponent />
-  </Suspense>
-</RenderOnView>
+    <Suspense fallback={<Spinner />}>
+        <HeavyComponent />
+    </Suspense>
+</RenderOnView>;
 ```
 
 ## Do

package/ai/docs/Resizable.md

@@ -19,9 +19,9 @@ import { Resizable } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Content rendered inside the animated container |
+| Prop       | Type              | Default | Description                                    |
+| ---------- | ----------------- | ------- | ---------------------------------------------- |
+| `children` | `React.ReactNode` | -       | Content rendered inside the animated container |
 
 ## Design Tokens
 
@@ -42,27 +42,23 @@ None — `Resizable` is a layout animation primitive that applies no color or sp
 import { useState } from "react";
 
 const CollapsiblePanel = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="border border-border rounded-card">
-      <button
-        type="button"
-        className="w-full px-4 py-3 text-left font-medium text-foreground"
-        onClick={() => setIsOpen((v) => !v)}
-      >
-        Toggle Details
-      </button>
-      <Resizable>
-        {isOpen ? (
-          <div className="px-4 pb-4 text-foreground">
-            <p>This content expands and collapses with a smooth height animation.</p>
-            <p>Additional paragraphs will also animate smoothly.</p>
-          </div>
-        ) : null}
-      </Resizable>
-    </div>
-  );
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div className="border border-border rounded-card">
+            <button type="button" className="w-full px-4 py-3 text-left font-medium text-foreground" onClick={() => setIsOpen((v) => !v)}>
+                Toggle Details
+            </button>
+            <Resizable>
+                {isOpen ? (
+                    <div className="px-4 pb-4 text-foreground">
+                        <p>This content expands and collapses with a smooth height animation.</p>
+                        <p>Additional paragraphs will also animate smoothly.</p>
+                    </div>
+                ) : null}
+            </Resizable>
+        </div>
+    );
 };
 ```
 
@@ -73,27 +69,24 @@ import { useState } from "react";
 import { Button } from "@g4rcez/components/button";
 
 const GrowingList = () => {
-  const [items, setItems] = useState(["Item 1"]);
-
-  return (
-    <div className="flex flex-col gap-base">
-      <Button
-        theme="primary"
-        onClick={() => setItems((prev) => [...prev, `Item ${prev.length + 1}`])}
-      >
-        Add Item
-      </Button>
-      <Resizable>
-        <ul className="flex flex-col gap-sm">
-          {items.map((item) => (
-            <li key={item} className="text-foreground">
-              {item}
-            </li>
-          ))}
-        </ul>
-      </Resizable>
-    </div>
-  );
+    const [items, setItems] = useState(["Item 1"]);
+
+    return (
+        <div className="flex flex-col gap-base">
+            <Button theme="primary" onClick={() => setItems((prev) => [...prev, `Item ${prev.length + 1}`])}>
+                Add Item
+            </Button>
+            <Resizable>
+                <ul className="flex flex-col gap-sm">
+                    {items.map((item) => (
+                        <li key={item} className="text-foreground">
+                            {item}
+                        </li>
+                    ))}
+                </ul>
+            </Resizable>
+        </div>
+    );
 };
 ```
 
@@ -101,13 +94,13 @@ const GrowingList = () => {
 
 ```tsx
 const TabbedContent = ({ activeTab }: { activeTab: string }) => (
-  <Resizable>
-    <div className="p-4 text-foreground">
-      {activeTab === "overview" && <OverviewPanel />}
-      {activeTab === "settings" && <SettingsPanel />}
-      {activeTab === "history"  && <HistoryPanel />}
-    </div>
-  </Resizable>
+    <Resizable>
+        <div className="p-4 text-foreground">
+            {activeTab === "overview" && <OverviewPanel />}
+            {activeTab === "settings" && <SettingsPanel />}
+            {activeTab === "history" && <HistoryPanel />}
+        </div>
+    </Resizable>
 );
 ```
 
@@ -115,19 +108,21 @@ 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">
-    <Resizable>
-      {data === null ? (
-        <div className="p-4 text-muted-foreground">Loading…</div>
-      ) : (
-        <ul className="p-4 flex flex-col gap-sm">
-          {data.map((item) => (
-            <li key={item} className="text-foreground">{item}</li>
-          ))}
-        </ul>
-      )}
-    </Resizable>
-  </div>
+    <div className="rounded-card border border-border bg-card-background shadow-shadow-card">
+        <Resizable>
+            {data === null ? (
+                <div className="p-4 text-muted-foreground">Loading…</div>
+            ) : (
+                <ul className="p-4 flex flex-col gap-sm">
+                    {data.map((item) => (
+                        <li key={item} className="text-foreground">
+                            {item}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </Resizable>
+    </div>
 );
 ```