63: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"] 64: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"] 65:T6002,"use client" import * as React from "react" import { Ruler, X } from "lucide-react" import { animate, useReducedMotion, type AnimationPlaybackControls } from "motion/react" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { cn } from "@/lib/utils" const subscribeNothing = () => () => {} /** * Your locale, or the visitor's once hydrated. The server can't know the * visitor's locale, and its HTML must match the first client render — a * server in en-IN prints "1,24,000" where an en-US browser prints * "124,000" — so until hydration it formats in en-US. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } /* * A size guide, opened from the size label: * * * * or composed * Size & fit * * * * your own part * * * * Built on your shadcn/ui Dialog and Table. The panel morphs out of the link * that opened it and back into it on close, driven by Motion; with reduced * motion it simply fades. The parts share the unit and the selected size * through context; `useSizeGuide()` reads them. */ export type SizeGuideUnit = "cm" | "in" /** * One cell: a measurement in `baseUnit`, a `[min, max]` range, or text shown * as-is — "EU 38", "UK 10" — which is never converted. */ export type SizeGuideValue = number | [min: number, max: number] | string export interface SizeGuideRow { size: string /** One per column, in column order. */ values: SizeGuideValue[] } const CM_PER_INCH = 2.54 /** Inches to the nearest half, centimetres to the whole — how tapes are read. */ function convert(value: number, from: SizeGuideUnit, to: SizeGuideUnit) { if (from === to) return value return to === "in" ? Math.round((value / CM_PER_INCH) * 2) / 2 : Math.round(value * CM_PER_INCH) } /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const /** Scrolls, without drawing a scrollbar. Edge fades say there is more. */ const NO_SCROLLBAR = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden" /* ─── context ──────────────────────────────────────────────────────────── */ export interface SizeGuideContextValue { columns: string[] rows: SizeGuideRow[] unit: SizeGuideUnit setUnit: (unit: SizeGuideUnit) => void /** The unit `rows` are written in. */ baseUnit: SizeGuideUnit selectedSize?: string /** A cell, converted to the current unit and formatted for the locale. */ format: (value: SizeGuideValue) => string title: React.ReactNode description: React.ReactNode } const SizeGuideContext = React.createContext(null) export function useSizeGuide() { const context = React.useContext(SizeGuideContext) if (!context) { throw new Error("useSizeGuide must be used within .") } return context } /** The morph's bookkeeping. Internal: nothing here is part of the API. */ interface MorphContextValue { /** The element the panel grows out of, and shrinks back into. */ anchorRef: React.RefObject /** Closed as far as the shopper is concerned, still on screen animating out. */ closing: boolean /** Called once the exit has played: the dialog really closes. */ finishClose: () => void } const MorphContext = React.createContext(null) function useMorph() { const context = React.useContext(MorphContext) if (!context) { throw new Error("Size guide parts must be used within .") } return context } function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /** Whether a scroller has more to show past its start or end edge. */ function useOverflow(axis: "x" | "y") { const ref = React.useRef(null) const [edges, setEdges] = React.useState({ start: false, end: false }) React.useEffect(() => { const node = ref.current if (!node) return const update = () => { const offset = axis === "x" ? node.scrollLeft : node.scrollTop const size = axis === "x" ? node.clientWidth : node.clientHeight const total = axis === "x" ? node.scrollWidth : node.scrollHeight const next = { start: offset > 1, end: offset + size < total - 1 } setEdges((current) => current.start === next.start && current.end === next.end ? current : next ) } update() const observer = new ResizeObserver(update) observer.observe(node) if (node.firstElementChild) observer.observe(node.firstElementChild) node.addEventListener("scroll", update, { passive: true }) return () => { observer.disconnect() node.removeEventListener("scroll", update) } }, [axis]) return [ref, edges] as const } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface SizeGuideDialogProps { /** Measurement names, left to right: "Chest", "Waist", "Hip". */ columns: string[] rows: SizeGuideRow[] /** The unit `rows` are written in. Defaults to centimetres. */ baseUnit?: SizeGuideUnit unit?: SizeGuideUnit /** Defaults to `baseUnit`. */ defaultUnit?: SizeGuideUnit onUnitChange?: (unit: SizeGuideUnit) => void /** The size picked in the buy box. Its row is marked, and announced. */ selectedSize?: string locale?: string title?: React.ReactNode description?: React.ReactNode /** "Runs small — size up." Shown under the table in the default layout. */ fitNote?: React.ReactNode open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void /** Trigger and content parts. Omit for the default layout. */ children?: React.ReactNode } export function SizeGuideDialog({ columns, rows, baseUnit = "cm", unit: unitProp, defaultUnit, onUnitChange, selectedSize, locale: localeProp, title = "Size guide", description = "Body measurements. Measure over light clothing, with the tape level and snug.", fitNote, open: openProp, defaultOpen = false, onOpenChange, children, }: SizeGuideDialogProps) { const locale = useFormatLocale(localeProp) const [unit, setUnit] = useControllableState( unitProp, defaultUnit ?? baseUnit, onUnitChange ) const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange) // The primitive stays open until the exit morph has played; `open` is what // the shopper asked for. Derived during render, so a controlled `open` // that flips from outside animates the same way. const [mounted, setMounted] = React.useState(open) if (open && !mounted) setMounted(true) const closing = mounted && !open const anchorRef = React.useRef(null) const finishClose = React.useCallback(() => setMounted(false), []) const onPrimitiveOpenChange = (next: boolean) => { // Escape pressed twice, or the overlay clicked mid-exit: already closing. if (next === open) return if (next && !anchorRef.current) { // A trigger of your own: grow from whatever opened the dialog. const active = document.activeElement anchorRef.current = active instanceof HTMLElement && active !== document.body ? active : null } setOpen(next) } const context = React.useMemo(() => { const number = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }) const one = (n: number) => number.format(convert(n, baseUnit, unit)) return { columns, rows, unit, setUnit, baseUnit, selectedSize, format: (value) => typeof value === "string" ? value : Array.isArray(value) ? `${one(value[0])}–${one(value[1])}` : one(value), title, description, } }, [columns, rows, unit, setUnit, baseUnit, selectedSize, locale, title, description]) const morph = React.useMemo( () => ({ anchorRef, closing, finishClose }), [closing, finishClose] ) return ( ) } /* ─── parts ────────────────────────────────────────────────────────────── */ /** A quiet text link, sized to sit beside the "Size" label. */ export function SizeGuideTrigger({ className, children = "Size guide", }: { className?: string children?: React.ReactNode }) { const { anchorRef } = useMorph() return ( {/* The morph's origin. A span, not a ref on the trigger: the trigger is your primitive's, and refs reach it differently on each base. */} { anchorRef.current = node }} className="inline-flex items-center gap-1.5" > {children} ) } /** * The panel: title and description, then your parts in a body that scrolls * without a scrollbar. It grows out of the trigger, and shrinks back into it. */ export function SizeGuideContent({ className, children, }: { className?: string children?: React.ReactNode }) { const { title, description } = useSizeGuide() const [body, edges] = useOverflow("y") return ( {title} {description}

