@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/lib/data-islands.js

@@ -0,0 +1,368 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Client islands for the server-compatible data-display components (Stat, Delta, Table,
+ * Description list, Item, Activity timeline). Each one is small and only exists because it
+ * needs the locale context, the clock, the clipboard or keyboard state.
+ */
+import * as React from "react";
+import { Check, Copy, Pencil, X } from "lucide-react";
+import { cn } from "./cn.js";
+import { useFormat, useLocale } from "./locale.js";
+import { useLabels } from "./labels.js";
+import { formatValue, dayKey } from "./value-format.js";
+/* ------------------------------------------------------------------ */
+/* Built-in strings                                                     */
+/* ------------------------------------------------------------------ */
+export const statLabels = {
+    up: "Up {value}",
+    down: "Down {value}",
+    flat: "No change",
+    noData: "No data",
+    trendUp: "Trending up over the last {count} periods",
+    trendDown: "Trending down over the last {count} periods",
+    trendFlat: "Flat over the last {count} periods",
+    goal: "Goal {value}",
+    goalReached: "Goal reached",
+    ofGoal: "{percent} of goal",
+};
+export const timelineLabels = {
+    today: "Today",
+    yesterday: "Yesterday",
+    empty: "No activity yet",
+    loadMore: "Load older activity",
+    loading: "Loading…",
+    newItems: "{count, plural, one {# new update} other {# new updates}}",
+    done: "Completed",
+    current: "Current step",
+    upcoming: "Upcoming",
+    failed: "Failed",
+};
+export const descriptionListLabels = {
+    copy: "Copy {label}",
+    copied: "Copied",
+    edit: "Edit {label}",
+    save: "Save",
+    cancel: "Cancel",
+    saving: "Saving…",
+    error: "Could not save. Try again.",
+    empty: "Not set",
+};
+export const tableLabels = { empty: "No results" };
+const DATA_LABELS = { table: tableLabels, stat: statLabels, timeline: timelineLabels, descriptionList: descriptionListLabels };
+/** One built-in data-display string, translated through LocaleProvider: `<DataLabel ns="timeline" id="today" />`. */
+export function DataLabel({ ns, id, vars, override, }) {
+    const t = useLabels(ns, DATA_LABELS[ns], override);
+    return _jsx(_Fragment, { children: t(id, vars) });
+}
+/* ------------------------------------------------------------------ */
+/* Numbers                                                              */
+/* ------------------------------------------------------------------ */
+/** A locale-formatted value: `<ValueText value={28412} format="compact" />` → "28.4K". */
+export function ValueText({ value, format, options }) {
+    const f = useFormat();
+    return _jsx(_Fragment, { children: formatValue(f, value, format, options) });
+}
+/** Signed delta text ("+12.4%", "+%12,4" in tr-TR) with a spoken sentence for screen readers. */
+export function DeltaText({ value, kind = "percent", currency, precision, srLabel, srSuffix, labels }) {
+    const f = useFormat();
+    const t = useLabels("stat", statLabels, labels);
+    const digits = precision ?? (kind === "percent" ? 1 : kind === "number" ? 0 : undefined);
+    const opts = digits === undefined ? {} : { maximumFractionDigits: digits, minimumFractionDigits: kind === "percent" ? Math.min(digits, 1) : 0 };
+    const fmt = (n, sign) => {
+        const o = { ...opts, signDisplay: sign ? "exceptZero" : "never" };
+        if (kind === "currency")
+            return f.currency(n, currency ?? f.currencyCode, o);
+        if (kind === "number")
+            return f.number(n, o);
+        return f.percent(n, o);
+    };
+    const visible = fmt(value, true);
+    const spoken = srLabel ?? `${value === 0 ? t("flat") : t(value > 0 ? "up" : "down", { value: fmt(Math.abs(value), false) })}${srSuffix ? ` ${srSuffix}` : ""}`;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "tabular", children: visible }), _jsx("span", { className: "sr-only", children: spoken })] }));
+}
+/** Progress-to-goal caption: "Goal $46,800" + "27%". */
+export function StatGoalText({ value, target, format, labels }) {
+    const f = useFormat();
+    const t = useLabels("stat", statLabels, labels);
+    const ratio = target > 0 ? value / target : 0;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { children: ratio >= 1 ? t("goalReached") : t("goal", { value: formatValue(f, target, format, { maximumFractionDigits: 0 }) }) }), _jsx("span", { className: "tabular", children: f.percent(ratio, { maximumFractionDigits: 0 }) })] }));
+}
+/* ------------------------------------------------------------------ */
+/* Time                                                                 */
+/* ------------------------------------------------------------------ */
+// One shared minute ticker for every relative time on the page.
+let tickNow = Date.now();
+const tickListeners = new Set();
+let tickTimer;
+function subscribeTick(cb) {
+    tickListeners.add(cb);
+    if (!tickTimer) {
+        tickNow = Date.now();
+        tickTimer = setInterval(() => {
+            tickNow = Date.now();
+            tickListeners.forEach((l) => l());
+        }, 30_000);
+    }
+    return () => {
+        tickListeners.delete(cb);
+        if (tickListeners.size === 0 && tickTimer) {
+            clearInterval(tickTimer);
+            tickTimer = undefined;
+        }
+    };
+}
+/**
+ * The current time, refreshed by a shared ticker. `null` during SSR and hydration, so the
+ * server and the first client render agree; `fixed` pins the clock (docs, tests).
+ */
+export function useNow(fixed) {
+    const live = React.useSyncExternalStore(subscribeTick, () => tickNow, () => null);
+    if (fixed !== undefined)
+        return new Date(fixed).getTime();
+    return live;
+}
+/**
+ * `<time>` with a relative label ("4 minutes ago", "yesterday") and the full date as `title`.
+ * Server render shows the absolute time; the client upgrades it and keeps it fresh.
+ */
+export function RelativeTime({ value, now, styleType, display = "relative", className, ...props }) {
+    const f = useFormat();
+    const current = useNow(now);
+    const iso = value instanceof Date ? value.toISOString() : typeof value === "number" ? new Date(value).toISOString() : value;
+    const full = f.dateTime(iso);
+    const text = display === "time"
+        ? f.time(iso)
+        : display === "datetime"
+            ? full
+            : current === null
+                ? f.date(iso, "datetime-short")
+                : f.relative(iso, { now: current, style: styleType });
+    return (_jsx("time", { dateTime: iso, title: full, className: cn("tabular", className), suppressHydrationWarning: true, ...props, children: text }));
+}
+/** Day heading of a grouped timeline: "Today", "Yesterday", "Monday, Nov 8". */
+export function TimelineDayLabel({ date, now, labels }) {
+    const { format: f, timeZone, locale } = useLocale();
+    const t = useLabels("timeline", timelineLabels, labels);
+    const current = useNow(now);
+    const thisYear = current === null ? undefined : dayKey(current, timeZone).slice(0, 4);
+    const absolute = f.date(date, { weekday: "long", month: "short", day: "numeric", ...(thisYear && thisYear !== date.slice(0, 4) ? { year: "numeric" } : {}) });
+    let text = absolute;
+    if (current !== null) {
+        const today = dayKey(current, timeZone);
+        const yesterday = dayKey(current - 86_400_000, timeZone);
+        if (date === today)
+            text = t("today");
+        else if (date === yesterday)
+            text = t("yesterday");
+    }
+    return (_jsx("time", { dateTime: date, lang: locale, title: f.date(date, "full"), children: text }));
+}
+/** Small copy-to-clipboard button with a "Copied" confirmation (visible + announced). */
+export function CopyValueButton({ text, label, labels, className, onCopied }) {
+    const t = useLabels("descriptionList", descriptionListLabels, labels);
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const id = setTimeout(() => setCopied(false), 1600);
+        return () => clearTimeout(id);
+    }, [copied]);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch {
+            // Clipboard API unavailable (insecure origin): fall back to a hidden textarea.
+            const el = document.createElement("textarea");
+            el.value = text;
+            el.setAttribute("readonly", "");
+            el.style.position = "fixed";
+            el.style.opacity = "0";
+            document.body.appendChild(el);
+            el.select();
+            try {
+                document.execCommand("copy");
+            }
+            finally {
+                el.remove();
+            }
+        }
+        setCopied(true);
+        onCopied?.(text);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-slot": "copy-button", "data-copied": copied ? "" : undefined, "aria-label": t("copy", { label }), title: t("copy", { label }), onClick: copy, className: cn("inline-grid size-6 shrink-0 place-items-center rounded-ui-sm text-fg-subtle transition-colors hover:bg-hover hover:text-fg focus-ring", "data-copied:text-success [&_svg]:size-3.5", className), children: copied ? _jsx(Check, { "aria-hidden": true, strokeWidth: 2.25 }) : _jsx(Copy, { "aria-hidden": true }) }), _jsx("span", { role: "status", className: "sr-only", children: copied ? t("copied") : "" })] }));
+}
+/**
+ * Click-to-edit value for Description list rows. The value is a button ("Edit Phone");
+ * Enter saves, Escape cancels, focus returns to the value afterwards.
+ */
+export function DescriptionEditable({ value, onSave, label, display, inputType = "text", placeholder, disabled, labels, className }) {
+    const t = useLabels("descriptionList", descriptionListLabels, labels);
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(value);
+    const [state, setState] = React.useState("idle");
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const errorId = React.useId();
+    const returnFocus = React.useRef(false);
+    React.useEffect(() => {
+        if (editing) {
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+        else if (returnFocus.current) {
+            returnFocus.current = false;
+            triggerRef.current?.focus();
+        }
+    }, [editing]);
+    const close = () => {
+        returnFocus.current = true;
+        setEditing(false);
+        setState("idle");
+    };
+    const save = async () => {
+        if (draft === value)
+            return close();
+        setState("saving");
+        try {
+            await onSave(draft);
+            close();
+        }
+        catch {
+            setState("error");
+            inputRef.current?.focus();
+        }
+    };
+    if (!editing) {
+        return (_jsxs("button", { ref: triggerRef, type: "button", "data-slot": "description-editable", disabled: disabled, "aria-label": `${t("edit", { label })}: ${value || t("empty")}`, onClick: () => {
+                setDraft(value);
+                setEditing(true);
+            }, className: cn("group/edit -mx-1.5 -my-0.5 inline-flex max-w-full items-center gap-2 rounded-ui-sm px-1.5 py-0.5 text-start transition-colors hover:bg-hover focus-ring", "disabled:pointer-events-none", className), children: [_jsx("span", { className: cn("min-w-0 truncate", !value && "text-fg-subtle"), children: display ?? (value || t("empty")) }), _jsx(Pencil, { "aria-hidden": true, className: "size-3 shrink-0 text-fg-subtle opacity-0 transition-opacity group-hover/edit:opacity-100 group-focus-visible/edit:opacity-100 [@media(hover:none)]:opacity-100" })] }));
+    }
+    return (_jsxs("span", { "data-slot": "description-editor", className: cn("grid gap-1", className), children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("input", { ref: inputRef, type: inputType, value: draft, placeholder: placeholder, "aria-label": label, "aria-invalid": state === "error" || undefined, "aria-describedby": state === "error" ? errorId : undefined, "aria-busy": state === "saving" || undefined, readOnly: state === "saving", onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                void save();
+                            }
+                            else if (e.key === "Escape") {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                close();
+                            }
+                        }, className: cn("h-[calc(var(--control-h)-0.5rem)] min-w-0 flex-1 rounded-ui-sm border border-field-border bg-field px-2 text-[13px] text-fg outline-none", "focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_var(--accent-soft)] aria-invalid:border-danger") }), _jsx("button", { type: "button", "aria-label": state === "saving" ? t("saving") : t("save"), disabled: state === "saving", onClick: () => void save(), className: "inline-grid size-7 shrink-0 place-items-center rounded-ui-sm text-accent-ink hover:bg-hover focus-ring disabled:opacity-50 [&_svg]:size-3.5", children: _jsx(Check, { "aria-hidden": true, strokeWidth: 2.25 }) }), _jsx("button", { type: "button", "aria-label": t("cancel"), disabled: state === "saving", onClick: close, className: "inline-grid size-7 shrink-0 place-items-center rounded-ui-sm text-fg-muted hover:bg-hover focus-ring disabled:opacity-50 [&_svg]:size-3.5", children: _jsx(X, { "aria-hidden": true }) })] }), state === "error" ? (_jsx("span", { id: errorId, role: "alert", className: "text-xs text-danger", children: t("error") })) : null, state === "saving" ? (_jsx("span", { role: "status", className: "sr-only", children: t("saving") })) : null] }));
+}
+const optionValue = (el) => el.props.value ?? el.props["data-value"];
+/**
+ * Listbox behaviour for `ItemList selectable`: roving focus, ↑ ↓ Home End, Space/Enter toggles,
+ * click selects. Direct `Item` children with a `value` become options.
+ */
+export const ItemListbox = React.forwardRef(function ItemListbox({ selectable, value: valueProp, defaultValue, onValueChange, children, onKeyDown, className, ...props }, ref) {
+    const [inner, setInner] = React.useState(defaultValue ?? []);
+    const value = valueProp ?? inner;
+    const baseId = React.useId();
+    const [active, setActive] = React.useState(undefined);
+    const listRef = React.useRef(null);
+    const options = [];
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        const v = optionValue(child);
+        if (v !== undefined)
+            options.push({ value: v, disabled: Boolean(child.props.disabled || child.props["aria-disabled"] === true || child.props["aria-disabled"] === "true") });
+    });
+    const enabled = options.filter((o) => !o.disabled);
+    const focusValue = active ?? value.find((v) => enabled.some((o) => o.value === v)) ?? enabled[0]?.value;
+    const commit = (next) => {
+        if (valueProp === undefined)
+            setInner(next);
+        onValueChange?.(next);
+    };
+    const toggle = (v) => {
+        if (selectable === "single")
+            commit(value[0] === v ? [] : [v]);
+        else
+            commit(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+    };
+    const focusOption = (v) => {
+        if (v === undefined)
+            return;
+        setActive(v);
+        const el = listRef.current?.querySelector(`[data-option-value="${CSS.escape(v)}"]`);
+        el?.focus();
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || enabled.length === 0)
+            return;
+        const idx = Math.max(0, enabled.findIndex((o) => o.value === focusValue));
+        const keyMap = { ArrowDown: idx + 1, ArrowUp: idx - 1, Home: 0, End: enabled.length - 1 };
+        if (e.key in keyMap) {
+            e.preventDefault();
+            const next = Math.min(enabled.length - 1, Math.max(0, keyMap[e.key]));
+            focusOption(enabled[next].value);
+            if (selectable === "multiple" && e.shiftKey && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+                const v = enabled[next].value;
+                if (!value.includes(v))
+                    commit([...value, v]);
+            }
+        }
+        else if ((e.key === " " || e.key === "Enter") && focusValue !== undefined) {
+            e.preventDefault();
+            toggle(focusValue);
+        }
+        else if (selectable === "multiple" && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+            e.preventDefault();
+            commit(value.length === enabled.length ? [] : enabled.map((o) => o.value));
+        }
+    };
+    return (_jsx("ul", { ref: (node) => {
+            listRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, role: "listbox", "aria-multiselectable": selectable === "multiple" || undefined, onKeyDown: handleKeyDown, className: className, ...props, children: React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            const v = optionValue(child);
+            if (v === undefined)
+                return child;
+            const opt = options.find((o) => o.value === v);
+            const selected = value.includes(v);
+            return React.cloneElement(child, {
+                role: "option",
+                id: `${baseId}-${v}`,
+                "aria-selected": selected,
+                "aria-disabled": opt.disabled || undefined,
+                "data-state": selected ? "selected" : undefined,
+                "data-option-value": v,
+                tabIndex: !opt.disabled && v === focusValue ? 0 : -1,
+                onFocus: () => setActive(v),
+                onClick: (e) => {
+                    child.props.onClick?.(e);
+                    if (!opt.disabled) {
+                        setActive(v);
+                        toggle(v);
+                    }
+                },
+            });
+        }) }));
+});
+/* ------------------------------------------------------------------ */
+/* Load more                                                            */
+/* ------------------------------------------------------------------ */
+/** "Load older activity" button with a busy state while `onLoadMore` resolves. */
+export function LoadMoreButton({ onLoadMore, label, className, labels }) {
+    const t = useLabels("timeline", timelineLabels, labels);
+    const [busy, setBusy] = React.useState(false);
+    return (_jsxs("button", { type: "button", "aria-busy": busy || undefined, disabled: busy, onClick: async () => {
+            setBusy(true);
+            try {
+                await onLoadMore();
+            }
+            finally {
+                setBusy(false);
+            }
+        }, className: cn("inline-flex h-8 items-center gap-2 rounded-ui-sm px-3 text-[13px] font-medium text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring disabled:opacity-60", className), children: [busy ? _jsx("span", { "aria-hidden": true, className: "size-3 animate-spin rounded-full border-[1.5px] border-current border-e-transparent motion-reduce:animate-none" }) : null, busy ? t("loading") : (label ?? t("loadMore"))] }));
+}

