| 1 | import { cva, type VariantProps } from "class-variance-authority"; |
| 2 | |
| 3 | import { cn } from "~/lib/utils"; |
| 4 | |
| 5 | // A skeleton's width and height are its content, so consumers size it through |
| 6 | // className (the lint contract allows layout there). Its shape is not. |
| 7 | const skeletonVariants = cva("bg-muted-foreground/15 motion-safe:animate-skeleton", { |
| 8 | variants: { |
| 9 | shape: { |
| 10 | block: "rounded-sm", |
| 11 | card: "rounded-lg", |
| 12 | pill: "rounded-full", |
| 13 | }, |
| 14 | }, |
| 15 | defaultVariants: { shape: "block" }, |
| 16 | }); |
| 17 | |
| 18 | function Skeleton({ |
| 19 | className, |
| 20 | shape, |
| 21 | ...props |
| 22 | }: React.ComponentProps<"div"> & VariantProps<typeof skeletonVariants>) { |
| 23 | return ( |
| 24 | <div className={cn(skeletonVariants({ shape }), className)} data-slot="skeleton" {...props} /> |
| 25 | ); |
| 26 | } |
| 27 | |
| 28 | export { Skeleton }; |