masonry.tsx

'use client'

import { useState, useEffect, useRef, useCallback, type ReactNode } from 'react'
import { clsx } from 'clsx'

interface MasonryProps {
  children: ReactNode
  className?: string
  /** Gap between items (default: 32px) - if gapX/gapY not specified */
  gap?: number
  /** Horizontal gap between columns (default: uses gap value) */
  gapX?: number
  /** Vertical gap between items (default: uses gap value) */
  gapY?: number
  /** Custom breakpoints for columns */
  breakpoints?: {
    default: number
    lg?: number
    md?: number
    sm?: number