{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "description": "Loading placeholders sized to the type scale role they stand in for.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/skeleton.tsx",
      "content": "import { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { skeletonVariants } from \"./skeleton-variants\"\nimport type { SkeletonTextRole } from \"./skeleton.types\"\n\ntype SkeletonProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof skeletonVariants> & {\n    /**\n     * Size the skeleton to a line of a given type role, so a stand-in for\n     * body-large text is exactly as tall as the text will be. Taking the\n     * height from the role's own line box is what keeps the two from drifting\n     * when the type scale changes — including when it steps down on a narrow\n     * window.\n     */\n    text?: SkeletonTextRole\n  }\n\nfunction Skeleton({ className, shape, style, text, ...props }: SkeletonProps) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      data-shape={shape ?? \"rounded\"}\n      // A skeleton is a placeholder for content that is not there yet; there is\n      // nothing for a screen reader to announce, and announcing \"loading\" once\n      // per placeholder would be worse than silence. The region that owns the\n      // load is where `aria-busy` belongs.\n      aria-hidden\n      className={cn(skeletonVariants({ shape }), text && \"w-full\", className)}\n      style={text ? { height: `var(--m3-${text}-line)`, ...style } : style}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton, skeletonVariants }\nexport type { SkeletonProps }\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/skeleton-variants.ts",
      "content": "/**\n * Variant definitions live beside the component rather than inside it — see\n * badge-variants.ts for why (React Fast Refresh boundaries).\n */\n\nimport { cva } from \"class-variance-authority\"\n\n/**\n * The pulse stops under `prefers-reduced-motion`, matching how every other\n * animation in the library collapses. A skeleton is the one place where that\n * is easy to forget: the animation is decorative, but it is also the only\n * signal that the screen is still loading rather than broken — so the shape\n * stays, only the movement goes.\n */\nexport const skeletonVariants = cva(\n  \"block shrink-0 bg-m3-surface-container-highest animate-pulse motion-reduce:animate-none\",\n  {\n    variants: {\n      /**\n       * The library's shape steps, not a free-form radius. A skeleton whose\n       * corners do not match the component it stands in for is a visible jump\n       * at the moment the content arrives, which is the whole thing a skeleton\n       * exists to avoid.\n       */\n      shape: {\n        square: \"rounded-m3-none\",\n        rounded: \"rounded-m3-sm\",\n        large: \"rounded-m3-lg\",\n        extraLarge: \"rounded-m3-xl\",\n        /** For avatars and icon buttons — pair with a `size-*` utility. */\n        circle: \"rounded-m3-full aspect-square\",\n        /** For chips, pill buttons, and FABs. */\n        pill: \"rounded-m3-full\",\n      },\n    },\n    defaultVariants: {\n      shape: \"rounded\",\n    },\n  }\n)\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/skeleton.types.ts",
      "content": "/** The type roles a skeleton can size itself to. Mirrors the M3 type scale. */\nexport type SkeletonTextRole =\n  | `display-${\"lg\" | \"md\" | \"sm\"}`\n  | `headline-${\"lg\" | \"md\" | \"sm\"}`\n  | `title-${\"lg\" | \"md\" | \"sm\"}`\n  | `body-${\"lg\" | \"md\" | \"sm\"}`\n  | `label-${\"lg\" | \"md\" | \"sm\"}`\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}