Spinner

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
5  size?: "sm" | "md" | "lg";
6}
7 
8const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(({ className, size = "md", ...props }, ref) => {
9  const sizeClasses = {
10    sm: "h-4 w-4 border-2",
11    md: "h-8 w-8 border-2",
12    lg: "h-12 w-12 border-[3px]",
13  };
14 
15  // Spinner should always be visible - use primary color for border
16  // The variant is for styling context, but spinner itself should be clearly visible
17  // Use solid primary color for top border (visible part), transparent for others
18  const borderColor = "border-primary";
19 
20  return (
21    <div
22      ref={ref}
23      role="status"
24      aria-label="Loading"
25      className={cn("inline-block rounded-full animate-spin", sizeClasses[size], borderColor, "border-t-transparent border-r-transparent", className)}
26      {...props}
27    />
28  );
29});
30Spinner.displayName = "Spinner";
31 
32export { Spinner };