@helpwave/hightide 0.8.10 → 0.8.12

package/dist/index.mjs

@@ -14394,15 +14394,15 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect39, useId as useId15, useMemo as useMemo28, useRef as useRef31, useState as useState34 } from "react";
+import { useEffect as useEffect40, useId as useId15, useMemo as useMemo29, useRef as useRef31, useState as useState35 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef17, useCallback as useCallback26, useEffect as useEffect38, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo26, useRef as useRef30, useState as useState32 } from "react";
+import { forwardRef as forwardRef17, useCallback as useCallback26, useEffect as useEffect39, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo27, useRef as useRef30, useState as useState33 } from "react";
 import { CalendarIcon } from "lucide-react";
 import clsx24 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
-import { useEffect as useEffect28, useRef as useRef26 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo22, useRef as useRef26 } from "react";
 import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 var TimePicker = ({
   value: controlledValue,
@@ -14411,6 +14411,9 @@ var TimePicker = ({
   onEditComplete,
   is24HourFormat = true,
   minuteIncrement = "5min",
+  secondIncrement = "5s",
+  millisecondIncrement = "100ms",
+  precision = "minute",
   className
 }) => {
   const [value, setValue] = useControlledState({
@@ -14422,22 +14425,58 @@ var TimePicker = ({
   const hourRef = useRef26(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
-  let minutes = range(60);
-  switch (minuteIncrement) {
-    case "5min":
-      minutes = minutes.filter((value2) => value2 % 5 === 0);
-      break;
-    case "10min":
-      minutes = minutes.filter((value2) => value2 % 10 === 0);
-      break;
-    case "15min":
-      minutes = minutes.filter((value2) => value2 % 15 === 0);
-      break;
-    case "30min":
-      minutes = minutes.filter((value2) => value2 % 30 === 0);
-      break;
-  }
-  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes()));
+  const minutes = useMemo22(() => {
+    const full = range(60);
+    switch (minuteIncrement) {
+      case "5min":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10min":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "15min":
+        return full.filter((value2) => value2 % 15 === 0);
+      case "30min":
+        return full.filter((value2) => value2 % 30 === 0);
+    }
+  }, [minuteIncrement]);
+  const seconds = useMemo22(() => {
+    const full = range(60);
+    switch (secondIncrement) {
+      case "1s":
+        return full.filter((value2) => value2 % 1 === 0);
+      case "5s":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10s":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "15s":
+        return full.filter((value2) => value2 % 15 === 0);
+      case "30s":
+        return full.filter((value2) => value2 % 30 === 0);
+    }
+  }, [secondIncrement]);
+  const milliseconds = useMemo22(() => {
+    const full = range(1e3);
+    switch (millisecondIncrement) {
+      case "1ms":
+        return full.filter((value2) => value2 % 1 === 0);
+      case "5ms":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10ms":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "25ms":
+        return full.filter((value2) => value2 % 25 === 0);
+      case "50ms":
+        return full.filter((value2) => value2 % 50 === 0);
+      case "100ms":
+        return full.filter((value2) => value2 % 100 === 0);
+      case "250ms":
+        return full.filter((value2) => value2 % 250 === 0);
+      case "500ms":
+        return full.filter((value2) => value2 % 500 === 0);
+    }
+  }, [millisecondIncrement]);
+  const closestMinute = useMemo22(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
+  const closestSecond = useMemo22(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
+  const closestMillisecond = useMemo22(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
   const hour = value.getHours();
   useEffect28(() => {
     minuteRef.current?.scrollIntoView({
@@ -14488,6 +14527,36 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
+    /* @__PURE__ */ jsx60(Visibility, { isVisible: precision === "second" || precision === "millisecond", children: /* @__PURE__ */ jsx60("div", { "data-name": "time-picker-value-column", children: seconds.map((second) => {
+      const isSelected = second === closestSecond;
+      return /* @__PURE__ */ jsx60(
+        Button,
+        {
+          size: "sm",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? minuteRef : void 0,
+          onClick: () => onChangeWrapper((newDate) => newDate.setSeconds(second)),
+          className: "min-w-16",
+          children: second.toString().padStart(2, "0")
+        },
+        second + secondIncrement
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx60(Visibility, { isVisible: precision === "millisecond", children: /* @__PURE__ */ jsx60("div", { "data-name": "time-picker-value-column", children: milliseconds.map((millisecond) => {
+      const isSelected = millisecond === closestMillisecond;
+      return /* @__PURE__ */ jsx60(
+        Button,
+        {
+          size: "sm",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? minuteRef : void 0,
+          onClick: () => onChangeWrapper((newDate) => newDate.setMilliseconds(millisecond)),
+          className: "min-w-16",
+          children: millisecond.toString().padStart(2, "0")
+        },
+        millisecond + millisecondIncrement
+      );
+    }) }) }),
     !is24HourFormat && /* @__PURE__ */ jsxs30("div", { "data-name": "time-picker-value-column", children: [
       /* @__PURE__ */ jsx60(
         Button,
@@ -14658,14 +14727,40 @@ var formatRelative = (date, locale) => {
   if (Math.abs(diffInSeconds) < timesInSeconds.yearImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
   return rtf.format(Math.round(diffInSeconds / timesInSeconds.yearImprecise), "year");
 };
-var toInputString = (date, format) => {
+var toInputString = (date, format, precision = "minute", isLocalTime = true) => {
+  const pad = (n, l = 2) => String(n).padStart(l, "0");
+  const parts = isLocalTime ? {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    min: date.getMinutes(),
+    s: date.getSeconds(),
+    ms: date.getMilliseconds()
+  } : {
+    y: date.getUTCFullYear(),
+    m: date.getUTCMonth() + 1,
+    d: date.getUTCDate(),
+    h: date.getUTCHours(),
+    min: date.getUTCMinutes(),
+    s: date.getUTCSeconds(),
+    ms: date.getUTCMilliseconds()
+  };
+  const dateStr = `${pad(parts.y, 4)}-${pad(parts.m)}-${pad(parts.d)}`;
+  let timeStr = `${pad(parts.h)}:${pad(parts.min)}`;
+  if (precision === "second" || precision === "millisecond") {
+    timeStr += `:${pad(parts.s)}`;
+  }
+  if (precision === "millisecond") {
+    timeStr += `.${pad(parts.ms, 3)}`;
+  }
   switch (format) {
     case "date":
-      return date.toISOString().split("T")[0];
+      return dateStr;
     case "time":
-      return date.toISOString().split("T")[1].split("Z")[0];
+      return timeStr;
     case "dateTime":
-      return date.toISOString().split("Z")[0];
+      return `${dateStr}T${timeStr}`;
   }
 };
 var DateUtils = {
@@ -14686,7 +14781,7 @@ var DateUtils = {
 import clsx23 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
-import { useCallback as useCallback23, useEffect as useEffect29, useMemo as useMemo22, useRef as useRef27 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect29, useMemo as useMemo23, useRef as useRef27 } from "react";
 import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth: controlledDisplayedMonth,
@@ -14716,7 +14811,7 @@ var DayPicker = ({
   const month = displayedMonth.getMonth();
   const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
   const selectedButtonRef = useRef27(null);
-  const isValueInDisplayedWeeks = useMemo22(
+  const isValueInDisplayedWeeks = useMemo23(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
     [value, weeks]
   );
@@ -14728,11 +14823,11 @@ var DayPicker = ({
   useEffect29(() => {
     selectedButtonRef.current?.focus();
   }, [focusTargetDate]);
-  const end = useMemo22(() => {
+  const end = useMemo23(() => {
     if (!providedEnd) return;
     return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
   }, [providedEnd]);
-  const start = useMemo22(() => {
+  const start = useMemo23(() => {
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
@@ -14782,7 +14877,8 @@ var DayPicker = ({
               date.getDate(),
               value.getHours(),
               value.getMinutes(),
-              value.getSeconds()
+              value.getSeconds(),
+              value.getMilliseconds()
             );
             setValue(newDate);
             onEditComplete?.(newDate);
@@ -14806,7 +14902,7 @@ var DayPicker = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback24, useEffect as useEffect30, useMemo as useMemo23, useRef as useRef28, useState as useState26 } from "react";
+import { memo, useCallback as useCallback24, useEffect as useEffect30, useMemo as useMemo24, useRef as useRef28, useState as useState26 } from "react";
 import clsx22 from "clsx";
 import { jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
@@ -14825,7 +14921,7 @@ var YearRow = memo(function YearRow2({
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
-  const monthGrid = useMemo23(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
+  const monthGrid = useMemo24(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
   return /* @__PURE__ */ jsxs32(
     ExpandableRoot,
     {
@@ -14880,19 +14976,19 @@ var YearMonthPicker = ({
     defaultValue: initialValue
   });
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const monthNames = useMemo23(() => {
+  const monthNames = useMemo24(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
     return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
   }, [locale]);
-  const years = useMemo23(
+  const years = useMemo24(
     () => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
     [start, end]
   );
-  const minTimestamp = useMemo23(() => {
+  const minTimestamp = useMemo24(() => {
     if (!start) return;
     return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
   }, [start]);
-  const maxTimestamp = useMemo23(() => {
+  const maxTimestamp = useMemo24(() => {
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
@@ -15056,6 +15152,9 @@ var DateTimePicker = ({
   is24HourFormat,
   minuteIncrement,
   weekStart,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   onValueChange,
   onEditComplete,
   timePickerProps,
@@ -15093,6 +15192,9 @@ var DateTimePicker = ({
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
+        secondIncrement,
+        millisecondIncrement,
+        precision,
         value,
         onValueChange: setValue,
         onEditComplete
@@ -15106,6 +15208,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
+import { useEffect as useEffect31, useState as useState28 } from "react";
 import { Fragment as Fragment6, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
 var DateTimePickerDialog = ({
   initialValue = null,
@@ -15115,6 +15218,15 @@ var DateTimePickerDialog = ({
   onEditComplete,
   mode = "date",
   pickerProps,
+  start,
+  end,
+  weekStart,
+  markToday,
+  is24HourFormat,
+  minuteIncrement,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   labelId,
   label
 }) => {
@@ -15124,6 +15236,10 @@ var DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   });
+  const [pickerState, setPickerState] = useState28(state ?? /* @__PURE__ */ new Date());
+  useEffect31(() => {
+    setPickerState(state ?? /* @__PURE__ */ new Date());
+  }, [state]);
   return /* @__PURE__ */ jsxs35(Fragment6, { children: [
     /* @__PURE__ */ jsx65("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ jsx65(
       "span",
@@ -15138,13 +15254,22 @@ var DateTimePickerDialog = ({
       {
         ...pickerProps,
         mode,
-        value: state,
-        onValueChange: setState,
-        onEditComplete: setState
+        value: pickerState,
+        onValueChange: setPickerState,
+        onEditComplete: setPickerState,
+        start,
+        end,
+        weekStart,
+        markToday,
+        is24HourFormat,
+        minuteIncrement,
+        secondIncrement,
+        millisecondIncrement,
+        precision
       }
     ),
     /* @__PURE__ */ jsxs35("div", { className: "flex-row-2 justify-end", children: [
-      /* @__PURE__ */ jsx65(Visibility, { isVisible: allowRemove && !!initialValue, children: /* @__PURE__ */ jsx65(
+      /* @__PURE__ */ jsx65(Visibility, { isVisible: allowRemove && !!state, children: /* @__PURE__ */ jsx65(
         Button,
         {
           size: "md",
@@ -15157,14 +15282,14 @@ var DateTimePickerDialog = ({
           children: translation("clear")
         }
       ) }),
-      /* @__PURE__ */ jsx65(Visibility, { isVisible: !initialValue, children: /* @__PURE__ */ jsx65(
+      /* @__PURE__ */ jsx65(Visibility, { isVisible: !state, children: /* @__PURE__ */ jsx65(
         Button,
         {
           size: "md",
           color: "neutral",
           onClick: () => {
-            setState(initialValue);
-            onEditComplete?.(initialValue);
+            setState(state);
+            onEditComplete?.(state);
           },
           className: "min-w-26",
           children: translation("cancel")
@@ -15175,7 +15300,7 @@ var DateTimePickerDialog = ({
         {
           size: "md",
           onClick: () => {
-            onEditComplete?.(state);
+            onEditComplete?.(pickerState);
           },
           className: "min-w-26",
           children: translation("done")
@@ -15186,7 +15311,7 @@ var DateTimePickerDialog = ({
 };
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -15224,7 +15349,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect31(() => {
+  useEffect32(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15233,10 +15358,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React6, { useEffect as useEffect32 } from "react";
+import React6, { useEffect as useEffect33 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
-  useEffect32(() => {
+  useEffect33(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15256,11 +15381,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-import { useEffect as useEffect33, useLayoutEffect as useLayoutEffect7, useState as useState28 } from "react";
+import { useEffect as useEffect34, useLayoutEffect as useLayoutEffect7, useState as useState29 } from "react";
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect33;
+var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect34;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState28(false);
+  const [isMounted, setIsMounted] = useState29(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -15271,10 +15396,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-import { useEffect as useEffect34, useRef as useRef29 } from "react";
+import { useEffect as useEffect35, useRef as useRef29 } from "react";
 function useHandleRefs(handleRef) {
   const refs = useRef29([]);
-  useEffect34(() => {
+  useEffect35(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -15312,10 +15437,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-import { useEffect as useEffect35, useState as useState29 } from "react";
+import { useEffect as useEffect36, useState as useState30 } from "react";
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = useState29(overwriteValue);
-  useEffect35(() => {
+  const [state, setState] = useState30(overwriteValue);
+  useEffect36(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -15333,7 +15458,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback25, useEffect as useEffect36, useMemo as useMemo24, useState as useState30 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect37, useMemo as useMemo25, useState as useState31 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -15372,9 +15497,9 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = useState30(initialSearch ?? "");
-  const [result, setResult] = useState30(list);
-  const searchTags = useMemo24(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const [search, setSearch] = useState31(initialSearch ?? "");
+  const [result, setResult] = useState31(list);
+  const searchTags = useMemo25(() => additionalSearchTags ?? [], [additionalSearchTags]);
   const updateSearch = useCallback25((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
@@ -15382,24 +15507,24 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo24(() => {
+  const filteredResult = useMemo25(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = useMemo24(() => {
+  const sortedAndFilteredResult = useMemo25(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo24(() => {
+  const usedResult = useMemo25(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -15416,23 +15541,23 @@ var useSearch = ({
 };
 
 // src/hooks/useUpdatingDateString.ts
-import { useEffect as useEffect37, useState as useState31 } from "react";
+import { useEffect as useEffect38, useState as useState32 } from "react";
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
   const { locale: contextLocale } = useLocale();
   const locale = localeOverride ?? contextLocale;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = useState31({
+  const [dateAndTimeStrings, setDateAndTimeStrings] = useState32({
     compareDate: date,
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
     relative: DateUtils.formatRelative(date, locale)
   });
-  useEffect37(() => {
+  useEffect38(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale]);
-  useEffect37(() => {
+  useEffect38(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -15468,7 +15593,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo26 } from "react";
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -15518,7 +15643,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return useMemo25(() => ({
+  return useMemo26(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -15565,6 +15690,15 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
   pickerProps,
   outsideClickCloses = true,
   onDialogOpeningChange,
+  start,
+  end,
+  weekStart,
+  markToday,
+  is24HourFormat,
+  minuteIncrement,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   disabled = false,
   readOnly = false,
   invalid = false,
@@ -15572,19 +15706,19 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const [isOpen, setIsOpen] = useState32(false);
+  const [isOpen, setIsOpen] = useState33(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = useState32(state ?? /* @__PURE__ */ new Date());
-  const [stringInputState, setStringInputState] = useState32({
-    state: state ? DateUtils.toInputString(state, mode) : "",
+  const [dialogValue, setDialogValue] = useState33(state);
+  const [stringInputState, setStringInputState] = useState33({
+    state: state ? DateUtils.toInputString(state, mode, precision) : "",
     date: void 0
   });
-  useEffect38(() => {
-    setDialogValue(state ?? /* @__PURE__ */ new Date());
+  useEffect39(() => {
+    setDialogValue(state);
     setStringInputState({
       state: state ? DateUtils.toInputString(state, mode) : "",
       date: void 0
@@ -15595,14 +15729,14 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
   const generatedId = useId13();
-  const ids = useMemo26(() => ({
+  const ids = useMemo27(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
     popup: `date-time-input-popup-${generatedId}`,
     label: `date-time-input-label-${generatedId}`
   }), [generatedId, inputId]);
   const innerRef = useRef30(null);
   useImperativeHandle11(forwardedRef, () => innerRef.current);
-  useEffect38(() => {
+  useEffect39(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
@@ -15621,8 +15755,9 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
           id: ids.input,
           value: stringInputState.state,
           onChange: (event) => {
-            const date = event.target.valueAsDate;
-            if (date) {
+            const date = new Date(event.target.value ?? "");
+            const isValid = !isNaN(date.getTime());
+            if (isValid) {
               restartTimer(() => {
                 innerRef.current?.blur();
                 setState(date);
@@ -15633,7 +15768,7 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
             }
             setStringInputState({
               state: event.target.value,
-              date: event.target.valueAsDate ?? void 0
+              date: isValid ? date : void 0
             });
           },
           onBlur: (event) => {
@@ -15709,7 +15844,16 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
               changeOpenWrapper(false);
             },
             pickerProps,
-            mode
+            mode,
+            start,
+            end,
+            weekStart,
+            markToday,
+            is24HourFormat,
+            minuteIncrement,
+            secondIncrement,
+            millisecondIncrement,
+            precision
           }
         )
       }
@@ -15718,7 +15862,7 @@ var DateTimeInput = forwardRef17(function DateTimeInput2({
 });
 
 // src/components/layout/table/TableFilterPopups.tsx
-import { useId as useId14, useMemo as useMemo27, useState as useState33 } from "react";
+import { useId as useId14, useMemo as useMemo28, useState as useState34 } from "react";
 
 // src/components/user-interaction/select/MultiSelect.tsx
 import { forwardRef as forwardRef18 } from "react";
@@ -15995,7 +16139,7 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "textContains";
   const parameter = filterValue?.parameter ?? {};
   const id = useId14();
-  const availableOperators = useMemo27(() => [
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.text,
     ...TableFilterOperator.generic
   ], []);
@@ -16055,7 +16199,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
   const operator = filterValue?.operator ?? "numberBetween";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo27(() => [
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.number,
     ...TableFilterOperator.generic
   ], []);
@@ -16146,9 +16290,9 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState33(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState33(null);
-  const availableOperators = useMemo27(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState34(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState34(null);
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.date,
     ...TableFilterOperator.generic
   ], []);
@@ -16271,9 +16415,9 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateTimeBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState33(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState33(null);
-  const availableOperators = useMemo27(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState34(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState34(null);
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.dateTime,
     ...TableFilterOperator.generic
   ], []);
@@ -16390,7 +16534,7 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "booleanIsTrue";
-  const availableOperators = useMemo27(() => [
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.boolean,
     ...TableFilterOperator.generic
   ], []);
@@ -16414,11 +16558,11 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo27(() => [
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.multiTags,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = useMemo27(() => {
+  const availableTags = useMemo28(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16465,11 +16609,11 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsSingleContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo27(() => [
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.singleTag,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = useMemo27(() => {
+  const availableTags = useMemo28(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16528,7 +16672,7 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
 };
 var GenericFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "notUndefined";
-  const availableOperators = useMemo27(() => [
+  const availableOperators = useMemo28(() => [
     ...TableFilterOperator.generic
   ], []);
   return /* @__PURE__ */ jsx69("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ jsx69(
@@ -16577,18 +16721,18 @@ var TableFilterButton = ({
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState34(columnFilterValue);
+  const [filterValue, setFilterValue] = useState35(columnFilterValue);
   const hasFilter = !!filterValue;
   const anchorRef = useRef31(null);
   const containerRef = useRef31(null);
-  const [isOpen, setIsOpen] = useState34(false);
+  const [isOpen, setIsOpen] = useState35(false);
   const id = useId15();
-  const ids = useMemo28(() => ({
+  const ids = useMemo29(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  useEffect39(() => {
+  useEffect40(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -16663,7 +16807,7 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { useCallback as useCallback28, useEffect as useEffect40 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect41 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs41 } from "react/jsx-runtime";
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
@@ -16701,7 +16845,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  useEffect40(() => {
+  useEffect41(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -16870,7 +17014,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-import { useCallback as useCallback29, useMemo as useMemo29 } from "react";
+import { useCallback as useCallback29, useMemo as useMemo30 } from "react";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var TableWithSelectionProvider = ({
   children,
@@ -16883,7 +17027,7 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = useMemo29(() => [
+  const columnDef = useMemo30(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
@@ -16986,7 +17130,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect41, useMemo as useMemo30, useState as useState35 } from "react";
+import { memo as memo2, useEffect as useEffect42, useMemo as useMemo31, useState as useState36 } from "react";
 import { jsx as jsx76 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
@@ -16998,11 +17142,11 @@ var TableColumnComponent = ({
     "TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
     (filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
   );
-  const [column] = useState35({
+  const [column] = useState36({
     ...props,
     filterFn
   });
-  useEffect41(() => {
+  useEffect42(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -17017,12 +17161,12 @@ var TableColumnFactory = () => memo2(
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = useMemo30(() => TableColumnFactory(), []);
+  const TableColumnComponent2 = useMemo31(() => TableColumnFactory(), []);
   return /* @__PURE__ */ jsx76(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-import { useMemo as useMemo31, useRef as useRef32, useId as useId16 } from "react";
+import { useMemo as useMemo32, useRef as useRef32, useId as useId16 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs45 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
@@ -17030,14 +17174,14 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
   const translation = useHightideTranslation();
   const containerRef = useRef32(null);
   const generatedId = useId16();
-  const ids = useMemo31(() => ({
+  const ids = useMemo32(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
-  const columns = useMemo31(() => {
+  const columns = useMemo32(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -17295,7 +17439,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 };
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 import { clsx as clsx28 } from "clsx";
 
 // src/utils/writeToClipboard.ts
@@ -17318,7 +17462,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState36(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState37(false);
   return /* @__PURE__ */ jsxs46(
     TooltipRoot,
     {
@@ -17367,7 +17511,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback30, useRef as useRef33, useState as useState37 } from "react";
+import { useCallback as useCallback30, useRef as useRef33, useState as useState38 } from "react";
 import clsx29 from "clsx";
 import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs47 } from "react/jsx-runtime";
 var MenuItem = ({
@@ -17394,7 +17538,7 @@ var Menu = ({
   ...props
 }) => {
   const triggerRef = useRef33(null);
-  const [isOpen, setIsOpen] = useState37(false);
+  const [isOpen, setIsOpen] = useState38(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -17424,7 +17568,7 @@ var Menu = ({
 };
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback31, useEffect as useEffect42, useState as useState38 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect43, useState as useState39 } from "react";
 import clsx30 from "clsx";
 import { jsx as jsx80, jsxs as jsxs48 } from "react/jsx-runtime";
 var up = 1;
@@ -17445,7 +17589,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState38({
+  }, setAnimation] = useState39({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -17544,7 +17688,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect42(() => {
+  useEffect43(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -17808,7 +17952,7 @@ var TimeDisplay = ({
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId18 } from "react";
-import { forwardRef as forwardRef20, useState as useState39 } from "react";
+import { forwardRef as forwardRef20, useState as useState40 } from "react";
 import clsx32 from "clsx";
 import { jsx as jsx84, jsxs as jsxs50 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef20(function InsideLabelInput2({
@@ -17824,7 +17968,7 @@ var InsideLabelInput = forwardRef20(function InsideLabelInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = useState39(false);
+  const [isFocused, setIsFocused] = useState40(false);
   const generatedId = useId18();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs50("div", { className: clsx32("relative"), children: [
@@ -17914,7 +18058,7 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect43, useImperativeHandle as useImperativeHandle12, useRef as useRef34, useState as useState40 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect44, useImperativeHandle as useImperativeHandle12, useRef as useRef34, useState as useState41 } from "react";
 import { Pencil } from "lucide-react";
 import clsx34 from "clsx";
 import { jsx as jsx86, jsxs as jsxs52 } from "react/jsx-runtime";
@@ -17931,10 +18075,10 @@ var ToggleableInput = forwardRef21(function ToggleableInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = useState40(initialState !== "display");
+  const [isEditing, setIsEditing] = useState41(initialState !== "display");
   const innerRef = useRef34(null);
   useImperativeHandle12(forwardedRef, () => innerRef.current);
-  useEffect43(() => {
+  useEffect44(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
@@ -18144,7 +18288,7 @@ var DateProperty = ({
 import { List } from "lucide-react";
 
 // src/components/user-interaction/select/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect44, useImperativeHandle as useImperativeHandle13, useRef as useRef35 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect45, useImperativeHandle as useImperativeHandle13, useRef as useRef35 } from "react";
 import { XIcon as XIcon2, Plus } from "lucide-react";
 import { jsx as jsx90, jsxs as jsxs55 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayButton2({
@@ -18154,7 +18298,7 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
   const translation = useHightideTranslation();
   const { state, trigger, item, ids, setIds } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  useEffect44(() => {
+  useEffect45(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -18164,7 +18308,7 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
   }, [id, setIds]);
   const innerRef = useRef35(null);
   useImperativeHandle13(ref, () => innerRef.current);
-  useEffect44(() => {
+  useEffect45(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -18450,16 +18594,16 @@ var TextProperty = ({
 };
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect45, useState as useState41 } from "react";
+import { useEffect as useEffect46, useState as useState42 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState41(show);
-  const [isTransitioning, setIsTransitioning] = useState41(!isOpen);
+  const [isOpen, setIsOpen] = useState42(show);
+  const [isTransitioning, setIsTransitioning] = useState42(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect45(() => {
+  useEffect46(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);