{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "premium-button",
  "title": "Premium Button",
  "description": "An animated button with a dynamic arrow grid animation.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/premium-button/premium-button.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useState, useEffect } from \"react\";\n\ninterface PremiumButtonProps {\n  text?: string;\n  className?: string;\n  onClick?: () => void;\n}\n\nconst PremiumButton = ({\n  text = \"Premium Button\",\n  className,\n  onClick,\n}: PremiumButtonProps) => {\n  return (\n    <button\n      onClick={onClick}\n      className={cn(\n        \"relative rounded-[8px] flex items-center gap-2 pl-[48px] pr-4 tracking-tight cursor-pointer h-[44px] bg-black  hover:scale-[1.02] active:scale-[0.98] transition-all dark:border dark:border-neutral-800\",\n        className\n      )}\n    >\n      <Box />\n      <span className=\"font-medium text-white\">{text}</span>\n    </button>\n  );\n};\n\nconst Box = () => {\n  const [step, setStep] = useState(0);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setStep((prev) => (prev + 1) % 14);\n    }, 100);\n    return () => clearInterval(timer);\n  }, []);\n\n  const isArrow = (row: number, col: number) => {\n    const headX = step - 4; // Start from outside left\n\n    // Arrow shape definition based on head position\n    if (row === 2) return col <= headX && col >= headX - 4;\n    if (row === 1 || row === 3) return col === headX - 1;\n    if (row === 0 || row === 4) return col === headX - 2;\n    return false;\n  };\n\n  return (\n    <div className=\"absolute inset-y-0 left-1 my-auto size-9 rounded-[4px] bg-rose-500 flex flex-col justify-center items-center gap-px transition-all duration-400 ease-out shadow-sm\">\n      {[0, 1, 2, 3, 4].map((row) => (\n        <div key={row} className=\"flex gap-[2px]\">\n          {[0, 1, 2, 3, 4].map((col) => (\n            <Bubble key={col} highlight={isArrow(row, col)} />\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nconst Bubble = ({ highlight }: { highlight?: boolean }) => {\n  return (\n    <span\n      className={cn(\n        \"inline-block size-[3px] bg-white/25\",\n        highlight && \"bg-white animate-nudge\"\n      )}\n    />\n  );\n};\n\nexport default PremiumButton;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}