"use client"; /** * @author: @dorianbaffier * @description: Amount Pad * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowUp, Check, Delete } from "lucide-react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, } from "motion/react"; import { type KeyboardEvent, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const MAX_WHOLE_DIGITS = 7; const DIGIT = /^\d$/; const KEY_LABELS: Record = { back: "Delete", ".": "Decimal point", }; const KEYS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "back"]; export interface AmountPadProps { /** Who the money goes to. */ recipient?: { name: string; handle?: string }; /** Currency sign drawn before the amount. */ currency?: string; /** Largest amount allowed in one go. */ max?: number; /** Shown under the amount until you hit the cap. */ balance?: number; /** One-tap amounts. */ presets?: number[]; onSend?: (amount: number) => void; className?: string; } /** One typed character, with an id that follows it as commas move around. */ interface Char { id: number; char: string; } interface Glyph { key: string; char: string; kind: "digit" | "sep" | "ghost"; } const toNumber = (chars: Char[]) => Number.parseFloat(chars.map((c) => c.char).join("") || "0"); const money = (value: number, currency: string) => `${currency}${value.toLocaleString("en-US", { minimumFractionDigits: value % 1 === 0 ? 0 : 2, maximumFractionDigits: 2, })}`; /** What typing `key` does to the amount: the new characters, or null if it can't take it. */ function typeKey( chars: Char[], key: string, make: (char: string) => Char ): Char[] | null { const point = chars.findIndex((c) => c.char === "."); if (key === ".") { if (point !== -1) { return null; } return chars.length === 0 ? [make("0"), make(".")] : [...chars, make(".")]; } const centsFull = point !== -1 && chars.length - point > 2; const wholeFull = point === -1 && chars.length >= MAX_WHOLE_DIGITS; if (centsFull || wholeFull) { return null; } // A lone leading zero is replaced, not followed. return chars.length === 1 && chars[0].char === "0" ? [make(key)] : [...chars, make(key)]; } /** * Lays typed characters out as an amount: commas every three whole digits, * keyed by the digit they sit in front of, and faint zeros after the point * for the cents still to come. */ function layout(chars: Char[]): Glyph[] { const point = chars.findIndex((c) => c.char === "."); const whole = point === -1 ? chars : chars.slice(0, point); const glyphs: Glyph[] = []; whole.forEach((c, index) => { const fromRight = whole.length - index; if (index > 0 && fromRight % 3 === 0) { glyphs.push({ key: `comma-${c.id}`, char: ",", kind: "sep" }); } glyphs.push({ key: `d-${c.id}`, char: c.char, kind: "digit" }); }); if (point !== -1) { const cents = chars.slice(point + 1); glyphs.push({ key: `d-${chars[point].id}`, char: ".", kind: "sep" }); for (const c of cents) { glyphs.push({ key: `d-${c.id}`, char: c.char, kind: "digit" }); } for (let i = cents.length; i < 2; i++) { glyphs.push({ key: `ghost-${i}`, char: "0", kind: "ghost" }); } } return glyphs; } export default function AmountPad({ recipient = { name: "Maya Chen", handle: "@maya" }, currency = "$", max = 2500, balance = 3204.18, presets = [20, 50, 100], onSend, className, }: AmountPadProps) { const [chars, setChars] = useState([]); const [capped, setCapped] = useState(false); const [sent, setSent] = useState(null); const reduceMotion = useReducedMotion(); const nextId = useRef(1); const frameRef = useRef(null); const amountRef = useRef(null); const capTimer = useRef>(undefined); const sentTimer = useRef>(undefined); const fit = useMotionValue(1); const shakeX = useMotionValue(0); const value = toNumber(chars); const empty = chars.length === 0; useEffect( () => () => { clearTimeout(capTimer.current); clearTimeout(sentTimer.current); }, [] ); // The amount shrinks to stay on one line as it grows, and grows back as // digits are deleted. useLayoutEffect(() => { const frame = frameRef.current; const amount = amountRef.current; if (!(frame && amount)) { return; } const measure = () => { const target = Math.min(1, frame.clientWidth / amount.scrollWidth); animate( fit, target, reduceMotion ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 34 } ); }; measure(); const observer = new ResizeObserver(measure); observer.observe(frame); observer.observe(amount); return () => observer.disconnect(); }, [fit, reduceMotion]); const refuse = useCallback( (showCap: boolean) => { if (showCap) { setCapped(true); clearTimeout(capTimer.current); capTimer.current = setTimeout(() => setCapped(false), 1800); } if (!reduceMotion) { animate(shakeX, [0, -10, 9, -6, 4, 0], { duration: 0.36, ease: "easeOut", }); } }, [reduceMotion, shakeX] ); const make = (char: string): Char => { const id = nextId.current; nextId.current += 1; return { id, char }; }; const press = (key: string) => { setSent(null); if (key === "back") { setChars((current) => current.slice(0, -1)); setCapped(false); return; } const next = typeKey(chars, key, make); if (!next) { refuse(false); } else if (toNumber(next) > max) { refuse(true); } else { setChars(next); } }; const preset = (amount: number) => { setSent(null); setCapped(false); setChars([...String(Math.min(amount, max))].map(make)); }; const send = () => { if (empty || value <= 0) { refuse(false); return; } onSend?.(value); setSent(value); clearTimeout(sentTimer.current); sentTimer.current = setTimeout(() => { setChars([]); setSent(null); }, 1600); }; const onKeyDown = (event: KeyboardEvent) => { if (event.metaKey || event.ctrlKey || event.altKey) { return; } let key: string | null = null; if (DIGIT.test(event.key) || event.key === ".") { key = event.key; } else if (event.key === ",") { key = "."; } else if (event.key === "Backspace") { key = "back"; } if (key) { event.preventDefault(); press(key); } else if (event.key === "Enter" && event.target === event.currentTarget) { send(); } }; const glyphs = layout(chars); let sendTone = "bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white"; if (sent !== null) { sendTone = "bg-emerald-600 text-white dark:bg-emerald-500 dark:text-emerald-950"; } else if (empty) { sendTone = "bg-zinc-100 text-zinc-400 dark:bg-zinc-900 dark:text-zinc-600"; } const digitIn = reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 520, damping: 30, mass: 0.8 }; const slide = reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 500, damping: 40 }; const initials = recipient.name .split(" ") .map((part) => part[0]) .join("") .slice(0, 2); return ( // biome-ignore lint/a11y/noStaticElementInteractions: typing anywhere in the pad goes to the amount; the keys themselves are buttons. // biome-ignore lint/a11y/noNoninteractiveElementInteractions: same as above

{initials}

Send to

{recipient.name} {recipient.handle && ( {recipient.handle} )}

{currency} {empty && ( 0 )} {glyphs.map((glyph) => ( {glyph.char} ))}

{capped ? `Up to ${money(max, currency)} per transfer` : `Balance ${currency}${balance.toLocaleString("en-US", { minimumFractionDigits: 2 })}`}

{presets.map((amount) => ( ))}

{KEYS.map((key) => ( ))}

); }

Amount Pad

On this page