diff --git a/apps/web/.source/server.ts b/apps/web/.source/server.ts
index 8fe8900..4d96bd8 100644
--- a/apps/web/.source/server.ts
+++ b/apps/web/.source/server.ts
@@ -35,8 +35,8 @@ import * as __fd_glob_7 from "../content/docs/dynamic-values.mdx?collection=docs
 import * as __fd_glob_6 from "../content/docs/developer-guide.mdx?collection=docs"
 import * as __fd_glob_5 from "../content/docs/custom-fields.mdx?collection=docs"
 import * as __fd_glob_4 from "../content/docs/conditional-logic.mdx?collection=docs"
-import { default as __fd_glob_3 } from "../content/docs/fields/data/meta.json?collection=docs"
-import { default as __fd_glob_2 } from "../content/docs/fields/layout/meta.json?collection=docs"
+import { default as __fd_glob_3 } from "../content/docs/fields/layout/meta.json?collection=docs"
+import { default as __fd_glob_2 } from "../content/docs/fields/data/meta.json?collection=docs"
 import { default as __fd_glob_1 } from "../content/docs/fields/meta.json?collection=docs"
 import { default as __fd_glob_0 } from "../content/docs/meta.json?collection=docs"
 import { server } from 'fumadocs-mdx/runtime/server';
@@ -47,4 +47,4 @@ const create = server<typeof Config, import("fumadocs-mdx/runtime/types").Intern
   }
 }>({"doc":{"passthroughs":["extractedReferences"]}});
 
-export const docs = await create.docs("docs", "content/docs", {"meta.json": __fd_glob_0, "fields/meta.json": __fd_glob_1, "fields/layout/meta.json": __fd_glob_2, "fields/data/meta.json": __fd_glob_3, }, {"conditional-logic.mdx": __fd_glob_4, "custom-fields.mdx": __fd_glob_5, "developer-guide.mdx": __fd_glob_6, "dynamic-values.mdx": __fd_glob_7, "field-hooks.mdx": __fd_glob_8, "field-wrappers.mdx": __fd_glob_9, "form-component.mdx": __fd_glob_10, "form-provider.mdx": __fd_glob_11, "index.mdx": __fd_glob_12, "installation.mdx": __fd_glob_13, "migration.mdx": __fd_glob_14, "option-resolvers.mdx": __fd_glob_15, "output-transformation.mdx": __fd_glob_16, "quick-start.mdx": __fd_glob_17, "render-fields.mdx": __fd_glob_18, "schema.mdx": __fd_glob_19, "use-form.mdx": __fd_glob_20, "validation.mdx": __fd_glob_21, "fields/types.mdx": __fd_glob_22, "fields/layout/array.mdx": __fd_glob_23, "fields/layout/collapsible.mdx": __fd_glob_24, "fields/layout/group.mdx": __fd_glob_25, "fields/layout/row.mdx": __fd_glob_26, "fields/layout/tabs.mdx": __fd_glob_27, "fields/data/checkbox.mdx": __fd_glob_28, "fields/data/date.mdx": __fd_glob_29, "fields/data/email.mdx": __fd_glob_30, "fields/data/number.mdx": __fd_glob_31, "fields/data/password.mdx": __fd_glob_32, "fields/data/radio.mdx": __fd_glob_33, "fields/data/select.mdx": __fd_glob_34, "fields/data/switch.mdx": __fd_glob_35, "fields/data/tags.mdx": __fd_glob_36, "fields/data/text.mdx": __fd_glob_37, "fields/data/textarea.mdx": __fd_glob_38, "fields/data/upload.mdx": __fd_glob_39, });
\ No newline at end of file
+export const docs = await create.docs("docs", "content/docs", {"meta.json": __fd_glob_0, "fields/meta.json": __fd_glob_1, "fields/data/meta.json": __fd_glob_2, "fields/layout/meta.json": __fd_glob_3, }, {"conditional-logic.mdx": __fd_glob_4, "custom-fields.mdx": __fd_glob_5, "developer-guide.mdx": __fd_glob_6, "dynamic-values.mdx": __fd_glob_7, "field-hooks.mdx": __fd_glob_8, "field-wrappers.mdx": __fd_glob_9, "form-component.mdx": __fd_glob_10, "form-provider.mdx": __fd_glob_11, "index.mdx": __fd_glob_12, "installation.mdx": __fd_glob_13, "migration.mdx": __fd_glob_14, "option-resolvers.mdx": __fd_glob_15, "output-transformation.mdx": __fd_glob_16, "quick-start.mdx": __fd_glob_17, "render-fields.mdx": __fd_glob_18, "schema.mdx": __fd_glob_19, "use-form.mdx": __fd_glob_20, "validation.mdx": __fd_glob_21, "fields/types.mdx": __fd_glob_22, "fields/layout/array.mdx": __fd_glob_23, "fields/layout/collapsible.mdx": __fd_glob_24, "fields/layout/group.mdx": __fd_glob_25, "fields/layout/row.mdx": __fd_glob_26, "fields/layout/tabs.mdx": __fd_glob_27, "fields/data/checkbox.mdx": __fd_glob_28, "fields/data/date.mdx": __fd_glob_29, "fields/data/email.mdx": __fd_glob_30, "fields/data/number.mdx": __fd_glob_31, "fields/data/password.mdx": __fd_glob_32, "fields/data/radio.mdx": __fd_glob_33, "fields/data/select.mdx": __fd_glob_34, "fields/data/switch.mdx": __fd_glob_35, "fields/data/tags.mdx": __fd_glob_36, "fields/data/text.mdx": __fd_glob_37, "fields/data/textarea.mdx": __fd_glob_38, "fields/data/upload.mdx": __fd_glob_39, });
\ No newline at end of file
diff --git a/apps/web/public/r/document-upload-form.json b/apps/web/public/r/document-upload-form.json
index b205ceb..ad58686 100644
--- a/apps/web/public/r/document-upload-form.json
+++ b/apps/web/public/r/document-upload-form.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/shadcn/examples/document-upload-form.tsx",
-      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { defineSchema, type InferType } from \"@buildnbuzz/form-react\";\nimport {\n  Form,\n  FormContent,\n  FormFields,\n  FormSubmit,\n  FormReset,\n  FormActions,\n} from \"@/registry/shadcn/form\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nconst documentSchema = defineSchema({\n  fields: [\n    {\n      type: \"upload\",\n      name: \"document\",\n      label: \"Upload Document\",\n      description: \"PDF, Word, or text files (max 10MB)\",\n      maxSize: 10 * 1024 * 1024,\n      ui: {\n        variant: \"dropzone\",\n        accept: \".pdf,.doc,.docx,.txt\",\n        dropzoneText: \"Drop your document here or click to browse\",\n      },\n    },\n    {\n      type: \"textarea\",\n      name: \"notes\",\n      label: \"Additional Notes\",\n      placeholder: \"Any notes about this document...\",\n      ui: {\n        rows: 3,\n      },\n    },\n  ],\n});\n\ntype DocumentSchema = InferType<typeof documentSchema.fields>;\n\nexport default function DocumentUploadForm() {\n  const handleSubmit = async ({ value }: { value: unknown }) => {\n    const data = value as DocumentSchema;\n    await new Promise((r) => setTimeout(r, 1000));\n    toast(\"Document uploaded successfully!\", {\n      description: (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Check the console for the full File objects.\n          </p>\n          <pre className=\"max-h-40 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground\">\n            <code>\n              {JSON.stringify(\n                {\n                  ...data,\n                  document: data.document\n                    ? data.document instanceof File\n                      ? {\n                          name: data.document.name,\n                          size: data.document.size,\n                          type: data.document.type,\n                        }\n                      : data.document\n                    : null,\n                },\n                null,\n                2,\n              )}\n            </code>\n          </pre>\n        </div>\n      ),\n    });\n  };\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>Document Upload</CardTitle>\n        <CardDescription>Drag-and-drop file upload with validation</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form schema={documentSchema} onSubmit={handleSubmit}>\n          <FormContent>\n            <FormFields className=\"space-y-4\" />\n            <FormActions className=\"mt-6\">\n              <FormReset>Clear</FormReset>\n              <FormSubmit>Upload Document</FormSubmit>\n            </FormActions>\n          </FormContent>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { defineSchema, type InferType } from \"@buildnbuzz/form-react\";\nimport {\n  Form,\n  FormContent,\n  FormFields,\n  FormSubmit,\n  FormReset,\n  FormActions,\n} from \"@/registry/shadcn/form\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nconst documentSchema = defineSchema({\n  fields: [\n    {\n      type: \"upload\",\n      name: \"document\",\n      label: \"Upload Document\",\n      description: \"PDF, Word, or text files (max 10MB)\",\n      maxSize: 10 * 1024 * 1024,\n      ui: {\n        variant: \"dropzone\",\n        accept: \".pdf,.doc,.docx,.txt\",\n        dropzoneText: \"Drop your document here or click to browse\",\n      },\n    },\n    {\n      type: \"textarea\",\n      name: \"notes\",\n      label: \"Additional Notes\",\n      placeholder: \"Any notes about this document...\",\n      ui: {\n        rows: 3,\n      },\n    },\n  ],\n});\n\ntype DocumentSchema = InferType<typeof documentSchema.fields>;\n\nexport default function DocumentUploadForm() {\n  const handleSubmit = async ({ value }: { value: unknown }) => {\n    const data = value as DocumentSchema;\n    await new Promise((r) => setTimeout(r, 1000));\n    toast(\"Document uploaded successfully!\", {\n      description: (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Check the console for the full File objects.\n          </p>\n          <pre className=\"max-h-40 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground\">\n            <code>\n              {JSON.stringify(\n                {\n                  ...data,\n                  document: data.document\n                    ? (typeof window !== \"undefined\" && data.document instanceof window.File)\n                      ? {\n                          name: data.document.name,\n                          size: data.document.size,\n                          type: data.document.type,\n                        }\n                      : data.document\n                    : null,\n                },\n                null,\n                2,\n              )}\n            </code>\n          </pre>\n        </div>\n      ),\n    });\n  };\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>Document Upload</CardTitle>\n        <CardDescription>Drag-and-drop file upload with validation</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form schema={documentSchema} onSubmit={handleSubmit}>\n          <FormContent>\n            <FormFields className=\"space-y-4\" />\n            <FormActions className=\"mt-6\">\n              <FormReset>Clear</FormReset>\n              <FormSubmit>Upload Document</FormSubmit>\n            </FormActions>\n          </FormContent>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/buzzform/examples/document-upload-form.tsx"
     }
