@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/currency-input.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { type BaseFormattedProps } from "./formatted-input.js";
+declare const currencyInputLabels: {
+    min: string;
+    max: string;
+    negative: string;
+};
+export type CurrencyInputLabels = typeof currencyInputLabels;
+export interface CurrencyInputProps extends BaseFormattedProps<string | null> {
+    /** ISO 4217 code. Default: the LocaleProvider's currency. */
+    currency?: string;
+    /** Fraction digits. Default from the currency (TRY / USD 2, JPY 0, KWD 3). */
+    precision?: number;
+    /** Inclusive bounds as decimal strings ("0.01", "50000"). Checked, never clamped. */
+    min?: string;
+    max?: string;
+    /** Allow negative amounts (credit notes, adjustments). Default false. */
+    allowNegative?: boolean;
+    /** How the currency is shown. `"none"` hides it. Default `"narrowSymbol"` (₺, $, €). */
+    currencyDisplay?: "narrowSymbol" | "symbol" | "code" | "none";
+    /** Custom currency mark ("TL"), placed where the locale puts the symbol. */
+    symbol?: React.ReactNode;
+    /** Text alignment of the amount. `"end"` lines amounts up in tables and totals. Default `"start"`. */
+    align?: "start" | "end";
+    labels?: Partial<CurrencyInputLabels>;
+}
+/** Currency mark and its side for a locale ("₺" before in tr-TR, "€" after in de-DE). */
+export declare function currencyAffix(locale: string, currency: string, display?: "narrowSymbol" | "symbol" | "code"): {
+    text: string;
+    position: "start" | "end";
+};
+/**
+ * Money entry. Types with the locale's grouping live ("1.250.000,50" in Turkish, "1,250,000.50"
+ * in English) without moving the caret; the value is always a **decimal string** ("1250000.50"),
+ * never a float. Either `.` or `,` starts the decimals; pasting "₺1.250,50" works.
+ *
+ * ```tsx
+ * <Field label="Deal value"><CurrencyInput currency="USD" defaultValue="48500.00" /></Field>
+ * <CurrencyInput currency="TRY" min="0.01" align="end" onValueChange={(v) => setAmount(v)} />
+ * ```
+ */
+export declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/currency-input.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose-refs.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useFormattedInput } from "../lib/use-formatted-input.js";
+import { currencyDigits } from "../format/core.js";
+import { compareDecimal } from "../locale-data/core/decimal.js";
+import { Input } from "./input.js";
+import { WithoutFieldName, createDecimalFormat, useDecimalKeys, useFormattedValidity, useSubmitName, } from "./formatted-input.js";
+const currencyInputLabels = {
+    min: "Must be at least {min}",
+    max: "Must be at most {max}",
+    negative: "Must not be negative",
+};
+/** Currency mark and its side for a locale ("₺" before in tr-TR, "€" after in de-DE). */
+export function currencyAffix(locale, currency, display = "narrowSymbol") {
+    const parts = new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: display }).formatToParts(1);
+    const ci = parts.findIndex((p) => p.type === "currency");
+    const ii = parts.findIndex((p) => p.type === "integer");
+    return { text: parts[ci]?.value ?? currency, position: ci !== -1 && ci > ii ? "end" : "start" };
+}
+/**
+ * Money entry. Types with the locale's grouping live ("1.250.000,50" in Turkish, "1,250,000.50"
+ * in English) without moving the caret; the value is always a **decimal string** ("1250000.50"),
+ * never a float. Either `.` or `,` starts the decimals; pasting "₺1.250,50" works.
+ *
+ * ```tsx
+ * <Field label="Deal value"><CurrencyInput currency="USD" defaultValue="48500.00" /></Field>
+ * <CurrencyInput currency="TRY" min="0.01" align="end" onValueChange={(v) => setAmount(v)} />
+ * ```
+ */
+export const CurrencyInput = React.forwardRef(function CurrencyInput(props, forwardedRef) {
+    const { currency: currencyProp, precision: precisionProp, min, max, allowNegative = false, currencyDisplay = "narrowSymbol", symbol, align = "start", value, defaultValue, onValueChange, validateOn = "blur", onValidate, mono, labels, name, invalid, leading, trailing, inputClassName, onBlur, onKeyDown, disabled, ...rest } = props;
+    const { locale, currency: providerCurrency, format: f } = useLocale();
+    const currency = (currencyProp ?? providerCurrency).toUpperCase();
+    const precision = precisionProp ?? currencyDigits(currency);
+    const t = useLabels("currencyInput", currencyInputLabels, labels);
+    const fmt = React.useMemo(() => createDecimalFormat({ locale, precision, fixed: true, allowNegative }), [locale, precision, allowNegative]);
+    const v = useFormattedValidity(validateOn, onValidate);
+    const check = (raw) => {
+        if (raw == null)
+            return { valid: true };
+        if (!allowNegative && raw.startsWith("-"))
+            return { valid: false, reason: "negative", message: t("negative") };
+        if (min !== undefined && compareDecimal(raw, min) < 0)
+            return { valid: false, reason: "min", message: t("min", { min: f.currency(min, currency) }) };
+        if (max !== undefined && compareDecimal(raw, max) > 0)
+            return { valid: false, reason: "max", message: t("max", { max: f.currency(max, currency) }) };
+        return { valid: true };
+    };
+    const engine = useFormattedInput({
+        value,
+        defaultValue,
+        accept: fmt.accept,
+        format: fmt.format,
+        parse: fmt.parse,
+        toDisplay: fmt.toDisplay,
+        formatOnBlur: fmt.formatOnBlur,
+        isSameValue: fmt.isSameValue,
+        onValueChange: (raw, display) => {
+            const c = check(raw);
+            v.report(c, "change");
+            onValueChange?.(raw, { valid: c.valid, reason: c.reason, formatted: display });
+        },
+    });
+    const keys = useDecimalKeys(engine, { locale, decimal: fmt.decimal, precision, allowNegative });
+    const ref = useComposedRefs(forwardedRef, engine.ref);
+    const submitName = useSubmitName(name);
+    const affix = currencyDisplay === "none" ? null : currencyAffix(locale, currency, currencyDisplay);
+    const mark = affix ? (_jsx("span", { "aria-hidden": true, "data-slot": "currency-input-symbol", className: "font-medium text-fg-subtle", children: symbol ?? affix.text })) : null;
+    const atStart = affix?.position === "start";
+    const placeholder = rest.placeholder ?? fmt.toDisplay(precision ? `0.${"0".repeat(precision)}` : "0");
+    return (_jsxs(_Fragment, { children: [_jsx(WithoutFieldName, { children: _jsx(Input, { ref: ref, ...rest, ...engine.inputProps, disabled: disabled, placeholder: placeholder, inputMode: precision === 0 ? "numeric" : "decimal", autoComplete: "off", dir: "ltr", invalid: invalid || v.invalid, leading: atStart ? _jsxs(_Fragment, { children: [leading, mark] }) : leading, trailing: !atStart && mark ? _jsxs(_Fragment, { children: [mark, trailing] }) : trailing, inputClassName: cn("tabular", mono && "font-mono", align === "end" && "text-end", inputClassName), "data-slot": "currency-input", "data-currency": currency, onPaste: keys.onPaste, onKeyDown: (e) => {
+                        onKeyDown?.(e);
+                        keys.onKeyDown(e);
+                        engine.inputProps.onKeyDown(e);
+                    }, onBlur: (e) => {
+                        engine.inputProps.onBlur(e);
+                        v.report(check(fmt.parse(e.currentTarget.value)), "blur");
+                        onBlur?.(e);
+                    } }) }), submitName ? _jsx("input", { type: "hidden", name: submitName, value: engine.raw ?? "", disabled: disabled }) : null] }));
+});

