"use client"; /** * @author: @dorianbaffier * @description: Stay Picker * @version: 1.0.0 * @date: 2026-10-22 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ChevronLeft, ChevronRight } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type KeyboardEvent, type PointerEvent, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const DAY_MS = 86_400_000; const WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]; const MONTHS = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; /** Height of one week row, in px. The pill is drawn in the same units. */ const ROW = 52; export interface Night { price: number; /** Sold out: you can't sleep here this night, but you can check out. */ blocked?: boolean; } export interface StayPickerProps { /** First month shown, as YYYY-MM. */ month?: string; /** Price and availability for one night, by date (YYYY-MM-DD). */ getNight?: (date: string) => Night; /** Fewest nights one booking can be. */ minNights?: number; currency?: string; onReserve?: (stay: { checkIn: string; checkOut: string; total: number; }) => void; className?: string; } /** Days since 1970, so ranges can cross months. */ const dayOf = (y: number, m: number, d: number) => Date.UTC(y, m, d) / DAY_MS; const isoOf = (day: number) => new Date(day * DAY_MS).toISOString().slice(0, 10); const shortDate = (day: number) => { const date = new Date(day * DAY_MS); return `${MONTHS[date.getUTCMonth()].slice(0, 3)} ${date.getUTCDate()}`; }; /** Seeded so the server and the browser price the same night the same way. */ function demoNight(iso: string): Night { const [y, m, d] = iso.split("-").map(Number); const day = dayOf(y, m - 1, d); let seed = (day * 7919) % 2_147_483_647; seed = (seed * 16_807) % 2_147_483_647; const weekday = (new Date(day * DAY_MS).getUTCDay() + 6) % 7; const weekend = weekday === 4 || weekday === 5; const price = 150 + (weekend ? 45 : 0) + (seed % 7) * 8; return { price, blocked: seed % 11 === 0 }; } function useMonth(initial: string) { const [y, m] = initial.split("-").map(Number); return useState({ year: y, month: m - 1 }); } interface Segment { row: number; from: number; to: number; roundLeft: boolean; roundRight: boolean; } const ARROW_STEP: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7, }; /** * Where a stay from `from` can end if you aim for `to`: it can't run * through a sold-out night, and it can't be shorter than the minimum. */ function settleStay( from: number, to: number, minNights: number, blocked: (day: number) => boolean | undefined ): { end: number | null; note: string | null } { let end = to; let note: string | null = null; for (let d = from; d < to; d++) { if (blocked(d)) { end = d; note = `Sold out from ${shortDate(d)}`; break; } } if (end - from >= minNights) { return { end, note }; } for (let d = from; d < from + minNights; d++) { if (blocked(d)) { return { end: null, note: `${minNights}-night minimum, and ${shortDate(d)} is sold out`, }; } } return { end: from + minNights, note: to - from < minNights ? `${minNights}-night minimum, so we added a night` : note, }; } /** * One row of the pill as a clip over a full-width bar, so it grows and * shrinks on the GPU. Ends are round only where the stay starts or stops. */ function clipFor(s: Segment) { const left = (s.from / 7) * 100; const right = 100 - ((s.to + 1) / 7) * 100; const l = s.roundLeft ? "22px" : "0px"; const r = s.roundRight ? "22px" : "0px"; return `inset(0% ${right}% 0% ${left}% round ${l} ${r} ${r} ${l})`; } /** The stay, cut into one segment per week row it crosses. */ function segmentsFor( start: number | null, end: number | null, first: number, daysIn: number, lead: number ) { const segments: Segment[] = []; if (start === null || end === null) { return segments; } const a = Math.max(start, first); const b = Math.min(end, first + daysIn - 1); const ia = a - first + lead; const ib = b - first + lead; for ( let row = Math.floor(ia / 7); a <= b && row <= Math.floor(ib / 7); row++ ) { const from = Math.max(ia, row * 7); const to = Math.min(ib, row * 7 + 6); segments.push({ row, from: from % 7, to: to % 7, roundLeft: from === ia && a === start, roundRight: to === ib && b === end, }); } return segments; } function summaryFor(start: number | null, end: number | null) { if (start === null) { return "Pick a check-in night"; } if (end === null) { return `Check-in ${shortDate(start)}. Now pick check-out`; } return `${shortDate(start)} – ${shortDate(end)} · ${end - start} nights`; } function dayTone(edge: boolean, blocked: boolean | undefined) { if (edge) { return ""; } return blocked ? "text-zinc-400 line-through decoration-zinc-300 dark:text-zinc-600 dark:decoration-zinc-700" : "text-zinc-900 dark:text-zinc-100"; } function priceTone(edge: boolean, cheap: boolean) { if (edge) { return "text-white/70 dark:text-zinc-900/60"; } return cheap ? "text-emerald-600 dark:text-emerald-400" : "text-zinc-400 dark:text-zinc-500"; } function DayCell({ day, cell, label, night, cheap, edge, hoverEnd, inStay, focusable, money, onKeyDown, }: { day: number; cell: number; label: number; night: Night; cheap: number; edge: boolean; hoverEnd: boolean; inStay: boolean; focusable: boolean; money: (n: number) => string; onKeyDown: (event: KeyboardEvent, day: number) => void; }) { return ( ); } /** * A date range for booking stays. Every night shows its price, sold-out * nights are hatched, and the stay is drawn as one pill that wraps from * row to row as you drag across the weeks. */ export default function StayPicker({ month: initialMonth = "2026-11", getNight = demoNight, minNights = 2, currency = "$", onReserve, className, }: StayPickerProps) { const [view, setView] = useMonth(initialMonth); const [direction, setDirection] = useState(1); const [start, setStart] = useState(null); const [end, setEnd] = useState(null); const [hover, setHover] = useState(null); const [note, setNote] = useState(null); const [reserved, setReserved] = useState(false); const reduceMotion = Boolean(useReducedMotion()); const dragging = useRef(false); const gridRef = useRef(null); const noteTimer = useRef>(undefined); useEffect(() => () => clearTimeout(noteTimer.current), []); const first = dayOf(view.year, view.month, 1); const daysIn = new Date(Date.UTC(view.year, view.month + 1, 0)).getUTCDate(); const lead = (new Date(first * DAY_MS).getUTCDay() + 6) % 7; const rows = Math.ceil((lead + daysIn) / 7); const nights = new Map(); const nightOf = (day: number) => { let night = nights.get(day); if (!night) { night = getNight(isoOf(day)); nights.set(day, night); } return night; }; const days = Array.from({ length: daysIn }, (_, i) => first + i); const prices = days .filter((d) => !nightOf(d).blocked) .map((d) => nightOf(d).price); // The month's lowest price is marked, so the good nights stand out. const cheap = prices.length ? Math.min(...prices) : 0; const say = (text: string) => { setNote(text); clearTimeout(noteTimer.current); noteTimer.current = setTimeout(() => setNote(null), 2600); }; const settle = (from: number, to: number, speak: boolean) => { const result = settleStay(from, to, minNights, (d) => nightOf(d).blocked); if (speak && result.note) { say(result.note); } return result.end; }; const picking = start !== null && end === null; const shownEnd = picking && hover !== null && hover > start ? settle(start, hover, false) : end; const begin = (day: number) => { if (nightOf(day).blocked) { say("Sold out that night"); return; } setStart(day); setEnd(null); setReserved(false); }; const choose = (day: number) => { if (start === null || end !== null || day <= start) { begin(day); return; } const out = settle(start, day, true); if (out === null) { return; } setEnd(out); setHover(null); }; const dayAt = (event: PointerEvent) => { const el = document.elementFromPoint(event.clientX, event.clientY); const cell = el?.closest("[data-day]"); return cell ? Number(cell.dataset.day) : null; }; const onPointerDown = (event: PointerEvent) => { if (event.button !== 0) { return; } const day = dayAt(event); if (day === null) { return; } dragging.current = true; // A press on a fresh day starts a stay; a press while picking ends one. if (start === null || end !== null || day <= start) { begin(day); } event.currentTarget.setPointerCapture(event.pointerId); }; const onPointerMove = (event: PointerEvent) => { const day = dayAt(event); if (day === null) { return; } if (start !== null && end === null) { setHover(day); } }; const onPointerUp = (event: PointerEvent) => { if (!dragging.current) { return; } dragging.current = false; const day = dayAt(event); if (day !== null && start !== null && day > start && end === null) { choose(day); } }; const onKeyDown = (event: KeyboardEvent, day: number) => { if (event.key in ARROW_STEP) { event.preventDefault(); const next = day + ARROW_STEP[event.key]; const cell = gridRef.current?.querySelector( `[data-day="${next}"]` ); cell?.focus(); if (start !== null && end === null) { setHover(next); } } else if (event.key === "Enter" || event.key === " ") { event.preventDefault(); choose(day); } }; const go = (delta: number) => { setDirection(delta); setView(({ year, month }) => { const m = month + delta; return { year: year + Math.floor(m / 12), month: ((m % 12) + 12) % 12 }; }); }; const segments = segmentsFor(start, shownEnd ?? null, first, daysIn, lead); const stayNights = start !== null && end !== null ? Array.from({ length: end - start }, (_, i) => nightOf(start + i).price) : []; const total = stayNights.reduce((sum, p) => sum + p, 0); const money = (n: number) => `${currency}${n.toLocaleString("en-US")}`; const spring = reduceMotion ? { duration: 0 } : { type: "spring" as const, duration: 0.35, bounce: 0 }; const fade = { duration: reduceMotion ? 0 : 0.18, ease: EASE_OUT }; const summary = summaryFor(start, end); return (

{MONTHS[view.month]} {view.year}

{[-1, 1].map((delta) => ( ))}

{WEEKDAYS.map((d) => ( {d} ))}

{ dragging.current = false; }} onPointerDown={onPointerDown} onPointerLeave={() => setHover(null)} onPointerMove={onPointerMove} onPointerUp={onPointerUp} ref={gridRef} style={{ height: rows * ROW }} > {/* The stay: one pill per row, ends rounded only where the stay really starts and stops, so it reads as a single shape. */} {segments.map((s) => (

{note ?? summary}

Total

{total ? money(total) : "—"}

); }

Stay Picker

On this page