{
  "name": "pending-demo",
  "type": "registry:example",
  "registryDependencies": [
    "pending",
    "button"
  ],
  "files": [
    {
      "path": "examples/pending-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\";\n\nexport default function PendingDemo() {\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n  const { pendingProps, isPending } = usePending({ isPending: isSubmitting });\n\n  const onSubmit = React.useCallback(() => {\n    setIsSubmitting(true);\n    // Simulate API call\n    setTimeout(() => {\n      setIsSubmitting(false);\n    }, 2000);\n  }, []);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <Button onClick={onSubmit} {...pendingProps}>\n        {isPending && <Loader2 className=\"size-4 animate-spin\" />}\n        {isPending ? \"Submitting...\" : \"Submit\"}\n      </Button>\n\n      <p className=\"text-sm text-muted-foreground\">\n        {isPending\n          ? \"Button is pending - try tabbing to it and pressing Enter\"\n          : \"Click the button to see pending state\"}\n      </p>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}