@datum-cloud/datum-ui 0.5.0 → 0.6.0-alpha.a9a8815

package/dist/date-picker/index.mjs

@@ -1,3 +1,3 @@
 import { t as CalendarDatePicker } from "../calendar-date-picker-DWK94_DC.mjs";
-import { C as utcToLocalInputString, S as utcStringToZonedDate, _ as getBrowserTimezone, a as formatTimeRangeDisplay, b as getTimezoneOffset, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as formatUtcForDisplay, h as formatTimezoneLabel, i as formatSingleTimeDisplay, l as getPresetByShortcut, m as createTimezoneOption, n as TimeRangePicker, o as DEFAULT_PRESETS, p as CustomRangePanel, r as formatDateForInput, s as getDefaultPreset, t as toApiTimeRange, u as getPresetRange, v as getDefaultTimezoneOptions, w as zonedDateToUtcString, x as localInputStringToUtc, y as getShortTimezoneDisplay } from "../to-api-format-BnbRFYQI.mjs";
+import { C as utcToLocalInputString, S as utcStringToZonedDate, _ as getBrowserTimezone, a as formatTimeRangeDisplay, b as getTimezoneOffset, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as formatUtcForDisplay, h as formatTimezoneLabel, i as formatSingleTimeDisplay, l as getPresetByShortcut, m as createTimezoneOption, n as TimeRangePicker, o as DEFAULT_PRESETS, p as CustomRangePanel, r as formatDateForInput, s as getDefaultPreset, t as toApiTimeRange, u as getPresetRange, v as getDefaultTimezoneOptions, w as zonedDateToUtcString, x as localInputStringToUtc, y as getShortTimezoneDisplay } from "../to-api-format-Bh3c01gr.mjs";
 export { CustomRangePanel as AbsoluteRangePanel, CustomRangePanel, CalendarDatePicker, DEFAULT_PRESETS, QuickRangesPanel, TimeRangePicker, TimezoneSelector, createTimezoneOption, formatDateForInput, formatSingleTimeDisplay, formatTimeRangeDisplay, formatTimezoneLabel, formatUtcForDisplay, getBrowserTimezone, getDefaultPreset, getDefaultTimezoneOptions, getPresetByKey, getPresetByShortcut, getPresetRange, getShortTimezoneDisplay, getTimezoneOffset, localInputStringToUtc, toApiTimeRange, utcStringToZonedDate, utcToLocalInputString, zonedDateToUtcString };

package/dist/date-time-picker/index.mjs

@@ -0,0 +1,2 @@
+import { t as DateTimePicker } from "../date-time-picker-Bx_n4nEJ.mjs";
+export { DateTimePicker };

package/dist/date-time-picker-Bx_n4nEJ.mjs

