{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elastic-stack",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/elastic-stack.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ElasticStackItem {\n  id: string | number;\n  image?: string;\n  name?: string;\n}\n\nexport interface ElasticStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ElasticStackItem[];\n  itemSize?: number;\n  overlap?: number;\n  pushForce?: number;\n}\n\nexport function ElasticStack({\n  items,\n  itemSize = 70,\n  overlap = 30,\n  pushForce = 15,\n  className,\n  ...props\n}: ElasticStackProps) {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const total = items.length;\n  // Custom spring-like easing from the original CSS\n  const springEasing = \"linear(0, 0.79 14.4%, 1.026 22.4%, 1.164 31.2%, 1.207 38.2%, 1.208 46.2%, 1.033 80%, 1)\";\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-center cursor-pointer py-8\", className)}\n      onMouseLeave={() => setHoveredIndex(null)}\n      {...props}\n    >\n      {items.map((item, i) => {\n        let translateX = 0;\n        let scale = 1;\n        let zIndex = i; // Base stacking order\n        let isHovered = hoveredIndex === i;\n\n        if (hoveredIndex !== null) {\n          if (i > hoveredIndex) {\n            translateX = Math.min(pushForce * (total - i - 1), overlap);\n          } else if (i < hoveredIndex) {\n            translateX = -Math.min(pushForce * i, overlap);\n          } else {\n            scale = 1.25;\n            zIndex = 100;\n          }\n        }\n\n        return (\n          <div\n            key={item.id}\n            onMouseEnter={() => setHoveredIndex(i)}\n            className={cn(\n              \"relative flex items-center justify-center rounded-full isolate transition-all duration-700 bg-neutral-100 dark:bg-neutral-800\",\n              \"border-2 border-white dark:border-neutral-950\",\n              isHovered ? \"shadow-xl\" : \"shadow-sm\"\n            )}\n            style={{\n              width: itemSize,\n              height: itemSize,\n              marginLeft: i === 0 ? 0 : -overlap,\n              transform: `translateX(${translateX}px) scale(${scale})`,\n              transitionTimingFunction: springEasing,\n              zIndex,\n            }}\n          >\n            {item.image ? (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img \n                src={item.image} \n                alt={item.name || `Avatar ${i}`}\n                className=\"w-full h-full object-cover rounded-full pointer-events-none\"\n              />\n            ) : (\n              <div className=\"w-full h-full rounded-full flex items-center justify-center font-semibold text-neutral-500 dark:text-neutral-400\">\n                {item.name ? item.name.charAt(0) : i + 1}\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default ElasticStack;\n",
      "type": "registry:ui",
      "target": "components/ui/elastic-stack.tsx"
    }
  ]
}