@konstructio/ui 0.1.2-alpha.107 → 0.1.2-alpha.109

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,29 +1,35 @@
 import { t as a } from "../../utils-B-6R7kNE.js";
 import { Typography as i } from "../Typography/Typography.js";
-import { DateRangePickerProvider as Q } from "./contexts/date-range-picker.provider.js";
-import { PresetPanel as S } from "./components/PresetPanel/PresetPanel.js";
-import { DateTimeInputs as U } from "./components/DateTimeInputs/DateTimeInputs.js";
-import { CalendarPanel as W } from "./components/CalendarPanel/CalendarPanel.js";
-import { dateRangePickerVariants as X, rightPanelVariants as Y } from "./DateRangePicker.variants.js";
+import { DateRangePickerProvider as $ } from "./contexts/date-range-picker/date-range-picker.provider.js";
+import { PresetPanel as ee } from "./components/PresetPanel/PresetPanel.js";
+import { DateTimeInputs as re } from "./components/DateTimeInputs/DateTimeInputs.js";
+import { CalendarPanel as ae } from "./components/CalendarPanel/CalendarPanel.js";
+import { RightPanel as te } from "./components/RightPanel/RightPanel.js";
+import { dateRangePickerVariants as ne, rightPanelVariants as ie } from "./DateRangePicker.variants.js";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var Z = ({ animationDuration: m = 500, className: o, defaultPreset: l = "custom", defaultRange: s, defaultTime: c, disabled: p = !1, isRequired: d, label: n, labelWrapperClassName: f, name: g, showTime: P = !0, theme: h, timeFormat: x = "24", blockedDays: u, blockedMonths: v, minDate: k, maxDate: N, hideDisabledNavigation: D, showOutsideDays: R, navigationMode: y = "independent", ariaLabelCalendar: T, ariaLabelPrevMonth: j, ariaLabelNextMonth: I, ariaLabelPrevMonthStart: V, ariaLabelNextMonthStart: b, ariaLabelPrevMonthEnd: C, ariaLabelNextMonthEnd: K, labelStartDate: L, labelEndDate: q, labelTime: w, ariaLabelStartDate: z, ariaLabelEndDate: A, errorInvalidDate: B, errorDateNotAvailable: E, showPresets: F = !0, labelTimePeriod: G, ariaLabelTimePeriod: H, presetLabels: J, classNames: r, onRangeChange: M, onDateChange: O }) => /* @__PURE__ */ e(Q, {
+var oe = ({ animationDuration: o = 500, className: l, defaultPreset: m = "custom", defaultRange: s, defaultTime: c, disabled: p = !1, isRequired: d, label: n, labelWrapperClassName: f, name: g, showTime: P = !0, theme: h, timeFormat: x = "24", blockedDays: u, blockedMonths: k, minDate: v, maxDate: N, hideDisabledNavigation: D, showOutsideDays: R, navigationMode: y = "independent", numberOfMonths: T = 2, dateDisplayFormat: j = "long", ariaLabelCalendar: I, ariaLabelPrevMonth: V, ariaLabelNextMonth: b, ariaLabelPrevMonthStart: C, ariaLabelNextMonthStart: K, ariaLabelPrevMonthEnd: L, ariaLabelNextMonthEnd: q, autoComplete: w, labelStartDate: z, labelEndDate: A, labelTime: B, requiredDates: E, ariaLabelStartDate: F, ariaLabelEndDate: G, errorInvalidDate: H, errorDateNotAvailable: J, showPresets: M = !0, presets: O, footer: Q, revealCalendarOnCustom: S = !1, labelTimePeriod: U, ariaLabelTimePeriod: W, presetLabels: X, classNames: r, onRangeChange: Y, onDateChange: Z, onPresetChange: _ }) => /* @__PURE__ */ e($, {
   defaultRange: s,
   defaultTime: c,
-  defaultPreset: l,
+  defaultPreset: m,
+  presets: O,
   timeFormat: x,
   showTime: P,
   name: g,
   disabled: p,
-  animationDuration: m,
+  animationDuration: o,
   blockedDays: u,
-  blockedMonths: v,
-  minDate: k,
+  blockedMonths: k,
+  minDate: v,
   maxDate: N,
   hideDisabledNavigation: D,
   showOutsideDays: R,
   navigationMode: y,
-  onRangeChange: M,
-  onDateChange: O,
+  numberOfMonths: T,
+  dateDisplayFormat: j,
+  revealCalendarOnCustom: S,
+  onRangeChange: Y,
+  onDateChange: Z,
+  onPresetChange: _,
   children: /* @__PURE__ */ t("div", {
     className: "flex flex-col gap-2",
     "data-theme": h,
@@ -40,40 +46,46 @@ var Z = ({ animationDuration: m = 500, className: o, defaultPreset: l = "custom"
         })]
       })
     }) : null, /* @__PURE__ */ t("div", {
-      className: a(X({ className: o }), "gap-4", r?.container),
+      className: a(ne({ className: l }), r?.container),
       role: "group",
       "aria-label": n || "Date range picker",
-      children: [F && /* @__PURE__ */ e(S, {
-        labelTimePeriod: G,
-        ariaLabelTimePeriod: H,
-        presetLabels: J,
+      children: [M && /* @__PURE__ */ e(ee, {
+        labelTimePeriod: U,
+        ariaLabelTimePeriod: W,
+        presetLabels: X,
         classNames: r?.presetPanel
-      }), /* @__PURE__ */ t("div", {
-        className: a(Y(), r?.rightPanel),
-        children: [/* @__PURE__ */ e(U, {
-          labelStartDate: L,
-          labelEndDate: q,
-          labelTime: w,
-          ariaLabelStartDate: z,
-          ariaLabelEndDate: A,
-          errorInvalidDate: B,
-          errorDateNotAvailable: E,
-          classNames: r?.dateTimeInputs
-        }), /* @__PURE__ */ e(W, {
-          ariaLabelCalendar: T,
-          ariaLabelPrevMonth: j,
-          ariaLabelNextMonth: I,
-          ariaLabelPrevMonthStart: V,
-          ariaLabelNextMonthStart: b,
-          ariaLabelPrevMonthEnd: C,
-          ariaLabelNextMonthEnd: K,
-          classNames: r?.calendarPanel
-        })]
+      }), /* @__PURE__ */ t(te, {
+        className: a(ie(), r?.rightPanel),
+        children: [
+          /* @__PURE__ */ e(re, {
+            autoComplete: w,
+            labelStartDate: z,
+            labelEndDate: A,
+            labelTime: B,
+            requiredDates: E,
+            ariaLabelStartDate: F,
+            ariaLabelEndDate: G,
+            errorInvalidDate: H,
+            errorDateNotAvailable: J,
+            classNames: r?.dateTimeInputs
+          }),
+          /* @__PURE__ */ e(ae, {
+            ariaLabelCalendar: I,
+            ariaLabelPrevMonth: V,
+            ariaLabelNextMonth: b,
+            ariaLabelPrevMonthStart: C,
+            ariaLabelNextMonthStart: K,
+            ariaLabelPrevMonthEnd: L,
+            ariaLabelNextMonthEnd: q,
+            classNames: r?.calendarPanel
+          }),
+          Q
+        ]
       })]
     })]
   })
 });
