{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "backgrounds-hexagon",
  "type": "registry:ui",
  "title": "Hexagon Background",
  "description": "A background component featuring an interactive hexagon grid.",
  "dependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "registry/backgrounds/hexagon/index.tsx",
      "type": "registry:ui",
      "target": "@components/animate-ui/backgrounds/hexagon.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { cn } from 'cn';\n\nconst range = (length: number) => Array.from({ length }, (_, i) => i);\n\ntype HexagonBackgroundProps = React.ComponentProps<'div'> & {\n  hexagonProps?: React.ComponentProps<'div'>;\n  hexagonSize?: number;\n  hexagonMargin?: number;\n};\n\nfunction HexagonBackground({\n  ref,\n  className,\n  children,\n  hexagonProps,\n  hexagonSize = 75,\n  hexagonMargin = 3,\n  ...props\n}: HexagonBackgroundProps) {\n  const hexagonWidth = hexagonSize;\n  const hexagonHeight = hexagonSize * 1.1;\n  // Rows a slanted side apart, so every border is hexagonMargin thick.\n  const corner = hexagonHeight / 4;\n  const side = Math.hypot(corner, hexagonWidth / 2);\n  const rowSpacing =\n    hexagonHeight -\n    corner +\n    (hexagonMargin * (2 * side - corner)) / hexagonWidth;\n  const computedMarginTop = rowSpacing - hexagonHeight;\n  const oddRowMarginLeft = -(hexagonSize / 2);\n  const evenRowMarginLeft = hexagonMargin / 2;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  const [gridDimensions, setGridDimensions] = React.useState({\n    rows: 0,\n    columns: 0,\n  });\n\n  React.useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const update = () => {\n      const { width, height } = container.getBoundingClientRect();\n      const rows = Math.ceil(height / rowSpacing) + 1;\n      const columns = Math.ceil(width / hexagonWidth) + 1;\n      setGridDimensions((prev) =>\n        prev.rows === rows && prev.columns === columns\n          ? prev\n          : { rows, columns },\n      );\n    };\n    update();\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(container);\n    return () => resizeObserver.disconnect();\n  }, [rowSpacing, hexagonWidth]);\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"hexagon-background\"\n      className={cn(\n        'relative isolate size-full overflow-hidden dark:bg-neutral-900 bg-neutral-100',\n        className,\n      )}\n      {...props}\n      style={\n        {\n          '--hexagon-margin': `${hexagonMargin}px`,\n          ...props.style,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute top-0 left-0 -z-10 size-full overflow-hidden text-base leading-6\"\n      >\n        {range(gridDimensions.rows).map((rowIndex) => (\n          <div\n            key={rowIndex}\n            style={{\n              marginTop: computedMarginTop,\n              marginLeft:\n                ((rowIndex + 1) % 2 === 0\n                  ? evenRowMarginLeft\n                  : oddRowMarginLeft) - 10,\n            }}\n            className=\"flex w-max\"\n          >\n            {range(gridDimensions.columns).map((colIndex) => (\n              <div\n                key={colIndex}\n                {...hexagonProps}\n                style={{\n                  width: hexagonWidth,\n                  height: hexagonHeight,\n                  marginLeft: hexagonMargin,\n                  ...hexagonProps?.style,\n                }}\n                className={cn(\n                  'relative',\n                  '[clip-path:polygon(50%_0%,_100%_25%,_100%_75%,_50%_100%,_0%_75%,_0%_25%)]',\n                  \"before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full dark:before:bg-neutral-950 before:bg-white before:opacity-100 before:transition-colors before:duration-1000\",\n                  \"after:content-[''] after:absolute after:inset-[var(--hexagon-margin)] dark:after:bg-neutral-950 after:bg-white\",\n                  'after:[clip-path:polygon(50%_0%,_100%_25%,_100%_75%,_50%_100%,_0%_75%,_0%_25%)]',\n                  'hover:before:bg-neutral-200 dark:hover:before:bg-neutral-800 hover:before:opacity-100 hover:before:duration-0 dark:hover:after:bg-neutral-900 hover:after:bg-neutral-100 hover:after:opacity-100 hover:after:duration-0',\n                  hexagonProps?.className,\n                )}\n              />\n            ))}\n          </div>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n}\n\nexport { HexagonBackground, type HexagonBackgroundProps };\n"
    }
  ]
}