4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1e2b,'use client'; import { cn } from '@/lib/utils'; import React from 'react'; type Breakpoint = [number, number]; const DEFAULT_BREAKPOINTS: Breakpoint[] = [ [1536, 10], [1280, 8], [1024, 6], [768, 4], [640, 2], [0, 1], ]; interface TransformValues { tx: number; ty: number; scale: number; originX: number; originY: number; } interface ExpandableGridProps extends React.ComponentPropsWithRef<'div'> { breakpoints?: Breakpoint[]; expandScale?: number; transitionDuration?: number; padding?: number; } interface GridContextValue { expandedIndex: number | null; totalItems: number; setExpandedIndex: (index: number | null) => void; registerCell: (index: number, element: HTMLElement) => void; } const GridContext = React.createContext(null); function useGridContext() { const context = React.useContext(GridContext); if (!context) { throw new Error('useGridContext must be used within ExpandableGrid'); } return context; } function getColCount(width: number, breakpoints: Breakpoint[]): number { for (const [minWidth, cols] of breakpoints) { if (width >= minWidth) return cols; } return breakpoints[breakpoints.length - 1][1]; } function calculateTransform( cellElement: HTMLElement, gridElement: HTMLElement, targetScale: number, padding: number = 40, ): TransformValues { const cellRect = cellElement.getBoundingClientRect(); const gridRect = gridElement.getBoundingClientRect(); const originX = cellRect.left - gridRect.left + cellRect.width / 2; const originY = cellRect.top - gridRect.top + cellRect.height / 2; const cellCenterX = cellRect.left + cellRect.width / 2; const cellCenterY = cellRect.top + cellRect.height / 2; const viewportCenterX = window.innerWidth / 2; const viewportCenterY = window.innerHeight / 2; // Calculate available space in viewport (with padding) const availableWidth = window.innerWidth - padding * 2; const availableHeight = window.innerHeight - padding * 2; // Calculate maximum scale that fits in viewport const scaleX = availableWidth / cellRect.width; const scaleY = availableHeight / cellRect.height; const maxScale = Math.min(scaleX, scaleY); // Use the smaller of targetScale or maxScale to ensure it fits const finalScale = Math.min(targetScale, maxScale); return { tx: viewportCenterX - cellCenterX, ty: viewportCenterY - cellCenterY, scale: finalScale, originX, originY, }; } export function ExpandableGrid({ breakpoints = DEFAULT_BREAKPOINTS, expandScale = 3, transitionDuration = 300, padding = 24, style, className, ...props }: ExpandableGridProps) { const gridRef = React.useRef(null); const cellRefs = React.useRef>(new Map()); const [expandedIndex, setExpandedIndex] = React.useState(null); const [colCount, setColCount] = React.useState(1); const [totalItems, setTotalItems] = React.useState(0); const [cssVars, setCssVars] = React.useState({ tx: 0, ty: 0, scale: 1, originX: '50%', originY: '50%', opacity: 1, }); const registerCell = React.useCallback( (index: number, element: HTMLElement) => { cellRefs.current.set(index, element); setTotalItems(cellRefs.current.size); }, [], ); // Handle responsive column count React.useEffect(() => { const updateColCount = () => { const width = window.innerWidth; setColCount(getColCount(width, breakpoints)); }; updateColCount(); window.addEventListener('resize', updateColCount); return () => window.removeEventListener('resize', updateColCount); }, [breakpoints]); // Recalculate transform on window resize when expanded React.useEffect(() => { if (expandedIndex === null) return; const handleResize = () => { const cellElement = cellRefs.current.get(expandedIndex); if (!cellElement || !gridRef.current) return; const { tx, ty, scale, originX, originY } = calculateTransform( cellElement, gridRef.current, expandScale, padding, ); setCssVars({ tx, ty, scale, originX: `${originX}px`, originY: `${originY}px`, opacity: 1, }); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [expandedIndex, expandScale, padding]); // Calculate and apply transforms when expanded index changes React.useEffect(() => { if (expandedIndex === null) { setCssVars({ tx: 0, ty: 0, scale: 1, originX: '50%', originY: '50%', opacity: 1, }); return; } // Use requestAnimationFrame to ensure DOM is ready requestAnimationFrame(() => { const cellElement = cellRefs.current.get(expandedIndex); if (!cellElement || !gridRef.current) return; const { tx, ty, scale, originX, originY } = calculateTransform( cellElement, gridRef.current, expandScale, padding, ); setCssVars({ tx, ty, scale, originX: `${originX}px`, originY: `${originY}px`, opacity: 1, }); }); }, [expandedIndex, expandScale, padding]); // Lock body scroll when expanded React.useEffect(() => { if (expandedIndex !== null) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } return () => { document.body.style.overflow = ''; }; }, [expandedIndex]); return (

); } export function ExpandableGridCell({ index, onClick, className, ...props }: React.ComponentPropsWithRef<'button'> & { index: number }) { const { expandedIndex, setExpandedIndex, registerCell } = useGridContext(); const cellRef = React.useRef(null); const isExpanded = expandedIndex === index; const isAnyExpanded = expandedIndex !== null; React.useEffect(() => { if (cellRef.current) { registerCell(index, cellRef.current); } }, [index, registerCell]); const handleClick = (e: React.MouseEvent) => { if (isExpanded) { setExpandedIndex(null); } else if (!isAnyExpanded) { setExpandedIndex(index); } onClick?.(e); }; return (

Expandable Grid

Installation

Files

components

Styles