diff --git a/apps/web/public/r/gallery-upload-form.json b/apps/web/public/r/gallery-upload-form.json
index 700cfd0..e5e15db 100644
--- a/apps/web/public/r/gallery-upload-form.json
+++ b/apps/web/public/r/gallery-upload-form.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/shadcn/examples/gallery-upload-form.tsx",
-      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { defineSchema, type InferType } from \"@buildnbuzz/form-react\";\nimport {\n  Form,\n  FormContent,\n  FormFields,\n  FormSubmit,\n  FormReset,\n  FormActions,\n} from \"@/registry/shadcn/form\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nconst gallerySchema = defineSchema({\n  fields: [\n    {\n      type: \"upload\",\n      name: \"images\",\n      label: \"Product Images\",\n      description: \"Upload up to 6 product images\",\n      hasMany: true,\n      max: 6,\n      ui: {\n        variant: \"gallery\",\n        accept: \"image/*\",\n        shape: \"rounded\",\n      },\n    },\n  ],\n});\n\ntype GallerySchema = InferType<typeof gallerySchema.fields>;\n\nexport default function GalleryUploadForm() {\n  const handleSubmit = async ({ value }: { value: unknown }) => {\n    const data = value as GallerySchema;\n    await new Promise((r) => setTimeout(r, 1000));\n\n    const filesInfo = Array.isArray(data.images)\n      ? data.images.map((img) =>\n          img instanceof File\n            ? { name: img.name, size: img.size, type: img.type }\n            : img,\n        )\n      : [];\n\n    toast(\"Images saved!\", {\n      description: (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Check the console for the full File objects.\n          </p>\n          <pre className=\"max-h-40 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground\">\n            <code>{JSON.stringify({ ...data, images: filesInfo }, null, 2)}</code>\n          </pre>\n        </div>\n      ),\n    });\n  };\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>Product Gallery</CardTitle>\n        <CardDescription>Multi-file upload with thumbnail grid preview</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form schema={gallerySchema} onSubmit={handleSubmit}>\n          <FormContent>\n            <FormFields className=\"space-y-4\" />\n            <FormActions className=\"mt-6\">\n              <FormReset>Clear</FormReset>\n              <FormSubmit>Save Images</FormSubmit>\n            </FormActions>\n          </FormContent>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { defineSchema, type InferType } from \"@buildnbuzz/form-react\";\nimport {\n  Form,\n  FormContent,\n  FormFields,\n  FormSubmit,\n  FormReset,\n  FormActions,\n} from \"@/registry/shadcn/form\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nconst gallerySchema = defineSchema({\n  fields: [\n    {\n      type: \"upload\",\n      name: \"images\",\n      label: \"Product Images\",\n      description: \"Upload up to 6 product images\",\n      hasMany: true,\n      max: 6,\n      ui: {\n        variant: \"gallery\",\n        accept: \"image/*\",\n        shape: \"rounded\",\n      },\n    },\n  ],\n});\n\ntype GallerySchema = InferType<typeof gallerySchema.fields>;\n\nexport default function GalleryUploadForm() {\n  const handleSubmit = async ({ value }: { value: unknown }) => {\n    const data = value as GallerySchema;\n    await new Promise((r) => setTimeout(r, 1000));\n\n    const filesInfo = Array.isArray(data.images)\n      ? data.images.map((img) =>\n          typeof window !== \"undefined\" && img instanceof window.File\n            ? { name: img.name, size: img.size, type: img.type }\n            : img,\n        )\n      : [];\n\n    toast(\"Images saved!\", {\n      description: (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Check the console for the full File objects.\n          </p>\n          <pre className=\"max-h-40 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground\">\n            <code>{JSON.stringify({ ...data, images: filesInfo }, null, 2)}</code>\n          </pre>\n        </div>\n      ),\n    });\n  };\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>Product Gallery</CardTitle>\n        <CardDescription>Multi-file upload with thumbnail grid preview</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form schema={gallerySchema} onSubmit={handleSubmit}>\n          <FormContent>\n            <FormFields className=\"space-y-4\" />\n            <FormActions className=\"mt-6\">\n              <FormReset>Clear</FormReset>\n              <FormSubmit>Save Images</FormSubmit>\n            </FormActions>\n          </FormContent>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/buzzform/examples/gallery-upload-form.tsx"
     }
