@helpwave/hightide 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -6489,10 +6489,6 @@ var formatDateTime = (date) => {
   const minutes = date.getMinutes().toString().padStart(2, "0");
   return `${dateString}T${hours}:${minutes}`;
 };
-var getDaysInMonth = (year, month) => {
-  const lastDayOfMonth = new Date(year, month + 1, 0);
-  return lastDayOfMonth.getDate();
-};
 var changeDuration = (date, duration, isAdding) => {
   const {
     years = 0,
@@ -6602,6 +6598,51 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
   }
   return equalSizeGroups(dayList, 7);
 };
+var formatGerman = (date, showTime) => {
+  const d = new Intl.DateTimeFormat("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }).format(date);
+  if (!showTime) return d;
+  const t = new Intl.DateTimeFormat("de-DE", {
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+  return `${d} um ${t} Uhr`;
+};
+var formatAbsolute = (date, locale, showTime) => {
+  if (locale === "de-DE") {
+    return formatGerman(date, showTime);
+  }
+  const options = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  };
+  if (showTime) {
+    options.hour = "numeric";
+    options.minute = "numeric";
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+};
+var formatRelative = (date, locale, showTime) => {
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const now = /* @__PURE__ */ new Date();
+  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
+  if (Math.abs(diffInSeconds) < 60) return rtf.format(Math.round(diffInSeconds), "second");
+  if (Math.abs(diffInSeconds) < 3600) return rtf.format(Math.round(diffInSeconds / 60), "minute");
+  if (Math.abs(diffInSeconds) < 86400) return rtf.format(Math.round(diffInSeconds / 3600), "hour");
+  if (Math.abs(diffInSeconds) < 604800) return rtf.format(Math.round(diffInSeconds / 86400), "day");
+  return formatAbsolute(date, locale, showTime);
+};
+var DateUtils = {
+  monthsList,
+  weekDayList,
+  equalDate,
+  formatAbsolute,
+  formatRelative
+};
 
 // src/components/date/DatePicker.tsx
 import clsx7 from "clsx";
@@ -6784,6 +6825,16 @@ var hightideTranslation = {
     "remove": `Entfernen`,
     "required": `Erforderlich`,
     "reset": `Zur\xFCcksetzen`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Angewendet `;
+      _out += TranslationGen.resolvePlural(otherSortings, {
+        "=0": `als prim\xE4re Sortierung`,
+        "=1": `nach ${otherSortings} anderen Sortierung`,
+        "other": `nach ${otherSortings} anderen Sortierungen`
+      });
+      return _out;
+    },
     "save": `Speichern`,
     "saved": `Gespeichert`,
     "search": `Suche`,
@@ -7020,6 +7071,16 @@ var hightideTranslation = {
     "remove": `Remove`,
     "required": `Required`,
     "reset": `Reset`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Applied `;
+      _out += TranslationGen.resolvePlural(otherSortings, {
+        "=0": `as the first sorting`,
+        "=1": `after ${otherSortings} other sorting`,
+        "other": `after ${otherSortings} other sortings`
+      });
+      return _out;
+    },
     "save": `Save`,
     "saved": `Saved`,
     "search": `Search`,
@@ -7318,6 +7379,7 @@ var Button = forwardRef(function SolidButton({
   startIcon,
   endIcon,
   disabled,
+  allowClickEventPropagation = false,
   className,
   ...restProps
 }, ref) {
@@ -7340,6 +7402,12 @@ var Button = forwardRef(function SolidButton({
         paddingMapping[layout][size],
         className
       ),
+      onClick: (event) => {
+        if (!allowClickEventPropagation) {
+          event.stopPropagation();
+        }
+        restProps?.onClick(event);
+      },
       disabled,
       children: [
         startIcon,
@@ -7368,8 +7436,8 @@ var DayPicker = ({
   return /* @__PURE__ */ jsxs4("div", { className: clsx4("flex-col-1 min-w-[220px] select-none", className), children: [
     /* @__PURE__ */ jsx4("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx4("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
     weeks.map((week, index) => /* @__PURE__ */ jsx4("div", { className: "flex-row-2 text-center", children: week.map((date) => {
-      const isSelected = !!selected && equalDate(selected, date);
-      const isToday = equalDate(/* @__PURE__ */ new Date(), date);
+      const isSelected = !!selected && DateUtils.equalDate(selected, date);
+      const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
       return /* @__PURE__ */ jsx4(
@@ -7569,8 +7637,9 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ jsx6("span", { className: clsx6({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx6("div", { className: "flex-row-1", children: monthList.map((month) => {
-          const monthIndex = monthsList.indexOf(month);
+        contentExpandedClassName: "!p-2",
+        children: equalSizeGroups([...DateUtils.monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx6("div", { className: "flex-row-1", children: monthList.map((month) => {
+          const monthIndex = DateUtils.monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
           const firstOfMonth = new Date(year, monthIndex, 1);
@@ -7869,7 +7938,7 @@ var TimePicker = ({
     transformer(newDate);
     onChange?.(newDate);
   };
-  return /* @__PURE__ */ jsxs7("div", { className: clsx8("flex-row-2 w-fit min-w-[150px] select-none overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: clsx8("flex-row-2 select-none overflow-hidden", className), children: [
     /* @__PURE__ */ jsx9("div", { className: "flex-col-1 h-full overflow-y-auto min-w-16", children: hours.map((hour) => {
       const isSelected = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
       return /* @__PURE__ */ jsx9(
@@ -10219,7 +10288,9 @@ function CarouselTabs({
           "button",
           {
             id: `${id}-tab-${index}`,
-            ref: (el) => tabRefs.current[index] = el,
+            ref: (el) => {
+              tabRefs.current[index] = el;
+            },
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
             className: clsx19(
@@ -11165,7 +11236,9 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
         "aria-controls": `${t.id}-panel`,
         id: `${t.id}-tab`,
         tabIndex: active === t.id ? 0 : -1,
-        ref: (el) => buttonRefs.current[t.id] = el,
+        ref: (el) => {
+          buttonRefs.current[t.id] = el;
+        },
         onClick: () => setActive(t.id),
         onKeyDown: (e) => onKeyDown(e, t.id),
         className: clsx24(
@@ -11304,6 +11377,14 @@ var VerticalDivider = ({
   ) });
 };
 
+// src/components/layout/Visibility.tsx
+function Visibility({ children, isVisible }) {
+  if (isVisible) {
+    return children;
+  }
+  return void 0;
+}
+
 // src/components/loading-states/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
 import clsx26 from "clsx";
@@ -11485,7 +11566,7 @@ var NavigationItemWithSubItem = ({
   ...options
 }) => {
   const [isOpen, setOpen] = useState21(false);
-  const containerRef = useRef11();
+  const containerRef = useRef11(null);
   const triggerRef = useRef11(null);
   const id = useId8();
   const style = useFloatingElement({
@@ -12399,8 +12480,8 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback12, useEffect as useEffect27, useMemo as useMemo7, useRef as useRef13, useState as useState26 } from "react";
-import clsx47 from "clsx";
+import { useCallback as useCallback12, useEffect as useEffect27, useMemo as useMemo7, useRef as useRef14, useState as useState27 } from "react";
+import clsx48 from "clsx";
 import {
   flexRender,
   getCoreRowModel,
@@ -12433,43 +12514,181 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp } from "lucide-react";
-import clsx45 from "clsx";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import clsx46 from "clsx";
+
+// src/components/user-action/Tooltip.tsx
+import { useRef as useRef12, useState as useState23 } from "react";
+import { clsx as clsx45 } from "clsx";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+var Tooltip = ({
+  tooltip,
+  children,
+  appearDelay = 400,
+  disappearDelay = 50,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  disabled = false
+}) => {
+  const [state, setState] = useState23({
+    isShown: false,
+    timer: null
+  });
+  const { isShown } = state;
+  const anchorRef = useRef12(null);
+  const containerRef = useRef12(null);
+  const triangleRef = useRef12(null);
+  const triangleSize = 0.375;
+  const triangleClasses = {
+    top: `border-t-tooltip-background border-l-transparent border-r-transparent`,
+    bottom: `border-b-tooltip-background border-l-transparent border-r-transparent`,
+    left: `border-l-tooltip-background border-t-transparent border-b-transparent`,
+    right: `border-r-tooltip-background border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}rem ${triangleSize}rem 0 ${triangleSize}rem`, transform: `translate(0,${triangleSize}rem)` },
+    bottom: { borderWidth: `0 ${triangleSize}rem ${triangleSize}rem ${triangleSize}rem`, transform: `translate(0,-${triangleSize}rem)` },
+    left: { borderWidth: `${triangleSize}rem 0 ${triangleSize}rem ${triangleSize}rem`, transform: `translate(${triangleSize}rem,0)` },
+    right: { borderWidth: `${triangleSize}rem ${triangleSize}rem ${triangleSize}rem 0`, transform: `translate(-${triangleSize}rem,0)` }
+  };
+  const isActive = !disabled && isShown;
+  const css = useFloatingElement({
+    active: isActive,
+    anchorRef,
+    containerRef,
+    horizontalAlignment: position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
+    verticalAlignment: position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center"
+  });
+  const cssTriangle = useFloatingElement({
+    active: isActive,
+    anchorRef,
+    containerRef: triangleRef,
+    horizontalAlignment: position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
+    verticalAlignment: position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center"
+  });
+  const zIndex = useZIndexRegister(isActive);
+  const zIndexTriangle = useZIndexRegister(isActive);
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      ref: anchorRef,
+      className: clsx45("relative inline-block", containerClassName),
+      onMouseEnter: () => setState((prevState) => {
+        clearTimeout(prevState.timer);
+        return {
+          ...prevState,
+          timer: setTimeout(() => {
+            setState((prevState2) => {
+              clearTimeout(prevState2.timer);
+              return { isShown: true, timer: null };
+            });
+          }, appearDelay)
+        };
+      }),
+      onMouseLeave: () => setState((prevState) => {
+        clearTimeout(prevState.timer);
+        return {
+          ...prevState,
+          timer: setTimeout(() => {
+            setState((prevState2) => {
+              clearTimeout(prevState2.timer);
+              return { isShown: false, timer: null };
+            });
+          }, disappearDelay)
+        };
+      }),
+      children: [
+        children,
+        /* @__PURE__ */ jsxs35(Visibility, { isVisible: isActive, children: [
+          createPortal4(
+            /* @__PURE__ */ jsx56(
+              "div",
+              {
+                ref: containerRef,
+                className: clsx45(
+                  `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded
+           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
+                  tooltipClassName
+                ),
+                style: { ...css, zIndex, animationDelay: appearDelay + "ms" },
+                children: tooltip
+              }
+            ),
+            document.body
+          ),
+          createPortal4(
+            /* @__PURE__ */ jsx56(
+              "div",
+              {
+                ref: triangleRef,
+                className: clsx45(`absolute w-0 h-0 opacity-0 animate-tooltip-fade-in`, triangleClasses[position]),
+                style: {
+                  ...cssTriangle,
+                  ...triangleStyle[position],
+                  zIndex: zIndexTriangle,
+                  animationDelay: appearDelay + "ms"
+                }
+              }
+            ),
+            document.body
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/table/TableSortButton.tsx
+import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
   invert = false,
   color = "neutral",
   size = "tiny",
   className,
-  ...buttonProps
+  sortingIndexDisplay,
+  ...props
 }) => {
-  let icon = /* @__PURE__ */ jsx56(ChevronsUpDown, { className: "w-full h-full" });
+  const translation = useHightideTranslation();
+  const { sortingsCount, index } = sortingIndexDisplay;
+  let icon = /* @__PURE__ */ jsx57(ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx56(ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ jsx56(ChevronDown3, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx57(ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsx57(ChevronDown3, { className: "size-4" });
   }
-  return /* @__PURE__ */ jsx56(
+  const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
+  return /* @__PURE__ */ jsx57(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ jsxs36(
     Button,
     {
-      layout: "icon",
+      layout: hasSortingIndex ? "default" : "icon",
       color,
       size,
-      className: clsx45(className),
-      ...buttonProps,
-      children: icon
+      className: clsx46("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx57(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx57(
+          "div",
+          {
+            className: clsx46("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
+            children: `${index}.`
+          }
+        ) }),
+        icon
+      ]
     }
-  );
+  ) });
 };
 
 // src/components/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
-import { useEffect as useEffect25, useRef as useRef12, useState as useState24 } from "react";
-import clsx46 from "clsx";
+import { useEffect as useEffect25, useRef as useRef13, useState as useState25 } from "react";
+import clsx47 from "clsx";
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -12483,7 +12702,7 @@ var BagFunctionUtil = {
 };
 
 // src/components/user-action/Menu.tsx
-import { createPortal as createPortal4 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 
 // src/hooks/usePopoverPosition.ts
 var defaultPopoverPositionOptions = {
@@ -12540,15 +12759,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect23, useState as useState23 } from "react";
+import { useEffect as useEffect23, useState as useState24 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState23(false);
-  const [timer, setTimer] = useState23();
+  const [isHovered, setIsHovered] = useState24(false);
+  const [timer, setTimer] = useState24();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -12604,17 +12823,17 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx57(
+}) => /* @__PURE__ */ jsx58(
   "div",
   {
-    className: clsx46("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: clsx47("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled cursor-not-allowed": isDisabled,
@@ -12644,10 +12863,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = useRef12(null);
-  const menuRef = useRef12(null);
+  const triggerRef = useRef13(null);
+  const menuRef = useRef13(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState24(true);
+  const [isHidden, setIsHidden] = useState25(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -12681,14 +12900,14 @@ var Menu = ({
     }
   }, [isOpen]);
   const zIndex = useZIndexRegister(isOpen);
-  return /* @__PURE__ */ jsxs35(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment6, { children: [
     trigger(bag, triggerRef),
-    createPortal4(/* @__PURE__ */ jsx57(
+    createPortal5(/* @__PURE__ */ jsx58(
       "div",
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: clsx46(
+        className: clsx47(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -12713,34 +12932,34 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect26, useState as useState25 } from "react";
-import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useState as useState26 } from "react";
+import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState25(columnFilterValue);
+  const [filterValue, setFilterValue] = useState26(columnFilterValue);
   const hasFilter = !!filterValue;
   useEffect26(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs36("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx58(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs38("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx59(
           Button,
           {
             layout: "icon",
             color: "neutral",
             size: "tiny",
             onClick: toggleOpen,
-            children: /* @__PURE__ */ jsx58(FilterIcon, {})
+            children: /* @__PURE__ */ jsx59(FilterIcon, { className: "size-4" })
           }
         ),
-        hasFilter && /* @__PURE__ */ jsx58(
+        hasFilter && /* @__PURE__ */ jsx59(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12748,9 +12967,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ jsxs36("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ jsx58("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ jsx58(
+      children: ({ close }) => /* @__PURE__ */ jsxs38("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ jsx59("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx59(
           Input,
           {
             value: filterValue ?? "",
@@ -12760,8 +12979,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ jsx58(
+        filterType === "range" && /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -12774,8 +12993,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ jsx58("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -12789,8 +13008,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs36(Fragment7, { children: [
-          /* @__PURE__ */ jsx58(
+        filterType === "dateRange" && /* @__PURE__ */ jsxs38(Fragment7, { children: [
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12803,7 +13022,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -12817,12 +13036,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ jsx58(Button, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ jsx59(Button, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ jsx58(Button, { size: "small", onClick: () => {
+          /* @__PURE__ */ jsx59(Button, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -12833,7 +13052,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -12847,21 +13066,21 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = useRef13(null);
-  const tableRef = useRef13(null);
-  const [columnSizing, setColumnSizing] = useState26(columns.reduce((previousValue, currentValue) => {
+  const ref = useRef14(null);
+  const tableRef = useRef14(null);
+  const [columnSizing, setColumnSizing] = useState27(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = useState26();
-  const [pagination, setPagination] = useState26({
+  const [columnSizingInfo, setColumnSizingInfo] = useState27();
+  const [pagination, setPagination] = useState27({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = useState26(initialState?.columnFilters);
+  const [columnFilters, setColumnFilters] = useState27(initialState?.columnFilters);
   const computedColumnMinWidths = useMemo7(() => {
     return columns.reduce((previousValue, column) => {
       return {
@@ -12953,7 +13172,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ jsx59(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ jsx60(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13001,7 +13220,7 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = useState26(false);
+  const [hasInitializedSizing, setHasInitializedSizing] = useState27(false);
   useEffect27(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
@@ -13038,18 +13257,18 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx47("flex-col-4", className), children: [
-    /* @__PURE__ */ jsx59("div", { className: clsx47("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39("div", { ref, className: clsx48("flex-col-4", className), children: [
+    /* @__PURE__ */ jsx60("div", { className: clsx48("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ jsxs39(
       "table",
       {
         ref: tableRef,
-        className: clsx47(tableClassName),
+        className: clsx48(tableClassName),
         style: {
           ...columnSizeVars,
           width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
         },
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx59(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx60("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx60(
             "col",
             {
               style: {
@@ -13060,18 +13279,22 @@ var Table = ({
             },
             header.id
           )) }, headerGroup.id)),
-          /* @__PURE__ */ jsx59("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ jsxs37(
+          /* @__PURE__ */ jsx60("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx60("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ jsxs39(
               "th",
               {
                 colSpan: header.colSpan,
-                className: clsx47("relative group", header.column.columnDef.meta?.className),
+                className: clsx48("relative group", header.column.columnDef.meta?.className),
                 children: [
-                  /* @__PURE__ */ jsx59("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "flex-row-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ jsx59(
+                  /* @__PURE__ */ jsx60("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs39("div", { className: "flex-row-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ jsx60(
                       TableSortButton,
                       {
                         sortDirection: header.column.getIsSorted(),
+                        sortingIndexDisplay: {
+                          index: header.column.getIsSorted() ? header.column.getSortIndex() + 1 : -1,
+                          sortingsCount: table.getState().sorting.length
+                        },
                         onClick: () => {
                           const sorted = header.column.getIsSorted();
                           const isMulti = header.column.getCanMultiSort();
@@ -13090,7 +13313,7 @@ var Table = ({
                         }
                       }
                     ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx59(
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx60(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -13102,7 +13325,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ jsx59(
+                  header.column.getCanResize() && /* @__PURE__ */ jsx60(
                     "div",
                     {
                       onMouseDown: header.getResizeHandler(),
@@ -13121,15 +13344,15 @@ var Table = ({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsxs37("tbody", { children: [
+          /* @__PURE__ */ jsxs39("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ jsx59(
+              return /* @__PURE__ */ jsx60(
                 "tr",
                 {
                   onClick: () => onRowClick?.(row, table),
                   className: table.options.meta?.bodyRowClassName,
                   children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ jsx59("td", { children: flexRender(
+                    return /* @__PURE__ */ jsx60("td", { children: flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
@@ -13139,15 +13362,15 @@ var Table = ({
               );
             }),
             range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ jsx59("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ jsx59("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx59(FillerRowElement, {}) }, column.id);
+              return /* @__PURE__ */ jsx60("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ jsx60("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx60(FillerRowElement, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx59("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx60(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13159,7 +13382,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Table,
     {
       ...props,
@@ -13183,7 +13406,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx59(
+          return /* @__PURE__ */ jsx60(
             Checkbox,
             {
               checked: table.getIsAllRowsSelected(),
@@ -13196,7 +13419,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx59(
+          return /* @__PURE__ */ jsx60(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13214,15 +13437,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx59(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ jsx60(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx59(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx60(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -13236,7 +13459,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: clsx47(
+        bodyRowClassName: clsx48(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -13247,8 +13470,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-import { useState as useState27 } from "react";
-import { clsx as clsx48 } from "clsx";
+import { useState as useState28 } from "react";
+import { clsx as clsx49 } from "clsx";
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -13257,7 +13480,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 import { CheckIcon as CheckIcon2, Copy } from "lucide-react";
-import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13267,8 +13490,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = useState27(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState27(false);
+  const [isShowingIndication, setIsShowingIndication] = useState28(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState28(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -13288,10 +13511,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
-      className: clsx48("relative inline-block cursor-copy", containerClassName),
+      className: clsx49("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -13306,10 +13529,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs40(
           "div",
           {
-            className: clsx48(
+            className: clsx49(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -13321,18 +13544,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ jsxs38("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ jsx60(CheckIcon2, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ jsxs40("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ jsx61(CheckIcon2, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ jsxs38("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ jsx60(Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ jsxs40("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ jsx61(Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ jsx60(
+              /* @__PURE__ */ jsx61(
                 "div",
                 {
-                  className: clsx48(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: clsx49(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -13345,30 +13568,27 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-import clsx49 from "clsx";
-import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
+import clsx50 from "clsx";
+import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   mode = "dateTime",
-  onFinish,
   onChange,
-  onRemove,
   timePickerProps,
   datePickerProps
 }) => {
-  const translation = useHightideTranslation();
   const useDate = mode === "dateTime" || mode === "date";
   const useTime = mode === "dateTime" || mode === "time";
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx61(
+    dateDisplay = /* @__PURE__ */ jsx62(
       DatePicker,
       {
         ...datePickerProps,
-        className: "min-w-80 min-h-71 max-h-71",
+        className: "min-w-80",
         yearMonthPickerProps: { className: "h-full grow" },
         value,
         start,
@@ -13378,39 +13598,26 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx61(
+    timeDisplay = /* @__PURE__ */ jsx62(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx49("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
+        className: clsx50({ "justify-between": mode === "time" }),
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ jsxs39("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ jsxs39("div", { className: "flex-row-4", children: [
-      dateDisplay,
-      timeDisplay
-    ] }),
-    /* @__PURE__ */ jsx61("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ jsx61(Button, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx61(
-        Button,
-        {
-          size: "medium",
-          onClick: () => onFinish?.(value),
-          children: translation("change")
-        }
-      )
-    ] }) })
+  return /* @__PURE__ */ jsxs41("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+    dateDisplay,
+    timeDisplay
   ] });
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback13, useEffect as useEffect28, useState as useState28 } from "react";
-import clsx50 from "clsx";
-import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
+import { useCallback as useCallback13, useEffect as useEffect28, useState as useState29 } from "react";
+import clsx51 from "clsx";
+import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13429,7 +13636,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState28({
+  }, setAnimation] = useState29({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -13549,7 +13756,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13560,15 +13767,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs40("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsxs42("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx63(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13576,10 +13783,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx62(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx63(
               "div",
               {
-                className: clsx50(
+                className: clsx51(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -13605,93 +13812,163 @@ var ScrollPicker = ({
   );
 };
 
-// src/components/user-action/Tooltip.tsx
-import { clsx as clsx51 } from "clsx";
-import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
-var Tooltip = ({
-  tooltip,
-  children,
-  animationDelay = 650,
-  tooltipClassName = "",
-  containerClassName = "",
-  position = "bottom"
+// src/components/user-action/input/DateTimeInput.tsx
+import { useEffect as useEffect29, useMemo as useMemo8, useRef as useRef15, useState as useState30 } from "react";
+import { CalendarIcon } from "lucide-react";
+import clsx52 from "clsx";
+import { Fragment as Fragment8, jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
+var DateTimeInput = ({
+  date,
+  onValueChange,
+  onEditCompleted,
+  onRemove,
+  containerProps,
+  mode = "date",
+  pickerProps,
+  ...props
 }) => {
-  const { isHovered, handlers } = useHoverState();
-  const positionClasses = {
-    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
-    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
-    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
-    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
-  };
-  const triangleSize = 6;
-  const triangleClasses = {
-    top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,
-    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
-    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
-    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`
-  };
-  const triangleStyle = {
-    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
-    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
-    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
-    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
-  };
-  const zIndex = useZIndexRegister(isHovered);
-  return /* @__PURE__ */ jsxs41(
-    "div",
+  const translation = useHightideTranslation();
+  const { locale } = useLocale();
+  const [isOpen, setIsOpen] = useState30(false);
+  const containerRef = useRef15(null);
+  useOutsideClick([containerRef], () => {
+    setIsOpen(false);
+  });
+  const zIndex = useZIndexRegister(isOpen);
+  const isReadOnly = useMemo8(() => props.readOnly || props.disabled, [props.readOnly, props.disabled]);
+  useEffect29(() => {
+    if (isReadOnly) {
+      setIsOpen(false);
+    }
+  }, [isReadOnly]);
+  const cleanInputProps = { ...props };
+  delete cleanInputProps["isShowingError"];
+  delete cleanInputProps["setIsShowingError"];
+  return /* @__PURE__ */ jsxs43(Fragment8, { children: [
+    /* @__PURE__ */ jsxs43("div", { ...containerProps, className: clsx52("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ jsx64(
+        Input,
+        {
+          ...cleanInputProps,
+          placeholder: translation("clickToAdd"),
+          value: date ? DateUtils.formatAbsolute(date, locale, mode === "dateTime") : "",
+          onClick: (event) => {
+            setIsOpen(true);
+            cleanInputProps.onClick?.(event);
+          },
+          readOnly: true,
+          className: clsx52(
+            "pr-10 w-full",
+            { "hover:cursor-pointer": !isReadOnly },
+            cleanInputProps.className
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx64(
+        Button,
+        {
+          coloringStyle: "text",
+          layout: "icon",
+          color: "neutral",
+          size: "small",
+          className: "absolute right-1 top-1/2 -translate-y-1/2",
+          disabled: isReadOnly,
+          onClick: () => setIsOpen((prevState) => !prevState),
+          children: /* @__PURE__ */ jsx64(CalendarIcon, { className: "size-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx64(Visibility, { isVisible: isOpen, children: /* @__PURE__ */ jsxs43(
+      "div",
+      {
+        ref: containerRef,
+        className: "absolute left-0 flex-col-3 rounded-lg shadow-xl border bg-surface-variant text-on-surface border-divider p-2",
+        style: { zIndex },
+        children: [
+          /* @__PURE__ */ jsx64(
+            DateTimePicker,
+            {
+              ...pickerProps,
+              mode,
+              value: date,
+              onChange: (newDate) => {
+                onValueChange(newDate);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs43("div", { className: "flex-row-2 justify-end", children: [
+            /* @__PURE__ */ jsx64(Visibility, { isVisible: !!onRemove, children: /* @__PURE__ */ jsx64(
+              Button,
+              {
+                size: "medium",
+                color: "negative",
+                onClick: () => {
+                  onRemove?.();
+                  setIsOpen(false);
+                },
+                children: translation("clear")
+              }
+            ) }),
+            /* @__PURE__ */ jsx64(
+              Button,
+              {
+                size: "medium",
+                onClick: () => {
+                  onEditCompleted?.(date);
+                  setIsOpen(false);
+                },
+                children: translation("change")
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+var DateTimeInputUncontrolled = ({
+  date: initialDate,
+  ...props
+}) => {
+  const [date, setDate] = useOverwritableState(useMemo8(() => initialDate ?? /* @__PURE__ */ new Date(), [initialDate]));
+  return /* @__PURE__ */ jsx64(
+    DateTimeInput,
     {
-      className: clsx51("relative inline-block", containerClassName),
-      ...handlers,
-      children: [
-        children,
-        isHovered && /* @__PURE__ */ jsxs41(
-          "div",
-          {
-            className: clsx51(
-              `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
-           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
-              positionClasses[position],
-              tooltipClassName
-            ),
-            style: { zIndex, animationDelay: animationDelay + "ms" },
-            children: [
-              tooltip,
-              /* @__PURE__ */ jsx63(
-                "div",
-                {
-                  className: clsx51(`absolute w-0 h-0`, triangleClasses[position]),
-                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
-                }
-              )
-            ]
-          }
-        )
-      ]
+      ...props,
+      date,
+      onValueChange: (newDate) => {
+        setDate(newDate);
+        props.onValueChange?.(newDate);
+      },
+      onRemove: () => {
+        setDate(/* @__PURE__ */ new Date());
+        props.onRemove?.();
+      }
     }
   );
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
 import { useId as useId11 } from "react";
-import { forwardRef as forwardRef9, useState as useState29 } from "react";
-import clsx52 from "clsx";
-import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
+import { forwardRef as forwardRef9, useState as useState31 } from "react";
+import clsx53 from "clsx";
+import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef9(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = useState29(false);
+  const [isFocused, setIsFocused] = useState31(false);
   const generatedId = useId11();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs42("div", { className: clsx52("relative"), children: [
-    /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs44("div", { className: clsx53("relative"), children: [
+    /* @__PURE__ */ jsx65(
       Input,
       {
         ...props,
         id,
-        className: clsx52("h-14 px-4 pb-2 py-6.5", props.className),
+        className: clsx53("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -13704,13 +13981,13 @@ var InsideLabelInput = forwardRef9(function InsideLabelInput2({
         }
       }
     ),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx52(
+        className: clsx53(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -13726,7 +14003,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     InsideLabelInput,
     {
       ...props,
@@ -13738,8 +14015,8 @@ var InsideLabelInputUncontrolled = ({
 
 // src/components/user-action/input/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx53 } from "clsx";
-import { jsx as jsx65, jsxs as jsxs43 } from "react/jsx-runtime";
+import { clsx as clsx54 } from "clsx";
+import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
 var SearchBar = ({
   onSearch,
   searchButtonProps,
@@ -13747,16 +14024,16 @@ var SearchBar = ({
   ...inputProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs43("div", { ...containerProps, className: clsx53("relative", containerProps?.className), children: [
-    /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsxs45("div", { ...containerProps, className: clsx54("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx66(
       InputUncontrolled,
       {
         ...inputProps,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: clsx53("pr-10 w-full", inputProps.className)
+        className: clsx54("pr-10 w-full", inputProps.className)
       }
     ),
-    onSearch && /* @__PURE__ */ jsx65(
+    onSearch && /* @__PURE__ */ jsx66(
       Button,
       {
         ...searchButtonProps,
@@ -13765,34 +14042,34 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: (event) => onSearch(event),
-        className: clsx53("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ jsx65(Search, { className: "w-full h-full" })
+        className: clsx54("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ jsx66(Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-action/input/ToggleableInput.tsx
-import { forwardRef as forwardRef10, useEffect as useEffect29, useImperativeHandle as useImperativeHandle4, useRef as useRef14, useState as useState30 } from "react";
+import { forwardRef as forwardRef10, useEffect as useEffect30, useImperativeHandle as useImperativeHandle4, useRef as useRef16, useState as useState32 } from "react";
 import { Pencil } from "lucide-react";
-import clsx54 from "clsx";
-import { jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
+import clsx55 from "clsx";
+import { jsx as jsx67, jsxs as jsxs46 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef10(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = useState30(initialState !== "display");
-  const innerRef = useRef14(null);
+  const [isEditing, setIsEditing] = useState32(initialState !== "display");
+  const innerRef = useRef16(null);
   useImperativeHandle4(forwardedRef, () => innerRef.current);
-  useEffect29(() => {
+  useEffect30(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs44("div", { className: clsx54("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs46("div", { className: clsx55("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx67(
       Input,
       {
         ...props,
@@ -13813,14 +14090,14 @@ var ToggleableInput = forwardRef10(function ToggleableInput2({
         },
         "data-name": props["data-name"] ?? "togglable-input",
         "data-isEditing": isEditing ? "" : void 0,
-        className: clsx54(`w-full rounded-md`, {
+        className: clsx55(`w-full rounded-md`, {
           "text-transparent": !isEditing
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs44("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx66("span", { className: clsx54(" truncate"), children: value }),
-      /* @__PURE__ */ jsx66(Pencil, { className: clsx54(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs46("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx67("span", { className: clsx55(" truncate"), children: value }),
+      /* @__PURE__ */ jsx67(Pencil, { className: clsx55(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -13830,7 +14107,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     ToggleableInput,
     {
       value,
@@ -13841,33 +14118,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-import { useRef as useRef15 } from "react";
+import { useRef as useRef17 } from "react";
 import { useImperativeHandle as useImperativeHandle5 } from "react";
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var FocusTrap = forwardRef11(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = useRef15(null);
+  const innerRef = useRef17(null);
   useImperativeHandle5(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ jsx67("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ jsx68("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect30, useState as useState31 } from "react";
+import { useEffect as useEffect31, useState as useState33 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState31(show);
-  const [isTransitioning, setIsTransitioning] = useState31(!isOpen);
+  const [isOpen, setIsOpen] = useState33(show);
+  const [isTransitioning, setIsTransitioning] = useState33(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect30(() => {
+  useEffect31(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -13892,7 +14169,7 @@ function Transition({
 }
 
 // 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");
@@ -13930,7 +14207,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect31(() => {
+  useEffect32(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -13939,10 +14216,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;
     }
@@ -13968,7 +14245,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback14, useEffect as useEffect33, useMemo as useMemo8, useState as useState32 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect34, useMemo as useMemo9, useState as useState34 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -14007,9 +14284,9 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = useState32(initialSearch ?? "");
-  const [result, setResult] = useState32(list);
-  const searchTags = useMemo8(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const [search, setSearch] = useState34(initialSearch ?? "");
+  const [result, setResult] = useState34(list);
+  const searchTags = useMemo9(() => additionalSearchTags ?? [], [additionalSearchTags]);
   const updateSearch = useCallback14((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
@@ -14017,24 +14294,24 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo8(() => {
+  const filteredResult = useMemo9(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = useMemo8(() => {
+  const sortedAndFilteredResult = useMemo9(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo8(() => {
+  const usedResult = useMemo9(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -14144,6 +14421,106 @@ var builder = (value, update) => {
   return value;
 };
 
+// src/utils/duration.ts
+var Duration = class _Duration {
+  constructor({
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0
+  } = {}) {
+    this.assertRanges({ years, months, days, hours, minutes, seconds, milliseconds });
+    this.years = years;
+    this.months = months;
+    this.days = days;
+    this.hours = hours;
+    this.minutes = minutes;
+    this.seconds = seconds;
+    this.milliseconds = milliseconds;
+  }
+  /** Date arithmetic */
+  addTo(date) {
+    return this.applyTo(date, 1);
+  }
+  subtractFrom(date) {
+    return this.applyTo(date, -1);
+  }
+  /** Duration arithmetic */
+  add(other) {
+    return new _Duration({
+      years: this.years + other.years,
+      months: this.months + other.months,
+      days: this.days + other.days,
+      hours: this.hours + other.hours,
+      minutes: this.minutes + other.minutes,
+      seconds: this.seconds + other.seconds,
+      milliseconds: this.milliseconds + other.milliseconds
+    });
+  }
+  subtract(other) {
+    return new _Duration({
+      years: this.years - other.years,
+      months: this.months - other.months,
+      days: this.days - other.days,
+      hours: this.hours - other.hours,
+      minutes: this.minutes - other.minutes,
+      seconds: this.seconds - other.seconds,
+      milliseconds: this.milliseconds - other.milliseconds
+    });
+  }
+  equals(other) {
+    return this.years === other.years && this.months === other.months && this.days === other.days && this.hours === other.hours && this.minutes === other.minutes && this.seconds === other.seconds && this.milliseconds === other.milliseconds;
+  }
+  toJSON() {
+    return { ...this };
+  }
+  /** Static difference */
+  static difference(start, end) {
+    const diff = end.getTime() - start.getTime();
+    const ms = 1e3;
+    const min = 60 * ms;
+    const hr = 60 * min;
+    const day = 24 * hr;
+    const month = 30 * day;
+    const year = 365.25 * day;
+    return new _Duration({
+      years: Math.floor(diff / year),
+      months: Math.floor(diff / month),
+      days: Math.floor(diff / day),
+      hours: Math.floor(diff % day / hr),
+      minutes: Math.floor(diff % hr / min),
+      seconds: Math.floor(diff % min / ms),
+      milliseconds: diff % ms
+    });
+  }
+  applyTo(date, multiplier) {
+    const d = new Date(date);
+    d.setFullYear(d.getFullYear() + multiplier * this.years);
+    d.setMonth(d.getMonth() + multiplier * this.months);
+    d.setDate(d.getDate() + multiplier * this.days);
+    d.setHours(d.getHours() + multiplier * this.hours);
+    d.setMinutes(d.getMinutes() + multiplier * this.minutes);
+    d.setSeconds(d.getSeconds() + multiplier * this.seconds);
+    d.setMilliseconds(d.getMilliseconds() + multiplier * this.milliseconds);
+    return d;
+  }
+  assertRanges(d) {
+    if (d.years < 0) throw new RangeError("years >= 0");
+    if (d.months < 0 || d.months > 11) throw new RangeError("months: 0\u201311");
+    if (d.days < 0) throw new RangeError("days >= 0");
+    if (d.hours < 0 || d.hours > 23) throw new RangeError("hours: 0\u201323");
+    if (d.minutes < 0 || d.minutes > 59) throw new RangeError("minutes: 0\u201359");
+    if (d.seconds < 0 || d.seconds > 59) throw new RangeError("seconds: 0\u201359");
+    if (d.milliseconds < 0) throw new RangeError("milliseconds >= 0");
+  }
+  valueOf() {
+    return this.milliseconds + this.seconds * 1e3 + this.minutes * 6e4 + this.hours * 36e5 + this.days * 864e5;
+  }
+};
+
 // src/utils/easeFunctions.ts
 var EaseFunctions = class _EaseFunctions {
   static cubicBezierGeneric(x1, y1, x2, y2) {
@@ -14281,12 +14658,16 @@ export {
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
+  DateTimeInput,
+  DateTimeInputUncontrolled,
   DateTimePicker,
+  DateUtils,
   DayPicker,
   DayPickerUncontrolled,
   Dialog,
   DiscardChangesDialog,
   DividerInserter,
+  Duration,
   EaseFunctions,
   ErrorComponent,
   Expandable,
@@ -14384,6 +14765,7 @@ export {
   Transition,
   UseValidators,
   VerticalDivider,
+  Visibility,
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
@@ -14393,19 +14775,16 @@ export {
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
-  equalDate,
   equalSizeGroups,
   formatDate,
   formatDateTime,
   getBetweenDuration,
-  getDaysInMonth,
   getNeighbours,
   getWeeksForCalenderMonth,
   hightideTranslation,
   hightideTranslationLocales,
   isInTimeSpan,
   match,
-  monthsList,
   noop,
   range,
   resolveSetState,
@@ -14435,7 +14814,6 @@ export {
   useTranslatedValidators,
   useZIndexRegister,
   validateEmail,
-  weekDayList,
   writeToClipboard
 };
 //# sourceMappingURL=index.mjs.map