{
  "name": "editable-form-demo",
  "type": "registry:example",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod",
    "sonner"
  ],
  "registryDependencies": [
    "editable",
    "form"
  ],
  "files": [
    {
      "path": "examples/editable-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport * as z from \"zod\";\nimport { Button } from \"@/registry/bases/base/ui/button\";\nimport {\n  Editable,\n  EditableArea,\n  EditableCancel,\n  EditableInput,\n  EditableLabel,\n  EditablePreview,\n  EditableSubmit,\n  EditableToolbar,\n  EditableTrigger,\n} from \"@/registry/bases/base/ui/editable\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/bases/base/ui/form\";\n\nconst formSchema = z.object({\n  name: z\n    .string()\n    .min(2, \"Name must be at least 2 characters\")\n    .max(50, \"Name must be less than 50 characters\"),\n  title: z\n    .string()\n    .min(3, \"Title must be at least 3 characters\")\n    .max(100, \"Title must be less than 100 characters\"),\n});\n\ntype FormSchema = z.infer<typeof formSchema>;\n\nexport default function EditableFormDemo() {\n  const form = useForm<FormSchema>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      name: \"Rodney Mullen\",\n      title: \"Skateboarder\",\n    },\n  });\n\n  const onSubmit = React.useCallback((input: FormSchema) => {\n    toast.success(\n      <pre className=\"w-full\">{JSON.stringify(input, null, 2)}</pre>,\n    );\n  }, []);\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(onSubmit)}\n        className=\"flex w-full flex-col gap-2 rounded-md border p-4 shadow-sm\"\n      >\n        <FormField\n          control={form.control}\n          name=\"name\"\n          render={({ field }) => (\n            <FormItem>\n              <FormControl>\n                <Editable\n                  defaultValue={field.value}\n                  onSubmit={field.onChange}\n                  invalid={\n                    !!form.formState.errors.name &&\n                    !!form.formState.touchedFields.name\n                  }\n                >\n                  <EditableLabel>Name</EditableLabel>\n                  <div className=\"flex items-start gap-4\">\n                    <EditableArea className=\"flex-1\">\n                      <EditablePreview />\n                      <EditableInput />\n                    </EditableArea>\n                    <EditableTrigger\n                      render={\n                        <Button type=\"button\" variant=\"outline\" size=\"sm\" />\n                      }\n                    >\n                      Edit\n                    </EditableTrigger>\n                  </div>\n                  <EditableToolbar>\n                    <EditableSubmit render={<Button type=\"button\" size=\"sm\" />}>\n                      Save\n                    </EditableSubmit>\n                    <EditableCancel\n                      render={\n                        <Button type=\"button\" variant=\"outline\" size=\"sm\" />\n                      }\n                    >\n                      Cancel\n                    </EditableCancel>\n                  </EditableToolbar>\n                  <FormMessage />\n                </Editable>\n              </FormControl>\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"title\"\n          render={({ field }) => (\n            <FormItem>\n              <FormControl>\n                <Editable\n                  defaultValue={field.value}\n                  onSubmit={field.onChange}\n                  invalid={\n                    !!form.formState.errors.title &&\n                    !!form.formState.touchedFields.title\n                  }\n                >\n                  <EditableLabel>Title</EditableLabel>\n                  <div className=\"flex items-start gap-4\">\n                    <EditableArea className=\"flex-1\">\n                      <EditablePreview />\n                      <EditableInput />\n                    </EditableArea>\n                    <EditableTrigger\n                      render={\n                        <Button type=\"button\" variant=\"outline\" size=\"sm\" />\n                      }\n                    >\n                      Edit\n                    </EditableTrigger>\n                  </div>\n                  <EditableToolbar>\n                    <EditableSubmit render={<Button type=\"button\" size=\"sm\" />}>\n                      Save\n                    </EditableSubmit>\n                    <EditableCancel\n                      render={\n                        <Button type=\"button\" variant=\"outline\" size=\"sm\" />\n                      }\n                    >\n                      Cancel\n                    </EditableCancel>\n                  </EditableToolbar>\n                  <FormMessage />\n                </Editable>\n              </FormControl>\n            </FormItem>\n          )}\n        />\n        <div className=\"flex w-fit gap-2 self-end\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            className=\"w-fit\"\n            onClick={() => form.reset()}\n          >\n            Reset\n          </Button>\n          <Button type=\"submit\" className=\"w-fit\">\n            Update\n          </Button>\n        </div>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}