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:T51d7,"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 ShipCountry { code: string; name: string; postalLabel: string; placeholder: string; pattern: RegExp; /** Business days: [min, max] per method; null = not offered. */ standard: [number, number]; express: [number, number] | null; nextDay: boolean; expressPrice: number; /** Postal codes that start with one of these get a surcharge and no next-day. */ remote?: string[]; } export interface ShipOption { id: string; label: string; price: number; days: [number, number]; note?: string; } export interface ShippingEstimatorProps { countries?: ShipCountry[]; subtotal?: number; freeOver?: number; currency?: string; store?: { name: string; address: string }; onSelect?: (option: ShipOption, location: { country: string; postal: string }) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", field: "#0F0F0F", 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.32)", accent: "#7CDE6A", accentText: "#0B1A08", accentSoft: "rgba(124,222,106,0.1)", amber: "#F5B44A", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", error: "#FF7A70", scheme: "dark" as const, }, light: { bg: "#FFFFFF", card: "#F7F7F7", field: "#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)", accent: "#2F9E44", accentText: "#FFFFFF", accentSoft: "rgba(47,158,68,0.08)", amber: "#B86E00", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", error: "#D93025", scheme: "light" as const, }, }; type Palette = (typeof PALETTES)[keyof typeof PALETTES]; const COUNTRIES: ShipCountry[] = [ { code: "US", name: "United States", postalLabel: "ZIP code", placeholder: "10001", pattern: /^\d{5}$/, standard: [3, 5], express: [1, 2], nextDay: true, expressPrice: 12, remote: ["995", "996", "997", "998", "999", "967", "968"] }, { code: "GB", name: "United Kingdom", postalLabel: "Postcode", placeholder: "SW1A 1AA", pattern: /^[A-Z]{1,2}\d[A-Z\d]? ?\d[A-Z]{2}$/i, standard: [2, 4], express: [1, 2], nextDay: true, expressPrice: 14, remote: ["HS", "ZE", "KW"] }, { code: "DE", name: "Germany", postalLabel: "Postleitzahl", placeholder: "10115", pattern: /^\d{5}$/, standard: [4, 7], express: [2, 3], nextDay: false, expressPrice: 18 }, { code: "NL", name: "Netherlands", postalLabel: "Postcode", placeholder: "1011 AB", pattern: /^\d{4} ?[A-Z]{2}$/i, standard: [4, 6], express: [2, 3], nextDay: false, expressPrice: 18 }, { code: "TR", name: "Türkiye", postalLabel: "Posta kodu", placeholder: "34000", pattern: /^\d{5}$/, standard: [6, 10], express: [3, 5], nextDay: false, expressPrice: 22 }, { code: "CA", name: "Canada", postalLabel: "Postal code", placeholder: "M5V 2T6", pattern: /^[A-Z]\d[A-Z] ?\d[A-Z]\d$/i, standard: [5, 8], express: [2, 4], nextDay: false, expressPrice: 16, remote: ["X", "Y"] }, ]; const STORE = { name: "Northline Soho", address: "112 Mercer St, New York" }; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; function addBusinessDays(from: Date, n: number) { const d = new Date(from); let left = n; while (left > 0) { d.setDate(d.getDate() + 1); if (d.getDay() !== 0 && d.getDay() !== 6) left -= 1; } return d; } const fmt = (d: Date) => `${DAYS[d.getDay()]}, ${MONTHS[d.getMonth()]} ${d.getDate()}`; const money = (n: number, c: string) => (n === 0 ? "Free" : `${c}${n.toFixed(2)}`); function Icon({ id }: { id: string }) { const common = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, "aria-hidden": true }; if (id === "pickup") return ( ); if (id === "next") return ( ); return ( ); } function Timeline({ option, start, p }: { option: ShipOption; start: Date; p: Palette }) { const reduce = useReducedMotion(); const ship = option.id === "pickup" ? start : addBusinessDays(start, option.days[0] > 1 ? 1 : 0); const steps = option.id === "pickup" ? [ { k: "Order today", d: fmt(start) }, { k: "Ready for pickup", d: fmt(addBusinessDays(start, 1)) }, ] : [ { k: "Order today", d: fmt(start) }, { k: "Ships", d: fmt(ship) }, { k: "Arrives", d: option.days[0] === option.days[1] ? fmt(addBusinessDays(start, option.days[0])) : `${fmt(addBusinessDays(start, option.days[0]))} – ${fmt(addBusinessDays(start, option.days[1]))}` }, ]; return (

); } export function ShippingEstimator({ countries = COUNTRIES, subtotal = 42, freeOver = 50, currency = "$", store = STORE, onSelect, theme = "dark", className }: ShippingEstimatorProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [code, setCode] = React.useState(countries[0].code); const [postal, setPostal] = React.useState(""); const [tried, setTried] = React.useState(false); const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState<{ country: ShipCountry; postal: string; remote: boolean; start: Date } | null>(null); const [choice, setChoice] = React.useState("standard"); const inputRef = React.useRef(null); const country = countries.find((c) => c.code === code) ?? countries[0]; const clean = postal.trim().toUpperCase(); const valid = country.pattern.test(clean); const err = tried && !valid ? `Enter a valid ${country.postalLabel}, like ${country.placeholder}.` : ""; const free = subtotal >= freeOver; const toFree = Math.max(0, freeOver - subtotal); const options: ShipOption[] = React.useMemo(() => { if (!result) return []; const c = result.country; const surcharge = result.remote ? 15 : 0; const list: ShipOption[] = [ { id: "standard", label: "Standard", price: (free ? 0 : 6.95) + surcharge, days: [c.standard[0] + (result.remote ? 2 : 0), c.standard[1] + (result.remote ? 3 : 0)], note: free ? "Free over " + `${currency}${freeOver}` : undefined }, ]; if (c.express) list.push({ id: "express", label: "Express", price: c.expressPrice + surcharge, days: c.express }); if (c.nextDay && !result.remote) list.push({ id: "next", label: "Next day", price: c.expressPrice * 2, days: [1, 1], note: "Order by 2 pm" }); if (c.code === "US") list.push({ id: "pickup", label: "Pick up in store", price: 0, days: [1, 1], note: store.name }); return list; }, [result, free, currency, freeOver, store.name]); const chosen = options.find((o) => o.id === choice) ?? options[0]; const estimate = (e: React.FormEvent) => { e.preventDefault(); setTried(true); if (!valid) { inputRef.current?.focus(); return; } setLoading(true); const remote = !!country.remote?.some((r) => clean.startsWith(r)); // Dates are only computed after a click, in the browser, so server and client renders never disagree. setTimeout( () => { setResult({ country, postal: clean, remote, start: new Date() }); setChoice("standard"); setLoading(false); }, reduce ? 0 : 650, ); }; const pick = (o: ShipOption) => { setChoice(o.id); if (result) onSelect?.(o, { country: result.country.code, postal: result.postal }); }; return (

Shipping & delivery

See costs and delivery dates before you check out.

{/* Free shipping progress */}

{free ? ( Your order ships free with Standard delivery. ) : ( <> Add {`${currency}${toFree.toFixed(2)}`} more for free Standard shipping. )}

Country

{country.postalLabel} setPostal(e.target.value)} placeholder={country.placeholder} autoComplete="postal-code" aria-invalid={!!err} aria-describedby={err ? `${uid}-err` : undefined} className="h-11 w-full rounded-xl border px-3.5 text-[14px] uppercase outline-none placeholder:normal-case placeholder:opacity-60 focus:border-current" style={{ background: p.field, color: p.title, borderColor: err ? p.error : p.line }} />

{err ? ( {err} ) : null} {result ? (

Shipping to {result.postal}, {result.country.name} {result.remote ? · remote area, +{currency}15 and a little longer : null}

{options.map((o, i) => { const on = chosen?.id === o.id; const days = o.days[0] === o.days[1] ? (o.id === "pickup" ? "Ready tomorrow" : "Tomorrow") : `${o.days[0]}–${o.days[1]} business days`; return ( pick(o)} initial={reduce ? false : { opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: reduce ? 0 : i * 0.06 }} className="relative flex items-center gap-3 rounded-xl border px-3.5 py-3 text-left" style={{ borderColor: on ? p.accent : p.line }} > {on ? : null} {o.label} {days} {o.note ? ` · ${o.note}` : ""} {money(o.price, currency)} ); })}

) : ( We ship to {countries.length} countries. Remote areas may take a little longer. )}

{/* Summary */}

Delivery estimate

{result && chosen ? (

{chosen.label} {money(chosen.price, currency)}

{chosen.id === "pickup" ? (

{store.name}, {store.address}. Bring your order email and an ID.

) : (

Estimates exclude weekends and public holidays. You’ll get tracking as soon as your order ships.

)} ) : (

Enter your {country.postalLabel} to see delivery dates for every option.

)}

); } export default ShippingEstimator; 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/shipping-estimator/shipping-estimator.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]