@bigbinary/neeto-atoms 1.0.145 → 1.1.0

package/dist/{DatePicker-DznpJnhm.js → DatePicker-BC9AOZJ2.js}

@@ -1,9 +1,9 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useMemo, useId, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { forwardRef, useRef, useState, useEffect, useId, useCallback, useMemo } from 'react';
 import { Calendar as Calendar$1 } from './primitives/Calendar.js';
 import { PopoverAnchor, Popover, PopoverTrigger, PopoverContent } from './primitives/Popover.js';
 import { c as cn } from './utils-BJnb9o5c.js';
-import { u as useControlledOpen, l as isFixedWidthFormat, m as buildRangeMaskTemplate, d as buildMaskTemplate, b as useOutsideClickClose, e as useCursorRestore, T as TimePickerPanel, j as applyMask, n as dateToTimeValue } from './TimePickerPanel-n-Dz1p5N.js';
+import { t as to12Hour, a as to24Hour, p as padNumber, d as timeValueEquals, C as Clock, u as useControlledOpen, q as isFixedWidthFormat, r as buildRangeMaskTemplate, h as buildMaskTemplate, e as useOutsideClickClose, j as useCursorRestore, m as applyMask, s as dateToTimeValue } from './utils-Ca3DmOrC.js';
 import pureDayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { dayjs } from '@bigbinary/neeto-commons-frontend/utils';
@@ -12,6 +12,9 @@ import { Button } from './primitives/Button.js';
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from './primitives/Field.js';
 import { c as createLucideIcon } from './createLucideIcon-C8ycilSN.js';
 import { X } from './x-_o2T3n6D.js';
+import { useTranslation } from 'react-i18next';
+import { Label } from './primitives/Label.js';
+import { Switch } from './primitives/Switch.js';
 import { C as ChevronLeft } from './chevron-left-BDoT8E2-.js';
 import { C as ChevronRight } from './chevron-right-DQnrO-ek.js';
 
@@ -23,16 +26,31 @@ import { C as ChevronRight } from './chevron-right-DQnrO-ek.js';
  */
 
 
