{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shine-border",
  "title": "Shine Border",
  "description": "Wrapper that draws an animated gradient border around its content.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/shine-border/shine-border.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link ShineBorder}. */\nexport type ShineBorderProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Border thickness in pixels. Defaults to `1`. */\n  borderWidth?: number;\n  /** Seconds for one full revolution of the lit border. Defaults to `8`. */\n  duration?: number;\n};\n\n/**\n * Wrapper that lights its full perimeter with a revolving gradient border.\n *\n * Respects `prefers-reduced-motion`: the lit border stays still.\n *\n * @example\n * ```tsx\n * <ShineBorder className=\"rounded-xl bg-card p-6\">Featured</ShineBorder>\n * ```\n */\nexport const ShineBorder = ({\n  borderWidth = 1,\n  children,\n  className,\n  duration = 8,\n  ref,\n  ...props\n}: ShineBorderProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const borderStyle: React.CSSProperties = {\n    animationDuration: `${duration}s`,\n    animationIterationCount: \"infinite\",\n    animationName: \"vllnt-border-beam-angle\",\n    animationTimingFunction: \"linear\",\n    background:\n      \"conic-gradient(from var(--vllnt-border-beam-angle, 90deg), oklch(var(--primary) / 0.8), oklch(var(--ring) / 0.3), oklch(var(--primary) / 0.8))\",\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  };\n\n  return (\n    <div className={cn(\"relative\", className)} ref={ref} {...props}>\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 rounded-[inherit] motion-reduce:animate-none\"\n        style={borderStyle}\n      />\n      {children}\n    </div>\n  );\n};\nShineBorder.displayName = \"ShineBorder\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}