diff --git a/apps/web/public/r/profile-upload-form.json b/apps/web/public/r/profile-upload-form.json
index 54cb4ff..76e166a 100644
--- a/apps/web/public/r/profile-upload-form.json
+++ b/apps/web/public/r/profile-upload-form.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/shadcn/examples/profile-upload-form.tsx",
-      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { defineSchema, type InferType } from \"@buildnbuzz/form-react\";\nimport {\n  Form,\n  FormContent,\n  FormFields,\n  FormSubmit,\n  FormReset,\n  FormActions,\n} from \"@/registry/shadcn/form\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nconst profileSchema = defineSchema({\n  fields: [\n    {\n      type: \"upload\",\n      name: \"avatar\",\n      label: \"Profile Picture\",\n      description: \"Upload a profile photo\",\n      ui: {\n        variant: \"avatar\",\n        shape: \"circle\",\n        size: \"lg\",\n        accept: \"image/*\",\n      },\n    },\n    {\n      type: \"text\",\n      name: \"name\",\n      label: \"Display Name\",\n      placeholder: \"Your name\",\n      required: true,\n    },\n    {\n      type: \"email\",\n      name: \"email\",\n      label: \"Email\",\n      placeholder: \"you@example.com\",\n      required: true,\n    },\n  ],\n});\n\ntype ProfileSchema = InferType<typeof profileSchema.fields>;\n\nexport default function ProfileUploadForm() {\n  const handleSubmit = async ({ value }: { value: unknown }) => {\n    const data = value as ProfileSchema;\n    await new Promise((r) => setTimeout(r, 1000));\n    toast(\"Profile saved successfully!\", {\n      description: (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Check the console for the full File objects.\n          </p>\n          <pre className=\"max-h-40 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground\">\n            <code>\n              {JSON.stringify(\n                {\n                  ...data,\n                  avatar: data.avatar\n                    ? data.avatar instanceof File\n                      ? {\n                          name: data.avatar.name,\n                          size: data.avatar.size,\n                          type: data.avatar.type,\n                        }\n                      : data.avatar\n                    : null,\n                },\n                null,\n                2,\n              )}\n            </code>\n          </pre>\n        </div>\n      ),\n    });\n  };\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>Profile Settings</CardTitle>\n        <CardDescription>\n          Avatar upload with circle preview layout\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form schema={profileSchema} onSubmit={handleSubmit}>\n          <FormContent>\n            <FormFields className=\"space-y-4\" />\n            <FormActions className=\"mt-6\">\n              <FormReset>Clear</FormReset>\n              <FormSubmit>Save Profile</FormSubmit>\n            </FormActions>\n          </FormContent>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { defineSchema, type InferType } from \"@buildnbuzz/form-react\";\nimport {\n  Form,\n  FormContent,\n  FormFields,\n  FormSubmit,\n  FormReset,\n  FormActions,\n} from \"@/registry/shadcn/form\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nconst profileSchema = defineSchema({\n  fields: [\n    {\n      type: \"upload\",\n      name: \"avatar\",\n      label: \"Profile Picture\",\n      description: \"Upload a profile photo\",\n      ui: {\n        variant: \"avatar\",\n        shape: \"circle\",\n        size: \"lg\",\n        accept: \"image/*\",\n      },\n    },\n    {\n      type: \"text\",\n      name: \"name\",\n      label: \"Display Name\",\n      placeholder: \"Your name\",\n      required: true,\n    },\n    {\n      type: \"email\",\n      name: \"email\",\n      label: \"Email\",\n      placeholder: \"you@example.com\",\n      required: true,\n    },\n  ],\n});\n\ntype ProfileSchema = InferType<typeof profileSchema.fields>;\n\nexport default function ProfileUploadForm() {\n  const handleSubmit = async ({ value }: { value: unknown }) => {\n    const data = value as ProfileSchema;\n    await new Promise((r) => setTimeout(r, 1000));\n    toast(\"Profile saved successfully!\", {\n      description: (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Check the console for the full File objects.\n          </p>\n          <pre className=\"max-h-40 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground\">\n            <code>\n              {JSON.stringify(\n                {\n                  ...data,\n                  avatar: data.avatar\n                    ? (typeof window !== \"undefined\" && data.avatar instanceof window.File)\n                      ? {\n                          name: data.avatar.name,\n                          size: data.avatar.size,\n                          type: data.avatar.type,\n                        }\n                      : data.avatar\n                    : null,\n                },\n                null,\n                2,\n              )}\n            </code>\n          </pre>\n        </div>\n      ),\n    });\n  };\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>Profile Settings</CardTitle>\n        <CardDescription>\n          Avatar upload with circle preview layout\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form schema={profileSchema} onSubmit={handleSubmit}>\n          <FormContent>\n            <FormFields className=\"space-y-4\" />\n            <FormActions className=\"mt-6\">\n              <FormReset>Clear</FormReset>\n              <FormSubmit>Save Profile</FormSubmit>\n            </FormActions>\n          </FormContent>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/buzzform/examples/profile-upload-form.tsx"
     }
