{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hexagon-background",
  "type": "registry:ui",
  "title": "Hexagon Background",
  "description": "A background component featuring an interactive hexagon grid.",
  "files": [
    {
      "path": "registry/backgrounds/hexagon/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype HexagonBackgroundProps = React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n  hexagonProps?: React.ComponentProps<'div'>;\n  hexagonSize?: number; // value greater than 50\n  hexagonMargin?: number;\n};\n\nfunction HexagonBackground({\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  const rowSpacing = hexagonSize * 0.8;\n  const baseMarginTop = -36 - 0.275 * (hexagonSize - 100);\n  const computedMarginTop = baseMarginTop + hexagonMargin;\n  const oddRowMarginLeft = -(hexagonSize / 2);\n  const evenRowMarginLeft = hexagonMargin / 2;\n\n  const [gridDimensions, setGridDimensions] = React.useState({\n    rows: 0,\n    columns: 0,\n  });\n\n  const updateGridDimensions = React.useCallback(() => {\n    const rows = Math.ceil(window.innerHeight / rowSpacing);\n    const columns = Math.ceil(window.innerWidth / hexagonWidth) + 1;\n    setGridDimensions({ rows, columns });\n  }, [rowSpacing, hexagonWidth]);\n\n  React.useEffect(() => {\n    updateGridDimensions();\n    window.addEventListener('resize', updateGridDimensions);\n    return () => window.removeEventListener('resize', updateGridDimensions);\n  }, [updateGridDimensions]);\n\n  return (\n    <div\n      data-slot=\"hexagon-background\"\n      className={cn(\n        'relative size-full overflow-hidden dark:bg-neutral-900 bg-neutral-100',\n        className,\n      )}\n      {...props}\n    >\n      <style>{`:root { --hexagon-margin: ${hexagonMargin}px; }`}</style>\n      <div className=\"absolute top-0 -left-0 size-full overflow-hidden\">\n        {Array.from({ length: gridDimensions.rows }).map((_, rowIndex) => (\n          <div\n            key={`row-${rowIndex}`}\n            style={{\n              marginTop: computedMarginTop,\n              marginLeft:\n                ((rowIndex + 1) % 2 === 0\n                  ? evenRowMarginLeft\n                  : oddRowMarginLeft) - 10,\n            }}\n            className=\"inline-flex\"\n          >\n            {Array.from({ length: gridDimensions.columns }).map(\n              (_, colIndex) => (\n                <div\n                  key={`hexagon-${rowIndex}-${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-all 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            )}\n          </div>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n}\n\nexport { HexagonBackground, type HexagonBackgroundProps };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/backgrounds/hexagon.tsx"
    }
  ]
}