2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T4971,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"; import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type DateRange = { from?: Date; to?: Date }; const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()); const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1); const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); const addMonths = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth() + n, 1); const daysIn = (y: number, m: number) => new Date(y, m + 1, 0).getDate(); const shiftMonth = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth() + n, Math.min(d.getDate(), daysIn(d.getFullYear(), d.getMonth() + n))); const stamp = (d: Date) => d.getFullYear() * 10000 + d.getMonth() * 100 + d.getDate(); const sameDay = (a?: Date, b?: Date) => !!a && !!b && stamp(a) === stamp(b); const monthsBetween = (a: Date, b: Date) => (b.getFullYear() - a.getFullYear()) * 12 + b.getMonth() - a.getMonth(); function weeksOf(month: Date, weekStartsOn: number) { const offset = (month.getDay() - weekStartsOn + 7) % 7; const start = addDays(month, -offset); return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => addDays(start, w * 7 + d))); } type Common = { /** How many months to show side by side. */ months?: number; /** The first month on screen, when you control it. */ month?: Date; defaultMonth?: Date; onMonthChange?: (month: Date) => void; /** 0 for Sunday (default), 1 for Monday. */ weekStartsOn?: 0 | 1; /** Earliest and latest days that can be picked; navigation stops at their months. */ min?: Date; max?: Date; /** Return true for days that can't be picked, e.g. weekends. */ disabled?: (date: Date) => boolean; /** Days that get a small dot, e.g. days with events. */ markers?: Date[]; /** label: the month as a title · dropdown: month and year selects, for dates far away like a birthday. */ captionLayout?: "label" | "dropdown"; /** card: a raised white panel · plain: no surface, for popovers and cards of your own. */ variant?: "card" | "plain"; locale?: string; /** Content under the grid, e.g. presets or a time picker. */ footer?: ReactNode; className?: string; }; export type CalendarProps = Common & ( | { mode?: "single"; selected?: Date; defaultSelected?: Date; onSelect?: (date: Date | undefined) => void } | { mode: "multiple"; selected?: Date[]; defaultSelected?: Date[]; onSelect?: (dates: Date[]) => void } | { mode: "range"; selected?: DateRange; defaultSelected?: DateRange; onSelect?: (range: DateRange) => void } ); const SLIDE = { enter: (dir: number) => ({ x: dir * 28, opacity: 0 }), center: { x: 0, opacity: 1 }, exit: (dir: number) => ({ x: dir * -28, opacity: 0 }), }; const NAV = "flex size-8 items-center justify-center rounded-full text-neutral-500 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 disabled:pointer-events-none disabled:opacity-30 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white dark:focus-visible:bg-white/[0.08] dark:focus-visible:text-white"; /** A month grid for picking one day, several days or a range. Arrow keys move by day and week, Page Up/Down by month. */ export function Calendar(props: CalendarProps) { const { mode = "single", months: count = 1, weekStartsOn = 0, min, max, disabled, markers, captionLayout = "label", variant = "card", locale = "en-US", footer, className } = props; const controlled = "selected" in props; const [inner, setInner] = useState(props.defaultSelected); const selected = (controlled ? props.selected : inner) as Date | Date[] | DateRange | undefined; const commit = (next: unknown) => { if (!controlled) setInner(next); (props.onSelect as ((value: unknown) => void) | undefined)?.(next); }; const single = mode === "single" ? (selected as Date | undefined) : undefined; const list = mode === "multiple" ? ((selected as Date[] | undefined) ?? []) : []; const range = mode === "range" ? ((selected as DateRange | undefined) ?? {}) : {}; const anchor = single ?? list[0] ?? range.from; const [today] = useState(() => startOfDay(new Date())); const [innerMonth, setInnerMonth] = useState(() => startOfMonth(props.defaultMonth ?? anchor ?? today)); const month = props.month ? startOfMonth(props.month) : innerMonth; const last = addMonths(month, count - 1); const [dir, setDir] = useState(0); const [focus, setFocus] = useState(() => startOfDay(anchor ?? today)); const [hover, setHover] = useState(null); const root = useRef(null); const keyboard = useRef(false); const minMonth = min && startOfMonth(min); const maxMonth = max && addMonths(startOfMonth(max), -(count - 1)); const go = (target: Date) => { let next = startOfMonth(target); if (maxMonth && next > maxMonth) next = maxMonth; if (minMonth && next < minMonth) next = minMonth; if (sameDay(next, month)) return; setDir(Math.sign(monthsBetween(month, next))); if (!props.month) setInnerMonth(next); props.onMonthChange?.(next); }; const off = (d: Date) => (min && stamp(d) < stamp(min)) || (max && stamp(d) > stamp(max)) || !!disabled?.(d); const inView = (d: Date) => startOfMonth(d) >= month && startOfMonth(d) <= last; const nextOpen = (from: Date) => Array.from({ length: 31 }, (_, i) => addDays(from, i)).find((d) => d.getMonth() === from.getMonth() && !off(d)); const tabbable = inView(focus) ? (nextOpen(focus) ?? nextOpen(startOfMonth(focus)) ?? focus) : (nextOpen(month) ?? month); useEffect(() => { if (!keyboard.current) return; keyboard.current = false; root.current?.querySelector(`button[data-day="${stamp(focus)}"]:not([data-outside])`)?.focus(); }, [focus, month]); const pick = (d: Date) => { setFocus(d); if (mode === "single") commit(sameDay(single, d) ? undefined : d); else if (mode === "multiple") commit(list.some((x) => sameDay(x, d)) ? list.filter((x) => !sameDay(x, d)) : [...list, d]); else if (!range.from || range.to || stamp(d) < stamp(range.from)) commit({ from: d, to: undefined }); else commit({ from: range.from, to: d }); }; const onKey = (e: KeyboardEvent, from: Date) => { const weekday = (from.getDay() - weekStartsOn + 7) % 7; const steps: Record Date> = { ArrowLeft: () => addDays(from, -1), ArrowRight: () => addDays(from, 1), ArrowUp: () => addDays(from, -7), ArrowDown: () => addDays(from, 7), Home: () => addDays(from, -weekday), End: () => addDays(from, 6 - weekday), PageUp: () => shiftMonth(from, e.shiftKey ? -12 : -1), PageDown: () => shiftMonth(from, e.shiftKey ? 12 : 1), }; if (!steps[e.key]) return; e.preventDefault(); const delta = { ArrowLeft: -1, ArrowUp: -7, ArrowDown: 7 }[e.key] ?? 1; let next = steps[e.key](); for (let i = 0; i < 366 && off(next); i++) next = addDays(next, delta); if (off(next)) return; keyboard.current = true; setFocus(next); if (startOfMonth(next) < month) go(next); else if (startOfMonth(next) > last) go(addMonths(next, -(count - 1))); }; const fullDate = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric" }); const title = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }); const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2026, 1, 1 + weekStartsOn + i)).slice(0, 2)); const rangeEnd = range.to ?? (range.from && hover && stamp(hover) > stamp(range.from) ? hover : undefined); const preview = !range.to; return (

{Array.from({ length: count }, (_, m) => { const shown = addMonths(month, m); const outsideDays = count === 1; return (

{captionLayout === "dropdown" && m === 0 ? ( ) : (

{title.format(shown)}

)}

setHover(null)}> {weekdays.map((w) => ( ))} {weeksOf(shown, weekStartsOn).map((week) => ( {week.map((d, col) => { const outside = d.getMonth() !== shown.getMonth(); if (outside && !outsideDays) return ); })} ))}

{w}
; const isOff = off(d); const isStart = sameDay(d, range.from); const isEnd = sameDay(d, rangeEnd); const inRange = !!range.from && !!rangeEnd && stamp(d) >= stamp(range.from) && stamp(d) <= stamp(rangeEnd); const picked = sameDay(d, single) \|\| list.some((x) => sameDay(x, d)) \|\| isStart \|\| (isEnd && !preview); const lastOfMonth = d.getDate() === daysIn(d.getFullYear(), d.getMonth()); return (	{inRange && !sameDay(range.from, rangeEnd) && !outside && ( )}

); })}

