@stll/ui 0.25.2 → 0.26.1

package/dist/calendar/resource-calendar.logic.js

@@ -1,16 +1,16 @@
+import { Result } from "better-result";
+import { Temporal } from "temporal-polyfill/full";
 //#region src/calendar/resource-calendar.logic.ts
 const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/u;
-const DAY_IN_MS = 864e5;
-const toUTCDate = (value) => {
+const toPlainDate = (value) => {
 	if (!ISO_DATE_PATTERN.test(value)) return null;
-	const date = /* @__PURE__ */ new Date(`${value}T00:00:00.000Z`);
-	return date.toISOString().slice(0, 10) === value ? date : null;
+	return Result.try(() => Temporal.PlainDate.from(value)).unwrapOr(null);
 };
 const differenceInCalendarDays = (later, earlier) => {
-	const laterDate = toUTCDate(later);
-	const earlierDate = toUTCDate(earlier);
+	const laterDate = toPlainDate(later);
+	const earlierDate = toPlainDate(earlier);
 	if (laterDate === null || earlierDate === null) throw new RangeError("Calendar dates must use normalized YYYY-MM-DD values");
-	return (laterDate.getTime() - earlierDate.getTime()) / DAY_IN_MS;
+	return laterDate.since(earlierDate, { largestUnit: "days" }).days;
 };
 const getResourceCalendarPlacement = ({ entry, visibleRange }) => {
 	const visibleDayCount = differenceInCalendarDays(visibleRange.endDateExclusive, visibleRange.startDate);
@@ -27,7 +27,7 @@ const getResourceCalendarPlacement = ({ entry, visibleRange }) => {
 const assertConsecutiveCalendarDates = (dates) => {
 	if (dates.length === 0) throw new RangeError("A resource calendar needs at least one date column");
 	const first = dates.at(0);
-	if (first === void 0 || toUTCDate(first) === null) throw new RangeError("Resource calendar date columns must be consecutive normalized dates");
+	if (first === void 0 || toPlainDate(first) === null) throw new RangeError("Resource calendar date columns must be consecutive normalized dates");
 	for (let index = 1; index < dates.length; index += 1) {
 		const previous = dates.at(index - 1);
 		const current = dates.at(index);
@@ -35,11 +35,10 @@ const assertConsecutiveCalendarDates = (dates) => {
 	}
 };
 const nextCalendarDate = (value) => {
-	const date = toUTCDate(value);
+	const date = toPlainDate(value);
 	if (date === null) throw new RangeError("Calendar dates must use normalized YYYY-MM-DD values");
-	date.setUTCDate(date.getUTCDate() + 1);
-	const nextDate = date.toISOString().slice(0, 10);
-	if (toUTCDate(nextDate) === null) throw new RangeError("Calendar dates must have a following normalized YYYY-MM-DD value");
+	const nextDate = date.add({ days: 1 }).toString();
+	if (toPlainDate(nextDate) === null) throw new RangeError("Calendar dates must have a following normalized YYYY-MM-DD value");
 	return nextDate;
 };
 const layoutResourceCalendarEntries = (entries, visibleRange) => {

package/dist/components/button-variants.d.ts

@@ -10,7 +10,7 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  size?: "sm" | "default" | "lg" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -31,17 +31,27 @@ type ColorPickerProps = {
   align?: "start" | "center" | "end";
   className?: string;
 };
-type ColorPickerContentProps = {
+type ColorPickerContentBaseProps = {
   value?: string | undefined;
   onSelect?: ((value: string) => void) | undefined;
-  onClear?: (() => void) | undefined;
   presets: ColorPreset[];
-  columns: number;
-  defaultExpanded: boolean;
   moreLabel: string;
 };
+type ColorPickerContentProps = ColorPickerContentBaseProps & ({
+  columns: number;
+  defaultExpanded: boolean;
+  onClear?: (() => void) | undefined;
+  /** Popover content closes on preset selection. */
+  presentation?: "popover";
+} | {
+  columns?: never;
+  defaultExpanded?: never;
+  onClear?: never;
+  /** Inline content stays mounted and reserves its popup for custom color. */
+  presentation: "inline";
+});
 declare const DEFAULT_PRESETS: ColorPreset[];
-declare const ColorPickerContent: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel }: ColorPickerContentProps) => React$1.JSX.Element;
+declare const ColorPickerContent: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, presentation }: ColorPickerContentProps) => React$1.JSX.Element;
 declare const ColorPicker: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, children, side, align, className }: ColorPickerProps) => React$1.JSX.Element;
 //#endregion
 export { ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, DEFAULT_PRESETS };

