{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dash-button",
  "title": "Dash Button",
  "description": "A pill button whose fill gives way to a dashed outline that marches on hover.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "@corsair-ui/utils",
    "@corsair-ui/button"
  ],
  "files": [
    {
      "path": "registry/default/ui/dash-button.tsx",
      "content": "import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type { ComponentProps, CSSProperties } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\ninterface DashButtonProps extends ComponentProps<\"button\"> {\n  size?: \"sm\" | \"default\" | \"lg\";\n  /** Render the single child element (a link, for example) with these styles instead. */\n  asChild?: boolean;\n  /** Colour of the dashed outline. Defaults to the muted foreground. */\n  dashColor?: string;\n}\n\n/**\n * A pill button that trades its fill for a dashed outline on hover and\n * keyboard focus, with the dashes marching around it. The outline is one\n * SVG rectangle whose corners SVG rounds to the pill for any width, so\n * nothing is measured. The dashes hold still with `prefers-reduced-motion`\n * and stay paused while the button is at rest.\n *\n * @example\n * <DashButton>Plot a course</DashButton>\n */\nfunction DashButton({\n  size = \"default\",\n  asChild = false,\n  dashColor,\n  className,\n  children,\n  style,\n  ...props\n}: DashButtonProps) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"dash-button\"\n      className={cn(\n        buttonVariants({ variant: \"secondary\", size }),\n        \"group/dash relative isolate rounded-full hover:bg-transparent focus-visible:bg-transparent\",\n        className\n      )}\n      style={{ ...(dashColor ? ({ \"--dash-color\": dashColor } as CSSProperties) : null), ...style }}\n      {...props}\n    >\n      <svg\n        aria-hidden=\"true\"\n        data-slot=\"dash-button-outline\"\n        className=\"pointer-events-none absolute inset-0 -z-10 size-full overflow-visible text-[color:var(--dash-color,var(--muted-foreground))] opacity-0 transition-opacity duration-200 group-hover/dash:opacity-100 group-focus-visible/dash:opacity-100 motion-reduce:transition-none\"\n      >\n        {/* SVG clamps rx to half the height, so a large one always draws a pill. */}\n        <rect\n          width=\"100%\"\n          height=\"100%\"\n          rx=\"9999\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeDasharray=\"5 3\"\n          className=\"motion-safe:animate-dash-march [animation-play-state:paused] group-hover/dash:[animation-play-state:running] group-focus-visible/dash:[animation-play-state:running]\"\n        />\n      </svg>\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n}\n\nexport { DashButton, type DashButtonProps };\n",
      "type": "registry:ui"
    }
  ],
  "tailwind": {
    "config": {
      "theme": {
        "extend": {
          "keyframes": {
            "dash-march": {
              "to": {
                "stroke-dashoffset": "-8"
              }
            }
          },
          "animation": {
            "dash-march": "dash-march 0.8s linear infinite"
          }
        }
      }
    }
  },
  "cssVars": {
    "theme": {
      "animate-dash-march": "dash-march 0.8s linear infinite"
    }
  },
  "css": {
    "@keyframes dash-march": {
      "to": {
        "stroke-dashoffset": "-8"
      }
    }
  },
  "type": "registry:ui"
}