@stll/ui 0.41.0 → 0.42.0

package/dist/components/button.d.ts

@@ -13,8 +13,8 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "icon" | "default" | "row" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "destructive" | "default" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
+  size?: "icon-sm" | "icon" | "default" | "sm" | "lg" | "row" | "chip" | "icon-lg" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];

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

@@ -1,11 +1,37 @@
 import { OverlayLayer } from "../lib/overlay-layer.js";
+import { DatePickerMode } from "./date-picker-popover.logic.js";
 //#region src/components/date-picker-popover.d.ts
+/**
+ * `compact` keeps the dense 32px day cells everywhere. `touch` grows day,
+ * month, and year cells to 44px targets under a coarse pointer and leaves a
+ * fine pointer on the compact metric.
+ */
+type DatePickerPopoverSize = "compact" | "touch";
+/**
+ * `inline` is the borderless trigger for property rows and table cells;
+ * `field` is the bordered box form controls share with `SelectTrigger`.
+ */
+type DatePickerPopoverVariant = "inline" | "field";
 type DatePickerPopoverProps = {
+  /**
+   * `date` (default) reads and writes `YYYY-MM-DD`. `date-time` reads and
+   * writes `YYYY-MM-DDTHH:mm`, a zone-less wall-clock time the host converts
+   * to and from an instant in the time zone it owns. A `Date` is read in UTC
+   * in both modes, so a string is the way to keep a local wall-clock time.
+   */
+  mode?: DatePickerMode;
+  value: string | Date | null;
+  onChange: (value: string | null) => void;
   id?: string;
   /** ID of the visible field label, when the picker is part of a form field. */
   labelledBy?: string;
-  value: string | Date | null;
-  onChange: (value: string | null) => void;
+  /** Merged into the trigger's classes. */
+  className?: string;
+  disabled?: boolean;
+  /** Hide the clear button, for fields that must keep a value. */
+  hideClear?: boolean;
+  size?: DatePickerPopoverSize;
+  variant?: DatePickerPopoverVariant;
   locale?: string;
   isOverdue?: boolean;
   showIcon?: boolean;
@@ -19,6 +45,18 @@ type DatePickerPopoverProps = {
   /** Label for the "go to today" button. Auto-localized from the locale when omitted. */
   todayLabel?: string;
   overdueLabel?: string;
+  /** Accessible name of the popup. The package carries no catalogs, so the
+   *  English defaults below are meant to be replaced by the host. */
+  dialogLabel?: string;
+  previousMonthLabel?: string;
+  nextMonthLabel?: string;
+  previousYearLabel?: string;
+  nextYearLabel?: string;
+  previousDecadeLabel?: string;
+  nextDecadeLabel?: string;
+  /** Label of the time input in `date-time` mode. */
+  timeLabel?: string;
+  /** Inclusive `YYYY-MM-DD` bounds; in `date-time` mode they bound the day. */
   minDate?: string;
   maxDate?: string;
   isDateDisabled?: (date: string) => boolean;

package/dist/components/date-picker-popover.js

@@ -3,11 +3,14 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
+import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
-import { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate } from "./date-picker-popover.logic.js";
+import { DATE_PICKER_MODE, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime } from "./date-picker-popover.logic.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
+import { Select, SelectContent as SelectPopup, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
 //#region src/components/date-picker-popover.tsx
 const toISODate = (date) => date.toString();
@@ -154,6 +157,7 @@ const deriveTodayLabel = (locale) => {
 	const raw = getRelativeTimeFormatter(locale).format(0, "day");
 	return raw.charAt(0).toUpperCase() + raw.slice(1);
 };
+const utcDateTimeFromDate = (date) => Temporal.Instant.fromEpochMilliseconds(date.getTime()).toZonedDateTimeISO("UTC").toPlainDateTime().toString({ smallestUnit: "minute" });
 const normalizeDate = (v) => {
 	if (v === null || v === void 0) return "";
 	if (v instanceof Date) return Temporal.Instant.fromEpochMilliseconds(v.getTime()).toZonedDateTimeISO("UTC").toPlainDate().toString();
@@ -165,8 +169,94 @@ const isAfter = (a, b) => a > b;
 /** Round down to the start of a decade (e.g. 2026 → 2020). */
 const decadeStart = (year) => Math.floor(year / 10) * 10;
 const DECADE_SIZE = 12;
-const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today }) => {
-	const value = normalizeDate(rawValue);
+const DISPLAY_DATE_FORMAT = {
+	month: "short",
+	day: "numeric",
+	year: "numeric",
+	calendar: "gregory",
+	timeZone: "UTC"
+};
+const DISPLAY_DATE_TIME_FORMAT = {
+	...DISPLAY_DATE_FORMAT,
+	hour: "numeric",
+	minute: "2-digit"
+};
+const resolveSelection = (mode, value) => {
+	switch (mode) {
+		case DATE_PICKER_MODE.date: return {
+			mode,
+			date: normalizeDate(value)
+		};
+		case DATE_PICKER_MODE.dateTime: {
+			const parsed = parseDateTimeValue(value instanceof Date ? utcDateTimeFromDate(value) : value);
+			return {
+				mode: DATE_PICKER_MODE.dateTime,
+				date: parsed?.date ?? "",
+				time: parsed?.time ?? null
+			};
+		}
+		default: return panic(`Unhandled date picker mode: ${String(mode)}`);
+	}
+};
+/** Locale-formatted trigger text, or null while nothing is set. */
+const formatSelection = (locale, selection) => {
+	if (selection.date === "") return null;
+	const date = Temporal.PlainDate.from(selection.date);
+	switch (selection.mode) {
+		case DATE_PICKER_MODE.date: return getDateFormatter(locale, DISPLAY_DATE_FORMAT).format(toUTCDateTime(date));
+		case DATE_PICKER_MODE.dateTime: {
+			const instant = date.toZonedDateTime({
+				plainTime: Temporal.PlainTime.from(selection.time ?? "00:00"),
+				timeZone: "UTC"
+			}).epochMilliseconds;
+			return getDateFormatter(locale, DISPLAY_DATE_TIME_FORMAT).format(instant);
+		}
+		default: return panic(`Unhandled date picker mode: ${String(selection)}`);
+	}
+};
+const TRIGGER_VARIANT_CLASS_NAMES = {
+	inline: cn("flex h-auto min-h-7 w-full min-w-0 items-center gap-1.5", "rounded-md px-1.5 text-sm", "hover:bg-muted", "data-disabled:pointer-events-none data-disabled:opacity-64"),
+	field: cn(FIELD_TRIGGER_CLASS_NAME, "min-w-0 justify-start gap-1.5")
+};
+/** The package carries no catalogs: English defaults the host replaces. */
+const resolvePopupLabels = (props) => ({
+	dialog: props.dialogLabel ?? "Date picker",
+	navigation: {
+		days: {
+			next: props.nextMonthLabel ?? "Next month",
+			previous: props.previousMonthLabel ?? "Previous month"
+		},
+		months: {
+			next: props.nextYearLabel ?? "Next year",
+			previous: props.previousYearLabel ?? "Previous year"
+		},
+		years: {
+			next: props.nextDecadeLabel ?? "Next decade",
+			previous: props.previousDecadeLabel ?? "Previous decade"
+		}
+	},
+	time: props.timeLabel ?? "Time"
+});
+const PICKER_SIZE_CLASS_NAMES = {
+	compact: {
+		popup: "w-60",
+		heading: "",
+		day: "",
+		cell: ""
+	},
+	touch: {
+		popup: "w-60 pointer-coarse:w-77",
+		heading: "pointer-coarse:min-h-11 pointer-coarse:text-sm",
+		day: "pointer-coarse:size-11 pointer-coarse:text-sm",
+		cell: "pointer-coarse:min-h-11 pointer-coarse:text-sm"
+	}
+};
+const DatePickerPopoverContent = (props) => {
+	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
+	const selection = resolveSelection(mode, rawValue);
+	const value = selection.date;
+	const labels = resolvePopupLabels(props);
+	const sizeClassNames = PICKER_SIZE_CLASS_NAMES[size];
 	const displayValueId = useId();
 	const todayLabel = todayLabelProp ?? deriveTodayLabel(locale);
 	const firstDow = useMemo(() => getFirstDayOfWeek(locale), [locale]);
@@ -204,13 +294,28 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		maxDate,
 		isDateDisabled
 	]);
-	const displayLabel = value ? getDateFormatter(locale, {
-		month: "short",
-		day: "numeric",
-		year: "numeric",
-		calendar: "gregory",
-		timeZone: "UTC"
-	}).format(toUTCDateTime(Temporal.PlainDate.from(value))) : placeholderLabel ?? "—";
+	const displayLabel = formatSelection(locale, selection) ?? placeholderLabel ?? "—";
+	const selectDay = (date) => {
+		switch (selection.mode) {
+			case DATE_PICKER_MODE.date:
+				onChange(date);
+				return;
+			case DATE_PICKER_MODE.dateTime:
+				onChange(formatDateTimeValue({
+					date,
+					time: selection.time ?? "00:00"
+				}));
+				return;
+			default: panic(`Unhandled date picker mode: ${String(selection)}`);
+		}
+	};
+	const handleTimeChange = (clock) => {
+		if (value === "") return;
+		onChange(formatDateTimeValue({
+			date: value,
+			time: joinPickerTime(clock)
+		}));
+	};
 	const formatDayLabel = useCallback((iso) => getDateFormatter(locale, {
 		weekday: "long",
 		month: "long",
@@ -240,7 +345,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		else {
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
-				if (!isDayDisabled(current)) onChange(current);
+				if (!isDayDisabled(current)) selectDay(current);
 			}
 			return;
 		}
@@ -327,18 +432,20 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 			setDecadeBaseOverride(decadeStart(viewYear));
 		}
 	};
+	const triggerToneClassName = (() => {
+		if (isOverdue) return "text-destructive";
+		if (value) return "text-foreground";
+		return "text-muted-foreground";
+	})();
 	return /* @__PURE__ */ jsxs(Popover, {
 		defaultOpen,
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
 			render: /* @__PURE__ */ jsx("button", {
 				"aria-label": !labelledBy && value ? displayLabel : void 0,
 				"aria-labelledby": labelledBy ? `${labelledBy} ${displayValueId}` : void 0,
-				className: cn("flex h-auto min-h-7 w-full min-w-0 items-center gap-1.5", "rounded-md px-1.5 text-sm", "hover:bg-muted", (() => {
-					if (isOverdue) return "text-destructive";
-					if (value) return "text-foreground";
-					return "text-muted-foreground";
-				})()),
+				className: cn(TRIGGER_VARIANT_CLASS_NAMES[variant], triggerToneClassName, className),
 				id,
 				type: "button"
 			}),
@@ -355,48 +462,25 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 				})
 			]
 		}), /* @__PURE__ */ jsx(PopoverPopup, {
+			className: "data-starting-style:scale-100",
 			layer,
 			padding: "sm",
 			side: "bottom",
 			sideOffset: 4,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "w-60",
+				"aria-label": labels.dialog,
+				className: sizeClassNames.popup,
+				"data-slot": "date-picker-popup",
 				role: "dialog",
-				"aria-label": "Date picker",
 				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between gap-1 pb-1",
-						children: [
-							/* @__PURE__ */ jsx(Button, {
-								"aria-label": (() => {
-									if (view === "days") return "Previous month";
-									if (view === "months") return "Previous year";
-									return "Previous decade";
-								})(),
-								onClick: handlePrev,
-								size: "icon-xs",
-								variant: "ghost",
-								children: /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronLeftIcon })
-							}),
-							/* @__PURE__ */ jsx("button", {
-								className: cn("text-xs font-medium", view !== "years" && "hover:bg-muted cursor-pointer rounded-md px-2 py-0.5", view === "years" && "cursor-default"),
-								onClick: handleHeaderClick,
-								tabIndex: view === "years" ? -1 : 0,
-								type: "button",
-								children: headerLabel
-							}),
-							/* @__PURE__ */ jsx(Button, {
-								"aria-label": (() => {
-									if (view === "days") return "Next month";
-									if (view === "months") return "Next year";
-									return "Next decade";
-								})(),
-								onClick: handleNext,
-								size: "icon-xs",
-								variant: "ghost",
-								children: /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronRightIcon })
-							})
-						]
+					/* @__PURE__ */ jsx(PickerHeader, {
+						headingClassName: sizeClassNames.heading,
+						label: headerLabel,
+						labels: labels.navigation[view],
+						onHeadingClick: handleHeaderClick,
+						onNext: handleNext,
+						onPrevious: handlePrev,
+						view
 					}),
 					view === "days" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "grid grid-cols-7 gap-0",
