{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-button-action-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/split-button-action",
    "https://reusables.vercel.app/r/notify"
  ],
  "files": [
    {
      "path": "registry/example/split-button-action-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"@/packages/notify/src\"\nimport {\n  BriefcaseBusiness,\n  CodeXml,\n  Copy,\n  Download,\n  File,\n  FileDown,\n  FileJson,\n  FileText,\n  Image,\n  Link,\n  MessagesSquare,\n  Share2,\n  ThumbsUp,\n} from \"lucide-react\"\n\nimport SplitButtonAction from \"@/components/ui/split-button-action\"\n\nexport default function SplitButton2Demo() {\n  const [loadingStates, setLoadingStates] = useState({\n    download: false,\n    share: false,\n    export: false,\n    small: false,\n    default: false,\n    large: false,\n  })\n\n  const handleAction = async (action: keyof typeof loadingStates) => {\n    setLoadingStates((prev) => ({ ...prev, [action]: true }))\n    await new Promise((resolve) => setTimeout(resolve, 2000))\n    setLoadingStates((prev) => ({ ...prev, [action]: false }))\n    toast.success(\n      `${action.charAt(0).toUpperCase() + action.slice(1)} Successful`,\n      {\n        description: `Your ${action} action has been completed.`,\n      }\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      icon: <Copy className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Copy URL\",\n      onClick: () => {\n        toast.success(\"Copied URL\", {\n          description: \"URL copied to clipboard\",\n        })\n      },\n      icon: <Link className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Download PNG\",\n      onClick: () => {\n        toast.success(\"Downloading PNG\", {\n          description: \"Your PNG file is being downloaded...\",\n        })\n      },\n      icon: <Image className=\"h-4 w-4\" />,\n    },\n  ]\n\n  const shareOptions = [\n    {\n      label: \"Share on Twitter\",\n      onClick: () => {\n        toast.success(\"Sharing on Twitter\", {\n          description: \"Opening Twitter share dialog...\",\n        })\n      },\n      icon: <MessagesSquare className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Share on Facebook\",\n      onClick: () => {\n        toast.success(\"Sharing on Facebook\", {\n          description: \"Opening Facebook share dialog...\",\n        })\n      },\n      icon: <ThumbsUp className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Share on LinkedIn\",\n      onClick: () => {\n        toast.success(\"Sharing on LinkedIn\", {\n          description: \"Opening LinkedIn share dialog...\",\n        })\n      },\n      icon: <BriefcaseBusiness className=\"h-4 w-4\" />,\n    },\n  ]\n\n  const exportOptions = [\n    {\n      label: \"Export as PDF\",\n      onClick: () => {\n        toast.success(\"Exporting PDF\", {\n          description: \"Your file is being exported as PDF...\",\n        })\n      },\n      icon: <File className=\"h-4 w-4 text-red-500\" />,\n    },\n    {\n      label: \"Export as JSON\",\n      onClick: () => {\n        toast.success(\"Exporting JSON\", {\n          description: \"Your file is being exported as JSON...\",\n        })\n      },\n      icon: <FileJson className=\"h-4 w-4 text-yellow-500\" />,\n    },\n    {\n      label: \"Export as TXT\",\n      onClick: () => {\n        toast.success(\"Exporting TXT\", {\n          description: \"Your file is being exported as TXT...\",\n        })\n      },\n      icon: <FileText className=\"h-4 w-4 text-gray-500\" />,\n    },\n  ]\n\n  return (\n    <div className=\"flex flex-col gap-6 p-8\">\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-medium\">Modern Split Button Variants</h3>\n        <div className=\"flex flex-wrap gap-4\">\n          <SplitButtonAction\n            options={options}\n            mainAction={() => handleAction(\"download\")}\n            icon={<Download className=\"h-4 w-4\" />}\n            isLoading={loadingStates.download}\n          >\n            Download\n          </SplitButtonAction>\n\n          <SplitButtonAction\n            options={shareOptions}\n            mainAction={() => handleAction(\"share\")}\n            icon={<Share2 className=\"h-4 w-4\" />}\n            glassMorphism\n            variant=\"secondary\"\n            isLoading={loadingStates.share}\n          >\n            Share\n          </SplitButtonAction>\n\n          <SplitButtonAction\n            options={exportOptions}\n            mainAction={() => handleAction(\"export\")}\n            icon={<FileDown className=\"h-4 w-4\" />}\n            variant=\"destructive\"\n            isLoading={loadingStates.export}\n          >\n            Export\n          </SplitButtonAction>\n        </div>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-medium\">Size Variants</h3>\n        <div className=\"flex flex-wrap items-center gap-4\">\n          <SplitButtonAction\n            options={options}\n            mainAction={() => handleAction(\"small\")}\n            size=\"sm\"\n            icon={<CodeXml className=\"h-3 w-3\" />}\n            variant=\"outline\"\n            isLoading={loadingStates.small}\n          >\n            Small\n          </SplitButtonAction>\n\n          <SplitButtonAction\n            options={options}\n            mainAction={() => handleAction(\"default\")}\n            icon={<CodeXml className=\"h-4 w-4\" />}\n            variant=\"outline\"\n            isLoading={loadingStates.default}\n          >\n            Default\n          </SplitButtonAction>\n\n          <SplitButtonAction\n            options={options}\n            mainAction={() => handleAction(\"large\")}\n            size=\"lg\"\n            icon={<CodeXml className=\"h-5 w-5\" />}\n            variant=\"outline\"\n            isLoading={loadingStates.large}\n          >\n            Large\n          </SplitButtonAction>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/split-button-action-demo.tsx"
    }
  ],
  "type": "registry:example"
}