@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Dropdown.md

@@ -19,30 +19,30 @@ import { Dropdown } from "@g4rcez/components/dropdown";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `trigger` | `React.ReactElement \| React.ReactNode` | — | Element that toggles the dropdown on click |
-| `open` | `boolean` | — | Controlled open state |
-| `arrow` | `boolean` | `false` | Show an arrow pointer pointing at the trigger |
-| `title` | `React.ReactNode \| string` | — | Header title rendered inside the panel |
-| `restoreFocus` | `boolean` | `true` | Restore focus to the trigger when the panel closes |
-| `returnFocus` | `boolean` | `true` | Return focus to the trigger element |
-| `onChange` | `(nextValue: boolean) => void` | — | Callback fired when the open state changes |
-| `buttonProps` | `React.HTMLProps<"button">` | — | Additional props forwarded to the trigger `<button>` |
-| `children` | `React.ReactNode` | — | Panel content |
+| Prop           | Type                                    | Default | Description                                          |
+| -------------- | --------------------------------------- | ------- | ---------------------------------------------------- |
+| `trigger`      | `React.ReactElement \| React.ReactNode` | —       | Element that toggles the dropdown on click           |
+| `open`         | `boolean`                               | —       | Controlled open state                                |
+| `arrow`        | `boolean`                               | `false` | Show an arrow pointer pointing at the trigger        |
+| `title`        | `React.ReactNode \| string`             | —       | Header title rendered inside the panel               |
+| `restoreFocus` | `boolean`                               | `true`  | Restore focus to the trigger when the panel closes   |
+| `returnFocus`  | `boolean`                               | `true`  | Return focus to the trigger element                  |
+| `onChange`     | `(nextValue: boolean) => void`          | —       | Callback fired when the open state changes           |
+| `buttonProps`  | `React.HTMLProps<"button">`             | —       | Additional props forwarded to the trigger `<button>` |
+| `children`     | `React.ReactNode`                       | —       | Panel content                                        |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-floating-background` | `--floating-background` | Panel surface background |
-| `border-floating-border` | `--floating-border` | Panel border and arrow stroke |
-| `fill-floating-background` | `--floating-background` | Arrow fill color |
-| `z-floating` | `--z-floating` | Z-index for the floating panel |
-| `shadow-shadow-floating` | `--shadow-floating` | Panel drop shadow |
-| `rounded-lg` | — | Panel corner radius |
+| Token                      | CSS Variable            | Purpose                        |
+| -------------------------- | ----------------------- | ------------------------------ |
+| `bg-floating-background`   | `--floating-background` | Panel surface background       |
+| `border-floating-border`   | `--floating-border`     | Panel border and arrow stroke  |
+| `fill-floating-background` | `--floating-background` | Arrow fill color               |
+| `z-floating`               | `--z-floating`          | Z-index for the floating panel |
+| `shadow-shadow-floating`   | `--shadow-floating`     | Panel drop shadow              |
+| `rounded-lg`               | —                       | Panel corner radius            |
 
 ## Examples
 
@@ -53,24 +53,16 @@ import { Dropdown } from "@g4rcez/components/dropdown";
 import { Button } from "@g4rcez/components/button";
 
 function SimpleDropdown() {
-  return (
-    <Dropdown
-      trigger={<Button theme="primary">Actions</Button>}
-    >
-      <div className="flex min-w-48 flex-col py-1">
-        <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">
-          Edit
-        </button>
-        <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">
-          Duplicate
-        </button>
-        <hr className="border-border my-1" />
-        <button className="w-full px-4 py-2 text-left text-danger hover:bg-floating-hover">
-          Delete
-        </button>
-      </div>
-    </Dropdown>
-  );
+    return (
+        <Dropdown trigger={<Button theme="primary">Actions</Button>}>
+            <div className="flex min-w-48 flex-col py-1">
+                <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">Edit</button>
+                <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">Duplicate</button>
+                <hr className="border-border my-1" />
+                <button className="w-full px-4 py-2 text-left text-danger hover:bg-floating-hover">Delete</button>
+            </div>
+        </Dropdown>
+    );
 }
 ```
 
