{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-border-beam",
  "title": "BorderBeam",
  "description": "Brilho que percorre a borda do container pai via offset-path (correto em qualquer proporção), em CSS puro — oculto em prefers-reduced-motion.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@lema-ds/tokens"
  ],
  "files": [
    {
      "path": "components/ds/ds-border-beam.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n// ── Types ──\n\nexport interface BorderBeamProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof borderBeamVariants> {\n  /** Diameter of the beam's glow, in pixels. */\n  size?: number\n}\n\n// ── Variants ──\n\nexport const borderBeamVariants = cva(\n  \"pointer-events-none absolute top-0 left-0 -z-10 aspect-square animate-[border-beam-move_var(--beam-duration)_linear_infinite] rounded-full [offset-anchor:50%_50%] [offset-path:rect(0_auto_auto_0_round_var(--radius))] [offset-rotate:0deg] motion-reduce:hidden\",\n  {\n    variants: {\n      tone: {\n        primary: \"[--beam-color:var(--primary)]\",\n        violet: \"[--beam-color:var(--highlight-violet)]\",\n        sky: \"[--beam-color:var(--highlight-sky)]\",\n      },\n      speed: {\n        slow: \"[--beam-duration:9s]\",\n        normal: \"[--beam-duration:6s]\",\n        fast: \"[--beam-duration:3s]\",\n      },\n    },\n    defaultVariants: { tone: \"primary\", speed: \"normal\" },\n  }\n)\n\n// ── Component ──\n\n/**\n * A small glow that travels around the border of its (relatively\n * positioned, rounded) parent, following the exact rectangle path via\n * `offset-path` — unlike a rotated conic-gradient, this stays correct at\n * any aspect ratio. Sits at `-z-10` so sibling content always paints above\n * it. Pure CSS; hidden under `prefers-reduced-motion`.\n *\n * Usage: place inside a `relative isolate` container that owns the border\n * radius, alongside — not wrapping — the real content, e.g.\n * `<Card className=\"relative isolate overflow-hidden\"><BorderBeam />…real content…</Card>`.\n * The `isolate` matters: without it, `position:relative` alone doesn't\n * establish a stacking context, so this `-z-10` layer can end up compared\n * against ancestors far outside the card instead of staying local to it.\n */\nexport const BorderBeam = React.forwardRef<HTMLDivElement, BorderBeamProps>(\n  (\n    {\n      tone = \"primary\",\n      speed = \"normal\",\n      size = 80,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        data-slot=\"border-beam\"\n        className={cn(borderBeamVariants({ tone, speed }), className)}\n        style={{\n          width: size,\n          background:\n            \"radial-gradient(circle closest-side, var(--beam-color) 0%, color-mix(in oklch, var(--beam-color) 40%, transparent) 55%, transparent 100%)\",\n          ...style,\n        }}\n        {...props}\n      />\n    )\n  }\n)\nBorderBeam.displayName = \"BorderBeam\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}