@hackcove/ui-react 0.10.4 → 0.10.6

package/dist/DateCalendar.d.ts

@@ -1,10 +1,12 @@
 import { type ReactElement } from "react";
+import type { DateRangePreset } from "./DateRangePicker.js";
 export declare const calendarIcon: import("react").JSX.Element;
-/**
- * The picker's popover: header, a Monday-first month grid and a Clear footer. `container` is the
- * modal `<dialog>` the picker sits in, if any: a modal makes everything outside it inert and paints
- * above the body, so the popover renders inside it (which also keeps the theme's scope class).
- */
+/** The date picker's popover: header, a Monday-first month grid and a Clear footer. */
 export declare function CalendarPopover({ container }: {
     container: Element | undefined;
 }): ReactElement;
+/** The range picker's popover: the presets, if any, the header, one Monday-first month and Clear. */
+export declare function RangeCalendarPopover({ container, presets, }: {
+    container: Element | undefined;
+    presets: readonly DateRangePreset[] | undefined;
+}): ReactElement;

package/dist/DateCalendar.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getLocalTimeZone, today } from "@internationalized/date";
 import { useContext } from "react";
-import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarStateContext, DatePickerStateContext, Dialog, Popover, } from "react-aria-components";
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarStateContext, DatePickerStateContext, DateRangePickerStateContext, Dialog, Popover, RangeCalendar, RangeCalendarStateContext, } from "react-aria-components";
 import { cx, focusRing } from "./cx.js";
+import { Button as PresetButton } from "./Button.js";
 import { MONTH_OPTIONS, iconButtonClass } from "./DateField.js";
 import { Icon } from "./Icon.js";
 export const calendarIcon = (_jsx(Icon, { children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: [_jsx("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "2" }), _jsx("path", { d: "M3 8.5h14M7 2.5v4M13 2.5v4" })] }) }));
 const chevron = (d) => (_jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: d }) }) }));
 const selectClass = `rounded-md border border-slate-300 bg-white py-1 pr-1 pl-2 text-sm text-slate-900 transition hover:border-violet-400 ${focusRing}`;
-/** ‹, a month dropdown, a year dropdown and ›: a birth date decades back is two picks away. */
+/**
+ * ‹, a month dropdown, a year dropdown and ›: a birth date decades back is two picks away. It reads
+ * a one-date calendar's state, or a range calendar's when there is none.
+ */
 function CalendarHeader() {
-    const state = useContext(CalendarStateContext);
+    const single = useContext(CalendarStateContext);
+    const range = useContext(RangeCalendarStateContext);
+    const state = single ?? range;
     if (!state)
         return null;
     const focused = state.focusedDate;
@@ -20,8 +26,11 @@ function CalendarHeader() {
     const years = Array.from({ length: last - first + 1 }, (_, i) => first + i);
     return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { slot: "previous", className: iconButtonClass, children: chevron("M12.5 15l-5-5 5-5") }), _jsx("select", { "aria-label": "Month", className: cx(selectClass, "flex-1"), value: focused.month, disabled: state.isDisabled, onChange: (event) => state.setFocusedDate(focused.set({ month: Number(event.target.value) })), children: MONTH_OPTIONS.map(({ month, name }) => (_jsx("option", { value: month, children: name }, month))) }), _jsx("select", { "aria-label": "Year", className: selectClass, value: focused.year, disabled: state.isDisabled, onChange: (event) => state.setFocusedDate(focused.set({ year: Number(event.target.value) })), children: years.map((year) => (_jsx("option", { value: year, children: year }, year))) }), _jsx(Button, { slot: "next", className: iconButtonClass, children: chevron("M7.5 5l5 5-5 5") })] }));
 }
