{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam",
  "type": "registry:component",
  "title": "Border Beam",
  "description": "Animated accent beam that travels around the border of a highlighted surface.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/border-beam/border-beam.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type BorderBeamProps = React.ComponentPropsWithoutRef<\"span\"> & {\n  borderWidth?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n  duration?: number;\n  reverse?: boolean;\n};\n\nexport const BorderBeam = React.forwardRef<HTMLSpanElement, BorderBeamProps>(\n  (\n    {\n      borderWidth = 1,\n      className,\n      colorFrom = \"hsl(var(--primary) / 0.85)\",\n      colorTo = \"hsl(var(--ring) / 0.25)\",\n      delay = 0,\n      duration = 6,\n      reverse = false,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const beamStyle: React.CSSProperties = {\n      animationDelay: `${delay}s`,\n      animationDirection: reverse ? \"reverse\" : \"normal\",\n      animationDuration: `${duration}s`,\n      animationIterationCount: \"infinite\",\n      animationName: \"vllnt-border-beam-angle\",\n      animationTimingFunction: \"linear\",\n      background: `conic-gradient(from var(--vllnt-border-beam-angle, 90deg), transparent 0deg, transparent 220deg, ${colorFrom} 280deg, ${colorTo} 335deg, transparent 360deg)`,\n      borderRadius: \"inherit\",\n      boxSizing: \"border-box\",\n      mask: \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n      maskComposite: \"exclude\",\n      padding: `${borderWidth}px`,\n      WebkitMask:\n        \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n      WebkitMaskComposite: \"xor\",\n      ...style,\n    };\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 rounded-[inherit]\",\n          className,\n        )}\n        ref={ref}\n        style={beamStyle}\n        {...props}\n      />\n    );\n  },\n);\n\nBorderBeam.displayName = \"BorderBeam\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}