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:T40c0,"use client"; import * as React from "react"; import { AnimatePresence, 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 StockVariant { id: string; label: string; swatch: string; stock: number; } export interface UrgencyCard { id: string; name: string; price: number; image: string; stock: number; /** Units sold in the last 24 hours, from your analytics. */ sold24h?: number; restock?: string; zoom?: number; } export interface LowStockUrgencyBadgeProps { product?: { name: string; price: number; image: string; variants: StockVariant[] }; cards?: UrgencyCard[]; /** Stock at or below this shows the low-stock state. */ lowAt?: number; /** Sold in 24h at or above this shows Selling fast (when stock isn't low). */ hotAt?: number; /** Segments in the stock meter. */ meterMax?: number; currency?: string; onAdd?: (variant: StockVariant, qty: number) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", amber: "#F5B44A", amberText: "#2A1A00", red: "#FF6B5E", redText: "#2B0703", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", seg: "rgba(255,255,255,0.1)", }, light: { bg: "#FFFFFF", card: "#F7F7F7", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", amber: "#E59400", amberText: "#2A1A00", red: "#E03E2D", redText: "#FFFFFF", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", seg: "rgba(0,0,0,0.08)", }, }; type Palette = (typeof PALETTES)["dark"]; const PRODUCT = { name: "Minimal Watch", price: 79, image: "/demo/blocks/product-detail/watch-1.webp", variants: [ { id: "black", label: "Black leather", swatch: "#1C1C1C", stock: 3 }, { id: "tan", label: "Tan leather", swatch: "#A86F43", stock: 14 }, { id: "canvas", label: "Olive canvas", swatch: "#6E7350", stock: 1 }, { id: "mesh", label: "Steel mesh", swatch: "#B9BCC0", stock: 0 }, ], }; const L = "/demo/blocks/product-list"; const CARDS: UrgencyCard[] = [ { id: "shoes", name: "Running Shoes", price: 99, image: "/demo/running-shoes.webp", stock: 4, zoom: 1.15 }, { id: "earbuds", name: "Wireless Earbuds", price: 129, image: "/demo/wireless-earbuds.webp", stock: 40, sold24h: 86, zoom: 1.35 }, { id: "lamp", name: "Desk Lamp", price: 59, image: `${L}/lamp.webp`, stock: 1 }, { id: "backpack", name: "Backpack", price: 89, image: `${L}/backpack.webp`, stock: 0, restock: "Dec 12" }, ]; type Level = "out" | "last" | "low" | "hot" | "ok"; function levelOf(stock: number, lowAt: number, sold24h = 0, hotAt = Infinity): Level { if (stock <= 0) return "out"; if (stock === 1) return "last"; if (stock <= lowAt) return "low"; if (sold24h >= hotAt) return "hot"; return "ok"; } function Badge({ level, stock, sold24h, restock, p, size = "md" }: { level: Level; stock: number; sold24h?: number; restock?: string; p: Palette; size?: "sm" | "md" }) { const reduce = useReducedMotion(); const tone = level === "last" ? { bg: p.red, fg: p.redText } : level === "low" ? { bg: p.amber, fg: p.amberText } : level === "hot" ? { bg: p.accent, fg: p.accentText } : level === "out" ? { bg: "#2A2A2A", fg: "#FFFFFF" } : { bg: "#111111", fg: "#FFFFFF" }; const text = level === "out" ? (restock ? `Back ${restock}` : "Sold out") : level === "last" ? "Last one!" : level === "low" ? `Only ${stock} left` : level === "hot" ? `${sold24h} sold today` : "In stock"; return ( {level === "low" || level === "last" ? ( {!reduce ? : null} ) : level === "hot" ? ( ) : level === "ok" ? ( ); } function Meter({ stock, taking, max, level, p }: { stock: number; taking: number; max: number; level: Level; p: Palette }) { const reduce = useReducedMotion(); const color = level === "last" ? p.red : level === "low" ? p.amber : p.accent; const shown = Math.min(stock, max); return ( ); } export function LowStockUrgencyBadge({ product = PRODUCT, cards = CARDS, lowAt = 5, hotAt = 50, meterMax = 10, currency = "$", onAdd, theme = "dark", className }: LowStockUrgencyBadgeProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [stocks, setStocks] = React.useState>(() => Object.fromEntries(product.variants.map((v) => [v.id, v.stock]))); const [vid, setVid] = React.useState(product.variants[0].id); const [qty, setQty] = React.useState(1); const [added, setAdded] = React.useState(null); const v = product.variants.find((x) => x.id === vid) ?? product.variants[0]; const stock = stocks[v.id] ?? 0; const level = levelOf(stock, lowAt); const take = Math.min(qty, stock); const pick = (id: string) => { setVid(id); setQty(1); setAdded(null); }; const add = () => { if (!stock) return; setStocks((s) => ({ ...s, [v.id]: Math.max(0, (s[v.id] ?? 0) - take) })); setAdded(`${take} × ${v.label}`); setQty(1); onAdd?.(v, take); }; const stockLine = level === "out" ? "This strap is sold out. We restock every few weeks." : level === "last" ? "This is the last one in this strap." : level === "low" ? take > 1 ? `You’re taking ${take} of the last ${stock}.` : `Only ${stock} left in this strap. Order soon.` : `In stock · ${stock} available`; return (

{/* Featured buy box */}

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

{product.name}

{currency} {product.price.toFixed(2)}

Strap {v.label}

{product.variants.map((x) => { const on = x.id === vid; const s = stocks[x.id] ?? 0; return ( ); })}

{stockLine}

{stock ? take : 0}

{stock ? ( <> Add to cart {" "} · {currency} {(product.price * take).toFixed(2)} ) : ( "Sold out" )}

{added ? ( Added {added} to your cart. Items are held for 15 minutes at checkout. ) : null}

{/* Badge styles on product cards */}

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

{c.name}

{currency} {c.price.toFixed(2)}

); } export default LowStockUrgencyBadge; 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/low-stock-urgency-badge/low-stock-urgency-badge.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]