{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-02",
  "dependencies": [
    "@aliimam/icons",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/button-02.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Bell, Plus } from \"@aliimam/icons\";\nimport {\n  Archive,\n  ArrowLeft,\n  ArrowRight,\n  Check,\n  Copy,\n  Download,\n  GitBranch,\n  LoaderCircle,\n  RotateCcw,\n  Send,\n  Sparkles,\n  Trash,\n  X,\n} from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport default function ButtonDemo() {\n  const [open, setOpen] = useState<boolean>(false);\n  const [count, setCount] = useState(3);\n\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const [copied, setCopied] = useState<boolean>(false);\n\n  const handleCopy = async () => {\n    try {\n      // await navigator.clipboard.writeText(\"string to copy\");\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  const handleLoadClick = () => {\n    setIsLoading(true);\n    // Simulate an async operation\n    setTimeout(() => {\n      setIsLoading(false);\n    }, 1000); // Reset after 1 second\n  };\n\n  const handleClick = () => {\n    setCount(0);\n  };\n  return (\n    <div className=\"flex max-w-lg gap-y-6 flex-wrap gap-3\">\n      <Button size={\"icon\"}>\n        <Archive />\n      </Button>\n      <Button size={\"icon\"} variant=\"destructive\">\n        <Trash />\n      </Button>\n      <Button size={\"icon\"} variant=\"secondary\">\n        <X />\n      </Button>\n      <Button size={\"icon\"} variant=\"ghost\">\n        <Sparkles />\n      </Button>\n      <Button size={\"icon\"} variant=\"outline\">\n        <ArrowLeft />\n      </Button>\n      <Button className=\"rounded-full\" variant=\"outline\" size=\"icon\">\n        <Plus />\n      </Button>\n      <Button size={\"icon\"}>\n        <ArrowRight />\n      </Button>\n      <Button size={\"icon\"} variant=\"secondary\">\n        <Send />\n      </Button>\n      <Button size={\"icon\"}>\n        <Download />\n      </Button>\n      <Button size={\"icon\"} variant=\"outline\">\n        <GitBranch />\n      </Button>\n      <Button\n        className=\"group rounded-full\"\n        variant=\"outline\"\n        size=\"icon\"\n        onClick={() => setOpen((prevState) => !prevState)}\n        aria-expanded={open}\n        aria-label={open ? \"Close menu\" : \"Open menu\"}\n      >\n        <Plus\n          className=\"transition-transform duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)] group-aria-expanded:rotate-[135deg]\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        className=\"relative\"\n        onClick={handleClick}\n        aria-label=\"Notifications\"\n      >\n        <Bell />\n        {count > 0 && (\n          <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1\">\n            {count > 99 ? \"99+\" : count}\n          </Badge>\n        )}\n      </Button>\n      <Button\n        className=\"group\"\n        variant=\"ghost\"\n        size=\"icon\"\n        onClick={() => setOpen((prevState) => !prevState)}\n        aria-expanded={open}\n        aria-label={open ? \"Close menu\" : \"Open menu\"}\n      >\n        <svg\n          className=\"pointer-events-none\"\n          width={16}\n          height={16}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M4 12L20 12\"\n            className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n          />\n          <path\n            d=\"M4 12H20\"\n            className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n          />\n          <path\n            d=\"M4 12H20\"\n            className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n          />\n        </svg>\n      </Button>\n      <Button size={\"icon\"} disabled>\n        <LoaderCircle className=\"animate-spin\" />\n      </Button>\n      <Button\n        size={\"icon\"}\n        onClick={handleLoadClick}\n        disabled={isLoading}\n        data-loading={isLoading || undefined}\n        className=\"group relative disabled:opacity-100\"\n      >\n        <span className=\"group-data-loading:text-transparent\">\n          <Send />\n        </span>\n        {isLoading && (\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <LoaderCircle\n              className=\"animate-spin\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n          </div>\n        )}\n      </Button>\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        className=\"disabled:opacity-100\"\n        onClick={handleCopy}\n        aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n        disabled={copied}\n      >\n        <div\n          className={cn(\n            \"transition-all\",\n            copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\"\n          )}\n        >\n          <Check className=\"stroke-emerald-500\" size={16} aria-hidden=\"true\" />\n        </div>\n        <div\n          className={cn(\n            \"absolute transition-all\",\n            copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\"\n          )}\n        >\n          <Copy />\n        </div>\n      </Button>\n      <Button\n        className=\"hover:[&>svg]:rotate-45 transition-transform duration-300\"\n        variant=\"outline\"\n        size=\"icon\"\n      >\n        <RotateCcw className=\"transition-transform duration-300\" />\n      </Button>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/button-02.tsx"
    }
  ],
  "type": "registry:ui"
}