{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "buttons-glow",
  "title": "Glow buttons",
  "description": "Styled buttons: the Glow set. 5 decorative buttons variations (GlowButton, PulseGlowButton, AuraButton, NeonButton, EmberButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/buttons-glow.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion, type HTMLMotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Glow button family: 5 variations on coloured halos and light. All are sized (aligned with the base scale), use framer-motion, take colour ONLY from semantic tokens and are reduced-motion safe. The glows derive from a token-coloured box-shadow or a blurred sibling layer. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst sizes: Record<StyledSize, string> = {\n  sm: \"h-8 gap-1.5 rounded-md px-3 text-sm\",\n  md: \"h-9 gap-2 rounded-lg px-4 text-sm\",\n  lg: \"h-10 gap-2 rounded-lg px-5 text-sm\",\n  xl: \"h-12 gap-2.5 rounded-xl px-6 text-base\",\n}\n\nconst base =\n  \"relative inline-flex shrink-0 select-none items-center justify-center font-medium whitespace-nowrap outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\ntype Props = HTMLMotionProps<\"button\"> & { size?: StyledSize }\n\n/* Glow: a token-coloured halo (box-shadow) appears on hover. */\nexport function GlowButton({ className, size = \"md\", children, ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.button\n      data-slot=\"styled-button\"\n      whileHover={reduce ? undefined : { scale: 1.03 }}\n      whileTap={reduce ? undefined : { scale: 0.97 }}\n      transition={{ type: \"spring\", stiffness: 350, damping: 22 }}\n      className={cn(\n        base,\n        sizes[size],\n        \"bg-info text-info-foreground transition-shadow duration-(--motion-base) hover:shadow-[0_6px_30px_-4px_var(--info)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </motion.button>\n  )\n}\n\n/* Pulse: arkadaki blur'lu token katman surekli nabiz gibi buyuyup soner. */\nexport function PulseGlowButton({ className, size = \"md\", children, ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <span className=\"relative inline-flex\">\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 rounded-lg bg-info blur-md\"\n        animate={reduce ? undefined : { opacity: [0.35, 0.7, 0.35], scale: [1, 1.08, 1] }}\n        transition={reduce ? undefined : { duration: 2, ease: \"easeInOut\", repeat: Infinity }}\n      />\n      <motion.button\n        data-slot=\"styled-button\"\n        whileTap={reduce ? undefined : { scale: 0.97 }}\n        transition={{ type: \"spring\", stiffness: 350, damping: 22 }}\n        className={cn(base, sizes[size], \"bg-info text-info-foreground\", className)}\n        {...props}\n      >\n        {children}\n      </motion.button>\n    </span>\n  )\n}\n\n/* Aura: a soft halo is always present and intensifies on hover. */\nexport function AuraButton({ className, size = \"md\", children, ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <span className=\"group relative inline-flex\">\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 rounded-lg bg-brand opacity-40 blur-xl transition-opacity duration-(--motion-slow) group-hover:opacity-70\"\n      />\n      <motion.button\n        data-slot=\"styled-button\"\n        whileHover={reduce ? undefined : { scale: 1.03 }}\n        whileTap={reduce ? undefined : { scale: 0.97 }}\n        transition={{ type: \"spring\", stiffness: 350, damping: 22 }}\n        className={cn(base, sizes[size], \"bg-brand text-brand-foreground\", className)}\n        {...props}\n      >\n        {children}\n      </motion.button>\n    </span>\n  )\n}\n\n/* Neon: a bright token line plus inner and outer glow, transparent body. */\nexport function NeonButton({ className, size = \"md\", children, ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.button\n      data-slot=\"styled-button\"\n      whileHover={reduce ? undefined : { scale: 1.03 }}\n      whileTap={reduce ? undefined : { scale: 0.97 }}\n      transition={{ type: \"spring\", stiffness: 350, damping: 22 }}\n      className={cn(\n        base,\n        sizes[size],\n        \"border border-info bg-transparent text-info shadow-[0_0_12px_-2px_var(--info),inset_0_0_8px_-4px_var(--info)] transition-shadow duration-(--motion-base) hover:shadow-[0_0_22px_-2px_var(--info),inset_0_0_12px_-4px_var(--info)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </motion.button>\n  )\n}\n\n/* Ember: a lightly flickering ember light over a warm token (warning). */\nexport function EmberButton({ className, size = \"md\", children, ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <span className=\"relative inline-flex\">\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 rounded-lg bg-warning blur-md\"\n        animate={reduce ? undefined : { opacity: [0.5, 0.8, 0.55, 0.75, 0.5] }}\n        transition={reduce ? undefined : { duration: 1.6, ease: \"easeInOut\", repeat: Infinity }}\n      />\n      <motion.button\n        data-slot=\"styled-button\"\n        whileTap={reduce ? undefined : { scale: 0.97 }}\n        transition={{ type: \"spring\", stiffness: 350, damping: 22 }}\n        className={cn(base, sizes[size], \"bg-warning text-warning-foreground\", className)}\n        {...props}\n      >\n        {children}\n      </motion.button>\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/buttons-glow.tsx"
    }
  ],
  "categories": [
    "styled",
    "buttons"
  ],
  "type": "registry:component"
}