{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-label-form",
  "title": "Floating Label Form",
  "description": "component for the Floating Label Form",
  "registryDependencies": [
    "@spectrumui/floating-label-input"
  ],
  "files": [
    {
      "path": "app/registry/floating-label-input/usage/floating-label-input-form.tsx",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport * as z from \"zod\";\nimport * as React from \"react\";\nimport { Form, FormField, FormItem, FormMessage } from \"@/components/ui/form\";\nimport { toast } from \"@/components/ui/use-toast\";\nimport { LoadingButton } from \"@/components/ui/loading-button\";\nimport { FloatingLabelInput } from \"@/components/ui/floating-label-input\";\n\nconst FormSchema = z.object({\n  name: z.string().min(2, {\n    message: \"name must be at least 2 characters.\",\n  }),\n});\n\nconst FloatingLabelInputForm = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    defaultValues: { name: \"\" },\n    resolver: zodResolver(FormSchema),\n    mode: \"onTouched\",\n  });\n\n  const [loading, setLoading] = React.useState(false);\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n      toast({\n        title: \"Your submitted data\",\n        description: (\n          <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n            <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n          </pre>\n        ),\n      });\n    }, 500);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"name\"\n          render={({ field }) => (\n            <FormItem>\n              <FloatingLabelInput {...field} id=\"name\" label=\"name\" />\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <LoadingButton loading={loading} type=\"submit\">\n          Submit\n        </LoadingButton>\n      </form>\n    </Form>\n  );\n};\nexport default FloatingLabelInputForm;\n",
      "type": "registry:component",
      "target": "components/spectrumui/floating-label-input-form.tsx"
    }
  ],
  "type": "registry:component"
}