{
  "name": "pending-form-demo",
  "type": "registry:example",
  "registryDependencies": [
    "pending",
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "examples/pending-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { usePending } from \"@/registry/bases/radix/components/pending\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Input } from \"@/registry/bases/radix/ui/input\";\nimport { Label } from \"@/registry/bases/radix/ui/label\";\n\nexport default function PendingFormDemo() {\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n  const [submitted, setSubmitted] = React.useState(false);\n  const { pendingProps, isPending } = usePending({ isPending: isSubmitting });\n\n  const onSubmit = React.useCallback((event: React.FormEvent) => {\n    event.preventDefault();\n    setIsSubmitting(true);\n    setSubmitted(false);\n\n    // Simulate API call\n    setTimeout(() => {\n      setIsSubmitting(false);\n      setSubmitted(true);\n      setTimeout(() => setSubmitted(false), 2000);\n    }, 2000);\n  }, []);\n\n  return (\n    <form onSubmit={onSubmit} className=\"w-full max-w-sm space-y-4\">\n      <div className=\"space-y-2\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"you@example.com\"\n          required\n          disabled={isPending}\n        />\n      </div>\n\n      <div className=\"space-y-2\">\n        <Label htmlFor=\"password\">Password</Label>\n        <Input\n          id=\"password\"\n          type=\"password\"\n          placeholder=\"••••••••\"\n          required\n          disabled={isPending}\n        />\n      </div>\n\n      <Button type=\"submit\" className=\"w-full\" {...pendingProps}>\n        {isPending && <Loader2 className=\"size-4 animate-spin\" />}\n        {isPending ? \"Signing in...\" : \"Sign in\"}\n      </Button>\n\n      {submitted && (\n        <p className=\"text-center text-sm text-green-600 dark:text-green-400\">\n          Successfully signed in!\n        </p>\n      )}\n    </form>\n  );\n}\n",
      "target": ""
    }
  ]
}