{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morph-surface-demo",
  "type": "registry:component",
  "registryDependencies": [
    "morph-surface"
  ],
  "files": [
    {
      "path": "registry/default/example/morph-surface-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { HelpCircle } from \"lucide-react\"\n\nimport { MorphSurface } from \"@/registry/default/ui/morph-surface\"\n\nexport default function MorphSurfaceDemo() {\n  const [isControlledOpen, setIsControlledOpen] = useState(false)\n\n  const handleSubmit = async (formData: FormData) => {\n    const message = formData.get(\"message\") as string\n    console.log(\"Submitted message:\", message)\n    // Simulate API call\n    await new Promise((resolve) => setTimeout(resolve, 500))\n  }\n\n  return (\n    <div className=\"space-y-12 p-8\">\n      {/* Default Usage */}\n      <section className=\"space-y-4\">\n        <h2 className=\"text-2xl font-semibold\">Default Usage</h2>\n        <p className=\"text-muted-foreground text-sm\">\n          The component works out of the box with no configuration needed\n        </p>\n        <div className=\"flex min-h-[300px] items-center justify-center rounded-lg p-8\">\n          <MorphSurface />\n        </div>\n      </section>\n\n      {/* Custom Labels and Content */}\n      <section className=\"space-y-4\">\n        <h2 className=\"text-2xl font-semibold\">Custom Labels & Content</h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Customize trigger label, placeholder, and submit behavior\n        </p>\n        <div className=\"flex min-h-[300px] items-center justify-center rounded-lg p-8\">\n          <MorphSurface\n            triggerLabel=\"Send Feedback\"\n            placeholder=\"Share your thoughts...\"\n            onSubmit={handleSubmit}\n            onSuccess={() => {\n              console.log(\"Feedback submitted successfully!\")\n            }}\n          />\n        </div>\n      </section>\n\n      {/* Custom Dimensions */}\n      <section className=\"space-y-4\">\n        <h2 className=\"text-2xl font-semibold\">Custom Dimensions</h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Adjust the size when collapsed and expanded\n        </p>\n        <div className=\"flex min-h-[300px] items-center justify-center rounded-lg p-8\">\n          <MorphSurface\n            collapsedWidth=\"auto\"\n            collapsedHeight={48}\n            expandedWidth={400}\n            expandedHeight={250}\n            triggerLabel=\"Custom Size\"\n            placeholder=\"This surface is larger...\"\n          />\n        </div>\n      </section>\n\n      {/* Custom Trigger Icon */}\n      <section className=\"space-y-4\">\n        <h2 className=\"text-2xl font-semibold\">Custom Trigger Icon</h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Add an icon to the trigger button\n        </p>\n        <div className=\"flex min-h-[300px] items-center justify-center rounded-lg p-8\">\n          <MorphSurface\n            triggerLabel=\"Help\"\n            triggerIcon={<HelpCircle className=\"h-4 w-4\" />}\n            placeholder=\"How can we help you?\"\n            onSubmit={handleSubmit}\n          />\n        </div>\n      </section>\n\n      {/* Controlled State */}\n      <section className=\"space-y-4\">\n        <h2 className=\"text-2xl font-semibold\">Controlled State</h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Control the open/close state externally\n        </p>\n        <div className=\"flex min-h-[300px] flex-col items-center gap-12 rounded-lg p-8\">\n          <button\n            type=\"button\"\n            onClick={() => setIsControlledOpen((prev) => !prev)}\n            className=\"bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 transition-colors\"\n          >\n            {isControlledOpen ? \"Close\" : \"Open\"} Morph Surface\n          </button>\n          <MorphSurface\n            isOpen={isControlledOpen}\n            onOpenChange={setIsControlledOpen}\n            triggerLabel=\"Controlled\"\n            placeholder=\"This surface is controlled externally...\"\n            onSubmit={handleSubmit}\n          />\n        </div>\n      </section>\n\n      {/* Custom Animation Speed */}\n      <section className=\"space-y-4\">\n        <h2 className=\"text-2xl font-semibold\">Custom Animation Speed</h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Speed up or slow down animations (higher values = slower animations)\n        </p>\n        <div className=\"flex min-h-[300px] items-center justify-center rounded-lg p-8\">\n          <MorphSurface\n            animationSpeed={2}\n            triggerLabel=\"Slow Animation\"\n            placeholder=\"Animations are slower...\"\n          />\n        </div>\n      </section>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}