{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flow-button",
  "title": "Flow Button",
  "description": "A button with animated flowing dashed border on hover.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/flow-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@/lib/utils\";\n\ntype SizeVariant = \"sm\" | \"default\" | \"lg\";\n\ninterface FlowButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  size?: SizeVariant;\n  borderColor?: string;\n  className?: string;\n  asChild?: boolean;\n}\n\nconst sizeMap: Record<SizeVariant, string> = {\n  sm: \"h-8 rounded-full gap-1.5 px-3 text-sm\",\n  default: \"h-9 px-4 py-2 text-sm rounded-full\",\n  lg: \"h-10 rounded-full px-6 text-sm\",\n};\n\nconst borderRadiusMap: Record<SizeVariant, number> = {\n  sm: 16,\n  default: 18,\n  lg: 20,\n};\n\nconst FlowButton = React.forwardRef<\n  HTMLButtonElement,\n  FlowButtonProps\n>(\n  (\n    {\n      children,\n      size = \"default\",\n      borderColor = \"var(--rotating-border-color)\",\n      className,\n      asChild = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });\n\n    React.useImperativeHandle(ref, () => buttonRef.current!);\n\n    const Comp = asChild ? Slot : \"button\";\n\n    React.useEffect(() => {\n      if (buttonRef.current) {\n        const { offsetWidth, offsetHeight } = buttonRef.current;\n        setDimensions({ width: offsetWidth, height: offsetHeight });\n      }\n    }, [children]);\n\n    const buttonSize = sizeMap[size];\n    const radius = borderRadiusMap[size];\n\n    const createRoundedRectPath = (w: number, h: number, r: number) => {\n      return `M${r},0.5 H${w - r} A${r},${r} 0 0 1 ${w - 0.5},${r} V${\n        h - r\n      } A${r},${r} 0 0 1 ${w - r},${h - 0.5} H${r} A${r},${r} 0 0 1 0.5,${\n        h - r\n      } V${r} A${r},${r} 0 0 1 ${r},0.5 Z`;\n    };\n\n    return (\n      <>\n        <style>\n          {`\n            @keyframes dash-flow {\n              to {\n                stroke-dashoffset: -10;\n              }\n            }\n          `}\n        </style>\n        <div className=\"relative inline-block group pointer-events-none\">\n          <div\n            className=\"absolute inset-[2px] group-hover:inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-all ease-out duration-200 z-10\"\n            style={{ borderRadius: `${radius}px` }}\n          >\n            <svg\n              width={dimensions.width}\n              height={dimensions.height}\n              viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}\n              aria-hidden=\"true\"\n              preserveAspectRatio=\"none\"\n              className=\"absolute top-0 left-0 w-full h-full pointer-events-none\"\n            >\n              <path\n                d={createRoundedRectPath(\n                  dimensions.width,\n                  dimensions.height,\n                  radius,\n                )}\n                fill=\"none\"\n                stroke={borderColor}\n                strokeWidth=\"1\"\n                strokeDasharray=\"6,4\"\n                strokeDashoffset=\"0\"\n                className=\"group-hover:animate-[dash-flow_1s_linear_infinite]\"\n              />\n            </svg>\n          </div>\n          <Comp\n            ref={buttonRef}\n            className={cn(\n              \"relative z-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 pointer-events-auto cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap font-[550] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-neutral-100 dark:bg-muted/50 text-primary dark:hover:bg-transparent hover:bg-transparent\",\n              buttonSize,\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </Comp>\n        </div>\n      </>\n    );\n  },\n);\n\nFlowButton.displayName = \"FlowButton\";\n\nexport { FlowButton };\nexport type { FlowButtonProps };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}