+type SpinnerSize = "sm" | "md" | "lg";

+type SpinnerTone = "primary" | "inverse" | "muted";

+

+const SIZE_CLASSES: Record<SpinnerSize, string> = {

+  sm: "size-4 border-2",

+  md: "size-6 border-2",

+  lg: "size-8 border-4",

+};

+

+const TONE_CLASSES: Record<SpinnerTone, string> = {

+  primary: "text-primary",

+  inverse: "text-on-primary",

+  muted: "text-foreground-subtle",

+};

+

+interface SpinnerProps {

+  size?: SpinnerSize;

+  tone?: SpinnerTone;

+  /** 스크린리더 전용 안내 문구. 기본 '불러오는 중'. */

+  label?: string;

+}

+

+/** 로딩 인디케이터. 상태 없는 프레젠테이션 컴포넌트 — 표시 여부는 호출부 책임. */

+export function Spinner({

+  size = "md",

+  tone = "primary",

+  label = "불러오는 중",

+}: SpinnerProps) {

+  return (

+    <span role="status" className="inline-flex items-center">

+      <span

+        aria-hidden="true"

+        className={`inline-block animate-spin rounded-full border-current border-t-transparent ${SIZE_CLASSES[size]} ${TONE_CLASSES[tone]}`}

+      />

+      <span className="sr-only">{label}</span>

+    </span>

+  );

+}