{
  "name": "Skeleton",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/Skeleton.tsx",
  "chapterTag": "08 Feedback & Overlays",
  "chapter": "09-feedback-and-overlays.html",
  "sectionId": "skeleton",
  "elName": "Skeleton",
  "demoUrl": "https://brand.magicblocks.ai/components/09-feedback-and-overlays#skeleton",
  "hasLiveDemo": false,
  "description": "One shimmer block — the base loading placeholder. Wraps `.skel`\n(+ `.skel-r-{md|pill|full}`). Aria-hidden; compose into shaped fallbacks.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "Skeleton",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SkeletonText",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SkeletonAvatar",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SkeletonProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SkeletonTextProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SkeletonAvatarProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { Skeleton } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "width",
      "optional": true,
      "type": "number | string",
      "doc": "number → px; string → CSS length (e.g. \"16rem\"). Omit to size via `className`."
    },
    {
      "name": "height",
      "optional": true,
      "type": "number | string",
      "doc": "number → px; string → CSS length."
    },
    {
      "name": "radius",
      "optional": true,
      "type": "\"sm\" | \"md\" | \"pill\" | \"full\"",
      "doc": "Corner radius. Default `sm` (the base `.skel`)."
    }
  ],
  "classesUsed": [
    "skel",
    "skel-av",
    "skel-line",
    "skel-text"
  ],
  "examples": {
    "react": "<Skeleton width=\"16rem\" height={32} />\n<Skeleton height={12} radius=\"pill\" />",
    "html": "<div class=\"skel\" style=\"width: 16rem; height: 32px;\" aria-hidden=\"true\"></div>\n<div class=\"skel skel-r-md\" style=\"width: 12rem; height: 48px;\" aria-hidden=\"true\"></div>\n<div class=\"skel skel-r-pill\" style=\"width: 8rem; height: 20px;\" aria-hidden=\"true\"></div>",
    "css": ".skel {\n  background: linear-gradient(90deg,\n    color-mix(in oklab, var(--fg) 6%, transparent) 0%,\n    color-mix(in oklab, var(--fg) 10%, transparent) 50%,\n    color-mix(in oklab, var(--fg) 6%, transparent) 100%);\n  background-size: 200% 100%;\n  border-radius: var(--r-sm);\n  animation: skel-shimmer 1.8s ease-in-out infinite;\n}\n\n.skel-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }\n\n.skel-line { height: 10px; }\n\n.skel-text { display: flex; flex-direction: column; gap: 8px; }"
  }
}