{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam",
  "title": "Border Beam",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/border-beam/BorderBeam.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface BorderBeamProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Ring thickness in px. */\n  size?: number\n  /** Seconds per revolution. */\n  duration?: number\n  /** Seconds; negative values offset the beam's starting position around the ring. */\n  delay?: number\n  /** Any CSS color for the beam highlight. */\n  color?: string\n  /** Freeze the beam in place (animation-play-state: paused). */\n  paused?: boolean\n}\n\nconst BorderBeam = React.forwardRef<HTMLSpanElement, BorderBeamProps>(\n  (\n    { className, size = 2, duration = 6, delay = 0, color = 'var(--primary)', paused = false, style, ...props },\n    ref,\n  ) => {\n    // Honor prefers-reduced-motion by rendering a static beam at a fixed angle.\n    const [reducedMotion, setReducedMotion] = React.useState(false)\n\n    React.useEffect(() => {\n      const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n      setReducedMotion(query.matches)\n      const onChange = (event: MediaQueryListEvent) => setReducedMotion(event.matches)\n      query.addEventListener('change', onChange)\n      return () => query.removeEventListener('change', onChange)\n    }, [])\n\n    return (\n      <span\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"border-beam\"\n        aria-hidden=\"true\"\n        className={cn('pointer-events-none absolute inset-0 rounded-[inherit]', className)}\n        style={{\n          padding: `${size}px`,\n          background: reducedMotion\n            ? `conic-gradient(from 45deg, transparent 0deg, transparent 290deg, ${color} 330deg, transparent 360deg)`\n            : `conic-gradient(from var(--uipkge-border-angle), transparent 0deg, transparent 290deg, ${color} 330deg, transparent 360deg)`,\n          animation: reducedMotion ? 'none' : `uipkge-border-beam ${duration}s linear infinite ${delay}s`,\n          animationPlayState: !reducedMotion && paused ? 'paused' : undefined,\n          WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n          WebkitMaskComposite: 'xor',\n          mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n          maskComposite: 'exclude',\n          ...style,\n        }}\n        {...props}\n      />\n    )\n  },\n)\nBorderBeam.displayName = 'BorderBeam'\n\nexport { BorderBeam }\n",
      "type": "registry:ui",
      "target": "~/components/ui/border-beam/BorderBeam.tsx"
    },
    {
      "path": "packages/registry-react/components/border-beam/index.ts",
      "content": "export { BorderBeam, type BorderBeamProps } from './BorderBeam'\n",
      "type": "registry:ui",
      "target": "~/components/ui/border-beam/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Rotating conic light beam that traces the border ring of its parent. Place inside a `relative` parent (e.g. a Card); the overlay is absolutely positioned, pointer-events-none, and masked down to a ring of `size` px thickness. Tune `duration`, `delay`, and `color`, or set `paused` to freeze it. Keyframes and the `--uipkge-border-angle` @property ship in the canonical tailwind tokens — re-pull init/tailwind if upgrading.",
  "categories": [
    "feedback",
    "motion"
  ]
}