@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/FileUpload.md

@@ -19,54 +19,54 @@ import { FileUpload } from "@g4rcez/components/file-upload";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `files` | `File[]` | - | Controlled files array |
-| `onDrop` | `(files: File[]) => void` | - | Called when files are dropped or selected |
-| `onDeleteFile` | `(file: File) => void` | - | Called when the delete button on a file item is clicked |
-| `idle` | `React.ReactElement` | Default idle UI | Content to show when no files are present and the area is not active |
-| `File` | `React.FC<{ file: File }>` | - | Custom component rendered below each file's name/size row |
-| `accept` | `string \| Record<string, string[]>` | - | Accepted file types (forwarded to `react-dropzone`) |
-| `multiple` | `boolean` | `false` | Allow selecting more than one file |
-| `maxFiles` | `number` | - | Maximum number of files |
-| `maxSize` | `number` | - | Maximum file size in bytes |
-| `disabled` | `boolean` | `false` | Disable the drop zone |
-| `name` | `string` | - | Name for the underlying `<input>` |
-| `...DropzoneProps` | | | All `react-dropzone` props are supported |
+| Prop               | Type                                 | Default         | Description                                                          |
+| ------------------ | ------------------------------------ | --------------- | -------------------------------------------------------------------- |
+| `files`            | `File[]`                             | -               | Controlled files array                                               |
+| `onDrop`           | `(files: File[]) => void`            | -               | Called when files are dropped or selected                            |
+| `onDeleteFile`     | `(file: File) => void`               | -               | Called when the delete button on a file item is clicked              |
+| `idle`             | `React.ReactElement`                 | Default idle UI | Content to show when no files are present and the area is not active |
+| `File`             | `React.FC<{ file: File }>`           | -               | Custom component rendered below each file's name/size row            |
+| `accept`           | `string \| Record<string, string[]>` | -               | Accepted file types (forwarded to `react-dropzone`)                  |
+| `multiple`         | `boolean`                            | `false`         | Allow selecting more than one file                                   |
+| `maxFiles`         | `number`                             | -               | Maximum number of files                                              |
+| `maxSize`          | `number`                             | -               | Maximum file size in bytes                                           |
+| `disabled`         | `boolean`                            | `false`         | Disable the drop zone                                                |
+| `name`             | `string`                             | -               | Name for the underlying `<input>`                                    |
+| `...DropzoneProps` |                                      |                 | All `react-dropzone` props are supported                             |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `border-card-border` | `--card-border` | Border between file list items and default drop zone border |
-| `bg-card-background` | `--card-background` | Drop zone background when files are present |
-| `text-foreground` | `--foreground` | General text color |
-| `text-primary` | `--primary` | Folder icon color and "browse" link color in default idle state |
-| `text-danger` | `--danger` | Delete button hover color |
+| Token                | CSS Variable        | Purpose                                                         |
+| -------------------- | ------------------- | --------------------------------------------------------------- |
+| `border-card-border` | `--card-border`     | Border between file list items and default drop zone border     |
+| `bg-card-background` | `--card-background` | Drop zone background when files are present                     |
+| `text-foreground`    | `--foreground`      | General text color                                              |
+| `text-primary`       | `--primary`         | Folder icon color and "browse" link color in default idle state |
+| `text-danger`        | `--danger`          | Delete button hover color                                       |
 
 ## Drag and Drop States
 
-| State | Description |
-|-------|-------------|
-| Idle (empty) | Displays the `idle` prop or the default folder icon with an upload prompt |
-| Drag active | Replaces the idle UI with an open folder icon while dragging |
+| State         | Description                                                                |
+| ------------- | -------------------------------------------------------------------------- |
+| Idle (empty)  | Displays the `idle` prop or the default folder icon with an upload prompt  |
+| Drag active   | Replaces the idle UI with an open folder icon while dragging               |
 | Files present | Renders the file list; drop zone border becomes solid and background fills |
 
 ## File Type Rendering
 
 The component automatically selects an icon based on file extension:
 
-| Extension(s) | Icon |
-|---|---|
-| csv, xls, xlsx | `SheetIcon` |
-| pdf, txt | `FileTextIcon` |
-| json | `FileJsonIcon` |
-| mp3 | `AudioLinesIcon` |
-| mp4, mov | `FileVideo2` |
-| Images | Inline `<img>` thumbnail |
-| Other | Generic `FileIcon` |
+| Extension(s)   | Icon                     |
+| -------------- | ------------------------ |
+| csv, xls, xlsx | `SheetIcon`              |
+| pdf, txt       | `FileTextIcon`           |
+| json           | `FileJsonIcon`           |
+| mp3            | `AudioLinesIcon`         |
+| mp4, mov       | `FileVideo2`             |
+| Images         | Inline `<img>` thumbnail |
+| Other          | Generic `FileIcon`       |
 
 Clicking a file thumbnail opens a `Modal` viewer with full-size preview for images, `<video>` player for videos, and `<audio>` player for audio files.
 
