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:T75da,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { CalendarDays, ChevronDown, ChevronLeft, ChevronRight, X } from "lucide-react"; import { Popover as PopoverPrimitive } from "radix-ui"; 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 (

); } const FIELD = { outline: "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:ring-black/[0.16] focus-visible:ring-2 focus-visible:ring-neutral-950/20 data-[state=open]:ring-2 data-[state=open]:ring-neutral-950/20 dark:bg-white/[0.03] dark:shadow-none dark:ring-white/[0.12] dark:hover:ring-white/[0.2] dark:focus-visible:ring-white/25 dark:data-[state=open]:ring-white/25", soft: "bg-neutral-100 hover:bg-neutral-200/60 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral-950/20 data-[state=open]:bg-white data-[state=open]:ring-2 data-[state=open]:ring-inset data-[state=open]:ring-neutral-950/20 dark:bg-white/[0.06] dark:hover:bg-white/[0.08] dark:data-[state=open]:bg-white/[0.04] dark:data-[state=open]:ring-white/25", } as const; const FIELD_SIZES = { sm: "h-8 gap-2 rounded-[10px] pl-2.5 pr-8 text-[13px] [&>svg]:size-3.5", md: "h-10 gap-2.5 rounded-xl pl-3 pr-9 text-sm [&>svg]:size-4", } as const; export type DatePreset = { label: string; value: T }; type PickerProps = { placeholder?: string; /** outline: a bordered field · soft: filled, no border. */ variant?: keyof typeof FIELD; size?: keyof typeof FIELD_SIZES; invalid?: boolean; disabled?: boolean; /** Show an × that clears the value. */ clearable?: boolean; /** Days that can't be picked, e.g. weekends. */ disabledDays?: (date: Date) => boolean; min?: Date; max?: Date; weekStartsOn?: 0 | 1; captionLayout?: "label" | "dropdown"; locale?: string; align?: "start" | "center" | "end"; id?: string; "aria-label"?: string; /** Classes for the trigger field. */ className?: string; }; const iso = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; function usePicked(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) { const [inner, setInner] = useState(defaultValue); const current: T = value === undefined ? inner : value; const set = (next: T) => { if (value === undefined) setInner(next); onChange?.(next); }; return [current, set] as const; } function Picker({ label, empty, onClear, open, setOpen, props, children, }: { label: string | null; empty: string; onClear: () => void; open: boolean; setOpen: (open: boolean) => void; props: PickerProps; children: ReactNode; }) { const { variant = "outline", size = "md", invalid, disabled, clearable = true, align = "start", id, className } = props; return (

{label ?? empty} {label && clearable && !disabled ? ( ) : ( )}

{open && ( { e.preventDefault(); (e.currentTarget as HTMLElement | null)?.querySelector('button[data-day][tabindex="0"]')?.focus(); }} > {children} )} ); } const CHIP = "h-7 rounded-full px-2.5 text-[12.5px] font-medium text-neutral-600 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] outline-none transition-colors hover:bg-neutral-950/[0.04] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] dark:text-neutral-300 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.12)] dark:hover:bg-white/[0.06] dark:hover:text-white"; export interface DatePickerProps extends PickerProps { value?: Date | null; defaultValue?: Date | null; onValueChange?: (date: Date | null) => void; /** Quick picks under the calendar, e.g. Today and Next week. */ presets?: DatePreset[]; /** Submitted with a form as YYYY-MM-DD. */ name?: string; /** How the picked day reads in the field. */ format?: (date: Date) => string; } /** A field that opens a calendar to pick one day. */ export function DatePicker({ value, defaultValue = null, onValueChange, presets, name, format, placeholder = "Pick a date", ...props }: DatePickerProps) { const [date, setDate] = usePicked(value, defaultValue, onValueChange); const [open, setOpen] = useState(false); const show = format ?? ((d: Date) => d.toLocaleDateString(props.locale ?? "en-US", { month: "short", day: "numeric", year: "numeric" })); const choose = (d: Date | null) => { setDate(d); if (d) setOpen(false); }; return ( <> setDate(null)} open={open} setOpen={setOpen} props={props}> choose(d ?? null)} min={props.min} max={props.max} disabled={props.disabledDays} weekStartsOn={props.weekStartsOn} captionLayout={props.captionLayout} locale={props.locale} footer={ presets?.length ? (

{presets.map((p) => ( ))}

) : undefined } /> {name && } ); } export interface DateRangePickerProps extends PickerProps { value?: DateRange; defaultValue?: DateRange; onValueChange?: (range: DateRange) => void; /** Ranges listed beside the calendar, e.g. Last 7 days. */ presets?: DatePreset[]; /** Months shown side by side. */ months?: number; } /** A field that opens a calendar to pick a start and an end day. */ export function DateRangePicker({ value, defaultValue = {}, onValueChange, presets, months = 2, placeholder = "Pick a range", ...props }: DateRangePickerProps) { const [range, setRange] = usePicked(value, defaultValue, onValueChange); const [open, setOpen] = useState(false); const locale = props.locale ?? "en-US"; const short = (d: Date, year: boolean) => d.toLocaleDateString(locale, { month: "short", day: "numeric", ...(year ? { year: "numeric" } : {}) }); const label = !range.from ? null : !range.to ? `${short(range.from, true)} – …` : range.from.getFullYear() === range.to.getFullYear() ? `${short(range.from, false)} – ${short(range.to, true)}` : `${short(range.from, true)} – ${short(range.to, true)}`; const current = presets?.find((p) => sameDay(p.value.from, range.from) && sameDay(p.value.to, range.to))?.label; return ( setRange({})} open={open} setOpen={setOpen} props={props}>

{presets?.length ? (

{presets.map((p) => ( ))}

) : null} { setRange(r); if (r.from && r.to) setTimeout(() => setOpen(false), 220); }} min={props.min} max={props.max} disabled={props.disabledDays} weekStartsOn={props.weekStartsOn} locale={locale} />

); } export default DatePicker; 2e:T4a125,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { CalendarDays, ChevronDown, ChevronLeft, ChevronRight, X } from "lucide-react";
import { Popover as PopoverPrimitive } from "radix-ui";
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>
  );
}

