{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "moving-border",
  "title": "Moving Border",
  "description": "A light laps the button's border via offset-path.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/moving-border.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface MovingBorderProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Seconds for one lap of the border */\n  duration?: number;\n  /** Length of the travelling light, in px */\n  size?: number;\n  /** Corner radius of the border path, in px */\n  radius?: number;\n  children: React.ReactNode;\n}\n\n/**\n * Button with a light that laps its border, driven by `offset-path`.\n * Zero dependencies — one keyframe does the whole thing.\n */\nexport function MovingBorder({\n  duration = 4,\n  size = 90,\n  radius = 12,\n  children,\n  className,\n  style,\n  ...props\n}: MovingBorderProps) {\n  return (\n    <button\n      {...props}\n      data-slot=\"moving-border\"\n      style={\n        {\n          \"--mb-duration\": `${duration}s`,\n          \"--mb-size\": `${size}px`,\n          \"--mb-radius\": `${radius}px`,\n          borderRadius: radius,\n          ...style,\n        } as React.CSSProperties\n      }\n      className={cn(\n        \"relative inline-flex h-11 cursor-pointer items-center justify-center overflow-hidden bg-background p-px text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n    >\n      {/* Under reduced motion the light is replaced by a static glow on two\n          opposite corners, showing through the same 1px gap. */}\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 motion-reduce:bg-[linear-gradient(135deg,var(--brand-via),transparent_35%,transparent_65%,var(--brand-via))]\"\n      >\n        <span\n          className=\"absolute aspect-square w-(--mb-size) bg-[radial-gradient(circle,var(--brand-via),transparent_65%)] motion-safe:animate-moving-border motion-reduce:hidden\"\n          style={{\n            offsetPath: `rect(0 auto auto 0 round var(--mb-radius))`,\n          }}\n        />\n      </span>\n      <span className=\"relative z-10 flex h-full w-full items-center justify-center rounded-[inherit] border bg-background px-6\">\n        {children}\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/moving-border.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)",
      "animate-moving-border": "moving-border var(--mb-duration, 4s) linear infinite"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "css": {
    "@keyframes moving-border": {
      "from": {
        "offset-distance": "0%"
      },
      "to": {
        "offset-distance": "100%"
      }
    }
  },
  "type": "registry:ui"
}