{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam",
  "title": "Border Beam",
  "description": "An animated beam of light that travels around the border of its container.",
  "dependencies": ["framer-motion"],
  "registryDependencies": ["@godui/godui-theme"],
  "files": [
    {
      "path": "packages/components/src/border-beam/border-beam.tsx",
      "content": "\"use client\";\n\nimport { motion, type Transition, useReducedMotion } from \"framer-motion\";\nimport * as React from \"react\";\n\nexport type BorderBeamProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"color\"\n> & {\n  /** Side length (px) of the square beam — larger reads as a longer streak. */\n  size?: number;\n  /** Seconds for one full loop around the border. */\n  duration?: number;\n  /** Seconds to delay the start of the loop. */\n  delay?: number;\n  /** Leading edge color of the beam gradient. */\n  colorFrom?: string;\n  /** Trailing edge color of the beam gradient. */\n  colorTo?: string;\n  /** Override the motion transition. */\n  transition?: Transition;\n  /** Border thickness (px) the beam rides along. */\n  borderWidth?: number;\n  /** Travel counter-clockwise instead of clockwise. */\n  reverse?: boolean;\n  /** Starting position along the border, as a percentage (0–100). */\n  initialOffset?: number;\n  /** Render a soft, blurred echo of the beam for a neon glow. */\n  glow?: boolean;\n  /** Use the flowing rainbow gradient (shared with MagicButton). Overrides `colorFrom`/`colorTo`. */\n  rainbow?: boolean;\n};\n\n// Same hue order as the MagicButton rainbow edge, trailing off to transparent\n// so the moving beam keeps its comet fade.\nconst RAINBOW_BEAM =\n  \"linear-gradient(to left, var(--rainbow-1), var(--rainbow-5), var(--rainbow-3), var(--rainbow-4), transparent)\";\n\nconst BorderBeam = React.forwardRef<HTMLDivElement, BorderBeamProps>(\n  (\n    {\n      className,\n      style,\n      size = 60,\n      duration = 6,\n      delay = 0,\n      colorFrom = \"var(--chart-1)\",\n      colorTo = \"var(--chart-5)\",\n      transition,\n      borderWidth = 1,\n      reverse = false,\n      initialOffset = 0,\n      glow = false,\n      rainbow = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const reduceMotion = useReducedMotion();\n\n    // A square rides the padding-box border path; animating `offset-distance`\n    // sweeps it around, and the mask reveals only the border ring.\n    const beamStyle = {\n      width: size,\n      offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n      \"--color-from\": colorFrom,\n      \"--color-to\": colorTo,\n      ...(rainbow ? { background: RAINBOW_BEAM } : null),\n      ...style,\n    } as React.CSSProperties;\n\n    // The rainbow look paints via `background`; the two-color look via utilities.\n    const beamGradient = rainbow\n      ? \"\"\n      : \"bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent\";\n\n    const animate = reduceMotion\n      ? { offsetDistance: `${initialOffset}%` }\n      : {\n          offsetDistance: reverse\n            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]\n            : [`${initialOffset}%`, `${100 + initialOffset}%`],\n        };\n    const motionTransition: Transition = reduceMotion\n      ? { duration: 0 }\n      : {\n          repeat: Number.POSITIVE_INFINITY,\n          ease: \"linear\",\n          duration,\n          delay: -delay,\n          ...transition,\n        };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"border-beam\"\n        className=\"pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent mask-[linear-gradient(transparent,transparent),linear-gradient(#000,#000)] mask-intersect [mask-clip:padding-box,border-box]\"\n        style={\n          { \"--border-beam-width\": `${borderWidth}px` } as React.CSSProperties\n        }\n        {...props}\n      >\n        {glow ? (\n          <motion.div\n            aria-hidden=\"true\"\n            className={`absolute aspect-square opacity-60 blur-md ${beamGradient}`}\n            style={beamStyle}\n            initial={{ offsetDistance: `${initialOffset}%` }}\n            animate={animate}\n            transition={motionTransition}\n          />\n        ) : null}\n        <motion.div\n          aria-hidden=\"true\"\n          className={`absolute aspect-square ${beamGradient} ${className ?? \"\"}`}\n          style={beamStyle}\n          initial={{ offsetDistance: `${initialOffset}%` }}\n          animate={animate}\n          transition={motionTransition}\n        />\n      </div>\n    );\n  },\n);\nBorderBeam.displayName = \"BorderBeam\";\n\nexport { BorderBeam };\n",
      "type": "registry:ui",
      "target": "components/godui/border-beam.tsx"
    }
  ],
  "type": "registry:ui"
}