{footer &&

{footer}

}

); } const SELECT = "h-8 cursor-pointer appearance-none rounded-lg bg-transparent pl-2 pr-6 text-[14px] font-semibold tracking-[-0.01em] text-neutral-950 outline-none transition-colors hover:bg-neutral-950/[0.05] focus-visible:bg-neutral-950/[0.07] dark:text-white dark:hover:bg-white/[0.08] dark:focus-visible:bg-white/[0.1] [&>option]:text-neutral-950"; function Dropdowns({ month, min, max, locale, onChange }: { month: Date; min?: Date; max?: Date; locale: string; onChange: (month: Date) => void }) { const names = Array.from({ length: 12 }, (_, i) => new Intl.DateTimeFormat(locale, { month: "short" }).format(new Date(2026, i, 1))); const now = new Date().getFullYear(); const from = min?.getFullYear() ?? now - 100; const to = max?.getFullYear() ?? now + 10; const years = Array.from({ length: to - from + 1 }, (_, i) => to - i); return (

); } export default Calendar; 2e:T2f31c,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type DateRange = { from?: Date; to?: Date };

const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
const addMonths = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth() + n, 1);
const daysIn = (y: number, m: number) => new Date(y, m + 1, 0).getDate();
const shiftMonth = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth() + n, Math.min(d.getDate(), daysIn(d.getFullYear(), d.getMonth() + n)));
const stamp = (d: Date) => d.getFullYear() * 10000 + d.getMonth() * 100 + d.getDate();
const sameDay = (a?: Date, b?: Date) => !!a && !!b && stamp(a) === stamp(b);
const monthsBetween = (a: Date, b: Date) => (b.getFullYear() - a.getFullYear()) * 12 + b.getMonth() - a.getMonth();

