Spinner

1"use client";
2 
3import "./spinner.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { SpinnerContext } from "./spinner.context";
8import { spinnerVariants, type SpinnerVariants } from "./spinner.variants";
9 
10export type SpinnerProps = SpinnerVariants & React.ComponentProps<"svg">;
11 
12export const SpinnerRoot = ({
13  className,
14  size,
15  variant,
16  ...props
17}: SpinnerProps) => {
18  const slots = spinnerVariants({ size, variant });
19 
20  return (
21    <SpinnerContext.Provider value={{ slots }}>
22      <svg
23        role="status"
24        aria-label="Loading"
25        className={cn(slots.root(), className)}
26        fill="none"
27        viewBox="0 0 24 24"
28        {...props}
29      >
30        <circle
31          className="opacity-25"
32          cx="12"
33          cy="12"
34          r="10"
35          stroke="currentColor"
36          strokeWidth="4"
37        />
38        <path
39          className="opacity-75"
40          fill="currentColor"
41          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
42        />
43      </svg>
44    </SpinnerContext.Provider>
45  );
46};
47 
48export const Spinner = SpinnerRoot;