{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pulse-button",
  "title": "Pulse Button",
  "description": "A high-impact, beautifully animated button with pulsing dot patterns and smooth interactions.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "packages/pulse-button/pulse-button.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion } from \"motion/react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ntype ButtonSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\r\ntype ButtonColor = \"pink\" | \"blue\" | \"orange\" | \"yellow\" | \"green\" | \"purple\";\r\n\r\ninterface PulseButtonProps {\r\n  /**\r\n   * The text to display on the button.\r\n   * @default \"Swap\"\r\n   */\r\n  text?: string;\r\n  /**\r\n   * Optional click handler.\r\n   */\r\n  onClick?: () => void;\r\n  /**\r\n   * Additional CSS classes for the button.\r\n   */\r\n  className?: string;\r\n  /**\r\n   * The preset color theme for the button.\r\n   * @default \"pink\"\r\n   */\r\n  color?: ButtonColor;\r\n  /**\r\n   * The size of the button.\r\n   * @default \"lg\"\r\n   */\r\n  size?: ButtonSize;\r\n}\r\n\r\nconst colorMap: Record<ButtonColor, { primary: string; glow: string; shadow: string }> = {\r\n  pink: {\r\n    primary: \"#ff2281\",\r\n    glow: \"#ff4da0\",\r\n    shadow: \"rgba(255, 34, 129, 0.4)\",\r\n  },\r\n  blue: {\r\n    primary: \"#0070f3\",\r\n    glow: \"#00d2ff\",\r\n    shadow: \"rgba(0, 112, 243, 0.4)\",\r\n  },\r\n  orange: {\r\n    primary: \"#f2994a\",\r\n    glow: \"#f2c94c\",\r\n    shadow: \"rgba(242, 153, 74, 0.4)\",\r\n  },\r\n  yellow: {\r\n    primary: \"#f2c94c\",\r\n    glow: \"#ffe000\",\r\n    shadow: \"rgba(242, 201, 76, 0.4)\",\r\n  },\r\n  green: {\r\n    primary: \"#27ae60\",\r\n    glow: \"#2ecc71\",\r\n    shadow: \"rgba(39, 174, 96, 0.4)\",\r\n  },\r\n  purple: {\r\n    primary: \"#8e44ad\",\r\n    glow: \"#9b59b6\",\r\n    shadow: \"rgba(142, 68, 173, 0.4)\",\r\n  },\r\n};\r\n\r\nconst sizeConfig = {\r\n  sm: {\r\n    button: \"h-10 min-w-[120px] px-4 rounded-lg\",\r\n    text: \"text-sm\",\r\n    dots: [2, 1.2, 0.8],\r\n  },\r\n  md: {\r\n    button: \"h-14 min-w-[180px] px-6 rounded-xl\",\r\n    text: \"text-xl\",\r\n    dots: [3, 1.8, 1],\r\n  },\r\n  lg: {\r\n    button: \"h-20 min-w-[240px] px-8 rounded-2xl\",\r\n    text: \"text-3xl\",\r\n    dots: [3.5, 2, 1],\r\n  },\r\n  xl: {\r\n    button: \"h-28 min-w-[320px] px-12 rounded-[2rem]\",\r\n    text: \"text-5xl\",\r\n    dots: [5, 3, 1.5],\r\n  },\r\n};\r\n\r\n/**\r\n * A beautifully animated button component with gradient background,\r\n * pulsing dot patterns, and smooth hover/active interactions.\r\n */\r\nexport default function PulseButton({\r\n  text = \"Swap\",\r\n  onClick,\r\n  className,\r\n  color = \"pink\",\r\n  size = \"lg\",\r\n}: PulseButtonProps) {\r\n  const config = sizeConfig[size];\r\n  const theme = colorMap[color];\r\n\r\n  return (\r\n    <motion.button\r\n      onClick={onClick}\r\n      className={cn(\r\n        \"relative flex items-center justify-center group focus:outline-none focus:ring-2 focus:ring-offset-2 w-fit\",\r\n        config.button,\r\n        className\r\n      )}\r\n      style={{\r\n        background: `linear-gradient(to right, ${theme.glow}, ${theme.primary}, ${theme.glow})`,\r\n        boxShadow: `0 8px 32px ${theme.shadow}, inset 0 0 0 1.5px rgba(255, 255, 255, 0.3)`,\r\n        // @ts-ignore - custom property for focus ring\r\n        \"--tw-ring-color\": theme.primary,\r\n      }}\r\n      whileHover={{ scale: 1.02 }}\r\n      whileTap={{ scale: 0.98 }}\r\n      transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\r\n    >\r\n      {/* Pattern Overlay Container */}\r\n      <div className={cn(\"absolute inset-0 overflow-hidden pointer-events-none transition-opacity duration-300 group-hover:opacity-90\", config.button)}>\r\n        {/* Large dots (Outer Edges) */}\r\n        <motion.div\r\n          className=\"absolute inset-0 w-full h-full\"\r\n          style={{\r\n            backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.45) ${config.dots[0]}px, transparent ${config.dots[0]}px), radial-gradient(circle, rgba(255,255,255,0.45) ${config.dots[0]}px, transparent ${config.dots[0]}px)`,\r\n            backgroundSize: '18px 18px',\r\n            backgroundPosition: '0 0, 9px 9px',\r\n            WebkitMaskImage: 'linear-gradient(to right, white 0%, transparent 12%, transparent 88%, white 100%)',\r\n            maskImage: 'linear-gradient(to right, white 0%, transparent 12%, transparent 88%, white 100%)',\r\n          }}\r\n          animate={{ opacity: [0.15, 1, 0.15] }}\r\n          transition={{\r\n            duration: 2,\r\n            repeat: Infinity,\r\n            ease: \"easeInOut\",\r\n            delay: 0,\r\n          }}\r\n        />\r\n\r\n        {/* Medium dots (Mid Section) */}\r\n        <motion.div\r\n          className=\"absolute inset-0 w-full h-full\"\r\n          style={{\r\n            backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.45) ${config.dots[1]}px, transparent ${config.dots[1]}px), radial-gradient(circle, rgba(255,255,255,0.45) ${config.dots[1]}px, transparent ${config.dots[1]}px)`,\r\n            backgroundSize: '18px 18px',\r\n            backgroundPosition: '0 0, 9px 9px',\r\n            WebkitMaskImage: 'linear-gradient(to right, transparent 4%, white 12%, transparent 24%, transparent 76%, white 88%, transparent 96%)',\r\n            maskImage: 'linear-gradient(to right, transparent 4%, white 12%, transparent 24%, transparent 76%, white 88%, transparent 96%)',\r\n          }}\r\n          animate={{ opacity: [0.15, 1, 0.15] }}\r\n          transition={{\r\n            duration: 2,\r\n            repeat: Infinity,\r\n            ease: \"easeInOut\",\r\n            delay: 0.2,\r\n          }}\r\n        />\r\n\r\n        {/* Small dots (Inner Section fading to center) */}\r\n        <motion.div\r\n          className=\"absolute inset-0 w-full h-full\"\r\n          style={{\r\n            backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.45) ${config.dots[2]}px, transparent ${config.dots[2]}px), radial-gradient(circle, rgba(255,255,255,0.45) ${config.dots[2]}px, transparent ${config.dots[2]}px)`,\r\n            backgroundSize: '18px 18px',\r\n            backgroundPosition: '0 0, 9px 9px',\r\n            WebkitMaskImage: 'linear-gradient(to right, transparent 15%, white 25%, transparent 35%, transparent 65%, white 75%, transparent 85%)',\r\n            maskImage: 'linear-gradient(to right, transparent 15%, white 25%, transparent 35%, transparent 65%, white 75%, transparent 85%)',\r\n          }}\r\n          animate={{ opacity: [0.15, 1, 0.15] }}\r\n          transition={{\r\n            duration: 2,\r\n            repeat: Infinity,\r\n            ease: \"easeInOut\",\r\n            delay: 0.4,\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {/* Text Label */}\r\n      <span\r\n        className={cn(\"relative z-10 text-white font-semibold tracking-tight\", config.text)}\r\n        style={{\r\n          textShadow: '0 0 15px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.4)'\r\n        }}\r\n      >\r\n        {text}\r\n      </span>\r\n    </motion.button>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/satori-ui/pulse-button.tsx"
    }
  ],
  "type": "registry:component"
}