package/dist/components/date-picker.d.ts

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { type DayPickerProps } from "react-day-picker";
+import { type IsoDateString } from "../lib/date.js";
+import { type CalendarGridProps, type CalendarLabels, type DayMatcher } from "./calendar.js";
+import { type TimePickerLabels } from "./time-picker.js";
+export { dateToIso, isoToDate, parseDateInput, formatDateInput, datePlaceholder, getDatePattern, getDateFnsLocale, registerDateLocale, todayIso, addIsoDays, isoDiffDays, rangeLength, isIsoDateString, parseTime, formatTimeValue, timeToMinutes, minutesToTime, compareTime, getHourCycle, timeSlots, defaultRangePresets, type IsoDateString, type IsoDateRange, type DateRangePreset, type DatePattern, type TimeParts, } from "../lib/date.js";
+declare const datePickerLabels: {
+    openCalendar: string;
+    chooseDate: string;
+    clear: string;
+    today: string;
+    invalid: string;
+    beforeMin: string;
+    afterMax: string;
+    unavailable: string;
+    dayToken: string;
+    monthToken: string;
+    yearToken: string;
+    wordsToday: string;
+    wordsTomorrow: string;
+    wordsYesterday: string;
+    date: string;
+    time: string;
+    dialog: string;
+};
+export type DatePickerLabels = typeof datePickerLabels;
+export type DateInputError = "invalid" | "beforeMin" | "afterMax" | "unavailable";
+/** react-day-picker / CalendarGrid props a picker passes to its calendar. */
+export type DatePickerCalendarProps = Partial<Pick<CalendarGridProps, "size" | "renderDayExtra" | "describeDay" | "dayTitle" | "labels">> & Omit<Partial<DayPickerProps>, "mode" | "selected" | "onSelect" | "labels" | "required">;
+/** Validates a parsed date against min / max / disabled matchers. */
+export declare function checkDateValue(iso: IsoDateString, opts: {
+    min?: IsoDateString;
+    max?: IsoDateString;
+    disabledDays?: DayMatcher | DayMatcher[];
+}): DateInputError | null;
+/**
+ * Typed-date state shared by the pickers: the text in the box, parsing on commit (blur / Enter),
+ * locale pattern + relative words, and the validation error.
+ */
+export declare function useDateInputText(options: {
+    value: IsoDateString | null;
+    onCommit: (value: IsoDateString | null) => void;
+    min?: IsoDateString;
+    max?: IsoDateString;
+    disabledDays?: DayMatcher | DayMatcher[];
+    labels?: Partial<DatePickerLabels>;
+    onError?: (error: DateInputError | null, message: string) => void;
+}): {
+    text: string;
+    setText: React.Dispatch<React.SetStateAction<string>>;
+    commit: (raw?: string) => string | null | undefined;
+    error: DateInputError | null;
+    errorMessage: string;
+    placeholder: string;
+    clearError: () => void;
+};
+export interface DatePickerProps {
+    /** `YYYY-MM-DD`, or `null` when empty. */
+    value?: IsoDateString | null;
+    defaultValue?: IsoDateString | null;
+    onValueChange?: (value: IsoDateString | null) => void;
+    /** `"input"` (default): a typeable field + calendar button. `"button"`: a trigger for filter bars. */
+    trigger?: "input" | "button";
+    /** Button trigger text style. Default `"long"` ("November 23, 2026"). */
+    displayFormat?: "short" | "medium" | "long" | "full";
+    /** Default: the locale pattern ("MM/DD/YYYY") for the input, "Pick a date" for the button. */
+    placeholder?: string;
+    /** Earliest date, `YYYY-MM-DD`. */
+    min?: IsoDateString;
+    /** Latest date, `YYYY-MM-DD`. */
+    max?: IsoDateString;
+    /** Days that cannot be picked: react-day-picker matchers or `YYYY-MM-DD` strings. */
+    disabledDays?: DayMatcher | DayMatcher[];
+    /** Show a clear button while there is a value. */
+    clearable?: boolean;
+    /** Show the Today shortcut in the popover footer. Default `true`. */
+    showToday?: boolean;
+    /** Hidden input name; submits `YYYY-MM-DD`. */
+    name?: string;
+    size?: "sm" | "md" | "lg";
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Popover alignment. Default `"start"`. */
+    align?: "start" | "center" | "end";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Called after a typed entry is checked; `null` once it is valid again. Use it for a Field error. */
+    onInputError?: (error: DateInputError | null, message: string) => void;
+    /** Extra calendar props (`captionLayout="dropdown"`, `startMonth`, `showWeekNumber`…). */
+    calendarProps?: DatePickerCalendarProps;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    labels?: Partial<DatePickerLabels>;
+    calendarLabels?: Partial<CalendarLabels>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+}
+/**
+ * Single date in a field with a popover calendar. Type in the locale's pattern (`11/23/2026`,
+ * `23.11.2026`), digits only, a partial date (this year) or "tomorrow" — or pick from the calendar.
+ * The value is a `YYYY-MM-DD` string; it never goes through UTC.
+ *
+ * ```tsx
+ * <Field label="Due date"><DatePicker value={due} onValueChange={setDue} min={todayIso()} /></Field>
+ * <DatePicker trigger="button" placeholder="Any date" clearable />
+ * ```
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement | HTMLButtonElement>>;
+export interface DateTimePickerProps extends Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange" | "trigger" | "name"> {
+    /** Local wall-clock `"YYYY-MM-DDTHH:mm"`, or `null`. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** Time used when only the date has been picked. Default `"09:00"`; `null` waits for a time. */
+    defaultTime?: string | null;
+    /** Minutes between time slots. Default 15. */
+    step?: number;
+    hourCycle?: 12 | 24;
+    /** Earliest / latest time of day (`"HH:mm"`). */
+    minTime?: string;
+    maxTime?: string;
+    /** Time zone shown after the inputs, e.g. `"Europe/Istanbul"` → "GMT+3". */
+    timeZone?: string;
+    /** Hidden input name; submits `"YYYY-MM-DDTHH:mm"`. */
+    name?: string;
+    timeLabels?: Partial<TimePickerLabels>;
+}
+/**
+ * Date + time for scheduling (publish at, appointment, reminder). The value is a local
+ * wall-clock `"YYYY-MM-DDTHH:mm"`; convert it with the shown `timeZone` on the server.
+ *
+ * ```tsx
+ * <DateTimePicker value={publishAt} onValueChange={setPublishAt} timeZone="Europe/Istanbul" />
+ * ```
+ */
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/date-picker.js

