52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T8bd,"use client"; import { X } from "lucide-react"; import { useId, type ComponentProps, type ReactNode } from "react"; import { Button } from "./button"; import { FeedbackIcon, type FeedbackVariant } from "./feedback"; import { cn } from "./lib/cn"; import "./shared/alert.css"; import "./alert.css"; export type AlertProps = Omit, "title"> & { title: ReactNode; variant?: FeedbackVariant; loading?: boolean; action?: ReactNode; onDismiss?: () => void; }; export function Alert({ title, variant = "neutral", loading = false, children, action, onDismiss, className, ...props }: AlertProps) { const titleId = useId(); return (

{title}

{children != null && (

{children}

)} {action != null && (

{action}

)}

{onDismiss && ( )}

); } 55:T1b8a,"use client"; import { CalendarCheck, Clock } from "lucide-react"; import { useId, useMemo, useState } from "react"; import { Alert } from "./alert"; import { Button } from "./button"; import { Calendar, formatISODate, parseISODate } from "./calendar"; import { cn } from "./lib/cn"; import { SegmentedControl } from "./segmented-control"; import "./availability-scheduler.css"; export type SchedulerResult = void | { error?: string }; const clock = (time: string, hour12: boolean) => { const [h, m] = time.split(":").map(Number); return new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12 }).format(new Date(2000, 0, 1, h, m)); }; const part = (time: string) => { const h = Number(time.split(":")[0]); return h < 12 ? "Morning" : h < 17 ? "Afternoon" : "Evening"; }; /** Pick a day, then a time, then confirm. Only days with open times can be chosen. */ export function AvailabilityScheduler({ availability, timeZone, duration = 30, title = "Book a time", description, onConfirm, className, }: { /** Open start times ("09:30") by ISO date. Days not listed are unavailable. */ availability: Readonly>; /** A readable zone name, such as "Europe/London". */ timeZone: string; /** Minutes. */ duration?: number; title?: string; description?: string; onConfirm: (booking: { date: string; time: string }) => Promise | SchedulerResult; className?: string; }) { const dates = useMemo(() => Object.keys(availability).filter((d) => availability[d].length).sort(), [availability]); const first = dates[0] ? parseISODate(dates[0]) : { year: 2026, month: 9 }; const [view, setView] = useState({ year: first.year, month: first.month }); const [date, setDate] = useState(null), [time, setTime] = useState(null), [hour12, setHour12] = useState(true), [pending, setPending] = useState(false), [error, setError] = useState(""), [booked, setBooked] = useState<{ date: string; time: string } | null>(null); const group = useId(); const slots = date ? (availability[date] ?? []) : []; const parts = ["Morning", "Afternoon", "Evening"].map((name) => ({ name, times: slots.filter((s) => part(s) === name) })).filter((p) => p.times.length); const when = date && time ? `${new Intl.DateTimeFormat("en-US", { weekday: "long", month: "long", day: "numeric" }).format(new Date(parseISODate(date).year, parseISODate(date).month, parseISODate(date).day))} at ${clock(time, hour12)}` : ""; const confirm = async () => { if (!date || !time || pending) return; setPending(true); setError(""); try { const result = await onConfirm({ date, time }); if (result && result.error) { setError(result.error); setTime(null); } else setBooked({ date, time }); } catch (e) { setError(e instanceof Error ? e.message : "Something went wrong. Try again."); } finally { setPending(false); } }; if (booked) return (

); return (

{title}

{description &&

{description}

}

setHour12(v === "12")} options={[{ value: "12", label: "12h" }, { value: "24", label: "24h" }]} />

setView({ year, month })} selected={date} min={dates[0]} max={dates.at(-1)} disabledDates={(iso) => !availability[iso]?.length} onSelect={(iso) => { setDate(iso); setTime(null); setError(""); }} />

{date ? formatISODate(date) : "Pick a date to see times"} {date ? ( parts.length ? (

{parts.map((p) => (

{p.name}

{p.times.map((t) => ( setTime(t)} disabled={pending} /> {clock(t, hour12)} ))}

))}

) : (

No times left on this day.

) ) : (

Days with open times can be chosen. The rest are dimmed.

)}

{error && }

