@sustaina/shared-ui 1.65.4 → 1.66.0

package/dist/index.js

@@ -4897,6 +4897,14 @@ var ClearButton = ({
     event.stopPropagation();
     triggerClear();
   };
+  const handlePointerDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleMouseDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
   const handleKeyDown = (event) => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -4909,6 +4917,8 @@ var ClearButton = ({
     {
       role: "button",
       tabIndex: 0,
+      onPointerDown: handlePointerDown,
+      onMouseDown: handleMouseDown,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       className: `clear-button ${className}`.trim(),
@@ -6339,7 +6349,7 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance whitespace-pre-wrap",
         className
       ),
       ...props,
@@ -6785,6 +6795,7 @@ var Truncated = ({
   const [isTruncated, setIsTruncated] = React__namespace.useState(false);
   const [measureWidth, setMeasureWidth] = React__namespace.useState(0);
   const Comp = as;
+  const isStringChildren = typeof children === "string";
   const normalizedChildren = typeof children === "string" ? children.replace(/>/g, ">\u200B") : children;
   const lineClampLines = typeof ellipsis === "number" ? ellipsis : typeof ellipsis === "object" ? ellipsis?.lineClamp ?? 3 : null;
   const enableMeasure = Boolean(ellipsis) && !tooltipProps?.disabled;
@@ -6824,19 +6835,31 @@ var Truncated = ({
       overflow: "hidden"
     };
   }, [lineClampLines, style]);
-  const baseContent = /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref: elementRef, className: cn(truncationClass, className), style: clampedStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
-    EllipsisMeasure,
+  const contentWhitespaceClass = React__namespace.useMemo(() => {
+    if (!isStringChildren) return void 0;
+    return truncationClass === "truncate" ? "whitespace-pre" : "whitespace-pre-wrap";
+  }, [isStringChildren, truncationClass]);
+  const baseContent = /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
     {
-      enableMeasure,
-      text: normalizedChildren,
-      width: measureWidth,
-      rows: lineClampLines ?? 1,
-      expanded: false,
-      miscDeps: [truncationClass],
-      onEllipsis: setIsTruncated,
-      children: () => normalizedChildren
+      ref: elementRef,
+      className: cn(truncationClass, contentWhitespaceClass, className),
+      style: clampedStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        EllipsisMeasure,
+        {
+          enableMeasure,
+          text: normalizedChildren,
+          width: measureWidth,
+          rows: lineClampLines ?? 1,
+          expanded: false,
+          miscDeps: [truncationClass],
+          onEllipsis: setIsTruncated,
+          children: () => normalizedChildren
+        }
+      )
     }
-  ) });
+  );
   let tooltipContent = normalizedChildren;
   if (typeof ellipsis === "object") {
     tooltipContent = ellipsis?.content ?? normalizedChildren;
@@ -6864,6 +6887,7 @@ var Truncated = ({
             side: tooltipSide,
             className: cn(
               "text-white bg-sus-secondary-gray-10 max-w-xs sm:max-w-md wrap-break-word shadow-lg",
+              isStringChildren && "whitespace-pre-wrap",
               tooltipContentClassName
             ),
             arrowClassName: cn("bg-sus-secondary-gray-10 fill-sus-secondary-gray-10", tooltipArrowClassName),
@@ -8637,7 +8661,7 @@ var sanitizeInput = (val) => {
   if (/[%*~^]/.test(trimmed)) return "__INVALID_WILDCARD__";
   if (/[%><={}\\[\]"']/u.test(trimmed)) return "__INVALID_CHAR__";
   if (/\p{Cc}/u.test(val)) return "__INVALID_CONTROL_CHAR__";
-  return trimmed.replace(/\s+/g, " ");
+  return val;
 };
 var numericTypes = ["number"];
 var dateTypes = ["date", "datemonth"];
@@ -10006,6 +10030,291 @@ var DataTable = ({
   );
 };
 var DataTable_default = DataTable;
+var defaultValueFormatter3 = (date) => dateFns.format(date, "yyyy-MM-dd'T'HH:mm:ss");
+var parseWithPatterns = (value) => {
+  const patterns = ["yyyy-MM-dd'T'HH:mm:ss", "yyyy-MM-dd HH:mm", "yyyy-MM-dd"];
+  for (const pattern of patterns) {
+    const parsed = dateFns.parse(value, pattern, /* @__PURE__ */ new Date());
+    if (dateFns.isValid(parsed)) return parsed;
+  }
+  return void 0;
+};
+var defaultValueParser3 = (value) => {
+  const isoParsed = dateFns.parseISO(value);
+  if (dateFns.isValid(isoParsed)) return isoParsed;
+  return parseWithPatterns(value);
+};
+var DateTimePicker = ({
+  value,
+  onChange,
+  onValueChange,
+  disabled = false,
+  invalid = false,
+  allowClear = true,
+  use24Hour = false,
+  placeholderDate = "Select date",
+  placeholderTime = "Select time",
+  className,
+  datePickerClassName,
+  timePickerClassName,
+  popoverContentClassName,
+  clearAriaLabel = "Clear date time",
+  minuteStep = 5,
+  minDateTime,
+  maxDateTime,
+  valueFormatter,
+  valueParser,
+  datePickerProps,
+  timePickerProps
+}) => {
+  const [open, setOpen] = React__namespace.default.useState(false);
+  const hourListRef = React__namespace.default.useRef(null);
+  const minuteListRef = React__namespace.default.useRef(null);
+  const parser = React__namespace.default.useMemo(() => valueParser ?? defaultValueParser3, [valueParser]);
+  const outputFormatter = React__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter3, [valueFormatter]);
+  const parseInput = React__namespace.default.useCallback(
+    (input) => {
+      if (input === null || input === void 0) return void 0;
+      if (input instanceof Date) return dateFns.isValid(input) ? input : void 0;
+      const parsed = parser(input);
+      return parsed && dateFns.isValid(parsed) ? parsed : void 0;
+    },
+    [parser]
+  );
+  const isControlled = value !== void 0;
+  const parsedValue = React__namespace.default.useMemo(() => parseInput(value), [parseInput, value]);
+  const [internalValue, setInternalValue] = React__namespace.default.useState(() => parsedValue);
+  React__namespace.default.useEffect(() => {
+    if (isControlled) {
+      setInternalValue(parsedValue);
+    }
+  }, [isControlled, parsedValue]);
+  const currentValue = isControlled ? parsedValue : internalValue;
+  const emitChange = React__namespace.default.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onChange?.(next);
+      onValueChange?.(next ? outputFormatter(next) : void 0);
+    },
+    [isControlled, onChange, onValueChange, outputFormatter]
+  );
+  const makeDateTime = React__namespace.default.useCallback((baseDate, hour, minute) => {
+    const clampedHour = Math.min(23, Math.max(0, hour));
+    const clampedMinute = Math.min(59, Math.max(0, minute));
+    return new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate(),
+      clampedHour,
+      clampedMinute,
+      0,
+      0
+    );
+  }, []);
+  const handleDateChange = React__namespace.default.useCallback(
+    (nextDate) => {
+      if (!nextDate) {
+        emitChange(void 0);
+        return;
+      }
+      emitChange(new Date(nextDate.getFullYear(), nextDate.getMonth(), nextDate.getDate(), 0, 0, 0, 0));
+    },
+    [emitChange]
+  );
+  const handleTimeApply = React__namespace.default.useCallback(
+    (hour, minute) => {
+      const baseDate = currentValue;
+      if (!baseDate) return;
+      emitChange(makeDateTime(baseDate, hour, minute));
+    },
+    [currentValue, emitChange, makeDateTime]
+  );
+  const currentHour = currentValue?.getHours();
+  const currentMinute = currentValue?.getMinutes();
+  const handleHourSelect = React__namespace.default.useCallback(
+    (hour) => {
+      handleTimeApply(hour, currentMinute ?? 0);
+    },
+    [currentMinute, handleTimeApply]
+  );
+  const handleMinuteSelect = React__namespace.default.useCallback(
+    (minute) => {
+      handleTimeApply(currentHour ?? 0, minute);
+      setOpen(false);
+    },
+    [currentHour, handleTimeApply]
+  );
+  const hours = React__namespace.default.useMemo(() => Array.from({ length: 24 }, (_, index) => 23 - index), []);
+  const minuteInterval = React__namespace.default.useMemo(() => {
+    const safeStep = Math.min(60, Math.max(1, minuteStep));
+    return Array.from({ length: Math.ceil(60 / safeStep) }, (_, index) => index * safeStep).filter(
+      (value2) => value2 < 60
+    );
+  }, [minuteStep]);
+  const displayLabel = React__namespace.default.useMemo(() => {
+    if (!currentValue) return `${placeholderDate} ${placeholderTime}`;
+    return dateFns.format(currentValue, use24Hour ? "dd/MM/yyyy HH:mm" : "dd/MM/yyyy hh:mm a");
+  }, [currentValue, placeholderDate, placeholderTime, use24Hour]);
+  const canSelectTime = !disabled && !!currentValue;
+  const isHourDisabled = React__namespace.default.useCallback(
+    (hour) => {
+      if (!currentValue) return true;
+      const testDateTime = new Date(
+        currentValue.getFullYear(),
+        currentValue.getMonth(),
+        currentValue.getDate(),
+        hour,
+        0,
+        0,
+        0
+      );
+      if (minDateTime && testDateTime < minDateTime) return true;
+      if (maxDateTime && testDateTime > maxDateTime) return true;
+      return false;
+    },
+    [currentValue, minDateTime, maxDateTime]
+  );
+  const isMinuteDisabled = React__namespace.default.useCallback(
+    (minute) => {
+      if (!currentValue || typeof currentHour === "undefined") return true;
+      const testDateTime = new Date(
+        currentValue.getFullYear(),
+        currentValue.getMonth(),
+        currentValue.getDate(),
+        currentHour,
+        minute,
+        0,
+        0
+      );
+      if (minDateTime && testDateTime < minDateTime) return true;
+      if (maxDateTime && testDateTime > maxDateTime) return true;
+      return false;
+    },
+    [currentValue, currentHour, minDateTime, maxDateTime]
+  );
+  const scrollToSelected = React__namespace.default.useCallback((container, selector) => {
+    if (!container) return;
+    const element = container.querySelector(selector);
+    if (!element) return;
+    const target = element.offsetTop - container.clientHeight / 2 + element.clientHeight / 2;
+    container.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
+  }, []);
+  React__namespace.default.useEffect(() => {
+    if (!open) return;
+    if (typeof currentHour === "number") {
+      scrollToSelected(hourListRef.current, `[data-hour="${currentHour}"]`);
+    }
+    if (typeof currentMinute === "number") {
+      scrollToSelected(minuteListRef.current, `[data-minute="${currentMinute}"]`);
+    }
+  }, [currentHour, currentMinute, open, scrollToSelected]);
+  const handleClear = React__namespace.default.useCallback(() => {
+    emitChange(void 0);
+    setOpen(false);
+  }, [emitChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          disabled,
+          "aria-invalid": invalid || void 0,
+          className: cn(
+            "group relative flex! w-full items-center justify-between rounded-md bg-white! pl-4 text-left text-sm font-medium shadow-none border border-sus-secondary-gray-8 focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:border-black disabled:bg-sus-secondary-gray-3!",
+            "min-h-9",
+            currentValue ? "text-gray-700" : "text-gray-400",
+            invalid && "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/30",
+            allowClear && currentValue ? "pr-8" : "pr-4"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate font-light", children: displayLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-2 text-black group-disabled:text-sus-secondary-gray-8 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SuiCalendarIcon2, { className: "h-4 w-4" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: cn("w-auto p-0", popoverContentClassName), align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DatePicker,
+          {
+            ...datePickerProps,
+            className: cn(datePickerProps?.className, datePickerClassName),
+            selectionMode: "single",
+            selectedDate: currentValue,
+            onDateSelect: handleDateChange,
+            minDate: minDateTime,
+            maxDate: maxDateTime
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex border-t sm:border-t-0 sm:border-l p-2",
+              !canSelectTime && "opacity-60",
+              timePickerClassName,
+              timePickerProps?.panelClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-14 border-r pr-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: hourListRef, className: "h-[300px] overflow-y-auto space-y-1", children: hours.map((hour) => {
+                const selected = currentHour === hour;
+                const hourDisabled = isHourDisabled(hour);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-hour": hour,
+                    disabled: !canSelectTime || hourDisabled,
+                    onClick: () => handleHourSelect(hour),
+                    className: cn(
+                      "h-8 w-full rounded-md text-sm transition-colors",
+                      selected ? "bg-[#379a2a] text-white hover:bg-[#379a2a]" : "text-foreground hover:bg-sus-secondary-gray-3",
+                      (!canSelectTime || hourDisabled) && "cursor-not-allowed opacity-50"
+                    ),
+                    children: String(hour).padStart(2, "0")
+                  },
+                  hour
+                );
+              }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-14 pl-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: minuteListRef, className: "h-[300px] overflow-y-auto space-y-1", children: minuteInterval.map((minute) => {
+                const selected = currentMinute === minute;
+                const minuteDisabled = isMinuteDisabled(minute);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-minute": minute,
+                    disabled: !canSelectTime || minuteDisabled,
+                    onClick: () => handleMinuteSelect(minute),
+                    className: cn(
+                      "h-8 w-full rounded-md text-sm transition-colors",
+                      selected ? "bg-[#379a2a] text-white hover:bg-[#379a2a]" : "text-foreground hover:bg-sus-secondary-gray-3",
+                      (!canSelectTime || minuteDisabled) && "cursor-not-allowed opacity-50"
+                    ),
+                    children: String(minute).padStart(2, "0")
+                  },
+                  minute
+                );
+              }) }) })
+            ] })
+          }
+        )
+      ] }) })
+    ] }),
+    allowClear && !!currentValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+      ClearButton,
+      {
+        onClick: handleClear,
+        ariaLabel: clearAriaLabel,
+        title: clearAriaLabel,
+        className: "absolute right-3 top-1/2 z-10 -translate-y-1/2"
+      }
+    )
+  ] });
+};
 function Dialog2(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Root, { "data-slot": "dialog", ...props });
 }