{children}

Close ) } /** * The visible surface, and the morph. A container transform: the surface * starts as the trigger's box, scales out to its real size, and only then do * its contents fade in — they are never seen squashed. Closing runs it back. */ function MorphPanel({ children }: { children: React.ReactNode }) { const { anchorRef, closing, finishClose } = useMorph() const reduce = useReducedMotion() const surface = React.useRef(null) const contents = React.useRef(null) const entered = React.useRef(false) // A layout effect, inside the portal: this runs once the panel is in the // document and before the browser paints it, so it never flashes full size. React.useLayoutEffect(() => { const panel = surface.current const inner = contents.current if (!panel || !inner) return const overlay = findOverlay(panel) const running: AnimationPlaybackControls[] = [] let cancelled = false if (!closing) { const from = reduce ? null : deltaTo(panel, anchorRef.current) if (!entered.current) { entered.current = true // Paint the first frame now; Motion takes over on the next one. if (from) { panel.style.transform = `translate(${from.x}px, ${from.y}px) scale(${from.scaleX}, ${from.scaleY})` } else { panel.style.opacity = "0" } inner.style.opacity = "0" running.push( from ? animate(panel, { x: [from.x, 0], y: [from.y, 0], scaleX: [from.scaleX, 1], scaleY: [from.scaleY, 1] }, MORPH) : animate(panel, reduce ? { opacity: [0, 1] } : { opacity: [0, 1], y: [8, 0] }, { duration: reduce ? 0.15 : 0.3, ease: MORPH.ease }) ) } else { // Reopened while still closing: turn around from wherever it is. running.push(animate(panel, { x: 0, y: 0, scaleX: 1, scaleY: 1, opacity: 1 }, MORPH)) if (overlay) running.push(animate(overlay, { opacity: 1 }, { duration: 0.2 })) } running.push( animate(inner, { opacity: 1 }, { duration: 0.25, delay: from ? 0.2 : 0, ease: "easeOut" }) ) } else { const to = reduce ? null : deltaTo(panel, anchorRef.current) running.push(animate(inner, { opacity: 0 }, { duration: 0.12, ease: "easeIn" })) if (to) { running.push( animate(panel, { x: to.x, y: to.y, scaleX: to.scaleX, scaleY: to.scaleY }, { ...MORPH, duration: 0.38, delay: 0.06 }), // The last of it fades, so the box hands over to the link. animate(panel, { opacity: 0 }, { duration: 0.14, delay: 0.3 }) ) } else { running.push(animate(panel, reduce ? { opacity: 0 } : { opacity: 0, y: 8 }, { duration: reduce ? 0.15 : 0.2 })) } if (overlay) running.push(animate(overlay, { opacity: 0 }, { duration: 0.3, delay: 0.1 })) // A fallback, should a frame never come (a background tab, say). const fallback = window.setTimeout(() => !cancelled && finishClose(), 800) Promise.all(running.map((animation) => animation.finished)).then(() => { window.clearTimeout(fallback) if (!cancelled) finishClose() }) return () => { cancelled = true window.clearTimeout(fallback) running.forEach((animation) => animation.stop()) } } return () => { cancelled = true running.forEach((animation) => animation.stop()) } // Runs on open and on close; `reduce` is read, not watched. // eslint-disable-next-line react-hooks/exhaustive-deps }, [closing]) return (

{children}

) } /** * The move and scale that lay the panel over `anchor`. Null when there is no * anchor on screen — then the panel rises and fades instead. */ function deltaTo(panel: HTMLElement, anchor: HTMLElement | null) { if (!anchor?.isConnected) return null const a = anchor.getBoundingClientRect() if (a.width === 0 || a.height === 0) return null // Untransformed size: the panel may be mid-morph when this runs. const width = panel.offsetWidth const height = panel.offsetHeight const box = panel.parentElement?.getBoundingClientRect() if (!box || width === 0 || height === 0) return null // The panel fills its positioned parent, which is never transformed by us. const centerX = box.left + box.width / 2 const centerY = box.top + box.height / 2 return { x: a.left + a.width / 2 - centerX, y: a.top + a.height / 2 - centerY, scaleX: a.width / width, scaleY: a.height / height, } } /** The dialog's overlay: a sibling of the content, somewhere up the portal. */ function findOverlay(panel: HTMLElement) { const content = panel.closest('[data-slot="dialog-content"]') let node = content?.parentElement ?? null while (node && node !== document.body) { const overlay = node.querySelector(':scope > [data-slot="dialog-overlay"]') if (overlay) return overlay node = node.parentElement } return null } /** A soft edge over scrolled-away content, in place of a scrollbar. */ function EdgeFade({ side, visible }: { side: "bottom" | "right"; visible: boolean }) { return (

) } /** cm / in, as a pressed-button pair: two options do not need a menu. */ export function SizeGuideUnitToggle({ className }: { className?: string }) { const { unit, setUnit } = useSizeGuide() return (

{( [ ["cm", "Centimetres"], ["in", "Inches"], ] as const ).map(([key, name]) => ( ))}

) } /** * Ruled, not striped. The size column stays put while the measurements * scroll sideways inside the table — never the page — on a narrow screen, * with a soft edge, not a scrollbar, saying there is more. */ export function SizeGuideTable({ className }: { className?: string }) { const { columns, rows, unit, selectedSize, format } = useSizeGuide() const [scroller, edges] = useOverflow("x") const unitName = unit === "cm" ? "centimetres" : "inches" return (

{/* Separate borders, drawn on the cells: with collapsed borders the pinned size column paints over the row rules as it scrolls. */} Body measurements in {unitName} Size {columns.map((column) => ( {column} ))} {rows.map((row) => { const selected = row.size === selectedSize return ( {row.size} {selected ? ( Selected ) : null} {columns.map((column, i) => ( {row.values[i] === undefined ? "—" : format(row.values[i])} ))} ) })}

) } /** The fit note: one line of judgment under the numbers. */ export function SizeGuideNote({ className, ...props }: React.HTMLAttributes) { return (

) } 62:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["dialog","table"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"src/registry/ecomcn/size-guide-dialog/size-guide-dialog.tsx","content":"$65","type":"registry:component","target":"components/ecomcn/size-guide-dialog.tsx"}],"className":"h-[70svh] min-h-80"}]]}]