const FIELD = {
  outline:
    "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:ring-black/[0.16] focus-visible:ring-2 focus-visible:ring-neutral-950/20 data-[state=open]:ring-2 data-[state=open]:ring-neutral-950/20 dark:bg-white/[0.03] dark:shadow-none dark:ring-white/[0.12] dark:hover:ring-white/[0.2] dark:focus-visible:ring-white/25 dark:data-[state=open]:ring-white/25",
  soft: "bg-neutral-100 hover:bg-neutral-200/60 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral-950/20 data-[state=open]:bg-white data-[state=open]:ring-2 data-[state=open]:ring-inset data-[state=open]:ring-neutral-950/20 dark:bg-white/[0.06] dark:hover:bg-white/[0.08] dark:data-[state=open]:bg-white/[0.04] dark:data-[state=open]:ring-white/25",
} as const;

const FIELD_SIZES = {
  sm: "h-8 gap-2 rounded-[10px] pl-2.5 pr-8 text-[13px] [&>svg]:size-3.5",
  md: "h-10 gap-2.5 rounded-xl pl-3 pr-9 text-sm [&>svg]:size-4",
} as const;

export type DatePreset<T> = { label: string; value: T };

type PickerProps = {
  placeholder?: string;
  /** outline: a bordered field · soft: filled, no border. */
  variant?: keyof typeof FIELD;
  size?: keyof typeof FIELD_SIZES;
  invalid?: boolean;
  disabled?: boolean;
  /** Show an × that clears the value. */
  clearable?: boolean;
  /** Days that can't be picked, e.g. weekends. */
  disabledDays?: (date: Date) => boolean;
  min?: Date;
  max?: Date;
  weekStartsOn?: 0 | 1;
  captionLayout?: "label" | "dropdown";
  locale?: string;
  align?: "start" | "center" | "end";
  id?: string;
  "aria-label"?: string;
  /** Classes for the trigger field. */
  className?: string;
};

const iso = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;

function usePicked<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {
  const [inner, setInner] = useState<T>(defaultValue);
  const current: T = value === undefined ? inner : value;
  const set = (next: T) => {
    if (value === undefined) setInner(next);
    onChange?.(next);
  };
  return [current, set] as const;
}

