{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "square-grid",
  "files": [
    {
      "path": "registry/components/loading-ui/square-grid.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nconst SQUARE_GRID_BLOCKS = [\"█\", \"▓\", \"▒\"] as const;\n\ntype SquareGridProps = React.ComponentProps<\"span\"> & {\n  blocks?: readonly string[];\n  size?: number;\n  track?: string;\n};\n\nfunction SquareGrid({\n  className,\n  blocks = SQUARE_GRID_BLOCKS,\n  size = 5,\n  track = \"░\",\n  style,\n  ...props\n}: SquareGridProps) {\n  const cells = Math.max(2, Math.floor(size));\n  const glyphs = SQUARE_GRID_BLOCKS.map(\n    (_, index) => blocks[index] ?? SQUARE_GRID_BLOCKS[index],\n  );\n  const gridCells = Array.from({ length: cells * cells }, (_, index) => {\n    const row = Math.floor(index / cells);\n    const col = index % cells;\n\n    return row === 0 || row === cells - 1 || col === 0 || col === cells - 1\n      ? track\n      : \" \";\n  });\n\n  return (\n    <>\n      <style>{`\n        @keyframes loading-ui-square-grid {\n          0%,\n          100% {\n            transform: translate(0, 0);\n          }\n\n          25% {\n            transform: translate(var(--loader-x), 0);\n          }\n\n          50% {\n            transform: translate(var(--loader-x), var(--loader-y));\n          }\n\n          75% {\n            transform: translate(0, var(--loader-y));\n          }\n        }\n      `}</style>\n      <span\n        role=\"status\"\n        className={cn(\n          \"relative inline-flex h-[var(--loader-size)] w-[var(--loader-size)] overflow-hidden font-mono text-xl leading-none text-current select-none\",\n          className,\n        )}\n        style={\n          {\n            \"--loader-size\": `${cells}ch`,\n            \"--loader-x\": `${cells - 1}ch`,\n            \"--loader-y\": `${cells - 1}ch`,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 grid\"\n          style={{\n            gridTemplateColumns: `repeat(${cells}, 1ch)`,\n            gridTemplateRows: `repeat(${cells}, 1ch)`,\n          }}\n        >\n          {gridCells.map((glyph, index) => (\n            <span\n              key={index}\n              className=\"flex h-[1ch] w-[1ch] items-center justify-center\"\n            >\n              {glyph}\n            </span>\n          ))}\n        </span>\n        {glyphs.map((glyph, index) => (\n          <span\n            key={`${glyph}-${index}`}\n            aria-hidden=\"true\"\n            className={cn(\n              \"pointer-events-none absolute top-0 left-0 flex h-[1ch] w-[1ch] items-center justify-center\",\n              [\"z-30\", \"z-20\", \"z-10\"][index],\n            )}\n            style={{\n              animation:\n                \"loading-ui-square-grid var(--duration, 2.8s) linear infinite\",\n              animationDelay: `calc(var(--delay, 0.06s) * ${index})`,\n              backgroundColor: \"var(--mask-color, var(--background))\",\n            }}\n          >\n            {glyph}\n          </span>\n        ))}\n        <span className=\"sr-only\">Loading</span>\n      </span>\n    </>\n  );\n}\n\nexport { SquareGrid };\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "type": "registry:component"
}