4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2ae7,"use client"; /* eslint-disable @next/next/no-img-element */ import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform, useVelocity, } from "motion/react"; import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react"; type DensityPercent = 20 | 40 | 80 | 120; type DensityImage = { id: string; src: string; alt: string; }; type ImageDensityGridProps = { images?: DensityImage[]; options?: DensityPercent[]; initialPercent?: DensityPercent; className?: string; /** * Show or hide the density controls. */ showControls?: boolean; /** * Optional heading above the controls. */ title?: string; /** * Limits the height of the image area. * Leave undefined to allow the grid to grow naturally. * * Example: * gridMaxHeight="42rem" */ gridMaxHeight?: string; /** * Adds internal padding around the component. */ padded?: boolean; }; const DEFAULT_OPTIONS: DensityPercent[] = [20, 40, 80, 120]; const DEFAULT_IMAGES: DensityImage[] = Array.from( { length: 40 }, (_, index) => { const number = String(index + 1).padStart(2, "0"); return { id: `frame-${number}`, src: `https://picsum.photos/seed/image-density-grid-${number}/520/640`, alt: `Random editorial image ${number}`, }; }, ); const tileEase = [0.9, 0.03, 0.69, 0.22] as const; const overlayEase = [0.17, 0.84, 0.44, 1] as const; const tileTransition = { type: "tween" as const, duration: 0.62, ease: tileEase, }; const overlayTransition = { duration: 0.3, ease: overlayEase, }; const transitionMs = 620; const layoutStaggerDelay = 0.012; const densityLayout: Record< DensityPercent, { desktopColumns: number; tabletColumns: number; mobileColumns: number; gap: string; } > = { 20: { desktopColumns: 4, tabletColumns: 3, mobileColumns: 2, gap: "clamp(0.75rem, 1.5vw, 1.25rem)", }, 40: { desktopColumns: 5, tabletColumns: 4, mobileColumns: 2, gap: "clamp(0.625rem, 1.25vw, 1rem)", }, 80: { desktopColumns: 8, tabletColumns: 5, mobileColumns: 3, gap: "clamp(0.375rem, 0.9vw, 0.625rem)", }, 120: { desktopColumns: 10, tabletColumns: 6, mobileColumns: 4, gap: "clamp(0.25rem, 0.65vw, 0.375rem)", }, }; function cn(...classes: Array) { return classes.filter(Boolean).join(" "); } function getTileTransition( index: number, shouldReduceMotion: boolean | null, ) { if (shouldReduceMotion) { return { duration: 0, }; } const delay = index * layoutStaggerDelay; return { layout: { ...tileTransition, delay, }, }; } export function ImageDensityGrid({ images = DEFAULT_IMAGES, options = DEFAULT_OPTIONS, initialPercent = 120, className, showControls = true, title = "Image density", gridMaxHeight, padded = true, }: ImageDensityGridProps) { const shouldReduceMotion = useReducedMotion(); const safeImages = images.length > 0 ? images : DEFAULT_IMAGES; const safeOptions = options.length > 0 ? options : DEFAULT_OPTIONS; const fallbackPercent = safeOptions[0] ?? 40; const [activePercent, setActivePercent] = useState( safeOptions.includes(initialPercent) ? initialPercent : fallbackPercent, ); const [isRearranging, setIsRearranging] = useState(false); const [containerWidth, setContainerWidth] = useState(0); const rootRef = useRef(null); const controlsRef = useRef(null); const optionRefs = useRef< Partial> >({}); const targetX = useMotionValue(0); const targetWidth = useMotionValue(0); const x = useSpring(targetX, { stiffness: 420, damping: 34, mass: 0.8, }); const width = useSpring(targetWidth, { stiffness: 420, damping: 34, mass: 0.8, }); const velocity = useVelocity(x); const scaleX = useTransform( velocity, [-1200, -250, 0, 250, 1200], [1.35, 1.12, 1, 1.12, 1.35], ); const blur = useTransform( velocity, [-1200, -250, 0, 250, 1200], [2.5, 0.8, 0, 0.8, 2.5], ); const filter = useMotionTemplate`blur(${blur}px)`; const activeLayout = densityLayout[activePercent]; const columnCount = useMemo(() => { let columns = activeLayout.desktopColumns; if (containerWidth > 0 && containerWidth < 640) { columns = activeLayout.mobileColumns; } else if (containerWidth > 0 && containerWidth < 1024) { columns = activeLayout.tabletColumns; } return Math.max(1, Math.min(columns, safeImages.length)); }, [activeLayout, containerWidth, safeImages.length]); const updateActiveIndicator = useCallback(() => { const controls = controlsRef.current; const activeButton = optionRefs.current[activePercent]; if (!controls || !activeButton) { return; } const controlsRect = controls.getBoundingClientRect(); const activeRect = activeButton.getBoundingClientRect(); targetX.set(activeRect.left - controlsRect.left); targetWidth.set(activeRect.width); }, [activePercent, targetWidth, targetX]); useLayoutEffect(() => { updateActiveIndicator(); }, [updateActiveIndicator, safeOptions]); useEffect(() => { const root = rootRef.current; if (!root) { return; } const resizeObserver = new ResizeObserver(([entry]) => { setContainerWidth(entry.contentRect.width); requestAnimationFrame(updateActiveIndicator); }); resizeObserver.observe(root); return () => resizeObserver.disconnect(); }, [updateActiveIndicator]); useEffect(() => { if (safeOptions.includes(activePercent)) { return; } setActivePercent(fallbackPercent); }, [activePercent, fallbackPercent, safeOptions]); useEffect(() => { if (!isRearranging) { return; } const staggerSpanMs = Math.max(0, safeImages.length - 1) * layoutStaggerDelay * 1000; const timeout = window.setTimeout( () => setIsRearranging(false), shouldReduceMotion ? 0 : transitionMs + staggerSpanMs, ); return () => window.clearTimeout(timeout); }, [isRearranging, safeImages.length, shouldReduceMotion]); function selectPercent(percent: DensityPercent) { if (percent === activePercent) { return; } setActivePercent(percent); if (!shouldReduceMotion) { setIsRearranging(true); } } return (

{showControls && (

{safeOptions.map((percent) => { const isActive = percent === activePercent; return ( ); })}

)}

{safeImages.map((image, index) => (

))}

); } export default ImageDensityGrid;4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/image-density-grid.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]