@@ -78,19 +78,19 @@ Clicking a file thumbnail opens a `Modal` viewer with full-size preview for imag
 import { FileUpload } from "@g4rcez/components/file-upload";
 
 function ImageUpload() {
-  const [images, setImages] = useState<File[]>([]);
-
-  return (
-    <FileUpload
-      files={images}
-      onDrop={(added) => setImages((prev) => [...prev, ...added])}
-      onDeleteFile={(file) => setImages((prev) => prev.filter((f) => f !== file))}
-      accept="image/*"
-      multiple
-      maxFiles={10}
-      maxSize={5 * 1024 * 1024}
-    />
-  );
+    const [images, setImages] = useState<File[]>([]);
+
+    return (
+        <FileUpload
+            files={images}
+            onDrop={(added) => setImages((prev) => [...prev, ...added])}
+            onDeleteFile={(file) => setImages((prev) => prev.filter((f) => f !== file))}
+            accept="image/*"
+            multiple
+            maxFiles={10}
+            maxSize={5 * 1024 * 1024}
+        />
+    );
 }
 ```
 
@@ -98,18 +98,18 @@ function ImageUpload() {
 
 ```tsx
 function AvatarUpload() {
-  const [file, setFile] = useState<File | null>(null);
-
-  return (
-    <FileUpload
-      files={file ? [file] : []}
-      onDrop={(files) => setFile(files[0])}
-      onDeleteFile={() => setFile(null)}
-      accept="image/jpeg,image/png"
-      multiple={false}
-      maxSize={2 * 1024 * 1024}
-    />
-  );
+    const [file, setFile] = useState<File | null>(null);
+
+    return (
+        <FileUpload
+            files={file ? [file] : []}
+            onDrop={(files) => setFile(files[0])}
+            onDeleteFile={() => setFile(null)}
+            accept="image/jpeg,image/png"
+            multiple={false}
+            maxSize={2 * 1024 * 1024}
+        />
+    );
 }
 ```
 
@@ -119,44 +119,35 @@ function AvatarUpload() {
 import { UploadSimpleIcon } from "@phosphor-icons/react";
 
 const CustomIdle = () => (
-  <div className="flex flex-col items-center gap-2 py-10">
-    <UploadSimpleIcon size={48} className="text-primary" />
-    <p className="text-foreground font-medium">Drop files here</p>
-    <p className="text-muted-foreground text-sm">PDF, DOCX, up to 10 MB each</p>
-  </div>
+    <div className="flex flex-col items-center gap-2 py-10">
+        <UploadSimpleIcon size={48} className="text-primary" />
+        <p className="text-foreground font-medium">Drop files here</p>
+        <p className="text-muted-foreground text-sm">PDF, DOCX, up to 10 MB each</p>
+    </div>
 );
 
-<FileUpload
-  files={[]}
-  onDrop={setFiles}
-  idle={<CustomIdle />}
-  accept="application/pdf,.docx"
-  multiple
-/>
+<FileUpload files={[]} onDrop={setFiles} idle={<CustomIdle />} accept="application/pdf,.docx" multiple />;
 ```
 
 ### Custom per-file renderer
 
 ```tsx
 const ProgressRow = ({ file }: { file: File }) => {
-  const progress = useUploadProgress(file);
-  return (
-    <div className="flex flex-col gap-1 pb-2">
-      <div className="flex justify-between text-xs text-muted-foreground">
-        <span>{progress < 100 ? "Uploading..." : "Done"}</span>
-        <span>{progress}%</span>
-      </div>
-      <div className="h-1.5 rounded-full bg-muted overflow-hidden">
-        <div
-          className="h-full rounded-full bg-primary transition-all"
-          style={{ width: `${progress}%` }}
-        />
-      </div>
-    </div>
-  );
+    const progress = useUploadProgress(file);
+    return (
+        <div className="flex flex-col gap-1 pb-2">
+            <div className="flex justify-between text-xs text-muted-foreground">
+                <span>{progress < 100 ? "Uploading..." : "Done"}</span>
+                <span>{progress}%</span>
+            </div>
+            <div className="h-1.5 rounded-full bg-muted overflow-hidden">
+                <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${progress}%` }} />
+            </div>
+        </div>
+    );
 };
 