function Picker({
  label,
  empty,
  onClear,
  open,
  setOpen,
  props,
  children,
}: {
  label: string | null;
  empty: string;
  onClear: () => void;
  open: boolean;
  setOpen: (open: boolean) => void;
  props: PickerProps;
  children: ReactNode;
}) {
  const { variant = "outline", size = "md", invalid, disabled, clearable = true, align = "start", id, className } = props;
  return (
    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
      <div className={cn("relative w-full", className)}>
        <PopoverPrimitive.Trigger
          id={id}
          disabled={disabled}
          aria-label={props["aria-label"]}
          aria-invalid={invalid || undefined}
          className={cn(
            "flex w-full items-center text-left outline-none transition-[box-shadow,background-color] duration-150 disabled:cursor-not-allowed disabled:opacity-50",
            FIELD_SIZES[size],
            FIELD[variant],
            invalid && "ring-red-500/50 hover:ring-red-500/60 dark:ring-red-400/50",
          )}
        >
          <CalendarDays className="shrink-0 text-neutral-400 dark:text-neutral-500" />
          <span className={cn("min-w-0 flex-1 truncate", label ? "text-neutral-950 dark:text-white" : "text-neutral-400 dark:text-neutral-500")}>{label ?? empty}</span>
        </PopoverPrimitive.Trigger>
        <span className={cn("absolute inset-y-0 flex items-center", size === "sm" ? "right-1.5" : "right-2")}>
          {label && clearable && !disabled ? (
            <button
              type="button"
              aria-label="Clear"
              onClick={onClear}
              className="flex size-6 items-center justify-center rounded-full text-neutral-400 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white"
            >
              <X className="size-3.5" />
            </button>
          ) : (
            <ChevronDown className={cn("pointer-events-none mr-1 size-4 text-neutral-400 transition-transform duration-200", open && "rotate-180")} />
          )}
        </span>
      </div>
      <AnimatePresence>
        {open && (
          <PopoverPrimitive.Portal forceMount>
            <MotionConfig reducedMotion="user">
              <PopoverPrimitive.Content
                forceMount
                asChild
                align={align}
                sideOffset={8}
                collisionPadding={12}
                onOpenAutoFocus={(e) => {
                  e.preventDefault();
                  (e.currentTarget as HTMLElement | null)?.querySelector<HTMLButtonElement>('button[data-day][tabindex="0"]')?.focus();
                }}
              >
                <motion.div
                  className={cn(
                    "z-50 origin-(--radix-popover-content-transform-origin) rounded-[20px] bg-white p-3 text-neutral-950 outline-none",
                    "shadow-[0_16px_40px_-12px_rgb(0_0_0/0.2),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06]",
                    "dark:bg-neutral-900 dark:text-white dark:shadow-[0_16px_40px_-12px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
                  )}
                  initial={{ opacity: 0, scale: 0.96, y: -6 }}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
                  transition={{ type: "spring", bounce: 0.16, duration: 0.32 }}
                >
                  {children}
                </motion.div>
              </PopoverPrimitive.Content>
            </MotionConfig>
          </PopoverPrimitive.Portal>
        )}
      </AnimatePresence>
    </PopoverPrimitive.Root>
  );
}

const CHIP =
  "h-7 rounded-full px-2.5 text-[12.5px] font-medium text-neutral-600 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] outline-none transition-colors hover:bg-neutral-950/[0.04] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] dark:text-neutral-300 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.12)] dark:hover:bg-white/[0.06] dark:hover:text-white";

export interface DatePickerProps extends PickerProps {
  value?: Date | null;
  defaultValue?: Date | null;
  onValueChange?: (date: Date | null) => void;
  /** Quick picks under the calendar, e.g. Today and Next week. */
  presets?: DatePreset<Date>[];
  /** Submitted with a form as YYYY-MM-DD. */
  name?: string;
  /** How the picked day reads in the field. */
  format?: (date: Date) => string;
}

/** A field that opens a calendar to pick one day. */
export function DatePicker({ value, defaultValue = null, onValueChange, presets, name, format, placeholder = "Pick a date", ...props }: DatePickerProps) {
  const [date, setDate] = usePicked<Date | null>(value, defaultValue, onValueChange);
  const [open, setOpen] = useState(false);
  const show = format ?? ((d: Date) => d.toLocaleDateString(props.locale ?? "en-US", { month: "short", day: "numeric", year: "numeric" }));
  const choose = (d: Date | null) => {
    setDate(d);
    if (d) setOpen(false);
  };
  return (
    <>
      <Picker label={date ? show(date) : null} empty={placeholder} onClear={() => setDate(null)} open={open} setOpen={setOpen} props={props}>
        <Calendar
          variant="plain"
          selected={date ?? undefined}
          onSelect={(d) => choose(d ?? null)}
          min={props.min}
          max={props.max}
          disabled={props.disabledDays}
          weekStartsOn={props.weekStartsOn}
          captionLayout={props.captionLayout}
          locale={props.locale}
          footer={
            presets?.length ? (
              <div className="flex flex-wrap gap-1.5 border-t border-black/[0.06] px-1 pt-3 dark:border-white/[0.08]">
                {presets.map((p) => (
                  <button key={p.label} type="button" onClick={() => choose(p.value)} className={CHIP}>
                    {p.label}
                  </button>
                ))}
              </div>
            ) : undefined
          }
        />
      </Picker>
      {name && <input type="hidden" name={name} value={date ? iso(date) : ""} />}
    </>
  );
}