{when || Nothing selected yet.}

); } 56:T125a,"use client"; import { Slot, Slottable } from "@radix-ui/react-slot"; import { LoaderCircle } from "lucide-react"; import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./shared/loading-indicator.css"; import "./button.css"; /* Colour, material and press live in button.css keyed on data-variant, so a consumer's utility classes still override them. Raised to press: the button sinks 1px into an inner shade instead of scaling. */ const variants = { default: "", secondary: "", ghost: "", destructive: "", }; const sizes = { sm: "h-8 gap-1.5 rounded-control px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11", md: "h-[var(--control-height)] gap-2 rounded-button px-3.5 text-sm", lg: "h-11 gap-2 rounded-touch px-[18px] text-[15px]", icon: "size-[var(--control-height)] rounded-button p-0", }; export type ButtonProps = ComponentProps<"button"> & { variant?: keyof typeof variants; size?: keyof typeof sizes; asChild?: boolean; /** Shows a spinner over the label and swallows clicks while keeping focus and width. */ loading?: boolean; /** Animate a meaningful label/icon change, such as saving → saved. */ feedbackKey?: string; }; export function Button({ className, variant = "default", size = "md", asChild = false, loading = false, feedbackKey, disabled, "aria-disabled": ariaDisabled, children, onClick, onClickCapture, tabIndex, type = "button", ...props }: ButtonProps) { const Component = asChild ? Slot : "button"; const nativeDisabled = Boolean(disabled); const blocked = nativeDisabled || loading || ariaDisabled === true || ariaDisabled === "true"; return ( { if (blocked && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); } props.onKeyDown?.(event); }} onClickCapture={(event) => { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onClickCapture?.(event); }} onClick={onClick} > {loading && asChild && ( )} {loading && !asChild && feedbackKey === undefined && ( )} {loading && !asChild && feedbackKey === undefined ? ( {children} ) : feedbackKey !== undefined && !asChild ? ( {loading && ( ) : ( children )} ); } function ButtonFeedback({ stateKey, children, }: { stateKey: string; children: ReactNode; }) { const content = useRef(null); const [initialKey] = useState(stateKey); const [width, setWidth] = useState(); useLayoutEffect(() => { const element = content.current; if (!element) return; const measure = () => setWidth(element.offsetWidth); measure(); const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [stateKey]); return ( {children} ); } 57:T331a,"use client"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react"; import { cn } from "./lib/cn"; import { RollingValue } from "./rolling-value"; import "./shared/calendar-day.css"; import "./calendar.css"; const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; export function isoDate(year: number, month: number, day: number) { return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; } export function parseISODate(value: string) { const [year, month, day] = value.split("-").map(Number); return { year, month: month - 1, day }; } export function formatISODate(value: string) { const { year, month, day } = parseISODate(value); return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(new Date(year, month, day)); } export function shiftMonth(year: number, month: number, amount: number) { const date = new Date(year, month + amount, 1); return { year: date.getFullYear(), month: date.getMonth() }; } function monthName(year: number, month: number) { return new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(new Date(year, month, 1)); } function buildDays(year: number, month: number) { const first = new Date(year, month, 1).getDay(); const count = new Date(year, month + 1, 0).getDate(); const cells: { iso: string; day: number; outside: boolean }[] = []; for (let index = 0; index < first; index += 1) { const date = new Date(year, month, index - first + 1); cells.push({ iso: isoDate(date.getFullYear(), date.getMonth(), date.getDate()), day: date.getDate(), outside: true }); } for (let day = 1; day <= count; day += 1) cells.push({ iso: isoDate(year, month, day), day, outside: false }); while (cells.length % 7 !== 0) { const date = new Date(year, month + 1, cells.length - (first + count) + 1); cells.push({ iso: isoDate(date.getFullYear(), date.getMonth(), date.getDate()), day: date.getDate(), outside: true }); } return cells; } function addDays(iso: string, amount: number) { const { year, month, day } = parseISODate(iso); const date = new Date(year, month, day + amount); return isoDate(date.getFullYear(), date.getMonth(), date.getDate()); } function blocked(iso: string, min?: string, max?: string, disabledDates?: (iso: string) => boolean) { if (min && iso < min) return true; if (max && iso > max) return true; return disabledDates?.(iso) ?? false; } export function Calendar({ label, year, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onHover, min, max, disabledDates, disabledReason, marks, showToday = false, className, }: { label?: string; year?: number; month?: number; onMonthChange?: (year: number, month: number) => void; selected?: string | null; rangeStart?: string | null; rangeEnd?: string | null; onSelect?: (iso: string) => void; onHover?: (iso: string | null) => void; min?: string; max?: string; disabledDates?: (iso: string) => boolean; /** Read with an unavailable day, e.g. "banks closed". */ disabledReason?: (iso: string) => string | undefined; /** A quiet data mark under the day, e.g. invoices due; the label is read with the date. */ marks?: (iso: string) => string | undefined; showToday?: boolean; className?: string; }) { const initial = selected ? parseISODate(selected) : { year: 2026, month: 9 }; const [localYear, setLocalYear] = useState(initial.year); const [localMonth, setLocalMonth] = useState(initial.month); const [motion, setMotion] = useState<"next" | "prev">("next"); const [selectionMarks, setSelectionMarks] = useState>([]); const days = useRef(null); const pending = useRef(null); const viewYear = year ?? localYear; const viewMonth = month ?? localMonth; const cells = buildDays(viewYear, viewMonth); const today = isoDate(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); const prevMonth = shiftMonth(viewYear, viewMonth, -1); const following = shiftMonth(viewYear, viewMonth, 1); const prevDisabled = Boolean(min && isoDate(prevMonth.year, prevMonth.month, new Date(prevMonth.year, prevMonth.month + 1, 0).getDate()) < min); const nextDisabled = Boolean(max && isoDate(following.year, following.month, 1) > max); const start = rangeStart && rangeEnd && rangeStart > rangeEnd ? rangeEnd : rangeStart; const end = rangeStart && rangeEnd && rangeStart > rangeEnd ? rangeStart : rangeEnd; function setMonth(nextYear: number, nextMonth: number) { const forward = nextYear > viewYear || (nextYear === viewYear && nextMonth > viewMonth); setMotion(forward ? "next" : "prev"); if (onMonthChange) onMonthChange(nextYear, nextMonth); else { setLocalYear(nextYear); setLocalMonth(nextMonth); } } function focusIso(iso: string) { const parsed = parseISODate(iso); if (parsed.year !== viewYear || parsed.month !== viewMonth) { pending.current = iso; setMonth(parsed.year, parsed.month); return; } days.current?.querySelector(`[data-date="${iso}"]`)?.focus(); } function nearestOpen(iso: string, step: number) { let next = iso; for (let guard = 0; guard < 42 && blocked(next, min, max, disabledDates); guard += 1) next = addDays(next, step); return blocked(next, min, max, disabledDates) ? null : next; } function move(event: KeyboardEvent) { const current = (document.activeElement as HTMLElement | null)?.dataset.date; if (!current) return; const { year: y, month: m, day } = parseISODate(current); const weekday = new Date(y, m, day).getDay(); let step = 0; if (event.key === "ArrowRight") step = 1; else if (event.key === "ArrowLeft") step = -1; else if (event.key === "ArrowDown") step = 7; else if (event.key === "ArrowUp") step = -7; else if (event.key === "Home") step = -weekday; else if (event.key === "End") step = 6 - weekday; else if (event.key === "PageDown") step = event.shiftKey ? 365 : 30; else if (event.key === "PageUp") step = event.shiftKey ? -365 : -30; if (step === 0) return; event.preventDefault(); const next = nearestOpen(addDays(current, step), step > 0 ? 1 : -1); if (next) focusIso(next); } useEffect(() => { const iso = pending.current; if (!iso) return; const button = days.current?.querySelector(`[data-date="${iso}"]`); if (!button) return; pending.current = null; button.focus(); }, [viewYear, viewMonth, cells.length]); useLayoutEffect(() => { const root = days.current; if (!root) return; const ends = [selected, rangeStart, rangeEnd].filter((iso, index, list): iso is string => Boolean(iso) && list.indexOf(iso) === index); const next = ends.flatMap((iso) => { const node = root.querySelector(`[data-date="${iso}"]`); if (!node) return []; return [{ key: iso, x: node.offsetLeft, y: node.offsetTop, w: node.offsetWidth, h: node.offsetHeight }]; }); setSelectionMarks((current) => (current.length === next.length && current.every((mark, index) => mark.key === next[index]?.key && mark.x === next[index]?.x && mark.y === next[index]?.y) ? current : next)); }, [selected, rangeStart, rangeEnd, viewYear, viewMonth, cells.length]); return (

{monthName(viewYear, viewMonth)}

onHover?.(null)}>

{Array.from({ length: cells.length / 7 }, (_, week) => { const row = cells.slice(week * 7, week * 7 + 7); const first = row.findIndex((cell) => start && end && cell.iso >= start && cell.iso <= end); let last = -1; for (let index = row.length - 1; index >= 0; index -= 1) { const cell = row[index]; if (cell && start && end && cell.iso >= start && cell.iso <= end) { last = index; break; } } if (first < 0 || last < 0) return null; return ; })} {selectionMarks.map((mark) => ( ))} {cells.map((cell) => { const inRange = Boolean(start && end && cell.iso >= start && cell.iso <= end); const isSelected = cell.iso === selected || cell.iso === rangeStart || cell.iso === rangeEnd; const isDisabled = blocked(cell.iso, min, max, disabledDates); const mark = marks?.(cell.iso); const reason = isDisabled ? disabledReason?.(cell.iso) : undefined; const tabIso = selected && cells.some((item) => item.iso === selected) ? selected : cells.find((item) => !item.outside && !blocked(item.iso, min, max, disabledDates))?.iso; return ( ); })}

{showToday && ( )}

); } 58:Te03,"use client"; import { useLayoutEffect, useRef, useState, type KeyboardEvent, } from "react"; import { cn } from "./lib/cn"; import "./shared/segmented-indicator.css"; import "./segmented-control.css"; export type SegmentedOption = { value: string; label: string }; export function SegmentedControl({ label, value, onValueChange, options, className, }: { label: string; value: string; onValueChange: (value: string) => void; options: readonly SegmentedOption[]; className?: string; }) { const group = useRef(null); const [initialValue] = useState(value); const [indicator, setIndicator] = useState<{ left: number; top: number; width: number; height: number; } | null>(null); useLayoutEffect(() => { const element = group.current; if (!element) return; const measure = () => { const active = element.querySelector('[aria-checked="true"]'); setIndicator( active ? { left: active.offsetLeft, top: active.offsetTop, width: active.offsetWidth, height: active.offsetHeight, } : null, ); }; measure(); const resize = new ResizeObserver(measure); resize.observe(element); element .querySelectorAll('[role="radio"]') .forEach((item) => resize.observe(item)); return () => resize.disconnect(); }, [value, options]); function move(event: KeyboardEvent) { const index = options.findIndex((item) => item.value === value); const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? (index + 1) % options.length : event.key === "ArrowLeft" || event.key === "ArrowUp" ? (index - 1 + options.length) % options.length : -1; if (next < 0) return; event.preventDefault(); onValueChange(options[next].value); group.current ?.querySelectorAll('[role="radio"]') [next]?.focus(); } return (

{indicator && ( )} {options.map((option) => { const selected = option.value === value; return ( ); })}

); } 59:T57b,/* Shared by alert.tsx, toast.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="feedback-message"] { display: block; animation: caliper-fade-in var(--duration-normal) var(--ease-out); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="success"] [data-slot="feedback-icon"] { background: var(--success-subtle); color: var(--success); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="warning"] [data-slot="feedback-icon"] { background: var(--warning-subtle); color: var(--warning); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="error"] [data-slot="feedback-icon"] { background: var(--destructive-subtle); color: var(--destructive); } @container (max-width: 22rem) { [data-slot="feedback-copy"] { display: contents; } [data-slot="feedback-title"] { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 0.25rem; } [data-slot="feedback-description"], [data-slot="feedback-action"] { grid-column: 1 / -1; margin-top: 0; } [data-slot="feedback-description"] { grid-row: 2; } [data-slot="feedback-action"] { grid-row: 3; } } @media (prefers-reduced-motion: reduce) { [data-slot="feedback-message"] { animation: none; } } } 5a:T465,/* alert.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="alert"] { container-type: inline-size; opacity: 1; transform: translateY(0); transition-property: opacity, transform, display; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-out); transition-behavior: allow-discrete; } [data-slot="alert"][hidden] { display: none !important; opacity: 0; pointer-events: none; transition-duration: var(--duration-fast); } @starting-style { [data-slot="alert"]:not([hidden]) { opacity: 0; transform: translateY(var(--motion-enter-distance)); } } @container (max-width: 22rem) { [data-slot="alert"] > [data-slot="button"] { grid-column: 3; grid-row: 1; } } @media (prefers-reduced-motion: reduce) { [data-slot="alert"] { transition: none; transform: none !important; } @starting-style { [data-slot="alert"]:not([hidden]) { opacity: 1; transform: none; } } } } 5b:T4b8,/* availability-scheduler.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="slot"] { position: relative; display: block; } [data-slot="slot"] input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } [data-slot="slot"] span { display: grid; place-items: center; min-height: 2.5rem; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 0.875rem; font-variant-numeric: tabular-nums; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } [data-slot="slot"]:hover input:not(:checked):not(:disabled) + span { background: var(--muted); } [data-slot="slot"] input:checked + span { border-color: var(--foreground); background: var(--foreground); color: var(--background); } [data-slot="slot"] input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="slot"] input:disabled + span { opacity: 0.5; } } 5c:T136e,/* button.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="button"] { transition-property: background-color, color, border-color; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } /* Button material. Raised to press: a lit top edge and a small lift; the press travels 1px down and swaps the lift for an inner shade. Only translate animates (release on the settle curve); shadows swap. */ [data-slot="button"] { --b-bg: var(--raised); --b-bg-hover: var(--raised-hover); --b-bg-press: var(--raised-press); --b-fg: var(--foreground); --b-shadow: var(--shadow-raised); --b-shadow-press: var(--shadow-raised-press); background-color: var(--b-bg); color: var(--b-fg); box-shadow: var(--b-shadow); transition-property: background-color, color, border-color, translate; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-normal); transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle); } [data-slot="button"][data-variant="default"] { --b-bg: var(--accent); --b-bg-hover: var(--accent-hover); --b-bg-press: var(--accent-press); --b-fg: var(--accent-foreground); --b-shadow: var(--shadow-accent); --b-shadow-press: var(--shadow-accent-press); } [data-slot="button"][data-variant="destructive"] { --b-bg: var(--danger-fill); --b-bg-hover: var(--danger-fill-hover); --b-bg-press: var(--danger-fill-press); --b-fg: var(--danger-fill-foreground); --b-shadow: var(--shadow-danger); --b-shadow-press: var(--shadow-danger-press); } [data-slot="button"][data-variant="ghost"] { --b-bg: transparent; --b-bg-hover: var(--muted); --b-bg-press: var(--muted); --b-fg: var(--muted-foreground); --b-shadow: none; --b-shadow-press: none; } @media (hover: hover) { [data-slot="button"]:hover { background-color: var(--b-bg-hover); } [data-slot="button"][data-variant="ghost"]:hover { color: var(--foreground); } } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: 0 var(--motion-press-travel); background-color: var(--b-bg-press); box-shadow: var(--b-shadow-press); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms; transition-timing-function: var(--ease-out); } [data-slot="button"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background-color: var(--sunken); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); } [data-slot="button"][data-variant="ghost"]:is(:disabled, [aria-disabled="true"]):not( [aria-busy="true"] ) { background-color: transparent; box-shadow: none; } /* Loading keeps the exact width: the label stays in flow but invisible. */ [data-slot="button-label"] { display: inline-flex; align-items: center; gap: inherit; } /* Opacity, not visibility, so the label still names the button. */ [data-slot="button-label"][data-hidden="true"] { opacity: 0; } [data-slot="button-busy"] { position: absolute; inset: 0; display: grid; place-items: center; } [data-slot="button-feedback"] { display: inline-flex; align-items: center; gap: inherit; overflow: clip; transition: width var(--duration-normal) var(--ease-out); } [data-slot="button-feedback-label"] { display: inline-flex; flex-shrink: 0; align-items: center; gap: inherit; width: max-content; } [data-slot="button-feedback-label"][data-enter="true"] { animation: caliper-feedback-enter var(--duration-normal) var(--ease-out); } [data-slot="button"][aria-busy="true"] { pointer-events: none; } [data-slot="button"][data-action-phase="error"] { color: var(--danger); } @media (prefers-reduced-motion: reduce) { [data-slot="button"], [data-slot="button-feedback"] { transition: none; } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: none; } [data-slot="button-feedback-label"], [data-slot="button-feedback-label"][data-enter="true"] { animation: none; } } /* Toggle: pressed is recessed, as a toggled tool in a button group is. */ /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */ [data-slot="button"][data-variant="ghost"][data-toggle][aria-pressed="true"] { --b-bg: var(--sunken); --b-bg-hover: var(--sunken); --b-bg-press: var(--sunken); --b-fg: var(--foreground); --b-shadow: var(--shadow-sunken); --b-shadow-press: var(--shadow-sunken); } } 5d:T6cf,/* Shared by calendar.tsx, returns-calendar.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Calendar: today gets an ember dot, data marks a quiet bar, unavailable days are struck through. */ [data-slot="calendar-day"][aria-current="date"] { font-weight: 600; } [data-slot="calendar-day"][aria-current="date"]::before { content: ""; position: absolute; top: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ring); } [data-slot="calendar-day"][data-mark]::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 12px; height: 2px; margin-left: -6px; border-radius: 1px; background: var(--border-strong); } [data-slot="calendar-day"][data-selected="true"]::after, [data-slot="calendar-day"][data-selected="true"]::before { background: var(--background); } [data-slot="calendar-day"][aria-disabled="true"] { text-decoration: line-through; } [data-slot="calendar-day"] { transition: background-color var(--duration-travel) var(--ease-showcase), color var(--duration-fast) var(--ease-out); } [data-slot="calendar-day"][data-selected="true"] { color: var(--background); } @media (prefers-reduced-motion: reduce) { [data-slot="calendar-day"] { transition: background-color 400ms var(--ease-showcase), color 120ms var(--ease-out); } [data-slot="calendar-day"][data-selected="true"] { animation: caliper-day-select 400ms var(--ease-showcase); } } [data-slot="calendar-day"] { font-size: 0.6875rem; color: var(--muted-foreground); } } 5e:T558,/* calendar.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="calendar-grid"][data-motion="next"] { animation: caliper-calendar-next var(--duration-travel) var(--ease-showcase); } [data-slot="calendar-grid"][data-motion="prev"] { animation: caliper-calendar-prev var(--duration-travel) var(--ease-showcase); } [data-slot="calendar-range"] { position: absolute; z-index: 0; height: 2.25rem; border-radius: 999px; background: var(--muted); transition: left var(--duration-travel) var(--ease-showcase), width var(--duration-travel) var(--ease-showcase); } [data-slot="calendar-selection"] { position: absolute; z-index: 1; border-radius: var(--radius-control); background: var(--foreground); pointer-events: none; transition: transform var(--duration-travel) var(--ease-showcase), width var(--duration-travel) var(--ease-showcase), height var(--duration-travel) var(--ease-showcase); } @media (prefers-reduced-motion: reduce) { [data-slot="calendar-grid"][data-motion="next"] { animation: caliper-calendar-next 400ms var(--ease-showcase); } [data-slot="calendar-grid"][data-motion="prev"] { animation: caliper-calendar-prev 400ms var(--ease-showcase); } } } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L52",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/alert.tsx","content":"$54","type":"registry:ui","target":"components/ui/alert.tsx"},{"path":"ui/availability-scheduler.tsx","content":"$55","type":"registry:ui","target":"components/ui/availability-scheduler.tsx"},{"path":"ui/button.tsx","content":"$56","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"ui/calendar.tsx","content":"$57","type":"registry:ui","target":"components/ui/calendar.tsx"},{"path":"ui/feedback.tsx","content":"import { CircleCheck, CircleX, Info, LoaderCircle, TriangleAlert } from \"lucide-react\";\nimport \"./feedback.css\";\n\nexport type FeedbackVariant = \"neutral\" | \"success\" | \"warning\" | \"error\";\n\nconst icons = {\n neutral: Info,\n success: CircleCheck,\n warning: TriangleAlert,\n error: CircleX,\n};\n\nexport function FeedbackIcon({\n variant,\n loading = false,\n}: {\n variant: FeedbackVariant;\n loading?: boolean;\n}) {\n const Icon = loading ? LoaderCircle : icons[variant];\n return (\n \n \n \n \n \n );\n}\n","type":"registry:ui","target":"components/ui/feedback.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/rolling-value.tsx","content":"\"use client\";\n\nimport { useState } from \"react\";\nimport \"./rolling-value.css\";\n\nexport function RollingValue({\n value,\n direction,\n}: {\n value: string;\n direction: \"up\" | \"down\" | \"none\";\n}) {\n const [frame, setFrame] = useState({ value, prior: value });\n if (frame.value !== value) setFrame({ value, prior: frame.value });\n const prior = frame.prior;\n const glyphs = [...value];\n\n return (\n \n {glyphs.map((glyph, index) => {\n const changed = prior.length !== glyphs.length || prior[index] !== glyph;\n return (\n \n \n {glyph === \" \" ? \"\\u00A0\" : glyph}\n \n \n );\n })}\n \n );\n}\n","type":"registry:ui","target":"components/ui/rolling-value.tsx"},{"path":"ui/segmented-control.tsx","content":"$58","type":"registry:ui","target":"components/ui/segmented-control.tsx"},{"path":"ui/shared/alert.css","content":"$59","type":"registry:file","target":"components/ui/shared/alert.css"},{"path":"ui/alert.css","content":"$5a","type":"registry:file","target":"components/ui/alert.css"},{"path":"ui/availability-scheduler.css","content":"$5b","type":"registry:file","target":"components/ui/availability-scheduler.css"},{"path":"ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"loading-indicator\"] {\n animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"loading-indicator\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/loading-indicator.css"},{"path":"ui/button.css","content":"$5c","type":"registry:file","target":"components/ui/button.css"},{"path":"ui/shared/calendar-day.css","content":"$5d","type":"registry:file","target":"components/ui/shared/calendar-day.css"},{"path":"ui/calendar.css","content":"$5e","type":"registry:file","target":"components/ui/calendar.css"},{"path":"ui/feedback.css","content":"/* feedback.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"feedback-icon\"] {\n display: flex;\n width: 2rem;\n height: 2rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-surface);\n background: var(--muted);\n color: var(--muted-foreground);\n transition:\n color var(--duration-fast) var(--ease-out),\n background-color var(--duration-fast) var(--ease-out);\n }\n [data-slot=\"feedback-symbol\"] {\n display: flex;\n animation: caliper-feedback-symbol-enter var(--duration-normal) var(--ease-out);\n }\n [data-slot=\"feedback-icon\"] svg {\n width: 1rem;\n height: 1rem;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"feedback-icon\"] {\n transition: none;\n transform: none !important;\n }\n [data-slot=\"feedback-symbol\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/feedback.css"},{"path":"ui/rolling-value.css","content":"/* rolling-value.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in var(--duration-travel) var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down var(--duration-travel) var(--ease-showcase);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in 400ms var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down 400ms var(--ease-showcase);\n }\n }\n}\n\n@keyframes caliper-digit-down {\n from {\n transform: translateY(70%);\n }\n to {\n transform: translateY(0);\n }\n}\n","type":"registry:file","target":"components/ui/rolling-value.css"},{"path":"ui/shared/segmented-indicator.css","content":"/* Shared by billing-toggle.tsx, segmented-control.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n /* Segmented control: one raised plate travels to the choice on the settle\n curve and stretches 7% toward it mid-flight, so selection reads as one\n object moving. Labels and the value change at once. */\n [data-slot=\"segmented-indicator\"] {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n pointer-events: none;\n transition:\n transform 320ms var(--ease-settle),\n width 320ms var(--ease-settle);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"segmented-indicator\"] {\n transition: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/segmented-indicator.css"},{"path":"ui/segmented-control.css","content":"/* segmented-control.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"segmented-plate\"] {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 9px;\n background: var(--raised);\n box-shadow: var(--shadow-plate);\n }\n [data-slot=\"segmented-plate\"][data-moved=\"true\"] {\n animation: caliper-plate-stretch 320ms var(--ease-out);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"segmented-plate\"] {\n transition: none;\n }\n [data-slot=\"segmented-plate\"][data-moved=\"true\"] {\n animation: none;\n }\n }\n @keyframes caliper-plate-stretch {\n 40% {\n transform: scaleX(1.07);\n }\n }\n}\n","type":"registry:file","target":"components/ui/segmented-control.css"}],"className":"h-[70svh] min-h-80"}]]}]