{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-trace-button",
  "title": "Border Trace Button",
  "description": "A native button with an animated border trace and reduced-motion fallback.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/border-trace-button.tsx",
      "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * The dash is expressed against pathLength=1, so the same timing works for\n * every button width. React 19 hoists and deduplicates this style by href.\n */\nconst KEYFRAMES = `@keyframes zbt-trace{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}`\n\nexport interface BorderTraceButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Seconds for one lap of the highlight segment. */\n  duration?: number\n}\n\n/**\n * A native button with a token-colored border segment that runs while the\n * control is hovered or keyboard-focused. The base border remains visible\n * when motion is reduced.\n */\nexport const BorderTraceButton = React.forwardRef<HTMLButtonElement, BorderTraceButtonProps>(\n  ({ duration = 1.6, className, children, style, ...props }, ref) => {\n    const safeDuration = Number.isFinite(duration) ? Math.max(0.2, duration) : 1.6\n\n    return (\n      <button\n        className={cn(\n          \"group relative isolate inline-flex items-center justify-center gap-2 overflow-hidden rounded-md\",\n          \"border border-border bg-background px-5 py-2.5 text-sm font-medium text-foreground\",\n          \"transition-colors hover:bg-muted/50 motion-reduce:transition-none\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          className,\n        )}\n        ref={ref}\n        style={{ \"--zbt-duration\": `${safeDuration}s`, ...style } as React.CSSProperties}\n        type=\"button\"\n        {...props}\n      >\n        <style href=\"zyeon-border-trace-button\" precedence=\"medium\">\n          {KEYFRAMES}\n        </style>\n\n        <svg\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n          focusable=\"false\"\n          preserveAspectRatio=\"none\"\n        >\n          <rect\n            className={cn(\n              \"stroke-primary opacity-0 transition-opacity duration-200\",\n              \"group-hover:opacity-100 group-focus-visible:opacity-100\",\n              \"[animation:zbt-trace_var(--zbt-duration)_linear_infinite_paused]\",\n              \"group-hover:[animation-play-state:running] group-focus-visible:[animation-play-state:running]\",\n              \"motion-reduce:hidden\",\n            )}\n            fill=\"none\"\n            height=\"calc(100% - 2px)\"\n            pathLength=\"1\"\n            rx=\"var(--radius-md)\"\n            strokeDasharray=\"0.24 0.76\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"2\"\n            vectorEffect=\"non-scaling-stroke\"\n            width=\"calc(100% - 2px)\"\n            x=\"1\"\n            y=\"1\"\n          />\n        </svg>\n\n        <span className=\"relative z-10 inline-flex items-center gap-2\">{children}</span>\n      </button>\n    )\n  },\n)\n\nBorderTraceButton.displayName = \"BorderTraceButton\"\n\nexport default BorderTraceButton\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}