export interface DateRangePickerProps extends PickerProps {
  value?: DateRange;
  defaultValue?: DateRange;
  onValueChange?: (range: DateRange) => void;
  /** Ranges listed beside the calendar, e.g. Last 7 days. */
  presets?: DatePreset<DateRange>[];
  /** Months shown side by side. */
  months?: number;
}

/** A field that opens a calendar to pick a start and an end day. */
export function DateRangePicker({ value, defaultValue = {}, onValueChange, presets, months = 2, placeholder = "Pick a range", ...props }: DateRangePickerProps) {
  const [range, setRange] = usePicked<DateRange>(value, defaultValue, onValueChange);
  const [open, setOpen] = useState(false);
  const locale = props.locale ?? "en-US";
  const short = (d: Date, year: boolean) => d.toLocaleDateString(locale, { month: "short", day: "numeric", ...(year ? { year: "numeric" } : {}) });
  const label = !range.from
    ? null
    : !range.to
      ? `${short(range.from, true)} – …`
      : range.from.getFullYear() === range.to.getFullYear()
        ? `${short(range.from, false)} – ${short(range.to, true)}`
        : `${short(range.from, true)} – ${short(range.to, true)}`;
  const current = presets?.find((p) => sameDay(p.value.from, range.from) && sameDay(p.value.to, range.to))?.label;
  return (
    <Picker label={label} empty={placeholder} onClear={() => setRange({})} open={open} setOpen={setOpen} props={props}>
      <div className="flex">
        {presets?.length ? (
          <div className="-my-1 mr-3 flex w-[136px] shrink-0 flex-col gap-0.5 border-r border-black/[0.06] py-1 pr-3 dark:border-white/[0.08]">
            {presets.map((p) => (
              <button
                key={p.label}
                type="button"
                onClick={() => {
                  setRange(p.value);
                  setOpen(false);
                }}
                className={cn(
                  "flex h-8 items-center rounded-[10px] px-2.5 text-left text-[13px] outline-none transition-colors",
                  current === p.label
                    ? "bg-neutral-950/[0.06] font-medium text-neutral-950 dark:bg-white/[0.1] dark:text-white"
                    : "text-neutral-600 hover:bg-neutral-950/[0.04] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white",
                )}
              >
                {p.label}
              </button>
            ))}
          </div>
        ) : null}
        <Calendar
          variant="plain"
          mode="range"
          months={months}
          selected={range}
          onSelect={(r) => {
            setRange(r);
            if (r.from && r.to) setTimeout(() => setOpen(false), 220);
          }}
          min={props.min}
          max={props.max}
          disabled={props.disabledDays}
          weekStartsOn={props.weekStartsOn}
          locale={locale}
        />
      </div>
    </Picker>
  );
}

export default DatePicker;

2f:T503,"use client"; import { DatePicker, DateRangePicker } from "@/components/scalar-ui/date-picker"; const inDays = (n: number) => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); }; const label = "mb-1.5 block text-[13px] font-medium text-neutral-800 dark:text-neutral-200"; export default function Demo() { return (

Schedule campaign

Publish on

Runs

); } 30:T372d,

"use client";

import { DatePicker, DateRangePicker } from "@/components/scalar-ui/date-picker";

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

const label = "mb-1.5 block text-[13px] font-medium text-neutral-800 dark:text-neutral-200";

export default function Demo() {
  return (
    <div className="flex h-[460px] w-full max-w-[360px] items-start">
      <div className="w-full rounded-[22px] bg-white p-5 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-[14px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">Schedule campaign</p>
        <div className="mt-4 grid gap-4">
          <div>
            <label htmlFor="publish" className={label}>
              Publish on
            </label>
            <DatePicker id="publish" defaultValue={inDays(3)} min={inDays(0)} />
          </div>
          <div>
            <label htmlFor="run" className={label}>
              Runs
            </label>
            <DateRangePicker id="run" months={1} defaultValue={{ from: inDays(3), to: inDays(17) }} min={inDays(0)} />
          </div>
        </div>
      </div>
    </div>
  );
}

