{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "description": "A skeleton component.",
  "files": [
    {
      "path": "registry/default/skeleton/skeleton.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./skeleton.css\";\n\ntype SkeletonProps = React.ComponentProps<\"div\"> & {\n  visible?: boolean;\n  animate?: boolean;\n  inverted?: boolean;\n  multiline?: boolean;\n};\n\nfunction Skeleton({\n  className,\n  children,\n  visible = true,\n  animate = true,\n  inverted = false,\n  multiline = false,\n  ...props\n}: SkeletonProps) {\n  if (!visible && children) {\n    return <>{children}</>;\n  }\n\n  const classes = cn(\n    \"bg-accent rounded-md\",\n    animate && [\n      \"skeleton-shimmer bg-fixed\",\n      inverted\n        ? \"bg-[linear-gradient(90deg,transparent_25%,oklch(0_0_0/15%)_50%,transparent_60%)]\"\n        : \"bg-[linear-gradient(90deg,transparent_25%,oklch(1_0_0/75%)_50%,transparent_60%)]\",\n      \"bg-size-[200%_100%]\",\n      inverted\n        ? \"dark:bg-[linear-gradient(90deg,transparent_25%,oklch(0_0_0/75%)_50%,transparent_60%)]\"\n        : \"dark:bg-[linear-gradient(90deg,transparent_25%,oklch(1_0_0/15%)_50%,transparent_60%)]\",\n    ],\n    className,\n  );\n\n  if (multiline) {\n    return (\n      <span\n        data-slot=\"skeleton\"\n        className={cn(\n          classes,\n          \"inline text-transparent [box-decoration-break:clone] [-webkit-box-decoration-break:clone]\",\n        )}\n        {...(props as React.ComponentProps<\"span\">)}\n      >\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(classes, children && \"*:invisible\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nexport { Skeleton };\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/skeleton/skeleton.tsx"
    },
    {
      "path": "registry/default/skeleton/skeleton.css",
      "content": "/* -------------------------------------------------------------------------------------------------\n * Skeleton shimmer animation.\n *\n * Uses background-position-x on a static gradient (bg-size 200%) so the\n * browser can composite the shift instead of re-rasterizing the gradient\n * every frame. Combined with bg-fixed on the skeleton element, all skeletons\n * on the page sample the same viewport-aligned gradient and stay in phase.\n * -------------------------------------------------------------------------------------------------*/\n\n.skeleton-shimmer {\n  /* Negative animation-delay shifts the start phase so the sheen enters\n     from the viewport's left edge at page load instead of sitting in the\n     center. Matches the shadcn convention of -1s on 2s (half-cycle). */\n  animation: shimmer 1.5s -0.75s linear infinite;\n}\n\n@keyframes shimmer {\n  to {\n    background-position-x: -200%;\n  }\n}\n",
      "type": "registry:file",
      "target": "components/ui/cubby-ui/skeleton/skeleton.css"
    }
  ],
  "type": "registry:ui"
}