@konstructio/ui 0.1.2-alpha.106 → 0.1.2-alpha.108

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/CalendarDivider/CalendarDivider.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../../../../../utils-Cx-WzRZF.js";
+import { t as r } from "../../../../../../utils-B-6R7kNE.js";
 import { jsx as e } from "react/jsx-runtime";
 var i = ({ className: a }) => /* @__PURE__ */ e("div", {
   className: r("absolute", "left-0", "right-0", "top-14", "h-px", "bg-slate-200", "dark:bg-metal-700", a),

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

@@ -1,8 +1,8 @@
-import { t as n } from "../../../../../../utils-Cx-WzRZF.js";
+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-CSsr7_YV.js";
+import { s as h } from "../../../../../../constants-HQIXhj2t.js";
 import { useMemo as p } from "react";
 import { jsx as r, jsxs as M } from "react/jsx-runtime";
 var y = (e) => `${d(e.getMonth())} ${e.getFullYear()}`, N = ({ month: e, range: a, onRangeSelect: i, disabled: o, disabledMatcher: s, showOutsideDays: m, classNames: t }) => {

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

@@ -1,8 +1,8 @@
-import { t as a } from "../../../../../../utils-Cx-WzRZF.js";
-import { t as Q } from "../../../../../../react-B6Nc0Fib.js";
+import { t as a } from "../../../../../../utils-B-6R7kNE.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-CSsr7_YV.js";
+import "../../../../../../constants-HQIXhj2t.js";
 import { CalendarMonth as s } from "../CalendarMonth/CalendarMonth.js";
 import { useIndependentCarousel as Z } from "../../hooks/useIndependentCarousel.js";
 import { NavigationButton as c } from "../NavigationButton/NavigationButton.js";

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

@@ -1,4 +1,4 @@
-import { t as o } from "../../../../../../utils-Cx-WzRZF.js";
+import { t as o } from "../../../../../../utils-B-6R7kNE.js";
 import { t as v } from "../../../../../../chevron-left-DxGDBBKA.js";
 import { t as b } from "../../../../../../chevron-right-CDwgDdp-.js";
 import { calendarNavButtonDisabledVariants as h, calendarNavButtonVariants as N } from "../../CalendarPanel.variants.js";

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

@@ -1,5 +1,5 @@
-import { t as n } from "../../../../../../utils-Cx-WzRZF.js";
-import { t as P } from "../../../../../../react-B6Nc0Fib.js";
+import { t as n } from "../../../../../../utils-B-6R7kNE.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/dayPickerClassNames.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../../../../constants-CSsr7_YV.js";
+import { s as e } from "../../../../../constants-HQIXhj2t.js";
 export {
   e as createDayPickerClassNames
 };

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

@@ -1,5 +1,5 @@
-import { getMonthName as E } from "../../../utils/validation.js";
-import { a as s, i as _, n as r, o as T, r as e, s as o, t } from "../../../../../constants-CSsr7_YV.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,
   r as MONTH_HEADER_HEIGHT,

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

@@ -1,5 +1,5 @@
-import { getMonthName as t } from "../../../utils/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-CSsr7_YV.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";
 import { useIndependentCarousel as h } from "./useIndependentCarousel.js";

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

@@ -1,4 +1,4 @@
-import { r as W } from "../../../../../constants-CSsr7_YV.js";
+import { r as W } from "../../../../../constants-HQIXhj2t.js";
 import { calculateCalendarHeight as j, getNextMonth as m, getPrevMonth as h, getWeeksInMonth as k } from "../utils/index.js";
 import { useEffect as g, useMemo as p, useRef as L, useState as i } from "react";
 var Q = ({ displayedMonths: u, animationDuration: F, navigationMode: I }) => {

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

@@ -1,31 +1,32 @@
-import { r as w } from "../../../../../constants-CSsr7_YV.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/CalendarPanel/utils/index.js

@@ -1,4 +1,4 @@
-import "../../../../../constants-CSsr7_YV.js";
+import "../../../../../constants-HQIXhj2t.js";
 var E = (t) => {
   const e = t.getFullYear(), a = t.getMonth(), n = new Date(e, a, 1), r = new Date(e, a + 1, 0), o = n.getDay() + r.getDate();
   return Math.ceil(o / 7);

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

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