@@ -81,31 +73,25 @@ import { UserIcon, CaretDownIcon } from "@phosphor-icons/react";
 import { Dropdown } from "@g4rcez/components/dropdown";
 
 function AccountDropdown() {
-  return (
-    <Dropdown
-      trigger={
-        <button className="flex items-center gap-2 px-3 py-2 rounded-button border border-border text-foreground">
-          <UserIcon size={16} />
-          Account
-          <CaretDownIcon size={16} />
-        </button>
-      }
-      title="Account Options"
-      arrow
-    >
-      <div className="flex min-w-48 flex-col py-1">
-        <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">
-          Profile Settings
-        </button>
-        <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">
-          Billing
-        </button>
-        <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">
-          Sign Out
-        </button>
-      </div>
-    </Dropdown>
-  );
+    return (
+        <Dropdown
+            trigger={
+                <button className="flex items-center gap-2 px-3 py-2 rounded-button border border-border text-foreground">
+                    <UserIcon size={16} />
+                    Account
+                    <CaretDownIcon size={16} />
+                </button>
+            }
+            title="Account Options"
+            arrow
+        >
+            <div className="flex min-w-48 flex-col py-1">
+                <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">Profile Settings</button>
+                <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">Billing</button>
+                <button className="w-full px-4 py-2 text-left text-foreground hover:bg-floating-hover">Sign Out</button>
+            </div>
+        </Dropdown>
+    );
 }
 ```
 
@@ -116,29 +102,22 @@ import { useState } from "react";
 import { Dropdown } from "@g4rcez/components/dropdown";
 
 function ControlledDropdown() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Dropdown
-      trigger={
-        <button className="px-4 py-2 rounded-button 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"
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <Dropdown
+            trigger={<button className="px-4 py-2 rounded-button bg-muted text-foreground">{isOpen ? "Close" : "Open"} Menu</button>}
+            open={isOpen}
+            onChange={setIsOpen}
         >
-          Close
-        </button>
-      </div>
-    </Dropdown>
-  );
+            <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">
+                    Close
+                </button>
+            </div>
+        </Dropdown>
+    );
 }
 ```
 
@@ -149,48 +128,41 @@ import { FunnelIcon } from "@phosphor-icons/react";
 import { Dropdown } from "@g4rcez/components/dropdown";
 
 function FilterDropdown() {
-  const [status, setStatus] = useState("");
-
-  return (
-    <Dropdown
-      trigger={
-        <button className="flex items-center gap-2 px-3 py-2 rounded-button border border-border text-foreground">
-          <FunnelIcon size={16} />
-          Filters
-          {status && <span className="h-2 w-2 rounded-full bg-primary" />}
-        </button>
-      }
-      title="Filter Options"
-    >
-      <div className="min-w-64 space-y-4 p-4">
-        <div>
-          <label className="block text-sm font-medium text-foreground mb-1">
-            Status
-          </label>
-          <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"
-          >
-            <option value="">All</option>
-            <option value="active">Active</option>
-            <option value="inactive">Inactive</option>
-          </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"
-          >
-            Clear
-          </button>
-          <button className="px-3 py-1 text-sm rounded-button bg-primary text-primary-foreground">
-            Apply
-          </button>
-        </div>
-      </div>
-    </Dropdown>
-  );
+    const [status, setStatus] = useState("");
+
+    return (
+        <Dropdown
+            trigger={
+                <button className="flex items-center gap-2 px-3 py-2 rounded-button border border-border text-foreground">
+                    <FunnelIcon size={16} />
+                    Filters
+                    {status && <span className="h-2 w-2 rounded-full bg-primary" />}
+                </button>
+            }
+            title="Filter Options"
+        >
+            <div className="min-w-64 space-y-4 p-4">
+                <div>
+                    <label className="block text-sm font-medium text-foreground mb-1">Status</label>
+                    <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"
+                    >
+                        <option value="">All</option>
+                        <option value="active">Active</option>
+                        <option value="inactive">Inactive</option>
+                    </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">
+                        Clear
+                    </button>
+                    <button className="px-3 py-1 text-sm rounded-button bg-primary text-primary-foreground">Apply</button>
+                </div>
+            </div>
+        </Dropdown>
+    );
 }
 ```
 

package/ai/docs/Empty.md

@@ -19,17 +19,17 @@ import { Empty } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `Icon` | `Icon` | `FileIcon` | Phosphor icon component to display |
-| `message` | `string` | Localized "No data available" | Descriptive empty state message |
+| Prop      | Type     | Default                       | Description                        |
+| --------- | -------- | ----------------------------- | ---------------------------------- |
+| `Icon`    | `Icon`   | `FileIcon`                    | Phosphor icon component to display |
+| `message` | `string` | Localized "No data available" | Descriptive empty state message    |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
+| Token           | CSS Variable | Purpose                     |
+| --------------- | ------------ | --------------------------- |
 | `text-disabled` | `--disabled` | Icon and message text color |
 
 ## Examples
@@ -45,7 +45,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 ```tsx
 import { MagnifyingGlassMinusIcon } from "@phosphor-icons/react";
 
-<Empty Icon={MagnifyingGlassMinusIcon} message="No results found" />
+<Empty Icon={MagnifyingGlassMinusIcon} message="No results found" />;
 ```
 
 ### In a Data Table
@@ -54,15 +54,15 @@ import { MagnifyingGlassMinusIcon } from "@phosphor-icons/react";
 import { DatabaseIcon } from "@phosphor-icons/react";
 
 function DataTable({ data }: { data: Item[] }) {
-  if (data.length === 0) {
-    return (
-      <div className="py-12">
-        <Empty Icon={DatabaseIcon} message="No records found" />
-      </div>
-    );
-  }
-
-  return <table>{/* table content */}</table>;
+    if (data.length === 0) {
+        return (
+            <div className="py-12">
+                <Empty Icon={DatabaseIcon} message="No records found" />
+            </div>
+        );
+    }
+
+    return <table>{/* table content */}</table>;
 }
 ```
 
