{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "files": [
    {
      "path": "ui/skeleton/Skeleton.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/skeleton/Skeleton.astro directly.\n/**\n * @component Skeleton\n * @title Skeleton\n * @description A loading placeholder component that displays animated pulse effect, commonly used to indicate content is being loaded.\n * @status stable\n *\n * Works great with Astro Server Islands as a fallback for loading content.\n *\n * @preview\n *\n * <div class=\"flex items-center gap-4\">\n *   <Skeleton class=\"h-12 w-12 rounded-full\" />\n *   <div class=\"space-y-2\">\n *     <Skeleton class=\"h-4 w-[250px]\" />\n *     <Skeleton class=\"h-4 w-[200px]\" />\n *   </div>\n * </div>\n *\n * @usage\n *\n * ```astro\n * ---\n * import { Skeleton } from '@bejamas/ui/components/skeleton';\n * ---\n *\n * <Skeleton class=\"h-4 w-[250px]\" />\n * ```\n *\n * @examples\n *\n * ### Avatar\n *\n * <div class=\"flex w-fit items-center gap-4\">\n *   <Skeleton class=\"size-10 shrink-0 rounded-full\" />\n *   <div class=\"grid gap-2\">\n *     <Skeleton class=\"h-4 w-[150px]\" />\n *     <Skeleton class=\"h-4 w-[100px]\" />\n *   </div>\n * </div>\n *\n * ### Card\n *\n * <Card class=\"w-full max-w-xs\">\n *   <CardHeader>\n *     <Skeleton class=\"h-4 w-2/3\" />\n *     <Skeleton class=\"h-4 w-1/2\" />\n *   </CardHeader>\n *   <CardContent>\n *     <Skeleton class=\"aspect-video w-full\" />\n *   </CardContent>\n * </Card>\n *\n * ### Text\n *\n * <div class=\"flex w-full max-w-xs flex-col gap-2\">\n *   <Skeleton class=\"h-4 w-full\" />\n *   <Skeleton class=\"h-4 w-full\" />\n *   <Skeleton class=\"h-4 w-3/4\" />\n * </div>\n *\n * ### Form\n *\n * <div class=\"flex w-full max-w-xs flex-col gap-7\">\n *   <div class=\"flex flex-col gap-3\">\n *     <Skeleton class=\"h-4 w-20\" />\n *     <Skeleton class=\"h-8 w-full\" />\n *   </div>\n *   <div class=\"flex flex-col gap-3\">\n *     <Skeleton class=\"h-4 w-24\" />\n *     <Skeleton class=\"h-8 w-full\" />\n *   </div>\n *   <Skeleton class=\"h-8 w-24\" />\n * </div>\n *\n * ### Table\n *\n * <div class=\"flex w-full max-w-sm flex-col gap-2\">\n *   <div class=\"flex gap-4\">\n *     <Skeleton class=\"h-4 flex-1\" />\n *     <Skeleton class=\"h-4 w-24\" />\n *     <Skeleton class=\"h-4 w-20\" />\n *   </div>\n *   <div class=\"flex gap-4\">\n *     <Skeleton class=\"h-4 flex-1\" />\n *     <Skeleton class=\"h-4 w-24\" />\n *     <Skeleton class=\"h-4 w-20\" />\n *   </div>\n *   <div class=\"flex gap-4\">\n *     <Skeleton class=\"h-4 flex-1\" />\n *     <Skeleton class=\"h-4 w-24\" />\n *     <Skeleton class=\"h-4 w-20\" />\n *   </div>\n *   <div class=\"flex gap-4\">\n *     <Skeleton class=\"h-4 flex-1\" />\n *     <Skeleton class=\"h-4 w-24\" />\n *     <Skeleton class=\"h-4 w-20\" />\n *   </div>\n *   <div class=\"flex gap-4\">\n *     <Skeleton class=\"h-4 flex-1\" />\n *     <Skeleton class=\"h-4 w-24\" />\n *     <Skeleton class=\"h-4 w-20\" />\n *   </div>\n * </div>\n *\n * @props\n * - class?: string — Additional classes for styling.\n */\n\nimport { cn } from \"@/lib/utils\";\n\nconst { class: className = \"\", ...props } = Astro.props;\n---\n\n<div\n  data-slot=\"skeleton\"\n  class={cn(\"bg-muted rounded-md animate-pulse\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/skeleton/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/skeleton/index.ts directly.\nexport { default as Skeleton } from \"./Skeleton.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}