-const __iconNode = [
+const __iconNode$1 = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode);
+const Calendar = createLucideIcon("calendar", __iconNode$1);
+
+/**
+ * @license lucide-react v0.577.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
+  ["path", { d: "M2 12h20", key: "9i4pu4" }]
+];
+const Globe = createLucideIcon("globe", __iconNode);
 
 const DEFAULT_DATE_FORMAT = "dd/MM/yyyy";
-const DEFAULT_TIME_FORMAT = "HH:mm:ss";
+const DEFAULT_TIME_FORMAT = "hh:mm A";
 const CALENDAR_NAVIGATION_YEAR_RANGE = 100;
 const INITIAL_TIME_VALUE = {
   hours: 0,
@@ -103,6 +121,33 @@ const getInitialCalendarMonth = (value, defaultValue, type) => {
 };
 const normalizeToDayjsFormat = (fmt) => fmt.replace(/\byyyy\b/g, "YYYY").replace(/\byy\b/g, "YY").replace(/\bdd\b/g, "DD").replace(/\bd\b/g, "D");
 const normalizeToDateFnsFormat = (fmt) => fmt.replace(/YYYY/g, "yyyy").replace(/YY/g, "yy").replace(/DD/g, "dd").replace(/\bD\b/g, "d");
+const roundToMinuteStep = (date, step) => {
+  const rounded = new Date(date);
+  const minutes = Math.min(
+    60 - step,
+    Math.round(date.getMinutes() / step) * step
+  );
+  rounded.setMinutes(minutes, 0, 0);
+  return rounded;
+};
+const getTimezoneLabel = (timezone) => {
+  const zone = timezone === "utc" ? "UTC" : dayjs().$x?.$timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+  try {
+    const zoneName = (timeZoneName) => new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName }).formatToParts(/* @__PURE__ */ new Date()).find((part) => part.type === "timeZoneName")?.value;
+    const name = zoneName("long") ?? zone;
+    const offset = (zoneName("longOffset") ?? "GMT").replace("GMT", "UTC").replace(/([+-])0?(\d+):00$/, "$1$2").replace(/([+-])0(\d)/, "$1$2");
+    return `${name} (${offset === "UTC" ? "UTC+0" : offset})`;
+  } catch {
+    return zone;
+  }
+};
+const roundUpToMinuteStep = (date, step) => {
+  const rounded = new Date(date);
+  const hasSeconds = date.getSeconds() > 0 || date.getMilliseconds() > 0;
+  const minutes = date.getMinutes() + (hasSeconds ? 1 : 0);
+  rounded.setMinutes(Math.ceil(minutes / step) * step, 0, 0);
+  return rounded;
+};
 const formatDate = (date, formatStr) => {
   if (!date) return "";
   try {
@@ -261,6 +306,7 @@ const DatePickerFooter = ({
   timezone,
   onTimezoneChange,
   nowDisabled,
+  showNow = true,
   onNow,
   onOk,
   okLabel = "OK",
@@ -275,7 +321,7 @@ const DatePickerFooter = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
+        showNow && /* @__PURE__ */ jsx(
           Button,
           {
             variant: "ghost",
@@ -435,6 +481,443 @@ const DatePickerTrigger = forwardRef(
 );
 DatePickerTrigger.displayName = "DatePickerTrigger";
 
+const SEGMENT_KEYS = ["hour", "minute", "period"];
+const EMPTY_SEGMENT = { text: "", done: false, auto: false };
+const segment = (text, done, auto = false) => ({
+  text,
+  done,
+  auto
+});
+const clampIndex = (index) => Math.max(0, Math.min(2, index));
+const withSegment = (state, key, value) => ({ ...state, [key]: value });
+const snapMinute = (minutes, step = 1) => padNumber(Math.min(60 - step, Math.round(Number(minutes) / step) * step));
+const emptySegmentedTime = () => ({
+  hour: EMPTY_SEGMENT,
+  minute: EMPTY_SEGMENT,
+  period: EMPTY_SEGMENT,
+  active: 0
+});
+const segmentedTimeFromValue = (value, step = 1) => {
+  const { hour12, period } = to12Hour(value.hours);
+  return {
+    hour: segment(String(hour12), true),
+    minute: segment(snapMinute(value.minutes, step), true),
+    period: segment(period, true),
+    active: 0
+  };
+};
+const isSegmentedTimeEmpty = (state) => SEGMENT_KEYS.every((key) => state[key].text === "");
+const getSegmentedTimeError = (state) => {
+  if (isSegmentedTimeEmpty(state)) return "timeRequired";
+  if (!state.hour.text) return "hourRequired";
+  if (!state.minute.text) return "minuteRequired";
+  if (!state.period.text) return "periodRequired";
+  return null;
+};
+const segmentedTimeToValue = (state) => {
+  if (getSegmentedTimeError(state)) return null;
+  return {
+    hours: to24Hour(Number(state.hour.text), state.period.text),
+    minutes: Number(state.minute.text),
+    seconds: 0
+  };
+};
+const finishSegment = (state, key, step) => {
+  const { text } = state[key];
+  if (!text) return state;
+  if (key === "hour" && text === "0") {
+    return withSegment(state, "hour", EMPTY_SEGMENT);
+  }
+  if (key === "minute" && text.length === 1) {
+    return withSegment(
+      state,
+      "minute",
+      segment(snapMinute(text, step), true, true)
+    );
+  }
+  return withSegment(state, key, { ...state[key], done: true });
+};
+const finishActiveSegment = (state, step = 1) => finishSegment(state, SEGMENT_KEYS[state.active], step);
+const focusSegment = (state, index, step = 1) => {
+  const next = clampIndex(index);
+  const finished = next > state.active ? finishActiveSegment(state, step) : state;
+  return { ...finished, active: next };
+};
+const focusFirstEmptySegment = (state) => {
+  const index = SEGMENT_KEYS.findIndex((key) => !state[key].text);
+  return { ...state, active: index === -1 ? 2 : index };
+};
+const nextSegment = (state, step = 1) => state[SEGMENT_KEYS[state.active]].text ? focusSegment(state, state.active + 1, step) : state;
+const previousSegment = (state) => focusSegment(state, state.active - 1);
+const typeDigit = (state, digit, step = 1) => {
+  const advance = (next, index) => focusSegment(next, index, step);
+  const key = SEGMENT_KEYS[state.active];
+  if (key === "period") return state;
+  const current = state[key];
+  const text = current.done ? "" : current.text;
+  if (key === "hour") {
+    if (text === "") {
+      if (digit === "0" || digit === "1") {
+        return withSegment(state, "hour", segment(digit, false));
+      }
+      return advance(withSegment(state, "hour", segment(digit, true)), 1);
+    }
+    if (text === "1") {
+      if ("012".includes(digit)) {
+        return advance(
+          withSegment(state, "hour", segment(`1${digit}`, true)),
+          1
+        );
+      }
+      const moved = advance(withSegment(state, "hour", segment("1", true)), 1);
+      return typeDigit(moved, digit, step);
+    }
+    if (digit === "0") return state;
+    return advance(withSegment(state, "hour", segment(digit, true)), 1);
+  }
+  if (text === "") {
+    if (digit >= "6") {
+      return advance(
+        withSegment(
+          state,
+          "minute",
+          segment(snapMinute(digit, step), true, true)
+        ),
+        2
+      );
+    }
+    return withSegment(state, "minute", segment(digit, false));
+  }
+  return advance(
+    withSegment(state, "minute", segment(snapMinute(text + digit, step), true)),
+    2
+  );
+};
+const typePeriod = (state, letter, step = 1) => withSegment(
+  focusSegment(state, 2, step),
+  "period",
+  segment(letter === "a" ? "AM" : "PM", true)
+);
+const togglePeriod = (state) => withSegment(
+  state,
+  "period",
+  segment(state.period.text === "AM" ? "PM" : "AM", true)
+);
+const stepSegment = (state, direction, step = 1) => {
+  const key = SEGMENT_KEYS[state.active];
+  if (key === "hour") {
+    const hour = Number(state.hour.text) || (direction > 0 ? 0 : 1);
+    const next = (hour - 1 + direction + 12) % 12 + 1;
+    return withSegment(state, "hour", segment(String(next), true));
+  }
+  if (key === "minute") {
+    const minute = state.minute.text === "" ? direction > 0 ? -step : 0 : Number(state.minute.text);
+    const stepped = direction > 0 ? Math.floor(minute / step) * step + step : Math.ceil(minute / step) * step - step;
+    return withSegment(
+      state,
+      "minute",
+      segment(padNumber((stepped + 60) % 60), true)
+    );
+  }
+  return togglePeriod(state);
+};
+const backspace = (state) => {
+  const moveBack = state[SEGMENT_KEYS[state.active]].text === "" && state.active > 0;
+  const active = moveBack ? clampIndex(state.active - 1) : state.active;
+  const key = SEGMENT_KEYS[active];
+  const current = state[key];
+  const text = key === "period" || current.auto ? "" : current.text.slice(0, -1);
+  return { ...withSegment(state, key, segment(text, false)), active };
+};
+const parsePastedTime = (text, step = 1) => {
+  const match = text.trim().toLowerCase().match(/^(\d{1,2}):?(\d{2})?\s*([ap])?\.?m?\.?$/);
+  if (!match) return null;
+  let hours = Number(match[1]);
+  const minutes = Number(match[2] ?? 0);
+  const period = match[3];
+  if (minutes > 59) return null;
+  if (period) {
+    if (hours < 1 || hours > 12) return null;
+    hours = hours % 12 + (period === "p" ? 12 : 0);
+  } else if (hours > 23) {
+    return null;
+  }
+  return { hours, minutes: Number(snapMinute(minutes, step)), seconds: 0 };
+};
+
+const PLACEHOLDERS = ["hh", "mm", "--"];
+const SegmentedTimeInput = ({
+  value,
+  minuteStep,
+  onChange,
+  onErrorChange,
+  invalid = false,
+  disabled = false,
+  autoFocus = false,
+  "aria-describedby": ariaDescribedBy
+}) => {
+  const { t } = useTranslation();
+  const fieldRef = useRef(null);
+  const step = minuteStep ?? 1;
+  const [time, setTime] = useState(
+    () => segmentedTimeFromValue(value, step)
+  );
+  const lastEmittedRef = useRef(value);
+  useEffect(() => {
+    if (timeValueEquals(value, lastEmittedRef.current)) return;
+    lastEmittedRef.current = value;
+    setTime(segmentedTimeFromValue(value, step));
+  }, [value]);
+  const error = getSegmentedTimeError(time);
+  useEffect(() => {
+    onErrorChange(error);
+  }, [error, onErrorChange]);
+  useEffect(() => {
+    const snapped = segmentedTimeToValue(time);
+    if (snapped && !timeValueEquals(snapped, value)) {
+      lastEmittedRef.current = snapped;
+      onChange(snapped);
+    }
+  }, []);
+  useEffect(() => {
+    if (autoFocus) fieldRef.current?.focus();
+  }, [autoFocus]);
+  const update = (next) => {
+    setTime(next);
+    const nextValue = segmentedTimeToValue(next);
+    if (!nextValue || timeValueEquals(nextValue, lastEmittedRef.current)) {
+      return;
+    }
+    lastEmittedRef.current = nextValue;
+    onChange(nextValue);
+  };
+  const consume = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleKeyDown = (event) => {
+    const { key } = event;
+    if (key === "Tab") {
+      if (!event.shiftKey || time.active !== 2) return;
+      consume(event);
+      update(togglePeriod(time));
+      return;
+    }
+    if ((event.metaKey || event.ctrlKey) && key === "Backspace") {
+      consume(event);
+      update(emptySegmentedTime());
+      return;
+    }
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+    let next = null;
+    if (/^[0-9]$/.test(key)) next = typeDigit(time, key, step);
+    else if (/^[ap]$/i.test(key)) {
+      next = typePeriod(time, key.toLowerCase(), step);
+    } else if (/^m$/i.test(key))
+      next = time;
+    else if (key === ":" || key === " " || key === "ArrowRight") {
+      next = nextSegment(time, step);
+    } else if (key === "ArrowLeft") next = previousSegment(time);
+    else if (key === "ArrowUp") next = stepSegment(time, 1, step);
+    else if (key === "ArrowDown") next = stepSegment(time, -1, step);
+    else if (key === "Backspace" || key === "Delete") next = backspace(time);
+    if (!next) return;
+    consume(event);
+    update(next);
+  };
+  const handlePaste = (event) => {
+    event.preventDefault();
+    const pasted = parsePastedTime(event.clipboardData.getData("text"), step);
+    if (pasted) update({ ...segmentedTimeFromValue(pasted, step), active: 2 });
+  };
+  const handleMouseDown = (event) => {
+    if (disabled) return;
+    const segmentEl = event.target.closest(
+      "[data-segment]"
+    );
+    if (segmentEl) {
+      event.preventDefault();
+      fieldRef.current?.focus();
+      update(focusSegment(time, Number(segmentEl.dataset.segment), step));
+      return;
+    }
+    update(focusFirstEmptySegment(time));
+  };
+  const segmentText = (index) => {
+    const { text, done } = time[SEGMENT_KEYS[index]];
+    if (!text) return PLACEHOLDERS[index];
+    return index < 2 && !done ? `${text}_` : text;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: fieldRef,
+      role: "group",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": t("neetoatoms.datePicker.timeField", "Time"),
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": invalid || void 0,
+      "aria-disabled": disabled || void 0,
+      "data-testid": "datepicker-time-input",
+      className: cn(
+        "group/time flex h-9 w-full cursor-text items-center rounded-md border border-input bg-transparent px-3 text-sm tabular-nums outline-none select-none",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        invalid && "border-destructive",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50"
+      ),
+      onBlur: () => update(finishActiveSegment(time, step)),
+      onKeyDown: handleKeyDown,
+      onMouseDown: handleMouseDown,
+      onPaste: handlePaste,
+      children: SEGMENT_KEYS.map((key, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        index === 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-0.5 text-muted-foreground", children: ":" }),
+        index === 2 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-segment": index,
+            "data-testid": `datepicker-time-${key}`,
+            className: cn(
+              "min-w-[2ch] px-0.5 text-center whitespace-pre",
+              !time[key].text && "text-muted-foreground",
+              index === time.active && "group-focus/time:shadow-[inset_0_-1.5px_0_var(--color-muted-foreground)]"
+            ),
+            children: segmentText(index)
+          }
+        )
+      ] }, key))
+    }
+  );
+};
+SegmentedTimeInput.displayName = "SegmentedTimeInput";
+
+const ERROR_DEFAULTS = {
+  timeRequired: "Enter a time, or turn off Add time.",
+  hourRequired: "Enter an hour.",
+  minuteRequired: "Enter minutes.",
+  periodRequired: "Type a or p for AM or PM."
+};
+const stepExamples = (step) => {
+  const pad = (minutes) => `1:${String(minutes).padStart(2, "0")}`;
+  if (step * 2 >= 60) return [pad(0), pad(step)];
+  return [pad(step), pad(30 % step === 0 && step < 30 ? 30 : step * 2)];
+};
+const TimeSection = ({
+  value,
+  minuteStep,
+  onChange,
+  onErrorChange,
+  showError,
+  optional,
+  hasTime,
+  onHasTimeChange,
+  timezoneLabel,
+  disabled = false,
+  className
+}) => {
+  const { t } = useTranslation();
+  const id = useId();
+  const switchId = `datepicker-add-time-${id}`;
+  const hintId = `datepicker-time-hint-${id}`;
+  const errorId = `datepicker-time-error-${id}`;
+  const [error, setError] = useState(null);
+  const [focusOnMount, setFocusOnMount] = useState(false);
+  const handleErrorChange = useCallback(
+    (nextError) => {
+      setError(nextError);
+      onErrorChange(!!nextError);
+    },
+    [onErrorChange]
+  );
+  const handleHasTimeChange = (checked) => {
+    setFocusOnMount(checked);
+    if (!checked) {
+      setError(null);
+      onErrorChange(false);
+    }
+    onHasTimeChange(checked);
+  };
+  const isTimeOn = !optional || hasTime;
+  const showHint = (minuteStep ?? 1) > 1;
+  const errorMessage = isTimeOn && showError && error ? t(`neetoatoms.datePicker.errors.${error}`, ERROR_DEFAULTS[error]) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    optional && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs(
+        Label,
+        {
+          htmlFor: switchId,
+          className: "flex items-center gap-2 font-medium",
+          children: [
+            /* @__PURE__ */ jsx(Clock, { "aria-hidden": true, className: "size-4 text-muted-foreground" }),
+            t("neetoatoms.datePicker.addTime", "Add time")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: switchId,
+          checked: hasTime,
+          "data-testid": "datepicker-add-time-switch",
+          disabled,
+          onCheckedChange: handleHasTimeChange
+        }
+      )
+    ] }),
+    isTimeOn && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        SegmentedTimeInput,
+        {
+          "aria-describedby": [showHint ? hintId : null, errorMessage ? errorId : null].filter(Boolean).join(" ") || void 0,
+          autoFocus: focusOnMount,
+          disabled,
+          invalid: !!errorMessage,
+          minuteStep,
+          value,
+          onChange,
+          onErrorChange: handleErrorChange
+        }
+      ),
+      showHint && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: hintId,
+          className: "text-xs text-muted-foreground",
+          "data-testid": "datepicker-time-hint",
+          children: t("neetoatoms.datePicker.timeHint", {
+            step: minuteStep,
+            first: stepExamples(minuteStep)[0],
+            second: stepExamples(minuteStep)[1],
+            defaultValue: "Only {{step}}-minute steps are allowed, like {{first}} or {{second}}."
+          })
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          className: "text-xs text-destructive",
+          "data-testid": "datepicker-time-error",
+          role: "alert",
+          children: errorMessage
+        }
+      ),
+      timezoneLabel && /* @__PURE__ */ jsxs(
+        "p",
+        {
+          className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground",
+          "data-testid": "datepicker-timezone",
+          children: [
+            /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-3.5 shrink-0" }),
+            timezoneLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+TimeSection.displayName = "TimeSection";
+
 const MonthPicker = ({
   value,
   displayedYear,
@@ -507,7 +990,8 @@ const RangeCalendar = ({
   endMonth,
   onHoverIn,
   onHoverOut,
-  numberOfMonths = 2
+  numberOfMonths = 2,
+  className
 }) => /* @__PURE__ */ jsx("div", { onMouseOver: onHoverIn, onMouseLeave: onHoverOut, children: /* @__PURE__ */ jsx(
   Calendar$1,
   {
@@ -516,7 +1000,10 @@ const RangeCalendar = ({
     captionLayout: "dropdown",
     today: todayDate,
     weekStartsOn,
-    className: "[&_[data-outside][data-selected=true]]:!bg-transparent [&_[data-outside][data-selected=true]]:after:!bg-transparent [&_[data-outside]_button]:!bg-transparent [&_[data-outside]_button]:!text-muted-foreground",
+    className: cn(
+      "[&_[data-outside][data-selected=true]]:!bg-transparent [&_[data-outside][data-selected=true]]:after:!bg-transparent [&_[data-outside]_button]:!bg-transparent [&_[data-outside]_button]:!text-muted-foreground",
+      className
+    ),
     month,
     onMonthChange,
     selected,
@@ -690,6 +1177,11 @@ const YearPicker = ({
   ] });
 };
 
+const TIME_SECTION_CLASS_NAME = "w-0 min-w-full border-t border-border px-3 py-3";
+const SHOW_TIME_CALENDAR_CLASS_NAME = "[--cell-size:--spacing(8.125)]";
+const DEFAULT_ADDED_TIME = { hours: 12, minutes: 0, seconds: 0 };
+const noop = () => {
+};
 const DatePicker = forwardRef(
   ({
     value,
@@ -700,8 +1192,10 @@ const DatePicker = forwardRef(
     dateFormat = DEFAULT_DATE_FORMAT,
     timeFormat = DEFAULT_TIME_FORMAT,
     showTime = false,
-    timePickerFormat,
-    showSeconds = false,
+    showNow = true,
+    minuteStep,
+    timeOptional = true,
+    hasTime: hasTimeProp,
     minDate,
     maxDate,
     disabledDate,
@@ -714,6 +1208,7 @@ const DatePicker = forwardRef(
     allowClear = true,
     required = false,
     timezone,
+    timezoneLabel: timezoneLabelProp,
     onTimezoneChange,
     onOk,
     needConfirm = false,
@@ -748,6 +1243,15 @@ const DatePicker = forwardRef(
     const [pendingDate, setPendingDate] = useState(null);
     const [pendingTime, setPendingTime] = useState(INITIAL_TIME_VALUE);
     const [pendingTimeTo, setPendingTimeTo] = useState(INITIAL_TIME_VALUE);
+    const [hasTimeError, setHasTimeError] = useState(false);
+    const [isTimeErrorRequested, setIsTimeErrorRequested] = useState(false);
+    const isTimeOptional = showTime && timeOptional && type === "date";
+    const [internalHasTime, setInternalHasTime] = useState(
+      () => hasTimeProp ?? (value ?? defaultValue) != null
+    );
+    const committedHasTime = showTime && (!isTimeOptional || (hasTimeProp ?? internalHasTime));
+    const [pendingHasTime, setPendingHasTime] = useState(committedHasTime);
+    const isPendingTimeOn = showTime && (!isTimeOptional || pendingHasTime);
     const currentValue = useMemo(
       () => value !== void 0 ? coerceDateValue(value, type) : internalValue,
       [value, type, internalValue]
@@ -760,10 +1264,13 @@ const DatePicker = forwardRef(
       () => toNativeDate(maxDate) ?? void 0,
       [maxDate]
     );
-    const displayFormat = getDisplayFormat(dateFormat, timeFormat, showTime);
+    const displayFormat = getDisplayFormat(
+      dateFormat,
+      timeFormat,
+      committedHasTime
+    );
     const sizeConfig = SIZE_CONFIG[size];
     const maskEnabled = isFixedWidthFormat(displayFormat);
-    const effectiveTimePickerFormat = timePickerFormat ?? (/\ba\b/i.test(timeFormat) ? "12" : "24");
     const defaultPlaceholder = getDatePlaceholder(
       dateFormat,
       timeFormat,
@@ -800,38 +1307,46 @@ const DatePicker = forwardRef(
       return `${from} - ${to}`;
     }, [currentValue, displayFormat, type]);
     const [inputText, setInputText] = useState(() => getDisplayText());
-    const commitValue = (date) => {
+    const emitChange = (changed, formatted, withTime) => {
+      if (isTimeOptional) onChange?.(changed, formatted, { hasTime: withTime });
+      else onChange?.(changed, formatted);
+    };
+    const commitValue = (date, withTime = committedHasTime) => {
       if (date === null) {
         setInternalValue(null);
+        setInternalHasTime(false);
         if (type === "range") {
-          onChange?.([null, null], ["", ""]);
+          emitChange([null, null], ["", ""], false);
         } else {
-          onChange?.(null, "");
+          emitChange(null, "", false);
         }
         setInputText("");
         return;
       }
+      const commitFormat = getDisplayFormat(dateFormat, timeFormat, withTime);
       const toSerializableDayjs = (d) => {
         const userTzDayjs = toUserTzDayjs(d);
-        if (showTime) return userTzDayjs;
+        if (withTime) return userTzDayjs;
         return userTzDayjs.hour(12).minute(0).second(0).millisecond(0);
       };
       if (Array.isArray(date)) {
         setInternalValue(date);
         const formatted2 = [
-          formatDate(date[0], displayFormat),
-          formatDate(date[1], displayFormat)
+          formatDate(date[0], commitFormat),
+          formatDate(date[1], commitFormat)
         ];
-        onChange?.(
+        emitChange(
           [toSerializableDayjs(date[0]), toSerializableDayjs(date[1])],
-          formatted2
+          formatted2,
+          withTime
         );
         setInputText(`${formatted2[0]} - ${formatted2[1]}`);
         return;
       }
       setInternalValue(date);
-      const formatted = formatDate(date, displayFormat);
-      onChange?.(toSerializableDayjs(date), formatted);
+      setInternalHasTime(withTime);
+      const formatted = formatDate(date, commitFormat);
+      emitChange(toSerializableDayjs(date), formatted, withTime);
       setInputText(formatted);
     };
     const {
@@ -891,30 +1406,33 @@ const DatePicker = forwardRef(
     };
     const commitPendingOnClose = useCallback(() => {
       const hasOkButton = showTime || needConfirm;
-      if (!hasOkButton || !pendingDate) {
+      if (!hasOkButton || !pendingDate || isPendingTimeOn && hasTimeError) {
         setInputText(getDisplayText());
         return;
       }
-      const finalDate = showTime ? applyTimeToDate(pendingDate, pendingTime) : pendingDate;
+      const finalDate = isPendingTimeOn ? applyTimeToDate(pendingDate, pendingTime) : pendingDate;
       const currentSingle = type === "date" ? currentValue : null;
-      const isSame = currentSingle && finalDate.getTime() === currentSingle.getTime();
+      const isSame = currentSingle && isPendingTimeOn === committedHasTime && finalDate.getTime() === currentSingle.getTime();
       if (isSame) {
         setInputText(getDisplayText());
         return;
       }
-      commitValue(finalDate);
+      commitValue(finalDate, isPendingTimeOn);
     }, [
       showTime,
       needConfirm,
       pendingDate,
       pendingTime,
+      isPendingTimeOn,
+      committedHasTime,
       type,
       currentValue,
       getDisplayText,
-      onChange
+      onChange,
+      hasTimeError
     ]);
     const closePopover = useCallback(() => {
-      if (type === "range" && pendingRange?.[0] && pendingRange?.[1]) {
+      if (type === "range" && pendingRange?.[0] && pendingRange?.[1] && !(showTime && hasTimeError)) {
         const [fromBase, toBase] = orderRange(
           pendingRange[0],
           pendingRange[1]
@@ -935,7 +1453,8 @@ const DatePicker = forwardRef(
       pendingTime,
       pendingTimeTo,
       showTime,
-      resetTransientState
+      resetTransientState,
+      hasTimeError
     ]);
     useOutsideClickClose({
       enabled: open,
@@ -946,6 +1465,7 @@ const DatePicker = forwardRef(
     const openPopover = () => {
       setOpen(true);
       resetTransientState();
+      setIsTimeErrorRequested(false);
       if (type === "range") {
         const rangeVal = currentValue;
         const fromDate = rangeVal?.[0] ?? null;
@@ -958,14 +1478,19 @@ const DatePicker = forwardRef(
         return;
       }
       const dateVal = currentValue;
+      setPendingHasTime(committedHasTime);
       if (!dateVal) {
         setPendingDate(null);
-        setPendingTime(INITIAL_TIME_VALUE);
+        setPendingTime(
+          isTimeOptional ? DEFAULT_ADDED_TIME : INITIAL_TIME_VALUE
+        );
         return;
       }
       setCalendarMonth(dateVal);
       setPendingDate(dateVal);
-      setPendingTime(dateToTimeValue(dateVal));
+      setPendingTime(
+        committedHasTime || !isTimeOptional ? dateToTimeValue(dateVal) : DEFAULT_ADDED_TIME
+      );
     };
     const handleDateSelect = (selected) => {
       if (!selected) return;
@@ -978,7 +1503,9 @@ const DatePicker = forwardRef(
       setOpen(false);
     };
     const handleNow = () => {
-      const now = toBrowserLocalDate(/* @__PURE__ */ new Date());
+      const now = toBrowserLocalDate(
+        showTime && minuteStep ? roundUpToMinuteStep(/* @__PURE__ */ new Date(), minuteStep) : /* @__PURE__ */ new Date()
+      );
       if (calendarDisabled(now)) return;
       setCalendarMonth(now);
       if (type === "range") {
@@ -993,12 +1520,17 @@ const DatePicker = forwardRef(
       if (showTime || needConfirm) {
         setPendingDate(now);
         setPendingTime(dateToTimeValue(now));
+        if (isTimeOptional) setPendingHasTime(true);
         return;
       }
       commitValue(now);
       setOpen(false);
     };
     const handleOk = () => {
+      if (isPendingTimeOn && hasTimeError) {
+        setIsTimeErrorRequested(true);
+        return;
+      }
       if (type === "range" && (showTime || needConfirm)) {
         const committedRange = currentValue;
         const fromValue = pendingRange?.[0] ?? committedRange?.[0] ?? null;
@@ -1017,7 +1549,7 @@ const DatePicker = forwardRef(
           const [fromBase, toBase] = orderRange(fromValue, toValue);
           const fromFinal = showTime ? applyTimeToDate(fromBase, pendingTime) : fromBase;
           const toFinal = showTime ? applyTimeToDate(toBase, pendingTimeTo) : toBase;
-          commitValue([fromFinal, toFinal]);
+          commitValue([fromFinal, toFinal], showTime);
           onOk?.([fromFinal, toFinal]);
           resetTransientState();
           setOpen(false);
@@ -1026,8 +1558,8 @@ const DatePicker = forwardRef(
         return;
       }
       if (pendingDate) {
-        const finalDate = showTime ? applyTimeToDate(pendingDate, pendingTime) : pendingDate;
-        commitValue(finalDate);
+        const finalDate = isPendingTimeOn ? applyTimeToDate(pendingDate, pendingTime) : pendingDate;
+        commitValue(finalDate, isPendingTimeOn);
         onOk?.(finalDate);
       }
       setOpen(false);
@@ -1082,10 +1614,21 @@ const DatePicker = forwardRef(
           maskEnabled,
           singleDateLen
         );
-        if (range) commitValue(range);
+        if (range) {
+          commitValue(
+            showTime && minuteStep ? [
+              roundToMinuteStep(range[0], minuteStep),
+              roundToMinuteStep(range[1], minuteStep)
+            ] : range
+          );
+        }
       } else {
         const parsed = parseDate(inputText, displayFormat);
-        if (parsed) commitValue(parsed);
+        if (parsed) {
+          commitValue(
+            committedHasTime && minuteStep ? roundToMinuteStep(parsed, minuteStep) : parsed
+          );
+        }
       }
       setOpen(false);
     };
@@ -1105,10 +1648,20 @@ const DatePicker = forwardRef(
       const dateVal = currentValue;
       if (dateVal instanceof Date) setCalendarMonth(dateVal);
     }, [open]);
+    const timezoneLabel = showTime && !onTimezoneChange ? (timezoneLabelProp ?? getTimezoneLabel(timezone)) || null : null;
     const hasField = !!(label || error || helpText);
     const testIdPrefix = buildTestIdPrefix(dataTestId, label);
     const showFooter = showTime || needConfirm || !!onTimezoneChange;
     const todayDate = toBrowserLocalDate(/* @__PURE__ */ new Date());
+    const handleHasTimeChange = (checked) => {
+      setPendingHasTime(checked);
+      setIsTimeErrorRequested(false);
+      if (!checked) setHasTimeError(false);
+      if (checked && !pendingDate && !calendarDisabled(todayDate)) {
+        setPendingDate(todayDate);
+        setCalendarMonth(todayDate);
+      }
+    };
     const defaultStartMonth = new Date(
       todayDate.getFullYear() - CALENDAR_NAVIGATION_YEAR_RANGE,
       0,
@@ -1207,99 +1760,110 @@ const DatePicker = forwardRef(
               onPointerDownOutside: (e) => e.preventDefault(),
               onInteractOutside: (e) => e.preventDefault(),
               children: [
-                /* @__PURE__ */ jsxs("div", { className: cn("flex", showTime && "flex-row"), children: [
-                  type === "date" && picker === "month" ? /* @__PURE__ */ jsx(
-                    MonthPicker,
-                    {
-                      value: currentValue ?? null,
-                      displayedYear: calendarMonth.getFullYear(),
-                      onYearChange: (year) => setCalendarMonth(
-                        new Date(year, calendarMonth.getMonth(), 1)
-                      ),
-                      onSelect: handleGridPickerSelect,
-                      isDisabled: (date) => isMonthDisabled(date, normalizedMinDate, normalizedMaxDate)
-                    }
-                  ) : type === "date" && picker === "year" ? /* @__PURE__ */ jsx(
-                    YearPicker,
-                    {
-                      value: currentValue ?? null,
-                      displayedYear: calendarMonth.getFullYear(),
-                      onYearChange: (year) => setCalendarMonth(new Date(year, 0, 1)),
-                      onSelect: handleGridPickerSelect,
-                      isDisabled: (date) => isYearDisabled(date, normalizedMinDate, normalizedMaxDate)
-                    }
-                  ) : type === "date" ? /* @__PURE__ */ jsx(
-                    Calendar$1,
-                    {
-                      mode: "single",
-                      captionLayout: "dropdown",
-                      today: todayDate,
-                      month: calendarMonth,
-                      onMonthChange: setCalendarMonth,
-                      selected: calendarSelected(),
-                      onSelect: handleSingleDateSelectWithPicker,
-                      disabled: calendarDisabled,
-                      weekStartsOn,
-                      classNames: weekRowHoverClassName ? { week: cn("mt-2 flex w-full", weekRowHoverClassName) } : void 0,
-                      ...weekHighlightProps,
-                      startMonth: calendarStartMonth,
-                      endMonth: calendarEndMonth
-                    }
-                  ) : showTime ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      RangeCalendar,
-                      {
-                        todayDate,
-                        weekStartsOn,
-                        month: calendarMonth,
-                        onMonthChange: setCalendarMonth,
-                        selected: memoizedRangeSelected,
-                        onSelect: handleRangeSelect,
-                        disabled: calendarDisabled,
-                        startMonth: calendarStartMonth,
-                        endMonth: calendarEndMonth,
-                        onHoverIn: handleHoverIn,
-                        onHoverOut: handleHoverOut,
-                        numberOfMonths: 1
-                      }
+                /* @__PURE__ */ jsx("div", { className: "flex", children: type === "date" && picker === "month" ? /* @__PURE__ */ jsx(
+                  MonthPicker,
+                  {
+                    value: currentValue ?? null,
+                    displayedYear: calendarMonth.getFullYear(),
+                    onYearChange: (year) => setCalendarMonth(
+                      new Date(year, calendarMonth.getMonth(), 1)
                     ),
-                    /* @__PURE__ */ jsx("div", { className: "border-inline-start border-border pt-2", children: /* @__PURE__ */ jsx(
-                      TimePickerPanel,
-                      {
-                        value: rangeSelectionStep === "from" ? pendingTime : pendingTimeTo,
-                        onChange: rangeSelectionStep === "from" ? setPendingTime : setPendingTimeTo,
-                        format: effectiveTimePickerFormat,
-                        showSeconds,
-                        disabled
-                      }
-                    ) })
-                  ] }) : /* @__PURE__ */ jsx(
-                    RangeCalendar,
-                    {
-                      todayDate,
-                      weekStartsOn,
-                      month: calendarMonth,
-                      onMonthChange: setCalendarMonth,
-                      selected: memoizedRangeSelected,
-                      onSelect: handleRangeSelect,
-                      disabled: calendarDisabled,
-                      startMonth: calendarStartMonth,
-                      endMonth: calendarEndMonth,
-                      onHoverIn: handleHoverIn,
-                      onHoverOut: handleHoverOut
-                    }
-                  ),
-                  showTime && type !== "range" && /* @__PURE__ */ jsx("div", { className: "border-inline-start border-border", children: /* @__PURE__ */ jsx(
-                    TimePickerPanel,
-                    {
-                      value: pendingTime,
-                      onChange: setPendingTime,
-                      format: effectiveTimePickerFormat,
-                      showSeconds,
-                      disabled
-                    }
-                  ) })
-                ] }),
+                    onSelect: handleGridPickerSelect,
+                    isDisabled: (date) => isMonthDisabled(date, normalizedMinDate, normalizedMaxDate)
+                  }
+                ) : type === "date" && picker === "year" ? /* @__PURE__ */ jsx(
+                  YearPicker,
+                  {
+                    value: currentValue ?? null,
+                    displayedYear: calendarMonth.getFullYear(),
+                    onYearChange: (year) => setCalendarMonth(new Date(year, 0, 1)),
+                    onSelect: handleGridPickerSelect,
+                    isDisabled: (date) => isYearDisabled(date, normalizedMinDate, normalizedMaxDate)
+                  }
+                ) : type === "date" ? /* @__PURE__ */ jsx(
+                  Calendar$1,
+                  {
+                    className: cn(showTime && SHOW_TIME_CALENDAR_CLASS_NAME),
+                    mode: "single",
+                    captionLayout: "dropdown",
+                    today: todayDate,
+                    month: calendarMonth,
+                    onMonthChange: setCalendarMonth,
+                    selected: calendarSelected(),
+                    onSelect: handleSingleDateSelectWithPicker,
+                    disabled: calendarDisabled,
+                    weekStartsOn,
+                    classNames: weekRowHoverClassName ? { week: cn("mt-2 flex w-full", weekRowHoverClassName) } : void 0,
+                    ...weekHighlightProps,
+                    startMonth: calendarStartMonth,
+                    endMonth: calendarEndMonth
+                  }
+                ) : showTime ? /* @__PURE__ */ jsx(
+                  RangeCalendar,
+                  {
+                    className: SHOW_TIME_CALENDAR_CLASS_NAME,
+                    todayDate,
+                    weekStartsOn,
+                    month: calendarMonth,
+                    onMonthChange: setCalendarMonth,
+                    selected: memoizedRangeSelected,
+                    onSelect: handleRangeSelect,
+                    disabled: calendarDisabled,
+                    startMonth: calendarStartMonth,
+                    endMonth: calendarEndMonth,
+                    onHoverIn: handleHoverIn,
+                    onHoverOut: handleHoverOut,
+                    numberOfMonths: 1
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  RangeCalendar,
+                  {
+                    todayDate,
+                    weekStartsOn,
+                    month: calendarMonth,
+                    onMonthChange: setCalendarMonth,
+                    selected: memoizedRangeSelected,
+                    onSelect: handleRangeSelect,
+                    disabled: calendarDisabled,
+                    startMonth: calendarStartMonth,
+                    endMonth: calendarEndMonth,
+                    onHoverIn: handleHoverIn,
+                    onHoverOut: handleHoverOut
+                  }
+                ) }),
+                showTime && type === "range" && /* @__PURE__ */ jsx(
+                  TimeSection,
+                  {
+                    className: TIME_SECTION_CLASS_NAME,
+                    disabled,
+                    hasTime: true,
+                    optional: false,
+                    showError: isTimeErrorRequested,
+                    timezoneLabel,
+                    value: rangeSelectionStep === "from" ? pendingTime : pendingTimeTo,
+                    onChange: rangeSelectionStep === "from" ? setPendingTime : setPendingTimeTo,
+                    minuteStep,
+                    onErrorChange: setHasTimeError,
+                    onHasTimeChange: noop
+                  },
+                  rangeSelectionStep
+                ),
+                showTime && type !== "range" && /* @__PURE__ */ jsx(
+                  TimeSection,
+                  {
+                    className: TIME_SECTION_CLASS_NAME,
+                    disabled,
+                    hasTime: pendingHasTime,
+                    optional: isTimeOptional,
+                    showError: isTimeErrorRequested,
+                    timezoneLabel,
+                    value: pendingTime,
+                    onChange: setPendingTime,
+                    minuteStep,
+                    onErrorChange: setHasTimeError,
+                    onHasTimeChange: handleHasTimeChange
+                  }
+                ),
                 showFooter && /* @__PURE__ */ jsx(
                   DatePickerFooter,
                   {
@@ -1308,6 +1872,7 @@ const DatePicker = forwardRef(
                     timezone,
                     onTimezoneChange,
                     nowDisabled: calendarDisabled(todayDate),
+                    showNow,
                     onNow: handleNow,
                     onOk: handleOk,
                     okLabel: type === "range" && (showTime || needConfirm) && rangeSelectionStep === "from" ? "Next" : "OK"
@@ -1344,4 +1909,4 @@ const DatePicker = forwardRef(
 DatePicker.displayName = "DatePicker";
 
 export { DatePicker as D };
-//# sourceMappingURL=DatePicker-DznpJnhm.js.map
+//# sourceMappingURL=DatePicker-BC9AOZJ2.js.map