"use client"; /** * @author: @dorianbaffier * @description: Tip Selector * @version: 2.0.0 * @date: 2026-10-22 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Check, Heart } from "lucide-react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { type PointerEvent, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; /** Width of one percent on the tape, in px. */ const TICK = 16; const SETTLE = { type: "spring", stiffness: 420, damping: 42 } as const; export interface TipSelectorProps { /** The order before the tip. */ subtotal?: number; /** Who the tip goes to. */ recipient?: { name: string; note?: string }; /** Marked on the tape and offered as shortcuts, in percent. */ percents?: number[]; /** Where the tape starts. */ defaultPercent?: number; /** The far end of the tape, in percent. */ max?: number; currency?: string; onChange?: (tip: number) => void; onPay?: (total: number) => void; className?: string; } const round2 = (n: number) => Math.round(n * 100) / 100; const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n)); const fmt = (n: number, currency: string) => `${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; /** Past either end the tape gives, but less and less. */ const rubber = (value: number, max: number) => { if (value < 0) { return -Math.sqrt(-value) * 0.9; } return value > max ? max + Math.sqrt(value - max) * 0.9 : value; }; /** * A money amount whose digits roll: up when it grows, down when it shrinks. * Columns are keyed from the right, so cents stay over cents. */ function Rolling({ value, currency, reduceMotion, className, }: { value: number; currency: string; reduceMotion: boolean; className?: string; }) { const [last, setLast] = useState(value); const [direction, setDirection] = useState(1); if (last !== value) { setDirection(value > last ? 1 : -1); setLast(value); } const text = fmt(value, currency); const chars = [...text]; return ( {text} {chars.map((char, i) => { const column = chars.length - i; return ( ); })} ); } function Ticks({ max, percents }: { max: number; percents: number[] }) { const ticks: number[] = []; for (let i = 0; i <= max; i++) { ticks.push(i); } return ( <> {ticks.map((i) => { const major = i % 5 === 0; const marked = percents.includes(i); return ( ); })} ); } /** * A tip picker for checkout, set on a tape you drag. Flick it and it coasts * to a whole percent; the ticks you've passed fill in, the tip and total roll, * and Round up picks the tip that makes the total a whole amount. */ export default function TipSelector({ subtotal = 42.6, recipient = { name: "Sam", note: "Your courier · 6 min early" }, percents = [15, 18, 20], defaultPercent = 18, max = 30, currency = "$", onChange, onPay, className, }: TipSelectorProps) { const [percent, setPercent] = useState(defaultPercent); // Round up sets the tip itself, so the total lands on a whole amount. const [exactTip, setExactTip] = useState(null); const [dragging, setDragging] = useState(false); const [paid, setPaid] = useState(false); const reduceMotion = Boolean(useReducedMotion()); const position = useMotionValue(defaultPercent); const x = useTransform(position, (v) => -v * TICK); const filled = useTransform( position, (v) => `inset(0px ${(max - clamp(v, 0, max)) * TICK}px 0px -2px)` ); const drag = useRef({ x: 0, from: 0, v: 0, t: 0, lastX: 0 }); const tip = exactTip ?? round2((subtotal * percent) / 100); const total = round2(subtotal + tip); const roundTip = round2(Math.floor(subtotal + tip) + 1 - subtotal); const commit = (next: number, exact: number | null = null) => { setPercent(next); setExactTip(exact); setPaid(false); onChange?.(exact ?? round2((subtotal * next) / 100)); }; const glide = (target: number, exact: number | null = null) => { commit(Math.round(target), exact); if (reduceMotion) { position.set(target); return; } animate(position, target, SETTLE); }; const onDown = (event: PointerEvent) => { if (event.button !== 0) { return; } position.stop(); event.currentTarget.setPointerCapture(event.pointerId); drag.current = { x: event.clientX, from: position.get(), v: 0, t: event.timeStamp, lastX: event.clientX, }; setDragging(true); }; const onMove = (event: PointerEvent) => { if (!dragging) { return; } const d = drag.current; const dt = Math.max(1, event.timeStamp - d.t); d.v = d.v * 0.6 + ((event.clientX - d.lastX) / dt) * 0.4; d.t = event.timeStamp; d.lastX = event.clientX; const raw = d.from - (event.clientX - d.x) / TICK; position.set(rubber(raw, max)); const next = clamp(Math.round(raw), 0, max); if (next !== percent || exactTip !== null) { commit(next); } }; const onUp = () => { if (!dragging) { return; } setDragging(false); // Carry the flick a little way, then settle on a whole percent. const coast = (-drag.current.v * 160) / TICK; glide(clamp(Math.round(position.get() + coast), 0, max)); }; return (

{recipient.name.slice(0, 1)}

Tip {recipient.name}

{recipient.note && (

{recipient.note}

)}

{tip === 0 ? "No tip" : `${exactTip === null ? percent : ((tip / subtotal) * 100).toFixed(1)}% of ${fmt(subtotal, currency)}`}

{/* The tape. A range input underneath keeps it on the keyboard. */}

glide(Number(event.target.value))} step={1} type="range" value={percent} /> {/* The needle. */}

{percents.map((p) => ( ))}

Subtotal: {fmt(subtotal, currency)}
Tip all to {recipient.name}: {fmt(tip, currency)}
Total

); }

Tip Selector

On this page