@@ -416,16 +500,16 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 						children: days.map((day) => {
 							const isSelected = day.date === value;
 							const isFocused = day.date === focusedDate || !focusedDate && isSelected || !focusedDate && !value && day.isToday;
-							const disabled = isDayDisabled(day.date);
+							const isUnavailable = isDayDisabled(day.date);
 							return /* @__PURE__ */ jsx("button", {
 								"aria-current": day.isToday ? "date" : void 0,
-								"aria-disabled": disabled || void 0,
+								"aria-disabled": isUnavailable || void 0,
 								"aria-label": formatDayLabel(day.date),
 								"aria-selected": isSelected || void 0,
-								className: cn("flex size-8 items-center justify-center", "rounded-full text-xs", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", disabled ? "text-foreground-disabled cursor-not-allowed" : "hover:bg-muted cursor-pointer", !day.isCurrentMonth && !disabled && "text-foreground-disabled", day.isWeekend && day.isCurrentMonth && !disabled && !isSelected && "text-foreground-label", day.isToday && !isSelected && !disabled && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+								className: cn("flex size-8 items-center justify-center", "rounded-full text-xs", sizeClassNames.day, "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", isUnavailable ? "text-foreground-disabled cursor-not-allowed" : "hover:bg-muted cursor-pointer", !day.isCurrentMonth && !isUnavailable && "text-foreground-disabled", day.isWeekend && day.isCurrentMonth && !isUnavailable && !isSelected && "text-foreground-label", day.isToday && !isSelected && !isUnavailable && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
 								"data-date": day.date,
 								onClick: () => {
-									if (!disabled) onChange(day.date);
+									if (!isUnavailable) selectDay(day.date);
 								},
 								role: "gridcell",
 								tabIndex: isFocused ? 0 : -1,
@@ -437,6 +521,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 					view === "months" && /* @__PURE__ */ jsx(MonthGrid, {
 						currentMonth: selectedMonth,
 						currentYear: selectedYear,
+						cellClassName: sizeClassNames.cell,
 						locale,
 						onSelect: handleMonthSelect,
 						today,
@@ -445,9 +530,17 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 					view === "years" && /* @__PURE__ */ jsx(YearGrid, {
 						currentYear: selectedYear,
 						decadeBase,
+						cellClassName: sizeClassNames.cell,
 						onSelect: handleYearSelect,
 						today
 					}),
+					selection.mode === DATE_PICKER_MODE.dateTime && /* @__PURE__ */ jsx(TimeField, {
+						disabled: value === "",
+						label: labels.time,
+						locale,
+						onChange: handleTimeChange,
+						time: selection.time
+					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "mt-1 flex items-center gap-1 border-t pt-1",
 						children: [/* @__PURE__ */ jsx(Button, {
@@ -463,7 +556,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 							size: "xs",
 							variant: "ghost",
 							children: todayLabel
-						}), value && /* @__PURE__ */ jsx(Button, {
+						}), value && !hideClear && /* @__PURE__ */ jsx(Button, {
 							className: "flex-1",
 							onClick: () => onChange(null),
 							size: "xs",
@@ -486,8 +579,102 @@ const DatePickerPopover = (props) => {
 		today
 	});
 };
+const PickerHeader = ({ headingClassName, label, labels, onHeadingClick, onNext, onPrevious, view }) => {
+	const isTopLevel = view === "years";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-1 pb-1",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": labels.previous,
+				onClick: onPrevious,
+				size: "icon-xs",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronLeftIcon })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				className: cn("text-xs font-medium", isTopLevel ? "cursor-default" : "hover:bg-muted cursor-pointer rounded-md px-2 py-0.5", headingClassName),
+				"data-slot": "date-picker-heading",
+				onClick: onHeadingClick,
+				tabIndex: isTopLevel ? -1 : 0,
+				type: "button",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": labels.next,
+				onClick: onNext,
+				size: "icon-xs",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronRightIcon })
+			})
+		]
+	});
+};
+/**
+* Hour and minute selects in the locale's own clock and numerals. Inert
+* until a day is picked, since a time alone is not a value.
+*/
+const TimeField = ({ disabled, label, locale, onChange, time }) => {
+	const labelId = useId();
+	const hourOptions = useMemo(() => getHourOptions(locale), [locale]);
+	const minuteOptions = useMemo(() => getMinuteOptions(locale), [locale]);
+	const fieldNames = useMemo(() => getTimeFieldNames(locale), [locale]);
+	const clock = time === null ? null : splitPickerTime(time);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-labelledby": labelId,
+		className: "mt-1 flex items-center gap-1.5 border-t pt-1",
+		role: "group",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-foreground-label shrink-0 text-xs",
+				id: labelId,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TimePartSelect, {
+				disabled,
+				label: fieldNames.hour,
+				onChange: (hour) => onChange({
+					hour,
+					minute: clock?.minute ?? 0
+				}),
+				options: hourOptions,
+				value: clock?.hour ?? null
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-muted-foreground text-xs",
+				children: ":"
+			}),
+			/* @__PURE__ */ jsx(TimePartSelect, {
+				disabled,
+				label: fieldNames.minute,
+				onChange: (minute) => onChange({
+					hour: clock?.hour ?? 0,
+					minute
+				}),
+				options: minuteOptions,
+				value: clock?.minute ?? null
+			})
+		]
+	});
+};
+const TimePartSelect = ({ disabled, label, onChange, options, value }) => /* @__PURE__ */ jsxs(Select, {
+	disabled,
+	onValueChange: (next) => {
+		if (typeof next === "number") onChange(next);
+	},
+	value,
+	children: [/* @__PURE__ */ jsx(SelectTrigger, {
+		"aria-label": label,
+		className: "min-w-0 flex-1",
+		size: "sm",
+		children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "—" })
+	}), /* @__PURE__ */ jsx(SelectPopup, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+		value: option.value,
+		children: option.label
+	}, option.value)) })]
+});
 const MONTHS_PER_ROW = 3;
