skeleton

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/skeleton/Skeleton.astro directly.
3/**
4 * @component Skeleton
5 * @title Skeleton
6 * @description A loading placeholder component that displays animated pulse effect, commonly used to indicate content is being loaded.
7 * @status stable
8 *
9 * Works great with Astro Server Islands as a fallback for loading content.
10 *
11 * @preview
12 *
13 * <div class="flex items-center gap-4">
14 *   <Skeleton class="h-12 w-12 rounded-full" />
15 *   <div class="space-y-2">
16 *     <Skeleton class="h-4 w-[250px]" />
17 *     <Skeleton class="h-4 w-[200px]" />
18 *   </div>
19 * </div>
20 *
21 * @usage
22 *
23 * ```astro
24 * ---
25 * import { Skeleton } from '@bejamas/ui/components/skeleton';
26 * ---
27 *
28 * <Skeleton class="h-4 w-[250px]" />
29 * ```
30 *
31 * @examples
32 *
33 * ### Avatar
34 *
35 * <div class="flex w-fit items-center gap-4">
36 *   <Skeleton class="size-10 shrink-0 rounded-full" />
37 *   <div class="grid gap-2">
38 *     <Skeleton class="h-4 w-[150px]" />
39 *     <Skeleton class="h-4 w-[100px]" />
40 *   </div>
41 * </div>
42 *
43 * ### Card
44 *
45 * <Card class="w-full max-w-xs">
46 *   <CardHeader>
47 *     <Skeleton class="h-4 w-2/3" />
48 *     <Skeleton class="h-4 w-1/2" />
49 *   </CardHeader>
50 *   <CardContent>
51 *     <Skeleton class="aspect-video w-full" />
52 *   </CardContent>
53 * </Card>
54 *
55 * ### Text
56 *
57 * <div class="flex w-full max-w-xs flex-col gap-2">
58 *   <Skeleton class="h-4 w-full" />
59 *   <Skeleton class="h-4 w-full" />
60 *   <Skeleton class="h-4 w-3/4" />
61 * </div>
62 *
63 * ### Form
64 *
65 * <div class="flex w-full max-w-xs flex-col gap-7">
66 *   <div class="flex flex-col gap-3">
67 *     <Skeleton class="h-4 w-20" />
68 *     <Skeleton class="h-8 w-full" />
69 *   </div>
70 *   <div class="flex flex-col gap-3">
71 *     <Skeleton class="h-4 w-24" />
72 *     <Skeleton class="h-8 w-full" />
73 *   </div>
74 *   <Skeleton class="h-8 w-24" />
75 * </div>
76 *
77 * ### Table
78 *
79 * <div class="flex w-full max-w-sm flex-col gap-2">
80 *   <div class="flex gap-4">
81 *     <Skeleton class="h-4 flex-1" />
82 *     <Skeleton class="h-4 w-24" />
83 *     <Skeleton class="h-4 w-20" />
84 *   </div>
85 *   <div class="flex gap-4">
86 *     <Skeleton class="h-4 flex-1" />
87 *     <Skeleton class="h-4 w-24" />
88 *     <Skeleton class="h-4 w-20" />
89 *   </div>
90 *   <div class="flex gap-4">
91 *     <Skeleton class="h-4 flex-1" />
92 *     <Skeleton class="h-4 w-24" />
93 *     <Skeleton class="h-4 w-20" />
94 *   </div>
95 *   <div class="flex gap-4">
96// … truncated