package/dist/components/color-picker.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { CheckIcon, ChevronDownIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useState } from "react";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/color-picker.tsx
@@ -112,25 +113,97 @@ const isLightHex = (hex) => {
 	const b = Number.parseInt(hex.slice(4, 6), 16);
 	return (r * 299 + g * 587 + b * 114) / 1e3 > 220;
 };
+const checkIconColorClassNames = {
+	dark: "text-(--color-white)",
+	light: "text-(--color-black)"
+};
 /** Check if a value looks like a 6-char hex (no CSS vars, no named colors). */
 const looksLikeHex = (v) => /^[0-9A-Fa-f]{6}$/u.test(v);
-const ColorSwatch = ({ cssColor, selected, label, isLight, onClick }) => /* @__PURE__ */ jsx(Popover.Close, {
-	render: /* @__PURE__ */ jsx("button", {
+const ColorSwatch = ({ cssColor, selected, label, isLight, onClick, presentation }) => {
+	let selectionClassName = "border-border/40";
+	if (selected) selectionClassName = presentation === "inline" ? "border-transparent ring-2 ring-ring" : "border-foreground ring-ring/24 ring-1";
+	const swatch = /* @__PURE__ */ jsx("button", {
 		"aria-label": label,
-		className: cn("hover:border-foreground relative flex size-6 items-center justify-center rounded-md border transition-[transform,border-color] hover:scale-115 sm:size-5", selected ? "border-foreground ring-ring/24 ring-1" : "border-border/40", isLight && !selected && "border-border"),
+		"aria-pressed": selected,
+		className: cn(presentation === "inline" ? "ring-offset-popover relative grid size-11 shrink-0 place-items-center rounded-full border ring-offset-2 transition-transform outline-none hover:scale-105 focus-visible:ring-2" : "hover:border-foreground relative flex size-6 items-center justify-center rounded-md border transition-[transform,border-color] hover:scale-115 sm:size-5", selectionClassName, isLight && !selected && "border-border"),
 		onClick,
 		style: { backgroundColor: cssColor },
-		type: "button"
+		type: "button",
+		children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: cn("pointer-events-none", presentation === "inline" ? "bg-background/88 text-foreground size-5 rounded-full p-0.5 shadow-sm" : "size-3 sm:size-2.5", presentation === "popover" && checkIconColorClassNames[isLight ? "light" : "dark"]) })
+	});
+	return presentation === "inline" ? swatch : /* @__PURE__ */ jsx(Popover.Close, { render: swatch });
+};
+const CustomColorControls = ({ handleInputChange, handlePickerChange, inputHex, pickerHex }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: "ring-border/30 h-[140px] w-full rounded-lg ring-1"
 	}),
-	children: selected && /* @__PURE__ */ jsx(CheckIcon, {
-		className: "pointer-events-none size-3 sm:size-2.5",
-		style: { color: isLight ? "#000" : "#fff" }
+	children: /* @__PURE__ */ jsx(HexColorPicker, {
+		className: "ring-border/30 !h-[140px] !w-full overflow-hidden rounded-lg ring-1",
+		color: pickerHex,
+		onChange: (hex) => handlePickerChange(hex.replace("#", ""))
 	})
-});
-const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel }) => {
+}), /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-1.5",
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-[11px]",
+			children: "#"
+		}),
+		/* @__PURE__ */ jsx("input", {
+			"aria-label": "Custom hex color",
+			className: "border-input bg-background text-foreground h-6 flex-1 rounded border px-1.5 font-mono text-[11px] outline-none",
+			dir: "ltr",
+			maxLength: 6,
+			onChange: (event) => handleInputChange(event.target.value),
+			onKeyDown: (event) => {
+				if (event.key !== "Escape") event.stopPropagation();
+			},
+			onMouseDown: (event) => event.stopPropagation(),
+			onPointerDown: (event) => event.stopPropagation(),
+			placeholder: "FF0000",
+			value: inputHex
+		}),
+		isValidHex(inputHex) && /* @__PURE__ */ jsx("span", {
+			className: "border-border size-6 shrink-0 rounded border",
+			style: { backgroundColor: `#${inputHex}` }
+		})
+	]
+})] });
+const InlineCustomColor = ({ customSelected, handleInputChange, handlePickerChange, inputHex, label, pickerHex, presets, value }) => {
+	const customColor = customSelected ? `#${value}` : void 0;
+	const customGradient = `conic-gradient(${presets.map((preset) => swatchColor(preset)).join(", ")})`;
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			"aria-label": label,
+			"aria-pressed": customSelected,
+			className: cn("ring-offset-popover relative grid size-11 shrink-0 place-items-center rounded-full border border-transparent ring-offset-2 transition-transform outline-none hover:scale-105 focus-visible:ring-2", customSelected && "ring-ring ring-2"),
+			style: customColor ? { backgroundColor: customColor } : { backgroundImage: customGradient },
+			type: "button"
+		}),
+		children: customSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "bg-background/88 text-foreground pointer-events-none size-5 rounded-full p-0.5 shadow-sm" }) : null
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align: "end",
+		className: OVERLAY_LAYER_CLASS_NAMES.popup,
+		side: "bottom",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: "bg-popover text-popover-foreground flex w-56 flex-col gap-2 rounded-lg border p-2 shadow-lg/5",
+			"data-slot": "color-picker-custom-popup",
+			children: /* @__PURE__ */ jsx(CustomColorControls, {
+				handleInputChange,
+				handlePickerChange,
+				inputHex,
+				pickerHex
+			})
+		})
+	}) })] });
+};
+const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, presentation = "popover" }) => {
 	const [expanded, setExpanded] = useState(defaultExpanded);
 	const [pickerHex, setPickerHex] = useState(() => (looksLikeHex(value ?? "") ? value : "000000") ?? "000000");
 	const [inputHex, setInputHex] = useState("");
+	const customSelected = !presets.some((preset) => preset.value === value) && looksLikeHex(value ?? "");
 	/** Called when the visual picker (SB square / hue strip) emits a color. */
 	const handlePickerChange = (hex) => {
 		const normalized = normalizeHex(hex);
@@ -147,6 +220,27 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 			onSelect?.(cleaned);
 		}
 	};