-Z.displayName = "KonstructDateRangePicker";
+oe.displayName = "KonstructDateRangePicker";
 export {
-  Z as DateRangePicker
+  oe as DateRangePicker
 };

package/dist/components/DateRangePicker/DateRangePicker.variants.js

@@ -2,21 +2,20 @@ import { t as a } from "../../dist-B9GE4SXf.js";
 var r = a([
   "flex",
   "rounded-xl",
+  "overflow-hidden",
   "max-w-fit",
   "bg-white",
   "dark:bg-metal-800",
   "dark:border-metal-700",
   "shadow",
-  "dark:shadow-metal-50/5",
-  "pt-4.5",
-  "pb-3.5",
-  "px-4"
+  "dark:shadow-metal-50/5"
 ]), t = a([
   "flex",
   "flex-col",
-  "pt-4",
   "gap-6",
-  "pr-4",
+  "pt-4.5",
+  "pb-3.5",
+  "px-4",
   "items-center"
 ]);
 export {

package/dist/components/DateRangePicker/components/CalendarPanel/CalendarPanel.js

@@ -1,76 +1,78 @@
 import '../../../../style.css';import '../../../../CalendarPanel.css';/* empty css                         */
-import { useDateRangePicker as B } from "../../contexts/date-range-picker.hook.js";
-import { createDisabledMatcher as E } from "../../utils/disabled-dates.js";
-import { IndependentModeCalendar as F } from "./components/IndependentModeCalendar/IndependentModeCalendar.js";
-import { TogetherModeCalendar as G } from "./components/TogetherModeCalendar/TogetherModeCalendar.js";
-import { useMemo as H } from "react";
+import { useDateRangePicker as q } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { createDisabledMatcher as z } from "../../utils/disabled-dates/disabled-dates.js";
+import "../../../../constants-HQIXhj2t.js";
+import { IndependentModeCalendar as A } from "./components/IndependentModeCalendar/IndependentModeCalendar.js";
+import { TogetherModeCalendar as B } from "./components/TogetherModeCalendar/TogetherModeCalendar.js";
+import { useMemo as F } from "react";
 import { jsx as x } from "react/jsx-runtime";
-var J = ({ className: a, calendarWidth: n = 550, ariaLabelCalendar: o = "Date range picker calendar", ariaLabelPrevMonth: u = "Previous month", ariaLabelNextMonth: D = "Next month", ariaLabelPrevMonthStart: M = "Previous month for start date", ariaLabelNextMonthStart: R = "Next month for start date", ariaLabelPrevMonthEnd: b = "Previous month for end date", ariaLabelNextMonthEnd: k = "Next month for end date", classNames: r }) => {
-  const { animationDuration: i, blockedDays: d, blockedMonths: g, canLeftNavigateNext: y, canLeftNavigatePrev: C, canNavigateNext: v, canNavigatePrev: s, canRightNavigateNext: L, canRightNavigatePrev: S, disabled: e, displayedMonths: m, hideDisabledNavigation: c, maxDate: h, minDate: l, navigationMode: t, range: f, showOutsideDays: p, navigateLeftNext: j, navigateLeftPrev: w, navigateNextMonth: I, navigatePrevMonth: O, navigateRightNext: T, navigateRightPrev: q, setRange: z } = B(), N = H(() => E({
-    blockedDays: d,
-    blockedMonths: g,
-    minDate: l,
+var J = ({ className: t, calendarWidth: a = 550, ariaLabelCalendar: n = "Date range picker calendar", ariaLabelPrevMonth: D = "Previous month", ariaLabelNextMonth: R = "Next month", ariaLabelPrevMonthStart: b = "Previous month for start date", ariaLabelNextMonthStart: k = "Next month for start date", ariaLabelPrevMonthEnd: S = "Previous month for end date", ariaLabelNextMonthEnd: y = "Next month for end date", classNames: o }) => {
+  const { animationDuration: r, blockedDays: i, blockedMonths: d, canLeftNavigateNext: L, canLeftNavigatePrev: C, canNavigateNext: g, canNavigatePrev: s, canRightNavigateNext: I, canRightNavigatePrev: O, disabled: e, displayedMonths: m, hideDisabledNavigation: v, maxDate: h, minDate: c, navigationMode: l, numberOfMonths: f, range: N, showOutsideDays: p, navigateLeftNext: T, navigateLeftPrev: H, navigateNextMonth: _, navigatePrevMonth: j, navigateRightNext: w, navigateRightPrev: E, setRange: G } = q(), P = F(() => z({
+    blockedDays: i,
+    blockedMonths: d,
+    minDate: c,
     maxDate: h
   }), [
+    i,
     d,
-    g,
-    l,
+    c,
     h
-  ]), P = (A) => {
-    z(A);
-  };
-  return t === "independent" ? /* @__PURE__ */ x(F, {
-    className: a,
-    calendarWidth: n,
-    ariaLabelCalendar: o,
-    ariaLabelPrevMonthStart: M,
-    ariaLabelNextMonthStart: R,
-    ariaLabelPrevMonthEnd: b,
-    ariaLabelNextMonthEnd: k,
-    classNames: r,
-    range: f,
-    onRangeSelect: P,
+  ]), M = (W) => {
+    G(W);
+  }, u = f === 1;
+  return l === "independent" && !u ? /* @__PURE__ */ x(A, {
+    className: t,
+    calendarWidth: a,
+    ariaLabelCalendar: n,
+    ariaLabelPrevMonthStart: b,
+    ariaLabelNextMonthStart: k,
+    ariaLabelPrevMonthEnd: S,
+    ariaLabelNextMonthEnd: y,
+    classNames: o,
+    range: N,
+    onRangeSelect: M,
     disabled: e,
-    disabledMatcher: N,
+    disabledMatcher: P,
     showOutsideDays: p,
-    hideDisabledNavigation: c,
+    hideDisabledNavigation: v,
     canLeftNavigatePrev: C,
-    canLeftNavigateNext: y,
-    canRightNavigatePrev: S,
-    canRightNavigateNext: L,
-    navigateLeftPrev: w,
-    navigateLeftNext: j,
-    navigateRightPrev: q,
-    navigateRightNext: T,
+    canLeftNavigateNext: L,
+    canRightNavigatePrev: O,
+    canRightNavigateNext: I,
+    navigateLeftPrev: H,
+    navigateLeftNext: T,
+    navigateRightPrev: E,
+    navigateRightNext: w,
     carouselProps: {
       displayedMonths: m,
-      animationDuration: i,
-      navigationMode: t
+      animationDuration: r,
+      navigationMode: l
     }
-  }) : /* @__PURE__ */ x(G, {
-    className: a,
-    calendarWidth: n,
-    ariaLabelCalendar: o,
-    ariaLabelPrevMonth: u,
-    ariaLabelNextMonth: D,
-    classNames: r,
-    range: f,
-    onRangeSelect: P,
+  }) : /* @__PURE__ */ x(B, {
+    className: t,
+    calendarWidth: u ? 259 : a,
+    ariaLabelCalendar: n,
+    ariaLabelPrevMonth: D,
+    ariaLabelNextMonth: R,
+    classNames: o,
+    range: N,
+    onRangeSelect: M,
     disabled: e,
-    disabledMatcher: N,
+    disabledMatcher: P,
     showOutsideDays: p,
-    hideDisabledNavigation: c,
+    hideDisabledNavigation: v,
     canNavigatePrev: s,
-    canNavigateNext: v,
+    canNavigateNext: g,
     carouselProps: {
       displayedMonths: m,
-      animationDuration: i,
+      animationDuration: r,
       disabled: e,
       canNavigatePrev: s,
-      canNavigateNext: v,
-      navigationMode: t,
-      navigatePrevMonth: O,
-      navigateNextMonth: I
+      canNavigateNext: g,
+      navigationMode: "together",
+      numberOfMonths: f,
+      navigatePrevMonth: j,
+      navigateNextMonth: _
     }
   });
 };

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/CalendarMonth.js

@@ -1,6 +1,6 @@
 import { t as n } from "../../../../../../utils-B-6R7kNE.js";
 import { t as c } from "../../../../../../DayPicker-C22j0Y-u.js";
-import { getMonthName as d } from "../../../../utils/validation.js";
+import { getMonthName as d } from "../../../../utils/validation/validation.js";
 import { calendarMonthTitleVariants as f } from "../../CalendarPanel.variants.js";
 import { s as h } from "../../../../../../constants-HQIXhj2t.js";
 import { useMemo as p } from "react";

package/dist/components/DateRangePicker/components/CalendarPanel/components/IndependentModeCalendar/IndependentModeCalendar.js

@@ -1,5 +1,5 @@
 import { t as a } from "../../../../../../utils-B-6R7kNE.js";
-import { t as Q } from "../../../../../../react-7zQ6bvbE.js";
+import { t as Q } from "../../../../../../react-DRLuFcbk.js";
 import { CalendarDivider as U } from "../CalendarDivider/CalendarDivider.js";
 import { calendarGridContainerVariants as X, calendarPanelVariants as Y } from "../../CalendarPanel.variants.js";
 import "../../../../../../constants-HQIXhj2t.js";

package/dist/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.js

@@ -1,5 +1,5 @@
 import { t as n } from "../../../../../../utils-B-6R7kNE.js";
-import { t as P } from "../../../../../../react-7zQ6bvbE.js";
+import { t as P } from "../../../../../../react-DRLuFcbk.js";
 import { CalendarDivider as W } from "../CalendarDivider/CalendarDivider.js";
 import { calendarGridContainerVariants as z, calendarPanelVariants as L } from "../../CalendarPanel.variants.js";
 import { CalendarMonth as R } from "../CalendarMonth/CalendarMonth.js";

package/dist/components/DateRangePicker/components/CalendarPanel/constants/index.js

@@ -1,4 +1,4 @@
-import { getMonthName as E } from "../../../utils/validation.js";
+import { getMonthName as E } from "../../../utils/validation/validation.js";
 import { a as s, i as _, n as r, o as T, r as e, s as o, t } from "../../../../../constants-HQIXhj2t.js";
 export {
   t as GAP_WIDTH,

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/index.js

@@ -1,4 +1,4 @@
-import { getMonthName as t } from "../../../utils/validation.js";
+import { getMonthName as t } from "../../../utils/validation/validation.js";
 import { a as o, i as r, n as s, o as H, r as E, s as m, t as _ } from "../../../../../constants-HQIXhj2t.js";
 import { calculateCalendarHeight as T, getNextMonth as i, getPrevMonth as I, getWeeksInMonth as M } from "../utils/index.js";
 import { useTogetherCarousel as N } from "./useTogetherCarousel.js";

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.js

@@ -1,31 +1,32 @@
-import { r as w } from "../../../../../constants-HQIXhj2t.js";
-import { calculateCalendarHeight as L, getNextMonth as T, getPrevMonth as g, getWeeksInMonth as X } from "../utils/index.js";
-import { useEffect as A, useMemo as $, useRef as q, useState as a } from "react";
-var Y = ({ displayedMonths: l, animationDuration: H, disabled: I, canNavigatePrev: D, canNavigateNext: E, navigationMode: N, navigatePrevMonth: S, navigateNextMonth: b }) => {
-  const [n, c] = a(null), [e, u] = a(!1), [o, i] = a(!1), [p, W] = a(!0), [s, F] = a(l), f = q(null), P = q(!0), R = 291, C = g(g(s[0])), M = g(s[0]), m = s[0], h = s[1], d = T(s[1]), O = T(T(s[1])), k = $(() => {
+import { r as L } from "../../../../../constants-HQIXhj2t.js";
+import { calculateCalendarHeight as X, getNextMonth as T, getPrevMonth as g, getWeeksInMonth as $ } from "../utils/index.js";
+import { useEffect as H, useMemo as j, useRef as E, useState as a } from "react";
+var Z = ({ displayedMonths: l, animationDuration: I, disabled: N, canNavigatePrev: S, canNavigateNext: b, navigationMode: W, numberOfMonths: F = 2, navigatePrevMonth: p, navigateNextMonth: v }) => {
+  const [n, c] = a(null), [e, u] = a(!1), [o, i] = a(!1), [C, P] = a(!0), [s, R] = a(l), f = E(null), _ = E(!0), q = 291, k = g(g(s[0])), M = g(s[0]), h = s[0], m = s[1], d = T(s[1]), G = T(T(s[1])), O = j(() => {
     let t;
-    e && n === "left" ? t = [h, d] : e && n === "right" ? t = [M, m] : t = [m, h];
-    const r = Math.max(...t.map(X));
-    return L(r);
+    e && n === "left" ? t = [m, d] : e && n === "right" ? t = [M, h] : t = [h, m];
+    const r = t.slice(0, F), A = Math.max(...r.map($));
+    return X(A);
   }, [
     e,
     n,
-    m,
     h,
+    m,
     d,
-    M
-  ]), v = 6 * 259 + 160, x = -2 * 291;
-  return A(() => {
-    if (N !== "independent") {
-      if (P.current) {
-        P.current = !1;
+    M,
+    F
+  ]), w = 6 * 259 + 160, x = -2 * 291;
+  return H(() => {
+    if (W !== "independent") {
+      if (_.current) {
+        _.current = !1;
         return;
       }
       if (!e) {
         const t = s[0].getTime(), r = l[0].getTime();
         if (t !== r) {
-          const G = r - t, _ = Math.round(G / w);
-          Math.abs(_) === 1 ? (c(_ > 0 ? "left" : "right"), u(!0), i(!1)) : F(l);
+          const A = r - t, D = Math.round(A / L);
+          Math.abs(D) === 1 ? (c(D > 0 ? "left" : "right"), u(!0), i(!1)) : R(l);
         }
       }
     }
@@ -33,8 +34,8 @@ var Y = ({ displayedMonths: l, animationDuration: H, disabled: I, canNavigatePre
     l,
     s,
     e,
-    N
-  ]), A(() => {
+    W
+  ]), H(() => {
     e && !o && n && (f.current && f.current.offsetHeight, requestAnimationFrame(() => {
       i(!0);
     }));
@@ -42,51 +43,51 @@ var Y = ({ displayedMonths: l, animationDuration: H, disabled: I, canNavigatePre
     e,
     o,
     n
-  ]), A(() => {
+  ]), H(() => {
     if (e && o) {
       const t = setTimeout(() => {
-        W(!1), requestAnimationFrame(() => {
-          f.current && f.current.offsetHeight, F((r) => n === "left" ? [r[1], T(r[1])] : [g(r[0]), r[0]]), u(!1), c(null), i(!1), requestAnimationFrame(() => {
+        P(!1), requestAnimationFrame(() => {
+          f.current && f.current.offsetHeight, R((r) => n === "left" ? [r[1], T(r[1])] : [g(r[0]), r[0]]), u(!1), c(null), i(!1), requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              W(!0);
+              P(!0);
             });
           });
         });
-      }, H);
+      }, I);
       return () => clearTimeout(t);
     }
   }, [
     e,
     o,
-    H,
+    I,
     n
   ]), {
     carouselRef: f,
     isAnimating: e,
-    enableTransition: p,
+    enableTransition: C,
     animateTransform: o,
-    calendarHeight: k,
-    carouselTotalWidth: v,
+    calendarHeight: O,
+    carouselTotalWidth: w,
     monthsToRender: [
-      C,
+      k,
       M,
-      m,
       h,
+      m,
       d,
-      O
+      G
     ],
     handlePrevMonth: () => {
-      e || I || !D || (c("right"), u(!0), i(!1), S());
+      e || N || !S || (c("right"), u(!0), i(!1), p());
     },
     handleNextMonth: () => {
-      e || I || !E || (c("left"), u(!0), i(!1), b());
+      e || N || !b || (c("left"), u(!0), i(!1), v());
     },
     getTransform: () => {
       let t = x;
-      return e && o && (n === "left" ? t = x - R : n === "right" && (t = x + R)), `translateX(${t}px)`;
+      return e && o && (n === "left" ? t = x - q : n === "right" && (t = x + q)), `translateX(${t}px)`;
     }
   };
 };
 export {
-  Y as useTogetherCarousel
+  Z as useTogetherCarousel
 };

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.js

@@ -1,64 +1,70 @@
-import { t as L } from "../../../../utils-B-6R7kNE.js";
-import { dateTimeInputsVariants as $ } from "./DateTimeInputs.variants.js";
-import { EndInputFields as k } from "./components/EndInputFields/EndInputFields.js";
-import { StartInputFields as w } from "./components/StartInputFields/StartInputFields.js";
-import { useDateTimeInputs as P } from "./hooks/useDateTimeInputs.js";
-import { Fragment as R, jsx as e, jsxs as l } from "react/jsx-runtime";
-var q = ({ className: m, labelStartDate: u = "Start date", labelEndDate: s = "End date", labelTime: n = "Time", ariaLabelStartDate: D = "Start date", ariaLabelEndDate: h = "End date", errorInvalidDate: p = "Invalid date", errorDateNotAvailable: T = "Date is not available", errorStartAfterEnd: g = "Start date must be before end date", errorEndBeforeStart: E = "End date must be after start date", classNames: a }) => {
-  const { timeFormat: r, showTime: d, name: t, disabled: i, time: o, startDateValue: V, startDateError: b, handleStartDateFocus: c, handleStartDateChange: f, handleStartDateBlur: C, handleStartTimeChange: F, endDateValue: S, endDateError: I, handleEndDateFocus: v, handleEndDateChange: B, handleEndDateBlur: x, handleEndTimeChange: y, startHiddenValue: j, endHiddenValue: H } = P({
-    errorInvalidDate: p,
-    errorDateNotAvailable: T,
-    errorStartAfterEnd: g,
-    errorEndBeforeStart: E
+import { t as w } from "../../../../utils-B-6R7kNE.js";
+import { useDateRangePicker as H } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { dateTimeInputsVariants as P } from "./DateTimeInputs.variants.js";
+import { EndInputFields as R } from "./components/EndInputFields/EndInputFields.js";
+import { StartInputFields as $ } from "./components/StartInputFields/StartInputFields.js";
+import { useDateTimeInputs as q } from "./hooks/useDateTimeInputs.js";
+import { Fragment as M, jsx as e, jsxs as u } from "react/jsx-runtime";
+var O = ({ autoComplete: r, className: s, labelStartDate: D = "Start date", labelEndDate: h = "End date", labelTime: d = "Time", requiredDates: i = !1, ariaLabelStartDate: p = "Start date", ariaLabelEndDate: c = "End date", errorInvalidDate: g = "Invalid date", errorDateNotAvailable: T = "Date is not available", classNames: a }) => {
+  const { numberOfMonths: f } = H(), { timeFormat: o, showTime: t, name: n, disabled: l, time: m, startDateValue: E, startDateError: V, handleStartDateFocus: F, handleStartDateChange: C, handleStartDateBlur: I, handleStartTimeChange: S, endDateValue: b, endDateError: v, handleEndDateFocus: y, handleEndDateChange: B, handleEndDateBlur: L, handleEndTimeChange: k, startHiddenValue: x, endHiddenValue: j } = q({
+    errorInvalidDate: g,
+    errorDateNotAvailable: T
   });
-  return /* @__PURE__ */ l("div", {
-    className: L($({ className: m }), a?.root),
+  return /* @__PURE__ */ u("div", {
+    className: w(P({
+      layout: f === 2 ? "row" : t ? "stacked" : "compact",
+      className: s
+    }), a?.root),
     children: [
-      /* @__PURE__ */ e(w, {
-        dateValue: V,
-        timeValue: o.startTime,
-        error: b,
-        disabled: i,
-        showTime: d,
-        timeFormat: r,
-        labelDate: u,
-        labelTime: n,
-        ariaLabelDate: D,
-        onDateChange: f,
-        onDateFocus: c,
-        onDateBlur: C,
-        onTimeChange: F,
+      /* @__PURE__ */ e($, {
+        autoComplete: r,
+        dateValue: E,
+        timeValue: m.startTime,
+        error: V,
+        disabled: l,
+        showTime: t,
+        timeFormat: o,
+        labelDate: D,
+        labelTime: d,
+        required: i,
+        ariaLabelDate: p,
+        onDateChange: C,
+        onDateFocus: F,
+        onDateBlur: I,
+        onTimeChange: S,
         classNames: a
       }),
-      /* @__PURE__ */ e(k, {
-        dateValue: S,
-        timeValue: o.endTime,
-        error: I,
-        disabled: i,
-        showTime: d,
-        timeFormat: r,
-        labelDate: s,
-        labelTime: n,
-        ariaLabelDate: h,
+      /* @__PURE__ */ e(R, {
+        autoComplete: r,
+        dateValue: b,
+        timeValue: m.endTime,
+        error: v,
+        disabled: l,
+        showTime: t,
+        timeFormat: o,
+        labelDate: h,
+        labelTime: d,
+        required: i,
+        ariaLabelDate: c,
         onDateChange: B,
-        onDateFocus: v,
-        onDateBlur: x,
-        onTimeChange: y,
+        onDateFocus: y,
+        onDateBlur: L,
+        onTimeChange: k,
         classNames: a
       }),
-      t && /* @__PURE__ */ l(R, { children: [/* @__PURE__ */ e("input", {
+      n && /* @__PURE__ */ u(M, { children: [/* @__PURE__ */ e("input", {
         type: "hidden",
-        name: `${t}-start`,
-        value: j
+        name: `${n}-start`,
+        value: x
       }), /* @__PURE__ */ e("input", {
         type: "hidden",
-        name: `${t}-end`,
-        value: H
+        name: `${n}-end`,
+        value: j
       })] })
     ]
   });
 };
-q.displayName = "DateRangePickerDateTimeInputs";
+O.displayName = "DateRangePickerDateTimeInputs";
 export {
-  q as DateTimeInputs
+  O as DateTimeInputs
 };

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.variants.js

@@ -1,20 +1,34 @@
 import { t as a } from "../../../../dist-B9GE4SXf.js";
-var t = a([
-  "flex",
-  "gap-8",
-  "w-full",
-  "px-1"
-]), r = a([
+var e = a(["flex"], {
+  variants: { layout: {
+    row: [
+      "gap-8",
+      "w-full",
+      "px-1"
+    ],
+    compact: [
+      "gap-2",
+      "w-66.5",
+      "px-3"
+    ],
+    stacked: [
+      "flex-col",
+      "gap-4",
+      "w-66.5"
+    ]
+  } },
+  defaultVariants: { layout: "row" }
+}), r = a([
   "flex",
   "gap-2",
   "items-center",
   "w-66.5"
-]), p = a([
+]), l = a([
   "flex",
   "flex-col",
   "gap-2",
   "w-38"
-]), l = a([
+]), p = a([
   "flex",
   "flex-col",
   "gap-2",
@@ -25,11 +39,12 @@ var t = a([
   "text-slate-500",
   "dark:text-metal-400",
   "leading-5"
-]);
+]), n = a(["ml-1", "text-red-500"]);
 export {
-  p as dateInputWrapperVariants,
+  l as dateInputWrapperVariants,
   r as dateTimeGroupVariants,
-  t as dateTimeInputsVariants,
+  e as dateTimeInputsVariants,
   i as inputLabelVariants,
-  l as timeInputWrapperVariants
+  n as inputRequiredMarkVariants,
+  p as timeInputWrapperVariants
 };