{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blue-chrome-button",
  "description": "A chrome-style button with layered glow border and smooth motion.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/new-york/buttons/blue-chrome-button.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type BlueChromeVariant =\n  | \"blue\"\n  | \"cyan\"\n  | \"indigo\"\n  | \"violet\"\n  | \"emerald\"\n  | \"amber\"\n  | \"rose\"\n  | \"silver\";\n\ntype BlueChromeStyle = {\n  border: string;\n  outerGlow: string;\n  innerGlow: string;\n};\n\nconst blueChromeStyles: Record<BlueChromeVariant, BlueChromeStyle> = {\n  blue: {\n    border: \"#DCEFFF\",\n    outerGlow: \"rgba(46, 164, 255, 0.25)\",\n    innerGlow: \"rgba(46, 164, 255, 0.25)\",\n  },\n  cyan: {\n    border: \"#D8FBFF\",\n    outerGlow: \"rgba(34, 211, 238, 0.28)\",\n    innerGlow: \"rgba(34, 211, 238, 0.24)\",\n  },\n  indigo: {\n    border: \"#E2E8FF\",\n    outerGlow: \"rgba(99, 102, 241, 0.28)\",\n    innerGlow: \"rgba(99, 102, 241, 0.24)\",\n  },\n  violet: {\n    border: \"#F0E5FF\",\n    outerGlow: \"rgba(168, 85, 247, 0.28)\",\n    innerGlow: \"rgba(168, 85, 247, 0.24)\",\n  },\n  emerald: {\n    border: \"#D9FFEA\",\n    outerGlow: \"rgba(16, 185, 129, 0.26)\",\n    innerGlow: \"rgba(16, 185, 129, 0.22)\",\n  },\n  amber: {\n    border: \"#FFF0CC\",\n    outerGlow: \"rgba(245, 158, 11, 0.28)\",\n    innerGlow: \"rgba(245, 158, 11, 0.23)\",\n  },\n  rose: {\n    border: \"#FFE0E8\",\n    outerGlow: \"rgba(244, 63, 94, 0.28)\",\n    innerGlow: \"rgba(244, 63, 94, 0.23)\",\n  },\n  silver: {\n    border: \"#F3F6FA\",\n    outerGlow: \"rgba(148, 163, 184, 0.25)\",\n    innerGlow: \"rgba(148, 163, 184, 0.2)\",\n  },\n};\n\ninterface BlueChromeButtonProps extends HTMLMotionProps<\"button\"> {\n  variant?: BlueChromeVariant;\n}\n\nconst BlueChromeButton = React.forwardRef<\n  HTMLButtonElement,\n  BlueChromeButtonProps\n>(({ className, children, style, variant = \"blue\", ...props }, ref) => {\n  const tone = blueChromeStyles[variant];\n\n  return (\n    <motion.button\n      ref={ref}\n      whileTap={{ y: 0, scale: 0.985 }}\n      transition={{ duration: 0.24, ease: [0.22, 1, 0.36, 1] }}\n      className={cn(\n        \"box-border h-[35.46px] w-[100.25px] rounded-[100px] border text-xs font-medium text-white/95\",\n        className,\n      )}\n      style={{\n        background:\n          \"linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), conic-gradient(from 90deg at 50% 50%, #FDFDFD 0deg, #464646 44.35deg, #2C2C2C 56.43deg, #2C2C2C 63.53deg, #595959 77.78deg, #FDFDFD 101.95deg, #B5B5B5 130.71deg, #2C2C2C 158.9deg, #2F2F2F 170.95deg, #2C2C2C 179.09deg, #595959 197.78deg, #FDFDFD 227.8deg, #CDCDCD 240.9deg, #595959 273.03deg, #696969 300.73deg, #8C8C8C 313.13deg, #FDFDFD 360deg)\",\n        border: `1px solid ${tone.border}`,\n        boxShadow: `0px 0px 2px 2px ${tone.outerGlow}, 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 23, 73, 0.65), inset 0px 0px 4px 2px ${tone.innerGlow}`,\n        ...style,\n      }}\n      {...props}\n    >\n      {children || \"Chrome\"}\n    </motion.button>\n  );\n});\n\nBlueChromeButton.displayName = \"BlueChromeButton\";\n\nexport default BlueChromeButton;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/blue-chrome-button.tsx"
    }
  ],
  "type": "registry:block"
}