@@ -0,0 +1,241 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { dateMatchModifiers } from "react-day-picker";
+import { CalendarDays, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLocale } from "../lib/locale.js";
+import { useLabels } from "../lib/labels.js";
+import { useFieldContext, useFieldControl, FieldContextReset } from "../lib/field-context.js";
+import { useControllableState, useEventCallback } from "../lib/use-controllable-state.js";
+import { mergeIds } from "../lib/compose-refs.js";
+import { controlVariants } from "../lib/variants.js";
+import { datePlaceholder, dateToIso, formatDateInput, isoToDate, parseDateInput, todayIso, } from "../lib/date.js";
+import { CalendarGrid, toDayMatchers } from "./calendar.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Button } from "./button.js";
+import { TimePicker } from "./time-picker.js";
+export { dateToIso, isoToDate, parseDateInput, formatDateInput, datePlaceholder, getDatePattern, getDateFnsLocale, registerDateLocale, todayIso, addIsoDays, isoDiffDays, rangeLength, isIsoDateString, parseTime, formatTimeValue, timeToMinutes, minutesToTime, compareTime, getHourCycle, timeSlots, defaultRangePresets, } from "../lib/date.js";
+const datePickerLabels = {
+    openCalendar: "Open calendar",
+    chooseDate: "Pick a date",
+    clear: "Clear date",
+    today: "Today",
+    invalid: "Enter a valid date ({pattern})",
+    beforeMin: "Choose {min} or later",
+    afterMax: "Choose {max} or earlier",
+    unavailable: "This date isn't available",
+    dayToken: "DD",
+    monthToken: "MM",
+    yearToken: "YYYY",
+    wordsToday: "today, now",
+    wordsTomorrow: "tomorrow, tmrw",
+    wordsYesterday: "yesterday",
+    date: "Date",
+    time: "Time",
+    dialog: "Choose date",
+};
+const words = (s) => s
+    .split(",")
+    .map((w) => w.trim())
+    .filter(Boolean);
+/** Validates a parsed date against min / max / disabled matchers. */
+export function checkDateValue(iso, opts) {
+    if (opts.min && iso < opts.min)
+        return "beforeMin";
+    if (opts.max && iso > opts.max)
+        return "afterMax";
+    const date = isoToDate(iso);
+    if (!date)
+        return "invalid";
+    const extra = toDayMatchers({ disabledDays: opts.disabledDays });
+    if (extra.length && dateMatchModifiers(date, extra))
+        return "unavailable";
+    return null;
+}
+/**
+ * Typed-date state shared by the pickers: the text in the box, parsing on commit (blur / Enter),
+ * locale pattern + relative words, and the validation error.
+ */
+export function useDateInputText(options) {
+    const { value, onCommit, min, max, disabledDays, labels, onError } = options;
+    const t = useLabels("datePicker", datePickerLabels, labels);
+    const { locale, format } = useLocale();
+    const [text, setText] = React.useState(() => formatDateInput(value, locale));
+    const [error, setError] = React.useState(null);
+    const placeholder = datePlaceholder(locale, { day: t("dayToken"), month: t("monthToken"), year: t("yearToken") });
+    const report = useEventCallback(onError);
+    // Follow external value / locale changes.
+    React.useEffect(() => {
+        setText(formatDateInput(value, locale));
+        setError(null);
+    }, [value, locale]);
+    const message = (e) => e === "invalid"
+        ? t("invalid", { pattern: placeholder })
+        : e === "beforeMin"
+            ? t("beforeMin", { min: format.date(min, "medium") })
+            : e === "afterMax"
+                ? t("afterMax", { max: format.date(max, "medium") })
+                : e === "unavailable"
+                    ? t("unavailable")
+                    : "";
+    const fail = (e) => {
+        setError(e);
+        report(e, message(e));
+    };
+    const commit = (raw = text) => {
+        if (!raw.trim()) {
+            fail(null);
+            if (value !== null)
+                onCommit(null);
+            return null;
+        }
+        const iso = parseDateInput(raw, locale, { words: { today: words(t("wordsToday")), tomorrow: words(t("wordsTomorrow")), yesterday: words(t("wordsYesterday")) } });
+        if (!iso) {
+            fail("invalid");
+            return undefined;
+        }
+        const problem = checkDateValue(iso, { min, max, disabledDays });
+        if (problem) {
+            fail(problem);
+            return undefined;
+        }
+        fail(null);
+        setText(formatDateInput(iso, locale));
+        if (iso !== value)
+            onCommit(iso);
+        return iso;
+    };
+    return { text, setText, commit, error, errorMessage: message(error), placeholder, clearError: () => fail(null) };
+}
+const iconButton = "inline-flex size-[calc(var(--control-h)-0.75rem)] shrink-0 items-center justify-center rounded-ui-sm text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4";
+/**
+ * Single date in a field with a popover calendar. Type in the locale's pattern (`11/23/2026`,
+ * `23.11.2026`), digits only, a partial date (this year) or "tomorrow" — or pick from the calendar.
+ * The value is a `YYYY-MM-DD` string; it never goes through UTC.
+ *
+ * ```tsx
+ * <Field label="Due date"><DatePicker value={due} onValueChange={setDue} min={todayIso()} /></Field>
+ * <DatePicker trigger="button" placeholder="Any date" clearable />
+ * ```
+ */
+export const DatePicker = React.forwardRef(function DatePicker(rawProps, forwardedRef) {
+    const { value: valueProp, defaultValue, onValueChange, trigger = "input", displayFormat = "long", placeholder, min, max, disabledDays, clearable, showToday = true, name, size = "md", invalid, align = "start", open: openProp, defaultOpen, onOpenChange, onInputError, calendarProps, className, labels, calendarLabels, onBlur, ...rest } = rawProps;
+    const control = useFieldControl({ ...rest, "aria-invalid": invalid ? true : undefined });
+    const t = useLabels("datePicker", datePickerLabels, labels);
+    const { locale, format, timeZone } = useLocale();
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, onChange: onValueChange, name: "DatePicker" });
+    const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen ?? false, onChange: onOpenChange, name: "DatePicker" });
+    const inputRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const errorId = React.useId();
+    const inert = control.disabled || control.readOnly;
+    const today = todayIso(timeZone === "UTC" ? undefined : timeZone);
+    const typed = useDateInputText({ value, onCommit: setValue, min, max, disabledDays, labels, onError: onInputError });
+    const [month, setMonth] = React.useState(() => isoToDate(value) ?? isoToDate(today));
+    React.useEffect(() => {
+        if (open)
+            setMonth(isoToDate(value) ?? isoToDate(today));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const matchers = React.useMemo(() => toDayMatchers({ min, max, disabledDays }), [min, max, disabledDays]);
+    const todayDisabled = checkDateValue(today, { min, max, disabledDays }) !== null;
+    const invalidNow = control["aria-invalid"] === true || typed.error !== null;
+    const choose = (iso) => {
+        setValue(iso);
+        typed.clearError();
+        setOpen(false);
+    };
+    const footer = showToday || clearable ? (_jsxs("div", { className: "-mx-1 flex items-center justify-between gap-2 border-t border-line px-1 pt-2.5", children: [showToday ? (_jsx(Button, { size: "xs", variant: "ghost", disabled: todayDisabled, onClick: () => choose(today), children: t("today") })) : (_jsx("span", {})), clearable && value ? (_jsx(Button, { size: "xs", variant: "ghost", onClick: () => choose(null), children: t("clear") })) : null] })) : undefined;
+    const content = (_jsx(PopoverContent, { size: "auto", align: align, "aria-label": t("dialog"), onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => {
+            if (trigger === "input") {
+                e.preventDefault();
+                inputRef.current?.focus();
+            }
+        }, children: _jsx(FieldContextReset, { children: _jsx(CalendarGrid, { autoFocus: true, ...calendarProps, labels: calendarLabels, mode: "single", selected: isoToDate(value) ?? undefined, onSelect: (d) => choose(d ? dateToIso(d) : value), month: month, onMonthChange: setMonth, disabled: matchers, startMonth: calendarProps?.startMonth ?? (isoToDate(min) ?? undefined), endMonth: calendarProps?.endMonth ?? (isoToDate(max) ?? undefined), footer: footer }) }) }));
+    const hidden = name ? _jsx("input", { type: "hidden", name: name, value: value ?? "" }) : null;
+    if (trigger === "button") {
+        const label = value ? format.date(value, displayFormat) : (placeholder ?? t("chooseDate"));
+        return (_jsxs(Popover, { open: open, onOpenChange: (o) => !inert && setOpen(o), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: (el) => {
+                            buttonRef.current = el;
+                            if (typeof forwardedRef === "function")
+                                forwardedRef(el);
+                            else if (forwardedRef)
+                                forwardedRef.current = el;
+                        }, type: "button", id: control.id, disabled: control.disabled, "aria-labelledby": control["aria-labelledby"] ? mergeIds(control["aria-labelledby"], control.id) : undefined, "aria-describedby": control["aria-describedby"], "aria-invalid": invalidNow || undefined, "data-slot": "date-picker", "data-readonly": control.readOnly ? "" : undefined, "data-placeholder": value ? undefined : "", onBlur: onBlur, className: cn(controlVariants({ size }), "w-auto cursor-default justify-start text-start focus-ring", className), children: [_jsx(CalendarDays, { "aria-hidden": true, className: "text-fg-subtle" }), control["aria-label"] && !control["aria-labelledby"] ? _jsxs("span", { className: "sr-only", children: [control["aria-label"], ", "] }) : null, _jsx("span", { className: cn("truncate", !value && "text-fg-subtle"), children: label })] }) }), content, hidden] }));
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => !inert && setOpen(o), children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { "data-slot": "date-picker", "data-readonly": control.readOnly ? "" : undefined, className: cn(controlVariants({ size }), "cursor-text gap-0 px-0", className), onPointerDown: (e) => {
+                        if (e.target === e.currentTarget) {
+                            e.preventDefault();
+                            inputRef.current?.focus();
+                        }
+                    }, children: [_jsx("input", { ref: (el) => {
+                                inputRef.current = el;
+                                if (typeof forwardedRef === "function")
+                                    forwardedRef(el);
+                                else if (forwardedRef)
+                                    forwardedRef.current = el;
+                            }, type: "text", inputMode: "text", autoComplete: "off", spellCheck: false, id: control.id, disabled: control.disabled, readOnly: control.readOnly, required: control.required, "aria-label": control["aria-label"], "aria-labelledby": control["aria-labelledby"], "aria-describedby": mergeIds(control["aria-describedby"], typed.error ? errorId : undefined), "aria-invalid": invalidNow || undefined, placeholder: placeholder ?? typed.placeholder, value: typed.text, onChange: (e) => typed.setText(e.currentTarget.value), onBlur: (e) => {
+                                typed.commit();
+                                onBlur?.(e);
+                            }, onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    const r = typed.commit();
+                                    if (r === undefined)
+                                        e.preventDefault();
+                                }
+                                else if (e.key === "ArrowDown" && (e.altKey || e.metaKey) && !inert) {
+                                    e.preventDefault();
+                                    typed.commit();
+                                    setOpen(true);
+                                }
+                            }, className: "h-full min-w-0 flex-1 bg-transparent px-3 font-[inherit] text-[length:inherit] text-fg tabular outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed" }), typed.error ? (_jsx("span", { id: errorId, className: "sr-only", children: typed.errorMessage })) : null, _jsxs("span", { className: "flex shrink-0 items-center gap-0.5 pe-1", children: [clearable && value && !inert ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": t("clear"), className: iconButton, onClick: () => choose(null), children: _jsx(X, { "aria-hidden": true, className: "size-3.5!" }) })) : null, _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ref: buttonRef, type: "button", "aria-label": t("openCalendar"), disabled: inert, className: iconButton, onClick: () => typed.commit(), children: _jsx(CalendarDays, { "aria-hidden": true }) }) })] })] }) }), content, hidden] }));
+});
+function zoneLabel(timeZone, locale) {
+    try {
+        const parts = new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" }).formatToParts(new Date());
+        return parts.find((p) => p.type === "timeZoneName")?.value ?? timeZone;
+    }
+    catch {
+        return timeZone;
+    }
+}
+/**
+ * Date + time for scheduling (publish at, appointment, reminder). The value is a local
+ * wall-clock `"YYYY-MM-DDTHH:mm"`; convert it with the shown `timeZone` on the server.
+ *
+ * ```tsx
+ * <DateTimePicker value={publishAt} onValueChange={setPublishAt} timeZone="Europe/Istanbul" />
+ * ```
+ */
+export const DateTimePicker = React.forwardRef(function DateTimePicker({ value: valueProp, defaultValue, onValueChange, defaultTime = "09:00", step = 15, hourCycle, minTime, maxTime, timeZone, name, timeLabels, labels, className, size = "md", ...dateProps }, ref) {
+    const t = useLabels("datePicker", datePickerLabels, labels);
+    const { locale } = useLocale();
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, onChange: onValueChange, name: "DateTimePicker" });
+    const [date, setDate] = React.useState(() => value?.slice(0, 10) ?? null);
+    const [time, setTime] = React.useState(() => value?.slice(11, 16) ?? null);
+    React.useEffect(() => {
+        if (value) {
+            setDate(value.slice(0, 10));
+            setTime(value.slice(11, 16));
+        }
+        else if (valueProp === null) {
+            setDate(null);
+            setTime(null);
+        }
+    }, [value, valueProp]);
+    const emit = (d, tm) => {
+        setValue(d && tm ? `${d}T${tm}` : null);
+    };
+    return (_jsxs("div", { ref: ref, role: "group", "aria-labelledby": field?.labelId, "data-slot": "date-time-picker", className: cn("flex flex-wrap items-center gap-2", className), children: [_jsxs(FieldContextReset, { children: [_jsx(DatePicker, { ...dateProps, size: size, labels: labels, "aria-label": t("date"), "aria-describedby": field?.describedBy, invalid: dateProps.invalid ?? field?.invalid, disabled: dateProps.disabled ?? field?.disabled, readOnly: dateProps.readOnly ?? field?.readOnly, className: "w-auto min-w-0 flex-[1.4] basis-40", value: date, onValueChange: (d) => {
+                            setDate(d);
+                            const tm = time ?? (d ? defaultTime : null);
+                            if (tm !== time)
+                                setTime(tm);
+                            emit(d, tm);
+                        } }), _jsx(TimePicker, { size: size, labels: timeLabels, "aria-label": t("time"), slots: true, step: step, hourCycle: hourCycle, min: minTime, max: maxTime, disabled: dateProps.disabled ?? field?.disabled, readOnly: dateProps.readOnly ?? field?.readOnly, className: "w-auto min-w-0 flex-1 basis-32", value: time, onValueChange: (tm) => {
+                            setTime(tm);
+                            emit(date, tm);
+                        } })] }), timeZone ? (_jsx("span", { className: "shrink-0 rounded-ui-sm bg-surface-2 px-1.5 py-0.5 font-mono text-[11px] text-fg-muted", title: timeZone, children: zoneLabel(timeZone, locale) })) : null, name ? _jsx("input", { type: "hidden", name: name, value: value ?? "" }) : null] }));
+});

