62: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"] 63: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"] 64:T2b6b,"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface ShippingTier { at: number; label: string; icon: "truck" | "gift" | "bolt"; } export interface FreeShippingProgressBarProps { subtotal?: number; tiers?: ShippingTier[]; /** Small add-ons that close the gap, shown until the last tier is reached. */ suggestions?: { id: string; title: string; price: number; image?: string }[]; currency?: string; onAdd?: (id: string) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", card: "#141414", photo: "#F1F1F1", track: "rgba(255,255,255,0.1)", buttonBg: "#FFFFFF", buttonText: "#111111", accent: "#7CDE6A", ring: "rgba(255,255,255,0.5)" }, light: { bg: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", card: "#F7F7F6", photo: "#F1F1F1", track: "rgba(0,0,0,0.08)", buttonBg: "#111111", buttonText: "#FFFFFF", accent: "#2F9E44", ring: "rgba(0,0,0,0.45)" }, }; const TIERS: ShippingTier[] = [ { at: 50, label: "Free shipping", icon: "truck" }, { at: 100, label: "Free gift", icon: "gift" }, { at: 150, label: "Free express", icon: "bolt" }, ]; const SUGGESTIONS = [ { id: "notebook", title: "Premium Notebook", price: 24, image: "/demo/notebook.webp" }, { id: "bottle", title: "Insulated Water Bottle", price: 39, image: "/demo/insulated-water-bottle.webp" }, { id: "stand", title: "Laptop Stand", price: 49, image: "/demo/laptop-stand.webp" }, ]; const ICON: Record = { truck: "M3 7h11v9H3zM14 10h4l3 3v3h-7M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z", gift: "M4 10h16v10H4zM3 7h18v3H3zM12 7v13M12 7c-2-3-6-3-6 0M12 7c2-3 6-3 6 0", bolt: "M13 3 5 14h6l-1 7 8-11h-6z", }; export function FreeShippingProgressBar({ subtotal: start = 38, tiers = TIERS, suggestions = SUGGESTIONS, currency = "$", onAdd, theme = "dark", className }: FreeShippingProgressBarProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const [subtotal, setSubtotal] = React.useState(start); const [added, setAdded] = React.useState([]); const [celebrate, setCelebrate] = React.useState(null); const max = tiers[tiers.length - 1].at; const fill = useMotionValue(Math.min(1, start / max)); const width = useTransform(fill, (v) => `${v * 100}%`); const shown = useMotionValue(start); const shownText = useTransform(shown, (v) => `${currency}${v.toFixed(2)}`); const reached = tiers.filter((t) => subtotal >= t.at).length; const next = tiers.find((t) => subtotal < t.at); const left = next ? next.at - subtotal : 0; const money = (n: number) => `${currency}${n.toFixed(2)}`; React.useEffect(() => { const a = animate(fill, Math.min(1, subtotal / max), reduce ? { duration: 0 } : { duration: 0.8, ease: [0.22, 1, 0.36, 1] }); const b = animate(shown, subtotal, reduce ? { duration: 0 } : { duration: 0.6 }); return () => { a.stop(); b.stop(); }; }, [subtotal, max, reduce, fill, shown]); React.useEffect(() => { if (!celebrate) return; const t = setTimeout(() => setCelebrate(null), 2600); return () => clearTimeout(t); }, [celebrate]); const add = (s: (typeof suggestions)[number]) => { const after = subtotal + s.price; const nowReached = tiers.filter((t) => after >= t.at).length; if (nowReached > reached) setCelebrate(tiers[nowReached - 1].label); setSubtotal(after); setAdded((a) => [...a, s.id]); onAdd?.(s.id); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const pool = suggestions.filter((s) => !added.includes(s.id)); const best = next ? [...pool.filter((s) => s.price >= left).sort((a, b) => a.price - b.price), ...pool.filter((s) => s.price < left).sort((a, b) => b.price - a.price)] : []; return (

{next ? ( <> You're {money(left)} away from {next.label.toLowerCase()} ) : ( <>🎉 You've unlocked everything )}

{reached ? `${tiers .slice(0, reached) .map((t) => t.label) .join(" + ")} included` : "Free shipping starts at " + money(tiers[0].at)}

Bag {shownText}

{/* Track with milestones */}

{!reduce && } {tiers.map((t, i) => { const on = subtotal >= t.at; const last = i === tiers.length - 1; return ( {t.label} {money(t.at)} ); })}

{next && best.length > 0 && (

Close the gap

{/* eslint-disable-next-line @next/next/no-img-element */} {s.image &&

} {s.title} {money(s.price)} {unlocks ? ` · unlocks ${next.label.toLowerCase()}` : ""}

)} {celebrate && ( ✓ {celebrate} unlocked )}

); } export default FreeShippingProgressBar; 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/free-shipping-progress-bar/free-shipping-progress-bar.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]