31:Ta38,

import { DatePicker } from "@/components/scalar-ui/date-picker";

export default function Example() {
  return (
    <div className="h-[400px] w-full max-w-[280px]">
      <DatePicker aria-label="Due date" />
    </div>
  );
}

32:T17a7,

import { DateRangePicker } from "@/components/scalar-ui/date-picker";

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

export default function Example() {
  return (
    <div className="flex h-[420px] w-full justify-center">
      <DateRangePicker className="max-w-[300px]" align="center" defaultValue={{ from: inDays(5), to: inDays(12) }} aria-label="Trip dates" />
    </div>
  );
}

33:T434,"use client"; import { useState } from "react"; import { DateRangePicker, type DateRange } from "@/components/scalar-ui/date-picker"; const ago = (n: number) => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate() - n); }; const today = ago(0); const presets = [ { label: "Today", value: { from: today, to: today } }, { label: "Yesterday", value: { from: ago(1), to: ago(1) } }, { label: "Last 7 days", value: { from: ago(6), to: today } }, { label: "Last 30 days", value: { from: ago(29), to: today } }, { label: "Month to date", value: { from: new Date(today.getFullYear(), today.getMonth(), 1), to: today } }, { label: "Year to date", value: { from: new Date(today.getFullYear(), 0, 1), to: today } }, ]; export default function Example() { const [range, setRange] = useState(presets[2].value); return (

); } 34:T327c,

"use client";

import { useState } from "react";
import { DateRangePicker, type DateRange } from "@/components/scalar-ui/date-picker";

const ago = (n: number) => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() - n);
};
const today = ago(0);

const presets = [
  { label: "Today", value: { from: today, to: today } },
  { label: "Yesterday", value: { from: ago(1), to: ago(1) } },
  { label: "Last 7 days", value: { from: ago(6), to: today } },
  { label: "Last 30 days", value: { from: ago(29), to: today } },
  { label: "Month to date", value: { from: new Date(today.getFullYear(), today.getMonth(), 1), to: today } },
  { label: "Year to date", value: { from: new Date(today.getFullYear(), 0, 1), to: today } },
];

export default function Example() {
  const [range, setRange] = useState<DateRange>(presets[2].value);
  return (
    <div className="h-[400px] w-full max-w-[280px]">
      <DateRangePicker months={1} max={today} presets={presets} value={range} onValueChange={setRange} aria-label="Report period" />
    </div>
  );
}

35:T23cf,

import { DatePicker } from "@/components/scalar-ui/date-picker";

const inDays = (n: number) => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
};
const nextMonday = inDays(((8 - new Date().getDay()) % 7) || 7);

export default function Example() {
  return (
    <div className="h-[440px] w-full max-w-[280px]">
      <DatePicker
        placeholder="Remind me…"
        min={inDays(0)}
        presets={[
          { label: "Today", value: inDays(0) },
          { label: "Tomorrow", value: inDays(1) },
          { label: "Next Monday", value: nextMonday },
          { label: "In a month", value: inDays(30) },
        ]}
        aria-label="Reminder"
      />
    </div>
  );
}

36:T1a57,

import { DatePicker } from "@/components/scalar-ui/date-picker";

export default function Example() {
  return (
    <div className="h-[420px] w-full max-w-[280px]">
      <label htmlFor="dob" className="mb-1.5 block text-[13px] font-medium text-neutral-800 dark:text-neutral-200">
        Date of birth
      </label>
      <DatePicker
        id="dob"
        captionLayout="dropdown"
        max={new Date()}
        defaultValue={new Date(1994, 4, 18)}
        format={(d) => d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
      />
    </div>
  );
}

37:T60d,"use client"; import { useState, type FormEvent } from "react"; import { DatePicker } from "@/components/scalar-ui/date-picker"; export default function Example() { const [date, setDate] = useState(null); const [sent, setSent] = useState(null); const [tried, setTried] = useState(false); const submit = (e: FormEvent) => { e.preventDefault(); setTried(true); const value = new FormData(e.currentTarget).get("start") as string; setSent(value || null); }; const invalid = tried && !date; return (

Start date d.getDay() === 0 || d.getDay() === 6} />

{invalid ? "Pick a start date." : sent ? `Submitted start=${sent}` : "Weekdays only."}

); } 38:T40d5,