+/** Clears the picker's value, a date or a range, and closes the popover. */
 function ClearButton() {
-    const picker = useContext(DatePickerStateContext);
+    const single = useContext(DatePickerStateContext);
+    const range = useContext(DateRangePickerStateContext);
+    const picker = single ?? range;
     return (_jsx("button", { type: "button", className: `rounded-md px-2 py-1 text-sm font-medium text-violet-600 transition hover:bg-violet-50 ${focusRing}`, onClick: () => {
             picker?.setValue(null);
             picker?.close();
@@ -35,11 +44,50 @@ const cellClass = ({ isSelected, isOutsideMonth, isDisabled, isUnavailable, isIn
         tone = "text-slate-300";
     return cx("flex h-9 w-9 items-center justify-center rounded-lg text-sm tabular-nums", tone, focusRing);
 };
+/** The colour of a day in a range calendar: the ends filled, the days between a light band. */
+function rangeTone(cell) {
+    if (cell.isOutsideMonth || cell.isDisabled || cell.isUnavailable)
+        return "text-slate-300";
+    if (!cell.isSelected)
+        return "cursor-pointer text-slate-700 hover:bg-slate-100";
+    if (cell.isInvalid)
+        return "bg-red-50 text-red-700";
+    if (cell.isSelectionStart || cell.isSelectionEnd)
+        return "bg-violet-600 text-violet-50";
+    return "bg-violet-50 text-violet-700";
+}
 /**
- * The picker's popover: header, a Monday-first month grid and a Clear footer. `container` is the
- * modal `<dialog>` the picker sits in, if any: a modal makes everything outside it inert and paints
- * above the body, so the popover renders inside it (which also keeps the theme's scope class).
+ * A day in a range calendar. The selected days join into one band: square between the ends, rounded
+ * on the outer side of each end. Any other day is rounded like a `cellClass` day.
  */
+const rangeCellClass = (cell) => cx("flex h-9 w-9 items-center justify-center text-sm tabular-nums", rangeTone(cell), cell.isSelected && !cell.isOutsideMonth
+    ? cx(cell.isSelectionStart && "rounded-l-lg", cell.isSelectionEnd && "rounded-r-lg")
+    : "rounded-lg", focusRing);
+/** The weekday row and the days of the month on show, in a `Calendar` or a `RangeCalendar`. */
+function MonthGrid({ cellClass: dayClass, }) {
+    return (_jsxs(CalendarGrid, { weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-xs font-medium text-slate-500", children: day })) }), _jsx(CalendarGridBody, { children: (date) => _jsx(CalendarCell, { date: date, className: dayClass }) })] }));
+}
+/**
+ * The popover's frame and dialog. `container` is the modal `<dialog>` the picker sits in, if any: a
+ * modal makes everything outside it inert and paints above the body, so the popover renders inside
+ * it (which also keeps the theme's scope class).
+ */
+function PickerPopover({ container, children, }) {
+    return (_jsx(Popover, { ...(container ? { UNSTABLE_portalContainer: container } : {}), placement: "bottom start", className: "rounded-xl border border-slate-200 bg-white p-3 text-slate-900 shadow-lg", children: _jsxs(Dialog, { className: "flex flex-col gap-3 outline-none", children: [children, _jsx("div", { className: "flex justify-end border-t border-slate-200 pt-2", children: _jsx(ClearButton, {}) })] }) }));
+}
+/** The date picker's popover: header, a Monday-first month grid and a Clear footer. */
 export function CalendarPopover({ container }) {
-    return (_jsx(Popover, { ...(container ? { UNSTABLE_portalContainer: container } : {}), placement: "bottom start", className: "rounded-xl border border-slate-200 bg-white p-3 text-slate-900 shadow-lg", children: _jsxs(Dialog, { className: "flex flex-col gap-3 outline-none", children: [_jsxs(Calendar, { firstDayOfWeek: "mon", className: "flex flex-col gap-3", children: [_jsx(CalendarHeader, {}), _jsxs(CalendarGrid, { weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-xs font-medium text-slate-500", children: day })) }), _jsx(CalendarGridBody, { children: (date) => _jsx(CalendarCell, { date: date, className: cellClass }) })] })] }), _jsx("div", { className: "flex justify-end border-t border-slate-200 pt-2", children: _jsx(ClearButton, {}) })] }) }));
+    return (_jsx(PickerPopover, { container: container, children: _jsxs(Calendar, { firstDayOfWeek: "mon", className: "flex flex-col gap-3", children: [_jsx(CalendarHeader, {}), _jsx(MonthGrid, { cellClass: cellClass })] }) }));
+}
+/** A preset's button: sets the range, which reports it, and closes the popover. */
+function PresetRow({ presets }) {
+    const picker = useContext(DateRangePickerStateContext);
+    return (_jsx("div", { className: "flex w-0 min-w-full flex-wrap gap-1.5", children: presets.map((preset) => (_jsx(PresetButton, { variant: "outline", size: "sm", onClick: () => {
+                picker?.setValue(preset.value);
+                picker?.close();
+            }, children: preset.label }, preset.label))) }));
+}
+/** The range picker's popover: the presets, if any, the header, one Monday-first month and Clear. */
+export function RangeCalendarPopover({ container, presets, }) {
+    return (_jsxs(PickerPopover, { container: container, children: [presets && presets.length > 0 ? _jsx(PresetRow, { presets: presets }) : null, _jsxs(RangeCalendar, { firstDayOfWeek: "mon", className: "flex flex-col gap-3", children: [_jsx(CalendarHeader, {}), _jsx(MonthGrid, { cellClass: rangeCellClass })] })] }));
 }

package/dist/DateFieldCalendar.d.ts

@@ -1,5 +1,19 @@
 import { type ReactElement } from "react";
 import { type FieldProps } from "./DateField.js";
+import type { Size } from "./size.js";
+/** The picker's padding, text and calendar button, by `size`. The button sets the height, so the padding is less than a `DateField`'s. */
+export declare const PICKER_SIZE: Record<Size, {
+    frame: string;
+    button: string;
+}>;
+/**
+ * The modal `<dialog>` a picker sits in, if any, for its popover's `container`: pass `findDialog` as the
+ * picker's `ref`.
+ */
+export declare function useDialogContainer(): {
+    container: Element | undefined;
+    findDialog: (el: HTMLDivElement | null) => void;
+};
 /** The body of `<DateField calendar>`: the field with a calendar button that opens a month view in a popover. */
 export declare function CalendarDateField({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, name, size, ...rest }: FieldProps & {
     defaultOpen?: boolean;

package/dist/DateFieldCalendar.js

@@ -6,7 +6,7 @@ import { CalendarPopover, calendarIcon } from "./DateCalendar.js";
 import { FieldSegment, LOCALE, forcedInvalid, Notes, frameClass, iconButtonLook, labelClass, } from "./DateField.js";
 import { ShownInput, useShownDate } from "./shownDate.js";
 /** The picker's padding, text and calendar button, by `size`. The button sets the height, so the padding is less than a `DateField`'s. */
-const PICKER_SIZE = {
+export const PICKER_SIZE = {
     sm: { frame: "py-0.5 pl-2 pr-0.5 text-xs", button: "h-5 w-5" },
     md: { frame: "py-1 pl-2.5 pr-1 text-sm", button: "h-7 w-7" },
     lg: { frame: "py-1.5 pl-3 pr-1.5 text-base", button: "h-8 w-8" },
@@ -19,6 +19,15 @@ function PickerInput({ leaving, onLeft, children, }) {
     const field = useContext(DateFieldContext);
     return (_jsx(DateFieldContext.Provider, { value: { ...field, isReadOnly: leaving, onBlur: onLeft }, children: children }));
 }
+/**
+ * The modal `<dialog>` a picker sits in, if any, for its popover's `container`: pass `findDialog` as the
+ * picker's `ref`.
+ */
+export function useDialogContainer() {
+    const [container, setContainer] = useState(undefined);
+    const findDialog = useCallback((el) => setContainer(el?.closest("dialog") ?? undefined), []);
+    return { container, findDialog };
+}
 /** The body of `<DateField calendar>`: the field with a calendar button that opens a month view in a popover. */
 export function CalendarDateField({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, name, size = "md", ...rest }) {
     const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
@@ -29,7 +38,6 @@ export function CalendarDateField({ label, description, errorMessage, error, isI
         maxValue: rest.maxValue,
         isRequired: rest.isRequired,
     });
-    const [dialog, setDialog] = useState(undefined);
-    const findDialog = useCallback((el) => setDialog(el?.closest("dialog") ?? undefined), []);
-    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, ref: findDialog, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1", PICKER_SIZE[size].frame), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: cx(iconButtonLook, PICKER_SIZE[size].button), children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, { container: dialog })] })) }) }));
+    const { container, findDialog } = useDialogContainer();
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, ref: findDialog, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1", PICKER_SIZE[size].frame), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: cx(iconButtonLook, PICKER_SIZE[size].button), children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, { container: container })] })) }) }));
 }

package/dist/DateRangePicker.d.ts

@@ -0,0 +1,37 @@
+import { type ReactElement } from "react";
+import { type FieldProps } from "./DateField.js";
+import type { DataAttributes } from "./link.js";
+import { type ShownRange } from "./shownDate.js";
+/** A from and to date: `start` on or before `end`. */
+export type DateRange = ShownRange;
+/** A ready-made range the app builds from its own today, such as "Last 7 days". */
+export type DateRangePreset = {
+    label: string;
+    value: DateRange;
+};
+export type DateRangePickerProps = Pick<FieldProps, "label" | "description" | "errorMessage" | "error" | "isInvalid" | "size" | "minValue" | "maxValue" | "isRequired" | "isDisabled" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details"> & DataAttributes & {
+    /** The range, or `null` for none. Reported only when both days are complete, real and in order. */
+    value?: DateRange | null | undefined;
+    /** The range shown first when the picker holds its own value. */
+    defaultValue?: DateRange | null | undefined;
+    /** Called with the range once both sides make one, and with `null` when they stop making one. */
+    onChange?: ((range: DateRange | null) => void) | undefined;
+    /** Posts the start as `YYYY-MM-DD` in a form, or `""` while there is no range. */
+    startName?: string | undefined;
+    /** Posts the end as `YYYY-MM-DD` in a form, or `""` while there is no range. */
+    endName?: string | undefined;
+    /**
+     * Ready-made ranges, a row of buttons above the month. The app builds them from its own today;
+     * the picker has none of its own and never reads the clock.
+     */
+    presets?: readonly DateRangePreset[] | undefined;
+    /** Open the calendar on mount. */
+    defaultOpen?: boolean | undefined;
+};
+/**
+ * A from and to date in one field: DD/MM/YYYY "to" DD/MM/YYYY and a calendar button that opens one
+ * Monday-first month, where two presses pick the range. `presets` adds the app's ready-made ranges
+ * above the month. The range is reported only when both sides are complete, real dates within
+ * min/max and the start is on or before the end; otherwise `null`.
+ */
+export declare function DateRangePicker({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, startName, endName, presets, defaultOpen, size, ...rest }: DateRangePickerProps): ReactElement;

package/dist/DateRangePicker.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Button, DateFieldContext, DateInput, DateRangePicker as AriaDateRangePicker, Group, I18nProvider, Label, } from "react-aria-components";
+import { cx } from "./cx.js";
+import { RangeCalendarPopover, calendarIcon } from "./DateCalendar.js";
+import { FieldSegment, LOCALE, forcedInvalid, frameClass, iconButtonLook, labelClass, Notes, } from "./DateField.js";
+import { PICKER_SIZE, useDialogContainer } from "./DateFieldCalendar.js";
+import { ShownInput, useShownRange } from "./shownDate.js";
+/**
+ * One side's segments, named for a screen reader and read-only while focus leaves it with an
+ * impossible day (see `useShownDate`). React Aria hands each side its field props through the
+ * `start` and `end` slots; only this side's slot is changed.
+ */
+function SideInput({ slot, name, side, onRead, }) {
+    const field = useContext(DateFieldContext);
+    const slots = field && "slots" in field ? field.slots : undefined;
+    const own = slots?.[slot] ?? {};
+    return (_jsx("div", { role: "group", "aria-label": name, className: "flex items-center", onBlurCapture: side.onBlurCapture, children: _jsx(DateFieldContext.Provider, { value: {
+                slots: {
+                    ...slots,
+                    [slot]: { ...own, isReadOnly: side.leaving, onBlur: side.onLeft },
+                },
+            }, children: _jsx(DateInput, { slot: slot, className: "flex", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }));
+}
+/**
+ * A from and to date in one field: DD/MM/YYYY "to" DD/MM/YYYY and a calendar button that opens one
+ * Monday-first month, where two presses pick the range. `presets` adds the app's ready-made ranges
+ * above the month. The range is reported only when both sides are complete, real dates within
+ * min/max and the start is on or before the end; otherwise `null`.
+ */
+export function DateRangePicker({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, startName, endName, presets, defaultOpen, size = "md", ...rest }) {
+    const shown = useShownRange({
+        value,
+        defaultValue,
+        onChange,
+        minValue: rest.minValue,
+        maxValue: rest.maxValue,
+        isRequired: rest.isRequired,
+    });
+    const { container, findDialog } = useDialogContainer();
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDateRangePicker, { ...rest, ...(defaultOpen === undefined ? {} : { defaultOpen }), ref: findDialog, value: shown.inner, onChange: shown.setInner, validate: shown.validate, ...forcedInvalid({ impossible: shown.problem, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1", PICKER_SIZE[size].frame), children: [_jsx(SideInput, { slot: "start", name: "Start date", side: shown.start, onRead: shown.onReadStart }), _jsx("span", { "aria-hidden": "true", className: "px-1 text-slate-500", children: "to" }), _jsx(SideInput, { slot: "end", name: "End date", side: shown.end, onRead: shown.onReadEnd }), _jsx(Button, { className: cx(iconButtonLook, PICKER_SIZE[size].button, "ml-auto"), children: calendarIcon })] }), _jsx(ShownInput, { name: startName, shown: shown.startShown, isDisabled: rest.isDisabled }), _jsx(ShownInput, { name: endName, shown: shown.endShown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: shown.problem, isInvalid: isInvalid }), _jsx(RangeCalendarPopover, { container: container, presets: presets })] })) }) }));
+}

package/dist/StackedBar.d.ts

@@ -9,6 +9,8 @@ import { type TextTone } from "./typography.js";
  * five `TextTone` names; a chart with more than five parts is why these two live here.
  */
 export type VizTone = TextTone | "neutral" | "violet";
+/** Tone → text utility, painted as a fill. The five `TextTone` colours are shared; the two extra ones are remapped by every theme. */
+export declare const VIZ_TONE: Record<VizTone, string>;
 /** One part of a `StackedBar`: its `label`, its `value` (its share is `value` over the sum) and its colour. */
 export type StackedSegment = {
     label: string;

package/dist/StackedBar.js

@@ -3,7 +3,7 @@ import { cx } from "./cx.js";
 import { announcedPercent, BAR_TRACK, sharePercent } from "./ProgressBar.js";
 import { TEXT_TONE } from "./typography.js";
 /** Tone → text utility, painted as a fill. The five `TextTone` colours are shared; the two extra ones are remapped by every theme. */
-const VIZ_TONE = {
+export const VIZ_TONE = {
     ...TEXT_TONE,
     neutral: "text-neutral-500",
     violet: "text-purple-700",

package/dist/StatTile.d.ts

@@ -5,9 +5,10 @@ export type StatTileTone = "neutral" | "positive" | "warn" | "negative";
 /**
  * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
  * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same
- * tone. Pass the value already formatted.
+ * tone. `trend` draws a small line under the value in the same colour. Pass the value already
+ * formatted.
  */
-export declare function StatTile({ label, value, hint, tone, accent, ...rest }: {
+export declare function StatTile({ label, value, hint, tone, accent, trend, ...rest }: {
     /** The small uppercase caption over the value. */
     label: ReactNode;
     /** The figure, already formatted, large and in tabular figures. */
@@ -18,4 +19,9 @@ export declare function StatTile({ label, value, hint, tone, accent, ...rest }:
     tone?: StatTileTone;
     /** A bar across the top edge in the tone's colour. */
     accent?: boolean;
+    /**
+     * The figure over time, oldest first: a sparkline under the value, in its colour, on a scale
+     * from 0. It is decoration, so say the trend in `hint` as well.
+     */
+    trend?: readonly number[];
 } & Unstyled<Omit<HTMLAttributes<HTMLDivElement>, "children">>): ReactElement;

package/dist/StatTile.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "./cx.js";
 import { BAR_FILL } from "./ProgressBar.js";
+import { drawn, largest, plotY, runs, scaleMax } from "./trend.js";
 import { Overline } from "./typography.js";
 const VALUE = {
     neutral: "text-slate-900",
@@ -17,8 +18,18 @@ const BAR = {
 /**
  * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
  * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same
- * tone. Pass the value already formatted.
+ * tone. `trend` draws a small line under the value in the same colour. Pass the value already
+ * formatted.
  */
-export function StatTile({ label, value, hint, tone = "neutral", accent = false, ...rest }) {
-    return (_jsxs("div", { ...rest, className: "relative overflow-hidden rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", children: [accent && (_jsx("span", { "aria-hidden": "true", className: cx("absolute inset-x-0 top-0 h-1", BAR[tone]) })), _jsx(Overline, { as: "p", children: label }), _jsx("p", { className: cx("mt-2 text-3xl font-bold tabular-nums", VALUE[tone]), children: value }), hint != null && _jsx("p", { className: "mt-1 text-xs text-slate-500", children: hint })] }));
+export function StatTile({ label, value, hint, tone = "neutral", accent = false, trend, ...rest }) {
+    return (_jsxs("div", { ...rest, className: "relative overflow-hidden rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", children: [accent && (_jsx("span", { "aria-hidden": "true", className: cx("absolute inset-x-0 top-0 h-1", BAR[tone]) })), _jsx(Overline, { as: "p", children: label }), _jsx("p", { className: cx("mt-2 text-3xl font-bold tabular-nums", VALUE[tone]), children: value }), trend !== undefined && trend.length > 0 && _jsx(Sparkline, { values: trend, tone: tone }), hint != null && _jsx("p", { className: "mt-1 text-xs text-slate-500", children: hint })] }));
+}
+/** The tile's trend line: edge to edge, `h-8`, in the value's colour. Hidden from assistive tech. */
+function Sparkline({ values, tone, }) {
+    const max = scaleMax(largest([values]));
+    const step = values.length > 1 ? 100 / (values.length - 1) : 0;
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 100 100", preserveAspectRatio: "none", className: cx("mt-3 block h-8 w-full overflow-visible", VALUE[tone]), children: runs(values.map((value, i) => {
+            const y = drawn(value);
+            return y === null ? null : { x: values.length > 1 ? step * i : 50, y: plotY(y, max) };
+        })).map((points) => (_jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }, points))) }));
 }

package/dist/TrendChart.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement } from "react";
+import type { Passthrough } from "./props.js";
+import { type VizTone } from "./StackedBar.js";
+/**
+ * One series of a `TrendChart`: its `label` (the table's column, the Legend's entry), its colour,
+ * and one value per bucket in the buckets' order. A `null`, or a list shorter than the buckets, is
+ * a missing value.
+ */
+export type TrendSeries = {
+    label: string;
+    tone: VizTone;
+    values: readonly (number | null)[];
+};
+/**
+ * A chart of one or two series over ordered buckets (weeks, months), as bars or a line, on a
+ * y-axis from 0. The y-axis is labelled 0, half and a rounded maximum; the x-axis names the
+ * buckets. A screen reader gets the same figures as a table.
+ */
+export declare function TrendChart({ label, buckets, series, kind, ...rest }: {
+    /** What the chart shows: its accessible name and the caption of its table. */
+    label: string;
+    /** The x-axis labels, in order (`"W12"`, `"Mar"`). */
+    buckets: readonly string[];
+    /**
+     * One or two series, each `{ label, tone, values }`. A `null` value, or a `values` list shorter
+     * than `buckets`, is missing. Two series draw a Legend under the chart.
+     */
+    series: readonly [TrendSeries] | readonly [TrendSeries, TrendSeries];
+    /**
+     * `bar` for a count in each bucket, `line` for a level over time.
+     * @default bar
+     */
+    kind?: "bar" | "line";
+} & Passthrough): ReactElement;

package/dist/TrendChart.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Legend, VIZ_TONE } from "./StackedBar.js";
+import { drawn, largest, plotY, round, runs, scaleMax } from "./trend.js";
+/** The most x labels drawn; past it, every k-th label is, starting with the first. */
+const MAX_X_LABELS = 8;
+/** Share of a bucket's width the bars of one bucket take, centred; the rest is the gap between buckets. */
+const BAR_SPAN = 0.7;
+const FORMAT = new Intl.NumberFormat("en-US");
+/** A value as the table says it: as given, or blank when missing. */
+const spoken = (value) => value == null || !Number.isFinite(value) ? null : FORMAT.format(value);
+/**
+ * A chart of one or two series over ordered buckets (weeks, months), as bars or a line, on a
+ * y-axis from 0. The y-axis is labelled 0, half and a rounded maximum; the x-axis names the
+ * buckets. A screen reader gets the same figures as a table.
+ */
+export function TrendChart({ label, buckets, series, kind = "bar", ...rest }) {
+    const values = series.map((s) => buckets.map((_, i) => drawn(s.values[i])));
+    const max = scaleMax(largest(values));
+    const ticks = [max, max / 2, 0];
+    return (_jsxs("figure", { ...rest, "aria-label": label, className: "flex flex-col gap-3", children: [_jsxs("div", { "aria-hidden": "true", className: "flex gap-2 pt-2 text-xs tabular-nums text-slate-500", children: [_jsx(YAxis, { ticks: ticks, max: max }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsxs("div", { className: "relative h-48", children: [ticks.map((tick) => (_jsx("span", { className: "absolute inset-x-0 border-t border-slate-200", style: { top: `${plotY(tick, max)}%` } }, tick))), _jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible", children: kind === "bar" ? (_jsx(Bars, { series: series, values: values, max: max })) : (_jsx(Lines, { series: series, values: values, max: max })) })] }), _jsx(XAxis, { buckets: buckets })] })] }), series.length === 2 && (_jsx(Legend, { items: series.map((s) => ({ label: s.label, tone: s.tone })) })), _jsx(FigureTable, { label: label, buckets: buckets, series: series })] }));
+}
+/** The y labels, each centred on its gridline; the widest (the top) sets the column's width. */
+function YAxis({ ticks, max }) {
+    return (_jsxs("div", { className: "relative h-48 shrink-0 text-right", children: [_jsx("span", { className: "invisible block", children: FORMAT.format(max) }), ticks.map((tick) => (_jsx("span", { className: "absolute right-0 -translate-y-1/2", style: { top: `${plotY(tick, max)}%` }, children: FORMAT.format(tick) }, tick)))] }));
+}
+/** One equal column per bucket; past 8 buckets, every k-th label from the first. */
+function XAxis({ buckets }) {
+    const every = Math.max(1, Math.ceil(buckets.length / MAX_X_LABELS));
+    return (_jsx("div", { className: "grid text-center", style: { gridTemplateColumns: `repeat(${buckets.length}, minmax(0, 1fr))` }, children: buckets.map((bucket, i) => (_jsx("span", { className: "whitespace-nowrap", children: i % every === 0 ? bucket : null }, `${bucket}-${i}`))) }));
+}
+/** A rect per present value, the series side by side in each bucket. */
+function Bars({ series, values, max }) {
+    const width = 100 / Math.max(1, values[0]?.length ?? 1);
+    const bar = (width * BAR_SPAN) / series.length;
+    const inset = (width * (1 - BAR_SPAN)) / 2;
+    return (_jsx(_Fragment, { children: series.map((s, si) => values[si]?.map((value, i) => {
+            if (value === null)
+                return null;
+            const y = plotY(value, max);
+            return (_jsx("rect", { "data-bucket": i, className: VIZ_TONE[s.tone], fill: "currentColor", x: round(width * i + inset + bar * si), y: round(y), width: round(bar), height: round(100 - y) }, `${si}-${i}`));
+        })) }));
+}
+/** A polyline per run of present values, through the middle of each bucket. */
+function Lines({ series, values, max }) {
+    const width = 100 / Math.max(1, values[0]?.length ?? 1);
+    return (_jsx(_Fragment, { children: series.map((s, si) => runs((values[si] ?? []).map((value, i) => value === null ? null : { x: width * (i + 0.5), y: plotY(value, max) })).map((points) => (_jsx("polyline", { className: VIZ_TONE[s.tone], points: points, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }, `${si}-${points}`)))) }));
+}
+/** The chart's figures for a screen reader: a row per bucket, a column per series. */
+function FigureTable({ label, buckets, series, }) {
+    return (_jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), series.map((s, si) => (_jsx("th", { scope: "col", children: s.label }, si)))] }) }), _jsx("tbody", { children: buckets.map((bucket, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: bucket }), series.map((s, si) => (_jsx("td", { children: spoken(s.values[i]) }, si)))] }, `${bucket}-${i}`))) })] }));
+}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { StatTile, type StatTileTone } from "./StatTile.js";
 export { ProgressBar, type BarSize, type BarTone } from "./ProgressBar.js";
 export { SplitBar } from "./SplitBar.js";
 export { Legend, StackedBar, type LegendItem, type StackedSegment, type VizTone, } from "./StackedBar.js";
+export { TrendChart, type TrendSeries } from "./TrendChart.js";
 export { Markdown } from "./Markdown.js";
 export { AppShell, AppShellBrand, type AppShellBreakpoint, AppShellHideBelow, appShellRootClassFor, } from "./AppShell.js";
 export { Container } from "./Container.js";
@@ -83,5 +84,6 @@ export { TextLink, type TextLinkSize } from "./TextLink.js";
 export { ToolCallCard } from "./ToolCallCard.js";
 export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Text, type TextTone, type TypographyColor, type TypographyProps, } from "./typography.js";
 export { DateField, type DateFieldProps } from "./DateField.js";
+export { DateRangePicker, type DateRange, type DateRangePickerProps, type DateRangePreset, } from "./DateRangePicker.js";
 export { fromISODate, toISODate } from "./isoDate.js";
 export type { CalendarDate } from "@internationalized/date";

package/dist/index.js

@@ -6,6 +6,7 @@ export { StatTile } from "./StatTile.js";
 export { ProgressBar } from "./ProgressBar.js";
 export { SplitBar } from "./SplitBar.js";
 export { Legend, StackedBar, } from "./StackedBar.js";
+export { TrendChart } from "./TrendChart.js";
 export { Markdown } from "./Markdown.js";
 export { AppShell, AppShellBrand, AppShellHideBelow, appShellRootClassFor, } from "./AppShell.js";
 export { Container } from "./Container.js";
@@ -79,4 +80,5 @@ export { TextLink } from "./TextLink.js";
 export { ToolCallCard } from "./ToolCallCard.js";
 export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
 export { DateField } from "./DateField.js";
+export { DateRangePicker, } from "./DateRangePicker.js";
 export { fromISODate, toISODate } from "./isoDate.js";

package/dist/shownDate.d.ts

@@ -36,6 +36,47 @@ export declare function useShownDate(props: ValueProps): {
     onBlurCapture: (event: FocusEvent<HTMLElement>) => void;
     onLeft: () => void;
 };
+/** A from and to date, both days. */
+export type ShownRange = {
+    start: CalendarDate;
+    end: CalendarDate;
+};
+type RangeProps = {
+    value?: ShownRange | null | undefined;
+    defaultValue?: ShownRange | null | undefined;
+    onChange?: ((range: ShownRange | null) => void) | undefined;
+    minValue?: FieldProps["minValue"] | undefined;
+    maxValue?: FieldProps["maxValue"] | undefined;
+    isRequired?: boolean | undefined;
+};
+/**
+ * `useShownDate` for a range: each side's segments are read on their own, and the range reported is
+ * what both sides show, once both are complete, real dates within min/max and the start is on or
+ * before the end; otherwise `null`. Each side keeps an impossible day on blur with its own `leaving`
+ * state, so one side is read-only only for the blur that leaves it. `problem` is the message for an
+ * impossible day, naming its side, or for an end before the start. `startShown` and `endShown`, what
+ * the hidden inputs post, are `""` while there is no range.
+ */
+export declare function useShownRange(props: RangeProps): {
+    inner: ShownRange | null;
+    setInner: import("react").Dispatch<import("react").SetStateAction<ShownRange | null>>;
+    startShown: string;
+    endShown: string;
+    problem: string | null;
+    onReadStart: (next: Read) => void;
+    onReadEnd: (next: Read) => void;
+    validate: () => "Enter the whole date." | null;
+    start: {
+        leaving: boolean;
+        onBlurCapture: (event: FocusEvent<HTMLElement>) => void;
+        onLeft: () => void;
+    };
+    end: {
+        leaving: boolean;
+        onBlurCapture: (event: FocusEvent<HTMLElement>) => void;
+        onLeft: () => void;
+    };
+};
 /** The hidden input a form posts under `name`: the shown date as `YYYY-MM-DD`, or `""`. */
 export declare function ShownInput({ name, shown, isDisabled, }: {
     name: string | undefined;

package/dist/shownDate.js

@@ -40,7 +40,7 @@ export function useShownDate(props) {
         impossible: null,
         partial: false,
     });
-    const [leaving, setLeaving] = useState(false);
+    const side = useLeaving(read.impossible);
     const shown = withinRange(read.typed, props);
     const reported = useRef(shown);
     const report = useRef(onChange);
@@ -73,15 +73,113 @@ export function useShownDate(props) {
         impossible: read.impossible,
         onRead,
         validate: () => (isRequired && read.partial ? "Enter the whole date." : null),
+        ...side,
+    };
+}
+/**
+ * The `leaving` read-only trick for one group of segments (see `useShownDate`): `onBlurCapture` goes
+ * on a wrapper of the input and `onLeft` is the field's own `onBlur`.
+ */
+function useLeaving(impossible) {
+    const [leaving, setLeaving] = useState(false);
+    return {
         leaving,
         onBlurCapture: (event) => {
-            if (read.impossible && !event.currentTarget.contains(event.relatedTarget)) {
+            if (impossible && !event.currentTarget.contains(event.relatedTarget)) {
                 flushSync(() => setLeaving(true));
             }
         },
         onLeft: () => setLeaving(false),
     };
 }
+const blank = { typed: "", impossible: null, partial: false };
+/** `"start/end"` when both are dates and start is on or before end, else `""`. */
+function rangeKey(start, end) {
+    return start && end && start <= end ? `${start}/${end}` : "";
+}
+function fromKey(key) {
+    const [start, end] = key.split("/").map(fromISODate);
+    return start && end ? { start, end } : null;
+}
+/** The given range as `"start/end"`, each side kept only within `bounds` when they are passed. */
+function givenKey(value, bounds) {
+    if (!value)
+        return "";
+    const [start, end] = [toISODate(value.start), toISODate(value.end)];
+    return bounds
+        ? rangeKey(withinRange(start, bounds), withinRange(end, bounds))
+        : `${start}/${end}`;
+}
+/** An impossible day, naming its side, or else an end before the start; `null` for neither. */
+function problemOf(start, end, startShown, endShown) {
+    const impossible = [
+        start.impossible && `Start date: ${start.impossible}`,
+        end.impossible && `End date: ${end.impossible}`,
+    ].filter(Boolean);
+    if (impossible.length > 0)
+        return impossible.join(" ");
+    if (startShown && endShown && startShown > endShown) {
+        return "The end date is before the start date.";
+    }
+    return null;
+}
+/**
+ * `useShownDate` for a range: each side's segments are read on their own, and the range reported is
+ * what both sides show, once both are complete, real dates within min/max and the start is on or
+ * before the end; otherwise `null`. Each side keeps an impossible day on blur with its own `leaving`
+ * state, so one side is read-only only for the blur that leaves it. `problem` is the message for an
+ * impossible day, naming its side, or for an end before the start. `startShown` and `endShown`, what
+ * the hidden inputs post, are `""` while there is no range.
+ */
+export function useShownRange(props) {
+    const { value, defaultValue, onChange, isRequired } = props;
+    const [inner, setInner] = useState(value ?? defaultValue ?? null);
+    const [start, setStart] = useState({ ...blank, typed: toISODate(inner?.start) });
+    const [end, setEnd] = useState({ ...blank, typed: toISODate(inner?.end) });
+    const onReadStart = useCallback((next) => setStart(next), []);
+    const onReadEnd = useCallback((next) => setEnd(next), []);
+    const startSide = useLeaving(start.impossible);
+    const endSide = useLeaving(end.impossible);
+    const startShown = withinRange(start.typed, props);
+    const endShown = withinRange(end.typed, props);
+    const shown = rangeKey(startShown, endShown);
+    const problem = problemOf(start, end, startShown, endShown);
+    const reported = useRef(shown);
+    const report = useRef(onChange);
+    useEffect(() => {
+        report.current = onChange;
+    });
+    const given = value === undefined ? undefined : givenKey(value, null);
+    const givenShown = givenKey(value ?? null, props);
+    const lastGiven = useRef(given);
+    useEffect(() => {
+        if (given === lastGiven.current)
+            return;
+        lastGiven.current = given;
+        if (given === undefined || given === reported.current)
+            return;
+        reported.current = givenShown;
+        setInner(fromKey(given));
+    }, [given, givenShown]);
+    useEffect(() => {
+        if (shown === reported.current)
+            return;
+        reported.current = shown;
+        report.current?.(fromKey(shown));
+    }, [shown]);
+    return {
+        inner,
+        setInner,
+        startShown: shown ? startShown : "",
+        endShown: shown ? endShown : "",
+        problem,
+        onReadStart,
+        onReadEnd,
+        validate: () => (isRequired && (start.partial || end.partial) ? "Enter the whole date." : null),
+        start: startSide,
+        end: endSide,
+    };
+}
 /** The hidden input a form posts under `name`: the shown date as `YYYY-MM-DD`, or `""`. */
 export function ShownInput({ name, shown, isDisabled, }) {
     return name ? _jsx("input", { type: "hidden", name: name, value: shown, disabled: isDisabled }) : null;

package/dist/trend.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The scale shared by `TrendChart` and the `StatTile` sparkline. Internal: not exported from
+ * `index.ts`.
+ */
+/**
+ * The top of a y-axis that starts at 0: the smallest of 2, 4 or 10 times a whole power of ten
+ * (1, 10, 100, …) that is at least `top`. Its half is then a whole number: 1 gives 2, 3 gives
+ * 4, 5 gives 10, 13 gives 20. Nothing above 0 gives 2.
+ */
+export declare function scaleMax(top: number): number;
+/** A value as drawn: a negative one is 0, and a missing or non-finite one is `null`. */
+export declare function drawn(value: number | null | undefined): number | null;
+/** The largest drawn value of every list, or 0. */
+export declare function largest(lists: readonly (readonly (number | null)[])[]): number;
+/** `value` as a height on a 0 to 100 plot, measured down from the top (SVG's y). */
+export declare function plotY(value: number, max: number): number;
+/**
+ * The polylines of a line through `points`, broken at every missing one: one `points` string per
+ * run of present values. A run of one point repeats it, so a round cap draws it as a dot.
+ */
+export declare function runs(points: readonly ({
+    x: number;
+    y: number;
+} | null)[]): string[];
+/** Four decimals, so the markup stays short and stable. */
+export declare function round(n: number): number;

package/dist/trend.js

@@ -0,0 +1,64 @@
+/**
+ * The scale shared by `TrendChart` and the `StatTile` sparkline. Internal: not exported from
+ * `index.ts`.
+ */
+/**
+ * The top of a y-axis that starts at 0: the smallest of 2, 4 or 10 times a whole power of ten
+ * (1, 10, 100, …) that is at least `top`. Its half is then a whole number: 1 gives 2, 3 gives
+ * 4, 5 gives 10, 13 gives 20. Nothing above 0 gives 2.
+ */
+export function scaleMax(top) {
+    for (let power = 1;; power *= 10) {
+        for (const step of [2, 4, 10]) {
+            if (step * power >= top)
+                return step * power;
+        }
+    }
+}
+/** A value as drawn: a negative one is 0, and a missing or non-finite one is `null`. */
+export function drawn(value) {
+    if (value == null || !Number.isFinite(value))
+        return null;
+    return Math.max(0, value);
+}
+/** The largest drawn value of every list, or 0. */
+export function largest(lists) {
+    let top = 0;
+    for (const list of lists) {
+        for (const value of list)
+            top = Math.max(top, drawn(value) ?? 0);
+    }
+    return top;
+}
+/** `value` as a height on a 0 to 100 plot, measured down from the top (SVG's y). */
+export function plotY(value, max) {
+    return 100 - (value / max) * 100;
+}
+/**
+ * The polylines of a line through `points`, broken at every missing one: one `points` string per
+ * run of present values. A run of one point repeats it, so a round cap draws it as a dot.
+ */
+export function runs(points) {
+    const out = [];
+    let run = [];
+    const close = () => {
+        const [only] = run;
+        if (run.length === 1 && only !== undefined)
+            run.push(only);
+        if (run.length > 0)
+            out.push(run.join(" "));
+        run = [];
+    };
+    for (const point of points) {
+        if (point === null)
+            close();
+        else
+            run.push(`${round(point.x)},${round(point.y)}`);
+    }
+    close();
+    return out;
+}
+/** Four decimals, so the markup stays short and stable. */
+export function round(n) {
+    return Math.round(n * 10000) / 10000;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",