"use client"; /** * @author: @dorianbaffier * @description: Slot Picker * @version: 2.0.0 * @date: 2026-10-22 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowRight, Check, Globe } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type KeyboardEvent, type PointerEvent, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; /** Meetings start on the quarter hour. */ const STEP = 15; /** Height of one minute on the day rail, in px. */ const PX = 0.8; const HATCH = "repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 6px)"; /** Minutes from midnight. */ type Span = [number, number]; export interface SlotDay { /** YYYY-MM-DD */ date: string; /** Hours you can be booked, in minutes from midnight, in the guest's time. */ open: Span; /** Meetings already in the calendar. */ busy: Span[]; } export interface SlotPickerProps { /** Who you're booking. `offset` is their clock minus yours, in minutes. */ host?: { name: string; title?: string; city?: string; offset?: number }; days?: SlotDay[]; /** Lengths offered, in minutes. */ durations?: number[]; /** The guest's time zone, shown under the rail. */ timezone?: string; onBook?: (slot: { date: string; start: number; minutes: number }) => void; className?: string; } const h = (hours: number, minutes = 0) => hours * 60 + minutes; const DEMO_DAYS: SlotDay[] = [ { date: "2026-11-02", open: [h(9), h(17)], busy: [ [h(9), h(10)], [h(12), h(13, 30)], [h(15), h(16)], ], }, { date: "2026-11-03", open: [h(9), h(17)], busy: [ [h(9), h(9, 30)], [h(10), h(10, 45)], [h(11, 30), h(12)], [h(13), h(14)], [h(16), h(17)], ], }, { date: "2026-11-04", open: [h(9), h(13)], busy: [ [h(9, 30), h(10)], [h(10, 30), h(11)], [h(11, 30), h(12)], [h(12, 30), h(13)], ], }, { date: "2026-11-05", open: [h(10), h(17)], busy: [ [h(11), h(12)], [h(14), h(14, 30)], [h(15, 30), h(17)], ], }, { date: "2026-11-06", open: [h(9), h(15)], busy: [ [h(9), h(11)], [h(12), h(12, 30)], ], }, ]; const WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const MONTH = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const parse = (iso: string) => { const [y, m, d] = iso.split("-").map(Number); return new Date(Date.UTC(y, m - 1, d)); }; const longDate = (iso: string) => { const date = parse(iso); return `${WEEKDAY[date.getUTCDay()]}, ${MONTH[date.getUTCMonth()]} ${date.getUTCDate()}`; }; const clock = (minutes: number, suffix = true) => { const wrapped = ((minutes % 1440) + 1440) % 1440; const hours = Math.floor(wrapped / 60); const mins = wrapped % 60; const twelve = hours % 12 || 12; const time = mins ? `${twelve}:${String(mins).padStart(2, "0")}` : `${twelve}`; return suffix ? `${time}${hours >= 12 ? "pm" : "am"}` : time; }; /** "10:30 – 11am", dropping the first am/pm when both ends share it. */ const range = (start: number, minutes: number) => { const end = start + minutes; const same = start < h(12) === end <= h(12); return `${clock(start, !same)} – ${clock(end)}`; }; const lengthLabel = (minutes: number) => minutes < 60 ? `${minutes} min` : `${minutes / 60} hr`; /** Every quarter hour where the whole meeting fits. */ function startsFor(day: SlotDay, minutes: number) { const out: number[] = []; for (let t = day.open[0]; t + minutes <= day.open[1]; t += STEP) { if (!day.busy.some(([a, b]) => t < b && t + minutes > a)) { out.push(t); } } return out; } /** The start that fits closest to where the hand is. */ function nearest(starts: number[], target: number) { let best: number | null = null; for (const s of starts) { if (best === null || Math.abs(s - target) < Math.abs(best - target)) { best = s; } } return best; } function freeMinutes(day: SlotDay) { const busy = day.busy.reduce( (sum, [a, b]) => sum + Math.max(0, Math.min(b, day.open[1]) - Math.max(a, day.open[0])), 0 ); return day.open[1] - day.open[0] - busy; } function DayStrip({ days, active, minutes, onPick, spring, }: { days: SlotDay[]; active: number; minutes: number; onPick: (index: number) => void; spring: object; }) { return (

{days.map((d, i) => { const date = parse(d.date); const full = startsFor(d, minutes).length === 0; // Whole and half hours read better than 4.25h. const halves = Math.floor(freeMinutes(d) / 30); const free = `${Math.floor(halves / 2) || ""}${halves % 2 ? "½" : ""}`; return ( ); })}

); } /** A meeting already in the calendar, or the hours outside the day. */ function Blocked({ span, from, label, }: { span: Span; from: number; label?: string; }) { const height = (span[1] - span[0]) * PX; return (

{label && height >= 20 && ( {label} )}

); } function ConfirmBar({ day, start, minutes, host, booked, onConfirm, fade, }: { day: SlotDay | undefined; start: number | null; minutes: number; host: NonNullable; booked: boolean; onConfirm: () => void; fade: object; }) { const hostTime = start !== null && host.offset ? `${clock(start + host.offset)} for ${host.name.split(" ")[0]}${host.city ? ` in ${host.city}` : ""}` : null; return (

{start === null || !day ? (

Click a free gap, then drag it to move.

) : ( <>

{longDate(day.date)} · {range(start, minutes)}

{hostTime && (

{hostTime}

)} )}

); } /** * Booking a meeting on a real day rail. Click a free gap and the meeting * lands there; drag it and it hops over what's already booked instead of * sliding under it. Change the length and it grows in place, moving only * if it no longer fits. */ export default function SlotPicker({ host = { name: "Lena Ortiz", title: "Product walkthrough", city: "Lisbon", offset: 300, }, days = DEMO_DAYS, durations = [30, 60, 90], timezone = "Eastern Time, New York", onBook, className, }: SlotPickerProps) { const [minutes, setMinutes] = useState(durations[0] ?? 30); const [dayIndex, setDayIndex] = useState(0); const [start, setStart] = useState(null); const [ghost, setGhost] = useState(null); const [dragging, setDragging] = useState(false); const [booked, setBooked] = useState(false); const railRef = useRef(null); const grabRef = useRef(0); const reduceMotion = Boolean(useReducedMotion()); const day = days[dayIndex]; const starts = day ? startsFor(day, minutes) : []; const from = Math.min(...days.map((d) => d.open[0])); const to = Math.max(...days.map((d) => d.open[1])); const hours: number[] = []; for (let t = Math.ceil(from / 60) * 60; t <= to; t += 60) { hours.push(t); } const spring = reduceMotion ? { duration: 0 } : { type: "spring" as const, duration: 0.35, bounce: 0 }; const fade = { duration: reduceMotion ? 0 : 0.18, ease: EASE_OUT }; /** Minutes on the rail under the pointer. */ const minuteAt = (event: PointerEvent) => { const rect = railRef.current?.getBoundingClientRect(); return rect ? from + (event.clientY - rect.top) / PX : from; }; const place = (next: number | null) => { setStart(next); setBooked(false); }; const onDown = (event: PointerEvent) => { if (event.button !== 0) { return; } const at = minuteAt(event); const onBlock = start !== null && at >= start && at <= start + minutes; // Grab the meeting where you held it; a click elsewhere drops it there. grabRef.current = onBlock && start !== null ? at - start : minutes / 2; if (!onBlock) { place(nearest(starts, at - minutes / 2)); } event.currentTarget.setPointerCapture(event.pointerId); setDragging(true); setGhost(null); }; const onMove = (event: PointerEvent) => { const at = minuteAt(event); if (dragging) { const next = nearest(starts, at - grabRef.current); if (next !== start) { place(next); } return; } const over = start !== null && at >= start && at <= start + minutes; setGhost( event.pointerType === "mouse" && !over && !booked ? nearest(starts, at - minutes / 2) : null ); }; const onKey = (event: KeyboardEvent) => { if (start === null) { return; } const index = starts.indexOf(start); const moves: Record = { ArrowUp: starts[Math.max(0, index - 1)], ArrowDown: starts[Math.min(starts.length - 1, index + 1)], Home: starts[0], End: starts.at(-1), }; if (event.key in moves) { event.preventDefault(); place(moves[event.key] ?? start); } }; const pickMinutes = (next: number) => { setMinutes(next); if (day && start !== null) { // Grow in place when it fits; otherwise move to the closest gap. const fits = startsFor(day, next); place(fits.includes(start) ? start : nearest(fits, start)); } }; const pickDay = (index: number) => { setDayIndex(index); place(null); }; const initials = host.name .split(" ") .map((p) => p[0]) .join("") .slice(0, 2); return (

{initials}

{host.title}

with {host.name}

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

{/* The day: hour lines, what's taken, and the meeting you're placing. */}

setDragging(false)} onPointerDown={onDown} onPointerLeave={() => setGhost(null)} onPointerMove={onMove} onPointerUp={() => setDragging(false)} ref={railRef} style={{ height: (to - from) * PX }} > {hours.map((t) => ( ))} {day && day.open[0] > from && ( )} {day && day.open[1] < to && ( )} {day?.busy.map((span) => ( ))} {ghost !== null && start !== ghost && (

{range(ghost, minutes)}

)} {start !== null && ( )}

{timezone}

{ if (!day || start === null || booked) { return; } onBook?.({ date: day.date, start, minutes }); setBooked(true); }} start={start} />

); }

Slot Picker

On this page