Skeleton

1"use client";
2 
3import "./skeleton.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { SkeletonContext, useSkeletonContext } from "./skeleton.context";
8import { skeletonVariants, type SkeletonVariants } from "./skeleton.variants";
9 
10export type SkeletonProps = SkeletonVariants & React.HTMLAttributes<HTMLDivElement>;
11 
12export const SkeletonRoot = ({
13  children,
14  className,
15  variant,
16  animation,
17  shape,
18  size,
19  ...props
20}: SkeletonProps) => {
21  const slots = skeletonVariants({ variant, animation, shape, size });
22 
23  return (
24    <SkeletonContext.Provider value={{ slots }}>
25      <div className={cn(slots.root(), className)} {...props}>
26        {children}
27      </div>
28    </SkeletonContext.Provider>
29  );
30};
31 
32export const Skeleton = SkeletonRoot;
33 
34export type SkeletonTextProps = SkeletonProps & {
35  lines?: number;
36  lastLineWidth?: string;
37  gap?: string;
38};
39 
40export const SkeletonText = ({
41  lines = 3,
42  lastLineWidth = "60%",
43  className,
44  variant,
45  animation,
46  shape = "rounded",
47  size = "sm",
48  ...props
49}: SkeletonTextProps) => {
50  const { slots } = useSkeletonContext();
51 
52  return (
53    <div className={cn(slots.text(), className)} {...props}>
54      {Array.from({ length: lines }).map((_, index) => (
55        <SkeletonRoot
56          key={index}
57          variant={variant}
58          animation={animation}
59          shape={shape}
60          size={size}
61          style={index === lines - 1 && lastLineWidth ? { width: lastLineWidth } : undefined}
62          className="w-full"
63        />
64      ))}
65    </div>
66  );
67};
68 
69export type SkeletonAvatarProps = SkeletonProps;
70 
71export const SkeletonAvatar = ({
72  className,
73  variant,
74  animation,
75  shape = "circle",
76  size = "md",
77  ...props
78}: SkeletonAvatarProps) => {
79  const sizeClasses = {
80    xs: "h-6 w-6",
81    sm: "h-8 w-8",
82    md: "h-10 w-10",
83    lg: "h-12 w-12",
84    xl: "h-16 w-16",
85  };
86 
87  const chosenSizeClass = sizeClasses[size as keyof typeof sizeClasses] || "h-10 w-10";
88 
89  return (
90    <SkeletonRoot
91      variant={variant}
92      animation={animation}
93      shape={shape}
94      className={cn(chosenSizeClass, "shrink-0", className)}
95      {...props}
96    />
97  );
98};
99 
100export type SkeletonButtonProps = SkeletonProps;
101 
102export const SkeletonButton = ({
103  className,
104  variant,
105  animation,
106  shape = "rounded",
107  size = "md",
108  ...props
109}: SkeletonButtonProps) => {
110  const sizeClasses = {
111    xs: "h-7 w-16",
112    sm: "h-8 w-20",
113    md: "h-10 w-24",
114    lg: "h-11 w-28",
115// … truncated