package/dist/components/date-range-picker.d.ts

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { type DateRangePreset, type IsoDateRange, type IsoDateString } from "../lib/date.js";
+import { type CalendarLabels, type DayMatcher } from "./calendar.js";
+import { type DateInputError, type DatePickerCalendarProps, type DatePickerLabels } from "./date-picker.js";
+declare const dateRangePickerLabels: {
+    placeholder: string;
+    openCalendar: string;
+    clear: string;
+    apply: string;
+    cancel: string;
+    presets: string;
+    start: string;
+    end: string;
+    dialog: string;
+    days: string;
+    summary: string;
+    pickEnd: string;
+    minDays: string;
+    maxDays: string;
+    today: string;
+    yesterday: string;
+    last7: string;
+    last30: string;
+    thisWeek: string;
+    thisMonth: string;
+    lastMonth: string;
+    last90: string;
+    thisYear: string;
+};
+export type DateRangePickerLabels = typeof dateRangePickerLabels;
+export interface DateRangePickerProps {
+    /** `{ from, to }` as `YYYY-MM-DD`; `null` when empty. While picking, `to` can be missing. */
+    value?: IsoDateRange | null;
+    defaultValue?: IsoDateRange | null;
+    onValueChange?: (value: IsoDateRange | null) => void;
+    /** Quick ranges beside the calendar. `true` = Today, Yesterday, Last 7 / 30 days, This / Last month… */
+    presets?: DateRangePreset[] | boolean;
+    /** Months side by side. Default 2 (1 below the `sm` breakpoint). */
+    numberOfMonths?: 1 | 2;
+    /** `"apply"`: changes are committed only with Apply (expensive report queries). Default `"immediate"`. */
+    commit?: "immediate" | "apply";
+    /** Minimum length in days (inclusive). */
+    minDays?: number;
+    /** Maximum length in days (inclusive). */
+    maxDays?: number;
+    min?: IsoDateString;
+    max?: IsoDateString;
+    disabledDays?: DayMatcher | DayMatcher[];
+    /** A range may not span disabled days (bookings). */
+    excludeDisabled?: boolean;
+    /** `"button"` (default): one trigger showing the range. `"input"`: two typeable fields. */
+    trigger?: "input" | "button";
+    /** Hidden input names; submit `YYYY-MM-DD`. */
+    nameFrom?: string;
+    nameTo?: string;
+    placeholder?: string;
+    /** Clear button in the footer (and in the input). */
+    clearable?: boolean;
+    size?: "sm" | "md" | "lg";
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    align?: "start" | "center" | "end";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Typed entry problems (input trigger). */
+    onInputError?: (error: DateInputError | null, message: string) => void;
+    calendarProps?: DatePickerCalendarProps;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    labels?: Partial<DateRangePickerLabels>;
+    inputLabels?: Partial<DatePickerLabels>;
+    calendarLabels?: Partial<CalendarLabels>;
+}
+/**
+ * A from–to range in one popover: presets column, one or two month grids, and a footer with the
+ * selected length. Hovering previews the band; `commit="apply"` holds changes until Apply.
+ * Values are `YYYY-MM-DD` strings.
+ *
+ * ```tsx
+ * <DateRangePicker presets value={range} onValueChange={setRange} />
+ * <DateRangePicker commit="apply" maxDays={31} min={todayIso()} />
+ * ```
+ */
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};