{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ink/skeleton",
  "title": "Skeleton",
  "description": "Shimmer loading placeholder",
  "dependencies": [
    "ink"
  ],
  "registryDependencies": [
    "https://termcn.dev/r/ink/use-animation.json",
    "https://termcn.dev/r/ink/use-theme.json",
    "https://termcn.dev/r/ink/use-unicode.json"
  ],
  "files": [
    {
      "path": "registry/ui/skeleton.tsx",
      "content": "import { Box, Text } from \"ink\";\nimport React from \"react\";\n\nimport { useAnimation } from \"@/hooks/use-animation\";\nimport { useTheme } from \"@/hooks/use-theme\";\nimport { useUnicode } from \"@/hooks/use-unicode\";\n\nexport interface SkeletonProps {\n  width?: number;\n  height?: number;\n  animated?: boolean;\n  isActive?: boolean;\n  \"aria-label\"?: string;\n}\n\nexport const Skeleton = ({\n  width = 20,\n  height = 1,\n  animated = true,\n  isActive = true,\n  \"aria-label\": ariaLabel = \"Loading\",\n}: SkeletonProps) => {\n  const theme = useTheme();\n  const unicode = useUnicode();\n  const highlightChar = unicode ? \"█\" : \"#\";\n  const baseChar = unicode ? \"░\" : \".\";\n  const frame = useAnimation({\n    intervalMs: 250,\n    isActive: animated && isActive,\n  });\n\n  const offset = animated ? frame % (width + 6) : -1;\n\n  const _buildRow = (): string => {\n    let row = \"\";\n    for (let i = 0; i < width; i += 1) {\n      const inHighlight = i >= offset - 3 && i <= offset + 3;\n      row += inHighlight ? highlightChar : baseChar;\n    }\n    return row;\n  };\n\n  const rows = Array.from({ length: height }, (_, rowIndex) => {\n    const rowOffset = animated ? (frame + rowIndex * 2) % (width + 6) : -1;\n    let row = \"\";\n    for (let i = 0; i < width; i += 1) {\n      const inHighlight = i >= rowOffset - 3 && i <= rowOffset + 3;\n      row += inHighlight ? highlightChar : baseChar;\n    }\n    return row;\n  });\n\n  return (\n    <Box\n      flexDirection=\"column\"\n      aria-role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-state={{ busy: isActive }}\n    >\n      <Box aria-hidden flexDirection=\"column\">\n        {rows.map((row, i) => (\n          <Text key={i}>\n            {[...row].map((char, j) => (\n              <Text\n                key={j}\n                color={\n                  char === highlightChar\n                    ? theme.colors.mutedForeground\n                    : theme.colors.muted\n                }\n              >\n                {char}\n              </Text>\n            ))}\n          </Text>\n        ))}\n      </Box>\n    </Box>\n  );\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}