Flow Button

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5import { cn } from "@/lib/utils";
6 
7type SizeVariant = "sm" | "default" | "lg";
8 
9interface FlowButtonProps
10  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
11  children: React.ReactNode;
12  size?: SizeVariant;
13  borderColor?: string;
14  className?: string;
15  asChild?: boolean;
16}
17 
18const sizeMap: Record<SizeVariant, string> = {
19  sm: "h-8 rounded-full gap-1.5 px-3 text-sm",
20  default: "h-9 px-4 py-2 text-sm rounded-full",
21  lg: "h-10 rounded-full px-6 text-sm",
22};
23 
24const borderRadiusMap: Record<SizeVariant, number> = {
25  sm: 16,
26  default: 18,
27  lg: 20,
28};
29 
30const FlowButton = React.forwardRef<
31  HTMLButtonElement,
32  FlowButtonProps
33>(
34  (
35    {
36      children,
37      size = "default",
38      borderColor = "var(--rotating-border-color)",
39      className,
40      asChild = false,
41      ...props
42    },
43    ref,
44  ) => {
45    const buttonRef = React.useRef<HTMLButtonElement>(null);
46    const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
47 
48    React.useImperativeHandle(ref, () => buttonRef.current!);
49 
50    const Comp = asChild ? Slot : "button";
51 
52    React.useEffect(() => {
53      if (buttonRef.current) {
54        const { offsetWidth, offsetHeight } = buttonRef.current;
55        setDimensions({ width: offsetWidth, height: offsetHeight });
56      }
57    }, [children]);
58 
59    const buttonSize = sizeMap[size];
60    const radius = borderRadiusMap[size];
61 
62    const createRoundedRectPath = (w: number, h: number, r: number) => {
63      return `M${r},0.5 H${w - r} A${r},${r} 0 0 1 ${w - 0.5},${r} V${
64        h - r
65      } A${r},${r} 0 0 1 ${w - r},${h - 0.5} H${r} A${r},${r} 0 0 1 0.5,${
66        h - r
67      } V${r} A${r},${r} 0 0 1 ${r},0.5 Z`;
68    };
69 
70    return (
71      <>
72        <style>
73          {`
74            @keyframes dash-flow {
75              to {
76                stroke-dashoffset: -10;
77              }
78            }
79          `}
80        </style>
81        <div className="relative inline-block group pointer-events-none">
82          <div
83            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"
84            style={{ borderRadius: `${radius}px` }}
85          >
86            <svg
87              width={dimensions.width}
88              height={dimensions.height}
89              viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
90              aria-hidden="true"
91// … truncated