skeleton

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./skeleton.css"
6 
7const skeletonVariants = cva("skeleton-base", {
8  variants: {
9    shape: {
10      text: "w-full rounded-[var(--layout-radius-sm)]",
11      circle: "rounded-full aspect-square",
12      rect: "w-full rounded-[var(--layout-radius-md)]",
13    },
14    size: {
15      sm: "",
16      md: "",
17      lg: "",
18    },
19    animated: {
20      true: "skeleton-shimmer",
21      false: "",
22    },
23  },
24  compoundVariants: [
25    // text × size
26    { shape: "text", size: "sm", class: "h-[var(--layout-size-2xs)]" },
27    { shape: "text", size: "md", class: "h-[var(--layout-size-xs)]" },
28    { shape: "text", size: "lg", class: "h-[var(--layout-size-base)]" },
29    // circle × size
30    { shape: "circle", size: "sm", class: "size-[var(--layout-size-sm)]" },
31    { shape: "circle", size: "md", class: "size-[var(--layout-size-lg)]" },
32    { shape: "circle", size: "lg", class: "size-[var(--layout-size-xl)]" },
33    // rect × size
34    { shape: "rect", size: "sm", class: "h-[var(--layout-size-sm)]" },
35    { shape: "rect", size: "md", class: "h-[var(--layout-size-lg)]" },
36    { shape: "rect", size: "lg", class: "h-[var(--layout-size-xl)]" },
37  ],
38  defaultVariants: {
39    shape: "rect",
40    size: "md",
41    animated: true,
42  },
43})
44 
45function Skeleton({
46  className,
47  shape,
48  size,
49  animated,
50  ...props
51}: React.ComponentProps<"div"> &
52  VariantProps<typeof skeletonVariants>) {
53  return (
54    <div
55      data-slot="skeleton"
56      aria-hidden="true"
57      className={cn(skeletonVariants({ shape, size, animated, className }))}
58      {...props}
59    />
60  )
61}
62 
63export { Skeleton, skeletonVariants }