-<FileUpload files={files} onDrop={setFiles} File={ProgressRow} multiple />
+<FileUpload files={files} onDrop={setFiles} File={ProgressRow} multiple />;
 ```
 
 ### Inside a form
@@ -166,28 +157,30 @@ import { Form } from "@g4rcez/components/form";
 import { Button } from "@g4rcez/components/button";
 
 function SubmissionForm() {
-  const [attachments, setAttachments] = useState<File[]>([]);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    const data = new FormData(e.currentTarget);
-    attachments.forEach((f) => data.append("attachments", f));
-    submitToServer(data);
-  };
-
-  return (
-    <Form onSubmit={handleSubmit} className="flex flex-col gap-base">
-      <FileUpload
-        name="attachments"
-        files={attachments}
-        onDrop={(added) => setAttachments((prev) => [...prev, ...added])}
-        onDeleteFile={(f) => setAttachments((prev) => prev.filter((x) => x !== f))}
-        accept="image/*,.pdf"
-        multiple
-        maxSize={10 * 1024 * 1024}
-      />
-      <Button theme="primary" type="submit">Submit</Button>
-    </Form>
-  );
+    const [attachments, setAttachments] = useState<File[]>([]);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        const data = new FormData(e.currentTarget);
+        attachments.forEach((f) => data.append("attachments", f));
+        submitToServer(data);
+    };
+
+    return (
+        <Form onSubmit={handleSubmit} className="flex flex-col gap-base">
+            <FileUpload
+                name="attachments"
+                files={attachments}
+                onDrop={(added) => setAttachments((prev) => [...prev, ...added])}
+                onDeleteFile={(f) => setAttachments((prev) => prev.filter((x) => x !== f))}
+                accept="image/*,.pdf"
+                multiple
+                maxSize={10 * 1024 * 1024}
+            />
+            <Button theme="primary" type="submit">
+                Submit
+            </Button>
+        </Form>
+    );
 }
 ```
 

package/ai/docs/Form.md

@@ -21,12 +21,12 @@ import { Form } from "@g4rcez/components/form";
 
 `Form` accepts all standard HTML `<form>` attributes.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `onSubmit` | `(event: React.FormEvent<HTMLFormElement>) => void` | - | Submit handler. `preventDefault()` is called before this. |
-| `children` | `React.ReactNode` | - | Form fields and other content. |
-| `className` | `string` | - | CSS classes for the `<form>` element. |
-| `...props` | `React.ComponentProps<"form">` | - | All standard form attributes (`action`, `method`, `noValidate`, etc.). |
+| Prop        | Type                                                | Default | Description                                                            |
+| ----------- | --------------------------------------------------- | ------- | ---------------------------------------------------------------------- |
+| `onSubmit`  | `(event: React.FormEvent<HTMLFormElement>) => void` | -       | Submit handler. `preventDefault()` is called before this.              |
+| `children`  | `React.ReactNode`                                   | -       | Form fields and other content.                                         |
+| `className` | `string`                                            | -       | CSS classes for the `<form>` element.                                  |
+| `...props`  | `React.ComponentProps<"form">`                      | -       | All standard form attributes (`action`, `method`, `noValidate`, etc.). |
 
 ## Design Tokens
 
@@ -42,18 +42,20 @@ import { Input } from "@g4rcez/components/input";
 import { Button } from "@g4rcez/components/button";
 
 function LoginForm() {
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    const data = new FormData(e.currentTarget);
-    console.log(Object.fromEntries(data));
-  };
-
-  return (
-    <Form onSubmit={handleSubmit} className="flex flex-col gap-base max-w-sm">
-      <Input name="email" type="email" title="Email" required />
-      <Input name="password" type="password" title="Password" required />
-      <Button theme="primary" type="submit">Log in</Button>
-    </Form>
-  );
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        const data = new FormData(e.currentTarget);
+        console.log(Object.fromEntries(data));
+    };
+
+    return (
+        <Form onSubmit={handleSubmit} className="flex flex-col gap-base max-w-sm">
+            <Input name="email" type="email" title="Email" required />
+            <Input name="password" type="password" title="Password" required />
+            <Button theme="primary" type="submit">
+                Log in
+            </Button>
+        </Form>
+    );
 }
 ```
 
@@ -61,26 +63,30 @@ function LoginForm() {
 
 ```tsx
 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-  const formData = new FormData(e.currentTarget);
-  const payload = Object.fromEntries(formData);
-  await fetch("/api/contact", { method: "POST", body: JSON.stringify(payload) });
+    const formData = new FormData(e.currentTarget);
+    const payload = Object.fromEntries(formData);
+    await fetch("/api/contact", { method: "POST", body: JSON.stringify(payload) });
 };
 
 <Form onSubmit={handleSubmit} className="flex flex-col gap-base">