@@ -0,0 +1,177 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-D3RrsMfQ.mjs";
+import { t as Calendar$1 } from "./calendar-DEkCw7I1.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-FJAcbYoH.mjs";
+import { CalendarIcon } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { formatInTimeZone, fromZonedTime, toZonedTime } from "date-fns-tz";
+//#region src/components/features/date-time-picker/utils/format.ts
+/**
+* Format date for display
+*/
+function formatDate(date) {
+	if (!date) return "";
+	return format(date, "PP");
+}
+//#endregion
+//#region src/components/features/date-time-picker/utils/timezone.ts
+/**
+* Get the browser's timezone
+*/
+function getBrowserTimezone() {
+	return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+/**
+* Convert local date + time to UTC ISO string
+* @param date - Date object (date part)
+* @param time - Time string in HH:mm format
+* @param timezone - IANA timezone (e.g., "America/New_York")
+* @returns UTC ISO string
+*/
+function localDateTimeToUtc(date, time, timezone) {
+	try {
+		const [hours, minutes] = time.split(":").map(Number);
+		return fromZonedTime(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`, timezone).toISOString();
+	} catch {
+		console.warn(`Invalid timezone "${timezone}", falling back to UTC`);
+		const [hours = 0, minutes = 0] = time.split(":").map(Number);
+		const combined = new Date(date);
+		combined.setUTCHours(hours, minutes, 0, 0);
+		return combined.toISOString();
+	}
+}
+/**
+* Convert UTC ISO string to local date + time
+* @param utcString - UTC ISO string
+* @param timezone - IANA timezone
+* @returns Object with date and time (HH:mm)
+*/
+function utcToLocalDateTime(utcString, timezone) {
+	try {
+		const utcDate = new Date(utcString);
+		const time = formatInTimeZone(utcDate, timezone, "HH:mm");
+		return {
+			date: toZonedTime(utcDate, timezone),
+			time
+		};
+	} catch {
+		console.warn(`Invalid timezone "${timezone}", falling back to UTC`);
+		const utcDate = new Date(utcString);
+		const hours = utcDate.getUTCHours();
+		const minutes = utcDate.getUTCMinutes();
+		return {
+			date: utcDate,
+			time: `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`
+		};
+	}
+}
+//#endregion
+//#region src/components/features/date-time-picker/date-time-picker.tsx
+const DEFAULT_TIMEZONE = getBrowserTimezone();
+function DateTimePicker({ ref, value, onChange, minDate, maxDate, disabledDates, timezone = DEFAULT_TIMEZONE, showTimezoneIndicator = false, placeholder = "Select date and time", disabled = false, className }) {
+	const initialState = React$1.useMemo(() => {
+		if (!value) return {
+			date: void 0,
+			time: ""
+		};
+		return utcToLocalDateTime(value, timezone);
+	}, [value, timezone]);
+	const [state, setState] = React$1.useState(initialState);
+	const prevValue = React$1.useRef(value);
+	const prevTimezone = React$1.useRef(timezone);
+	React$1.useEffect(() => {
+		if (value !== prevValue.current || timezone !== prevTimezone.current) {
+			prevValue.current = value;
+			prevTimezone.current = timezone;
+			setState(() => value ? utcToLocalDateTime(value, timezone) : {
+				date: void 0,
+				time: ""
+			});
+		}
+	}, [value, timezone]);
+	const handleDateChange = React$1.useCallback((newDate) => {
+		setState((prev) => ({
+			...prev,
+			date: newDate
+		}));
+	}, []);
+	const handleTimeChange = React$1.useCallback((e) => {
+		const newTime = e.target.value;
+		if (newTime && !/^\d{2}:\d{2}$/.test(newTime)) return;
+		setState((prev) => ({
+			...prev,
+			time: newTime
+		}));
+	}, []);
+	React$1.useEffect(() => {
+		if (state.date && state.time) {
+			const utcValue = localDateTimeToUtc(state.date, state.time, timezone);
+			onChange?.(utcValue);
+		}
+	}, [
+		state.date,
+		state.time,
+		timezone,
+		onChange
+	]);
+	const formatDisplayValue = () => {
+		if (!state.date) return placeholder;
+		if (state.time) return `${formatDate(state.date)} ${state.time}`;
+		return formatDate(state.date);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className,
+		children: /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				className: cn("w-full justify-start text-left font-normal", !state.date && "text-muted-foreground"),
+				disabled,
+				children: [
+					/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: formatDisplayValue()
+					}),
+					showTimezoneIndicator && state.date && state.time && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground ml-2 text-xs",
+						children: timezone
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "p-3",
+				children: [/* @__PURE__ */ jsx(Calendar$1, {
+					mode: "single",
+					selected: state.date,
+					onSelect: handleDateChange,
+					disabled: disabledDates,
+					fromDate: minDate,
+					toDate: maxDate
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-3",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "mb-1 block text-sm font-medium",
+						children: "Time"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "time",
+						"aria-label": "Select time",
+						value: state.time,
+						onChange: handleTimeChange,
+						disabled: disabled || !state.date,
+						className: cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1", "text-sm shadow-sm transition-colors", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50")
+					})]
+				})]
+			})
+		})] })
+	});
+}
+DateTimePicker.displayName = "DateTimePicker";
+//#endregion
+export { DateTimePicker as t };

package/dist/form/adapters/conform/index.mjs

@@ -0,0 +1,326 @@
+import { t as FormAdapterProvider } from "../../../adapter-context-rWveHhDd.mjs";
+import { t as getFieldConstraints } from "../../../get-field-constraints-CxfZ753o.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { FormProvider, getFormProps, getInputProps, useForm, useFormMetadata, useInputControl } from "@conform-to/react";
+import { isDirty, useFormData } from "@conform-to/react/future";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod/v4";
+//#region src/components/features/form/adapters/conform/conform-adapter.tsx
+/**
+* Shared context for the touched fields set.
+* Created in useConformCreateForm and consumed by useConformField.
+*/
+const TouchedFieldsContext = React$1.createContext({ current: /* @__PURE__ */ new Set() });
+/**
+* Resolve a Conform field metadata object by dot-notation path.
+*
+* Handles:
+* - Top-level fields: `"email"` -> `fields.email`
+* - Nested objects: `"address.city"` -> `fields.address.getFieldset().city`
+* - Array items: `"items.0.name"` -> `fields.items.getFieldList()[0].getFieldset().name`
+*/
+function resolveConformField(fields, name) {
+	const parts = name.split(".");
+	let current = fields;
+	for (let i = 0; i < parts.length; i++) {
+		const part = parts[i];
+		if (!current) break;
+		if (/^\d+$/.test(part)) {
+			const fieldList = current.getFieldList?.();
+			if (fieldList) {
+				const item = fieldList[Number.parseInt(part, 10)];
+				if (i < parts.length - 1 && item?.getFieldset) current = item.getFieldset();
+				else current = item;
+			} else current = current[part];
+		} else if (current[part] !== void 0) current = current[part];
+		else if (typeof current.getFieldset === "function") current = current.getFieldset()[part];
+		else current = void 0;
+	}
+	return current;
+}
+function convertFromString(value) {
+	if (value === void 0) return void 0;
+	if (Array.isArray(value)) return value[0];
+	if (value === "on") return true;
+	if (value.startsWith("[") && value.endsWith("]")) try {
+		return JSON.parse(value);
+	} catch {
+		return value;
+	}
+	return value;
+}
+function convertToString(value) {
+	if (typeof value === "boolean") return value ? "on" : "";
+	if (value === null || value === void 0) return "";
+	if (Array.isArray(value)) return JSON.stringify(value);
+	return String(value);
+}
+/** Create a Conform form instance and normalize it to the adapter interface. */
+function useConformCreateForm(props) {
+	const { schema, defaultValues, mode, id, onSubmit, formRef } = props;
+	const [form, fields] = useForm({
+		id,
+		defaultValue: defaultValues,
+		constraint: getZodConstraint(schema),
+		shouldValidate: {
+			onBlur: "onBlur",
+			onChange: "onInput",
+			onSubmit: "onSubmit"
+		}[mode],
+		shouldRevalidate: mode !== "onSubmit" ? "onInput" : void 0,
+		onValidate: ({ formData }) => parseWithZod(formData, { schema }),
+		onSubmit: onSubmit ? (event, context) => {
+			event.preventDefault();
+			const submission = context.submission;
+			if (submission?.status === "success") onSubmit(submission.value);
+		} : void 0
+	});
+	const constraints = React$1.useMemo(() => getFieldConstraints(schema), [schema]);
+	const formIsDirty = useFormData(formRef, (formData) => isDirty(formData, { defaultValue: defaultValues }) ?? false) ?? false;
+	const dirtyFields = useFormData(formRef, (formData) => {
+		const result = {};
+		const defaults = defaultValues ?? {};
+		for (const key of Object.keys(defaults)) {
+			const current = formData.get(key);
+			const defaultVal = defaults[key];
+			result[key] = current !== (defaultVal === true ? "on" : defaultVal === false || defaultVal === null || defaultVal === void 0 ? "" : String(defaultVal));
+		}
+		for (const key of formData.keys()) if (!(key in result) && !key.startsWith("$")) {
+			const current = formData.get(key);
+			result[key] = current !== "" && current !== null;
+		}
+		const dirty = {};
+		for (const [key, value] of Object.entries(result)) if (value) dirty[key] = true;
+		return dirty;
+	}) ?? {};
+	const isValid = useFormData(formRef, (formData) => {
+		return parseWithZod(formData, { schema })?.status === "success";
+	}) ?? false;
+	const touchedFieldsRef = React$1.useRef(/* @__PURE__ */ new Set());
+	const [touchedFields, setTouchedFields] = React$1.useState({});
+	React$1.useEffect(() => {
+		const formEl = formRef?.current;
+		if (!formEl) return;
+		const handleFocusOut = (event) => {
+			const target = event.target;
+			if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) {
+				const name = target.name;
+				if (name && !touchedFieldsRef.current.has(name)) {
+					touchedFieldsRef.current.add(name);
+					setTouchedFields((prev) => ({
+						...prev,
+						[name]: true
+					}));
+				}
+			}
+		};
+		formEl.addEventListener("focusout", handleFocusOut);
+		return () => formEl.removeEventListener("focusout", handleFocusOut);
+	}, [formRef]);
+	const formState = React$1.useMemo(() => ({
+		isDirty: formIsDirty,
+		isValid,
+		isSubmitted: false,
+		submitCount: 0,
+		dirtyFields,
+		touchedFields
+	}), [
+		formIsDirty,
+		isValid,
+		dirtyFields,
+		touchedFields
+	]);
+	const normalizedFields = React$1.useMemo(() => {
+		const result = {};
+		for (const [key, fieldMeta] of Object.entries(fields)) result[key] = {
+			id: fieldMeta.id ?? `${id ?? form.id}-${key}`,
+			errors: fieldMeta.errors ?? [],
+			required: constraints[key]?.required ?? false,
+			isDirty: dirtyFields[key] ?? false,
+			isTouched: touchedFields[key] ?? false
+		};
+		return result;
+	}, [
+		fields,
+		id,
+		form.id,
+		constraints,
+		dirtyFields,
+		touchedFields
+	]);
+	const conformFormProps = React$1.useMemo(() => getFormProps(form), [form]);
+	return React$1.useMemo(() => ({
+		id: form.id,
+		fields: normalizedFields,
+		formProps: conformFormProps,
+		formState,
+		submit: () => formRef?.current?.requestSubmit(),
+		reset: () => form.reset(),
+		getValues: () => {
+			if (!formRef?.current) return {};
+			const formData = new FormData(formRef.current);
+			const values = {};
+			for (const [key, value] of formData.entries()) values[key] = value;
+			return values;
+		},
+		raw: {
+			form,
+			fields,
+			touchedFieldsRef
+		}
+	}), [
+		form,
+		fields,
+		normalizedFields,
+		conformFormProps,
+		formState,
+		formRef
+	]);
+}
+/** Resolve a field by dot-notation path and return its normalized state. */
+function useConformField(name) {
+	const fieldMeta = resolveConformField(useFormMetadata().getFieldset(), name);
+	const touchedFieldsRef = React$1.use(TouchedFieldsContext);
+	const control = useInputControl(fieldMeta ?? {
+		name,
+		key: void 0,
+		id: name
+	});
+	if (!fieldMeta) throw new Error(`[Conform Adapter] Field "${name}" not found. Make sure the field name matches your schema.`);
+	const currentValue = convertFromString(control.value);
+	const defaultValue = convertFromString(fieldMeta.initialValue);
+	const fieldIsDirty = currentValue !== (defaultValue === void 0 ? "" : defaultValue);
+	const fieldIsTouched = touchedFieldsRef.current.has(name);
+	return React$1.useMemo(() => ({
+		name: fieldMeta.name,
+		id: fieldMeta.id,
+		errors: fieldMeta.errors ?? [],
+		required: fieldMeta.required ?? false,
+		isDirty: fieldIsDirty,
+		isTouched: fieldIsTouched,
+		value: currentValue,
+		change: (value) => control.change(convertToString(value)),
+		blur: () => control.blur(),
+		focus: () => control.focus(),
+		inputProps: getInputProps(fieldMeta, { type: "text" })
+	}), [
+		fieldMeta,
+		control,
+		currentValue,
+		fieldIsDirty,
+		fieldIsTouched
+	]);
+}
+/** Watch a single field's value reactively. */
+function useConformWatch(name) {
+	const fieldMeta = resolveConformField(useFormMetadata().getFieldset(), name);
+	if (!fieldMeta) return void 0;
+	return convertFromString(fieldMeta.value);
+}
+/** Watch multiple fields' values reactively. */
+function useConformWatchAll(names) {
+	const allFields = useFormMetadata().getFieldset();
+	return React$1.useMemo(() => {
+		const result = {};
+		for (const name of names) {
+			const fieldMeta = resolveConformField(allFields, name);
+			if (fieldMeta) result[name] = convertFromString(fieldMeta.value);
+		}
+		return result;
+	}, [allFields, names]);
+}
+/** Get field array helpers for a given array field name. */
+function useConformFieldArray(name) {
+	const formMeta = useFormMetadata();
+	const arrayField = resolveConformField(formMeta.getFieldset(), name);
+	const items = React$1.useMemo(() => {
+		if (!arrayField?.getFieldList) return [];
+		return arrayField.getFieldList().map((item, index) => ({
+			id: item.id ?? `${name}-${index}`,
+			key: item.key ?? `${name}-${index}`,
+			name: `${name}[${index}]`
+		}));
+	}, [arrayField, name]);
+	const arrayFieldName = arrayField?.name;
+	return {
+		items,
+		append: React$1.useCallback((defaultValue) => {
+			if (!arrayFieldName) return;
+			formMeta.insert({
+				name: arrayFieldName,
+				defaultValue
+			});
+		}, [formMeta, arrayFieldName]),
+		remove: React$1.useCallback((index) => {
+			if (!arrayFieldName) return;
+			formMeta.remove({
+				name: arrayFieldName,
+				index
+			});
+		}, [formMeta, arrayFieldName]),
+		move: React$1.useCallback((from, to) => {
+			if (!arrayFieldName) return;
+			formMeta.reorder({
+				name: arrayFieldName,
+				from,
+				to
+			});
+		}, [formMeta, arrayFieldName])
+	};
+}
+/**
+* Wraps children in Conform's FormProvider so that useFormMetadata() and
+* useInputControl() work inside field components.
+* Also provides the touched fields ref via context for useConformField.
+*/
+function ConformFormProviderWrapper({ instance, children }) {
+	const { form, touchedFieldsRef } = instance.raw;
+	return /* @__PURE__ */ jsx(FormProvider, {
+		context: form.context,
+		children: /* @__PURE__ */ jsx(TouchedFieldsContext, {
+			value: touchedFieldsRef,
+			children
+		})
+	});
+}
+/**
+* Conform.js adapter implementing the `FormAdapter` interface.
+*
+* Maps Conform's `useForm` / `useInputControl` / `useFormMetadata` APIs
+* to the normalized form adapter contract.
+*/
+const conformAdapter = {
+	name: "Conform",
+	useCreateForm: useConformCreateForm,
+	useField: useConformField,
+	useWatch: useConformWatch,
+	useWatchAll: useConformWatchAll,
+	useFieldArray: useConformFieldArray,
+	FormProvider: ConformFormProviderWrapper
+};
+//#endregion
+//#region src/components/features/form/adapters/conform/conform-provider.tsx
+/**
+* Wrap your application with this provider to use Conform.js as the form backend.
+*
+* @example
+* ```tsx
+* import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
+*
+* function App() {
+*   return (
+*     <ConformAdapter>
+*       <MyApp />
+*     </ConformAdapter>
+*   )
+* }
+* ```
+*/
+function ConformAdapter({ children }) {
+	return /* @__PURE__ */ jsx(FormAdapterProvider, {
+		adapter: conformAdapter,
+		children
+	});
+}
+//#endregion
+export { ConformAdapter, conformAdapter };