{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gummy-skeleton",
  "type": "registry:ui",
  "title": "Gummy Skeleton",
  "description": "Decorative or named loading placeholders for lines, text, avatars, and card surfaces.",
  "registryDependencies": [
    "https://gummyui.dev/r/gummy-primitives-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/GummySkeleton.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nfunction joinClassNames(...values: Array<string | false | null | undefined>) {\n  return values.filter(Boolean).join(\" \");\n}\n\nexport type GummySkeletonProps = React.HTMLAttributes<HTMLDivElement> & {\n  shape?: \"line\" | \"text\" | \"circle\" | \"card\";\n  loadingLabel?: string;\n  lines?: number;\n};\n\nexport const GummySkeleton = React.forwardRef<\n  HTMLDivElement,\n  GummySkeletonProps\n>(function GummySkeleton(\n  {\n    shape = \"line\",\n    loadingLabel,\n    lines = 1,\n    className,\n    style,\n    ...skeletonProps\n  },\n  ref,\n) {\n  const safeLines = Math.max(1, Math.min(12, Math.floor(lines)));\n  return (\n    <div\n      {...skeletonProps}\n      ref={ref}\n      className={joinClassNames(\"gummy-skeleton\", className)}\n      data-shape={shape}\n      role={loadingLabel ? \"status\" : undefined}\n      aria-label={loadingLabel}\n      aria-hidden={loadingLabel ? undefined : true}\n      style={{\n        ...style,\n        \"--gummy-skeleton-lines\": safeLines,\n      } as React.CSSProperties}\n    >\n      {shape === \"text\"\n        ? Array.from({ length: safeLines }, (_, index) => (\n            <span key={index} className=\"gummy-skeleton__line\" />\n          ))\n        : <span className=\"gummy-skeleton__body\" />}\n    </div>\n  );\n});\n\nGummySkeleton.displayName = \"GummySkeleton\";\n\nexport type GummySkeletonGroupProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n};\n\nexport const GummySkeletonGroup = React.forwardRef<\n  HTMLDivElement,\n  GummySkeletonGroupProps\n>(function GummySkeletonGroup(\n  { label = \"Loading content\", className, ...groupProps },\n  ref,\n) {\n  return (\n    <div\n      {...groupProps}\n      ref={ref}\n      className={joinClassNames(\"gummy-skeleton-group\", className)}\n      aria-busy=\"true\"\n      aria-label={label}\n      role=\"status\"\n    />\n  );\n});\n\nGummySkeletonGroup.displayName = \"GummySkeletonGroup\";\n"
    }
  ]
}