{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-button-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/split-button",
    "https://reusables.vercel.app/r/notify"
  ],
  "files": [
    {
      "path": "registry/example/split-button-demo.tsx",
      "content": "\"use client\"\n\nimport { toast } from \"@/packages/notify/src\"\n\nimport { SplitButton } from \"@/components/ui/split-button\"\n\nexport default function Demo() {\n  const handleDownloadPNG = () => {\n    toast.success(\"Downloading PNG\", {\n      description: \"Your file is being downloaded...\",\n    })\n  }\n\n  const options = [\n    {\n      label: \"Copy SVG\",\n      onClick: () => {\n        toast.success(\"Copied SVG\", {\n          description: \"SVG code copied to clipboard\",\n        })\n      },\n    },\n    {\n      label: \"Copy Data URL\",\n      onClick: () => {\n        toast.success(\"Copied Data URL\", {\n          description: \"Data URL copied to clipboard\",\n        })\n      },\n    },\n    {\n      label: \"Download SVG\",\n      onClick: () => {\n        toast.success(\"Downloading SVG\", {\n          description: \"Your file is being downloaded...\",\n        })\n      },\n    },\n    {\n      label: \"Download PNG\",\n      onClick: () => handleDownloadPNG(),\n    },\n  ]\n\n  return (\n    <div className=\"flex flex-col gap-4 p-4\">\n      <div className=\"grid grid-cols-1 items-center gap-2 md:grid-cols-[180px_1fr]\">\n        <p className=\"my-0 text-sm text-muted-foreground md:my-5\">\n          Default Split Button\n        </p>\n        <SplitButton options={options} mainAction={handleDownloadPNG}>\n          Download PNG\n        </SplitButton>\n      </div>\n\n      <div className=\"grid grid-cols-1 items-center gap-2 md:grid-cols-[180px_1fr]\">\n        <p className=\"my-0 text-sm text-muted-foreground md:my-5\">\n          Secondary Variant\n        </p>\n        <SplitButton\n          options={options}\n          mainAction={handleDownloadPNG}\n          variant=\"secondary\"\n        >\n          Download PNG\n        </SplitButton>\n      </div>\n\n      <div className=\"grid grid-cols-1 items-center gap-2 md:grid-cols-[180px_1fr]\">\n        <p className=\"my-0 text-sm text-muted-foreground md:my-5\">\n          Outline Variant\n        </p>\n        <SplitButton\n          options={options}\n          mainAction={handleDownloadPNG}\n          variant=\"outline\"\n        >\n          Download PNG\n        </SplitButton>\n      </div>\n\n      <div className=\"grid grid-cols-1 items-center gap-2 md:grid-cols-[180px_1fr]\">\n        <p className=\"my-0 text-sm text-muted-foreground md:my-5\">\n          Small Size Variant\n        </p>\n        <SplitButton options={options} mainAction={handleDownloadPNG} size=\"sm\">\n          Download PNG\n        </SplitButton>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/split-button-demo.tsx"
    }
  ],
  "type": "registry:example"
}