@@ -16283,7 +16592,10 @@ var DefaultHeader = ({
     "span",
     {
       ref: titleRef,
-      className: cn("text-lg font-semibold text-sus-green-1 truncate", classNames?.title),
+      className: cn(
+        "text-lg font-semibold text-sus-green-1 truncate whitespace-pre",
+        classNames?.title
+      ),
       children: title
     }
   ) : null;
@@ -16300,10 +16612,10 @@ var DefaultHeader = ({
         }
       ) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
-        subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs text-gray-500", classNames?.subtitle), children: subtitle }) : null,
+        subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs text-gray-500 whitespace-pre-wrap", classNames?.subtitle), children: subtitle }) : null,
         textElement ? isTruncated ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: textElement }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: title })
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "whitespace-pre-wrap", children: title })
         ] }) : textElement : null
       ] })
     ] }),
@@ -16359,351 +16671,6 @@ var RightPanelContainer = ({
   );
 };
 var RightPanelContainer_default = RightPanelContainer;
-var defaultDisplayFormatter3 = (date, use24Hour) => use24Hour ? dateFns.format(date, "HH:mm") : dateFns.format(date, "hh:mm a");
-var defaultValueFormatter3 = (date) => dateFns.format(date, "HH:mm");
-var defaultValueParser3 = (value) => {
-  let parsed = dateFns.parse(value, "HH:mm", /* @__PURE__ */ new Date());
-  if (dateFns.isValid(parsed)) return parsed;
-  parsed = dateFns.parse(value, "HH:mm:ss", /* @__PURE__ */ new Date());
-  if (dateFns.isValid(parsed)) return parsed;
-  parsed = dateFns.parse(value, "hh:mm a", /* @__PURE__ */ new Date());
-  if (dateFns.isValid(parsed)) return parsed;
-  return void 0;
-};
-var TimePicker = React__namespace.forwardRef(
-  ({
-    value,
-    onChange,
-    onValueChange,
-    disabled = false,
-    className,
-    buttonClassName,
-    wrapperClassName,
-    placeholder: placeholder2,
-    use24Hour = false,
-    iconPosition = "start",
-    icon,
-    allowClear = true,
-    clearAriaLabel = "Clear time",
-    displayFormatter,
-    valueFormatter,
-    valueParser,
-    invalid = false
-  }, ref) => {
-    const [open, setOpen] = React__namespace.useState(false);
-    const [hours, setHours] = React__namespace.useState("12");
-    const [minutes, setMinutes] = React__namespace.useState("00");
-    const [period, setPeriod] = React__namespace.useState("AM");
-    const parser = React__namespace.useMemo(() => valueParser ?? defaultValueParser3, [valueParser]);
-    const outputFormatter = React__namespace.useMemo(
-      () => valueFormatter ?? defaultValueFormatter3,
-      [valueFormatter]
-    );
-    const labelFormatter = React__namespace.useMemo(
-      () => displayFormatter ?? defaultDisplayFormatter3,
-      [displayFormatter]
-    );
-    const parseInput = React__namespace.useCallback(
-      (input) => {
-        if (input === null || input === void 0) return void 0;
-        if (input instanceof Date) return dateFns.isValid(input) ? input : void 0;
-        const parsed = parser(input);
-        return parsed && dateFns.isValid(parsed) ? parsed : void 0;
-      },
-      [parser]
-    );
-    const parsedValue = React__namespace.useMemo(() => parseInput(value), [parseInput, value]);
-    const hasValue = parsedValue !== void 0;
-    React__namespace.useEffect(() => {
-      if (parsedValue) {
-        const hour24 = parsedValue.getHours();
-        const minute = parsedValue.getMinutes();
-        if (use24Hour) {
-          setHours(String(hour24).padStart(2, "0"));
-        } else {
-          const newPeriod = hour24 >= 12 ? "PM" : "AM";
-          const hour12 = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
-          setHours(String(hour12).padStart(2, "0"));
-          setPeriod(newPeriod);
-        }
-        setMinutes(String(minute).padStart(2, "0"));
-      } else {
-        setHours(use24Hour ? "00" : "12");
-        setMinutes("00");
-        setPeriod("AM");
-      }
-    }, [parsedValue, use24Hour]);
-    const createTimeDate = (h, m, p) => {
-      let hour = parseInt(h) || 0;
-      const minute = parseInt(m) || 0;
-      if (!use24Hour) {
-        if (p === "PM" && hour !== 12) {
-          hour += 12;
-        } else if (p === "AM" && hour === 12) {
-          hour = 0;
-        }
-      }
-      const today = /* @__PURE__ */ new Date();
-      return new Date(today.getFullYear(), today.getMonth(), today.getDate(), hour, minute, 0, 0);
-    };
-    const emitChange = (date) => {
-      onChange?.(date);
-      onValueChange?.(outputFormatter(date));
-    };
-    const handleClear = () => {
-      onChange?.(void 0);
-      onValueChange?.(void 0);
-    };
-    const handleHourChange = (newHour) => {
-      const hour = parseInt(newHour) || 0;
-      const maxHour = use24Hour ? 23 : 12;
-      const minHour = use24Hour ? 0 : 1;
-      if (hour <= maxHour && hour >= minHour) {
-        setHours(newHour.padStart(2, "0"));
-        emitChange(createTimeDate(newHour, minutes, period));
-      }
-    };
-    const handleMinuteChange = (newMinute) => {
-      const minute = parseInt(newMinute) || 0;
-      if (minute <= 59 && minute >= 0) {
-        setMinutes(newMinute.padStart(2, "0"));
-        emitChange(createTimeDate(hours, newMinute, period));
-      }
-    };
-    const handlePeriodToggle = () => {
-      const newPeriod = period === "AM" ? "PM" : "AM";
-      setPeriod(newPeriod);
-      emitChange(createTimeDate(hours, minutes, newPeriod));
-    };
-    const incrementHour = () => {
-      const hour = parseInt(hours) || 0;
-      const maxHour = use24Hour ? 23 : 12;
-      const minHour = use24Hour ? 0 : 1;
-      const newHour = hour >= maxHour ? minHour : hour + 1;
-      handleHourChange(String(newHour));
-    };
-    const decrementHour = () => {
-      const hour = parseInt(hours) || 0;
-      const maxHour = use24Hour ? 23 : 12;
-      const minHour = use24Hour ? 0 : 1;
-      const newHour = hour <= minHour ? maxHour : hour - 1;
-      handleHourChange(String(newHour));
-    };
-    const incrementMinute = () => {
-      const minute = parseInt(minutes) || 0;
-      const newMinute = minute >= 59 ? 0 : minute + 1;
-      handleMinuteChange(String(newMinute));
-    };
-    const decrementMinute = () => {
-      const minute = parseInt(minutes) || 0;
-      const newMinute = minute <= 0 ? 59 : minute - 1;
-      handleMinuteChange(String(newMinute));
-    };
-    const displayValue = parsedValue ? labelFormatter(parsedValue, use24Hour) : placeholder2;
-    const displayIcon = icon || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" });
-    const showClear = allowClear && hasValue && !disabled;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex w-full", wrapperClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            variant: "outline",
-            disabled,
-            className: cn(
-              "w-full justify-between text-left font-normal",
-              !hasValue && "text-muted-foreground",
-              invalid && "border-destructive focus-visible:ring-destructive",
-              showClear && "pr-8",
-              buttonClassName,
-              className
-            ),
-            children: [
-              iconPosition === "start" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: displayIcon }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "flex-1 truncate",
-                    iconPosition === "start" && "ml-2",
-                    iconPosition === "end" && "mr-2"
-                  ),
-                  children: displayValue || placeholder2 || "Select time"
-                }
-              ),
-              iconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: displayIcon })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-4", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8",
-                onClick: incrementHour,
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Input,
-              {
-                ref,
-                type: "text",
-                inputMode: "numeric",
-                value: hours,
-                onChange: (e) => handleHourChange(e.target.value),
-                className: "w-16 text-center",
-                maxLength: 2
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8",
-                onClick: decrementHour,
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
-                  }
-                )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold", children: ":" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8",
-                onClick: incrementMinute,
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Input,
-              {
-                type: "text",
-                inputMode: "numeric",
-                value: minutes,
-                onChange: (e) => handleMinuteChange(e.target.value),
-                className: "w-16 text-center",
-                maxLength: 2
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8",
-                onClick: decrementMinute,
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
-                  }
-                )
-              }
-            )
-          ] }),
-          !use24Hour && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-16 bg-border mx-1" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  variant: period === "AM" ? "default" : "outline",
-                  size: "sm",
-                  className: "w-14 h-12",
-                  onClick: handlePeriodToggle,
-                  type: "button",
-                  children: "AM"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  variant: period === "PM" ? "default" : "outline",
-                  size: "sm",
-                  className: "w-14 h-12",
-                  onClick: handlePeriodToggle,
-                  type: "button",
-                  children: "PM"
-                }
-              )
-            ] })
-          ] })
-        ] }) })
-      ] }),
-      showClear && /* @__PURE__ */ jsxRuntime.jsx(
-        ClearButton,
-        {
-          onClick: handleClear,
-          ariaLabel: clearAriaLabel,
-          className: "absolute right-2 top-1/2 -translate-y-1/2"
-        }
-      )
-    ] });
-  }
-);
-TimePicker.displayName = "TimePicker";
 
 // src/components/cropperModal/type.ts
 var CropperModalError = class extends Error {
@@ -17798,7 +17765,7 @@ var TruncatedMouseEnterDiv = ({
         ref: textRef,
         onMouseEnter: checkTruncation,
         onMouseLeave: () => setIsTruncated(false),
-        className: cn("truncate", className),
+        className: cn("truncate whitespace-pre", className),
         children: value
       }
     ) }),
@@ -18707,6 +18674,7 @@ exports.DashboardIcon = DashboardIcon;
 exports.DataEntryIcon = DataEntryIcon;
 exports.DataTable = DataTable_default;
 exports.DatePicker = DatePicker2;
+exports.DateTimePicker = DateTimePicker;
 exports.DecreaseIcon = DecreaseIcon;
 exports.Dialog = Dialog2;
 exports.DialogAlert = DialogAlert;
@@ -18871,7 +18839,6 @@ exports.TableOfContents = TableOfContents;
 exports.TableRow = TableRow;
 exports.TagListViewIcon = TagListViewIcon;
 exports.TextArea = TextArea;
-exports.TimePicker = TimePicker;
 exports.ToolBoxIcon = ToolBoxIcon;
 exports.Tooltip = Tooltip2;
 exports.TooltipArrow = TooltipArrow;