Skeleton

1import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
2import { cn } from "@/lib/utils";
3 
4/* Role: bordered adaptive glass. */
5const ROLE = {
6  border: true,
7};
8 
9function Skeleton({
10  className,
11  variant = "glass",
12  shimmer = true,
13  ...props
14}: React.HTMLAttributes<HTMLDivElement> &
15  MaterialAxisProps & {
16    variant?: "default" | "glass";
17    /** Moving shimmer highlight (folded from the glass wrapper). */
18    shimmer?: boolean;
19  }) {
20  const [axes, rest] = splitAxisProps(props);
21  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
22  const variants = {
23    default: "bg-muted animate-pulse",
24    glass: "animate-pulse",
25  };
26 
27  const m = materialSurface(variant === "default" ? null : ROLE, axes);
28 
29  return (
30    <div
31      data-slot="skeleton"
32      data-material={m?.["data-material"]}
33      className={cn(
34        m?.className,
35        "rounded-md",
36        variants[variant],
37        shimmer &&
38          "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent before:animate-[shimmer_2s_infinite]",
39        className,
40      )}
41      {...rest}
42    />
43  );
44}
45 
46export { Skeleton };