function weeksOf(month: Date, weekStartsOn: number) {
  const offset = (month.getDay() - weekStartsOn + 7) % 7;
  const start = addDays(month, -offset);
  return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => addDays(start, w * 7 + d)));
}

type Common = {
  /** How many months to show side by side. */
  months?: number;
  /** The first month on screen, when you control it. */
  month?: Date;
  defaultMonth?: Date;
  onMonthChange?: (month: Date) => void;
  /** 0 for Sunday (default), 1 for Monday. */
  weekStartsOn?: 0 | 1;
  /** Earliest and latest days that can be picked; navigation stops at their months. */
  min?: Date;
  max?: Date;
  /** Return true for days that can't be picked, e.g. weekends. */
  disabled?: (date: Date) => boolean;
  /** Days that get a small dot, e.g. days with events. */
  markers?: Date[];
  /** label: the month as a title · dropdown: month and year selects, for dates far away like a birthday. */
  captionLayout?: "label" | "dropdown";
  /** card: a raised white panel · plain: no surface, for popovers and cards of your own. */
  variant?: "card" | "plain";
  locale?: string;
  /** Content under the grid, e.g. presets or a time picker. */
  footer?: ReactNode;
  className?: string;
};

export type CalendarProps = Common &
  (
    | { mode?: "single"; selected?: Date; defaultSelected?: Date; onSelect?: (date: Date | undefined) => void }
    | { mode: "multiple"; selected?: Date[]; defaultSelected?: Date[]; onSelect?: (dates: Date[]) => void }
    | { mode: "range"; selected?: DateRange; defaultSelected?: DateRange; onSelect?: (range: DateRange) => void }
  );

const SLIDE = {
  enter: (dir: number) => ({ x: dir * 28, opacity: 0 }),
  center: { x: 0, opacity: 1 },
  exit: (dir: number) => ({ x: dir * -28, opacity: 0 }),
};

const NAV =
  "flex size-8 items-center justify-center rounded-full text-neutral-500 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 disabled:pointer-events-none disabled:opacity-30 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white dark:focus-visible:bg-white/[0.08] dark:focus-visible:text-white";

