"use client";
import * as React from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

const sizes = { sm: "size-1.5 gap-1", md: "size-2.5 gap-1.5", lg: "size-3.5 gap-2" } as const;

/** Three clay dots that hop in sequence. Uses currentColor. */
export function Spinner({
  className,
  size = "md",
  ...p
}: React.HTMLAttributes<HTMLSpanElement> & { size?: keyof typeof sizes }) {
  const reduce = useReducedMotion();
  const [dot, gap] = sizes[size].split(" ");
  return (
    <span role="status" aria-label="Loading" className={cn("inline-flex items-center text-primary", gap, className)} {...p}>
      {[0, 1, 2].map((i) => (
        <motion.span
          key={i}
          className={cn("rounded-full bg-current shadow-[inset_-1px_-2px_0_var(--clay-lo),inset_1px_1px_0_var(--clay-hi)]", dot)}
          animate={reduce ? { opacity: [0.4, 1, 0.4] } : { y: ["0%", "-90%", "0%"], scaleY: [1, 1.1, 0.85, 1] }}
          transition={{ duration: 0.7, repeat: Infinity, delay: i * 0.12, ease: "easeInOut" }}
        />
      ))}
    </span>
  );
}
Installation
