@helpwave/hightide 0.10.0 → 0.10.1

package/dist/index.js

@@ -7129,6 +7129,7 @@ __export(index_exports, {
   useComboboxContext: () => useComboboxContext,
   useControlledState: () => useControlledState,
   useCreateForm: () => useCreateForm,
+  useDateTimeFormat: () => useDateTimeFormat,
   useDelay: () => useDelay,
   useDialogContext: () => useDialogContext,
   useDrawerContext: () => useDrawerContext,
@@ -7176,6 +7177,7 @@ __export(index_exports, {
   useTableStateContext: () => useTableStateContext,
   useTableStateWithoutSizingContext: () => useTableStateWithoutSizingContext,
   useTheme: () => useTheme,
+  useTimeZone: () => useTimeZone,
   useTooltip: () => useTooltip,
   useTransitionState: () => useTransitionState,
   useTranslatedValidators: () => useTranslatedValidators,
@@ -9444,13 +9446,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] = (0, import_react8.useState)("system");
   const resolvedLocale = (0, import_react8.useMemo)(() => {
@@ -9473,10 +9491,32 @@ var LocaleProvider = ({
       setStoredLocale(locale);
     }
   }, [locale, deleteStoredLocale, setStoredLocale]);
+  const resolvedTimeZone = (0, import_react8.useMemo)(() => {
+    return timeZone ?? storedTimeZone ?? config.locale.defaultTimeZone ?? defaultTimeZone;
+  }, [timeZone, storedTimeZone, config.locale.defaultTimeZone, defaultTimeZone]);
+  (0, import_react8.useEffect)(() => {
+    if (timeZone === void 0) return;
+    setStoredTimeZone(timeZone);
+  }, [timeZone, setStoredTimeZone]);
+  const resolvedIs24HourFormat = (0, import_react8.useMemo)(() => {
+    return is24HourFormat ?? storedIs24HourFormat ?? config.locale.defaultIs24HourFormat ?? defaultIs24HourFormat ?? true;
+  }, [is24HourFormat, storedIs24HourFormat, config.locale.defaultIs24HourFormat, defaultIs24HourFormat]);
+  (0, import_react8.useEffect)(() => {
+    if (is24HourFormat === void 0) return;
+    setStoredIs24HourFormat(is24HourFormat);
+  }, [is24HourFormat, setStoredIs24HourFormat]);
   const onChangeRef = useEventCallbackStabilizer(onChangedLocale);
   (0, import_react8.useEffect)(() => {
     onChangeRef?.(resolvedLocale);
   }, [resolvedLocale, onChangeRef]);
+  const onChangeTimeZoneRef = useEventCallbackStabilizer(onChangedTimeZone);
+  (0, import_react8.useEffect)(() => {
+    onChangeTimeZoneRef?.(resolvedTimeZone);
+  }, [resolvedTimeZone, onChangeTimeZoneRef]);
+  const onChangeIs24HourFormatRef = useEventCallbackStabilizer(onChangedIs24HourFormat);
+  (0, import_react8.useEffect)(() => {
+    onChangeIs24HourFormatRef?.(resolvedIs24HourFormat);
+  }, [resolvedIs24HourFormat, onChangeIs24HourFormatRef]);
   (0, import_react8.useEffect)(() => {
     const localesToTestAgainst = Object.values(LocalizationUtil.locals);
     const detectLanguage = () => {
@@ -9500,6 +9540,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 });
 };
@@ -9510,6 +9574,20 @@ var useLocale = () => {
   }
   return context;
 };
+var useTimeZone = () => {
+  const context = (0, import_react8.useContext)(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 = (0, import_react8.useContext)(LocaleContext);
+  return {
+    is24HourFormat: context?.is24HourFormat ?? true,
+    timeZone: context?.timeZone
+  };
+};
 var useLanguage = () => {
   const context = (0, import_react8.useContext)(LocaleContext);
   if (!context) {
@@ -15682,9 +15760,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"];
@@ -15787,6 +15863,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();
@@ -15804,8 +15947,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 = {
@@ -15816,8 +15964,7 @@ var formatAbsolute = (date, locale, format) => {
       break;
     case "time":
       options = {
-        hour: "2-digit",
-        minute: "2-digit"
+        ...timeOptions
       };
       break;
     case "dateTime":
@@ -15825,12 +15972,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" });
@@ -15907,6 +16053,9 @@ var DateUtils = {
   daysInMonth,
   sameTime,
   withTime,
+  zonedParts,
+  toZonedDate,
+  fromZonedDate,
   formatAbsolute,
   formatRelative,
   addDuration,
@@ -15917,9 +16066,6 @@ var DateUtils = {
   toInputString,
   tryParseDate,
   toOnlyDate: normalizeToDateOnly,
-  /**
-   * Normalizes a datetime by removing seconds and milliseconds.
-   */
   toDateTimeOnly: normalizeDatetime
 };
 
@@ -16786,13 +16932,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,
@@ -17789,19 +17937,14 @@ var DateTimeField = (0, import_react79.forwardRef)(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 = (0, import_react79.useMemo)(() => {
-    if (is24HourFormat !== void 0) {
-      return is24HourFormat;
-    }
-    return !new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hour12;
-  }, [is24HourFormat, locale]);
+  const is24Hour = is24HourFormat ?? contextIs24HourFormat ?? true;
   const layout = (0, import_react79.useMemo)(
     () => buildSegmentLayout({ locale, mode, precision, is24HourFormat: is24Hour }),
     [locale, mode, precision, is24Hour]
@@ -17832,6 +17975,9 @@ var DateTimeField = (0, import_react79.forwardRef)(function DateTimeField2({
     return callback;
   };
   (0, import_react79.useEffect)(() => {
+    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;
@@ -17843,6 +17989,9 @@ var DateTimeField = (0, import_react79.forwardRef)(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);
@@ -17939,6 +18088,10 @@ var DateTimeField = (0, import_react79.forwardRef)(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;
@@ -17947,6 +18100,9 @@ var DateTimeField = (0, import_react79.forwardRef)(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);
@@ -18021,6 +18177,7 @@ var DateTimeInput = (0, import_react80.forwardRef)(function DateTimeInput2({
   allowClear = true,
   containerProps,
   mode = "date",
+  timeZone: timeZoneOverride,
   precision = "minute",
   pickerProps,
   outsideClickCloses = true,
@@ -18041,6 +18198,8 @@ var DateTimeInput = (0, import_react80.forwardRef)(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
+  const { timeZone: contextTimeZone } = useLocale();
+  const timeZone = timeZoneOverride ?? contextTimeZone;
   const [isOpen, setIsOpen] = (0, import_react80.useState)(false);
   const [state, setState] = useControlledState({
     value,
@@ -18052,6 +18211,8 @@ var DateTimeInput = (0, import_react80.forwardRef)(function DateTimeInput2({
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
+  const toZoned = (0, import_react80.useCallback)((date) => DateUtils.toZonedDate(date, timeZone), [timeZone]);
+  const fromZoned = (0, import_react80.useCallback)((date) => DateUtils.fromZonedDate(date, timeZone), [timeZone]);
   const generatedId = (0, import_react80.useId)();
   const ids = (0, import_react80.useMemo)(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
@@ -18098,7 +18259,7 @@ var DateTimeInput = (0, import_react80.forwardRef)(function DateTimeInput2({
             DateTimeField,
             {
               ref: fieldRef,
-              value: state,
+              value: toZoned(state),
               mode,
               precision,
               is24HourFormat,
@@ -18106,8 +18267,8 @@ var DateTimeInput = (0, import_react80.forwardRef)(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"
@@ -18172,18 +18333,19 @@ var DateTimeInput = (0, import_react80.forwardRef)(function DateTimeInput2({
         children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           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,
@@ -21711,10 +21873,18 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
 var import_jsx_runtime104 = require("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;
@@ -21741,9 +21911,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__ */ (0, import_jsx_runtime104.jsx)("span", { children: fullString });
 };
@@ -21758,29 +21934,36 @@ var FlexibleDateTimeInput = (0, import_react111.forwardRef)(function FlexibleDat
   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] = (0, import_react111.useState)(() => {
-    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__ */ (0, import_jsx_runtime105.jsx)(
     DateTimeInput,
     {
       ...props,
       ref: forwardedRef,
+      timeZone,
       mode,
       value,
       onValueChange: (next) => {
@@ -22119,26 +22302,46 @@ var CheckboxProperty = ({
 var import_lucide_react35 = require("lucide-react");
 var import_jsx_runtime111 = require("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__ */ (0, import_jsx_runtime111.jsx)(
     PropertyBase,
     {
-      ...baseProps,
+      name,
+      required,
+      readOnly,
+      allowClear,
+      allowRemove,
+      onRemove,
+      onValueClear: onValueClear ?? (() => {
+        onValueChange?.(null);
+        onEditComplete?.(null);
+      }),
       hasValue,
       icon: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_lucide_react35.CalendarDays, { size: 24 }),
+      className,
       children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
         DateTimeInput,
         {
+          ...inputProps,
           value,
           mode: type,
+          required,
           readOnly,
+          allowClear: false,
           onValueChange,
           onEditComplete,
           "data-name": "property-input",
@@ -22560,21 +22763,23 @@ var useRerender = () => {
 
 // src/hooks/useUpdatingDateString.ts
 var import_react124 = require("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] = (0, import_react124.useState)({
     compareDate: date,
-    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
     relative: DateUtils.formatRelative(date, locale)
   });
   (0, import_react124.useEffect)(() => {
     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]);
   (0, import_react124.useEffect)(() => {
     let timeoutId;
     const startTimer = () => {
@@ -22591,14 +22796,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
@@ -23161,6 +23366,7 @@ var PromiseUtils = {
   useComboboxContext,
   useControlledState,
   useCreateForm,
+  useDateTimeFormat,
   useDelay,
   useDialogContext,
   useDrawerContext,
@@ -23208,6 +23414,7 @@ var PromiseUtils = {
   useTableStateContext,
   useTableStateWithoutSizingContext,
   useTheme,
+  useTimeZone,
   useTooltip,
   useTransitionState,
   useTranslatedValidators,