/** A month grid for picking one day, several days or a range. Arrow keys move by day and week, Page Up/Down by month. */
export function Calendar(props: CalendarProps) {
  const { mode = "single", months: count = 1, weekStartsOn = 0, min, max, disabled, markers, captionLayout = "label", variant = "card", locale = "en-US", footer, className } = props;
  const controlled = "selected" in props;
  const [inner, setInner] = useState<unknown>(props.defaultSelected);
  const selected = (controlled ? props.selected : inner) as Date | Date[] | DateRange | undefined;
  const commit = (next: unknown) => {
    if (!controlled) setInner(next);
    (props.onSelect as ((value: unknown) => void) | undefined)?.(next);
  };
  const single = mode === "single" ? (selected as Date | undefined) : undefined;
  const list = mode === "multiple" ? ((selected as Date[] | undefined) ?? []) : [];
  const range = mode === "range" ? ((selected as DateRange | undefined) ?? {}) : {};
  const anchor = single ?? list[0] ?? range.from;

  const [today] = useState(() => startOfDay(new Date()));
  const [innerMonth, setInnerMonth] = useState(() => startOfMonth(props.defaultMonth ?? anchor ?? today));
  const month = props.month ? startOfMonth(props.month) : innerMonth;
  const last = addMonths(month, count - 1);
  const [dir, setDir] = useState(0);
  const [focus, setFocus] = useState(() => startOfDay(anchor ?? today));
  const [hover, setHover] = useState<Date | null>(null);
  const root = useRef<HTMLDivElement>(null);
  const keyboard = useRef(false);

  const minMonth = min && startOfMonth(min);
  const maxMonth = max && addMonths(startOfMonth(max), -(count - 1));
  const go = (target: Date) => {
    let next = startOfMonth(target);
    if (maxMonth && next > maxMonth) next = maxMonth;
    if (minMonth && next < minMonth) next = minMonth;
    if (sameDay(next, month)) return;
    setDir(Math.sign(monthsBetween(month, next)));
    if (!props.month) setInnerMonth(next);
    props.onMonthChange?.(next);
  };

  const off = (d: Date) => (min && stamp(d) < stamp(min)) || (max && stamp(d) > stamp(max)) || !!disabled?.(d);
  const inView = (d: Date) => startOfMonth(d) >= month && startOfMonth(d) <= last;
  const nextOpen = (from: Date) => Array.from({ length: 31 }, (_, i) => addDays(from, i)).find((d) => d.getMonth() === from.getMonth() && !off(d));
  const tabbable = inView(focus) ? (nextOpen(focus) ?? nextOpen(startOfMonth(focus)) ?? focus) : (nextOpen(month) ?? month);

  useEffect(() => {
    if (!keyboard.current) return;
    keyboard.current = false;
    root.current?.querySelector<HTMLButtonElement>(`button[data-day="${stamp(focus)}"]:not([data-outside])`)?.focus();
  }, [focus, month]);

  const pick = (d: Date) => {
    setFocus(d);
    if (mode === "single") commit(sameDay(single, d) ? undefined : d);
    else if (mode === "multiple") commit(list.some((x) => sameDay(x, d)) ? list.filter((x) => !sameDay(x, d)) : [...list, d]);
    else if (!range.from || range.to || stamp(d) < stamp(range.from)) commit({ from: d, to: undefined });
    else commit({ from: range.from, to: d });
  };

  const onKey = (e: KeyboardEvent<HTMLButtonElement>, from: Date) => {
    const weekday = (from.getDay() - weekStartsOn + 7) % 7;
    const steps: Record<string, () => Date> = {
      ArrowLeft: () => addDays(from, -1),
      ArrowRight: () => addDays(from, 1),
      ArrowUp: () => addDays(from, -7),
      ArrowDown: () => addDays(from, 7),
      Home: () => addDays(from, -weekday),
      End: () => addDays(from, 6 - weekday),
      PageUp: () => shiftMonth(from, e.shiftKey ? -12 : -1),
      PageDown: () => shiftMonth(from, e.shiftKey ? 12 : 1),
    };
    if (!steps[e.key]) return;
    e.preventDefault();
    const delta = { ArrowLeft: -1, ArrowUp: -7, ArrowDown: 7 }[e.key] ?? 1;
    let next = steps[e.key]();
    for (let i = 0; i < 366 && off(next); i++) next = addDays(next, delta);
    if (off(next)) return;
    keyboard.current = true;
    setFocus(next);
    if (startOfMonth(next) < month) go(next);
    else if (startOfMonth(next) > last) go(addMonths(next, -(count - 1)));
  };

  const fullDate = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
  const title = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
  const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2026, 1, 1 + weekStartsOn + i)).slice(0, 2));
  const rangeEnd = range.to ?? (range.from && hover && stamp(hover) > stamp(range.from) ? hover : undefined);
  const preview = !range.to;

  return (
    <MotionConfig reducedMotion="user">
      <div
        ref={root}
        className={cn(
          "relative w-fit select-none text-neutral-950 dark:text-white",
          variant === "card" &&
            "rounded-[22px] bg-white p-3 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]",
          className,
        )}
      >
        <div className={cn("absolute z-20 flex gap-0.5", variant === "card" ? "right-3 top-3.5" : "right-0 top-0.5")}>
          <button type="button" aria-label="Previous month" onClick={() => go(addMonths(month, -1))} disabled={!!minMonth && month <= minMonth} className={NAV}>
            <ChevronLeft className="size-4" />
          </button>
          <button type="button" aria-label="Next month" onClick={() => go(addMonths(month, 1))} disabled={!!maxMonth && month >= maxMonth} className={NAV}>
            <ChevronRight className="size-4" />
          </button>
        </div>
        <div className="relative overflow-hidden">
          <AnimatePresence mode="popLayout" initial={false} custom={dir}>
            <motion.div
              key={stamp(month)}
              custom={dir}
              variants={SLIDE}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{ type: "spring", bounce: 0, duration: 0.32 }}
              className="flex flex-wrap gap-x-5 gap-y-4"
            >
              {Array.from({ length: count }, (_, m) => {
                const shown = addMonths(month, m);
                const outsideDays = count === 1;
                return (
                  <div key={m}>
                    <div className="flex h-9 items-center pl-2 pr-[72px]">
                      {captionLayout === "dropdown" && m === 0 ? (
                        <Dropdowns month={shown} min={min} max={max} locale={locale} onChange={go} />
                      ) : (
                        <p aria-live="polite" className="text-[14px] font-semibold tracking-[-0.01em]">
                          {title.format(shown)}
                        </p>
                      )}
                    </div>
                    <table role="grid" aria-label={title.format(shown)} className="mt-1 border-separate border-spacing-y-0.5" onMouseLeave={() => setHover(null)}>
                      <thead>
                        <tr>
                          {weekdays.map((w) => (
                            <th key={w} scope="col" className="h-8 w-10 p-0 text-[12px] font-medium text-neutral-400 dark:text-neutral-500">
                              {w}
                            </th>
                          ))}
                        </tr>
                      </thead>
                      <tbody>
                        {weeksOf(shown, weekStartsOn).map((week) => (
                          <tr key={stamp(week[0])}>
                            {week.map((d, col) => {
                              const outside = d.getMonth() !== shown.getMonth();
                              if (outside && !outsideDays) return <td key={col} className="h-9 w-10 p-0" />;
                              const isOff = off(d);
                              const isStart = sameDay(d, range.from);
                              const isEnd = sameDay(d, rangeEnd);
                              const inRange = !!range.from && !!rangeEnd && stamp(d) >= stamp(range.from) && stamp(d) <= stamp(rangeEnd);
                              const picked = sameDay(d, single) || list.some((x) => sameDay(x, d)) || isStart || (isEnd && !preview);
                              const lastOfMonth = d.getDate() === daysIn(d.getFullYear(), d.getMonth());
                              return (
                                <td key={col} role="gridcell" aria-selected={picked || inRange || undefined} className="relative h-9 w-10 p-0">
                                  {inRange && !sameDay(range.from, rangeEnd) && !outside && (
                                    <span
                                      aria-hidden
                                      className={cn(
                                        "absolute inset-y-0",
                                        preview ? "bg-neutral-950/[0.035] dark:bg-white/[0.05]" : "bg-neutral-950/[0.06] dark:bg-white/[0.08]",
                                        isStart ? "left-1/2" : "left-0",
                                        isEnd ? "right-1/2" : "right-0",
                                        !isStart && (col === 0 || d.getDate() === 1) && "rounded-l-full",
                                        !isEnd && (col === 6 || lastOfMonth) && "rounded-r-full",
                                      )}
                                    />
                                  )}
                                  <button
                                    type="button"
                                    data-day={stamp(d)}
                                    data-outside={outside || undefined}
                                    tabIndex={!outside && sameDay(d, tabbable) ? 0 : -1}
                                    disabled={isOff}
                                    aria-label={`${fullDate.format(d)}${sameDay(d, today) ? ", today" : ""}`}
                                    onClick={() => {
                                      pick(d);
                                      if (outside) go(d);
                                    }}
                                    onMouseEnter={() => mode === "range" && setHover(d)}
                                    onFocus={() => setFocus(d)}
                                    onKeyDown={(e) => onKey(e, d)}
                                    className={cn(
                                      "relative mx-auto flex size-9 items-center justify-center rounded-full text-[13.5px] tabular-nums outline-none transition-[background-color,color,box-shadow] duration-150",
                                      "hover:bg-neutral-950/[0.05] focus-visible:bg-neutral-950/[0.07] dark:hover:bg-white/[0.08] dark:focus-visible:bg-white/[0.1]",
                                      outside ? "text-neutral-300 dark:text-neutral-600" : "text-neutral-800 dark:text-neutral-200",
                                      sameDay(d, today) && !picked && "font-semibold text-neutral-950 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.14)] dark:text-white dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.2)]",
                                      isEnd && preview && "shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.25)] dark:shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.3)]",
                                      picked &&
                                        "font-medium text-white hover:bg-transparent focus-visible:bg-transparent focus-visible:shadow-[0_0_0_2px_rgb(255_255_255),0_0_0_3.5px_rgb(10_10_10/0.3)] dark:text-neutral-950 dark:focus-visible:shadow-[0_0_0_2px_rgb(23_23_23),0_0_0_3.5px_rgb(255_255_255/0.4)]",
                                      isOff && "cursor-not-allowed text-neutral-300 line-through decoration-neutral-300 hover:bg-transparent dark:text-neutral-600 dark:decoration-neutral-600",
                                    )}
                                  >
                                    {picked && (
                                      <motion.span
                                        aria-hidden
                                        initial={{ scale: 0.6, opacity: 0 }}
                                        animate={{ scale: 1, opacity: 1 }}
                                        transition={{ type: "spring", bounce: 0.25, duration: 0.3 }}
                                        className="absolute inset-0 rounded-full bg-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.2),inset_0_1px_0_rgb(255_255_255/0.12)] dark:bg-white"
                                      />
                                    )}
                                    <span className="relative">{d.getDate()}</span>
                                    {markers?.some((x) => sameDay(x, d)) && (
                                      <span aria-hidden className={cn("absolute bottom-1 size-1 rounded-full", picked ? "bg-white/70 dark:bg-neutral-950/60" : "bg-neutral-400 dark:bg-neutral-500")} />
                                    )}
                                  </button>
                                </td>
                              );
                            })}
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                );
              })}
            </motion.div>
          </AnimatePresence>
        </div>
        {footer && <div className="mt-2">{footer}</div>}
      </div>
    </MotionConfig>
  );
}

const SELECT =
  "h-8 cursor-pointer appearance-none rounded-lg bg-transparent pl-2 pr-6 text-[14px] font-semibold tracking-[-0.01em] text-neutral-950 outline-none transition-colors hover:bg-neutral-950/[0.05] focus-visible:bg-neutral-950/[0.07] dark:text-white dark:hover:bg-white/[0.08] dark:focus-visible:bg-white/[0.1] [&>option]:text-neutral-950";

function Dropdowns({ month, min, max, locale, onChange }: { month: Date; min?: Date; max?: Date; locale: string; onChange: (month: Date) => void }) {
  const names = Array.from({ length: 12 }, (_, i) => new Intl.DateTimeFormat(locale, { month: "short" }).format(new Date(2026, i, 1)));
  const now = new Date().getFullYear();
  const from = min?.getFullYear() ?? now - 100;
  const to = max?.getFullYear() ?? now + 10;
  const years = Array.from({ length: to - from + 1 }, (_, i) => to - i);
  return (
    <div className="-ml-2 flex">
      <span className="relative flex items-center">
        <select aria-label="Month" value={month.getMonth()} onChange={(e) => onChange(new Date(month.getFullYear(), Number(e.target.value), 1))} className={SELECT}>
          {names.map((n, i) => (
            <option key={n} value={i}>
              {n}
            </option>
          ))}
        </select>
        <ChevronDown className="pointer-events-none absolute right-1.5 size-3.5 text-neutral-400" />
      </span>
      <span className="relative flex items-center">
        <select aria-label="Year" value={month.getFullYear()} onChange={(e) => onChange(new Date(Number(e.target.value), month.getMonth(), 1))} className={cn(SELECT, "tabular-nums")}>
          {years.map((y) => (
            <option key={y} value={y}>
              {y}
            </option>
          ))}
        </select>
        <ChevronDown className="pointer-events-none absolute right-1.5 size-3.5 text-neutral-400" />
      </span>
    </div>
  );
}

export default Calendar;

2f:T2c52,

"use client";

import { useState } from "react";
import { Calendar } from "@/components/scalar-ui/calendar";

const inDays = (n: number) => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
};