-const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, today }) => {
+const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, cellClassName, onSelect, today }) => {
 	const labels = useMemo(() => getMonthLabels(locale, "short"), [locale]);
 	const now = Temporal.PlainDate.from(today);
 	const todayMonth = now.month - 1;
@@ -504,7 +691,7 @@ const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, toda
 				const isSelected = currentMonth !== null && currentYear !== null && month === currentMonth && viewYear === currentYear;
 				return /* @__PURE__ */ jsxs("button", {
 					"aria-selected": isSelected || void 0,
-					className: cn("rounded-md px-2 py-1.5 text-xs", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", month === todayMonth && viewYear === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					className: cn("rounded-md px-2 py-1.5 text-xs", cellClassName, "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", month === todayMonth && viewYear === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
 					onClick: () => onSelect(month),
 					role: "gridcell",
 					type: "button",
@@ -519,7 +706,7 @@ const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, toda
 	});
 };
 const YEARS_PER_ROW = 3;
-const YearGrid = ({ decadeBase, currentYear, onSelect, today }) => {
+const YearGrid = ({ decadeBase, currentYear, cellClassName, onSelect, today }) => {
 	const todayYear = Temporal.PlainDate.from(today).year;
 	const startYear = decadeBase - 1;
 	const rows = [];
@@ -536,7 +723,7 @@ const YearGrid = ({ decadeBase, currentYear, onSelect, today }) => {
 				const isSelected = currentYear !== null && year === currentYear;
 				return /* @__PURE__ */ jsx("button", {
 					"aria-selected": isSelected || void 0,
-					className: cn("rounded-md px-2 py-1.5 text-xs", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", isOutside && !isSelected && "text-foreground-subtle", year === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					className: cn("rounded-md px-2 py-1.5 text-xs", cellClassName, "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", isOutside && !isSelected && "text-foreground-subtle", year === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
 					onClick: () => onSelect(year),
 					role: "gridcell",
 					type: "button",

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

@@ -14,4 +14,43 @@ export declare const shiftCalendarDate: (date: string, options: {
   years?: number;
 }) => string;
 export declare const millisecondsUntilNextLocalDate: (timestamp: number) => number;
+export declare const DATE_PICKER_MODE: Readonly<{
+  readonly date: "date";
+  readonly dateTime: "date-time";
+}>;
+export type DatePickerMode = (typeof DATE_PICKER_MODE)[keyof typeof DATE_PICKER_MODE];
+/** The time a date-time value takes when a day is picked before any time. */
+export declare const DEFAULT_PICKER_TIME = "00:00";
+/** A wall-clock selection: an ISO date plus an `HH:mm` time. */
+export type DateTimeSelection = {
+  date: string;
+  time: string;
+};
+/**
+ * Read a date-time value (`YYYY-MM-DDTHH:mm`, a zone-less
+ * `Temporal.PlainDateTime`). A bare date reads as midnight and seconds are
+ * dropped. An instant (`…Z`) is not a wall-clock time and throws, like any
+ * other malformed value.
+ */
+export declare const parseDateTimeValue: (value: string | null) => DateTimeSelection | null;
+export declare const formatDateTimeValue: ({ date, time }: DateTimeSelection) => string;
+export type PickerClock = {
+  hour: number;
+  minute: number;
+};
+export declare const splitPickerTime: (time: string) => PickerClock;
+export declare const joinPickerTime: (clock: PickerClock) => string;
+export type PickerTimeOption = {
+  value: number;
+  label: string;
+};
+/**
+ * Hour choices in the locale's own clock: `2 PM` where the locale counts
+ * twelve hours, `14` where it counts twenty-four.
+ */
+export declare const getHourOptions: (locale: string) => PickerTimeOption[];
+/** Two-digit minute choices in the locale's numbering system. */
+export declare const getMinuteOptions: (locale: string) => PickerTimeOption[];
+/** Accessible names of the hour and minute fields, from the locale itself. */
+export declare const getTimeFieldNames: (locale: string) => Record<keyof PickerClock, string>;
 //#endregion

package/dist/components/date-picker-popover.logic.js

@@ -27,5 +27,74 @@ const millisecondsUntilNextLocalDate = (timestamp) => {
 	});
 	return Math.max(0, nextLocalDate.epochMilliseconds - timestamp) + DATE_ROLLOVER_EPSILON_MS;
 };
+const DATE_PICKER_MODE = Object.freeze({
+	date: "date",
+	dateTime: "date-time"
+});
+/** The time a date-time value takes when a day is picked before any time. */
+const DEFAULT_PICKER_TIME = "00:00";
+/**
+* Read a date-time value (`YYYY-MM-DDTHH:mm`, a zone-less
+* `Temporal.PlainDateTime`). A bare date reads as midnight and seconds are
+* dropped. An instant (`…Z`) is not a wall-clock time and throws, like any
+* other malformed value.
+*/
+const parseDateTimeValue = (value) => {
+	if (value === null || value === "") return null;
+	const dateTime = Temporal.PlainDateTime.from(value);
+	return {
+		date: dateTime.toPlainDate().toString(),
+		time: dateTime.toPlainTime().toString({ smallestUnit: "minute" })
+	};
+};
+const formatDateTimeValue = ({ date, time }) => `${date}T${time}`;
+const splitPickerTime = (time) => {
+	const { hour, minute } = Temporal.PlainTime.from(time);
+	return {
+		hour,
+		minute
+	};
+};
+const joinPickerTime = (clock) => Temporal.PlainTime.from(clock).toString({ smallestUnit: "minute" });
+const HOURS = Array.from({ length: 24 }, (_, hour) => hour);
+const MINUTES = Array.from({ length: 60 }, (_, minute) => minute);
+/**
+* Hour choices in the locale's own clock: `2 PM` where the locale counts
+* twelve hours, `14` where it counts twenty-four.
+*/
+const getHourOptions = (locale) => {
+	const formatter = new Intl.DateTimeFormat(locale, {
+		hour: "numeric",
+		timeZone: "UTC"
+	});
+	const epoch = Temporal.PlainDate.from("1970-01-01");
+	return HOURS.map((hour) => ({
+		value: hour,
+		label: formatter.format(epoch.toZonedDateTime({
+			plainTime: Temporal.PlainTime.from({ hour }),
+			timeZone: "UTC"
+		}).epochMilliseconds)
+	}));
+};
+/** Two-digit minute choices in the locale's numbering system. */
+const getMinuteOptions = (locale) => {
+	const formatter = new Intl.NumberFormat(locale, {
+		minimumIntegerDigits: 2,
+		useGrouping: false
+	});
+	return MINUTES.map((minute) => ({
+		value: minute,
+		label: formatter.format(minute)
+	}));
+};
+const capitalize = (locale, text) => text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+/** Accessible names of the hour and minute fields, from the locale itself. */
+const getTimeFieldNames = (locale) => {
+	const names = new Intl.DisplayNames(locale, { type: "dateTimeField" });
+	return {
+		hour: capitalize(locale, names.of("hour") ?? "hour"),
+		minute: capitalize(locale, names.of("minute") ?? "minute")
+	};
+};
 //#endregion
-export { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate };
+export { DATE_PICKER_MODE, DEFAULT_PICKER_TIME, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime };

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

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/select.js

@@ -3,6 +3,7 @@ import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../icons.js"
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
+import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
 import { useLatest } from "../hooks/use-latest.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
@@ -31,7 +32,7 @@ const Select = ({ children, isItemEqualToValue, itemToStringLabel, itemToStringV
 	});
 };
 const SelectTrigger = ({ className, size = CONTROL_SIZE.default, children, ...props }) => /* @__PURE__ */ jsxs(Select$1.Trigger, {
-	className: cn("border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", SELECT_TRIGGER_SIZE_CLASS_NAMES[size], className),
+	className: cn(FIELD_TRIGGER_CLASS_NAME, SELECT_TRIGGER_SIZE_CLASS_NAMES[size], className),
 	"data-slot": "select-trigger",
 	...props,
 	children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {

package/dist/components/sidebar.d.ts

@@ -86,7 +86,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
+  size?: "default" | "sm" | "lg" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * The footer's avatar trigger, signed in (user menu) or not (sign-in): a

package/dist/index.js

@@ -31,6 +31,8 @@ import { assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutRes
 import { ResourceCalendar } from "./calendar/resource-calendar.js";
 import { getFirstWeekday, getLocaleWeekInfo, getWeekendDays } from "./lib/week.js";
 import { Popover, PopoverClose, PopoverContent as PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger } from "./components/popover.js";
+import { useLatest } from "./hooks/use-latest.js";
+import { Select, SelectContent as SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
 import { DatePickerPopover } from "./components/date-picker-popover.js";
 import { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity } from "./components/field.js";
 import { DestructiveActionConfirmation, useDestructiveActionConfirmation } from "./components/destructive-action-confirmation.js";
@@ -38,7 +40,6 @@ import { DestructiveConfirmDialog } from "./components/destructive-confirm-dialo
 import { FileInput } from "./components/file-input.js";
 import { Form } from "./components/form.js";
 import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "./components/frame.js";
-import { useLatest } from "./hooks/use-latest.js";
 import { HexColorPicker } from "./components/hex-color-picker.js";
 import { Textarea } from "./components/textarea.js";
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/input-group.js";
@@ -55,7 +56,6 @@ import { MenuPreviewLayout, PreviewPane } from "./components/preview-pane.js";
 import { ScrollToTop } from "./components/scroll-to-top.js";
 import { SecretInput } from "./components/secret-input.js";
 import { SegmentedIconToggle } from "./components/segmented-icon-toggle.js";
-import { Select, SelectContent as SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
 import { Separator, TextSeparator } from "./components/separator.js";
 import { Skeleton } from "./components/skeleton.js";
 import { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout } from "./components/sidebar.js";

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
+declare const CONTROL_SIZES: readonly ("default" | "sm" | "lg")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/field-trigger.d.ts

@@ -0,0 +1,9 @@
+//#region src/lib/field-trigger.d.ts
+/**
+ * The bordered box of a button that opens a picker inside a form (a select
+ * trigger, a date field). One string so every popup-backed field shares the
+ * input metric, focus ring, invalid and disabled treatment, and the 44px
+ * coarse-pointer hit area.
+ */
+export declare const FIELD_TRIGGER_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none";
+//#endregion

package/dist/lib/field-trigger.js

@@ -0,0 +1,10 @@
+//#region src/lib/field-trigger.ts
+/**
+* The bordered box of a button that opens a picker inside a form (a select
+* trigger, a date field). One string so every popup-backed field shares the
+* input metric, focus ring, invalid and disabled treatment, and the 44px
+* coarse-pointer hit area.
+*/
+const FIELD_TRIGGER_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none";
+//#endregion
+export { FIELD_TRIGGER_CLASS_NAME };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",