@datum-cloud/datum-ui 0.8.0 → 0.9.0

package/dist/{themes-CAiN4b6G.mjs → themes-08-znmBI.mjs}

@@ -1,9 +1,9 @@
-import * as React$1 from "react";
+import * as React from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/components/themes/client-only.tsx
 function ClientOnly({ children, fallback = null }) {
-	const [hasMounted, setHasMounted] = React$1.useState(false);
-	React$1.useEffect(() => {
+	const [hasMounted, setHasMounted] = React.useState(false);
+	React.useEffect(() => {
 		setHasMounted(true);
 	}, []);
 	if (!hasMounted) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
@@ -40,7 +40,7 @@ function script(attribute, storageKey, defaultTheme, forcedTheme, themes, value,
 }
 //#endregion
 //#region src/components/themes/theme-script.tsx
-const ThemeScript = React$1.memo(({ forcedTheme, storageKey = "theme", attribute = "data-theme", enableSystem = true, enableColorScheme = true, defaultTheme = "system", value, themes = ["light", "dark"], nonce, scriptProps }) => {
+const ThemeScript = React.memo(({ forcedTheme, storageKey = "theme", attribute = "data-theme", enableSystem = true, enableColorScheme = true, defaultTheme = "system", value, themes = ["light", "dark"], nonce, scriptProps }) => {
 	const scriptArgs = JSON.stringify([
 		attribute,
 		storageKey,
@@ -63,7 +63,7 @@ const ThemeScript = React$1.memo(({ forcedTheme, storageKey = "theme", attribute
 const colorSchemes = ["light", "dark"];
 const MEDIA = "(prefers-color-scheme: dark)";
 const isServer = typeof window === "undefined";
-const ThemeContext = React$1.createContext(void 0);
+const ThemeContext = React.createContext(void 0);
 const defaultContext = {
 	setTheme: (_) => {},
 	themes: []
@@ -73,20 +73,20 @@ function saveToLS(storageKey, value) {
 		localStorage.setItem(storageKey, value);
 	} catch {}
 }
-const useTheme = () => React$1.use(ThemeContext) ?? defaultContext;
+const useTheme = () => React.use(ThemeContext) ?? defaultContext;
 function ThemeProvider(props) {
-	if (React$1.use(ThemeContext)) return /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
+	if (React.use(ThemeContext)) return /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
 	return /* @__PURE__ */ jsx(ThemeImpl, { ...props });
 }
 const defaultThemes = ["light", "dark"];
 function ThemeImpl({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = "theme", themes = defaultThemes, defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, scriptProps: _scriptProps }) {
-	const [theme, setThemeState] = React$1.useState(() => isServer ? defaultTheme : getTheme(storageKey, defaultTheme));
-	const [resolvedTheme, setResolvedTheme] = React$1.useState(() => {
+	const [theme, setThemeState] = React.useState(() => isServer ? defaultTheme : getTheme(storageKey, defaultTheme));
+	const [resolvedTheme, setResolvedTheme] = React.useState(() => {
 		if (isServer) return defaultTheme === "dark" ? "dark" : "light";
 		return theme === "system" ? getSystemTheme() : theme;
 	});
 	const attrs = !value ? themes : Object.values(value);
-	const applyTheme = React$1.useCallback((theme) => {
+	const applyTheme = React.useCallback((theme) => {
 		let resolved = theme;
 		if (!resolved) return;
 		if (theme === "system" && enableSystem) resolved = getSystemTheme();
@@ -109,7 +109,7 @@ function ThemeImpl({ forcedTheme, disableTransitionOnChange = false, enableSyste
 		}
 		enable?.();
 	}, [nonce]);
-	const setTheme = React$1.useCallback((value) => {
+	const setTheme = React.useCallback((value) => {
 		if (typeof value === "function") setThemeState((prevTheme) => {
 			const newTheme = value(prevTheme);
 			saveToLS(storageKey, newTheme);
@@ -120,18 +120,18 @@ function ThemeImpl({ forcedTheme, disableTransitionOnChange = false, enableSyste
 			saveToLS(storageKey, value);
 		}
 	}, []);
-	const handleMediaQuery = React$1.useCallback((e) => {
+	const handleMediaQuery = React.useCallback((e) => {
 		setResolvedTheme(getSystemTheme(e));
 		if (theme === "system" && enableSystem && !forcedTheme) applyTheme("system");
 	}, [theme, forcedTheme]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (typeof window === "undefined") return;
 		const media = window.matchMedia(MEDIA);
 		media.addListener(handleMediaQuery);
 		handleMediaQuery(media);
 		return () => media.removeListener(handleMediaQuery);
 	}, [handleMediaQuery]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (typeof window === "undefined") return;
 		const handleStorage = (e) => {
 			if (e.key !== storageKey) return;
@@ -141,11 +141,11 @@ function ThemeImpl({ forcedTheme, disableTransitionOnChange = false, enableSyste
 		window.addEventListener("storage", handleStorage);
 		return () => window.removeEventListener("storage", handleStorage);
 	}, [setTheme]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (typeof window !== "undefined") applyTheme(forcedTheme ?? theme);
 	}, [forcedTheme, theme]);
 	return /* @__PURE__ */ jsx(ThemeContext, {
-		value: React$1.useMemo(() => ({
+		value: React.useMemo(() => ({
 			theme,
 			setTheme,
 			forcedTheme,

package/dist/time-input-9LdNL0Us.mjs

@@ -0,0 +1,196 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-Rw1xI-k9.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-D-t9bxSN.mjs";
+import { n as OptionList, t as useOptionPicker } from "./use-option-picker-DV5O68eV.mjs";
+import { A as zonedDateToIso, _ as formatTimeLabel, h as dateToHHmm, k as isoToZonedDate, w as usePickerContext, y as parseTimeString } from "./default-footer-DbpemJVl.mjs";
+import { Clock } from "lucide-react";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/picker/hooks/use-time-slots.ts
+function timeToMinutes(t) {
+	const parsed = parseTimeString(t);
+	return parsed ? parsed.h * 60 + parsed.m : null;
+}
+function minutesToTime(total) {
+	const h = Math.floor(total / 60);
+	const m = total % 60;
+	return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+/**
+* Generate an `OptionPickerOption[]` of HH:mm slots for the slot-dropdown UI.
+*
+* Slots are produced in pure minute arithmetic — DST is not considered (slots
+* are wall-clock times of day, independent of any specific calendar date).
+*/
+function useTimeSlots({ min, max, step = 15, hourCycle = "24" }) {
+	return useMemo(() => {
+		const minMinutes = min ? timeToMinutes(min) ?? 0 : 0;
+		const maxMinutes = max ? timeToMinutes(max) ?? 1439 : 1439;
+		const slots = [];
+		for (let m = minMinutes; m <= maxMinutes; m += step) {
+			if (m >= 1440) break;
+			const value = minutesToTime(m);
+			slots.push({
+				value,
+				label: formatTimeLabel(value, hourCycle)
+			});
+		}
+		return slots;
+	}, [
+		min,
+		max,
+		step,
+		hourCycle
+	]);
+}
+//#endregion
+//#region src/components/features/picker/components/time-input.tsx
+function combineDateAndTime(dateIso, time, timezone) {
+	const d = isoToZonedDate(dateIso, timezone);
+	const parsed = parseTimeString(time);
+	if (!parsed) return dateIso;
+	d.setHours(parsed.h, parsed.m, 0, 0);
+	return zonedDateToIso(d, timezone);
+}
+function PickerTimeInput({ target, min, max, className }) {
+	const { mode, timezone, hourCycle, step, state, actions } = usePickerContext();
+	let effectiveMin = min;
+	if (target === "range-to" && mode === "time-range") {
+		const fromValue = state.pendingValue?.from;
+		if (fromValue) effectiveMin = min && min > fromValue ? min : fromValue;
+	}
+	const slots = useTimeSlots({
+		min: effectiveMin,
+		max,
+		step,
+		hourCycle
+	});
+	let currentValue;
+	let embeddedDisabled = false;
+	if (target === "single" && mode === "time") currentValue = state.pendingValue ?? void 0;
+	else if ((target === "range-from" || target === "range-to") && mode === "time-range") {
+		const v = state.pendingValue;
+		currentValue = target === "range-from" ? v?.from : v?.to;
+	} else if (target === "embedded-from" || target === "embedded-to") {
+		if (mode === "datetime-range" || mode === "date-range-time") {
+			const v = state.pendingValue;
+			const iso = target === "embedded-from" ? v?.from : v?.to;
+			currentValue = iso ? dateToHHmm(isoToZonedDate(iso, timezone)) : void 0;
+			embeddedDisabled = v === null;
+		} else if (mode === "datetime") {
+			const iso = state.pendingValue;
+			currentValue = iso ? dateToHHmm(isoToZonedDate(iso, timezone)) : void 0;
+			embeddedDisabled = iso === null;
+		}
+	}
+	const handleSelect = (newTime) => {
+		if (target === "single" && mode === "time") {
+			actions.setSingleTime(newTime);
+			return;
+		}
+		if (mode === "time-range") {
+			const v = state.pendingValue ?? {
+				from: "00:00",
+				to: "23:59"
+			};
+			const next = target === "range-from" ? {
+				from: newTime,
+				to: v.to
+			} : {
+				from: v.from,
+				to: newTime
+			};
+			actions.setTimeRange(next);
+			return;
+		}
+		if (mode === "datetime-range" || mode === "date-range-time") {
+			const v = state.pendingValue;
+			if (!v) return;
+			const next = target === "embedded-from" ? {
+				from: combineDateAndTime(v.from, newTime, timezone),
+				to: v.to
+			} : {
+				from: v.from,
+				to: combineDateAndTime(v.to, newTime, timezone)
+			};
+			actions.setDatetimeRange(next);
+			return;
+		}
+		if (mode === "datetime" && (target === "embedded-from" || target === "embedded-to")) {
+			const v = state.pendingValue;
+			if (!v) return;
+			actions.setSingleDatetime(combineDateAndTime(v, newTime, timezone));
+		}
+	};
+	if (target === "single" || target === "range-from" || target === "range-to") return /* @__PURE__ */ jsx(InlineSlotList, {
+		slots,
+		value: currentValue,
+		onSelect: handleSelect,
+		className
+	});
+	return /* @__PURE__ */ jsx(EmbeddedSlotInput, {
+		label: currentValue ? formatTimeLabel(currentValue, hourCycle) : "— : —",
+		slots,
+		value: currentValue,
+		onSelect: handleSelect,
+		disabled: embeddedDisabled,
+		className
+	});
+}
+PickerTimeInput.displayName = "Picker.TimeInput";
+function InlineSlotList({ slots, value, onSelect, className }) {
+	const [open, setOpen] = useState(true);
+	return /* @__PURE__ */ jsx(OptionList, {
+		picker: useOptionPicker({
+			multiple: false,
+			options: slots,
+			value,
+			onValueChange: (next) => {
+				if (typeof next === "string") onSelect(next);
+			},
+			open,
+			onOpenChange: setOpen
+		}),
+		disableSearch: slots.length <= 48,
+		searchPlaceholder: "Search time...",
+		listClassName: cn("max-h-[240px]", className)
+	});
+}
+function EmbeddedSlotInput({ label, slots, value, onSelect, disabled = false, className }) {
+	const [open, setOpen] = useState(false);
+	const picker = useOptionPicker({
+		multiple: false,
+		options: slots,
+		value,
+		onValueChange: (next) => {
+			if (typeof next === "string") {
+				onSelect(next);
+				setOpen(false);
+			}
+		},
+		open,
+		onOpenChange: disabled ? () => {} : setOpen
+	});
+	return /* @__PURE__ */ jsx(ResponsivePopover, {
+		open,
+		onOpenChange: disabled ? () => {} : setOpen,
+		sheetTitle: "Select time",
+		trigger: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			disabled,
+			className: cn("h-8 gap-1.5 px-2 text-xs font-normal", className),
+			children: [/* @__PURE__ */ jsx(Clock, { className: "size-3.5 opacity-60" }), /* @__PURE__ */ jsx("span", { children: label })]
+		}),
+		align: "start",
+		contentClassName: "w-[200px]",
+		children: /* @__PURE__ */ jsx(OptionList, {
+			picker,
+			disableSearch: slots.length <= 48,
+			searchPlaceholder: "Search time...",
+			listClassName: "max-h-[240px]"
+		})
+	});
+}
+//#endregion
+export { useTimeSlots as n, PickerTimeInput as t };

package/dist/time-picker/index.mjs

@@ -1,2 +1,2 @@
-import { t as TimePicker } from "../time-picker-BZF5jbF6.mjs";
+import { t as TimePicker } from "../time-picker-C840fLl6.mjs";
 export { TimePicker };

package/dist/time-picker-B-vpUClR.mjs

@@ -0,0 +1,45 @@
+import { S as PickerContent, c as PickerTrigger, l as Picker, s as formatPickerValue, t as DefaultFooter } from "./default-footer-DbpemJVl.mjs";
+import { t as PickerTimeInput } from "./time-input-9LdNL0Us.mjs";
+import { Clock } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/features/picker/wrappers/time-picker.tsx
+const DEFAULT_TIME_ICON = /* @__PURE__ */ jsx(Clock, { className: "text-muted-foreground size-4 shrink-0" });
+function TimePicker({ value, onChange, placeholder = "Pick a time", clearable = true, responsive = true, sheetTitle = "Pick a time", step = 15, hourCycle, minTime, maxTime, timeFormat, triggerLabel, icon, disabled, className, triggerClassName, popoverClassName, id, sheetDescription, modal, commit }) {
+	return /* @__PURE__ */ jsx(Picker.Root, {
+		mode: "time",
+		value,
+		onChange,
+		commit,
+		responsive,
+		step,
+		hourCycle,
+		children: /* @__PURE__ */ jsx(PickerContent, {
+			trigger: /* @__PURE__ */ jsx(PickerTrigger, {
+				placeholder,
+				clearable,
+				disabled,
+				className,
+				triggerClassName,
+				id,
+				icon: icon ?? DEFAULT_TIME_ICON,
+				children: (v) => triggerLabel ? triggerLabel(v) : formatPickerValue(v, "time", {
+					hourCycle,
+					timeFormat
+				})
+			}),
+			sheetTitle,
+			sheetDescription,
+			modal,
+			contentClassName: popoverClassName,
+			footer: /* @__PURE__ */ jsx(DefaultFooter, {}),
+			children: /* @__PURE__ */ jsx(PickerTimeInput, {
+				target: "single",
+				min: minTime,
+				max: maxTime
+			})
+		})
+	});
+}
+TimePicker.displayName = "TimePicker";
+//#endregion
+export { TimePicker as t };

package/dist/time-picker-C840fLl6.mjs

@@ -0,0 +1,49 @@
+import { t as useDeprecationWarning } from "./use-deprecation-warning-Dy_DOyLu.mjs";
+import { t as TimePicker$1 } from "./time-picker-B-vpUClR.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/time-picker/time-picker.tsx
+const STEP_VALUES = [
+	1,
+	5,
+	10,
+	15,
+	30,
+	60
+];
+function normalizeStep(step) {
+	if (step === void 0) return 15;
+	return STEP_VALUES.includes(step) ? step : 15;
+}
+/**
+* @deprecated Use `TimePicker` from `@datum-cloud/datum-ui/picker` instead.
+* This adapter shim ships through 0.10.x and is removed in 1.0.0. See
+* `picker-migration.mdx`.
+*/
+function TimePicker({ value, onChange, min, max, step, placeholder, disabled, className, id, name, responsive = true, sheetTitle }) {
+	useDeprecationWarning("TimePicker (legacy)", "TimePicker");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TimePicker$1, {
+		value: value ?? null,
+		onChange: (next) => {
+			onChange?.(next ?? "");
+		},
+		placeholder: placeholder ?? "Select time",
+		sheetTitle: sheetTitle ?? placeholder ?? "Select time",
+		responsive,
+		disabled,
+		className,
+		triggerClassName: className,
+		id,
+		step: normalizeStep(step),
+		hourCycle: "12",
+		minTime: min,
+		maxTime: max
+	}), name && /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: value ?? "",
+		readOnly: true
+	})] });
+}
+TimePicker.displayName = "TimePicker";
+//#endregion
+export { TimePicker as t };

package/dist/timezone-indicator-COoeMKKs.mjs

@@ -0,0 +1,27 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { E as formatTimezoneLabel, L as isTimeBearingMode, w as usePickerContext } from "./default-footer-DbpemJVl.mjs";
+import { Globe } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/picker/components/timezone-indicator.tsx
+function PickerTimezoneIndicator({ className, variant = "full" }) {
+	const { mode, timezone, hideTimezone } = usePickerContext();
+	if (hideTimezone) return null;
+	if (!isTimeBearingMode(mode)) return null;
+	if (variant === "compact") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "picker-tz-indicator",
+		className: cn("text-muted-foreground text-xs", className),
+		children: timezone
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "picker-tz-indicator",
+		className: cn("text-muted-foreground bg-muted/30 flex items-center gap-2 px-3 py-2 text-xs", className),
+		children: [/* @__PURE__ */ jsx(Globe, { className: "size-3.5" }), /* @__PURE__ */ jsxs("span", { children: [
+			"Times shown in",
+			" ",
+			formatTimezoneLabel(timezone)
+		] })]
+	});
+}
+PickerTimezoneIndicator.displayName = "Picker.TimezoneIndicator";
+//#endregion
+export { PickerTimezoneIndicator as t };