export default function Demo() {
  const [date, setDate] = useState<Date | undefined>(inDays(2));
  return (
    <Calendar
      selected={date}
      onSelect={setDate}
      markers={[inDays(-3), inDays(5), inDays(9)]}
      footer={
        <p className="border-t border-black/[0.06] px-2 pt-3 text-[12.5px] text-neutral-500 dark:border-white/[0.08] dark:text-neutral-400">
          {date ? (
            <>
              Due <span className="font-medium text-neutral-900 dark:text-white">{date.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" })}</span>
            </>
          ) : (
            "Pick a due date."
          )}
        </p>
      }
    />
  );
}

30:T1adf,

"use client";

import { useState } from "react";
import { Calendar, type DateRange } from "@/components/scalar-ui/calendar";

const inDays = (n: number) => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
};

export default function Example() {
  const [range, setRange] = useState<DateRange>({ from: inDays(4), to: inDays(11) });
  return <Calendar mode="range" months={2} selected={range} onSelect={setRange} />;
}

31:T481,"use client"; import { useState } from "react"; import { Calendar } from "@/components/scalar-ui/calendar"; const inDays = (n: number) => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); }; export default function Example() { const [days, setDays] = useState([inDays(1), inDays(3), inDays(8)]); return ( {days.length} {days.length === 1 ? "day" : "days"} off } /> ); } 32:T30db,

