{
  "name": "hexagon-grid",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "hexagon-grid.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport './hexagon-grid.css';\n\nexport interface HexGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: number; // Size in pixels\n  gap?: number; // Gap in pixels\n}\n\nexport const HexGrid = React.forwardRef<HTMLDivElement, HexGridProps>(\n  ({ className, size = 220, gap = 16, children, ...props }, ref) => {\n    return (\n      <div className={cn('hex-grid-container', className)} ref={ref} {...props}>\n        <div\n          className='hex-grid'\n          style={\n            {\n              '--hex-width': `${size}px`,\n              '--hex-gap': `${gap}px`,\n              '--sqrt3': '1.73205',\n              '--hex-height': `calc(var(--hex-width) * 2 / var(--sqrt3))`,\n              '--hex-margin-x': `calc(var(--hex-gap) / 2)`,\n              '--hex-margin-y': `calc((var(--sqrt3) / 4 * var(--hex-gap)) - (0.125 * var(--hex-height)))`,\n            } as React.CSSProperties\n          }\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\nHexGrid.displayName = 'HexGrid';\n\nexport interface HexagonProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  imageSrc: string;\n  imageAlt?: string;\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n}\n\nexport const Hexagon = React.forwardRef<HTMLDivElement, HexagonProps>(\n  (\n    {\n      className,\n      imageSrc,\n      imageAlt = 'Hexagon image',\n      title,\n      subtitle,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('hex', className)}\n        tabIndex={0}\n        role='button'\n        {...props}\n      >\n        <div className='hex-shape'>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img src={imageSrc} alt={imageAlt} />\n          {(title || subtitle) && (\n            <div className='hex-caption'>\n              {title && <h3>{title}</h3>}\n              {subtitle && <p>{subtitle}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\nHexagon.displayName = 'Hexagon';\n",
      "type": "registry:ui"
    },
    {
      "path": "hexagon-grid.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport './hexagon-grid.css';\n\nexport interface HexGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: number; // Size in pixels\n  gap?: number; // Gap in pixels\n}\n\nexport const HexGrid = React.forwardRef<HTMLDivElement, HexGridProps>(\n  ({ className, size = 220, gap = 16, children, ...props }, ref) => {\n    return (\n      <div className={cn('hex-grid-container', className)} ref={ref} {...props}>\n        <div\n          className='hex-grid'\n          style={\n            {\n              '--hex-width': `${size}px`,\n              '--hex-gap': `${gap}px`,\n              '--sqrt3': '1.73205',\n              '--hex-height': `calc(var(--hex-width) * 2 / var(--sqrt3))`,\n              '--hex-margin-x': `calc(var(--hex-gap) / 2)`,\n              '--hex-margin-y': `calc((var(--sqrt3) / 4 * var(--hex-gap)) - (0.125 * var(--hex-height)))`,\n            } as React.CSSProperties\n          }\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\nHexGrid.displayName = 'HexGrid';\n\nexport interface HexagonProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  imageSrc: string;\n  imageAlt?: string;\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n}\n\nexport const Hexagon = React.forwardRef<HTMLDivElement, HexagonProps>(\n  (\n    {\n      className,\n      imageSrc,\n      imageAlt = 'Hexagon image',\n      title,\n      subtitle,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('hex', className)}\n        tabIndex={0}\n        role='button'\n        {...props}\n      >\n        <div className='hex-shape'>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img src={imageSrc} alt={imageAlt} />\n          {(title || subtitle) && (\n            <div className='hex-caption'>\n              {title && <h3>{title}</h3>}\n              {subtitle && <p>{subtitle}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\nHexagon.displayName = 'Hexagon';\n",
      "type": "registry:ui"
    },
    {
      "path": "hexagon-grid.css",
      "content": "@reference \"../../app/globals.css\";\n\n/* =========================================\n   Hexagon Grid Core Logic\n   ========================================= */\n\n.hex-grid-container {\n  display: flex;\n  justify-content: center;\n  perspective: 1000px;\n  width: 100%;\n}\n\n.hex-grid {\n  display: flex;\n  flex-wrap: wrap;\n  width: calc((var(--hex-width) + var(--hex-gap)) * 4);\n  padding: calc(var(--hex-margin-y) * -1) 0;\n}\n\n/* =========================================\n   Hexagon Shape, Structure & Depth\n   ========================================= */\n.hex {\n  width: var(--hex-width);\n  height: var(--hex-height);\n  margin: var(--hex-margin-y) var(--hex-margin-x);\n  position: relative;\n  cursor: pointer;\n  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));\n  transform: translateY(0);\n  transition:\n    filter 0.5s cubic-bezier(0.25, 1, 0.5, 1),\n    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.hex:nth-child(7n + 5) {\n  margin-left: calc((var(--hex-width) / 2) + var(--hex-gap));\n}\n\n.hex-shape {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n  @apply bg-slate-900;\n}\n\n.hex-shape::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(\n    circle at 50% 50%,\n    transparent 40%,\n    rgba(0, 0, 0, 0.8) 120%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity 0.5s ease;\n}\n\n/* =========================================\n   Immersive Interactions\n   ========================================= */\n\n.hex:focus-visible {\n  outline: none;\n}\n\n.hex::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-color: rgba(255, 255, 255, 0.9);\n  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n  z-index: -1;\n  opacity: 0;\n  transform: scale(1);\n  transition:\n    opacity 0.4s ease,\n    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.hex:focus-visible::before {\n  opacity: 1;\n  transform: scale(1.05);\n}\n\n.hex:hover,\n.hex:focus-within {\n  z-index: 10;\n  transform: translateY(-6px);\n  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.7));\n}\n\n.hex:hover .hex-shape::after,\n.hex:focus-within .hex-shape::after {\n  opacity: 0;\n}\n\n.hex img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n  filter: grayscale(70%) brightness(0.7) contrast(1.1);\n  transform: scale(1.02);\n  backface-visibility: hidden;\n  will-change: transform;\n  transition:\n    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),\n    filter 0.6s ease;\n}\n\n.hex:hover img,\n.hex:focus-visible img {\n  transform: scale(1.15);\n  filter: grayscale(0%) brightness(1.05) contrast(1.05);\n}\n\n/* =========================================\n   Caption Overlay\n   ========================================= */\n.hex-caption {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.95) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    rgba(0, 0, 0, 0) 100%\n  );\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 20px 70px 20px;\n  text-align: center;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.4s ease;\n}\n\n.hex-caption h3 {\n  color: #ffffff;\n  font-size: 1.4rem;\n  font-weight: 600;\n  margin: 0 0 6px 0;\n  letter-spacing: 0.5px;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);\n  transform: translateY(15px);\n  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.hex-caption p {\n  color: rgba(255, 255, 255, 0.7);\n  font-size: 0.7rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 3px;\n  margin: 0;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n  transform: translateY(15px);\n  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.hex:hover .hex-caption,\n.hex:focus-visible .hex-caption {\n  opacity: 1;\n}\n\n.hex:hover .hex-caption h3,\n.hex:focus-visible .hex-caption h3 {\n  transform: translateY(0);\n}\n\n.hex:hover .hex-caption p,\n.hex:focus-visible .hex-caption p {\n  transform: translateY(0);\n  transition-delay: 0.05s;\n}\n\n/* =========================================\n   Responsive Layouts\n   ========================================= */\n@media (max-width: 1024px) {\n  .hex-grid {\n    width: calc((var(--hex-width) + var(--hex-gap)) * 3);\n  }\n  .hex:nth-child(7n + 5) {\n    margin-left: var(--hex-margin-x);\n  }\n  .hex:nth-child(5n + 4) {\n    margin-left: calc((var(--hex-width) / 2) + var(--hex-gap));\n  }\n}\n\n@media (max-width: 768px) {\n  .hex-grid {\n    width: calc((var(--hex-width) + var(--hex-gap)) * 2);\n  }\n  .hex:nth-child(5n + 4) {\n    margin-left: var(--hex-margin-x);\n  }\n  .hex:nth-child(3n + 3) {\n    margin-left: calc((var(--hex-width) / 2) + var(--hex-gap));\n  }\n}\n\n@media (max-width: 550px) {\n  .hex-grid {\n    width: calc((var(--hex-width) * 1.5) + (var(--hex-gap) * 1.5));\n  }\n  .hex:nth-child(3n + 3) {\n    margin-left: var(--hex-margin-x);\n  }\n  .hex:nth-child(even) {\n    margin-left: calc((var(--hex-width) / 2) + var(--hex-gap));\n  }\n}\n",
      "type": "registry:ui"
    }
  ]
}