+	if (presentation === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		"data-slot": "color-picker",
+		children: [presets.map((preset) => /* @__PURE__ */ jsx(ColorSwatch, {
+			cssColor: swatchColor(preset),
+			isLight: looksLikeHex(preset.value) && isLightHex(preset.value),
+			label: preset.label,
+			onClick: () => onSelect?.(preset.value),
+			presentation: "inline",
+			selected: value === preset.value
+		}, preset.value)), /* @__PURE__ */ jsx(InlineCustomColor, {
+			customSelected,
+			handleInputChange,
+			handlePickerChange,
+			inputHex,
+			label: moreLabel,
+			pickerHex,
+			presets,
+			value
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-1.5",
 		"data-slot": "color-picker",
@@ -172,6 +266,7 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 					isLight: looksLikeHex(preset.value) && isLightHex(preset.value),
 					label: preset.label,
 					onClick: () => onSelect?.(preset.value),
+					presentation: "popover",
 					selected: value === preset.value
 				}, preset.value))
 			}),
@@ -180,43 +275,14 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 				onClick: () => setExpanded(true),
 				type: "button",
 				children: [moreLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })]
-			}) : /* @__PURE__ */ jsxs("div", {
+			}) : /* @__PURE__ */ jsx("div", {
 				className: "border-border flex flex-col gap-2 border-t pt-2",
-				children: [/* @__PURE__ */ jsx(Suspense, {
-					fallback: /* @__PURE__ */ jsx("div", {
-						"aria-hidden": true,
-						className: "ring-border/30 h-[140px] w-full rounded-lg ring-1"
-					}),
-					children: /* @__PURE__ */ jsx(HexColorPicker, {
-						className: "ring-border/30 !h-[140px] !w-full overflow-hidden rounded-lg ring-1",
-						color: pickerHex,
-						onChange: (hex) => handlePickerChange(hex.replace("#", ""))
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1.5",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground text-[11px]",
-							children: "#"
-						}),
-						/* @__PURE__ */ jsx("input", {
-							"aria-label": "Custom hex color",
-							className: "border-input bg-background text-foreground h-6 flex-1 rounded border px-1.5 font-mono text-[11px] outline-none",
-							dir: "ltr",
-							maxLength: 6,
-							onChange: (e) => handleInputChange(e.target.value),
-							onKeyDown: (e) => e.stopPropagation(),
-							onMouseDown: (e) => e.stopPropagation(),
-							onPointerDown: (e) => e.stopPropagation(),
-							placeholder: "FF0000",
-							value: inputHex
-						}),
-						isValidHex(inputHex) && /* @__PURE__ */ jsx("span", {
-							className: "border-border size-6 shrink-0 rounded border",
-							style: { backgroundColor: `#${inputHex}` }
-						})
-					]
-				})]
+				children: /* @__PURE__ */ jsx(CustomColorControls, {
+					handleInputChange,
+					handlePickerChange,
+					inputHex,
+					pickerHex
+				})
 			})
 		]
 	});
