{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stripes-preloader",
  "type": "registry:block",
  "title": "Stripes preloader",
  "description": "Stripes preloader",
  "files": [
    {
      "path": "components/usages/stripespreloaderusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport VerticalTiles from \"@/registry/open-source/stripes-preloader\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<VerticalTiles rerun>\r\n\t\t\t\t<span>Some content</span>\r\n\t\t\t</VerticalTiles>{\" \"}\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/stripespreloaderusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport VerticalTiles from \"@/registry/open-source/stripes-preloader\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<VerticalTiles rerun>\r\n\t\t\t\t<span>Some content</span>\r\n\t\t\t</VerticalTiles>{\" \"}\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/stripes-preloader.tsx",
      "content": "import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, useInView } from \"motion/react\";\n\ninterface Tile {\n\tid: number;\n\twidth: number;\n\torder: number;\n}\n\ninterface VerticalTilesProps {\n\ttileClassName?: string;\n\tminTileWidth?: number;\n\tanimationDuration?: number;\n\tanimationDelay?: number;\n\tstagger?: number;\n\tchildren?: React.ReactNode;\n\trerun?: boolean;\n}\n\nexport default function VerticalTiles({\n\ttileClassName,\n\tminTileWidth = 32,\n\tanimationDuration = 0.5,\n\tanimationDelay = 1,\n\tstagger = 0.05,\n\tchildren,\n\trerun,\n}: VerticalTilesProps) {\n\tconst [tiles, setTiles] = useState<Tile[]>([]);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst isInView = useInView(containerRef, {\n\t\tonce: rerun || false,\n\t\tamount: 0.3,\n\t});\n\n\tconst calculateTiles = useCallback(() => {\n\t\tif (containerRef.current) {\n\t\t\tconst { offsetWidth: width, offsetHeight: _ } = containerRef.current;\n\t\t\tconst tileCount = Math.max(3, Math.floor(width / minTileWidth));\n\t\t\tconst tileWidth = width / tileCount + 1;\n\n\t\t\tconst newTiles = Array.from({ length: tileCount }, (_, index) => ({\n\t\t\t\tid: index,\n\t\t\t\twidth: tileWidth,\n\t\t\t\torder: Math.abs(index - Math.floor((tileCount - 1) / 2)),\n\t\t\t}));\n\n\t\t\tsetTiles(newTiles);\n\t\t}\n\t}, [minTileWidth]);\n\n\tuseEffect(() => {\n\t\tcalculateTiles();\n\t\tconst resizeObserver = new ResizeObserver(calculateTiles);\n\t\tif (containerRef.current) {\n\t\t\tresizeObserver.observe(containerRef.current);\n\t\t}\n\t\treturn () => resizeObserver.disconnect();\n\t}, [calculateTiles]);\n\n\treturn (\n\t\t<div ref={containerRef} className=\"relative overflow-hidden\">\n\t\t\t{children}\n\n\t\t\t<div className=\"absolute inset-0 flex\">\n\t\t\t\t{tiles.map((tile) => (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tkey={tile.id}\n\t\t\t\t\t\tclassName={cn(\"bg-background\", tileClassName)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: tile.width,\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tleft: `${(tile.id * 100) / tiles.length}%`,\n\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tinitial={{ y: 0 }}\n\t\t\t\t\t\tanimate={isInView || rerun ? { y: \"100%\" } : { y: 0 }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: animationDuration,\n\t\t\t\t\t\t\tdelay: animationDelay + tile.order * stagger,\n\t\t\t\t\t\t\tease: [0.45, 0, 0.55, 1],\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}