"use client";

import { useState, type FormEvent } from "react";
import { DatePicker } from "@/components/scalar-ui/date-picker";

export default function Example() {
  const [date, setDate] = useState<Date | null>(null);
  const [sent, setSent] = useState<string | null>(null);
  const [tried, setTried] = useState(false);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setTried(true);
    const value = new FormData(e.currentTarget).get("start") as string;
    setSent(value || null);
  };
  const invalid = tried && !date;
  return (
    <form onSubmit={submit} className="h-[440px] w-full max-w-[300px]">
      <label htmlFor="start" className="mb-1.5 block text-[13px] font-medium text-neutral-800 dark:text-neutral-200">
        Start date
      </label>
      <DatePicker id="start" name="start" value={date} onValueChange={setDate} invalid={invalid} disabledDays={(d) => d.getDay() === 0 || d.getDay() === 6} />
      <p className={invalid ? "mt-1.5 text-[12.5px] text-red-600 dark:text-red-400" : "mt-1.5 text-[12.5px] text-neutral-500 dark:text-neutral-400"}>
        {invalid ? "Pick a start date." : sent ? `Submitted start=${sent}` : "Weekdays only."}
      </p>
      <button className="mt-4 h-10 w-full rounded-[14px] bg-neutral-950 text-sm font-medium text-white outline-none transition-[background-color,transform] hover:bg-neutral-800 focus-visible:bg-neutral-800 active:scale-[0.98] dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200">
        Save
      </button>
    </form>
  );
}

39:T1eb8,

import { DatePicker } from "@/components/scalar-ui/date-picker";

const day = new Date(new Date().getFullYear(), new Date().getMonth(), 20);

export default function Example() {
  return (
    <div className="grid h-[420px] w-full max-w-[280px] content-start gap-3">
      <DatePicker variant="outline" defaultValue={day} aria-label="Outline" />
      <DatePicker variant="soft" defaultValue={day} aria-label="Soft" />
      <DatePicker size="sm" defaultValue={day} aria-label="Small" />
      <DatePicker invalid aria-label="Invalid" />
      <DatePicker disabled defaultValue={day} aria-label="Disabled" />
    </div>
  );
}

29:["$","section","date-picker",{"id":"date-picker","aria-labelledby":"date-picker-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":"date-picker-title","className":"sr-only","children":"Date Picker"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"date-picker","gated":{"unlocked":true,"files":[{"name":"date-picker.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"import { DatePicker } from \"@/components/scalar-ui/date-picker\";\n\nexport default function Example() {\n return (\n

\n \n

\n );\n}\n","html":"$31"},"range":{"name":"range.tsx","code":"import { DateRangePicker } from \"@/components/scalar-ui/date-picker\";\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 return (\n

\n \n

\n );\n}\n","html":"$32"},"presets":{"name":"presets.tsx","code":"$33","html":"$34"},"quick-picks":{"name":"quick-picks.tsx","code":"import { DatePicker } from \"@/components/scalar-ui/date-picker\";\n\nconst inDays = (n: number) => {\n const d = new Date();\n return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);\n};\nconst nextMonday = inDays(((8 - new Date().getDay()) % 7) || 7);\n\nexport default function Example() {\n return (\n

\n \n

\n );\n}\n","html":"$35"},"birthday":{"name":"birthday.tsx","code":"import { DatePicker } from \"@/components/scalar-ui/date-picker\";\n\nexport default function Example() {\n return (\n

\n \n Date of birth\n \n d.toLocaleDateString(\"en-US\", { month: \"long\", day: \"numeric\", year: \"numeric\" })}\n />\n

\n );\n}\n","html":"$36"},"in-a-form":{"name":"in-a-form.tsx","code":"$37","html":"$38"},"variants":{"name":"variants.tsx","code":"import { DatePicker } from \"@/components/scalar-ui/date-picker\";\n\nconst day = new Date(new Date().getFullYear(), new Date().getMonth(), 20);\n\nexport default function Example() {\n return (\n

\n \n \n \n \n \n

\n );\n}\n","html":"$39"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add date-picker","shadcn":"npx shadcn@latest add https://scalarui.com/r/date-picker.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 radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3a","toolbar":"$L3b"}]}],["$L3c","$L3d","$L3e","$L3f","$L40","$L41","$L42"]]}]

Date Pickers

Date Pickers

Default

Range

Presets

Quick Picks

Date of Birth

In a Form

Variants and States