"use client";

import { useState } from "react";
import { Calendar } from "@/components/scalar-ui/calendar";

const inDays = (n: number) => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
};

export default function Example() {
  const [days, setDays] = useState<Date[]>([inDays(1), inDays(3), inDays(8)]);
  return (
    <Calendar
      mode="multiple"
      selected={days}
      onSelect={setDays}
      footer={
        <div className="flex items-center justify-between border-t border-black/[0.06] px-2 pt-3 text-[12.5px] dark:border-white/[0.08]">
          <span className="text-neutral-500 dark:text-neutral-400">
            <span className="font-medium tabular-nums text-neutral-900 dark:text-white">{days.length}</span> {days.length === 1 ? "day" : "days"} off
          </span>
          <button onClick={() => setDays([])} disabled={!days.length} className="font-medium text-neutral-500 outline-none hover:text-neutral-900 focus-visible:text-neutral-900 disabled:opacity-40 dark:text-neutral-400 dark:hover:text-white">
            Clear
          </button>
        </div>
      }
    />
  );
}

33:T180e,

import { Calendar } from "@/components/scalar-ui/calendar";

const today = new Date();
const min = new Date(today.getFullYear(), today.getMonth(), today.getDate());
const max = new Date(today.getFullYear(), today.getMonth() + 2, 0);