-  <Input name="name" title="Name" required />
-  <Input name="message" title="Message" />
-  <Button theme="primary" type="submit">Send</Button>
-</Form>
+    <Input name="name" title="Name" required />
+    <Input name="message" title="Message" />
+    <Button theme="primary" type="submit">
+        Send
+    </Button>
+</Form>;
 ```
 
 ### Multi-column layout
 
 ```tsx
 <Form className="grid grid-cols-2 gap-base max-w-2xl">
-  <Input name="firstName" title="First name" required />
-  <Input name="lastName" title="Last name" required />
-  <Input name="email" type="email" title="Email" container="col-span-2" required />
-  <Button type="submit" theme="primary" container="col-start-2">Save</Button>
+    <Input name="firstName" title="First name" required />
+    <Input name="lastName" title="Last name" required />
+    <Input name="email" type="email" title="Email" container="col-span-2" required />
+    <Button type="submit" theme="primary" container="col-start-2">
+        Save
+    </Button>
 </Form>
 ```
 

package/ai/docs/FormReset.md

@@ -20,14 +20,14 @@ import { formReset } from "@g4rcez/components";
 ## Signature
 
 ```ts
-function formReset(form?: HTMLFormElement | null): void
+function formReset(form?: HTMLFormElement | null): void;
 ```
 
 ## Parameters
 
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `form` | `HTMLFormElement \| null \| undefined` | The form element to reset. Safely no-ops if `null` or `undefined`. |
+| Parameter | Type                                   | Description                                                        |
+| --------- | -------------------------------------- | ------------------------------------------------------------------ |
+| `form`    | `HTMLFormElement \| null \| undefined` | The form element to reset. Safely no-ops if `null` or `undefined`. |
 
 ## How It Works
 
@@ -48,21 +48,23 @@ import { Button } from "@g4rcez/components/button";
 import { formReset } from "@g4rcez/components";
 
 function ContactForm() {
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    const data = new FormData(e.currentTarget);
-    await submitToServer(Object.fromEntries(data));
-    formReset(formRef.current);
-  };
-
-  return (
-    <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-base">
-      <Input name="name" title="Name" required />
-      <Input name="email" type="email" title="Email" required />
-      <Button theme="primary" type="submit">Send</Button>
-    </Form>
-  );
+    const formRef = useRef<HTMLFormElement>(null);
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        const data = new FormData(e.currentTarget);
+        await submitToServer(Object.fromEntries(data));
+        formReset(formRef.current);
+    };
+
+    return (
+        <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-base">
+            <Input name="name" title="Name" required />
+            <Input name="email" type="email" title="Email" required />
+            <Button theme="primary" type="submit">
+                Send
+            </Button>
+        </Form>
+    );
 }
 ```
 
@@ -70,24 +72,22 @@ function ContactForm() {
 
 ```tsx
 function EditForm({ defaultValues }: { defaultValues: Record<string, string> }) {
-  const formRef = useRef<HTMLFormElement>(null);
-
-  return (
-    <Form ref={formRef} onSubmit={handleSave} className="flex flex-col gap-base">
-      <Input name="title" title="Title" defaultValue={defaultValues.title} />
-      <Input name="description" title="Description" defaultValue={defaultValues.description} />
-      <div className="flex gap-sm">
-        <Button theme="primary" type="submit">Save</Button>
-        <Button
-          theme="ghost"
-          type="button"
-          onClick={() => formReset(formRef.current)}
-        >
-          Cancel
-        </Button>
-      </div>
-    </Form>
-  );
+    const formRef = useRef<HTMLFormElement>(null);
+
+    return (
+        <Form ref={formRef} onSubmit={handleSave} className="flex flex-col gap-base">
+            <Input name="title" title="Title" defaultValue={defaultValues.title} />
+            <Input name="description" title="Description" defaultValue={defaultValues.description} />
+            <div className="flex gap-sm">
+                <Button theme="primary" type="submit">
+                    Save
+                </Button>
+                <Button theme="ghost" type="button" onClick={() => formReset(formRef.current)}>
+                    Cancel
+                </Button>
+            </div>
+        </Form>
+    );
 }
 ```
 

package/ai/docs/Heading.md

@@ -19,9 +19,9 @@ import { Heading } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | The content of the heading |
+| Prop       | Type              | Default | Description                |
+| ---------- | ----------------- | ------- | -------------------------- |
+| `children` | `React.ReactNode` | -       | The content of the heading |
 
 ## Design Tokens
 
@@ -54,9 +54,7 @@ import { Polymorph } from "@g4rcez/components";
 ### Applying Typography Styles
 
 ```tsx
-<Heading className="text-2xl font-bold text-foreground">
-  Dashboard Overview
-</Heading>
+<Heading className="text-2xl font-bold text-foreground">Dashboard Overview</Heading>
 ```
 
 ## Do