Spinner

import { Button } from '@/components/ui/button'
import { Spinner } from '@/components/ui/spinner'
import { DemoRow, DemoStage } from './_kit'

export default function SpinnerDemo() {
  return (
    <DemoStage>
      <DemoRow label="Sizes" description="Inherits currentColor, so it matches its context.">
        <Spinner size="xs" />
        <Spinner size="sm" />
        <Spinner size="md" />
        <Spinner size="lg" />
      </DemoRow>

      <DemoRow label="In context">
        <Spinner size="sm" label="Loading results" className="text-accent" />
        <span className="flex items-center gap-2 text-sm text-ink-muted">
          <Spinner size="sm" />
          Checking availability…
        </span>
        <Button loading loadingLabel="Publishing">
          Publish
        </Button>
      </DemoRow>

      <DemoRow label="On a filled surface">
        <span className="flex items-center gap-2 rounded-md bg-surface-inverse px-3 py-2 text-sm text-ink-inverse">
          <Spinner size="sm" />
          Provisioning
        </span>
      </DemoRow>
    </DemoStage>
  )
}

import { cn } from '@/lib/cn'

/**
 * Spinner
 *
 * A pure-CSS indeterminate indicator. Drawn with a border rather than an SVG
 * so it inherits `currentColor` and costs nothing to render. Under
 * `prefers-reduced-motion` the global reset stops the rotation, leaving a
 * static ring — which is why the accessible label lives on the wrapper.
 */
export interface SpinnerProps {
  size?: 'xs' | 'sm' | 'md' | 'lg'
  className?: string
  /** Omit for decorative use inside an already-labelled control. */
  label?: string
}

const sizeMap = {
  xs: 'size-3 border',
  sm: 'size-4 border-[1.5px]',
  md: 'size-5 border-2',
  lg: 'size-8 border-2',
} as const

export function Spinner({ size = 'md', className, label }: SpinnerProps) {
  return (
    <span
      className={cn('inline-flex items-center justify-center', className)}
      role={label ? 'status' : undefined}
    >
      <span
        className={cn(
          'animate-spin-token rounded-full border-current border-t-transparent opacity-70',
          sizeMap[size],
        )}
        aria-hidden="true"
      />
      {label ? <span className="sr-only">{label}</span> : null}
    </span>
  )
}