@helpwave/hightide 0.10.0 → 0.10.2

package/dist/index.mjs

@@ -9148,13 +9148,29 @@ var LocaleProvider = ({
   children,
   locale,
   defaultLocale,
-  onChangedLocale
+  defaultTimeZone,
+  defaultIs24HourFormat,
+  timeZone,
+  is24HourFormat,
+  onChangedLocale,
+  onChangedTimeZone,
+  onChangedIs24HourFormat
 }) => {
   const {
     value: storedLocale,
     setValue: setStoredLocale,
     deleteValue: deleteStoredLocale
   } = useStorage({ key: "locale", defaultValue: "system" });
+  const {
+    value: storedTimeZone,
+    setValue: setStoredTimeZone,
+    deleteValue: deleteStoredTimeZone
+  } = useStorage({ key: "timeZone", defaultValue: void 0 });
+  const {
+    value: storedIs24HourFormat,
+    setValue: setStoredIs24HourFormat,
+    deleteValue: deleteStoredIs24HourFormat
+  } = useStorage({ key: "is24HourFormat", defaultValue: void 0 });
   const { config } = useHightideConfig();
   const [localePreference, setLocalePreference] = useState4("system");
   const resolvedLocale = useMemo4(() => {
@@ -9177,10 +9193,32 @@ var LocaleProvider = ({
       setStoredLocale(locale);
     }
   }, [locale, deleteStoredLocale, setStoredLocale]);
+  const resolvedTimeZone = useMemo4(() => {
+    return timeZone ?? storedTimeZone ?? config.locale.defaultTimeZone ?? defaultTimeZone;
+  }, [timeZone, storedTimeZone, config.locale.defaultTimeZone, defaultTimeZone]);
+  useEffect4(() => {
+    if (timeZone === void 0) return;
+    setStoredTimeZone(timeZone);
+  }, [timeZone, setStoredTimeZone]);
+  const resolvedIs24HourFormat = useMemo4(() => {
+    return is24HourFormat ?? storedIs24HourFormat ?? config.locale.defaultIs24HourFormat ?? defaultIs24HourFormat ?? true;
+  }, [is24HourFormat, storedIs24HourFormat, config.locale.defaultIs24HourFormat, defaultIs24HourFormat]);
+  useEffect4(() => {
+    if (is24HourFormat === void 0) return;
+    setStoredIs24HourFormat(is24HourFormat);
+  }, [is24HourFormat, setStoredIs24HourFormat]);
   const onChangeRef = useEventCallbackStabilizer(onChangedLocale);
   useEffect4(() => {
     onChangeRef?.(resolvedLocale);
   }, [resolvedLocale, onChangeRef]);
+  const onChangeTimeZoneRef = useEventCallbackStabilizer(onChangedTimeZone);
+  useEffect4(() => {
+    onChangeTimeZoneRef?.(resolvedTimeZone);
+  }, [resolvedTimeZone, onChangeTimeZoneRef]);
+  const onChangeIs24HourFormatRef = useEventCallbackStabilizer(onChangedIs24HourFormat);
+  useEffect4(() => {
+    onChangeIs24HourFormatRef?.(resolvedIs24HourFormat);
+  }, [resolvedIs24HourFormat, onChangeIs24HourFormatRef]);
   useEffect4(() => {
     const localesToTestAgainst = Object.values(LocalizationUtil.locals);
     const detectLanguage = () => {
@@ -9204,6 +9242,30 @@ var LocaleProvider = ({
         console.warn("LocaleProvider: Attempting to change the locale while setting a fixed locale won't have any effect. Change the locale provided to the LocaleProvider instead.");
       }
       setStoredLocale(newLocale);
+    },
+    timeZone: resolvedTimeZone,
+    setTimeZone: (newTimeZone) => {
+      if (timeZone !== void 0) {
+        console.warn("LocaleProvider: Attempting to change the time zone while setting a fixed time zone won't have any effect. Change the timeZone provided to the LocaleProvider instead.");
+        return;
+      }
+      if (newTimeZone === void 0) {
+        deleteStoredTimeZone();
+      } else {
+        setStoredTimeZone(newTimeZone);
+      }
+    },
+    is24HourFormat: resolvedIs24HourFormat,
+    setIs24HourFormat: (newIs24HourFormat) => {
+      if (is24HourFormat !== void 0) {
+        console.warn("LocaleProvider: Attempting to change the hour format while setting a fixed hour format won't have any effect. Change the is24HourFormat provided to the LocaleProvider instead.");
+        return;
+      }
+      if (newIs24HourFormat === void 0) {
+        deleteStoredIs24HourFormat();
+      } else {
+        setStoredIs24HourFormat(newIs24HourFormat);
+      }
     }
   }, children });
 };
@@ -9214,6 +9276,20 @@ var useLocale = () => {
   }
   return context;
 };