@@ -72,21 +72,21 @@ function DataTable({ data }: { data: Item[] }) {
 import { TrayIcon } from "@phosphor-icons/react";
 
 function TaskList({ tasks }: { tasks: Task[] }) {
-  return (
-    <div className="space-y-4">
-      <h2>My Tasks</h2>
-
-      {tasks.length === 0 ? (
-        <Empty Icon={TrayIcon} message="No tasks yet" />
-      ) : (
-        <ul>
-          {tasks.map((task) => (
-            <TaskItem key={task.id} task={task} />
-          ))}
-        </ul>
-      )}
-    </div>
-  );
+    return (
+        <div className="space-y-4">
+            <h2>My Tasks</h2>
+
+            {tasks.length === 0 ? (
+                <Empty Icon={TrayIcon} message="No tasks yet" />
+            ) : (
+                <ul>
+                    {tasks.map((task) => (
+                        <TaskItem key={task.id} task={task} />
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
 }
 ```
 
@@ -97,19 +97,16 @@ import { Button } from "@g4rcez/components/button";
 import { FolderPlusIcon } from "@phosphor-icons/react";
 
 function EmptyProjectsList() {
-  return (
-    <div className="text-center py-12">
-      <Empty
-        Icon={FolderPlusIcon}
-        message="You haven't created any projects yet"
-      />
-      <div className="mt-6">
-        <Button theme="primary" onClick={handleCreate}>
-          Create Your First Project
-        </Button>
-      </div>
-    </div>
-  );
+    return (
+        <div className="text-center py-12">
+            <Empty Icon={FolderPlusIcon} message="You haven't created any projects yet" />
+            <div className="mt-6">
+                <Button theme="primary" onClick={handleCreate}>
+                    Create Your First Project
+                </Button>
+            </div>
+        </div>
+    );
 }
 ```
 

package/ai/docs/Expand.md

@@ -21,12 +21,12 @@ import { Expand } from "@g4rcez/components/expand";
 
 `Expand` accepts all `Button` props plus the following:
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `trigger` | `Label` | — | Content displayed on the button before expansion |
-| `open` | `boolean` | `false` | Controlled open state |
-| `disabled` | `boolean` | `false` | When `true`, the button cannot be expanded |
-| `children` | `React.ReactNode` | — | Content shown inside the expanded floating container |
+| Prop       | Type              | Default | Description                                          |
+| ---------- | ----------------- | ------- | ---------------------------------------------------- |
+| `trigger`  | `Label`           | —       | Content displayed on the button before expansion     |
+| `open`     | `boolean`         | `false` | Controlled open state                                |
+| `disabled` | `boolean`         | `false` | When `true`, the button cannot be expanded           |
+| `children` | `React.ReactNode` | —       | Content shown inside the expanded floating container |
 
 Inherits all `Button` props: `theme`, `size`, `rounded`, `className`, etc.
 
@@ -34,10 +34,10 @@ Inherits all `Button` props: `theme`, `size`, `rounded`, `className`, etc.
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
+| Token           | CSS Variable   | Purpose                                                 |
+| --------------- | -------------- | ------------------------------------------------------- |
 | `bg-background` | `--background` | Default expanded panel background (applied by consumer) |
-| `border-border` | `--border` | Default expanded panel border (applied by consumer) |
+| `border-border` | `--border`     | Default expanded panel border (applied by consumer)     |
 
 The `Expand` component itself only renders the trigger button and an animated wrapper; visual tokens for the expanded content are your responsibility via `children` className.
 
@@ -49,28 +49,19 @@ The `Expand` component itself only renders the trigger button and an animated wr
 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">
-    <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>
-      </li>
-      <li>
-        <button className="w-full rounded-button p-2 text-left text-foreground hover:bg-muted">
-          Task
-        </button>
-      </li>
-    </ul>
-  </div>
-</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">
+        <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>
+            </li>
+            <li>
+                <button className="w-full rounded-button p-2 text-left text-foreground hover:bg-muted">Task</button>
+            </li>
+        </ul>
+    </div>
+</Expand>;
 ```
 
 ### Expand with Label
@@ -80,11 +71,13 @@ 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">
-    <p className="text-foreground">Expanded content goes here.</p>
-    <Button theme="primary" className="mt-2">Action</Button>
-  </div>
-</Expand>
+    <div className="rounded-card 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
+        </Button>
+    </div>
+</Expand>;
 ```
 
 ### Controlled Expand
@@ -94,24 +87,17 @@ import { useState } from "react";
 import { Expand } from "@g4rcez/components/expand";
 
 function ControlledExpand() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Expand
-      trigger="Options"
-      open={open}
-      theme="ghost-neutral"
-    >
-      <div className="rounded-card border border-border bg-background p-4 shadow-shadow-floating">
-        <button
-          onClick={() => setOpen(false)}
-          className="text-sm text-foreground"
-        >
-          Close
-        </button>
-      </div>
-    </Expand>
-  );
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Expand trigger="Options" open={open} theme="ghost-neutral">
+            <div className="rounded-card border border-border bg-background p-4 shadow-shadow-floating">
+                <button onClick={() => setOpen(false)} className="text-sm text-foreground">
+                    Close
+                </button>
+            </div>
+        </Expand>
+    );
 }
 ```