{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "neumorph-button-demo",
  "type": "registry:component",
  "registryDependencies": [
    "neumorph-button"
  ],
  "files": [
    {
      "path": "registry/default/example/neumorph-button-demo.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\n\nimport NeumorphButton from \"../ui/neumorph-button\"\n\nexport default function NeumorphButtonDemo() {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    setLoading(true)\n    setTimeout(() => setLoading(false), 2000)\n  }\n\n  return (\n    <div className=\"space-y-8 p-4\">\n      <div>\n        <h2 className=\"mb-2 text-lg font-semibold\">Button Variants</h2>\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <NeumorphButton>Default</NeumorphButton>\n          <NeumorphButton intent=\"primary\">Primary</NeumorphButton>\n          <NeumorphButton intent=\"secondary\">Secondary</NeumorphButton>\n          <NeumorphButton intent=\"danger\">Danger</NeumorphButton>\n        </div>\n      </div>\n      <div>\n        <h2 className=\"mb-2 text-lg font-semibold\">Button Sizes</h2>\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3\">\n          <NeumorphButton size=\"small\">Small</NeumorphButton>\n          <NeumorphButton size=\"medium\">Medium</NeumorphButton>\n          <NeumorphButton size=\"large\">Large</NeumorphButton>\n        </div>\n      </div>\n      <div>\n        <h2 className=\"mb-2 text-lg font-semibold\">Full Width Button</h2>\n        <div>\n          <NeumorphButton fullWidth>Full Width</NeumorphButton>\n        </div>\n      </div>\n      <div>\n        <h2 className=\"mb-2 text-lg font-semibold\">Disabled Buttons</h2>\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <NeumorphButton disabled>Disabled Default</NeumorphButton>\n          <NeumorphButton intent=\"primary\" disabled>\n            Disabled Primary\n          </NeumorphButton>\n          <NeumorphButton intent=\"secondary\" disabled>\n            Disabled Secondary\n          </NeumorphButton>\n          <NeumorphButton intent=\"danger\" disabled>\n            Disabled Danger\n          </NeumorphButton>\n        </div>\n      </div>\n      <div>\n        <h2 className=\"mb-2 text-lg font-semibold\">Hover and Active Effects</h2>\n        <p className=\"mb-2 text-sm text-gray-600\">\n          Hover over and click these buttons to see the animations.\n        </p>\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <NeumorphButton>Animate Me</NeumorphButton>\n          <NeumorphButton intent=\"primary\">Animate Me</NeumorphButton>\n          <NeumorphButton intent=\"secondary\">Animate Me</NeumorphButton>\n          <NeumorphButton intent=\"danger\">Animate Me</NeumorphButton>\n        </div>\n      </div>\n      <div>\n        <h2 className=\"mb-2 text-lg font-semibold\">Loading State</h2>\n        <p className=\"mb-2 text-sm text-gray-600\">\n          Click the button to see the loading animation.\n        </p>\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <NeumorphButton\n            intent=\"primary\"\n            loading={loading}\n            onClick={handleClick}\n          >\n            {loading ? \"Loading...\" : \"Click to Load\"}\n          </NeumorphButton>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}