Masonry

1"use client";2 3import {4  useEffect,5  useId,6  useRef,7  useState,8  type CSSProperties,9  type HTMLAttributes,10  type PointerEvent as ReactPointerEvent,11} from "react";12import { ChevronLeft, ChevronRight, X } from "lucide-react";13 14export type MasonryTone = "paper" | "ink" | "accent" | "wash";15export type MasonryShape = "circle" | "bar" | "arch" | "tile";16export type MasonryHeight = "short" | "medium" | "tall";17export type MasonryHoverEffect = "zoom" | "lift" | "tilt" | "none";18export type MasonryCaptionMode = "hover" | "always" | "none";19 20export type MasonryItem = {21  id: string;22  title: string;23  meta: string;24  description: string;25  tone?: MasonryTone;26  shape?: MasonryShape;27  height?: MasonryHeight;28};