Spinner

1"use client";
2
3import { SVGProps } from "react";
4import { tv, type VariantProps } from "tailwind-variants";
5import { cn } from "@/lib/classes";
6
7interface SpinnerPrimitiveProps extends SVGProps<SVGSVGElement> {}
8
9function SpinnerPrimitive({ className, ...props }: SpinnerPrimitiveProps) {
10  return (
11    <svg
12      xmlns="http://www.w3.org/2000/svg"
13      viewBox="0 0 24 24"
14      className={cn("size-full", className)}
15      {...props}
16    >
17      <path
18        fill="currentColor"
19        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
20        opacity=".25"
21      />
22      <path
23        fill="currentColor"
24        d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
25      >
26        <animateTransform
27          attributeName="transform"
28          dur="7s"
29          repeatCount="indefinite"
30          type="rotate"
31          values="0 12 12;360 12 12"
32        />
33      </path>
34    </svg>
35  );
36}
37
38const spinnerVariants = tv({
39  base: `pointer-events-none relative size-6 inline-block animate-spin animation-duration-[0.75s] text-current`,
40  variants: {
41    size: {
42      sm: `size-4`,
43      md: `size-6`,
44      lg: `size-8`,
45      xl: `size-10`,
46    },
47  },
48  defaultVariants: {
49    size: `md`,
50  },
51});
52
53interface SpinnerRootProps
54  extends Omit<React.ComponentProps<"svg">, "display" | "opacity" | "color">,
55    VariantProps<typeof spinnerVariants> {}
56
57function Spinner({ size = "md", ...props }: SpinnerRootProps) {
58  return (
59    <span
60      data-slot="spinner"
61      className={cn(
62        "in-data-[slot='toast-content']:size-5!",
63        spinnerVariants({
64          size,
65        })
66      )}
67    >
68      <SpinnerPrimitive
69        aria-hidden
70        aria-label="Loading"
71        role="presentation"
72        {...props}
73      />
74    </span>
75  );
76}
77
78export { Spinner };