61: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T6f55,"use client"; import * as React from "react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface ShoeSize { us: string; uk: string; eu: string; /** Foot length in centimetres. */ cm: number; soldOut?: boolean; } export interface SizeGuideModalProps { product?: { name: string; price: number; was?: number; image: string; fitNote?: string }; sizes?: ShoeSize[]; currency?: string; defaultSize?: string; onSizeChange?: (size: ShoeSize) => void; onAdd?: (size: ShoeSize) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", panel: "#121212", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", lineHi: "rgba(255,255,255,0.35)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", accentSoft: "rgba(124,222,106,0.12)", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", scrim: "rgba(0,0,0,0.72)", shadow: "0 30px 80px -20px rgba(0,0,0,0.8)", scheme: "dark" as const, }, light: { bg: "#FFFFFF", card: "#F7F7F7", panel: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", lineHi: "rgba(0,0,0,0.3)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", accentSoft: "rgba(47,158,68,0.1)", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", scrim: "rgba(10,10,10,0.5)", shadow: "0 30px 80px -24px rgba(0,0,0,0.35)", scheme: "light" as const, }, }; type Palette = (typeof PALETTES)[keyof typeof PALETTES]; const PRODUCT = { name: "Running Shoes", price: 99, was: 149, image: "/demo/running-shoes.webp", fitNote: "Runs true to size for 78% of buyers" }; const SIZES: ShoeSize[] = [ { us: "7", uk: "6", eu: "40", cm: 25 }, { us: "7.5", uk: "6.5", eu: "40.5", cm: 25.4 }, { us: "8", uk: "7", eu: "41", cm: 25.8 }, { us: "8.5", uk: "7.5", eu: "42", cm: 26.2, soldOut: true }, { us: "9", uk: "8", eu: "42.5", cm: 26.7 }, { us: "9.5", uk: "8.5", eu: "43", cm: 27.1 }, { us: "10", uk: "9", eu: "44", cm: 27.5 }, { us: "10.5", uk: "9.5", eu: "44.5", cm: 27.9 }, { us: "11", uk: "10", eu: "45", cm: 28.3 }, { us: "12", uk: "11", eu: "46", cm: 29.2, soldOut: true }, ]; const TABS = [ { id: "chart", label: "Size chart" }, { id: "find", label: "Find my size" }, { id: "measure", label: "How to measure" }, ] as const; type Tab = (typeof TABS)[number]["id"]; type Width = "narrow" | "regular" | "wide"; const fmtLen = (cm: number, unit: "cm" | "in") => (unit === "cm" ? `${cm.toFixed(1)} cm` : `${(cm / 2.54).toFixed(2)} in`); function recommend(sizes: ShoeSize[], footCm: number, width: Width) { // Wide feet go up half a size; narrow feet can take the closest size even if it's a touch short. const target = footCm + (width === "wide" ? 0.4 : width === "narrow" ? -0.15 : 0); return sizes.find((s) => s.cm >= target) ?? null; } function Seg({ value, options, onChange, p, label, id }: { value: T; options: { v: T; label: string }[]; onChange: (v: T) => void; p: Palette; label: string; id: string }) { return (

{options.map((o) => { const on = value === o.v; return ( ); })}

); } function FootDiagram({ p }: { p: Palette }) { const reduce = useReducedMotion(); return ( ); } export function SizeGuideModal({ product = PRODUCT, sizes = SIZES, currency = "$", defaultSize = "9", onSizeChange, onAdd, theme = "dark", className }: SizeGuideModalProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [size, setSize] = React.useState(defaultSize); const [open, setOpen] = React.useState(false); const [tab, setTab] = React.useState("chart"); const [unit, setUnit] = React.useState<"cm" | "in">("cm"); const [pending, setPending] = React.useState(defaultSize); const [foot, setFoot] = React.useState(26.5); const [width, setWidth] = React.useState("regular"); const [added, setAdded] = React.useState(false); const openerRef = React.useRef(null); const dialogRef = React.useRef(null); const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const cur = sizes.find((s) => s.us === size) ?? null; const pend = sizes.find((s) => s.us === pending) ?? null; const rec = recommend(sizes, foot, width); const minCm = sizes[0].cm - 1; const maxCm = sizes[sizes.length - 1].cm + 0.5; const choose = (s: ShoeSize) => { if (s.soldOut) return; setSize(s.us); setAdded(false); onSizeChange?.(s); }; const show = () => { setPending(size); setOpen(true); }; const close = React.useCallback(() => { setOpen(false); // The page behind the dialog is inert until the exit finishes, so focus it on the next tick. setTimeout(() => openerRef.current?.focus(), 0); }, []); const apply = (us: string | null) => { const s = sizes.find((x) => x.us === us); if (s && !s.soldOut) choose(s); close(); }; React.useEffect(() => { if (!open) return; const dlg = dialogRef.current; dlg?.querySelector("[data-autofocus]")?.focus(); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") return close(); if (e.key !== "Tab" || !dlg) return; const f = [...dlg.querySelectorAll("button:not([disabled]), input, [tabindex='0']")].filter((el) => el.offsetParent !== null); if (!f.length) return; const first = f[0]; const last = f[f.length - 1]; const to = e.shiftKey ? (document.activeElement === first ? last : null) : document.activeElement === last ? first : null; if (!to) return; e.preventDefault(); to.focus(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, close]); const tabKey = (e: React.KeyboardEvent, i: number) => { const d = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0; if (!d) return; e.preventDefault(); const n = (i + d + TABS.length) % TABS.length; setTab(TABS[n].id); tabRefs.current[n]?.focus(); }; const ease = [0.22, 1, 0.36, 1] as const; return (

{/* Product */}

{/* eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic */} {product.name}

Northline · Men’s

{product.name}

{currency} {product.price.toFixed(2)} {product.was ? ( {currency} {product.was.toFixed(2)} ) : null}

Size {cur ? `US ${cur.us} · EU ${cur.eu}` : "Pick a size"}

{sizes.map((s) => { const on = size === s.us; return ( ); })}

{product.fitNote ? (

Runs small True to size Runs large

{product.fitNote}

) : null} cur && (setAdded(true), onAdd?.(cur))} whileTap={reduce ? undefined : { scale: 0.98 }} animate={{ background: added ? p.accent : p.buttonBg, color: added ? p.accentText : p.buttonText }} className="mt-6 h-12 w-full rounded-full text-[15px] font-semibold disabled:opacity-50" > {added ? `Added · US ${cur?.us}` : cur ? `Add to cart · US ${cur.us}` : "Pick a size"}

{/* Dialog */} {open ? ( e.target === e.currentTarget && close()} > ) : null}

); } export default SizeGuideModal; 60:["$","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/size-guide-modal/size-guide-modal.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]