{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "skeleton",
    "type": "registry:component",
    "title": "Skeleton",
    "description": "Animated placeholder shown while content loads. Shapes are set with data-shape (default, text, circle).",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Feedback",
        "layout": "stack"
    },
    "files": [
        {
            "path": "components/skeleton.html",
            "type": "registry:file",
            "target": "components/skeleton.html",
            "content": "<!-- Skeleton\n     A loading placeholder. Set size inline. Shapes: default, text, circle. -->\n\n<!-- A loading card: avatar, two lines of text and a wider block -->\n<div style=\"display: flex; gap: var(--dp-space-4); align-items: center; max-width: 24rem;\">\n  <span class=\"dp-skeleton\" data-shape=\"circle\" style=\"width: 2.5rem; height: 2.5rem;\"></span>\n  <div style=\"flex: 1; display: flex; flex-direction: column; gap: var(--dp-space-2);\">\n    <span class=\"dp-skeleton\" data-shape=\"text\" style=\"width: 60%;\"></span>\n    <span class=\"dp-skeleton\" data-shape=\"text\" style=\"width: 90%;\"></span>\n  </div>\n</div>\n\n<span class=\"dp-skeleton\" style=\"height: 8rem; max-width: 24rem; border-radius: var(--dp-radius-lg);\"></span>\n"
        },
        {
            "path": "components/skeleton.css",
            "type": "registry:file",
            "target": "components/skeleton.css",
            "content": "/* Skeleton\n   A placeholder shown while content loads. Set width and height inline or with\n   utility classes. Use data-shape=\"circle\" for avatars and data-shape=\"text\"\n   for lines. Colour and motion come from tokens.css. */\n\n.dp-skeleton {\n  display: block;\n  width: 100%;\n  height: 1rem;\n  border-radius: var(--dp-radius-sm);\n  background: linear-gradient(\n    90deg,\n    var(--dp-blue-200) 25%,\n    var(--dp-blue-100) 37%,\n    var(--dp-blue-200) 63%\n  );\n  background-size: 400% 100%;\n  animation: dp-skeleton-shimmer 1.4s ease infinite;\n}\n\n.dp-skeleton[data-shape=\"text\"] {\n  height: 0.75rem;\n  border-radius: var(--dp-radius-xs);\n}\n\n.dp-skeleton[data-shape=\"circle\"] {\n  border-radius: var(--dp-radius-full);\n}\n\n@keyframes dp-skeleton-shimmer {\n  0% { background-position: 100% 50%; }\n  100% { background-position: 0 50%; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dp-skeleton { animation: none; }\n}\n"
        }
    ]
}