export default function Example() {
  return <Calendar min={min} max={max} weekStartsOn={1} disabled={(d) => d.getDay() === 0 || d.getDay() === 6} />;
}

34:T841,"use client"; import { useState } from "react"; import { Calendar } from "@/components/scalar-ui/calendar"; const inDays = (n: number) => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); }; const events = [ { day: 0, time: "10:00", title: "Design review", tone: "bg-neutral-900 dark:bg-white" }, { day: 0, time: "14:30", title: "1:1 with Maya", tone: "bg-emerald-500" }, { day: 2, time: "09:00", title: "Sprint planning", tone: "bg-neutral-900 dark:bg-white" }, { day: 6, time: "16:00", title: "Launch retro", tone: "bg-amber-500" }, { day: 6, time: "17:00", title: "Team drinks", tone: "bg-emerald-500" }, ]; const key = (d: Date) => d.toDateString(); export default function Example() { const [day, setDay] = useState(inDays(0)); const list = events.filter((e) => day && key(inDays(e.day)) === key(day)); return (

inDays(e.day))} />

{day ? day.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" }) : "No day picked"}

Nothing scheduled.
{e.time} {e.title}

); } 35:T5914,

"use client";

import { useState } from "react";
import { Calendar } from "@/components/scalar-ui/calendar";

const inDays = (n: number) => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
};

const events = [
  { day: 0, time: "10:00", title: "Design review", tone: "bg-neutral-900 dark:bg-white" },
  { day: 0, time: "14:30", title: "1:1 with Maya", tone: "bg-emerald-500" },
  { day: 2, time: "09:00", title: "Sprint planning", tone: "bg-neutral-900 dark:bg-white" },
  { day: 6, time: "16:00", title: "Launch retro", tone: "bg-amber-500" },
  { day: 6, time: "17:00", title: "Team drinks", tone: "bg-emerald-500" },
];

const key = (d: Date) => d.toDateString();