diff --git a/apps/web/public/r/upload.json b/apps/web/public/r/upload.json
index 84af4ec..de40a15 100644
--- a/apps/web/public/r/upload.json
+++ b/apps/web/public/r/upload.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/shadcn/fields/upload.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { UploadField as UploadFieldDef } from \"@buildnbuzz/form-react\";\nimport { useDataField } from \"@buildnbuzz/form-react\";\nimport { IconPlaceholder } from \"@/components/icon-placeholder\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\";\n\n// ---------------------------------------------------------------------------\n// UI Options defined inside the registry component\n// ---------------------------------------------------------------------------\n\nexport interface UploadUi {\n  /** Visual variant. Defaults to `\"dropzone\"`. */\n  variant?: \"dropzone\" | \"avatar\" | \"inline\" | \"gallery\";\n  /** Shape preset for avatar / dropzone preview. Defaults to `\"rounded\"`. */\n  shape?: \"circle\" | \"square\" | \"rounded\";\n  /** Size preset. Defaults to `\"md\"`. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Accepted mime types, e.g. \"image/*,application/pdf\". */\n  accept?: string;\n  /** Overwrite standard placeholder / dropzone text. */\n  dropzoneText?: string;\n  /** className applied to `<FieldGroup>`. */\n  className?: string;\n  /** Inline width applied to `<FieldGroup>`. */\n  width?: string | number;\n  /** Controls required asterisk visibility. */\n  asterisk?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatBytes(bytes: number, decimals = 1) {\n  if (bytes === 0) return \"0 Bytes\";\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + \" \" + sizes[i];\n}\n\nfunction FileTypeIcon({ name }: { name: string }) {\n  const ext = name.split(\".\").pop()?.toLowerCase();\n  const isImage = [\"png\", \"jpg\", \"jpeg\", \"webp\", \"gif\", \"svg\"].includes(\n    ext || \"\",\n  );\n  const isPdf = ext === \"pdf\";\n  const isZip = [\"zip\", \"rar\", \"tar\", \"gz\", \"7z\"].includes(ext || \"\");\n\n  if (isImage) {\n    return (\n      <IconPlaceholder\n        lucide=\"FileImage\"\n        hugeicons=\"Image01Icon\"\n        tabler=\"IconPhoto\"\n        phosphor=\"Image\"\n        remixicon=\"RiImageLine\"\n        className=\"size-5 text-sky-500 shrink-0\"\n      />\n    );\n  }\n  if (isPdf) {\n    return (\n      <IconPlaceholder\n        lucide=\"FileText\"\n        hugeicons=\"File02Icon\"\n        tabler=\"IconFileText\"\n        phosphor=\"FilePdf\"\n        remixicon=\"RiFilePdfLine\"\n        className=\"size-5 text-rose-500 shrink-0\"\n      />\n    );\n  }\n  if (isZip) {\n    return (\n      <IconPlaceholder\n        lucide=\"FileArchive\"\n        hugeicons=\"ZipIcon\"\n        tabler=\"IconZip\"\n        phosphor=\"Archive\"\n        remixicon=\"RiFolderZipLine\"\n        className=\"size-5 text-amber-500 shrink-0\"\n      />\n    );\n  }\n  return (\n    <IconPlaceholder\n      lucide=\"File\"\n      hugeicons=\"File01Icon\"\n      tabler=\"IconFile\"\n      phosphor=\"File\"\n      remixicon=\"RiFileLine\"\n      className=\"size-5 text-muted-foreground shrink-0\"\n    />\n  );\n}\n\nexport function UploadField() {\n  const {\n    fieldApi,\n    field,\n    isDisabled,\n    isRequired,\n    label,\n    placeholder,\n    description,\n    errors,\n    isInvalid,\n    descriptionId,\n    errorId,\n    ariaDescribedBy,\n    handleChange,\n  } = useDataField<UploadFieldDef>();\n\n  const ui = field.ui as UploadUi | undefined;\n  const hasMany = !!field.hasMany;\n  const variant = ui?.variant || \"dropzone\";\n  const shape = ui?.shape || \"rounded\";\n  const size = ui?.size || \"md\";\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const [isDragActive, setIsDragActive] = React.useState(false);\n  const [previews, setPreviews] = React.useState<\n    Array<{ name: string; size?: number; url?: string }>\n  >([]);\n\n  const rawValue = fieldApi.state.value;\n\n  // Sync value from state to internal previews array\n  React.useEffect(() => {\n    if (!rawValue) {\n      setPreviews([]);\n      return;\n    }\n\n    const items = Array.isArray(rawValue) ? rawValue : [rawValue];\n    const newPreviews = items.map((item) => {\n      if (item instanceof File) {\n        return {\n          name: item.name,\n          size: item.size,\n          url: item.type.startsWith(\"image/\")\n            ? URL.createObjectURL(item)\n            : undefined,\n        };\n      }\n      if (typeof item === \"string\") {\n        return {\n          name: item.split(\"/\").pop() || item,\n          url: item,\n        };\n      }\n      return { name: \"Unknown File\" };\n    });\n\n    setPreviews(newPreviews);\n\n    // Cleanup object URLs on unmount/re-sync\n    return () => {\n      newPreviews.forEach((p) => {\n        if (p.url && p.url.startsWith(\"blob:\")) {\n          URL.revokeObjectURL(p.url);\n        }\n      });\n    };\n  }, [rawValue]);\n\n  const onFilesSelected = (fileList: FileList | null) => {\n    if (!fileList || fileList.length === 0) return;\n    const newFiles = Array.from(fileList);\n\n    if (hasMany) {\n      const currentFiles = Array.isArray(rawValue)\n        ? rawValue\n        : rawValue\n          ? [rawValue]\n          : [];\n      handleChange([...currentFiles, ...newFiles]);\n    } else {\n      handleChange(newFiles[0]);\n    }\n  };\n\n  const removeFile = (index: number) => {\n    if (isDisabled) return;\n    if (hasMany && Array.isArray(rawValue)) {\n      const updated = rawValue.filter((_, i) => i !== index);\n      handleChange(updated.length > 0 ? updated : []);\n    } else {\n      handleChange(null as unknown as File | File[] | string | string[]);\n    }\n  };\n\n  const handleDrag = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (isDisabled) return;\n\n    if (e.type === \"dragenter\" || e.type === \"dragover\") {\n      setIsDragActive(true);\n    } else if (e.type === \"dragleave\") {\n      setIsDragActive(false);\n    }\n  };\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragActive(false);\n    if (isDisabled) return;\n\n    if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n      onFilesSelected(e.dataTransfer.files);\n    }\n  };\n\n  const triggerSelect = () => {\n    if (isDisabled) return;\n    fileInputRef.current?.click();\n  };\n\n  const width = ui?.width;\n  const widthStyle = width\n    ? {\n        width: typeof width === \"number\" ? `${width}px` : width,\n        flex: \"0 1 auto\",\n      }\n    : undefined;\n\n  // Inline styling calculations\n  const dropzoneText =\n    ui?.dropzoneText ||\n    placeholder ||\n    (hasMany\n      ? \"Drop files here or click to upload\"\n      : \"Drop file here or click to upload\");\n\n  return (\n    <FieldGroup\n      data-field={fieldApi.name}\n      className={ui?.className}\n      style={widthStyle}\n    >\n      <Field data-invalid={isInvalid} data-disabled={isDisabled}>\n        {label && (\n          <FieldLabel htmlFor={fieldApi.name} className=\"gap-1 items-baseline\">\n            {label}\n            {isRequired && ui?.asterisk !== false ? (\n              <span className=\"text-destructive\">*</span>\n            ) : null}\n          </FieldLabel>\n        )}\n\n        <FieldContent>\n          <div className=\"relative w-full group/upload\">\n            <input\n              ref={fileInputRef}\n              type=\"file\"\n              id={fieldApi.name}\n              name={fieldApi.name}\n              multiple={hasMany}\n              accept={ui?.accept}\n              disabled={isDisabled}\n              onChange={(e) => onFilesSelected(e.target.files)}\n              className=\"hidden\"\n              aria-describedby={ariaDescribedBy}\n              aria-invalid={isInvalid}\n            />\n\n            {/* VARIANT: AVATAR */}\n            {variant === \"avatar\" && (\n              <div className=\"flex flex-col items-center justify-center gap-3\">\n                <div\n                  onClick={triggerSelect}\n                  onDragEnter={handleDrag}\n                  onDragOver={handleDrag}\n                  onDragLeave={handleDrag}\n                  onDrop={handleDrop}\n                  className={cn(\n                    \"relative overflow-hidden cursor-pointer border-2 border-dashed flex items-center justify-center transition-all bg-muted/40 hover:bg-muted/70\",\n                    shape === \"circle\"\n                      ? \"rounded-full\"\n                      : shape === \"square\"\n                        ? \"rounded-none\"\n                        : \"rounded-xl\",\n                    size === \"xs\" && \"size-14\",\n                    size === \"sm\" && \"size-20\",\n                    size === \"md\" && \"size-28\",\n                    size === \"lg\" && \"size-36\",\n                    size === \"xl\" && \"size-48\",\n                    isDragActive\n                      ? \"border-primary bg-primary/5\"\n                      : \"border-muted-foreground/30 hover:border-muted-foreground/50\",\n                    isDisabled &&\n                      \"opacity-60 cursor-not-allowed pointer-events-none\",\n                  )}\n                >\n                  {previews[0]?.url ? (\n                    // eslint-disable-next-line @next/next/no-img-element\n                    <img\n                      src={previews[0].url}\n                      alt=\"Avatar\"\n                      className=\"size-full object-cover\"\n                    />\n                  ) : (\n                    <div className=\"flex flex-col items-center justify-center text-muted-foreground text-center p-2\">\n                      <IconPlaceholder\n                        lucide=\"User\"\n                        hugeicons=\"UserIcon\"\n                        tabler=\"IconUser\"\n                        phosphor=\"User\"\n                        remixicon=\"RiUserLine\"\n                        className={cn(\n                          size === \"xs\" && \"size-5\",\n                          size === \"sm\" && \"size-6\",\n                          size === \"md\" && \"size-8\",\n                          size === \"lg\" && \"size-10\",\n                          size === \"xl\" && \"size-14\",\n                        )}\n                      />\n                    </div>\n                  )}\n\n                  {/* Hover action overlay */}\n                  <div className=\"absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center text-white text-xs font-medium\">\n                    <IconPlaceholder\n                      lucide=\"Camera\"\n                      hugeicons=\"Camera01Icon\"\n                      tabler=\"IconCamera\"\n                      phosphor=\"Camera\"\n                      remixicon=\"RiCameraLine\"\n                      className=\"size-4 mr-1\"\n                    />\n                    Edit\n                  </div>\n                </div>\n\n                {previews.length > 0 && !isDisabled && (\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    onClick={() => removeFile(0)}\n                    className=\"text-muted-foreground hover:text-destructive h-7 px-2\"\n                  >\n                    Remove\n                  </Button>\n                )}\n              </div>\n            )}\n\n            {/* VARIANT: DROPZONE (DEFAULT) */}\n            {variant === \"dropzone\" && (\n              <div className=\"space-y-3\">\n                <div\n                  onClick={triggerSelect}\n                  onDragEnter={handleDrag}\n                  onDragOver={handleDrag}\n                  onDragLeave={handleDrag}\n                  onDrop={handleDrop}\n                  className={cn(\n                    \"border-2 border-dashed rounded-xl p-6 flex flex-col items-center justify-center gap-3 transition-all cursor-pointer bg-muted/20 hover:bg-muted/40\",\n                    isDragActive\n                      ? \"border-primary bg-primary/5\"\n                      : \"border-muted-foreground/30 hover:border-muted-foreground/50\",\n                    isDisabled &&\n                      \"opacity-60 cursor-not-allowed pointer-events-none\",\n                  )}\n                >\n                  <div className=\"size-10 rounded-lg bg-background border border-border shadow-sm flex items-center justify-center text-muted-foreground\">\n                    <IconPlaceholder\n                      lucide=\"Upload\"\n                      hugeicons=\"Upload04Icon\"\n                      tabler=\"IconUpload\"\n                      phosphor=\"UploadSimple\"\n                      remixicon=\"RiUploadLine\"\n                      className=\"size-5\"\n                    />\n                  </div>\n                  <div className=\"text-center\">\n                    <p className=\"text-sm font-medium\">{dropzoneText}</p>\n                    <p className=\"text-xs text-muted-foreground mt-1\">\n                      {ui?.accept\n                        ? `Supports: ${ui.accept}`\n                        : \"All formats supported\"}\n                      {field.maxSize\n                        ? ` up to ${formatBytes(field.maxSize)}`\n                        : \"\"}\n                    </p>\n                  </div>\n                </div>\n\n                {/* Render Selected Files List */}\n                {previews.length > 0 && (\n                  <div className=\"border border-border rounded-lg divide-y divide-border overflow-hidden bg-background\">\n                    {previews.map((file, idx) => (\n                      <div\n                        key={idx}\n                        className=\"flex items-center gap-3 p-3 text-sm\"\n                      >\n                        <FileTypeIcon name={file.name} />\n                        <div className=\"flex-1 min-w-0\">\n                          <p className=\"font-medium truncate\">{file.name}</p>\n                          {file.size && (\n                            <p className=\"text-xs text-muted-foreground\">\n                              {formatBytes(file.size)}\n                            </p>\n                          )}\n                        </div>\n                        {!isDisabled && (\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            onClick={() => removeFile(idx)}\n                            className=\"size-8 text-muted-foreground hover:text-destructive shrink-0\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"Trash2\"\n                              hugeicons=\"Delete02Icon\"\n                              tabler=\"IconTrash\"\n                              phosphor=\"Trash\"\n                              remixicon=\"RiDeleteBinLine\"\n                              className=\"size-4\"\n                            />\n                          </Button>\n                        )}\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* VARIANT: INLINE */}\n            {variant === \"inline\" && (\n              <div className=\"flex flex-col gap-2\">\n                <div className=\"flex items-center gap-3\">\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    disabled={isDisabled}\n                    onClick={triggerSelect}\n                    className=\"gap-2 shrink-0 border-dashed\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"Upload\"\n                      hugeicons=\"Upload04Icon\"\n                      tabler=\"IconUpload\"\n                      phosphor=\"UploadSimple\"\n                      remixicon=\"RiUploadLine\"\n                      className=\"size-4\"\n                    />\n                    Attach File\n                  </Button>\n                  <span className=\"text-xs text-muted-foreground truncate\">\n                    {previews.length === 0\n                      ? \"No file selected\"\n                      : `${previews.length} file(s) attached`}\n                  </span>\n                </div>\n\n                {previews.length > 0 && (\n                  <div className=\"flex flex-wrap gap-2 mt-1\">\n                    {previews.map((file, idx) => (\n                      <div\n                        key={idx}\n                        className=\"flex items-center gap-2 bg-muted/50 border border-border rounded-full pl-3 pr-1.5 py-1 text-xs font-medium\"\n                      >\n                        <FileTypeIcon name={file.name} />\n                        <span className=\"truncate max-w-30\">{file.name}</span>\n                        {!isDisabled && (\n                          <button\n                            type=\"button\"\n                            onClick={() => removeFile(idx)}\n                            className=\"size-5 rounded-full hover:bg-muted-foreground/20 flex items-center justify-center text-muted-foreground hover:text-foreground shrink-0\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"X\"\n                              hugeicons=\"Cancel01Icon\"\n                              tabler=\"IconX\"\n                              phosphor=\"X\"\n                              remixicon=\"RiCloseLine\"\n                              className=\"size-3.5\"\n                            />\n                          </button>\n                        )}\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* VARIANT: GALLERY */}\n            {variant === \"gallery\" && (\n              <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3\">\n                {previews.map((file, idx) => (\n                  <div\n                    key={idx}\n                    className={cn(\n                      \"relative group/gallery aspect-square border border-border flex items-center justify-center overflow-hidden bg-muted/10\",\n                      shape === \"circle\"\n                        ? \"rounded-full\"\n                        : shape === \"square\"\n                          ? \"rounded-none\"\n                          : \"rounded-xl\",\n                    )}\n                  >\n                    {file.url ? (\n                      // eslint-disable-next-line @next/next/no-img-element\n                      <img\n                        src={file.url}\n                        alt={file.name}\n                        className=\"size-full object-cover transition-transform group-hover/gallery:scale-105\"\n                      />\n                    ) : (\n                      <div className=\"flex flex-col items-center justify-center text-muted-foreground p-3 text-center\">\n                        <FileTypeIcon name={file.name} />\n                        <span className=\"text-[10px] mt-1 truncate max-w-20\">\n                          {file.name}\n                        </span>\n                      </div>\n                    )}\n\n                    {/* Delete overlay */}\n                    {!isDisabled && (\n                      <div className=\"absolute inset-0 bg-black/40 opacity-0 group-hover/gallery:opacity-100 transition-opacity flex items-center justify-center\">\n                        <Button\n                          type=\"button\"\n                          variant=\"destructive\"\n                          size=\"icon\"\n                          onClick={() => removeFile(idx)}\n                          className=\"size-8\"\n                        >\n                          <IconPlaceholder\n                            lucide=\"Trash2\"\n                            hugeicons=\"Delete02Icon\"\n                            tabler=\"IconTrash\"\n                            phosphor=\"Trash\"\n                            remixicon=\"RiDeleteBinLine\"\n                            className=\"size-4\"\n                          />\n                        </Button>\n                      </div>\n                    )}\n                  </div>\n                ))}\n\n                {/* Add Box */}\n                {(!hasMany && previews.length === 0) ||\n                (hasMany && (!field.max || previews.length < field.max)) ? (\n                  <div\n                    onClick={triggerSelect}\n                    className={cn(\n                      \"aspect-square border-2 border-dashed border-muted-foreground/30 hover:border-muted-foreground/50 transition-all flex flex-col items-center justify-center gap-1.5 cursor-pointer bg-muted/10 hover:bg-muted/30\",\n                      shape === \"circle\"\n                        ? \"rounded-full\"\n                        : shape === \"square\"\n                          ? \"rounded-none\"\n                          : \"rounded-xl\",\n                      isDisabled &&\n                        \"opacity-60 cursor-not-allowed pointer-events-none\",\n                    )}\n                  >\n                    <IconPlaceholder\n                      lucide=\"Plus\"\n                      hugeicons=\"PlusSignIcon\"\n                      tabler=\"IconPlus\"\n                      phosphor=\"Plus\"\n                      remixicon=\"RiAddLine\"\n                      className=\"size-5 text-muted-foreground\"\n                    />\n                    <span className=\"text-xs text-muted-foreground font-medium\">\n                      Add file\n                    </span>\n                  </div>\n                ) : null}\n              </div>\n            )}\n          </div>\n        </FieldContent>\n\n        {description && !isInvalid && (\n          <FieldDescription id={descriptionId}>{description}</FieldDescription>\n        )}\n\n        {isInvalid && <FieldError id={errorId} errors={errors} />}\n      </Field>\n    </FieldGroup>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { UploadField as UploadFieldDef } from \"@buildnbuzz/form-react\";\nimport { useDataField } from \"@buildnbuzz/form-react\";\nimport { IconPlaceholder } from \"@/components/icon-placeholder\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\";\n\n// ---------------------------------------------------------------------------\n// UI Options defined inside the registry component\n// ---------------------------------------------------------------------------\n\nexport interface UploadUi {\n  /** Visual variant. Defaults to `\"dropzone\"`. */\n  variant?: \"dropzone\" | \"avatar\" | \"inline\" | \"gallery\";\n  /** Shape preset for avatar / dropzone preview. Defaults to `\"rounded\"`. */\n  shape?: \"circle\" | \"square\" | \"rounded\";\n  /** Size preset. Defaults to `\"md\"`. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Accepted mime types, e.g. \"image/*,application/pdf\". */\n  accept?: string;\n  /** Overwrite standard placeholder / dropzone text. */\n  dropzoneText?: string;\n  /** className applied to `<FieldGroup>`. */\n  className?: string;\n  /** Inline width applied to `<FieldGroup>`. */\n  width?: string | number;\n  /** Controls required asterisk visibility. */\n  asterisk?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatBytes(bytes: number, decimals = 1) {\n  if (bytes === 0) return \"0 Bytes\";\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + \" \" + sizes[i];\n}\n\nfunction FileTypeIcon({ name }: { name: string }) {\n  const ext = name.split(\".\").pop()?.toLowerCase();\n  const isImage = [\"png\", \"jpg\", \"jpeg\", \"webp\", \"gif\", \"svg\"].includes(\n    ext || \"\",\n  );\n  const isPdf = ext === \"pdf\";\n  const isZip = [\"zip\", \"rar\", \"tar\", \"gz\", \"7z\"].includes(ext || \"\");\n\n  if (isImage) {\n    return (\n      <IconPlaceholder\n        lucide=\"FileImage\"\n        hugeicons=\"Image01Icon\"\n        tabler=\"IconPhoto\"\n        phosphor=\"Image\"\n        remixicon=\"RiImageLine\"\n        className=\"size-5 text-sky-500 shrink-0\"\n      />\n    );\n  }\n  if (isPdf) {\n    return (\n      <IconPlaceholder\n        lucide=\"FileText\"\n        hugeicons=\"File02Icon\"\n        tabler=\"IconFileText\"\n        phosphor=\"FilePdf\"\n        remixicon=\"RiFilePdfLine\"\n        className=\"size-5 text-rose-500 shrink-0\"\n      />\n    );\n  }\n  if (isZip) {\n    return (\n      <IconPlaceholder\n        lucide=\"FileArchive\"\n        hugeicons=\"ZipIcon\"\n        tabler=\"IconZip\"\n        phosphor=\"Archive\"\n        remixicon=\"RiFolderZipLine\"\n        className=\"size-5 text-amber-500 shrink-0\"\n      />\n    );\n  }\n  return (\n    <IconPlaceholder\n      lucide=\"File\"\n      hugeicons=\"File01Icon\"\n      tabler=\"IconFile\"\n      phosphor=\"File\"\n      remixicon=\"RiFileLine\"\n      className=\"size-5 text-muted-foreground shrink-0\"\n    />\n  );\n}\n\nexport function UploadField() {\n  const {\n    fieldApi,\n    field,\n    isDisabled,\n    isRequired,\n    label,\n    placeholder,\n    description,\n    errors,\n    isInvalid,\n    descriptionId,\n    errorId,\n    ariaDescribedBy,\n    handleChange,\n  } = useDataField<UploadFieldDef>();\n\n  const ui = field.ui as UploadUi | undefined;\n  const hasMany = !!field.hasMany;\n  const variant = ui?.variant || \"dropzone\";\n  const shape = ui?.shape || \"rounded\";\n  const size = ui?.size || \"md\";\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const [isDragActive, setIsDragActive] = React.useState(false);\n  const [previews, setPreviews] = React.useState<\n    Array<{ name: string; size?: number; url?: string }>\n  >([]);\n\n  const rawValue = fieldApi.state.value;\n\n  // Sync value from state to internal previews array\n  React.useEffect(() => {\n    if (!rawValue) {\n      setPreviews([]);\n      return;\n    }\n\n    const items = Array.isArray(rawValue) ? rawValue : [rawValue];\n    const newPreviews = items.map((item) => {\n      if (typeof window !== \"undefined\" && item instanceof window.File) {\n        return {\n          name: item.name,\n          size: item.size,\n          url: item.type.startsWith(\"image/\")\n            ? URL.createObjectURL(item)\n            : undefined,\n        };\n      }\n      if (typeof item === \"string\") {\n        return {\n          name: item.split(\"/\").pop() || item,\n          url: item,\n        };\n      }\n      return { name: \"Unknown File\" };\n    });\n\n    setPreviews(newPreviews);\n\n    // Cleanup object URLs on unmount/re-sync\n    return () => {\n      newPreviews.forEach((p) => {\n        if (p.url && p.url.startsWith(\"blob:\")) {\n          URL.revokeObjectURL(p.url);\n        }\n      });\n    };\n  }, [rawValue]);\n\n  const onFilesSelected = (fileList: FileList | null) => {\n    if (!fileList || fileList.length === 0) return;\n    const newFiles = Array.from(fileList);\n\n    if (hasMany) {\n      const currentFiles = Array.isArray(rawValue)\n        ? rawValue\n        : rawValue\n          ? [rawValue]\n          : [];\n      handleChange([...currentFiles, ...newFiles]);\n    } else {\n      handleChange(newFiles[0]);\n    }\n  };\n\n  const removeFile = (index: number) => {\n    if (isDisabled) return;\n    if (hasMany && Array.isArray(rawValue)) {\n      const updated = rawValue.filter((_, i) => i !== index);\n      handleChange(updated.length > 0 ? updated : []);\n    } else {\n      handleChange(null as unknown as File | File[] | string | string[]);\n    }\n  };\n\n  const handleDrag = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (isDisabled) return;\n\n    if (e.type === \"dragenter\" || e.type === \"dragover\") {\n      setIsDragActive(true);\n    } else if (e.type === \"dragleave\") {\n      setIsDragActive(false);\n    }\n  };\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragActive(false);\n    if (isDisabled) return;\n\n    if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n      onFilesSelected(e.dataTransfer.files);\n    }\n  };\n\n  const triggerSelect = () => {\n    if (isDisabled) return;\n    fileInputRef.current?.click();\n  };\n\n  const width = ui?.width;\n  const widthStyle = width\n    ? {\n        width: typeof width === \"number\" ? `${width}px` : width,\n        flex: \"0 1 auto\",\n      }\n    : undefined;\n\n  // Inline styling calculations\n  const dropzoneText =\n    ui?.dropzoneText ||\n    placeholder ||\n    (hasMany\n      ? \"Drop files here or click to upload\"\n      : \"Drop file here or click to upload\");\n\n  return (\n    <FieldGroup\n      data-field={fieldApi.name}\n      className={ui?.className}\n      style={widthStyle}\n    >\n      <Field data-invalid={isInvalid} data-disabled={isDisabled}>\n        {label && (\n          <FieldLabel htmlFor={fieldApi.name} className=\"gap-1 items-baseline\">\n            {label}\n            {isRequired && ui?.asterisk !== false ? (\n              <span className=\"text-destructive\">*</span>\n            ) : null}\n          </FieldLabel>\n        )}\n\n        <FieldContent>\n          <div className=\"relative w-full group/upload\">\n            <input\n              ref={fileInputRef}\n              type=\"file\"\n              id={fieldApi.name}\n              name={fieldApi.name}\n              multiple={hasMany}\n              accept={ui?.accept}\n              disabled={isDisabled}\n              onChange={(e) => onFilesSelected(e.target.files)}\n              className=\"hidden\"\n              aria-describedby={ariaDescribedBy}\n              aria-invalid={isInvalid}\n            />\n\n            {/* VARIANT: AVATAR */}\n            {variant === \"avatar\" && (\n              <div className=\"flex flex-col items-center justify-center gap-3\">\n                <div\n                  onClick={triggerSelect}\n                  onDragEnter={handleDrag}\n                  onDragOver={handleDrag}\n                  onDragLeave={handleDrag}\n                  onDrop={handleDrop}\n                  className={cn(\n                    \"relative overflow-hidden cursor-pointer border-2 border-dashed flex items-center justify-center transition-all bg-muted/40 hover:bg-muted/70\",\n                    shape === \"circle\"\n                      ? \"rounded-full\"\n                      : shape === \"square\"\n                        ? \"rounded-none\"\n                        : \"rounded-xl\",\n                    size === \"xs\" && \"size-14\",\n                    size === \"sm\" && \"size-20\",\n                    size === \"md\" && \"size-28\",\n                    size === \"lg\" && \"size-36\",\n                    size === \"xl\" && \"size-48\",\n                    isDragActive\n                      ? \"border-primary bg-primary/5\"\n                      : \"border-muted-foreground/30 hover:border-muted-foreground/50\",\n                    isDisabled &&\n                      \"opacity-60 cursor-not-allowed pointer-events-none\",\n                  )}\n                >\n                  {previews[0]?.url ? (\n                    // eslint-disable-next-line @next/next/no-img-element\n                    <img\n                      src={previews[0].url}\n                      alt=\"Avatar\"\n                      className=\"size-full object-cover\"\n                    />\n                  ) : (\n                    <div className=\"flex flex-col items-center justify-center text-muted-foreground text-center p-2\">\n                      <IconPlaceholder\n                        lucide=\"User\"\n                        hugeicons=\"UserIcon\"\n                        tabler=\"IconUser\"\n                        phosphor=\"User\"\n                        remixicon=\"RiUserLine\"\n                        className={cn(\n                          size === \"xs\" && \"size-5\",\n                          size === \"sm\" && \"size-6\",\n                          size === \"md\" && \"size-8\",\n                          size === \"lg\" && \"size-10\",\n                          size === \"xl\" && \"size-14\",\n                        )}\n                      />\n                    </div>\n                  )}\n\n                  {/* Hover action overlay */}\n                  <div className=\"absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center text-white text-xs font-medium\">\n                    <IconPlaceholder\n                      lucide=\"Camera\"\n                      hugeicons=\"Camera01Icon\"\n                      tabler=\"IconCamera\"\n                      phosphor=\"Camera\"\n                      remixicon=\"RiCameraLine\"\n                      className=\"size-4 mr-1\"\n                    />\n                    Edit\n                  </div>\n                </div>\n\n                {previews.length > 0 && !isDisabled && (\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    onClick={() => removeFile(0)}\n                    className=\"text-muted-foreground hover:text-destructive h-7 px-2\"\n                  >\n                    Remove\n                  </Button>\n                )}\n              </div>\n            )}\n\n            {/* VARIANT: DROPZONE (DEFAULT) */}\n            {variant === \"dropzone\" && (\n              <div className=\"space-y-3\">\n                <div\n                  onClick={triggerSelect}\n                  onDragEnter={handleDrag}\n                  onDragOver={handleDrag}\n                  onDragLeave={handleDrag}\n                  onDrop={handleDrop}\n                  className={cn(\n                    \"border-2 border-dashed rounded-xl p-6 flex flex-col items-center justify-center gap-3 transition-all cursor-pointer bg-muted/20 hover:bg-muted/40\",\n                    isDragActive\n                      ? \"border-primary bg-primary/5\"\n                      : \"border-muted-foreground/30 hover:border-muted-foreground/50\",\n                    isDisabled &&\n                      \"opacity-60 cursor-not-allowed pointer-events-none\",\n                  )}\n                >\n                  <div className=\"size-10 rounded-lg bg-background border border-border shadow-sm flex items-center justify-center text-muted-foreground\">\n                    <IconPlaceholder\n                      lucide=\"Upload\"\n                      hugeicons=\"Upload04Icon\"\n                      tabler=\"IconUpload\"\n                      phosphor=\"UploadSimple\"\n                      remixicon=\"RiUploadLine\"\n                      className=\"size-5\"\n                    />\n                  </div>\n                  <div className=\"text-center\">\n                    <p className=\"text-sm font-medium\">{dropzoneText}</p>\n                    <p className=\"text-xs text-muted-foreground mt-1\">\n                      {ui?.accept\n                        ? `Supports: ${ui.accept}`\n                        : \"All formats supported\"}\n                      {field.maxSize\n                        ? ` up to ${formatBytes(field.maxSize)}`\n                        : \"\"}\n                    </p>\n                  </div>\n                </div>\n\n                {/* Render Selected Files List */}\n                {previews.length > 0 && (\n                  <div className=\"border border-border rounded-lg divide-y divide-border overflow-hidden bg-background\">\n                    {previews.map((file, idx) => (\n                      <div\n                        key={idx}\n                        className=\"flex items-center gap-3 p-3 text-sm\"\n                      >\n                        <FileTypeIcon name={file.name} />\n                        <div className=\"flex-1 min-w-0\">\n                          <p className=\"font-medium truncate\">{file.name}</p>\n                          {file.size && (\n                            <p className=\"text-xs text-muted-foreground\">\n                              {formatBytes(file.size)}\n                            </p>\n                          )}\n                        </div>\n                        {!isDisabled && (\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            onClick={() => removeFile(idx)}\n                            className=\"size-8 text-muted-foreground hover:text-destructive shrink-0\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"Trash2\"\n                              hugeicons=\"Delete02Icon\"\n                              tabler=\"IconTrash\"\n                              phosphor=\"Trash\"\n                              remixicon=\"RiDeleteBinLine\"\n                              className=\"size-4\"\n                            />\n                          </Button>\n                        )}\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* VARIANT: INLINE */}\n            {variant === \"inline\" && (\n              <div className=\"flex flex-col gap-2\">\n                <div className=\"flex items-center gap-3\">\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    disabled={isDisabled}\n                    onClick={triggerSelect}\n                    className=\"gap-2 shrink-0 border-dashed\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"Upload\"\n                      hugeicons=\"Upload04Icon\"\n                      tabler=\"IconUpload\"\n                      phosphor=\"UploadSimple\"\n                      remixicon=\"RiUploadLine\"\n                      className=\"size-4\"\n                    />\n                    Attach File\n                  </Button>\n                  <span className=\"text-xs text-muted-foreground truncate\">\n                    {previews.length === 0\n                      ? \"No file selected\"\n                      : `${previews.length} file(s) attached`}\n                  </span>\n                </div>\n\n                {previews.length > 0 && (\n                  <div className=\"flex flex-wrap gap-2 mt-1\">\n                    {previews.map((file, idx) => (\n                      <div\n                        key={idx}\n                        className=\"flex items-center gap-2 bg-muted/50 border border-border rounded-full pl-3 pr-1.5 py-1 text-xs font-medium\"\n                      >\n                        <FileTypeIcon name={file.name} />\n                        <span className=\"truncate max-w-30\">{file.name}</span>\n                        {!isDisabled && (\n                          <button\n                            type=\"button\"\n                            onClick={() => removeFile(idx)}\n                            className=\"size-5 rounded-full hover:bg-muted-foreground/20 flex items-center justify-center text-muted-foreground hover:text-foreground shrink-0\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"X\"\n                              hugeicons=\"Cancel01Icon\"\n                              tabler=\"IconX\"\n                              phosphor=\"X\"\n                              remixicon=\"RiCloseLine\"\n                              className=\"size-3.5\"\n                            />\n                          </button>\n                        )}\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* VARIANT: GALLERY */}\n            {variant === \"gallery\" && (\n              <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3\">\n                {previews.map((file, idx) => (\n                  <div\n                    key={idx}\n                    className={cn(\n                      \"relative group/gallery aspect-square border border-border flex items-center justify-center overflow-hidden bg-muted/10\",\n                      shape === \"circle\"\n                        ? \"rounded-full\"\n                        : shape === \"square\"\n                          ? \"rounded-none\"\n                          : \"rounded-xl\",\n                    )}\n                  >\n                    {file.url ? (\n                      // eslint-disable-next-line @next/next/no-img-element\n                      <img\n                        src={file.url}\n                        alt={file.name}\n                        className=\"size-full object-cover transition-transform group-hover/gallery:scale-105\"\n                      />\n                    ) : (\n                      <div className=\"flex flex-col items-center justify-center text-muted-foreground p-3 text-center\">\n                        <FileTypeIcon name={file.name} />\n                        <span className=\"text-[10px] mt-1 truncate max-w-20\">\n                          {file.name}\n                        </span>\n                      </div>\n                    )}\n\n                    {/* Delete overlay */}\n                    {!isDisabled && (\n                      <div className=\"absolute inset-0 bg-black/40 opacity-0 group-hover/gallery:opacity-100 transition-opacity flex items-center justify-center\">\n                        <Button\n                          type=\"button\"\n                          variant=\"destructive\"\n                          size=\"icon\"\n                          onClick={() => removeFile(idx)}\n                          className=\"size-8\"\n                        >\n                          <IconPlaceholder\n                            lucide=\"Trash2\"\n                            hugeicons=\"Delete02Icon\"\n                            tabler=\"IconTrash\"\n                            phosphor=\"Trash\"\n                            remixicon=\"RiDeleteBinLine\"\n                            className=\"size-4\"\n                          />\n                        </Button>\n                      </div>\n                    )}\n                  </div>\n                ))}\n\n                {/* Add Box */}\n                {(!hasMany && previews.length === 0) ||\n                (hasMany && (!field.max || previews.length < field.max)) ? (\n                  <div\n                    onClick={triggerSelect}\n                    className={cn(\n                      \"aspect-square border-2 border-dashed border-muted-foreground/30 hover:border-muted-foreground/50 transition-all flex flex-col items-center justify-center gap-1.5 cursor-pointer bg-muted/10 hover:bg-muted/30\",\n                      shape === \"circle\"\n                        ? \"rounded-full\"\n                        : shape === \"square\"\n                          ? \"rounded-none\"\n                          : \"rounded-xl\",\n                      isDisabled &&\n                        \"opacity-60 cursor-not-allowed pointer-events-none\",\n                    )}\n                  >\n                    <IconPlaceholder\n                      lucide=\"Plus\"\n                      hugeicons=\"PlusSignIcon\"\n                      tabler=\"IconPlus\"\n                      phosphor=\"Plus\"\n                      remixicon=\"RiAddLine\"\n                      className=\"size-5 text-muted-foreground\"\n                    />\n                    <span className=\"text-xs text-muted-foreground font-medium\">\n                      Add file\n                    </span>\n                  </div>\n                ) : null}\n              </div>\n            )}\n          </div>\n        </FieldContent>\n\n        {description && !isInvalid && (\n          <FieldDescription id={descriptionId}>{description}</FieldDescription>\n        )}\n\n        {isInvalid && <FieldError id={errorId} errors={errors} />}\n      </Field>\n    </FieldGroup>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/buzzform/fields/upload.tsx"
     }
