"use client"; /** * @author: @dorianbaffier * @description: Team Selector * @version: 4.0.0 * @date: 2026-10-16 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Minus, Plus } from "lucide-react"; import { AnimatePresence, animate, MotionConfig, motion, useMotionValue, useReducedMotion, type Variants, } from "motion/react"; import { type CSSProperties, type KeyboardEvent, type PointerEvent, useEffect, useId, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; /** Horizontal pixels of drag per step when scrubbing the number. */ const SCRUB_STEP_PX = 24; /** Furthest the number stretches past a bound, however far you pull. */ const RUBBER_BAND_PX = 14; /** Avatars shown before the stack collapses into a "+N" chip. */ const VISIBLE_AVATARS = 5; const AVATAR_OVERLAP = 8; const ROLL_DISTANCE = 10; const SHAKE_DURATION_MS = 280; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const SNAP_BACK = { type: "spring", stiffness: 600, damping: 32 } as const; export interface TeamMember { id: string; name: string; /** Optional photo. Without it the avatar shows the member's initials. */ avatarUrl?: string; } const DEFAULT_MEMBERS: TeamMember[] = [ { id: "member-1", name: "Alex Rivera" }, { id: "member-2", name: "Blair Kim" }, { id: "member-3", name: "Casey Lin" }, { id: "member-4", name: "Devon Marsh" }, ]; interface Seat extends TeamMember { isOpen: boolean; } const getInitials = (name: string) => name .split(" ") .filter(Boolean) .slice(0, 2) .map((part) => part.charAt(0).toUpperCase()) .join(""); /** Stable hue per name, so the same person always gets the same tint. */ const getHue = (name: string) => { let hash = 0; for (const char of name) { hash = (hash * 31 + (char.codePointAt(0) ?? 0)) % 3_600_000; } return hash % 360; }; const animations = { avatar: { visible: { opacity: 1, scale: 1, transition: { type: "spring", stiffness: 380, damping: 28, mass: 0.6 }, }, hidden: { opacity: 0, scale: 0.85, transition: { duration: 0.16, ease: EASE_OUT }, }, } satisfies Variants, vibration: { idle: { x: 0 }, shake: { x: [-3, 3, -2, 2, 0] as const, transition: { duration: SHAKE_DURATION_MS / 1000, ease: EASE_OUT }, }, } satisfies Variants, // `custom` is the signed offset of the latest change. AnimatePresence hands // the current value to leaving digits too, so they always exit opposite to // the ones coming in. roll: { enter: (offset: number) => ({ opacity: 0, y: offset }), center: { opacity: 1, y: 0, transition: { duration: 0.2, ease: EASE_OUT }, }, exit: (offset: number) => ({ opacity: 0, y: -offset, transition: { duration: 0.12, ease: EASE_OUT }, }), } satisfies Variants, } as const; const LEADING_SYMBOLS = /^[^\d]+/; /** * Rolls each character on its own, keyed by its place from the right, so * 12 → 13 only moves the last digit and 9 → 10 grows a new tens column. */ function RollingText({ text, offset, className, }: { text: string; offset: number; className?: string; }) { // A currency sign stays put; only the digits after it roll, so $96 → $108 // grows a column instead of rolling the "$" into a digit. const prefix = text.match(LEADING_SYMBOLS)?.[0] ?? ""; const columns = [...text.slice(prefix.length)].map((char, index, all) => ({ char, place: all.length - index, })); return ( {prefix} {columns.map(({ char, place }) => ( {char} ))} ); } function SeatAvatar({ seat, index }: { seat: Seat; index: number }) { const base = "flex size-10 items-center justify-center overflow-hidden rounded-full ring-2 ring-white dark:ring-zinc-900"; if (seat.avatarUrl) { return ( // biome-ignore lint/performance/noImgElement: plain keeps the component framework-agnostic and works with any avatar host.

); } if (seat.isOpen) { return ( {index + 1} ); } return ( {getInitials(seat.name)} ); } const STEPPER_BUTTON_CLASS = "flex size-9 shrink-0 items-center justify-center rounded-xl border border-zinc-200/80 bg-white text-zinc-500 transition-[color,background-color,border-color,opacity] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-zinc-400/40 focus-visible:ring-offset-2 active:bg-zinc-100 aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:hover:border-zinc-200/80 aria-disabled:hover:bg-white aria-disabled:hover:text-zinc-500 dark:border-white/8 dark:bg-zinc-900 dark:text-zinc-400 dark:active:bg-zinc-800 dark:focus-visible:ring-zinc-500/40 dark:focus-visible:ring-offset-zinc-900 dark:hover:border-white/16 dark:hover:bg-zinc-800/70 dark:hover:text-zinc-100 dark:aria-disabled:hover:border-white/8 dark:aria-disabled:hover:bg-zinc-900 dark:aria-disabled:hover:text-zinc-400"; interface TeamSelectorProps { /** Known people. Seats beyond this list show as open, numbered slots. */ members?: TeamMember[]; defaultValue?: number; /** Controlled seat count. Pair it with `onChange`. */ value?: number; /** Smallest allowed seat count. Defaults to 1. */ min?: number; /** Largest allowed seat count, independent of `members`. Defaults to 12. */ max?: number; onChange?: (size: number) => void; label?: string; /** When set, shows the per-seat price and the monthly total. */ pricePerSeat?: number; /** ISO 4217 code for the price line. Defaults to "USD". */ currency?: string; className?: string; } export default function TeamSelector({ members = DEFAULT_MEMBERS, defaultValue = 3, value, min = 1, max = 12, onChange, label = "Team size", pricePerSeat, currency = "USD", className, }: TeamSelectorProps) { const labelId = useId(); const upperBound = Math.max(min, max); const clampCount = (count: number) => Math.min(Math.max(count, min), upperBound); const [internalCount, setInternalCount] = useState(() => clampCount(defaultValue) ); const count = clampCount(value ?? internalCount); const [direction, setDirection] = useState<1 | -1>(1); // Direction follows every change, including a controlled `value` set from // outside (state adjusted during render, as React recommends). const [previousCount, setPreviousCount] = useState(count); if (count !== previousCount) { setPreviousCount(count); setDirection(count > previousCount ? 1 : -1); } const [isVibrating, setIsVibrating] = useState(false); const [isScrubbing, setIsScrubbing] = useState(false); const vibrationTimeoutRef = useRef | null>( null ); const scrubRef = useRef<{ startX: number; startCount: number } | null>(null); const stretchX = useMotionValue(0); const prefersReducedMotion = useReducedMotion(); useEffect( () => () => { if (vibrationTimeoutRef.current) { clearTimeout(vibrationTimeoutRef.current); } }, [] ); const triggerVibration = () => { if (prefersReducedMotion || vibrationTimeoutRef.current) { return; } setIsVibrating(true); vibrationTimeoutRef.current = setTimeout(() => { setIsVibrating(false); vibrationTimeoutRef.current = null; }, SHAKE_DURATION_MS); }; const changeCount = (next: number) => { const clamped = clampCount(next); if (clamped === count) { return; } if (value === undefined) { setInternalCount(clamped); } onChange?.(clamped); }; /** Steps by `delta`, or shakes when the step would cross a bound. */ const step = (delta: number) => { const next = count + delta; if (next < min || next > upperBound) { triggerVibration(); return; } changeCount(next); }; const handlePointerDown = (event: PointerEvent) => { if (event.button !== 0) { return; } // No preventDefault: the mousedown that follows focuses the spinbutton // (without a focus-visible ring), so the arrow keys work after a drag. event.currentTarget.setPointerCapture(event.pointerId); scrubRef.current = { startX: event.clientX, startCount: count }; setIsScrubbing(true); }; const handlePointerMove = (event: PointerEvent) => { const scrub = scrubRef.current; if (!scrub) { return; } const travel = event.clientX - scrub.startX; const raw = scrub.startCount + travel / SCRUB_STEP_PX; changeCount(Math.round(raw)); // Past a bound the number keeps following the pointer, but with // exponentially growing resistance, so it never travels more than // RUBBER_BAND_PX however far you pull. let overshoot = 0; if (raw < min) { overshoot = (raw - min) * SCRUB_STEP_PX; } else if (raw > upperBound) { overshoot = (raw - upperBound) * SCRUB_STEP_PX; } const stretch = Math.sign(overshoot) * RUBBER_BAND_PX * (1 - Math.exp(-Math.abs(overshoot) / (RUBBER_BAND_PX * 4))); stretchX.set(stretch); }; const endScrub = () => { if (!scrubRef.current) { return; } scrubRef.current = null; setIsScrubbing(false); if (prefersReducedMotion) { stretchX.set(0); } else { animate(stretchX, 0, SNAP_BACK); } }; const handleKeyDown = (event: KeyboardEvent) => { switch (event.key) { case "ArrowUp": case "ArrowRight": step(1); break; case "ArrowDown": case "ArrowLeft": step(-1); break; case "PageUp": changeCount(count + 5); break; case "PageDown": changeCount(count - 5); break; case "Home": changeCount(min); break; case "End": changeCount(upperBound); break; default: return; } event.preventDefault(); }; const rollOffset = direction * (prefersReducedMotion ? 0 : ROLL_DISTANCE); const unit = count === 1 ? "seat" : "seats"; const seats: Seat[] = Array.from({ length: count }, (_, index) => { const member = members.at(index); return member ? { ...member, isOpen: false } : { id: `open-seat-${index + 1}`, name: `Seat ${index + 1}`, isOpen: true, }; }); const overflowCount = count > VISIBLE_AVATARS ? count - (VISIBLE_AVATARS - 1) : 0; const visibleSeats = overflowCount ? seats.slice(0, VISIBLE_AVATARS - 1) : seats; const formatPrice = (amount: number) => new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: Number.isInteger(pricePerSeat) ? 0 : 2, }).format(amount); return (

{label} {/* Decorative: the spinbutton below carries the value. Only the selected seats render, so the row stays centred; the others slide over (layout) as one enters or leaves. */} {/* aria-disabled rather than disabled: focus stays on the button at the bound and the click still reaches the shake feedback. */} {/* Scrub: drag sideways on the number, like a design tool's number field. Pointer capture keeps the drag alive outside. */} {unit} {pricePerSeat !== undefined && (

{formatPrice(pricePerSeat)} / seat / month

)} {/* Announces changes made with the buttons or the drag; the spinbutton itself only speaks while focused. */} {count} {unit} {pricePerSeat === undefined ? "" : `, ${formatPrice(pricePerSeat * count)} per month`}

); }

Team Selector

On this page