{
  "name": "Skeleton",
  "type": "component",
  "description": "Loading placeholder with a token-driven shimmer sweep.",
  "export": "Skeleton",
  "path": "@gtmi/strix-react/atoms/skeleton",
  "figma": null,
  "figmaAbsent": "shadcn loading placeholder. Figma draws no skeleton — `Phone-loading-text` draws a Spinner arc.",
  "props": [
    {
      "name": "shape",
      "type": "circular | rectangular",
      "default": "rectangular",
      "description": "circular is perfectly round and uses `width` as its diameter, ignoring `height` and `rounded`."
    },
    {
      "name": "rounded",
      "type": "sm | md | lg",
      "default": "sm",
      "description": "Corner radius. Ignored when shape is circular."
    },
    {
      "name": "width",
      "type": "number",
      "description": "Width in pixels. Defaults to filling the container."
    },
    {
      "name": "height",
      "type": "number",
      "description": "Height in pixels. Defaults to filling the container. Ignored when circular."
    },
    {
      "name": "icon",
      "type": "ReactNode",
      "description": "Optional icon centered inside the placeholder. Expects a 24x24 SVG."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn()."
    }
  ],
  "ai_tags": ["skeleton", "loading", "placeholder", "shimmer", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-border-skeleton",
    "--color-surface-skeleton",
    "--color-icon-skeleton",
    "--gradients-skeleton-loader",
    "--animate-skeleton-shimmer"
  ],
  "notes": "Always aria-hidden: announce the loading state once from the region that owns it, not once per placeholder. The shimmer is an ::after sweep of --gradients-skeleton-loader driven by --animate-skeleton-shimmer; that animation token and its keyframes were added in Strix, because maker-ds referenced the utility without ever declaring it."
}