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:T48f9,"use client"; import NumberFlow from "@number-flow/react"; import { arc, motion, useReducedMotion } from "motion/react"; import Image from "next/image"; import { type ReactNode, useCallback, useMemo, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; export type AddToCartItem = { id: number; image: string; price: number; alt: string; }; export type AddToCartImage = | string | { src: string; alt?: string; }; export type AddToCartLayout = { columns?: 2 | 3 | 4; gap?: "compact" | "default" | "roomy"; showBorder?: boolean; stackLimit?: number; stackSpread?: number; }; export type AddToCartMotion = { duration?: number; peak?: number; strength?: number; tapScale?: number; }; type Flight = { id: number; item: AddToCartItem; // Starting position left: number; top: number; // Distance to cart x: number; y: number; width: number; height: number; }; type ProductTileProps = { item: AddToCartItem; added: boolean; disabled: boolean; priceLabel: string; imageSizes: string; tapScale: number; shouldReduceMotion: boolean; onAdd: (item: AddToCartItem, source: DOMRect) => void; }; export type AddToCartProps = { cartIcon?: ReactNode; cartLabel?: string; className?: string; currency?: string; disabled?: boolean; imageSizes?: string; images?: readonly AddToCartImage[]; initialItems?: readonly number[]; items?: readonly AddToCartItem[]; layout?: AddToCartLayout; locale?: string | string[]; motion?: AddToCartMotion; onCartChange?: (items: readonly AddToCartItem[], total: number) => void; onItemAdd?: (item: AddToCartItem) => void; }; export const ADD_TO_CART_ITEMS = [ { id: 1, image: "/images/add-to-cart/image1.png", price: 150, alt: "Pink and blue marbled artwork", }, { id: 2, image: "/images/add-to-cart/image2.png", price: 360, alt: "Pastel orbital artwork", }, { id: 3, image: "/images/add-to-cart/image3.png", price: 100, alt: "Blue ink cloud artwork", }, { id: 4, image: "/images/add-to-cart/image4.png", price: 432, alt: "Turquoise and yellow flowing artwork", }, { id: 5, image: "/images/add-to-cart/image5.png", price: 460, alt: "Mountain landscape at night", }, { id: 6, image: "/images/add-to-cart/image6.png", price: 970, alt: "Blue and white painted artwork", }, { id: 7, image: "/images/add-to-cart/image7.png", price: 720, alt: "Purple and cyan wave artwork", }, { id: 8, image: "/images/add-to-cart/image8.png", price: 633, alt: "Pink and blue light artwork", }, ] as const satisfies readonly AddToCartItem[]; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; const EMPTY_IMAGES: readonly AddToCartImage[] = []; const EMPTY_INITIAL_ITEMS: readonly number[] = []; const COLUMN_CLASSES = { 2: "grid-cols-2", 3: "grid-cols-2 sm:grid-cols-3", 4: "grid-cols-2 sm:grid-cols-4", } as const; const GAP_CLASSES = { compact: "gap-2", default: "gap-3 sm:gap-4", roomy: "gap-4 sm:gap-6", } as const; const tileVariants = { idle: { filter: "blur(0px)", opacity: 1, scale: 1, }, hover: { filter: "blur(3px)", opacity: 0.48, scale: 1.025, }, added: { filter: "blur(1.5px)", opacity: 0.58, scale: 1, }, }; const affordanceVariants = { idle: { opacity: 0, scale: 0.94, }, hover: { opacity: 1, scale: 1, }, added: { opacity: 1, scale: 1, }, }; function ProductTile({ item, added, disabled, priceLabel, imageSizes, tapScale, shouldReduceMotion, onAdd, }: ProductTileProps) { return ( { onAdd(item, event.currentTarget.getBoundingClientRect()); }} aria-label={added ? `${item.alt} added to cart` : `Add ${item.alt} for ${priceLabel}`} className=" group relative aspect-square min-w-0 overflow-hidden rounded-lg bg-neutral-300/20 outline-none ring-offset-2 ring-offset-neutral-950 focus-visible:ring-2 focus-visible:ring-white/80 disabled:cursor-default " > {item.alt}

); } type ArcPath = ReturnType; function FlyingProduct({ flight, duration, path, onComplete, }: { flight: Flight; duration: number; path: ArcPath; onComplete: () => void; }) { return ( ); } const STACK_SPRING = { type: "spring", stiffness: 420, damping: 28, mass: 0.75, } as const; function getStackPosition(index: number, count: number, expanded: boolean, spread: number) { const center = (count - 1) / 2; const offset = index - center; if (!expanded) { return { x: offset * 3, y: 4 + Math.abs(offset) * 4, rotate: offset * 7, }; } const maxDistance = Math.max(center, 1); const distanceFromCenter = Math.abs(offset) / maxDistance; return { x: offset * spread, y: -spread * 0.8 - (1 - distanceFromCenter) * spread, rotate: offset * 12, }; } function CartStack({ cart, icon, limit, spread, shouldReduceMotion, }: { cart: AddToCartItem[]; icon: ReactNode; limit: number; spread: number; shouldReduceMotion: boolean; }) { const [hovered, setHovered] = useState(false); const items = cart.slice(-limit); return ( setHovered(true)} onHoverEnd={() => setHovered(false)} >

{icon}

); } export function AddToCart({ cartIcon = , cartLabel = "Cart total", className, currency = "USD", disabled = false, imageSizes = "(min-width: 640px) 5rem, 40vw", images = EMPTY_IMAGES, initialItems = EMPTY_INITIAL_ITEMS, items = ADD_TO_CART_ITEMS, layout, locale = "en-US", motion: motionOptions, onCartChange, onItemAdd, }: AddToCartProps) { const shouldReduceMotion = Boolean(useReducedMotion()); const columns = layout?.columns ?? 4; const gap = layout?.gap ?? "default"; const showBorder = layout?.showBorder ?? true; const stackLimit = Math.max(1, Math.round(layout?.stackLimit ?? 5)); const stackSpread = Math.max(0, layout?.stackSpread ?? 20); const flightDuration = Math.max(0, motionOptions?.duration ?? 0.58); const flightPeak = motionOptions?.peak ?? 0.42; const flightStrength = motionOptions?.strength ?? 0.32; const tapScale = motionOptions?.tapScale ?? 0.96; const catalog = useMemo( () => items.map((item, index) => { const image = images[index]; if (!image) return item; return { ...item, image: typeof image === "string" ? image : image.src, alt: typeof image === "string" ? item.alt : (image.alt ?? item.alt), }; }), [images, items], ); const cartTargetRef = useRef(null); const nextFlightIdRef = useRef(0); const [cartIds, setCartIds] = useState(() => [...new Set(initialItems)]); const cartIdsRef = useRef(cartIds); const [flights, setFlights] = useState([]); const catalogById = useMemo(() => new Map(catalog.map((item) => [item.id, item])), [catalog]); const cart = useMemo( () => cartIds.flatMap((id) => { const item = catalogById.get(id); return item ? [item] : []; }), [cartIds, catalogById], ); /* * Reusing the same arc instance is recommended * when Motion chooses the direction automatically. * * strength -> how curved the path is * peak -> where the curve reaches its highest point */ const flightPath = useMemo( () => arc({ strength: flightStrength, peak: flightPeak, }), [flightPeak, flightStrength], ); const selectedIds = useMemo(() => { return new Set([...cartIds, ...flights.map((flight) => flight.item.id)]); }, [cartIds, flights]); const total = useMemo(() => { return cart.reduce((sum, item) => sum + item.price, 0); }, [cart]); const priceFormatter = useMemo( () => new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: "narrowSymbol", minimumFractionDigits: 0, }), [currency, locale], ); const commitItem = useCallback( (item: AddToCartItem) => { if (cartIdsRef.current.includes(item.id)) return; const nextIds = [...cartIdsRef.current, item.id]; const nextItems = nextIds.flatMap((id) => { const catalogItem = catalogById.get(id); return catalogItem ? [catalogItem] : []; }); cartIdsRef.current = nextIds; setCartIds(nextIds); onItemAdd?.(item); onCartChange?.( nextItems, nextItems.reduce((sum, nextItem) => sum + nextItem.price, 0), ); }, [catalogById, onCartChange, onItemAdd], ); const addToCart = (item: AddToCartItem, source: DOMRect) => { if (disabled || selectedIds.has(item.id)) return; const target = cartTargetRef.current?.getBoundingClientRect(); /* * Accessibility: * Don't animate the flight when the user * prefers reduced motion. */ if (shouldReduceMotion || !target) { commitItem(item); return; } const startX = source.left + source.width / 2; const startY = source.top + source.height / 2; const endX = target.left + target.width / 2; const endY = target.top + target.height / 2; nextFlightIdRef.current += 1; setFlights((current) => [ ...current, { id: nextFlightIdRef.current, item, left: source.left, top: source.top, /* * We only give Motion the destination. * arc() generates the curved path. */ x: endX - startX, y: endY - startY, width: source.width, height: source.height, }, ]); }; const finishFlight = (flight: Flight) => { setFlights((current) => current.filter((candidate) => candidate.id !== flight.id)); commitItem(flight.item); }; return (

{catalog.map((item) => ( ))}

{cart.length} items in cart. Total {total} {currency}.

{cartLabel}

{flights.length > 0 ? createPortal( flights.map((flight) => ( finishFlight(flight)} /> )), document.body, ) : null}

); } export function CartIcon({ className }: { className?: string }) { return ( ); } function PlusIcon({ className }: { className?: string }) { return ( ); } function CheckIcon({ className }: { className?: string }) { return ( ); } 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","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","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":"@number-flow/react"}]]}]}],["$","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"}]]}]}],["$","li","next",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next","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":"next"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/add-to-cart.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]