Spinner

1import { cva, type VariantProps } from 'class-variance-authority';
2import { ComponentProps } from 'react';
3 
4import { Label2 } from '@/components/ui/typography';
5import { cn } from '@/lib/utils';
6 
7/* UX4G spinner: border-width 0.3em, size 2rem, animation 0.75s, sm size 1rem, sm border 0.2em */
8const SPINNER_VARIANTS = cva('inline-block rounded-full align-[-0.125em]', {
9  variants: {
10    theme: {
11      primary: 'text-primary',
12      secondary: 'text-secondary',
13      success: 'text-success',
14      danger: 'text-danger',
15      warning: 'text-warning',
16      info: 'text-info',
17      light: 'text-neutral-100',
18      dark: 'text-neutral-800',
19      neutral: 'text-neutral',
20    },
21    variant: {
22      border: 'animate-spin border-[0.3em] border-current border-r-transparent',
23      grow: 'bg-current [animation:spinner-grow_0.75s_linear_infinite]',
24    },
25    size: {
26      sm: 'size-4',
27      md: 'size-8',
28      lg: 'size-12',
29    },
30  },
31  compoundVariants: [{ variant: 'border', size: 'sm', className: 'border-[0.2em]' }],
32  defaultVariants: {
33    theme: 'primary',
34    variant: 'border',
35    size: 'md',
36  },
37});
38 
39interface ISpinnerProps
40  extends Omit<ComponentProps<'div'>, 'children'>,
41    VariantProps<typeof SPINNER_VARIANTS> {
42  label?: string;
43}
44 
45/**
46 * A loading spinner component for indicating async operations.
47 * Matches the UX4G 2.0 Spinner specification.
48 *
49 * Supports:
50 * - Theme colors: primary, secondary, success, danger, warning, info, light, dark, neutral
51 * - Animation variants: border (spin) or grow (pulse)
52 * - Three sizes: sm (1rem), md (2rem), lg (3rem)
53 * - Accessible with screen reader label
54 */
55function Spinner({
56  className,
57  theme,
58  variant,
59  size,
60  label = 'Loading...',
61  ...props
62}: ISpinnerProps) {
63  return (
64    <div
65      role='status'
66      className={cn(SPINNER_VARIANTS({ theme, variant, size, className }))}
67      {...props}
68    >
69      <Label2 className='sr-only'>{label}</Label2>
70    </div>
71  );
72}
73 
74export { Spinner, SPINNER_VARIANTS };