{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "single-image-upload-form-demo",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers/zod",
    "zod"
  ],
  "registryDependencies": [
    "https://reusables.vercel.app/r/single-image-upload",
    "https://reusables.vercel.app/r/notify",
    "button",
    "input",
    "textarea",
    "form",
    "card"
  ],
  "files": [
    {
      "path": "registry/example/single-image-upload-form-demo.tsx",
      "content": "\"use client\"\n\nimport { toast } from \"@/packages/notify/src\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { useFileUpload } from \"@/hooks/use-file-upload\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nimport { SingleImageDropzone } from \"@/components/single-image-upload\"\n\ntype FormValues = z.infer<typeof formSchema>\n\nconst formSchema = z.object({\n  image: z.string().min(1, \"Image is required\"),\n  name: z.string().min(2).max(50),\n  price: z.string().regex(/^\\d+(\\.\\d{1,2})?$/, \"Must be a valid price\"),\n  description: z.string(),\n})\n\nexport default function SingleImageUploadFormDemo() {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      name: \"\",\n      price: \"\",\n      description: \"\",\n      image: \"\",\n    },\n  })\n\n  const fileUpload = useFileUpload({\n    onSuccess: (url: string) => {\n      form.setValue(\"image\", url, { shouldValidate: true })\n      toast.success(\"Image uploaded successfully\")\n    },\n    onError: (error) => toast.error(error),\n  })\n\n  async function onSubmit() {\n    toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {\n      loading: \"Creating product...\",\n      success: () => \"Product created successfully!\",\n      error: \"Failed to create product\",\n    })\n\n    form.reset({\n      name: \"\",\n      price: \"\",\n      description: \"\",\n      image: \"\",\n    })\n  }\n\n  return (\n    <Card className=\"mx-auto w-full max-w-2xl\">\n      <CardHeader>\n        <CardTitle>Add New Product</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n            <div className=\"grid grid-cols-2 gap-4\">\n              <FormField\n                control={form.control}\n                name=\"name\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Name</FormLabel>\n                    <FormControl>\n                      <Input placeholder=\"Product name\" {...field} />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              <FormField\n                control={form.control}\n                name=\"price\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Price</FormLabel>\n                    <FormControl>\n                      <Input placeholder=\"29.99\" {...field} />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </div>\n            <FormField\n              control={form.control}\n              name=\"description\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Description</FormLabel>\n                  <FormControl>\n                    <Textarea\n                      placeholder=\"Product description\"\n                      className=\"resize-none\"\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"image\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Product Image</FormLabel>\n                  <FormControl>\n                    <SingleImageDropzone\n                      width=\"100%\"\n                      height=\"240px\"\n                      value={field.value}\n                      disabled={fileUpload.isUploading}\n                      progress={fileUpload.progress}\n                      progressType=\"circular\"\n                      onChange={async (file: File | undefined) => {\n                        if (file) {\n                          await fileUpload.handleFileUpload(file)\n                        } else {\n                          form.setValue(\"image\", \"\", { shouldValidate: true })\n                        }\n                      }}\n                    />\n                  </FormControl>\n                  <FormDescription>\n                    Upload a product image (PNG, JPG, WEBP)\n                  </FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <Button type=\"submit\" className=\"w-full\">\n              Add Product\n            </Button>\n          </form>\n        </Form>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/single-image-upload-form-demo.tsx"
    }
  ],
  "type": "registry:example"
}