@@ -228,7 +294,7 @@ const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, colu
 	children
 }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 	align,
-	className: "z-50",
+	className: OVERLAY_LAYER_CLASS_NAMES.popup,
 	side,
 	sideOffset: 4,
 	children: /* @__PURE__ */ jsx(Popover.Popup, {
@@ -240,6 +306,7 @@ const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, colu
 			moreLabel,
 			onClear,
 			onSelect,
+			presentation: "popover",
 			presets,
 			value
 		})

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

@@ -3,17 +3,22 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
-import { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth } from "./date-picker-popover.logic.js";
+import { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate } from "./date-picker-popover.logic.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Temporal } from "temporal-polyfill/full";
 //#region src/components/date-picker-popover.tsx
-const toISODate = (date) => date.toISOString().slice(0, 10);
+const toISODate = (date) => date.toString();
+const toUTCDateTime = (date) => date.toZonedDateTime({
+	plainTime: Temporal.PlainTime.from("00:00"),
+	timeZone: "UTC"
+}).epochMilliseconds;
 const HYDRATION_DATE = "1970-01-01";
 const HYDRATION_LOCALE = "en";
 const noopSubscribe = (_onStoreChange) => () => void 0;
-const getLocalToday = () => localDateFromTimestamp(Date.now());
+const getLocalToday = () => localDateFromTimestamp(Temporal.Now.instant().epochMilliseconds);
 const localDateListeners = /* @__PURE__ */ new Set();
 let localDateTimeoutId;
 const notifyLocalDateListeners = () => {
@@ -24,7 +29,7 @@ const scheduleNextLocalDate = () => {
 	localDateTimeoutId = setTimeout(() => {
 		notifyLocalDateListeners();
 		if (localDateListeners.size > 0) scheduleNextLocalDate();
-	}, millisecondsUntilNextLocalDate(Date.now()));
+	}, millisecondsUntilNextLocalDate(Temporal.Now.instant().epochMilliseconds));
 };
 const refreshLocalDateEnvironment = () => {
 	notifyLocalDateListeners();
@@ -58,19 +63,21 @@ const getFirstDayOfWeek = (locale) => {
 };
 const getMonthDays = (year, month, firstDow, weekendDays, today) => {
 	const days = [];
-	const first = new Date(Date.UTC(year, month, 1));
-	const startOffset = ((first.getUTCDay() + 6) % 7 - firstDow + 7) % 7;
-	const start = new Date(first);
-	start.setUTCDate(start.getUTCDate() - startOffset);
+	const first = Temporal.PlainDate.from({
+		year,
+		month: month + 1,
+		day: 1
+	});
+	const startOffset = (first.dayOfWeek - 1 - firstDow + 7) % 7;
+	const start = first.subtract({ days: startOffset });
 	for (let i = 0; i < 42; i++) {
-		const d = new Date(start);
-		d.setUTCDate(d.getUTCDate() + i);
+		const d = start.add({ days: i });
 		const iso = toISODate(d);
 		days.push({
 			date: iso,
-			isCurrentMonth: d.getUTCMonth() === month,
+			isCurrentMonth: d.month === month + 1,
 			isToday: iso === today,
-			isWeekend: weekendDays.has(d.getUTCDay())
+			isWeekend: weekendDays.has(d.dayOfWeek % 7)
 		});
 	}
 	return days;
@@ -87,14 +94,21 @@ const getWeekdayFormatter = (locale) => {
 const getWeekdayLabels = (locale, firstDow, weekendDays) => {
 	const fmt = getWeekdayFormatter(locale);
 	return Array.from({ length: 7 }, (_, i) => {
-		const d = new Date(Date.UTC(2024, 0, 1 + (i + firstDow) % 7));
+		const d = Temporal.PlainDate.from("2024-01-01").add({ days: (i + firstDow) % 7 });
 		return {
-			isWeekend: weekendDays.has(d.getUTCDay()),
-			label: fmt.format(d)
+			isWeekend: weekendDays.has(d.dayOfWeek % 7),
+			label: fmt.format(toUTCDateTime(d))
 		};
 	});
 };
 const monthFormatters = /* @__PURE__ */ new Map();
+const dateFormatters = /* @__PURE__ */ new Map();
+const getDateFormatter = (locale, options) => {
+	const key = `${locale}:${JSON.stringify(options)}`;
+	const formatter = dateFormatters.get(key) ?? new Intl.DateTimeFormat(locale, options);
+	dateFormatters.set(key, formatter);
+	return formatter;
+};
 const getMonthFormatter = (locale, format) => {
 	const key = `${locale}:${format}`;
 	const fmt = monthFormatters.get(key) ?? new Intl.DateTimeFormat(locale, {
@@ -107,7 +121,11 @@ const getMonthFormatter = (locale, format) => {
 };
 const getMonthLabels = (locale, format = "long") => {
 	const fmt = getMonthFormatter(locale, format);
-	return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(Date.UTC(2024, i, 1))));
+	return Array.from({ length: 12 }, (_, i) => fmt.format(toUTCDateTime(Temporal.PlainDate.from({
+		year: 2024,
+		month: i + 1,
+		day: 1
+	}))));
 };
 const monthYearFormatters = /* @__PURE__ */ new Map();
 const getMonthYearFormatter = (locale) => {
@@ -120,7 +138,11 @@ const getMonthYearFormatter = (locale) => {
 	monthYearFormatters.set(locale, fmt);
 	return fmt;
 };
-const formatMonthYear = (locale, year, month) => getMonthYearFormatter(locale).format(new Date(Date.UTC(year, month, 1)));
+const formatMonthYear = (locale, year, month) => getMonthYearFormatter(locale).format(toUTCDateTime(Temporal.PlainDate.from({
+	year,
+	month: month + 1,
+	day: 1
+})));
 const relativeTimeFormatters = /* @__PURE__ */ new Map();
 const getRelativeTimeFormatter = (locale) => {
 	const fmt = relativeTimeFormatters.get(locale) ?? new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
@@ -134,14 +156,10 @@ const deriveTodayLabel = (locale) => {
 };
 const normalizeDate = (v) => {
 	if (v === null || v === void 0) return "";
-	if (v instanceof Date) return v.toISOString().slice(0, 10);
+	if (v instanceof Date) return Temporal.Instant.fromEpochMilliseconds(v.getTime()).toZonedDateTimeISO("UTC").toPlainDate().toString();
 	return v.length >= 10 ? v.slice(0, 10) : v;
 };
-const addDays = (iso, n) => {
-	const d = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
-	d.setUTCDate(d.getUTCDate() + n);
-	return toISODate(d);
-};
+const addDays = (iso, n) => Temporal.PlainDate.from(iso).add({ days: n }).toString();
 const isBefore = (a, b) => a < b;
 const isAfter = (a, b) => a > b;
 /** Round down to the start of a decade (e.g. 2026 → 2020). */
@@ -186,22 +204,22 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		maxDate,
 		isDateDisabled
 	]);
-	const displayLabel = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).toLocaleDateString(locale, {
+	const displayLabel = value ? getDateFormatter(locale, {
 		month: "short",
 		day: "numeric",
 		year: "numeric",
 		calendar: "gregory",
 		timeZone: "UTC"
-	}) : placeholderLabel ?? "—";
-	const formatDayLabel = useCallback((iso) => (/* @__PURE__ */ new Date(`${iso}T00:00:00Z`)).toLocaleDateString(locale, {
+	}).format(toUTCDateTime(Temporal.PlainDate.from(value))) : placeholderLabel ?? "—";
+	const formatDayLabel = useCallback((iso) => getDateFormatter(locale, {
 		weekday: "long",
 		month: "long",
 		day: "numeric",
 		year: "numeric",
 		calendar: "gregory",
 		timeZone: "UTC"
-	}), [locale]);
-	const handleGridKeyDown = useCallback((e) => {
+	}).format(toUTCDateTime(Temporal.PlainDate.from(iso))), [locale]);
+	const handleGridKeyDown = (e) => {
 		const firstDay = days.at(0);
 		if (!firstDay) return;
 		const current = focusedDate || value || firstDay.date;
@@ -212,22 +230,14 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		else if (e.key === "ArrowDown") next = addDays(current, 7);
 		else if (e.key === "ArrowUp") next = addDays(current, -7);
 		else if (e.key === "Home") {
-			const offset = (((/* @__PURE__ */ new Date(`${current}T00:00:00Z`)).getUTCDay() + 6) % 7 - firstDow + 7) % 7;
+			const offset = (Temporal.PlainDate.from(current).dayOfWeek - 1 - firstDow + 7) % 7;
 			next = addDays(current, -offset);
 		} else if (e.key === "End") {
-			const offset = (((/* @__PURE__ */ new Date(`${current}T00:00:00Z`)).getUTCDay() + 6) % 7 - firstDow + 7) % 7;
+			const offset = (Temporal.PlainDate.from(current).dayOfWeek - 1 - firstDow + 7) % 7;
 			next = addDays(current, 6 - offset);
-		} else if (e.key === "PageUp") {
-			const d = /* @__PURE__ */ new Date(`${current}T00:00:00Z`);
-			if (e.shiftKey) d.setUTCFullYear(d.getUTCFullYear() - 1);
-			else d.setUTCMonth(d.getUTCMonth() - 1);
-			next = toISODate(d);
-		} else if (e.key === "PageDown") {
-			const d = /* @__PURE__ */ new Date(`${current}T00:00:00Z`);
-			if (e.shiftKey) d.setUTCFullYear(d.getUTCFullYear() + 1);
-			else d.setUTCMonth(d.getUTCMonth() + 1);
-			next = toISODate(d);
-		} else {
+		} else if (e.key === "PageUp") next = shiftCalendarDate(current, e.shiftKey ? { years: -1 } : { months: -1 });
+		else if (e.key === "PageDown") next = shiftCalendarDate(current, e.shiftKey ? { years: 1 } : { months: 1 });
+		else {
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
 				if (!isDayDisabled(current)) onChange(current);
@@ -237,9 +247,9 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		e.preventDefault();
 		if (next) {
 			setFocusedDate(next);
-			const nextDate = /* @__PURE__ */ new Date(`${next}T00:00:00Z`);
-			const nextMonth = nextDate.getUTCMonth();
-			const nextYear = nextDate.getUTCFullYear();
+			const nextDate = Temporal.PlainDate.from(next);
+			const nextMonth = nextDate.month - 1;
+			const nextYear = nextDate.year;
 			if (nextMonth !== viewMonth || nextYear !== viewYear) setViewMonthOverride({
 				month: nextMonth,
 				year: nextYear
@@ -248,17 +258,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 				(gridRef.current?.querySelector(`[data-date="${next}"]`))?.focus();
 			});
 		}
-	}, [
-		focusedDate,
-		value,
-		days,
-		firstDow,
-		viewMonth,
-		viewYear,
-		isDayDisabled,
-		onChange,
-		setViewMonthOverride
-	]);
+	};
 	const handlePrev = () => {
 		if (view === "days") if (viewMonth === 0) setViewMonthOverride({
 			month: 11,
@@ -316,8 +316,8 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		setDecadeBaseOverride(decadeStart(year));
 		setView("months");
 	};
-	const selectedYear = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).getUTCFullYear() : null;
-	const selectedMonth = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).getUTCMonth() : null;
+	const selectedYear = value ? Temporal.PlainDate.from(value).year : null;
+	const selectedMonth = value ? Temporal.PlainDate.from(value).month - 1 : null;
 	const handleOpenChange = (open) => {
 		onOpenChange?.(open);
 		if (!open) {
@@ -451,10 +451,10 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 						children: [/* @__PURE__ */ jsx(Button, {
 							className: "flex-1",
 							onClick: () => {
-								const todayDate = /* @__PURE__ */ new Date(`${today}T00:00:00Z`);
+								const todayDate = Temporal.PlainDate.from(today);
 								setViewMonthOverride({
-									month: todayDate.getUTCMonth(),
-									year: todayDate.getUTCFullYear()
+									month: todayDate.month - 1,
+									year: todayDate.year
 								});
 								setView("days");
 							},
@@ -487,9 +487,9 @@ const DatePickerPopover = (props) => {
 const MONTHS_PER_ROW = 3;
 const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, today }) => {
 	const labels = useMemo(() => getMonthLabels(locale, "short"), [locale]);
-	const now = /* @__PURE__ */ new Date(`${today}T00:00:00Z`);
-	const todayMonth = now.getUTCMonth();
-	const todayYear = now.getUTCFullYear();
+	const now = Temporal.PlainDate.from(today);
+	const todayMonth = now.month - 1;
+	const todayYear = now.year;
 	const rows = [];
 	for (let r = 0; r < 12; r += MONTHS_PER_ROW) rows.push(Array.from({ length: MONTHS_PER_ROW }, (_, c) => r + c));
 	return /* @__PURE__ */ jsx("div", {
@@ -518,7 +518,7 @@ const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, toda
 };
 const YEARS_PER_ROW = 3;
 const YearGrid = ({ decadeBase, currentYear, onSelect, today }) => {
-	const todayYear = (/* @__PURE__ */ new Date(`${today}T00:00:00Z`)).getUTCFullYear();
+	const todayYear = Temporal.PlainDate.from(today).year;
 	const startYear = decadeBase - 1;
 	const rows = [];
 	for (let r = 0; r < DECADE_SIZE; r += YEARS_PER_ROW) rows.push(Array.from({ length: Math.min(YEARS_PER_ROW, DECADE_SIZE - r) }, (_, c) => r + c));

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

@@ -9,6 +9,10 @@ declare const resolveCalendarViewMonth: ({ override, today, value }: {
   today: string;
   value: string;
 }) => CalendarMonth;
+declare const shiftCalendarDate: (date: string, options: {
+  months?: number;
+  years?: number;
+}) => string;
 declare const millisecondsUntilNextLocalDate: (timestamp: number) => number;
 //#endregion
-export { CalendarMonth, localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth };
+export { CalendarMonth, localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate };

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

@@ -1,26 +1,31 @@
+import { Temporal } from "temporal-polyfill/full";
 //#region src/components/date-picker-popover.logic.ts
 const DATE_ROLLOVER_EPSILON_MS = 50;
 const padDatePart = (value) => value.toString().padStart(2, "0");
 const localDateFromTimestamp = (timestamp) => {
-	const current = new Date(timestamp);
+	const current = Temporal.Instant.fromEpochMilliseconds(timestamp).toZonedDateTimeISO(Temporal.Now.timeZoneId());
 	return [
-		current.getFullYear(),
-		padDatePart(current.getMonth() + 1),
-		padDatePart(current.getDate())
+		current.year,
+		padDatePart(current.month),
+		padDatePart(current.day)
 	].join("-");
 };
 const calendarMonthFromDate = (date) => {
-	const current = /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
+	const current = Temporal.PlainDate.from(date);
 	return {
-		month: current.getUTCMonth(),
-		year: current.getUTCFullYear()
+		month: current.month - 1,
+		year: current.year
 	};
 };
 const resolveCalendarViewMonth = ({ override, today, value }) => override ?? calendarMonthFromDate(value || today);
+const shiftCalendarDate = (date, options) => Temporal.PlainDate.from(date).add(options).toString();
 const millisecondsUntilNextLocalDate = (timestamp) => {
-	const current = new Date(timestamp);
-	const nextLocalDate = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
-	return Math.max(0, nextLocalDate.getTime() - timestamp) + DATE_ROLLOVER_EPSILON_MS;
+	const current = Temporal.Instant.fromEpochMilliseconds(timestamp).toZonedDateTimeISO(Temporal.Now.timeZoneId());
+	const nextLocalDate = current.toPlainDate().add({ days: 1 }).toZonedDateTime({
+		plainTime: Temporal.PlainTime.from("00:00"),
+		timeZone: current.timeZoneId
+	});
+	return Math.max(0, nextLocalDate.epochMilliseconds - timestamp) + DATE_ROLLOVER_EPSILON_MS;
 };
 //#endregion
-export { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth };
+export { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate };

package/dist/components/outline-rail.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Temporal } from "temporal-polyfill/full";
 //#region src/components/outline-rail.tsx
 /**
 * Outline rail — the shared right-edge navigation rail.
@@ -153,7 +154,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		if (!container || items.length === 0) return;
 		let raf = 0;
 		const compute = () => {
-			if (Date.now() < manualLockUntil.current || container.scrollHeight <= 0) return;
+			if (Temporal.Now.instant().epochMilliseconds < manualLockUntil.current || container.scrollHeight <= 0) return;
 			const centrePct = (container.scrollTop + container.clientHeight / 2) / container.scrollHeight * 100;
 			let next = null;
 			for (const item of items) {
@@ -197,7 +198,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		if (!container) return;
 		if (activeId === void 0) {
 			setDerivedActive(id);
-			manualLockUntil.current = Date.now() + 900;
+			manualLockUntil.current = Temporal.Now.instant().epochMilliseconds + 900;
 		}
 		onJumpRef.current(id, container);
 	}, [activeId, scrollContainerRef]);

package/dist/components/sidebar.d.ts

@@ -30,7 +30,7 @@ declare function useSidebar(): SidebarContextProps;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 256 | 48;
+declare function useSidebarInlineSize(): 0 | 48 | 256;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;
@@ -83,7 +83,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?: "sm" | "default" | "lg" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
   asChild?: boolean;

package/dist/inspector/tabs.d.ts

@@ -8,7 +8,7 @@ import { Tabs } from "@base-ui/react/tabs";
  */
 declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
 declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
-declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "vertical" | "horizontal";
+declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
 declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
 declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
 declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;

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 ("sm" | "default" | "lg")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/week.d.ts

@@ -10,13 +10,13 @@
  */
 declare const getLocaleWeekInfo: (locale: string) => Intl.WeekInfo | undefined;
 /**
- * First weekday as a `Date.getDay()` value (0 = Sunday … 6 = Saturday): Monday
+ * First weekday as a day-of-week value (0 = Sunday … 6 = Saturday): Monday
  * across most of Europe, Sunday in the US, Saturday across much of the Gulf.
  * Falls back to Monday when the runtime lacks week info.
  */
 declare const getFirstWeekday: (locale: string) => number;
 /**
- * Weekend weekdays as `Date.getDay()` values (0 = Sunday … 6 = Saturday):
+ * Weekend weekdays as day-of-week values (0 = Sunday … 6 = Saturday):
  * Saturday/Sunday across the West, Friday/Saturday across much of the Gulf.
  * Falls back to Saturday/Sunday when the runtime lacks week info.
  */

package/dist/lib/week.js

@@ -18,7 +18,7 @@ const getLocaleWeekInfo = (locale) => {
 	}
 };
 /**
-* First weekday as a `Date.getDay()` value (0 = Sunday … 6 = Saturday): Monday
+* First weekday as a day-of-week value (0 = Sunday … 6 = Saturday): Monday
 * across most of Europe, Sunday in the US, Saturday across much of the Gulf.
 * Falls back to Monday when the runtime lacks week info.
 */
@@ -27,7 +27,7 @@ const getFirstWeekday = (locale) => {
 	return typeof firstDay === "number" ? firstDay % 7 : 1;
 };
 /**
-* Weekend weekdays as `Date.getDay()` values (0 = Sunday … 6 = Saturday):
+* Weekend weekdays as day-of-week values (0 = Sunday … 6 = Saturday):
 * Saturday/Sunday across the West, Friday/Saturday across much of the Gulf.
 * Falls back to Saturday/Sunday when the runtime lacks week info.
 */

package/dist/review/review-comment-card.js

@@ -4,6 +4,7 @@ import { BidiText } from "../components/bidi-text.js";
 import { ReviewAuthorAvatar } from "./review-author-avatar.js";
 import { CheckIcon, RotateCcwIcon, Trash2Icon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Temporal } from "temporal-polyfill/full";
 //#region src/review/review-comment-card.tsx
 /** One comment on a reviewed surface: who wrote it, when, what it says, what
 *  it points at, and the two things a reader can do to it. */
@@ -70,7 +71,7 @@ const ReviewCommentCard = ({ author, timestamp, formattedTime, body, anchorText,
 *  yields no attribute rather than throwing on `toISOString`. */
 const toIsoInstant = (timestamp) => {
 	if (typeof timestamp === "string") return timestamp;
-	return Number.isNaN(timestamp.getTime()) ? void 0 : timestamp.toISOString();
+	return Number.isNaN(timestamp.getTime()) ? void 0 : Temporal.Instant.fromEpochMilliseconds(timestamp.getTime()).toString({ fractionalSecondDigits: 3 });
 };
 //#endregion
 export { ReviewCommentCard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.25.2",
+  "version": "0.26.1",
   "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",
@@ -594,7 +594,8 @@
     "clsx": "^2.1.1",
     "input-otp": "^1.5.0",
     "lucide-react": "1.39.0",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.6.0",
+    "temporal-polyfill": "1.0.4"
   },
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",