{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pro-button",
  "title": "Pro Button",
  "description": "A high-impact call-to-action with a signature pixel icon and premium finish.",
  "files": [
    {
      "path": "packages/pro-button/pro-button.tsx",
      "content": "\"use client\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useState, useEffect } from \"react\";\r\n\r\ntype PixelColor = \"emerald\" | \"sky\" | \"rose\";\r\ntype ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\r\n\r\ninterface ProButtonProps {\r\n  text?: string;\r\n  className?: string;\r\n  pixelColor?: PixelColor;\r\n  size?: ButtonSize;\r\n  onClick?: () => void;\r\n}\r\n\r\ninterface BoxProps {\r\n  pixelColor: PixelColor;\r\n  size: ButtonSize;\r\n}\r\n\r\nconst colorMap: Record<PixelColor, string> = {\r\n  rose: \"bg-gradient-to-b from-[#f03030] to-[#e11d2e]\",\r\n  sky: \"bg-gradient-to-b from-[#007bff] to-blue-600\",\r\n  emerald: \"bg-gradient-to-b from-emerald-600 to-emerald-700\",\r\n};\r\n\r\nconst sizeConfig = {\r\n  xs: {\r\n    button:\r\n      \"rounded-[8px] sm:rounded-[10px] lg:rounded-[12px] py-0.5 sm:py-0.5 lg:py-1 pl-0.5 sm:pl-0.5 lg:pl-1 pr-3 sm:pr-4 lg:pr-5 gap-1.5 sm:gap-2 lg:gap-3\",\r\n    text: \"text-[10px] sm:text-[12px] lg:text-[14px]\",\r\n    box: \"w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 rounded-[4px] sm:rounded-[6px] lg:rounded-[8px]\",\r\n    pixel: \"w-[2px] h-[2px] sm:w-[3px] sm:h-[3px] lg:w-[3px] lg:h-[3px]\",\r\n    gridGap: \"gap-[1px] sm:gap-[1px] lg:gap-[2px]\",\r\n    shadow:\r\n      \"shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_8px_10px_-5px_rgba(0,0,0,0.1),0_4px_4px_-5px_rgba(0,0,0,0.04)]\",\r\n    boxShadow:\r\n      \"shadow-[inset_0_1px_1px_rgba(255,255,255,0.5),0_4px_6px_rgba(0,0,0,0.35)]\",\r\n  },\r\n  sm: {\r\n    button:\r\n      \"rounded-[12px] sm:rounded-[14px] lg:rounded-[16px] py-1 sm:py-1 lg:py-1.5 pl-1 sm:pl-1 lg:pl-1.5 pr-4 sm:pr-5 lg:pr-6 gap-2 sm:gap-3 lg:gap-4\",\r\n    text: \"text-[12px] sm:text-[14px] lg:text-[16px]\",\r\n    box: \"w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-[6px] sm:rounded-[8px] lg:rounded-[10px]\",\r\n    pixel: \"w-[3px] h-[3px] sm:w-[4px] sm:h-[4px] lg:w-[4px] lg:h-[4px]\",\r\n    gridGap: \"gap-[2px] sm:gap-[2px] lg:gap-[3px]\",\r\n    shadow:\r\n      \"shadow-[inset_0_2px_4px_rgba(0,0,0,0.2),0_16px_20px_-5px_rgba(0,0,0,0.1),0_8px_8px_-5px_rgba(0,0,0,0.04)]\",\r\n    boxShadow:\r\n      \"shadow-[inset_0_2px_2px_rgba(255,255,255,0.5),0_8px_12px_rgba(0,0,0,0.35)]\",\r\n  },\r\n  md: {\r\n    button:\r\n      \"rounded-[16px] sm:rounded-[18px] lg:rounded-[20px] py-1 sm:py-1.5 lg:py-1.5 pl-1 sm:pl-1.5 lg:pl-1.5 pr-6 sm:pr-8 lg:pr-10 gap-4 sm:gap-6 lg:gap-8\",\r\n    text: \"text-[16px] sm:text-[18px] lg:text-[22px]\",\r\n    box: \"w-10 h-10 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-[8px] sm:rounded-[12px] lg:rounded-[14px]\",\r\n    pixel: \"w-[4px] h-[4px] sm:w-[4px] sm:h-[4px] lg:w-[5px] lg:h-[5px]\",\r\n    gridGap: \"gap-[2px] sm:gap-[3px] lg:gap-[4px]\",\r\n    shadow:\r\n      \"shadow-[inset_0_2px_4px_rgba(0,0,0,0.2),0_20px_25px_-5px_rgba(0,0,0,0.1),0_10px_10px_-5px_rgba(0,0,0,0.04)]\",\r\n    boxShadow:\r\n      \"shadow-[inset_0_2px_2px_rgba(255,255,255,0.5),0_10px_16px_rgba(0,0,0,0.35)]\",\r\n  },\r\n  lg: {\r\n    button:\r\n      \"rounded-[20px] sm:rounded-[24px] lg:rounded-[28px] py-1.5 sm:py-2 lg:py-2 pl-1.5 sm:pl-2 lg:pl-2 pr-8 sm:pr-10 lg:pr-14 gap-6 sm:gap-8 lg:gap-10\",\r\n    text: \"text-[22px] sm:text-[26px] lg:text-[32px]\",\r\n    box: \"w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-[14px] sm:rounded-[18px] lg:rounded-[20px]\",\r\n    pixel: \"w-[5px] h-[5px] sm:w-[6px] sm:h-[6px] lg:w-[7px] lg:h-[7px]\",\r\n    gridGap: \"gap-[4px] sm:gap-[5px] lg:gap-[6px]\",\r\n    shadow:\r\n      \"shadow-[inset_0_3px_6px_rgba(0,0,0,0.25),0_25px_30px_-5px_rgba(0,0,0,0.15),0_12px_12px_-5px_rgba(0,0,0,0.06)]\",\r\n    boxShadow:\r\n      \"shadow-[inset_0_3px_3px_rgba(255,255,255,0.5),0_14px_20px_rgba(0,0,0,0.4)]\",\r\n  },\r\n};\r\n\r\nconst ProButton = ({\r\n  text = \"Pro Button\",\r\n  className,\r\n  pixelColor = \"sky\",\r\n  size = \"sm\",\r\n  onClick,\r\n}: ProButtonProps) => {\r\n  const s = sizeConfig[size];\r\n\r\n  return (\r\n    <button\r\n      onClick={onClick}\r\n      className={cn(\r\n        \"relative flex w-fit mx-auto sm:mx-0 items-center justify-center sm:justify-start cursor-pointer shadow-sm shadow-gray-100/10\",\r\n        \"bg-gradient-to-b from-[#303030] to-black\",\r\n        s.shadow,\r\n        s.button,\r\n        className,\r\n      )}\r\n    >\r\n      <Box pixelColor={pixelColor} size={size} />\r\n      <span className={cn(\"text-white font-normal tracking-[0.025em]\", s.text)}>\r\n        {text}\r\n      </span>\r\n    </button>\r\n  );\r\n};\r\n\r\nconst Box = ({ pixelColor, size }: BoxProps) => {\r\n  const [frame, setFrame] = useState(0);\r\n  const s = sizeConfig[size];\r\n\r\n  useEffect(() => {\r\n    const timer = setInterval(() => {\r\n      setFrame((prev) => (prev + 1) % 9);\r\n    }, 150);\r\n    return () => clearInterval(timer);\r\n  }, []);\r\n\r\n  const getPattern = (offset: number) => {\r\n    const pattern: boolean[][] = [];\r\n    for (let i = 0; i < 5; i++) {\r\n      const row: boolean[] = [];\r\n      for (let j = 0; j < 5; j++) {\r\n        const pos = j - offset;\r\n        const isArrow =\r\n          (i === 2 && pos >= 0 && pos <= 4) ||\r\n          (i === 1 && pos === 3) ||\r\n          (i === 0 && pos === 2) ||\r\n          (i === 3 && pos === 3) ||\r\n          (i === 4 && pos === 2);\r\n        row.push(isArrow && pos >= 0 && pos <= 4);\r\n      }\r\n      pattern.push(row);\r\n    }\r\n    return pattern;\r\n  };\r\n\r\n  const currentPattern = getPattern(frame - 5);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"flex items-center justify-center\",\r\n        s.boxShadow,\r\n        s.box,\r\n        colorMap[pixelColor],\r\n      )}\r\n    >\r\n      <div className={cn(\"grid grid-cols-5 grid-rows-5\", s.gridGap)}>\r\n        {[0, 1, 2, 3, 4].map((row) =>\r\n          [0, 1, 2, 3, 4].map((col) => {\r\n            const isActive = currentPattern[row][col];\r\n            return (\r\n              <div\r\n                key={`${row}-${col}`}\r\n                className={cn(\r\n                  \"transition-colors duration-150 ease-in\",\r\n                  s.pixel,\r\n                  isActive ? \"bg-white/95\" : \"bg-white/15\",\r\n                )}\r\n              />\r\n            );\r\n          }),\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ProButton;\r\n",
      "type": "registry:component",
      "target": "components/satori-ui/pro-button.tsx"
    }
  ],
  "type": "registry:component"
}