export default function Example() {
  const [day, setDay] = useState<Date | undefined>(inDays(0));
  const list = events.filter((e) => day && key(inDays(e.day)) === key(day));
  return (
    <div className="flex flex-wrap items-start justify-center gap-4">
      <Calendar selected={day} onSelect={setDay} markers={events.map((e) => inDays(e.day))} />
      <div className="w-[220px] rounded-[22px] bg-white p-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
        <p className="text-[13.5px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">{day ? day.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" }) : "No day picked"}</p>
        <ul className="mt-3 space-y-2.5">
          {list.length === 0 && <li className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Nothing scheduled.</li>}
          {list.map((e) => (
            <li key={e.title} className="flex items-center gap-2.5 text-[12.5px]">
              <span className={`size-1.5 shrink-0 rounded-full ${e.tone}`} />
              <span className="w-10 tabular-nums text-neutral-500 dark:text-neutral-400">{e.time}</span>
              <span className="truncate font-medium text-neutral-800 dark:text-neutral-200">{e.title}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

36:T208b,

"use client";

import { useState } from "react";
import { Calendar } from "@/components/scalar-ui/calendar";

export default function Example() {
  const [birthday, setBirthday] = useState<Date | undefined>(new Date(1994, 4, 18));
  return (
    <Calendar
      captionLayout="dropdown"
      selected={birthday}
      onSelect={setBirthday}
      max={new Date()}
      footer={
        <p className="border-t border-black/[0.06] px-2 pt-3 text-[12.5px] text-neutral-500 dark:border-white/[0.08] dark:text-neutral-400">
          Born <span className="font-medium text-neutral-900 dark:text-white">{birthday ? birthday.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "—"}</span>
        </p>
      }
    />
  );
}

37:T9ef,"use client"; import { useState } from "react"; import { Calendar } from "@/components/scalar-ui/calendar"; const today = new Date(); const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); const slots = ["09:00", "09:30", "10:00", "11:00", "13:30", "14:00", "15:30", "16:00"]; const taken = (d: Date, s: string) => (d.getDate() + s.charCodeAt(1) + s.charCodeAt(3)) % 3 === 0; export default function Example() { const [day, setDay] = useState(start); const [slot, setSlot] = useState(null); return (

d.getDay() === 0 || d.getDay() === 6} selected={day} onSelect={(d) => { setDay(d); setSlot(null); }} />

{day ? day.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) : "Pick a day"}

{slots.map((s) => { const off = !day || taken(day, s); const on = slot === s; return ( ); })}

); } 38:T5d06,

"use client";

import { useState } from "react";
import { Calendar } from "@/components/scalar-ui/calendar";

const today = new Date();
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
const slots = ["09:00", "09:30", "10:00", "11:00", "13:30", "14:00", "15:30", "16:00"];
const taken = (d: Date, s: string) => (d.getDate() + s.charCodeAt(1) + s.charCodeAt(3)) % 3 === 0;

export default function Example() {
  const [day, setDay] = useState<Date | undefined>(start);
  const [slot, setSlot] = useState<string | null>(null);
  return (
    <div className="flex w-fit flex-wrap overflow-hidden rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="p-3">
        <Calendar
          variant="plain"
          min={start}
          disabled={(d) => d.getDay() === 0 || d.getDay() === 6}
          selected={day}
          onSelect={(d) => {
            setDay(d);
            setSlot(null);
          }}
        />
      </div>
      <div className="flex w-[180px] flex-col border-l border-black/[0.06] p-3 dark:border-white/[0.08]">
        <p className="flex h-9 items-center px-1 text-[13px] font-medium text-neutral-900 dark:text-white">
          {day ? day.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) : "Pick a day"}
        </p>
        <div className="mt-1 grid gap-1.5">
          {slots.map((s) => {
            const off = !day || taken(day, s);
            const on = slot === s;
            return (
              <button
                key={s}
                disabled={off}
                onClick={() => setSlot(s)}
                aria-pressed={on}
                className={
                  on
                    ? "h-8 rounded-full bg-neutral-950 text-[13px] font-medium tabular-nums text-white outline-none dark:bg-white dark:text-neutral-950"
                    : "h-8 rounded-full text-[13px] tabular-nums text-neutral-700 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] outline-none transition-colors hover:bg-neutral-50 focus-visible:bg-neutral-100 disabled:text-neutral-300 disabled:line-through disabled:shadow-none dark:text-neutral-300 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.12)] dark:hover:bg-white/[0.05] dark:disabled:text-neutral-600"
                }
              >
                {s}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

29:["$","section","calendar",{"id":"calendar","aria-labelledby":"calendar-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"calendar-title","className":"sr-only","children":"Calendar"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"calendar","gated":{"unlocked":true,"files":[{"name":"calendar.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar } from \"@/components/scalar-ui/calendar\";\n\nconst inDays = (n: number) => {\n const d = new Date();\n return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);\n};\n\nexport default function Demo() {\n const [date, setDate] = useState(inDays(2));\n return (\n \n {date ? (\n <>\n Due {date.toLocaleDateString(\"en-US\", { weekday: \"long\", month: \"short\", day: \"numeric\" })}\n \n ) : (\n \"Pick a due date.\"\n )}\n

\n }\n />\n );\n}\n","html":"$2f"}],"examples":{"range":{"name":"range.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar, type DateRange } from \"@/components/scalar-ui/calendar\";\n\nconst inDays = (n: number) => {\n const d = new Date();\n return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);\n};\n\nexport default function Example() {\n const [range, setRange] = useState({ from: inDays(4), to: inDays(11) });\n return ;\n}\n","html":"$30"},"multiple":{"name":"multiple.tsx","code":"$31","html":"$32"},"disabled-days":{"name":"disabled-days.tsx","code":"import { Calendar } from \"@/components/scalar-ui/calendar\";\n\nconst today = new Date();\nconst min = new Date(today.getFullYear(), today.getMonth(), today.getDate());\nconst max = new Date(today.getFullYear(), today.getMonth() + 2, 0);\n\nexport default function Example() {\n return d.getDay() === 0 || d.getDay() === 6} />;\n}\n","html":"$33"},"with-events":{"name":"with-events.tsx","code":"$34","html":"$35"},"dropdown":{"name":"dropdown.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar } from \"@/components/scalar-ui/calendar\";\n\nexport default function Example() {\n const [birthday, setBirthday] = useState(new Date(1994, 4, 18));\n return (\n \n Born {birthday ? birthday.toLocaleDateString(\"en-US\", { month: \"long\", day: \"numeric\", year: \"numeric\" }) : \"—\"}\n

\n }\n />\n );\n}\n","html":"$36"},"booking":{"name":"booking.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add calendar","shadcn":"npx shadcn@latest add https://scalarui.com/r/calendar.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e","$L3f","$L40"]]}]

Calendars

Calendars

Range

Multiple

Disabled Days

With Events

Month and Year

Booking