diff --git a/apps/web/registry/shadcn/examples/document-upload-form.tsx b/apps/web/registry/shadcn/examples/document-upload-form.tsx
index d096485..abfdecf 100644
--- a/apps/web/registry/shadcn/examples/document-upload-form.tsx
+++ b/apps/web/registry/shadcn/examples/document-upload-form.tsx
@@ -62,7 +62,7 @@ export default function DocumentUploadForm() {
                 {
                   ...data,
                   document: data.document
-                    ? data.document instanceof File
+                    ? (typeof window !== "undefined" && data.document instanceof window.File)
                       ? {
                           name: data.document.name,
                           size: data.document.size,
diff --git a/apps/web/registry/shadcn/examples/gallery-upload-form.tsx b/apps/web/registry/shadcn/examples/gallery-upload-form.tsx
index db58bea..87299dc 100644
--- a/apps/web/registry/shadcn/examples/gallery-upload-form.tsx
+++ b/apps/web/registry/shadcn/examples/gallery-upload-form.tsx
@@ -45,7 +45,7 @@ export default function GalleryUploadForm() {
 
     const filesInfo = Array.isArray(data.images)
       ? data.images.map((img) =>
-          img instanceof File
+          typeof window !== "undefined" && img instanceof window.File
             ? { name: img.name, size: img.size, type: img.type }
             : img,
         )
diff --git a/apps/web/registry/shadcn/examples/profile-upload-form.tsx b/apps/web/registry/shadcn/examples/profile-upload-form.tsx
index 3aaf034..2c7213a 100644
--- a/apps/web/registry/shadcn/examples/profile-upload-form.tsx
+++ b/apps/web/registry/shadcn/examples/profile-upload-form.tsx
@@ -67,7 +67,7 @@ export default function ProfileUploadForm() {
                 {
                   ...data,
                   avatar: data.avatar
-                    ? data.avatar instanceof File
+                    ? (typeof window !== "undefined" && data.avatar instanceof window.File)
                       ? {
                           name: data.avatar.name,
                           size: data.avatar.size,
diff --git a/apps/web/registry/shadcn/fields/upload.tsx b/apps/web/registry/shadcn/fields/upload.tsx
index 09541ac..660a244 100644
--- a/apps/web/registry/shadcn/fields/upload.tsx
+++ b/apps/web/registry/shadcn/fields/upload.tsx
@@ -147,7 +147,7 @@ export function UploadField() {
 
     const items = Array.isArray(rawValue) ? rawValue : [rawValue];
     const newPreviews = items.map((item) => {
-      if (item instanceof File) {
+      if (typeof window !== "undefined" && item instanceof window.File) {
         return {
           name: item.name,
           size: item.size,