{"slug":"availability-scheduler","name":"Availability Scheduler","description":"Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.","category":"blocks","source_url":"https://beui.dev/r/availability-scheduler/raw","detail_url":"https://beui.dev/r/availability-scheduler","raw_url":"https://beui.dev/r/availability-scheduler/raw","page_url":"https://beui.dev/components/blocks/availability-scheduler","markdown_url":"https://beui.dev/components/blocks/availability-scheduler.md","published_at":"2026-07-10","updated_at":"2026-09-26","dependencies":["@floating-ui/dom","clsx","lucide-react","motion","react","react-dom","tailwind-merge"],"internal":["./copy-menu","./day-row","./icon-button","./time-select","./tooltip/positioner","./tooltip/use-position","./types","./use-position","@/components/motion/availability-scheduler","@/components/motion/checkbox","@/components/motion/popover-morph","@/components/motion/popover-position","@/components/motion/select","@/components/motion/switch","@/components/motion/tooltip","@/components/motion/tooltip-surface","@/lib/ease","@/lib/hooks/use-dismiss","@/lib/hooks/use-hover-gesture","@/lib/hooks/use-tap-gesture","@/lib/touch","@/lib/utils"],"files":[{"path":"components/motion/availability-scheduler/index.tsx","type":"component","content":"\"use client\";\n// beui.dev/components/blocks/availability-scheduler\n\nimport { LayoutGroup, useReducedMotion } from \"motion/react\";\nimport {\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { DayRow } from \"./day-row\";\nimport {\n buildOptions,\n type DayAvailability,\n type DayKey,\n defaultWeek,\n panelKey,\n WEEKDAYS,\n type WeekAvailability,\n} from \"./types\";\n\nexport type {\n DayAvailability,\n DayKey,\n TimeRange,\n WeekAvailability,\n} from \"./types\";\nexport { defaultWeek } from \"./types\";\n\nexport interface AvailabilitySchedulerProps {\n value?: WeekAvailability;\n defaultValue?: WeekAvailability;\n onChange?: (value: WeekAvailability) => void;\n /** Minutes between selectable times. Default 30. */\n step?: number;\n className?: string;\n}\n\nexport function AvailabilityScheduler({\n value,\n defaultValue,\n onChange,\n step = 30,\n className,\n}: AvailabilitySchedulerProps) {\n const reduce = useReducedMotion() ?? false;\n const groupId = useId();\n const options = useMemo(() => buildOptions(step), [step]);\n const idRef = useRef(0);\n\n const [internal, setInternal] = useState(\n () => defaultValue ?? defaultWeek(),\n );\n // The row that last opened a dropdown paints above the rest — see DayRow.\n const [openDay, setOpenDay] = useState(null);\n // Exactly one time panel is open at a time, and the scheduler is the one that\n // knows which. A panel is absolutely positioned inside its own field, so two\n // open at once paint over each other's options — and nothing else can close\n // the first: a Select only dismisses on an outside *pointerdown*, which\n // keyboard and assistive-technology activation never fires.\n const [openPanel, setOpenPanel] = useState(null);\n const controlled = value !== undefined;\n const week = controlled ? value : internal;\n\n // Which panels the week currently puts on screen. A field that leaves — its\n // day switched off, its range removed — never reports its panel closed: the\n // only thing that dismisses a controlled Select is an outside pointerdown,\n // and a field on its way out is no longer there to hear one. Keeping its id\n // would reopen the panel the moment the same range came back.\n const livePanels = useMemo(() => {\n const ids = new Set();\n for (const { key } of WEEKDAYS) {\n if (!week[key].enabled) continue;\n for (const range of week[key].ranges) {\n ids.add(panelKey(key, range.id, \"start\"));\n ids.add(panelKey(key, range.id, \"end\"));\n }\n }\n return ids;\n }, [week]);\n\n useEffect(() => {\n if (openPanel !== null && !livePanels.has(openPanel)) setOpenPanel(null);\n }, [livePanels, openPanel]);\n\n const commit = useCallback(\n (next: WeekAvailability) => {\n if (!controlled) setInternal(next);\n onChange?.(next);\n },\n [controlled, onChange],\n );\n\n const setDay = useCallback(\n (day: DayKey, next: DayAvailability) => {\n commit({ ...week, [day]: next });\n },\n [commit, week],\n );\n\n const panelOpenChange = useCallback(\n (day: DayKey, id: string, open: boolean) => {\n setOpenPanel((current) =>\n open ? id : current === id ? null : current,\n );\n // Elevation stays on the row that opened last so the panel's collapse\n // animation finishes above its neighbours.\n if (open) setOpenDay(day);\n },\n [],\n );\n\n const copyDay = useCallback(\n (from: DayKey, targets: DayKey[]) => {\n const source = week[from];\n const next = { ...week };\n for (const t of targets) {\n next[t] = {\n enabled: source.enabled,\n ranges: source.ranges.map((r) => ({\n ...r,\n id: `${t}-c${idRef.current++}`,\n })),\n };\n }\n commit(next);\n },\n [commit, week],\n );\n\n return (\n \n
\n {WEEKDAYS.map(({ key, label }) => (\n setDay(key, next)}\n onCopy={(targets) => copyDay(key, targets)}\n onPanelOpenChange={(id, open) => panelOpenChange(key, id, open)}\n />\n ))}\n
\n \n );\n}\n"},{"path":"components/motion/availability-scheduler/day-row.tsx","type":"util","content":"\"use client\";\n\nimport { Plus, X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useRef, useState } from \"react\";\nimport { Switch } from \"@/components/motion/switch\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\nimport { SPRING_LAYOUT } from \"@/lib/ease\";\nimport { CopyMenu } from \"./copy-menu\";\nimport { IconButton } from \"./icon-button\";\nimport { TimeSelect } from \"./time-select\";\nimport {\n clampRange,\n type DayAvailability,\n type DayKey,\n endOptions,\n panelKey,\n startOptions,\n type TimeOption,\n type TimeRange,\n toMinutes,\n toValue,\n} from \"./types\";\n\nexport function DayRow({\n day,\n label,\n state,\n options,\n reduce,\n elevated,\n openPanel,\n onChange,\n onCopy,\n onPanelOpenChange,\n}: {\n day: DayKey;\n label: string;\n state: DayAvailability;\n options: TimeOption[];\n reduce: boolean;\n // True while this row holds the dropdown that opened last, which paints it\n // above every other row. A time panel opens downward when there is room and\n // upward when there isn't, so it has to clear the rows on either side of it\n // — no fixed paint order can satisfy both directions. The flag stays on\n // after the panel closes so the collapse animation stays on top too.\n elevated: boolean;\n /** Id of the one time panel the scheduler is holding open, if any. */\n openPanel: string | null;\n onChange: (next: DayAvailability) => void;\n onCopy: (targets: DayKey[]) => void;\n onPanelOpenChange: (panelId: string, open: boolean) => void;\n}) {\n const idRef = useRef(0);\n const nextId = () => `${day}-n${idRef.current++}`;\n // Same rule one level down: ranges stack against each other inside the row.\n const [openRangeId, setOpenRangeId] = useState(null);\n\n const panelId = (rangeId: string, edge: \"start\" | \"end\") =>\n panelKey(day, rangeId, edge);\n\n const onRangePanelOpenChange = (\n rangeId: string,\n id: string,\n open: boolean,\n ) => {\n if (open) setOpenRangeId(rangeId);\n onPanelOpenChange(id, open);\n };\n\n const setEnabled = (enabled: boolean) => {\n if (enabled && state.ranges.length === 0) {\n onChange({\n enabled,\n ranges: [{ id: nextId(), start: \"09:00\", end: \"17:00\" }],\n });\n } else {\n onChange({ ...state, enabled });\n }\n };\n\n const updateRange = (id: string, patch: Partial) => {\n const changed: \"start\" | \"end\" = patch.start !== undefined ? \"start\" : \"end\";\n onChange({\n ...state,\n ranges: state.ranges.map((r) => {\n if (r.id !== id) return r;\n const next = { ...r, ...patch };\n return { ...next, ...clampRange(next.start, next.end, options, changed) };\n }),\n });\n };\n\n const addRange = () => {\n const last = state.ranges[state.ranges.length - 1];\n const start = last ? Math.min(toMinutes(last.end) + 60, 24 * 60 - 60) : 540;\n onChange({\n enabled: true,\n ranges: [\n ...state.ranges,\n { id: nextId(), start: toValue(start), end: toValue(start + 60) },\n ],\n });\n };\n\n const removeRange = (id: string) => {\n const ranges = state.ranges.filter((r) => r.id !== id);\n // Removing the last slot marks the day unavailable.\n onChange({ enabled: ranges.length > 0, ranges });\n };\n\n const actions = (\n <>\n \n \n \n \n \n \n \n );\n\n return (\n \n {/* toggle + label; actions ride along on mobile */}\n
\n
\n \n {label}\n
\n
{actions}
\n
\n\n {/* ranges or unavailable */}\n
\n \n {state.enabled ? (\n state.ranges.map((r) => (\n \n
\n updateRange(r.id, { start: v })}\n open={openPanel === panelId(r.id, \"start\")}\n onOpenChange={(open) =>\n onRangePanelOpenChange(r.id, panelId(r.id, \"start\"), open)\n }\n />\n
\n –\n
\n updateRange(r.id, { end: v })}\n open={openPanel === panelId(r.id, \"end\")}\n onOpenChange={(open) =>\n onRangePanelOpenChange(r.id, panelId(r.id, \"end\"), open)\n }\n />\n
\n \n removeRange(r.id)}\n >\n \n \n \n \n ))\n ) : (\n \n Unavailable\n \n )}\n \n
\n\n {/* actions (desktop) */}\n
\n {actions}\n
\n \n );\n}\n"},{"path":"components/motion/availability-scheduler/types.ts","type":"util","content":"export type DayKey = \"mon\" | \"tue\" | \"wed\" | \"thu\" | \"fri\" | \"sat\" | \"sun\";\n\nexport type TimeRange = { id: string; start: string; end: string };\nexport type DayAvailability = { enabled: boolean; ranges: TimeRange[] };\nexport type WeekAvailability = Record;\nexport type TimeOption = { value: string; label: string };\n\nexport const WEEKDAYS: { key: DayKey; label: string }[] = [\n { key: \"mon\", label: \"Monday\" },\n { key: \"tue\", label: \"Tuesday\" },\n { key: \"wed\", label: \"Wednesday\" },\n { key: \"thu\", label: \"Thursday\" },\n { key: \"fri\", label: \"Friday\" },\n { key: \"sat\", label: \"Saturday\" },\n { key: \"sun\", label: \"Sunday\" },\n];\n\n// ─── panels ──────────────────────────────────────────────────────────────────\n\n/**\n * Names one time field week-wide, because the scheduler holds a single open\n * panel for the whole week. Range ids belong to the value and are only unique\n * within a day, so the day is part of the name — and the scheduler builds the\n * same keys to ask whether the panel it is holding is still on screen.\n */\nexport const panelKey = (day: DayKey, rangeId: string, edge: \"start\" | \"end\") =>\n `${day}:${rangeId}:${edge}`;\n\n// ─── time helpers ────────────────────────────────────────────────────────────\n\nexport const toMinutes = (v: string) => {\n const [h, m] = v.split(\":\").map(Number);\n return h * 60 + m;\n};\n\nexport const toValue = (mins: number) => {\n const clamped = Math.max(0, Math.min(24 * 60 - 1, mins));\n const h = Math.floor(clamped / 60);\n const m = clamped % 60;\n return `${String(h).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")}`;\n};\n\nexport const label12 = (v: string) => {\n const [h, m] = v.split(\":\").map(Number);\n const ap = h < 12 ? \"AM\" : \"PM\";\n const h12 = h % 12 === 0 ? 12 : h % 12;\n return `${h12}:${String(m).padStart(2, \"0\")} ${ap}`;\n};\n\nexport function buildOptions(step: number): TimeOption[] {\n const out: TimeOption[] = [];\n for (let m = 0; m < 24 * 60; m += step) {\n const value = toValue(m);\n out.push({ value, label: label12(value) });\n }\n return out;\n}\n\nfunction snapToOption(mins: number, slots: number[]) {\n let best = slots[0];\n for (const slot of slots) {\n if (Math.abs(slot - mins) < Math.abs(best - mins)) best = slot;\n }\n return best;\n}\n\nfunction withCurrentOption(\n filtered: TimeOption[],\n all: TimeOption[],\n current?: string,\n) {\n if (!current || filtered.some((o) => o.value === current)) return filtered;\n const extra =\n all.find((o) => o.value === current) ??\n ({ value: current, label: label12(current) } satisfies TimeOption);\n return [...filtered, extra].sort(\n (a, b) => toMinutes(a.value) - toMinutes(b.value),\n );\n}\n\n/**\n * Same-day ranges only. A valid pair is left alone so an off-grid persisted\n * end (17:00 with `step={720}`) is not rewritten. When the invariant fails,\n * the just-selected endpoint stays and only the opposite side moves onto a\n * neighboring generated option.\n */\nexport function clampRange(\n start: string,\n end: string,\n options: TimeOption[],\n changed: \"start\" | \"end\" = \"start\",\n): { start: string; end: string } {\n const slots = options.map((o) => toMinutes(o.value));\n if (slots.length === 0) return { start, end };\n\n const startM = toMinutes(start);\n const endM = toMinutes(end);\n if (endM > startM) return { start, end };\n\n const keepOrSnap = (value: string) => {\n const mins = toMinutes(value);\n return slots.includes(mins) ? mins : snapToOption(mins, slots);\n };\n\n if (changed === \"end\") {\n const e = keepOrSnap(end);\n const earlier = [...slots].reverse().find((slot) => slot < e);\n if (earlier === undefined && slots.length > 1) {\n // Midnight cannot end a positive same-day range, so use the first pair.\n return { start: toValue(slots[0]), end: toValue(slots[1]) };\n }\n return {\n start: toValue(earlier ?? keepOrSnap(start)),\n end: toValue(e),\n };\n }\n\n const s = keepOrSnap(start);\n const later = slots.find((slot) => slot > s);\n if (later === undefined && slots.length > 1) {\n // The last slot cannot start a positive range, so use the final pair.\n return {\n start: toValue(slots[slots.length - 2]),\n end: toValue(slots[slots.length - 1]),\n };\n }\n return {\n start: toValue(s),\n end: toValue(later ?? keepOrSnap(end)),\n };\n}\n\nexport function startOptions(\n options: TimeOption[],\n end: string,\n current?: string,\n) {\n const filtered = options.filter(\n (o) => toMinutes(o.value) < toMinutes(end),\n );\n // An invalid midnight end has no earlier option; expose midnight so choosing\n // it can move the end forward through clampRange instead of trapping the row.\n const recovery = filtered.length === 0 ? options.slice(0, 1) : filtered;\n return withCurrentOption(\n recovery,\n options,\n current,\n );\n}\n\nexport function endOptions(\n options: TimeOption[],\n start: string,\n current?: string,\n) {\n const filtered = options.filter(\n (o) => toMinutes(o.value) > toMinutes(start),\n );\n // An invalid last-slot start has no later option; expose the last slot so\n // choosing it can move the start backward through clampRange.\n const recovery = filtered.length === 0 ? options.slice(-1) : filtered;\n return withCurrentOption(\n recovery,\n options,\n current,\n );\n}\n\n// Default: Mon–Fri 9–5, weekend off. Fixed ids so SSR and first client render\n// agree (new ranges get counter ids afterwards).\nexport function defaultWeek(): WeekAvailability {\n const workday = (day: DayKey): DayAvailability => ({\n enabled: true,\n ranges: [{ id: `${day}-0`, start: \"09:00\", end: \"17:00\" }],\n });\n const off = (day: DayKey): DayAvailability => ({\n enabled: false,\n ranges: [{ id: `${day}-0`, start: \"09:00\", end: \"17:00\" }],\n });\n return {\n mon: workday(\"mon\"),\n tue: workday(\"tue\"),\n wed: workday(\"wed\"),\n thu: workday(\"thu\"),\n fri: workday(\"fri\"),\n sat: off(\"sat\"),\n sun: off(\"sun\"),\n };\n}\n"},{"path":"lib/utils.ts","type":"util","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"},{"path":"components/motion/availability-scheduler/copy-menu.tsx","type":"util","content":"\"use client\";\n\nimport { Check, Copy } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useState } from \"react\";\nimport { Checkbox } from \"@/components/motion/checkbox\";\nimport {\n MorphPopover,\n MorphPopoverContent,\n} from \"@/components/motion/popover-morph\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\nimport { SPRING_PRESS } from \"@/lib/ease\";\nimport { IconButton } from \"./icon-button\";\nimport { type DayKey, WEEKDAYS } from \"./types\";\n\n// Copy this day's hours to other days: a morph popover with a day picker.\nexport function CopyMenu({\n fromLabel,\n reduce,\n onApply,\n}: {\n fromLabel: string;\n reduce: boolean;\n onApply: (targets: DayKey[]) => void;\n}) {\n const [open, setOpen] = useState(false);\n const [copied, setCopied] = useState(false);\n const [picked, setPicked] = useState>(new Set());\n const others = WEEKDAYS.filter((d) => d.label !== fromLabel);\n\n const toggle = (k: DayKey) =>\n setPicked((prev) => {\n const next = new Set(prev);\n if (next.has(k)) next.delete(k);\n else next.add(k);\n return next;\n });\n\n const apply = (targets: DayKey[]) => {\n if (!targets.length) return;\n onApply(targets);\n setOpen(false);\n setPicked(new Set());\n setCopied(true);\n window.setTimeout(() => setCopied(false), 1200);\n };\n\n return (\n \n \n setOpen(!open)}\n >\n \n {copied ? (\n \n \n \n ) : (\n \n \n \n )}\n \n \n \n\n \n

\n Copy times to\n

\n
\n {others.map((d) => (\n toggle(d.key)}\n label={d.label}\n className=\"w-full flex-row-reverse justify-between rounded-lg px-2 py-1.5 transition-colors hover:bg-muted [&_button]:size-4 [&_button]:rounded-[5px] [&_button]:border [&_button[data-state=unchecked]]:border-border-strong\"\n />\n ))}\n
\n
\n apply(others.map((d) => d.key))}\n className=\"flex-1 rounded-lg px-2 py-1.5 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:bg-muted\"\n >\n Every day\n \n apply([...picked])}\n disabled={picked.size === 0}\n className=\"flex-1 rounded-lg bg-primary px-2 py-1.5 text-xs font-semibold text-primary-foreground outline-none transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40\"\n >\n Apply\n \n
\n \n \n );\n}\n"},{"path":"components/motion/availability-scheduler/icon-button.tsx","type":"util","content":"\"use client\";\n\nimport { motion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { SPRING_PRESS } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport function IconButton({\n onClick,\n label,\n disabled,\n expanded,\n reduce,\n children,\n className,\n // Rest props let a wrapping Tooltip inject its hover/focus handlers.\n ...rest\n}: {\n onClick: () => void;\n label: string;\n disabled?: boolean;\n expanded?: boolean;\n reduce: boolean;\n children: ReactNode;\n className?: string;\n [key: string]: unknown;\n}) {\n return (\n \n {children}\n \n );\n}\n"},{"path":"components/motion/availability-scheduler/time-select.tsx","type":"util","content":"\"use client\";\n\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/motion/select\";\nimport type { TimeOption } from \"./types\";\n\n// Time field: the library Select, with the option list capped so the panel\n// measures a small height and scrolls instead of unfolding all 48 options.\nexport function TimeSelect({\n value,\n onChange,\n open,\n onOpenChange,\n options,\n}: {\n value: string;\n onChange: (v: string) => void;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n options: TimeOption[];\n}) {\n return (\n \n \n \n \n \n
\n {options.map((o) => (\n \n {o.label}\n \n ))}\n
\n \n \n );\n}\n"},{"path":"components/motion/switch.tsx","type":"util","content":"\"use client\";\n\nimport { animate, motion, MotionConfig, useReducedMotion } from \"motion/react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// Heavy, deliberate thumb — high mass keeps the travel weighty without wobble.\nconst THUMB_SPRING = { type: \"spring\", stiffness: 800, damping: 80, mass: 4 } as const;\n\nexport interface SwitchProps {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n disabled?: boolean;\n label?: string;\n ariaLabel?: string;\n className?: string;\n}\n\nexport function Switch({\n checked,\n onCheckedChange,\n disabled,\n label,\n ariaLabel,\n className,\n}: SwitchProps) {\n const id = useId();\n const thumbRef = useRef(null);\n const reduce = useReducedMotion();\n const [isPressed, setIsPressed] = useState(false);\n const [isPointer, setIsPointer] = useState(false);\n\n // Disabled shake feedback when pressed.\n useEffect(() => {\n if (!thumbRef.current || reduce) return;\n if (disabled && isPressed) {\n animate(\n thumbRef.current,\n { x: [0, -2, 2, -1, 0] },\n { delay: 0.2, duration: 0.6 },\n );\n }\n }, [disabled, isPressed, reduce]);\n\n const squish = !disabled && isPointer && isPressed && !reduce;\n\n return (\n \n \n !disabled && onCheckedChange(!checked)}\n onPointerDown={(e) => {\n setIsPressed(true);\n setIsPointer(e.type.startsWith(\"pointer\"));\n }}\n onPointerUp={() => setIsPressed(false)}\n onPointerLeave={() => setIsPressed(false)}\n initial={false}\n data-state={checked ? \"checked\" : \"unchecked\"}\n className={cn(\n \"group peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center px-1 rounded-full outline-none transition-colors duration-200\",\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n \"disabled:cursor-not-allowed disabled:opacity-60\",\n checked ? \"justify-end bg-primary\" : \"justify-start bg-muted-foreground/60\",\n )}\n >\n \n {/* Stretch toward the destination while active. */}\n \n \n \n {label ? (\n \n ) : null}\n \n \n );\n}\n"},{"path":"components/motion/tooltip.tsx","type":"util","content":"\"use client\";\n\nimport { AnimatePresence } from \"motion/react\";\nimport { TooltipPositioner } from \"./tooltip/positioner\";\nimport { useTooltipPointer } from \"./tooltip/use-position\";\nimport {\n cloneElement,\n isValidElement,\n type PointerEvent,\n type ReactElement,\n type ReactNode,\n type RefObject,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { TooltipSurface } from \"@/components/motion/tooltip-surface\";\nimport { useDismiss } from \"@/lib/hooks/use-dismiss\";\nimport { useHoverGesture } from \"@/lib/hooks/use-hover-gesture\";\nimport { useTapGesture } from \"@/lib/hooks/use-tap-gesture\";\nimport { cn } from \"@/lib/utils\";\n\ntype Side = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport interface TooltipProps {\n content: ReactNode;\n children?: ReactElement;\n /** Existing trigger for controlled integrations such as chart cells. */\n anchorRef?: RefObject;\n /** Point within the anchor, as fractions of its rendered width and height. */\n anchorPoint?: { x: number; y: number };\n /** Follow real pointer coordinates; keyboard focus still uses the anchor. */\n followCursor?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n id?: string;\n side?: Side;\n /** Delay before showing (ms). Default 120. */\n delay?: number;\n className?: string;\n /** Classes for the outer wrapper span. Use to fix baseline / fill parent. */\n wrapperClassName?: string;\n}\n\n// Once any tooltip has just closed, neighbouring tooltips open without the\n// initial delay — moving along a toolbar feels instant after the first one.\nconst WARM_WINDOW_MS = 300;\nlet lastHiddenAt = 0;\n\nexport function Tooltip({\n content,\n children,\n side = \"top\",\n delay = 120,\n className,\n wrapperClassName,\n anchorRef: externalAnchorRef,\n anchorPoint,\n followCursor = false,\n open: controlledOpen,\n onOpenChange,\n id: providedId,\n}: TooltipProps) {\n const [internalOpen, setInternalOpen] = useState(false);\n const open = controlledOpen ?? internalOpen;\n const setOpen = useCallback(\n (next: boolean) => {\n if (controlledOpen === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [controlledOpen, onOpenChange],\n );\n const generatedId = useId();\n const id = providedId ?? generatedId;\n const timer = useRef | null>(null);\n const wrapperRef = useRef(null);\n const anchorRef = externalAnchorRef ?? wrapperRef;\n const hover = useHoverGesture();\n const floatingRef = useRef(null);\n const pointer = useTooltipPointer(anchorRef, followCursor);\n const focused = useRef(false);\n\n const show = useCallback(() => {\n if (timer.current) clearTimeout(timer.current);\n if (open) return;\n const warm = Date.now() - lastHiddenAt < WARM_WINDOW_MS;\n if (warm) {\n setOpen(true);\n return;\n }\n timer.current = setTimeout(() => {\n setOpen(true);\n }, delay);\n }, [delay, setOpen, open]);\n\n const hide = useCallback(() => {\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = null;\n }\n if (open) lastHiddenAt = Date.now();\n setOpen(false);\n }, [open, setOpen]);\n\n const leave = useCallback(() => {\n if (focused.current) return;\n if (timer.current) clearTimeout(timer.current);\n // Bridge the small physical gap to a stationary, readable tooltip.\n if (followCursor) hide();\n else timer.current = setTimeout(hide, 100);\n }, [followCursor, hide]);\n const insideTooltip = useCallback(\n (target: Element) => Boolean(floatingRef.current?.contains(target)),\n [],\n );\n\n // A finger never hovers, and Safari does not focus a button on tap either, so\n // the label is only reachable if the tap itself opens the tooltip. A click\n // carries no pointerType, so the pointerdown that preceded it is what says\n // whether this was a tap; keyboard activation arrives with no pointerdown at\n // all, and focus has already shown the label there.\n const tap = useTapGesture();\n\n const toggleOnTap = useCallback(() => {\n const gesture = tap.take();\n if (!gesture || gesture.pointerType === \"mouse\") return;\n if (gesture.state) {\n hide();\n return;\n }\n if (timer.current) clearTimeout(timer.current);\n setOpen(true);\n }, [hide, tap, setOpen]);\n\n // ...and closed again by the next tap that lands somewhere else. The label\n // covers nothing interactive, so that tap passes through to what it hit.\n useDismiss(open, hide, anchorRef, { ignore: insideTooltip });\n\n useEffect(\n () => () => {\n if (timer.current) clearTimeout(timer.current);\n },\n [],\n );\n\n if (!externalAnchorRef && !isValidElement(children)) return children;\n\n // The label describes the trigger, so it has to name the trigger itself.\n // Everything else the tooltip needs is read off the anchor below instead of\n // cloned on: a handler written onto the child is the child's handler as far\n // as that child can tell, and a component that owns its activation —\n // hard-wiring onClick and spreading the rest of its props over it, as\n // ThemeToggle does — then runs the tooltip's instead of its own. Composing\n // with `props.onClick` cannot save it either, because a component element's\n // props hold nothing the component does internally.\n const trigger = isValidElement(children)\n ? cloneElement(children as ReactElement>, {\n \"aria-describedby\":\n [(children.props as Record)[\"aria-describedby\"], open ? id : undefined]\n .filter(Boolean)\n .join(\" \") || undefined,\n })\n : null;\n\n return (\n <>\n {!externalAnchorRef ? (\n // biome-ignore lint/a11y/noStaticElementInteractions: This wrapper observes bubbling trigger events without replacing the control's handlers.\n {\n if (hover.enter(event)) show();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (hover.leave(event)) leave();\n }}\n onFocus={() => {\n focused.current = true;\n show();\n }}\n onBlur={() => {\n focused.current = false;\n hide();\n }}\n onPointerDown={(event: PointerEvent) => tap.start(event, open)}\n // A gesture the platform took away sends no click, and a key press\n // starts an activation that never had a pointer behind it. Either way\n // the record has to go, or the next click reads a finger that has long\n // since lifted.\n onPointerCancel={tap.drop}\n onKeyDown={(event) => {\n tap.drop();\n if (event.key === \"Escape\") hide();\n }}\n onClick={toggleOnTap}\n >\n {trigger}\n \n ) : null}\n {typeof document !== \"undefined\"\n ? createPortal(\n \n {open ? (\n \n {(positioned, isPresent) => (\n {\n if (timer.current) clearTimeout(timer.current);\n }}\n onPointerLeave={leave}\n style={{\n maxWidth: \"calc(100vw - 16px)\",\n whiteSpace: \"normal\",\n pointerEvents: isPresent && !followCursor ? \"auto\" : \"none\",\n }}\n className={cn(\"overflow-hidden\", className)}\n >\n {content}\n \n )}\n \n ) : null}\n ,\n document.body,\n )\n : null}\n \n );\n}\n"},{"path":"lib/ease.ts","type":"util","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"components/motion/checkbox.tsx","type":"util","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useId } from \"react\";\nimport { EASE_OUT, SPRING_PRESS } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nconst CHECK_PATH = \"M5 13l4 4L19 7\";\nconst INDETERMINATE_PATH = \"M6 12h12\";\n\nexport interface CheckboxProps {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n disabled?: boolean;\n indeterminate?: boolean;\n label?: string;\n className?: string;\n id?: string;\n \"aria-label\"?: string;\n /** Associates an external message (e.g. a form error) with the control. */\n \"aria-describedby\"?: string;\n}\n\nexport function Checkbox({\n checked,\n onCheckedChange,\n disabled,\n indeterminate,\n label,\n className,\n id: idProp,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n}: CheckboxProps) {\n const autoId = useId();\n const id = idProp ?? autoId;\n const reduce = useReducedMotion();\n const showMark = checked || indeterminate;\n const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;\n\n return (\n \n !disabled && onCheckedChange(!checked)}\n whileTap={reduce || disabled ? undefined : { scale: 0.92 }}\n transition={SPRING_PRESS}\n data-state={\n checked ? \"checked\" : indeterminate ? \"indeterminate\" : \"unchecked\"\n }\n className={cn(\n \"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200\",\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n \"disabled:cursor-not-allowed disabled:opacity-60\",\n showMark\n ? \"border-primary bg-primary text-primary-foreground\"\n : \"border-muted-foreground/50 bg-background hover:border-muted-foreground\",\n )}\n >\n \n {showMark ? (\n \n {indeterminate ? \"Partially selected\" : \"Selected\"}\n \n \n ) : null}\n \n \n {label ? (\n \n {label}\n \n ) : null}\n \n );\n}\n"},{"path":"components/motion/popover-morph.tsx","type":"util","content":"\"use client\";\n\nimport {\n AnimatePresence,\n motion,\n animate,\n useMotionValue,\n usePresence,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n cloneElement,\n createContext,\n isValidElement,\n type ReactElement,\n type ReactNode,\n type Ref,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePopoverPortalPosition } from \"@/components/motion/popover-position\";\nimport { EASE_OUT, SPRING_PANEL } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype Side = \"top\" | \"bottom\";\ntype Align = \"start\" | \"end\";\n\ntype MorphContextValue = {\n open: boolean;\n setOpen: (open: boolean) => void;\n toggle: () => void;\n triggerId: string;\n contentId: string;\n /** The element the panel measures against — see `registerTrigger`. */\n triggerRef: React.MutableRefObject;\n registerTrigger: (node: HTMLElement | null) => void;\n contentRef: React.MutableRefObject;\n};\n\nconst MorphContext = createContext(null);\n\nfunction useMorphContext(component: string) {\n const ctx = useContext(MorphContext);\n if (!ctx) throw new Error(`${component} must be used within `);\n return ctx;\n}\n\nexport interface MorphPopoverProps {\n children: ReactNode;\n /** Controlled open state. */\n open?: boolean;\n /** Uncontrolled initial open state. */\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n className?: string;\n}\n\n/**\n * A popover whose panel morphs open from the trigger corner: it's laid out at\n * full size but clipped to the corner nearest the trigger, then unclips as one\n * piece. Closes on outside pointer / Escape. Controlled or uncontrolled.\n */\nexport function MorphPopover({\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n className,\n}: MorphPopoverProps) {\n const baseId = useId();\n const [root, setRoot] = useState(null);\n const [trigger, setTrigger] = useState(null);\n const contentRef = useRef(null);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const controlled = controlledOpen !== undefined;\n const open = controlled ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (!controlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [controlled, onOpenChange],\n );\n const toggle = useCallback(() => setOpen(!open), [setOpen, open]);\n\n // A trigger normally registers itself through MorphPopoverTrigger. It can't\n // when something else already clones the element — a Tooltip wrapping the\n // button, say — and an unregistered trigger leaves the panel with nothing to\n // measure against, so it renders permanently invisible. The root boxes the\n // trigger exactly (the content portals out of it), so it stands in until a\n // real trigger registers, and stands in again if that one unmounts. Both are\n // state, so a trigger arriving while the panel is open re-anchors it.\n const anchorRef = useMemo>(\n () => ({ current: trigger ?? root }),\n [root, trigger],\n );\n\n // The panel is a `role=\"dialog\"` and goes inert the moment it closes, so\n // focus cannot be left sitting inside it: a dismissal hands it back to the\n // trigger, the way the ARIA dialog pattern asks. A pointer dismissal takes\n // the focus onward itself when it lands on something focusable — this only\n // catches the case where it would otherwise be stranded. When no trigger has\n // registered, the root anchor stands in only if it can actually hold focus;\n // there is nowhere better than where the keyboard already is, so leave it.\n const close = useCallback(() => {\n setOpen(false);\n const focused = document.activeElement;\n const inPanel =\n focused instanceof HTMLElement && contentRef.current?.contains(focused);\n if (!inPanel) return;\n const restore = trigger ?? (root && root.tabIndex >= 0 ? root : null);\n restore?.focus();\n }, [root, setOpen, trigger]);\n\n useEffect(() => {\n if (!open) return;\n const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && close();\n const onPointer = (e: PointerEvent) => {\n const target = e.target as Node;\n if (\n root &&\n !root.contains(target) &&\n !contentRef.current?.contains(target)\n )\n close();\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"pointerdown\", onPointer);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"pointerdown\", onPointer);\n };\n }, [open, root, close]);\n\n const ctx = useMemo(\n () => ({\n open,\n setOpen,\n toggle,\n triggerId: `${baseId}-trigger`,\n contentId: `${baseId}-content`,\n triggerRef: anchorRef,\n registerTrigger: setTrigger,\n contentRef,\n }),\n [open, setOpen, toggle, baseId, anchorRef],\n );\n\n return (\n \n
\n {children}\n
\n \n );\n}\n\nexport interface MorphPopoverTriggerProps {\n children: ReactElement;\n}\n\nfunction mergeRefs(...refs: Array | undefined>) {\n return (node: T | null) => {\n for (const ref of refs) {\n if (typeof ref === \"function\") ref(node);\n else if (ref && typeof ref === \"object\")\n (ref as React.MutableRefObject).current = node;\n }\n };\n}\n\n/** Wraps a single element, toggling the popover on click. */\nexport function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {\n const ctx = useMorphContext(\"MorphPopoverTrigger\");\n const child = children as ReactElement>;\n const childOnClick = child?.props?.onClick as\n | ((e: unknown) => void)\n | undefined;\n const childRef = (child?.props as { ref?: Ref } | undefined)\n ?.ref;\n // Register once per actual ref change, not once per open-state render.\n const mergedRef = useMemo(\n () => mergeRefs(childRef, ctx.registerTrigger),\n [childRef, ctx.registerTrigger],\n );\n if (!isValidElement(children)) return children;\n\n return cloneElement(child, {\n id: ctx.triggerId,\n ref: mergedRef,\n onClick: (e: unknown) => {\n childOnClick?.(e);\n ctx.toggle();\n },\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": ctx.open,\n \"aria-controls\": ctx.open ? ctx.contentId : undefined,\n });\n}\n\nconst originFor = (side: Side, align: Align) =>\n `${side === \"bottom\" ? \"top\" : \"bottom\"} ${align === \"end\" ? \"right\" : \"left\"}`;\n\n// A clip that hides everything but the corner nearest the trigger, so the\n// panel appears to grow out of it. inset(top right bottom left).\nfunction clipAt(side: Side, align: Align, radius: number, inset: number) {\n const top = side === \"bottom\" ? \"0%\" : `${inset}%`;\n const bottom = side === \"bottom\" ? `${inset}%` : \"0%\";\n const right = align === \"end\" ? \"0%\" : `${inset}%`;\n const left = align === \"end\" ? `${inset}%` : \"0%\";\n return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`;\n}\n\n// Preserve the original spring character on the wrapper, but tween the complex\n// clip-path so it cannot snap when the spring resolves its final distance.\nconst MORPH_CLIP_TRANSITION = { duration: 0.32, ease: EASE_OUT } as const;\n\nexport interface MorphPopoverContentProps {\n children: ReactNode;\n side?: Side;\n align?: Align;\n /** Gap between trigger and panel, in px. Default 8. */\n sideOffset?: number;\n /** Panel corner radius, in px. Default 16. */\n radius?: number;\n className?: string;\n}\n\nexport function MorphPopoverContent(props: MorphPopoverContentProps) {\n const ctx = useMorphContext(\"MorphPopoverContent\");\n const [portalReady, setPortalReady] = useState(false);\n useEffect(() => setPortalReady(true), []);\n if (!portalReady) return null;\n return createPortal(\n \n {ctx.open && }\n ,\n document.body,\n );\n}\n\n// Measurement belongs to the mounted portal session: reopening must not start\n// an entrance at the previous session's coordinates before measuring this one.\nfunction MorphPopoverSurface({\n children,\n side = \"bottom\",\n align = \"end\",\n sideOffset = 8,\n radius = 16,\n className,\n}: MorphPopoverContentProps) {\n const ctx = useMorphContext(\"MorphPopoverContent\");\n const reduce = useReducedMotion() ?? false;\n const [isPresent, safeToRemove] = usePresence();\n const layout = usePopoverPortalPosition(\n ctx.triggerRef,\n ctx.contentRef,\n isPresent,\n );\n\n const left = layout\n ? align === \"end\"\n ? layout.trigger.left + layout.trigger.width - layout.content.width\n : layout.trigger.left\n : 0;\n const top = layout\n ? side === \"bottom\"\n ? layout.trigger.top + layout.trigger.height + sideOffset\n : layout.trigger.top - layout.content.height - sideOffset\n : 0;\n\n // Both directions travel between the exact same hidden/show states. Exit\n // targets \"hidden\" directly instead of introducing separate choreography.\n const wrap = reduce\n ? undefined\n : {\n hidden: { scale: 0.96, transition: SPRING_PANEL },\n show: { scale: 1, transition: SPRING_PANEL },\n };\n const clip = reduce\n ? undefined\n : {\n hidden: {\n clipPath: clipAt(side, align, radius, 92),\n transition: MORPH_CLIP_TRANSITION,\n },\n show: {\n clipPath: clipAt(side, align, radius, 0),\n transition: MORPH_CLIP_TRANSITION,\n },\n };\n // Animate the value directly so opacity stays in the inline style throughout\n // the entrance. A native opacity animation can expose the initial inline 0\n // for a frame when it finishes, before Motion writes the final value.\n const opacity = useMotionValue(0);\n const ready = layout !== null;\n useEffect(() => {\n if (!ready) {\n if (!isPresent) safeToRemove?.();\n return;\n }\n const animation = animate(opacity, isPresent ? 1 : 0, {\n ...(reduce ? { duration: 0.12 } : SPRING_PANEL),\n onComplete: () => {\n if (!isPresent) safeToRemove?.();\n },\n });\n return () => animation.stop();\n }, [opacity, ready, isPresent, reduce, safeToRemove]);\n\n return (\n \n \n {children}\n \n \n );\n}\n"},{"path":"components/motion/select.tsx","type":"util","content":"\"use client\";\n\nimport { Check, ChevronDown } from \"lucide-react\";\nimport {\n motion,\n type Transition,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nconst INSTANT_TRANSITION: Transition = { duration: 0 };\n\n// Spring with bounce powers the unfold/separation; per-property timings in the\n// content choreograph it (see SelectContent). Mirrors bouncy-accordion's feel.\nconst CHEVRON_TRANSITION: Transition = { type: \"spring\", duration: 0.4, bounce: 0.3 };\n\nconst LIST_VARIANTS: Variants = {\n hidden: {},\n show: { transition: { staggerChildren: 0.035, delayChildren: 0.05 } },\n};\nconst ITEM_VARIANTS: Variants = {\n hidden: { opacity: 0, y: -6, filter: \"blur(3px)\" },\n show: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n};\n\ntype Placement = \"bottom\" | \"top\";\n\ninterface SelectContextValue {\n value: string | undefined;\n open: boolean;\n setOpen: (open: boolean) => void;\n select: (value: string) => void;\n register: (value: string, label: string) => void;\n unregister: (value: string) => void;\n labelFor: (value: string | undefined) => string | undefined;\n reduce: boolean;\n triggerId: string;\n listId: string;\n disabled: boolean;\n placement: Placement;\n setPlacement: (p: Placement) => void;\n}\n\nconst SelectContext = createContext(null);\n\nfunction useSelectContext(component: string) {\n const ctx = useContext(SelectContext);\n if (!ctx) throw new Error(`${component} must be used within