package/dist/lib/date.d.ts

@@ -0,0 +1,129 @@
+import type { Locale as DateFnsLocale } from "date-fns";
+/** A date-only value, `YYYY-MM-DD`. */
+export type IsoDateString = string;
+/** A from–to range of date-only values. `to` is missing while the user is still picking. */
+export interface IsoDateRange {
+    from: IsoDateString;
+    to?: IsoDateString;
+}
+/** `YYYY-MM-DD` of a `Date` in the local calendar (no UTC shift). */
+export declare function dateToIso(date: Date): IsoDateString;
+/** A `YYYY-MM-DD` string as a local-midnight `Date`, or `null` when malformed / non-existent. */
+export declare function isoToDate(value: string | null | undefined): Date | null;
+/** True for a well-formed, existing `YYYY-MM-DD` date. */
+export declare function isIsoDateString(value: unknown): value is IsoDateString;
+/** Today as `YYYY-MM-DD` in the local calendar (or in `timeZone` when given). */
+export declare function todayIso(timeZone?: string, now?: Date): IsoDateString;
+/** Adds whole days to a `YYYY-MM-DD` string. */
+export declare function addIsoDays(value: IsoDateString, days: number): IsoDateString;
+/** Days from `a` to `b` (`b − a`), DST-safe. */
+export declare function isoDiffDays(a: IsoDateString, b: IsoDateString): number;
+/** Inclusive number of days in a range (`1` for a single-day range). */
+export declare function rangeLength(range: IsoDateRange | null | undefined): number;
+/** ISO weekday of a local date: 1 = Monday … 7 = Sunday. */
+export declare function isoWeekdayOf(date: Date): number;
+/**
+ * Registers a date-fns locale for a BCP 47 tag or language, so the calendars use its month and
+ * weekday names. `en-US` and `tr` ship built in.
+ *
+ * ```ts
+ * import { de } from "date-fns/locale/de";
+ * registerDateLocale("de", de);
+ * ```
+ */
+export declare function registerDateLocale(tag: string, locale: DateFnsLocale): void;
+/** The date-fns locale for a BCP 47 tag: exact tag, then language, then `en-US`. */
+export declare function getDateFnsLocale(tag: string): DateFnsLocale;
+export type DatePart = "day" | "month" | "year";
+export interface DatePattern {
+    /** Order of the numeric parts in the locale, e.g. `["month","day","year"]` for en-US. */
+    order: DatePart[];
+    /** Separator between parts (`/`, `.`, `-`). */
+    separator: string;
+    /** date-fns pattern, e.g. `"MM/dd/yyyy"` (en-US), `"dd.MM.yyyy"` (tr). */
+    pattern: string;
+}
+/** The numeric short-date pattern of a locale, read from `Intl.DateTimeFormat#formatToParts`. */
+export declare function getDatePattern(locale: string): DatePattern;
+/**
+ * The placeholder for a typed date: the locale pattern spelled with `tokens`
+ * (`"MM/DD/YYYY"` for en-US; tr with `{ day: "GG", month: "AA" }` → `"GG.AA.YYYY"`).
+ */
+export declare function datePlaceholder(locale: string, tokens?: Partial<Record<DatePart, string>>): string;
+/** A `YYYY-MM-DD` value in the locale's numeric pattern (`"11/23/2026"`, `"23.11.2026"`). */
+export declare function formatDateInput(value: IsoDateString | null | undefined, locale: string): string;
+export interface ParseDateOptions {
+    /** Reference date for partial input and relative words. Default: now. */
+    reference?: Date;
+    /** Relative words, lower case. Default English `today / tomorrow / yesterday`. */
+    words?: {
+        today?: string[];
+        tomorrow?: string[];
+        yesterday?: string[];
+    };
+}
+/**
+ * Parses what a person types into a date field. Returns `YYYY-MM-DD` or `null`.
+ *
+ * Accepts the locale's numeric pattern with any of `. / - ␣` as separator, digits only
+ * (`11232026` / `23112026`), partial dates (day + month = this year), two-digit years, ISO
+ * `2026-11-23`, month names (`Nov 23, 2026`, `23 Kasım 2026`), relative words and `+3` / `-2` days.
+ *
+ * ```ts
+ * parseDateInput("11/23/2026", "en-US"); // "2026-11-23"
+ * parseDateInput("23.11", "tr-TR");      // "2026-11-23" (this year)
+ * parseDateInput("tomorrow", "en-US");   // the day after today
+ * ```
+ */
+export declare function parseDateInput(input: string, locale: string, options?: ParseDateOptions): IsoDateString | null;
+export interface TimeParts {
+    hour: number;
+    minute: number;
+    second: number;
+}
+/** `"14:30"` / `"14:30:05"` → parts, or `null` when malformed or out of range. */
+export declare function parseTime(value: string | null | undefined): TimeParts | null;
+/** Parts → `"HH:mm"` (or `"HH:mm:ss"` with `seconds`). */
+export declare function formatTimeValue(parts: TimeParts, seconds?: boolean): string;
+/** Minutes since midnight of `"HH:mm[:ss]"` (seconds ignored), or `NaN`. */
+export declare function timeToMinutes(value: string | null | undefined): number;
+/** Minutes since midnight → `"HH:mm"` (wraps past midnight). */
+export declare function minutesToTime(minutes: number): string;
+/** Compares two `"HH:mm[:ss]"` strings. */
+export declare function compareTime(a: string, b: string): number;
+/** 12 for locales that show AM/PM (en-US), 24 otherwise (tr, most of Europe). */
+export declare function getHourCycle(locale: string): 12 | 24;
+/** AM / PM labels of a locale (`["AM","PM"]`, `["ÖÖ","ÖS"]`). */
+export declare function getDayPeriodLabels(locale: string): [am: string, pm: string];
+/** The time separator of a locale (`":"` almost everywhere, `"."` for some). */
+export declare function getTimeSeparator(locale: string): string;
+/** Whether the locale puts the day period before the hour (ko, zh). */
+export declare function dayPeriodFirst(locale: string): boolean;
+/** A list of times from `start` to `end` (inclusive of start, exclusive of end) every `step` minutes. */
+export declare function timeSlots(step?: number, start?: string, end?: string): string[];
+/** A quick choice in the Date range picker ("Last 7 days"). `range` is computed from `today`. */
+export interface DateRangePreset {
+    id: string;
+    label: string;
+    range: (today: IsoDateString, ctx: {
+        weekStartsOn: number;
+    }) => {
+        from: IsoDateString;
+        to: IsoDateString;
+    };
+}
+/** English labels of the default presets (the `dateRangePicker` namespace overrides them). */
+export declare const defaultPresetLabels: {
+    readonly today: "Today";
+    readonly yesterday: "Yesterday";
+    readonly last7: "Last 7 days";
+    readonly last30: "Last 30 days";
+    readonly thisWeek: "This week";
+    readonly thisMonth: "This month";
+    readonly lastMonth: "Last month";
+    readonly last90: "Last 90 days";
+    readonly thisYear: "This year";
+};
+export type PresetLabelKey = keyof typeof defaultPresetLabels;
+/** The built-in presets. `weekStartsOn` (0 = Sunday … 6) comes from the locale's week info. */
+export declare function defaultRangePresets(labels?: Partial<Record<PresetLabelKey, string>>): DateRangePreset[];