"use client"; /** * @author: @dorianbaffier * @description: Cart Button * @version: 1.0.0 * @date: 2026-10-22 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Cherry, Croissant, type LucideIcon, Milk, Minus, Plus, Trash2, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type MouseEvent, type PointerEvent, useCallback, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; /** Pill widths: "Add +" at rest, "− n +" once something is in the cart. */ const WIDTH_CLOSED = 80; const WIDTH_OPEN = 108; /** Press and hold + or −: wait, then repeat faster and faster. */ const HOLD_DELAY = 380; const REPEAT_FIRST = 150; const REPEAT_FASTEST = 55; /** How long "Limit n per order" stays up. */ const LIMIT_FOR = 1600; export interface AddToCartButtonProps { /** Controlled quantity. Leave out to let the button keep its own. */ quantity?: number; defaultQuantity?: number; /** Most of this item one order can hold. */ max?: number; /** Item name, used in the button labels for screen readers. */ name?: string; label?: string; onQuantityChange?: (quantity: number) => void; className?: string; } /** * "Add +" that opens into a "− n +" stepper in place. The + never moves, so a * second tap lands where the first did. At one, − turns into a bin; holding * + or − repeats, and a hold on − stops at one rather than emptying the line. */ export function AddToCartButton({ quantity, defaultQuantity = 0, max = 9, name = "item", label = "Add", onQuantityChange, className, }: AddToCartButtonProps) { const [ownQuantity, setOwnQuantity] = useState(defaultQuantity); const value = quantity ?? ownQuantity; const [direction, setDirection] = useState(1); const [limitHits, setLimitHits] = useState(0); const [showLimit, setShowLimit] = useState(false); const reduceMotion = Boolean(useReducedMotion()); const valueRef = useRef(value); valueRef.current = value; const holdRef = useRef>(undefined); const limitRef = useRef>(undefined); const addRef = useRef(null); const plusRef = useRef(null); const focusNext = useRef<"add" | "plus" | null>(null); const open = value > 0; const commit = useCallback( (next: number) => { const clamped = Math.min(max, Math.max(0, next)); if (clamped === valueRef.current) { return; } setDirection(clamped > valueRef.current ? 1 : -1); valueRef.current = clamped; if (quantity === undefined) { setOwnQuantity(clamped); } onQuantityChange?.(clamped); }, [max, quantity, onQuantityChange] ); const hitLimit = useCallback(() => { setLimitHits((hits) => hits + 1); setShowLimit(true); clearTimeout(limitRef.current); limitRef.current = setTimeout(() => setShowLimit(false), LIMIT_FOR); }, []); /** One step; returns false when the step can't happen. */ const step = useCallback( (delta: number) => { if (delta > 0 && valueRef.current >= max) { hitLimit(); return false; } if (delta < 0 && valueRef.current === 1) { // The last one out: hand focus back to "Add" if it was on −. focusNext.current = "add"; } commit(valueRef.current + delta); return true; }, [commit, hitLimit, max] ); const stopHold = useCallback(() => clearTimeout(holdRef.current), []); const startHold = (delta: number) => (event: PointerEvent) => { if (event.button !== 0) { return; } event.currentTarget.setPointerCapture(event.pointerId); stopHold(); if (!step(delta)) { return; } let interval = REPEAT_FIRST; const tick = () => { // A hold on − stops at one: emptying the line takes its own tap. if (delta < 0 && valueRef.current <= 1) { return; } if (!step(delta)) { return; } interval = Math.max(REPEAT_FASTEST, interval * 0.82); holdRef.current = setTimeout(tick, interval); }; holdRef.current = setTimeout(tick, HOLD_DELAY); }; // Pointer presses step on pointerdown; Enter and Space arrive as a click. const keyStep = (delta: number) => (event: MouseEvent) => { if (event.detail === 0) { step(delta); } }; const add = () => { focusNext.current = "plus"; setDirection(1); commit(1); }; useEffect(() => { if (focusNext.current === "plus" && value > 0) { plusRef.current?.focus(); } if (focusNext.current === "add" && value === 0) { // After the press settles, or the browser drops focus on the removed −. requestAnimationFrame(() => addRef.current?.focus()); } focusNext.current = null; if (value === 0) { clearTimeout(holdRef.current); } }, [value]); useEffect( () => () => { clearTimeout(holdRef.current); clearTimeout(limitRef.current); }, [] ); const atMax = value >= max; const fade = reduceMotion ? { duration: 0 } : { duration: 0.2, ease: EASE_OUT }; return (

{showLimit && ( Limit {max} per order )} {!open && ( {label} )} {open ? (

{`Quantity of ${name}`} {`${value} ${name} in cart`} 0 && !reduceMotion ? { x: [0, -3, 3, -2, 2, 0] } : undefined } aria-hidden className="flex" key={limitHits} transition={{ duration: 0.3, ease: "easeOut" }} >

) : ( )}

); } /** − at two or more; a bin at one, since the next tap empties the line. */ function MinusGlyph({ bin, reduceMotion, }: { bin: boolean; reduceMotion: boolean; }) { return ( {bin ? ( ) : ( )} ); } /** Each character rolls on its own, keyed by its place from the right. */ function RollingText({ text, direction, reduceMotion, }: { text: string; direction: number; reduceMotion: boolean; }) { const places = text.split("").map((char, index) => ({ char, place: text.length - index, })); return ( {places.map(({ char, place }) => ( ({ y: dir * 12, opacity: 0 }), out: (dir: number) => ({ y: dir * -12, opacity: 0 }), }} > {char} ))} ); } export interface CartItem { id: string; name: string; /** Pack size or weight, shown under the name. */ detail: string; price: number; icon: LucideIcon; /** Tailwind classes for the icon tile. */ tint: string; max?: number; } export interface CartButtonProps { items?: CartItem[]; /** Starting quantities, by item id. */ defaultQuantities?: Record; currency?: string; onCheckout?: (quantities: Record) => void; className?: string; } const DEFAULT_ITEMS: CartItem[] = [ { id: "oat-milk", name: "Oat milk", detail: "1 L · Barista", price: 3.2, icon: Milk, tint: "bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-300", max: 6, }, { id: "croissant", name: "Butter croissant", detail: "Baked this morning", price: 2.6, icon: Croissant, tint: "bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-300", max: 8, }, { id: "cherries", name: "Cherries", detail: "500 g punnet", price: 5.8, icon: Cherry, tint: "bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-300", max: 3, }, ]; const money = (value: number, currency: string) => `${currency}${value.toFixed(2)}`; export default function CartButton({ items = DEFAULT_ITEMS, defaultQuantities = { croissant: 2 }, currency = "$", onCheckout, className, }: CartButtonProps) { const [quantities, setQuantities] = useState(defaultQuantities); const reduceMotion = Boolean(useReducedMotion()); const count = items.reduce( (sum, item) => sum + (quantities[item.id] ?? 0), 0 ); const total = items.reduce( (sum, item) => sum + (quantities[item.id] ?? 0) * item.price, 0 ); let summary = "Your cart is empty"; if (count > 0) { summary = `Subtotal · ${count} ${count === 1 ? "item" : "items"}`; } const lastTotal = useRef(total); const direction = total >= lastTotal.current ? 1 : -1; useEffect(() => { lastTotal.current = total; }, [total]); return (

{item.name} {money(item.price, currency)} {` · ${item.detail}`} setQuantities((current) => ({ ...current, [item.id]: next })) } quantity={quantities[item.id] ?? 0} />

{summary}

); }

Cart Button

On this page