Button

1"use client";
2 
3import { Button as ButtonPrimitive } from "@base-ui/react/button";
4import { cva, type VariantProps } from "class-variance-authority";
5 
6import { cn } from "@/lib/utils";
7import styles from "./button.module.css";
8 
9const buttonVariants = cva(styles.base, {
10  variants: {
11    variant: {
12      primary: styles.primary,
13      secondary: styles.secondary,
14      destructive: styles.destructive,
15      ghost: styles.ghost,
16      outline: styles.outline,
17      link: styles.link,
18    },
19    size: {
20      sm: styles.sm,
21      md: styles.md,
22      lg: styles.lg,
23      icon: styles.icon,
24    },
25  },
26  defaultVariants: {
27    variant: "primary",
28    size: "md",
29  },
30});
31 
32function Spinner() {
33  return (
34    <svg className={styles.spinner} fill="none" height="16" viewBox="0 0 24 24" width="16">
35      <circle
36        cx="12"
37        cy="12"
38        r="10"
39        stroke="currentColor"
40        strokeDasharray="31.416"
41        strokeDashoffset="31.416"
42        strokeLinecap="round"
43        strokeWidth="2"
44      />
45    </svg>
46  );
47}
48 
49function ArrowPointer({ pointLeft = false, pointExternal = false }: { pointLeft?: boolean; pointExternal?: boolean }) {
50  return (
51    <svg
52      className={cn(styles.arrow, pointLeft && styles.arrowLeft, pointExternal && styles.arrowExternal)}
53      data-slot="arrow"
54      fill="none"
55      viewBox="0 0 14 10"
56      xmlns="http://www.w3.org/2000/svg"
57    >
58      <g>
59        <path
60          className={styles.arrowPoint}
61          d={pointLeft ? "M14.8 1l-4 4 4 4" : "M-0.8 1l4 4-4 4"}
62          fill="none"
63          stroke="currentColor"
64          strokeLinecap="square"
65          strokeLinejoin="miter"
66          strokeWidth="2"
67        />
68        <path
69          className={styles.arrowShaft}
70          d={pointLeft ? "M14.8 5H9.8" : "M0 5h4.8"}
71          fill="none"
72          stroke="currentColor"
73          strokeLinecap="square"
74          strokeLinejoin="miter"
75          strokeWidth="2"
76        />
77      </g>
78    </svg>
79  );
80}
81 
82function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
83  return <ButtonPrimitive className={cn(buttonVariants({ variant, size, className }))} data-slot="button" {...props} />;
84}
85 
86export { Button, buttonVariants, Spinner, ArrowPointer };