+var useTimeZone = () => {
+  const context = useContext2(LocaleContext);
+  if (!context) {
+    throw new Error("useTimeZone must be used within LocaleContext. Try adding a LocaleProvider around your app.");
+  }
+  return { timeZone: context.timeZone, setTimeZone: context.setTimeZone };
+};
+var useDateTimeFormat = () => {
+  const context = useContext2(LocaleContext);
+  return {
+    is24HourFormat: context?.is24HourFormat ?? true,
+    timeZone: context?.timeZone
+  };
+};
 var useLanguage = () => {
   const context = useContext2(LocaleContext);
   if (!context) {
@@ -9984,9 +10060,11 @@ var SelectButton = forwardRef3(
       return () => unregister();
     }, [registerTrigger]);
     const disabled = !!disabledOverride || !!context.disabled;
+    const readOnly = !!context.readOnly;
     const invalid = context.invalid;
     const hasValue = context.selectedId !== null;
-    const selectedOption = context.idToOptionMap[context.selectedId] ?? null;
+    const hasInteractions = !readOnly && !disabled;
+    const selectedOption = context.selectedId ? context.idToOptionMap[context.selectedId] ?? null : null;
     return /* @__PURE__ */ jsxs9(
       "div",
       {
@@ -9994,12 +10072,13 @@ var SelectButton = forwardRef3(
         ref: innerRef,
         id: context.config.ids.trigger,
         onClick: (event) => {
+          if (!hasInteractions) return;
           props.onClick?.(event);
           context.toggleIsOpen();
         },
         onKeyDown: (event) => {
           props.onKeyDown?.(event);
-          if (disabled) return;
+          if (!hasInteractions) return;
           switch (event.key) {
             case "Enter":
             case " ":
@@ -10022,16 +10101,18 @@ var SelectButton = forwardRef3(
         "data-name": props["data-name"] ?? "select-button",
         "data-value": hasValue ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
         "data-invalid": invalid ? "" : void 0,
         tabIndex: disabled ? -1 : 0,
         role: "button",
         "aria-invalid": invalid,
         "aria-disabled": disabled,
+        "aria-readonly": readOnly,
         "aria-haspopup": "dialog",
         "aria-expanded": context.isOpen,
         "aria-controls": context.isOpen ? context.config.ids.content : void 0,
         children: [
-          /* @__PURE__ */ jsx17(SelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(selectedOption) ?? selectedOption.display : placeholder ?? translation("clickToSelect") }),
+          /* @__PURE__ */ jsx17(SelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(selectedOption) ?? selectedOption?.display : placeholder ?? translation("clickToSelect") }),
           !hideExpansionIcon && /* @__PURE__ */ jsx17(ExpansionIcon, { isExpanded: context.isOpen })
         ]
       }
@@ -15418,9 +15499,7 @@ var timesInSeconds = {
   day: 86400,
   week: 604800,
   monthImprecise: 2629800,
-  // 30.4375 days
   yearImprecise: 31557600
-  // 365.25 days
 };
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
 var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
@@ -15523,6 +15602,73 @@ var withTime = (datePart, timePart) => {
   );
   return out;
 };
+var zonedPartsFormatterCache = /* @__PURE__ */ new Map();
+var zonedPartsFormatter = (timeZone) => {
+  let formatter = zonedPartsFormatterCache.get(timeZone);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      hourCycle: "h23",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+    zonedPartsFormatterCache.set(timeZone, formatter);
+  }
+  return formatter;
+};
+var zonedParts = (date, timeZone) => {
+  const parts = {};
+  for (const part of zonedPartsFormatter(timeZone).formatToParts(date)) {
+    if (part.type !== "literal") {
+      parts[part.type] = part.value;
+    }
+  }
+  return {
+    year: Number(parts.year),
+    month: Number(parts.month),
+    day: Number(parts.day),
+    hour: Number(parts.hour) % 24,
+    minute: Number(parts.minute),
+    second: Number(parts.second),
+    millisecond: date.getMilliseconds()
+  };
+};
+var zoneOffsetMs = (date, timeZone) => {
+  const parts = zonedParts(date, timeZone);
+  const asUtc = Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second, parts.millisecond);
+  return asUtc - date.getTime();
+};
+function toZonedDate(date, timeZone) {
+  if (!date || !timeZone) {
+    return date;
+  }
+  const parts = zonedParts(date, timeZone);
+  return new Date(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second, parts.millisecond);
+}
+function fromZonedDate(date, timeZone) {
+  if (!date || !timeZone) {
+    return date;
+  }
+  const asUtc = Date.UTC(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds(),
+    date.getMilliseconds()
+  );
+  let offset = zoneOffsetMs(new Date(asUtc), timeZone);
+  const refined = zoneOffsetMs(new Date(asUtc - offset), timeZone);
+  if (refined !== offset) {
+    offset = refined;
+  }
+  return new Date(asUtc - offset);
+}
 var weeksForCalenderMonth = (date, weekStart, weeks = 6) => {
   const month = date.getMonth();
   const year = date.getFullYear();
@@ -15540,8 +15686,13 @@ var weeksForCalenderMonth = (date, weekStart, weeks = 6) => {
   }
   return equalSizeGroups(dayList, 7);
 };
-var formatAbsolute = (date, locale, format) => {
+var formatAbsolute = (date, locale, format, { timeZone, is24HourFormat = true } = {}) => {
   let options;
+  const timeOptions = {
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: is24HourFormat ? "h23" : "h12"
+  };
   switch (format) {
     case "date":
       options = {
@@ -15552,8 +15703,7 @@ var formatAbsolute = (date, locale, format) => {
       break;
     case "time":
       options = {
-        hour: "2-digit",
-        minute: "2-digit"
+        ...timeOptions
       };
       break;
     case "dateTime":
@@ -15561,12 +15711,11 @@ var formatAbsolute = (date, locale, format) => {
         year: "numeric",
         month: "2-digit",
         day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit"
+        ...timeOptions
       };
       break;
   }
-  return new Intl.DateTimeFormat(locale, options).format(date);
+  return new Intl.DateTimeFormat(locale, { ...options, timeZone }).format(date);
 };
 var formatRelative = (date, locale) => {
   const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
@@ -15643,6 +15792,9 @@ var DateUtils = {
   daysInMonth,
   sameTime,
   withTime,
+  zonedParts,
+  toZonedDate,
+  fromZonedDate,
   formatAbsolute,
   formatRelative,
   addDuration,
@@ -15653,9 +15805,6 @@ var DateUtils = {
   toInputString,
   tryParseDate,
   toOnlyDate: normalizeToDateOnly,
-  /**
-   * Normalizes a datetime by removing seconds and milliseconds.
-   */
   toDateTimeOnly: normalizeDatetime
 };
 
@@ -16522,13 +16671,15 @@ var TimePicker = ({
   initialValue = /* @__PURE__ */ new Date(),
   onValueChange,
   onEditComplete,
-  is24HourFormat = true,
+  is24HourFormat: is24HourFormatOverride,
   minuteIncrement = "5min",
   secondIncrement = "5s",
   millisecondIncrement = "100ms",
   precision = "minute",
   className
 }) => {
+  const { is24HourFormat: contextIs24HourFormat } = useDateTimeFormat();
+  const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat;
   const [value, setValue] = useControlledState({
     value: controlledValue,
     onValueChange,
@@ -17525,19 +17676,14 @@ var DateTimeField = forwardRef18(function DateTimeField2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const { locale: contextLocale } = useLocale();
+  const { locale: contextLocale, is24HourFormat: contextIs24HourFormat } = useLocale();
   const locale = localeOverride ?? contextLocale;
   const [value, setValue] = useControlledState({
     value: controlledValue,
     onValueChange,
     defaultValue: initialValue
   });
-  const is24Hour = useMemo30(() => {
-    if (is24HourFormat !== void 0) {
-      return is24HourFormat;
-    }
-    return !new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hour12;
-  }, [is24HourFormat, locale]);
+  const is24Hour = is24HourFormat ?? contextIs24HourFormat ?? true;
   const layout = useMemo30(
     () => buildSegmentLayout({ locale, mode, precision, is24HourFormat: is24Hour }),
     [locale, mode, precision, is24Hour]
@@ -17568,6 +17714,9 @@ var DateTimeField = forwardRef18(function DateTimeField2({
     return callback;
   };
   useEffect36(() => {
+    if (editStateRef.current.buffer) {
+      return;
+    }
     const shown = composeDate(editStateRef.current.values, layout, mode, is24Hour, value ?? void 0);
     if ((shown?.getTime() ?? null) === (value?.getTime() ?? null)) {
       return;
@@ -17579,6 +17728,9 @@ var DateTimeField = forwardRef18(function DateTimeField2({
   }, [value, layout, mode, is24Hour]);
   const apply = (next) => {
     setEditState(next);
+    if (next.buffer?.type === "year") {
+      return;
+    }
     const composed = composeDate(next.values, layout, mode, is24Hour, value ?? void 0);
     if (composed) {
       setValue(composed);
@@ -17675,6 +17827,10 @@ var DateTimeField = forwardRef18(function DateTimeField2({
   const onFieldBlur = (event) => {
     props.onBlur?.(event);
     const field = event.currentTarget;
+    const nextFocus = event.relatedTarget;
+    if (nextFocus instanceof Node && field.contains(nextFocus)) {
+      return;
+    }
     requestAnimationFrame(() => {
       if (field.contains(document.activeElement)) {
         return;
@@ -17683,6 +17839,9 @@ var DateTimeField = forwardRef18(function DateTimeField2({
       const composed = composeDate(editStateRef.current.values, layout, mode, is24Hour, value ?? void 0);
       if (composed) {
         setEditState({ values: decomposeDate(composed, layout, is24Hour), buffer: null });
+        if (composed.getTime() !== (value?.getTime() ?? null)) {
+          setValue(composed);
+        }
         onEditComplete?.(composed);
       } else {
         onEditComplete?.(value ?? null);
@@ -17757,6 +17916,7 @@ var DateTimeInput = forwardRef19(function DateTimeInput2({
   allowClear = true,
   containerProps,
   mode = "date",
+  timeZone: timeZoneOverride,
   precision = "minute",
   pickerProps,
   outsideClickCloses = true,
@@ -17777,6 +17937,8 @@ var DateTimeInput = forwardRef19(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
+  const { timeZone: contextTimeZone } = useLocale();
+  const timeZone = timeZoneOverride ?? contextTimeZone;
   const [isOpen, setIsOpen] = useState31(false);
   const [state, setState] = useControlledState({
     value,
@@ -17788,6 +17950,8 @@ var DateTimeInput = forwardRef19(function DateTimeInput2({
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
+  const toZoned = useCallback31((date) => DateUtils.toZonedDate(date, timeZone), [timeZone]);
+  const fromZoned = useCallback31((date) => DateUtils.fromZonedDate(date, timeZone), [timeZone]);
   const generatedId = useId16();
   const ids = useMemo31(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
@@ -17834,7 +17998,7 @@ var DateTimeInput = forwardRef19(function DateTimeInput2({
             DateTimeField,
             {
               ref: fieldRef,
-              value: state,
+              value: toZoned(state),
               mode,
               precision,
               is24HourFormat,
@@ -17842,8 +18006,8 @@ var DateTimeInput = forwardRef19(function DateTimeInput2({
               readOnly,
               invalid,
               required,
-              onValueChange: setState,
-              onEditComplete,
+              onValueChange: (next) => setState(fromZoned(next)),
+              onEditComplete: (next) => onEditComplete?.(fromZoned(next)),
               "aria-labelledby": props["aria-labelledby"],
               "aria-describedby": props["aria-describedby"],
               className: "grow"
@@ -17908,18 +18072,19 @@ var DateTimeInput = forwardRef19(function DateTimeInput2({
         children: /* @__PURE__ */ jsx73(
           DateTimePickerDialog,
           {
-            value: dialogValue,
+            value: toZoned(dialogValue),
             allowRemove,
-            onValueChange: setDialogValue,
+            onValueChange: (value2) => setDialogValue(fromZoned(value2)),
             onEditComplete: (value2) => {
-              setState(value2);
-              onEditComplete?.(value2);
+              const absolute = fromZoned(value2);
+              setState(absolute);
+              onEditComplete?.(absolute);
               changeOpenWrapper(false);
             },
             pickerProps,
             mode,
-            start,
-            end,
+            start: toZoned(start ?? null) ?? void 0,
+            end: toZoned(end ?? null) ?? void 0,
             weekStart,
             markToday,
             is24HourFormat,
@@ -18446,8 +18611,10 @@ var MultiSelectButton = forwardRef21(function MultiSelectButton2({
     return () => unregister();
   }, [registerTrigger]);
   const disabled = !!disabledOverride || !!context.disabled;
+  const readOnly = !!context.readOnly;
   const invalid = context.invalid;
   const hasValue = context.value.length > 0;
+  const hasInteractions = !readOnly && !disabled;
   const selectedOptions = context.selectedIds.map((id2) => context.idToOptionMap[id2]).filter(Boolean);
   return /* @__PURE__ */ jsxs45(
     "div",
@@ -18456,12 +18623,13 @@ var MultiSelectButton = forwardRef21(function MultiSelectButton2({
       ref: innerRef,
       id: context.config.ids.trigger,
       onClick: (event) => {
+        if (!hasInteractions) return;
         props.onClick?.(event);
         context.toggleIsOpen();
       },
       onKeyDown: (event) => {
         props.onKeyDown?.(event);
-        if (disabled) return;
+        if (!hasInteractions) return;
         switch (event.key) {
           case "Enter":
           case " ":
@@ -18484,11 +18652,13 @@ var MultiSelectButton = forwardRef21(function MultiSelectButton2({
       "data-name": props["data-name"] ?? "multi-select-button",
       "data-value": hasValue ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       tabIndex: disabled ? -1 : 0,
       role: "button",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
+      "aria-readonly": readOnly,
       "aria-haspopup": "dialog",
       "aria-expanded": context.isOpen,
       "aria-controls": context.isOpen ? context.config.ids.content : void 0,
@@ -20767,7 +20937,9 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
     return () => unregister();
   }, [registerTrigger]);
   const disabled = !!props?.disabled || !!context.disabled;
+  const readOnly = !!context.readOnly;
   const invalid = context.invalid;
+  const hasInteractions = !readOnly && !disabled;
   const selectedOptions = context.selectedIds.map((oid) => context.idToOptionMap[oid]).filter(Boolean);
   return /* @__PURE__ */ jsxs61(
     "div",
@@ -20777,14 +20949,17 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
       onClick: (event) => {
         props.onClick?.(event);
         if (event.defaultPrevented) return;
+        if (!hasInteractions) return;
         context.toggleIsOpen();
       },
       "data-name": props["data-name"] ?? "multi-select-chip-display-button",
       "data-value": context.value.length > 0 ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
       "aria-disabled": disabled,
+      "aria-readonly": readOnly,
       children: [
         selectedOptions.map((opt) => /* @__PURE__ */ jsxs61("div", { "data-name": "multi-select-chip-display-chip", children: [
           opt.display,
@@ -20792,6 +20967,7 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
             IconButton,
             {
               tooltip: translation("remove"),
+              disabled: !hasInteractions,
               onClick: (e) => {
                 context.toggleSelection(opt.id, false);
                 e.preventDefault();
@@ -20808,11 +20984,14 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
           IconButton,
           {
             id: context.config.ids.trigger,
+            disabled: !hasInteractions,
             onClick: (event) => {
               event.stopPropagation();
+              if (!hasInteractions) return;
               context.toggleIsOpen();
             },
             onKeyDown: (event) => {
+              if (!hasInteractions) return;
               switch (event.key) {
                 case "ArrowDown":
                   context.setIsOpen(true, "first");
@@ -21452,10 +21631,18 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
 import { jsx as jsx103 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
-  mode = "daysFromToday"
+  mode = "daysFromToday",
+  is24HourFormat: is24HourFormatOverride,
+  timeZone: timeZoneOverride
 }) => {
   const translation = useHightideTranslation();
-  const difference = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf();
+  const { locale } = useLocale();
+  const { is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useDateTimeFormat();
+  const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat;
+  const timeZone = timeZoneOverride ?? contextTimeZone;
+  const zonedDate = DateUtils.toZonedDate(date, timeZone);
+  const zonedNow = DateUtils.toZonedDate(/* @__PURE__ */ new Date(), timeZone);
+  const difference = new Date(zonedNow).setHours(0, 0, 0, 0).valueOf() - new Date(zonedDate).setHours(0, 0, 0, 0).valueOf();
   const isBefore = difference > 0;
   const differenceInDays = Math.floor(Math.abs(difference) / (1e3 * 3600 * 24));
   let displayString;
@@ -21482,9 +21669,15 @@ var TimeDisplay = ({
   };
   let fullString;
   if (mode === "daysFromToday") {
-    fullString = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")} - ${displayString}`;
+    const timeString = new Intl.DateTimeFormat(locale, {
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: is24HourFormat ? "h23" : "h12",
+      timeZone
+    }).format(date);
+    fullString = `${timeString} - ${displayString}`;
   } else {
-    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
+    fullString = `${zonedDate.getDate()}. ${monthToTranslation[zonedDate.getMonth()]} ${zonedDate.getFullYear()}`;
   }
   return /* @__PURE__ */ jsx103("span", { children: fullString });
 };
@@ -21499,29 +21692,36 @@ var FlexibleDateTimeInput = forwardRef31(function FlexibleDateTimeInput2({
   initialValue,
   onValueChange,
   fixedTime: fixedTimeOverride,
+  timeZone: timeZoneOverride,
   actions = [],
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
+  const { timeZone: contextTimeZone } = useLocale();
+  const timeZone = timeZoneOverride ?? contextTimeZone;
   const fixedTime = fixedTimeOverride ?? new Date(1970, 0, 1, 23, 59, 59, 999);
   const [value, setValue] = useControlledState({
     value: controlledValue,
     onValueChange,
     defaultValue: initialValue
   });
+  const zoned = (date) => DateUtils.toZonedDate(date, timeZone);
+  const unzoned = (date) => DateUtils.fromZonedDate(date, timeZone);
+  const hasFixedTime = (date) => DateUtils.sameTime(zoned(date), fixedTime, true, true);
   const [mode, setMode] = useState42(() => {
-    if (value && !DateUtils.sameTime(value, fixedTime, true, true)) {
+    if (value && !hasFixedTime(value)) {
       return "dateTime";
     }
     return defaultMode;
   });
-  const toDate = (date) => DateUtils.withTime(date, fixedTime);
-  const toDateTime = (date) => DateUtils.sameTime(date, fixedTime, true, true) ? DateUtils.withTime(date, /* @__PURE__ */ new Date()) : date;
+  const toDate = (date) => unzoned(DateUtils.withTime(zoned(date), fixedTime));
+  const toDateTime = (date) => hasFixedTime(date) ? unzoned(DateUtils.withTime(zoned(date), zoned(/* @__PURE__ */ new Date()))) : date;
   return /* @__PURE__ */ jsx104(
     DateTimeInput,
     {
       ...props,
       ref: forwardedRef,
+      timeZone,
       mode,
       value,
       onValueChange: (next) => {
@@ -21860,26 +22060,46 @@ var CheckboxProperty = ({
 import { CalendarDays } from "lucide-react";
 import { jsx as jsx110 } from "react/jsx-runtime";
 var DateProperty = ({
+  name,
   value,
   onValueChange,
   onEditComplete,
+  onRemove,
+  onValueClear,
+  required,
   readOnly,
+  allowClear = true,
+  allowRemove = true,
   type = "dateTime",
-  ...baseProps
+  className,
+  ...inputProps
 }) => {
   const hasValue = !!value;
   return /* @__PURE__ */ jsx110(
     PropertyBase,
     {
-      ...baseProps,
+      name,
+      required,
+      readOnly,
+      allowClear,
+      allowRemove,
+      onRemove,
+      onValueClear: onValueClear ?? (() => {
+        onValueChange?.(null);
+        onEditComplete?.(null);
+      }),
       hasValue,
       icon: /* @__PURE__ */ jsx110(CalendarDays, { size: 24 }),
+      className,
       children: ({ invalid }) => /* @__PURE__ */ jsx110(
         DateTimeInput,
         {
+          ...inputProps,
           value,
           mode: type,
+          required,
           readOnly,
+          allowClear: false,
           onValueChange,
           onEditComplete,
           "data-name": "property-input",
@@ -22301,21 +22521,23 @@ var useRerender = () => {
 
 // src/hooks/useUpdatingDateString.ts
 import { useEffect as useEffect58, useState as useState48 } from "react";
-var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
-  const { locale: contextLocale } = useLocale();
+var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
+  const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
   const locale = localeOverride ?? contextLocale;
+  const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat ?? true;
+  const timeZone = timeZoneOverride ?? contextTimeZone;
   const [dateAndTimeStrings, setDateAndTimeStrings] = useState48({
     compareDate: date,
-    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
     relative: DateUtils.formatRelative(date, locale)
   });
   useEffect58(() => {
     setDateAndTimeStrings({
       compareDate: date,
-      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
       relative: DateUtils.formatRelative(date, locale)
     });
-  }, [date, absoluteFormat, locale]);
+  }, [date, absoluteFormat, locale, is24HourFormat, timeZone]);
   useEffect58(() => {
     let timeoutId;
     const startTimer = () => {
@@ -22332,14 +22554,14 @@ var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date
       timeoutId = setInterval(() => {
         setDateAndTimeStrings({
           compareDate: date,
-          absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+          absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
           relative: DateUtils.formatRelative(date, locale)
         });
       }, delayInSeconds * 1e3 / 2);
     };
     startTimer();
     return () => clearInterval(timeoutId);
-  }, [absoluteFormat, date, locale]);
+  }, [absoluteFormat, date, locale, is24HourFormat, timeZone]);
   return {
     absolute: dateAndTimeStrings.absolute,
     relative: dateAndTimeStrings.relative
@@ -22901,6 +23123,7 @@ export {
   useComboboxContext,
   useControlledState,
   useCreateForm,
+  useDateTimeFormat,
   useDelay,
   useDialogContext,
   useDrawerContext,
@@ -22948,6 +23171,7 @@ export {
   useTableStateContext,
   useTableStateWithoutSizingContext,
   useTheme,
+  useTimeZone,
   useTooltip,
   useTransitionState,
   useTranslatedValidators,