Spinner

1'use client'
2 
3import * as React from 'react'
4import { cn } from '@/lib/utils'
5 
6const theme = {
7  size: {
8    xs: 'h-3 w-3',
9    sm: 'h-4 w-4',
10    md: 'h-6 w-6',
11    lg: 'h-8 w-8',
12    xl: 'h-10 w-10',
13  },
14  color: {
15    primary: 'fill-primary-800 text-grey-400',
16    accent: 'fill-accent-600 text-grey-400',
17    white: 'fill-white text-white/30',
18    // Inherit the surrounding text colour (e.g. inside a Button, where the
19    // text colour varies per variant/colour). The arc uses currentColor at
20    // full strength; the track is the same colour dimmed via opacity on the
21    // first <path>, so the two-tone effect works from a single hue.
22    current: 'fill-current text-current [&>path:first-child]:opacity-25',
23  },
24}
25 
26type SpinnerProps = {
27  /** Applied to the outer status element, like every other spread prop. */
28  className?: string
29  /** Applied to the inner svg (sizing/colour live there). */
30  svgClassName?: string
31  size?: keyof typeof theme.size
32  color?: keyof typeof theme.color
33  /**
34   * Accessible name announced for the `role="status"` element. Defaults to
35   * "Loading"; pass an empty string to suppress when surrounding content
36   * already conveys the busy state (e.g. inside a Button with a label).
37   */
38  label?: string
39} & React.HTMLAttributes<HTMLSpanElement> & {
40    ref?: React.Ref<HTMLSpanElement>
41  }
42 
43function Spinner({
44  className,
45  svgClassName,
46  size = 'md',
47  color = 'primary',
48  label = 'Loading',
49  ref,
50  ...props
51}: SpinnerProps) {
52  // An empty label suppresses the live region entirely: a `role="status"`
53  // element with no text content is an empty, redundant live region (e.g. when
54  // the Spinner sits inside a Button whose own `aria-busy` conveys the state).
55  // A consumer-supplied `role` in `...props` still wins, as before.
56  const labelled = label !== ''
57  return (
58    <span ref={ref} role={labelled ? 'status' : undefined} className={className} {...props}>
59      <svg
60        fill='none'
61        viewBox='0 0 100 101'
62        aria-hidden='true'
63        className={cn(
64          'inline motion-safe:animate-spin',
65          theme.color[color],
66          theme.size[size],
67          svgClassName,
68        )}
69      >
70        {/* Track — `currentColor` resolves against the `text-*` half of the
71            colour variant. */}
72        <path
73// … truncated