@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/DateRangePicker/components/CalendarPanel/constants/dayPickerClassNames.d.ts

@@ -0,0 +1,22 @@
+import { DayPickerClassNames } from '../CalendarPanel.types';
+export declare const createDayPickerClassNames: (custom?: DayPickerClassNames) => {
+    root: string;
+    months: string;
+    month: string;
+    month_caption: string;
+    nav: string;
+    day_button: string;
+    day: string;
+    selected: string;
+    range_start: string;
+    range_end: string;
+    range_middle: string;
+    table: string;
+    weekdays: string;
+    weeks: string;
+    weekday: string;
+    today: string;
+    month_grid: string;
+    disabled: string;
+    outside: string;
+};

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

@@ -0,0 +1,5 @@
+import "../../../../../utils/index.js";
+import { createDayPickerClassNames as m } from "./index.js";
+export {
+  m as createDayPickerClassNames
+};

package/dist/components/DateRangePicker/components/CalendarPanel/constants/index.d.ts

@@ -0,0 +1,8 @@
+export declare const SINGLE_MONTH_WIDTH = 259;
+export declare const GAP_WIDTH = 32;
+export declare const MS_PER_MONTH: number;
+export declare const MONTH_HEADER_HEIGHT = 56;
+export declare const WEEKDAY_HEADER_HEIGHT = 28;
+export declare const WEEK_ROW_HEIGHT = 38;
+export { createDayPickerClassNames } from './dayPickerClassNames';
+export { getMonthName } from '../../../utils';

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

@@ -0,0 +1,149 @@
+import { cn as t } from "../../../../../utils/index.js";
+import { getMonthName as x } from "../../../utils/validation.js";
+const b = (e) => ({
+  root: t("w-fit", e?.root),
+  months: t("flex", e?.months),
+  month: t(`flex flex-col w-[${o}px]`, e?.month),
+  month_caption: "hidden",
+  nav: "hidden",
+  day_button: t(
+    "size-[30px]",
+    "flex",
+    "items-center",
+    "justify-center",
+    "text-sm",
+    "font-semibold",
+    "cursor-pointer",
+    "rounded-full",
+    "hover:bg-slate-100",
+    "dark:hover:bg-metal-700",
+    "transition-colors",
+    "text-[#314158]",
+    "dark:text-white",
+    "focus:outline-none",
+    "focus-visible:outline-none",
+    e?.dayButton
+  ),
+  day: t(
+    "p-0",
+    "w-[37px]",
+    "h-[38px]",
+    "text-center",
+    "align-middle",
+    e?.day
+  ),
+  selected: t(
+    "[&>button]:bg-blue-600",
+    "[&>button]:text-white",
+    "[&>button]:hover:bg-blue-700",
+    "dark:[&>button]:bg-aurora-500",
+    "dark:[&>button]:hover:bg-aurora-500",
+    "dark:[&>button]:text-metal-900",
+    e?.selected
+  ),
+  range_start: t(
+    "drp-range-start",
+    "[&>button]:!bg-blue-600",
+    "[&>button]:!text-white",
+    "[&>button]:!rounded-full",
+    "[&>button]:hover:!bg-blue-700",
+    "[&>button]:relative",
+    "[&>button]:z-10",
+    "dark:[&>button]:!bg-aurora-500",
+    "dark:[&>button]:hover:!bg-aurora-500",
+    "dark:[&>button]:!text-metal-900",
+    "!relative",
+    "before:absolute",
+    "before:top-[4px]",
+    "before:bottom-[4px]",
+    "before:left-1/2",
+    "before:right-0",
+    "before:!bg-[#EFF6FF]",
+    "dark:before:!bg-aurora-500/10",
+    "last:before:!hidden",
+    e?.rangeStart
+  ),
+  range_end: t(
+    "drp-range-end",
+    "[&>button]:!bg-blue-600",
+    "[&>button]:!text-white",
+    "[&>button]:!rounded-full",
+    "[&>button]:hover:!bg-blue-700",
+    "[&>button]:relative",
+    "[&>button]:z-10",
+    "dark:[&>button]:!bg-aurora-500",
+    "dark:[&>button]:hover:!bg-aurora-500",
+    "dark:[&>button]:!text-metal-900",
+    "!relative",
+    "before:absolute",
+    "before:top-[4px]",
+    "before:bottom-[4px]",
+    "before:left-0",
+    "before:right-1/2",
+    "before:!bg-[#EFF6FF]",
+    "dark:before:!bg-aurora-500/10",
+    "first:before:!hidden",
+    e?.rangeEnd
+  ),
+  range_middle: t(
+    "drp-range-middle",
+    "!relative",
+    "before:absolute",
+    "before:top-[4px]",
+    "before:bottom-[4px]",
+    "before:left-0",
+    "before:right-0",
+    "before:!bg-[#EFF6FF]",
+    "dark:before:!bg-aurora-500/10",
+    "first:before:rounded-l-full",
+    "last:before:rounded-r-full",
+    "[&>button]:!text-[#314158]",
+    "[&>button]:!bg-transparent",
+    "[&>button]:!rounded-full",
+    "[&>button]:relative",
+    "[&>button]:z-10",
+    "[&>button]:hover:!bg-blue-100",
+    "dark:[&>button]:!text-white",
+    "dark:[&>button]:hover:!bg-aurora-500/20",
+    e?.rangeMiddle
+  ),
+  table: t("w-full border-collapse table-fixed", e?.table),
+  weekdays: t("text-[#62748e]", "dark:text-metal-400", e?.weekdays),
+  weeks: t("[&>tr>td]:p-0", "[&>tr]:h-[38px]", e?.weeks),
+  weekday: t(
+    "font-semibold",
+    "text-xs",
+    "uppercase",
+    "text-[#62748e]",
+    "dark:text-metal-400",
+    "pb-4",
+    "w-[37px]",
+    e?.weekday
+  ),
+  today: t(
+    "[&>button]:text-[#155dfc]",
+    "dark:[&>button]:text-aurora-500",
+    e?.today
+  ),
+  month_grid: "w-full",
+  disabled: t(
+    "[&>button]:opacity-50",
+    "[&>button]:cursor-not-allowed",
+    e?.disabled
+  ),
+  outside: t(
+    "[&>button]:!text-slate-400",
+    "dark:[&>button]:!text-metal-500",
+    e?.outside
+  )
+}), o = 259, a = 32, n = 720 * 60 * 60 * 1e3, d = 56, l = 28, u = 38;
+export {
+  a as GAP_WIDTH,
+  d as MONTH_HEADER_HEIGHT,
+  n as MS_PER_MONTH,
+  o as SINGLE_MONTH_WIDTH,
+  l as WEEKDAY_HEADER_HEIGHT,
+  u as WEEK_ROW_HEIGHT,
+  b as createDayPickerClassNames,
+  x as getMonthName
+};

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from '../constants';
+export * from '../utils';
+export * from './useTogetherCarousel';
+export * from './useIndependentCarousel';

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

@@ -0,0 +1,21 @@
+import { GAP_WIDTH as o, MONTH_HEADER_HEIGHT as r, MS_PER_MONTH as H, SINGLE_MONTH_WIDTH as E, WEEKDAY_HEADER_HEIGHT as a, WEEK_ROW_HEIGHT as _, createDayPickerClassNames as n } from "../constants/index.js";
+import { calculateCalendarHeight as s, getNextMonth as I, getPrevMonth as M, getWeeksInMonth as m } from "../utils/index.js";
+import { useTogetherCarousel as g } from "./useTogetherCarousel.js";
+import { useIndependentCarousel as l } from "./useIndependentCarousel.js";
+import { getMonthName as x } from "../../../utils/validation.js";
+export {
+  o as GAP_WIDTH,
+  r as MONTH_HEADER_HEIGHT,
+  H as MS_PER_MONTH,
+  E as SINGLE_MONTH_WIDTH,
+  a as WEEKDAY_HEADER_HEIGHT,
+  _ as WEEK_ROW_HEIGHT,
+  s as calculateCalendarHeight,
+  n as createDayPickerClassNames,
+  x as getMonthName,
+  I as getNextMonth,
+  M as getPrevMonth,
+  m as getWeeksInMonth,
+  l as useIndependentCarousel,
+  g as useTogetherCarousel
+};

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useIndependentCarousel.d.ts

@@ -0,0 +1,24 @@
+export type UseIndependentCarouselProps = {
+    displayedMonths: [Date, Date];
+    animationDuration: number;
+    navigationMode: 'together' | 'independent';
+};
+export declare const useIndependentCarousel: ({ displayedMonths, animationDuration, navigationMode, }: UseIndependentCarouselProps) => {
+    leftInternalMonth: Date;
+    leftPrevMonth: Date;
+    leftNextMonth: Date;
+    leftCarouselRef: import('react').RefObject<HTMLDivElement | null>;
+    isLeftAnimating: boolean;
+    enableLeftTransition: boolean;
+    leftAnimateTransform: boolean;
+    getLeftTransform: () => string;
+    rightInternalMonth: Date;
+    rightPrevMonth: Date;
+    rightNextMonth: Date;
+    rightCarouselRef: import('react').RefObject<HTMLDivElement | null>;
+    isRightAnimating: boolean;
+    enableRightTransition: boolean;
+    rightAnimateTransform: boolean;
+    getRightTransform: () => string;
+    calendarHeight: number;
+};

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

@@ -0,0 +1,142 @@
+import { useState as f, useRef as F, useEffect as m, useMemo as U, useCallback as k } from "react";
+import { MS_PER_MONTH as W, SINGLE_MONTH_WIDTH as I } from "../constants/index.js";
+import { getNextMonth as h, getPrevMonth as g, getWeeksInMonth as w, calculateCalendarHeight as V } from "../utils/index.js";
+const y = ({
+  displayedMonths: a,
+  animationDuration: R,
+  navigationMode: M
+}) => {
+  const [o, b] = f(
+    a[0]
+  ), [i, C] = f(null), [n, S] = f(!1), [u, L] = f(!1), [O, N] = f(!0), X = F(null), d = F(!0), [l, E] = f(
+    a[1]
+  ), [s, H] = f(null), [r, D] = f(!1), [c, q] = f(!1), [$, P] = f(!0), G = F(null), _ = F(!0);
+  m(() => {
+    if (M === "independent") {
+      if (d.current) {
+        d.current = !1;
+        return;
+      }
+      if (!n) {
+        const e = o.getTime(), t = a[0].getTime();
+        if (e !== t) {
+          const T = t - e, A = Math.round(T / W);
+          if (Math.abs(A) === 1) {
+            const x = A > 0 ? "left" : "right";
+            C(x), S(!0), L(!1);
+          } else
+            b(a[0]);
+        }
+      }
+    }
+  }, [a, o, n, M]), m(() => {
+    if (M === "independent") {
+      if (_.current) {
+        _.current = !1;
+        return;
+      }
+      if (!r) {
+        const e = l.getTime(), t = a[1].getTime();
+        if (e !== t) {
+          const T = t - e, A = Math.round(T / W);
+          if (Math.abs(A) === 1) {
+            const x = A > 0 ? "left" : "right";
+            H(x), D(!0), q(!1);
+          } else
+            E(a[1]);
+        }
+      }
+    }
+  }, [a, l, r, M]), m(() => {
+    n && !u && i && requestAnimationFrame(() => {
+      L(!0);
+    });
+  }, [n, u, i]), m(() => {
+    r && !c && s && requestAnimationFrame(() => {
+      q(!0);
+    });
+  }, [r, c, s]), m(() => {
+    if (n && u) {
+      const e = setTimeout(() => {
+        N(!1), requestAnimationFrame(() => {
+          b((t) => i === "left" ? h(t) : g(t)), S(!1), C(null), L(!1), requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              N(!0);
+            });
+          });
+        });
+      }, R);
+      return () => clearTimeout(e);
+    }
+  }, [
+    n,
+    u,
+    R,
+    i
+  ]), m(() => {
+    if (r && c) {
+      const e = setTimeout(() => {
+        P(!1), requestAnimationFrame(() => {
+          E((t) => s === "left" ? h(t) : g(t)), D(!1), H(null), q(!1), requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              P(!0);
+            });
+          });
+        });
+      }, R);
+      return () => clearTimeout(e);
+    }
+  }, [
+    r,
+    c,
+    R,
+    s
+  ]);
+  const j = U(() => {
+    let e = o, t = l;
+    n && i === "left" ? e = h(o) : n && i === "right" && (e = g(o)), r && s === "left" ? t = h(l) : r && s === "right" && (t = g(l));
+    const T = Math.max(
+      w(e),
+      w(t)
+    );
+    return V(T);
+  }, [
+    o,
+    l,
+    n,
+    r,
+    i,
+    s
+  ]), p = k(() => {
+    let e = -I;
+    return n && u && (i === "left" ? e = -2 * I : i === "right" && (e = 0)), `translateX(${e}px)`;
+  }, [n, u, i]), z = k(() => {
+    let e = -I;
+    return r && c && (s === "left" ? e = -2 * I : s === "right" && (e = 0)), `translateX(${e}px)`;
+  }, [r, c, s]), B = g(o), J = h(o), K = g(l), Q = h(l);
+  return {
+    // Left month
+    leftInternalMonth: o,
+    leftPrevMonth: B,
+    leftNextMonth: J,
+    leftCarouselRef: X,
+    isLeftAnimating: n,
+    enableLeftTransition: O,
+    leftAnimateTransform: u,
+    getLeftTransform: p,
+    // Right month
+    rightInternalMonth: l,
+    rightPrevMonth: K,
+    rightNextMonth: Q,
+    rightCarouselRef: G,
+    isRightAnimating: r,
+    enableRightTransition: $,
+    rightAnimateTransform: c,
+    getRightTransform: z,
+    // Shared
+    calendarHeight: j
+  };
+};
+export {
+  y as useIndependentCarousel
+};

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.d.ts

@@ -0,0 +1,22 @@
+export type UseTogetherCarouselProps = {
+    displayedMonths: [Date, Date];
+    animationDuration: number;
+    disabled: boolean;
+    canNavigatePrev: boolean;
+    canNavigateNext: boolean;
+    navigationMode: 'together' | 'independent';
+    navigatePrevMonth: () => void;
+    navigateNextMonth: () => void;
+};
+export declare const useTogetherCarousel: ({ displayedMonths, animationDuration, disabled, canNavigatePrev, canNavigateNext, navigationMode, navigatePrevMonth, navigateNextMonth, }: UseTogetherCarouselProps) => {
+    carouselRef: import('react').RefObject<HTMLDivElement | null>;
+    isAnimating: boolean;
+    enableTransition: boolean;
+    animateTransform: boolean;
+    calendarHeight: number;
+    carouselTotalWidth: number;
+    monthsToRender: Date[];
+    handlePrevMonth: () => void;
+    handleNextMonth: () => void;
+    getTransform: () => string;
+};

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

@@ -0,0 +1,93 @@
+import { useState as f, useRef as b, useMemo as K, useEffect as I, useCallback as R } from "react";
+import { MS_PER_MONTH as Q, SINGLE_MONTH_WIDTH as W, GAP_WIDTH as d } from "../constants/index.js";
+import { getPrevMonth as M, getNextMonth as g, getWeeksInMonth as U, calculateCalendarHeight as V } from "../utils/index.js";
+const tt = ({
+  displayedMonths: l,
+  animationDuration: F,
+  disabled: c,
+  canNavigatePrev: _,
+  canNavigateNext: q,
+  navigationMode: C,
+  navigatePrevMonth: D,
+  navigateNextMonth: E
+}) => {
+  const [n, u] = f(null), [t, a] = f(!1), [o, i] = f(!1), [G, S] = f(!0), [s, k] = f(l), P = b(null), p = b(!0), A = W + d, w = M(M(s[0])), x = M(s[0]), m = s[0], h = s[1], H = g(s[1]), L = g(g(s[1])), N = K(() => {
+    let e;
+    t && n === "left" ? e = [h, H] : t && n === "right" ? e = [x, m] : e = [m, h];
+    const r = Math.max(...e.map(U));
+    return V(r);
+  }, [
+    t,
+    n,
+    m,
+    h,
+    H,
+    x
+  ]), X = 6 * W + 5 * d, T = -2 * (W + d);
+  I(() => {
+    if (C !== "independent") {
+      if (p.current) {
+        p.current = !1;
+        return;
+      }
+      if (!t) {
+        const e = s[0].getTime(), r = l[0].getTime();
+        if (e !== r) {
+          const B = r - e, O = Math.round(B / Q);
+          if (Math.abs(O) === 1) {
+            const J = O > 0 ? "left" : "right";
+            u(J), a(!0), i(!1);
+          } else
+            k(l);
+        }
+      }
+    }
+  }, [l, s, t, C]), I(() => {
+    t && !o && n && requestAnimationFrame(() => {
+      i(!0);
+    });
+  }, [t, o, n]), I(() => {
+    if (t && o) {
+      const e = setTimeout(() => {
+        S(!1), requestAnimationFrame(() => {
+          k((r) => n === "left" ? [r[1], g(r[1])] : [M(r[0]), r[0]]), a(!1), u(null), i(!1), requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              S(!0);
+            });
+          });
+        });
+      }, F);
+      return () => clearTimeout(e);
+    }
+  }, [t, o, F, n]);
+  const $ = R(() => {
+    t || c || !_ || (u("right"), a(!0), i(!1), D());
+  }, [t, c, _, D]), j = R(() => {
+    t || c || !q || (u("left"), a(!0), i(!1), E());
+  }, [t, c, q, E]), z = R(() => {
+    let e = T;
+    return t && o && (n === "left" ? e = T - A : n === "right" && (e = T + A)), `translateX(${e}px)`;
+  }, [T, t, o, n, A]);
+  return {
+    carouselRef: P,
+    isAnimating: t,
+    enableTransition: G,
+    animateTransform: o,
+    calendarHeight: N,
+    carouselTotalWidth: X,
+    monthsToRender: [
+      w,
+      x,
+      m,
+      h,
+      H,
+      L
+    ],
+    handlePrevMonth: $,
+    handleNextMonth: j,
+    getTransform: z
+  };
+};
+export {
+  tt as useTogetherCarousel
+};

package/dist/components/DateRangePicker/components/CalendarPanel/utils/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Calculate the number of weeks displayed in a calendar month view.
+ */
+export declare const getWeeksInMonth: (date: Date) => number;
+/**
+ * Calculate the calendar content height based on the number of weeks.
+ */
+export declare const calculateCalendarHeight: (weeks: number) => number;
+/**
+ * Get the previous month from a given date.
+ */
+export declare const getPrevMonth: (date: Date) => Date;
+/**
+ * Get the next month from a given date.
+ */
+export declare const getNextMonth: (date: Date) => Date;

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

@@ -0,0 +1,11 @@
+import { MONTH_HEADER_HEIGHT as l, WEEKDAY_HEADER_HEIGHT as g, WEEK_ROW_HEIGHT as D } from "../constants/index.js";
+const h = (t) => {
+  const e = t.getFullYear(), n = t.getMonth(), o = new Date(e, n, 1), a = new Date(e, n + 1, 0), s = o.getDay(), r = a.getDate(), c = s + r;
+  return Math.ceil(c / 7);
+}, H = (t) => l + g + t * D, M = (t) => new Date(t.getFullYear(), t.getMonth() - 1, 1), u = (t) => new Date(t.getFullYear(), t.getMonth() + 1, 1);
+export {
+  H as calculateCalendarHeight,
+  u as getNextMonth,
+  M as getPrevMonth,
+  h as getWeeksInMonth
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DateTimeInputsProps } from './DateTimeInputs.types';
+export declare const DateTimeInputs: FC<DateTimeInputsProps>;

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

@@ -0,0 +1,107 @@
+import { jsxs as l, jsx as e, Fragment as L } from "react/jsx-runtime";
+import { cn as $ } from "../../../../utils/index.js";
+import { dateTimeInputsVariants as k } from "./DateTimeInputs.variants.js";
+import { useDateTimeInputs as w } from "./hooks/useDateTimeInputs.js";
+import { StartInputFields as P } from "./components/StartInputFields/StartInputFields.js";
+import { EndInputFields as R } from "./components/EndInputFields/EndInputFields.js";
+const 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: c,
+    startDateError: V,
+    handleStartDateFocus: b,
+    handleStartDateChange: f,
+    handleStartDateBlur: C,
+    handleStartTimeChange: F,
+    endDateValue: S,
+    endDateError: I,
+    handleEndDateFocus: v,
+    handleEndDateChange: B,
+    handleEndDateBlur: x,
+    handleEndTimeChange: y,
+    startHiddenValue: j,
+    endHiddenValue: H
+  } = w({
+    errorInvalidDate: p,
+    errorDateNotAvailable: T,
+    errorStartAfterEnd: g,
+    errorEndBeforeStart: E
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: $(k({ className: m }), a?.root),
+      children: [
+        /* @__PURE__ */ e(
+          P,
+          {
+            dateValue: c,
+            timeValue: o.startTime,
+            error: V,
+            disabled: i,
+            showTime: d,
+            timeFormat: r,
+            labelDate: u,
+            labelTime: n,
+            ariaLabelDate: D,
+            onDateChange: f,
+            onDateFocus: b,
+            onDateBlur: C,
+            onTimeChange: F,
+            classNames: a
+          }
+        ),
+        /* @__PURE__ */ e(
+          R,
+          {
+            dateValue: S,
+            timeValue: o.endTime,
+            error: I,
+            disabled: i,
+            showTime: d,
+            timeFormat: r,
+            labelDate: s,
+            labelTime: n,
+            ariaLabelDate: h,
+            onDateChange: B,
+            onDateFocus: v,
+            onDateBlur: x,
+            onTimeChange: y,
+            classNames: a
+          }
+        ),
+        t && /* @__PURE__ */ l(L, { children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "hidden",
+              name: `${t}-start`,
+              value: j
+            }
+          ),
+          /* @__PURE__ */ e("input", { type: "hidden", name: `${t}-end`, value: H })
+        ] })
+      ]
+    }
+  );
+};
+q.displayName = "DateRangePickerDateTimeInputs";
+export {
+  q as DateTimeInputs
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.types.d.ts

@@ -0,0 +1,37 @@
+export type DateTimeInputsClassNames = {
+    /** Root container */
+    root?: string;
+    /** Start/End date group wrapper */
+    group?: string;
+    /** Date input wrapper (contains label + input) */
+    dateWrapper?: string;
+    /** Time input wrapper (contains label + TimePicker) */
+    timeWrapper?: string;
+    /** Labels for inputs */
+    label?: string;
+    /** Date input field */
+    input?: string;
+};
+export type DateTimeInputsProps = {
+    className?: string;
+    /** Label for start date input (default: 'Start date') */
+    labelStartDate?: string;
+    /** Label for end date input (default: 'End date') */
+    labelEndDate?: string;
+    /** Label for time inputs (default: 'Time') */
+    labelTime?: string;
+    /** Aria label for start date input (default: 'Start date') */
+    ariaLabelStartDate?: string;
+    /** Aria label for end date input (default: 'End date') */
+    ariaLabelEndDate?: string;
+    /** Error message for invalid date format (default: 'Invalid date') */
+    errorInvalidDate?: string;
+    /** Error message for unavailable date (default: 'Date is not available') */
+    errorDateNotAvailable?: string;
+    /** Error message when start date is after end date (default: 'Start date must be before end date') */
+    errorStartAfterEnd?: string;
+    /** Error message when end date is before start date (default: 'End date must be after start date') */
+    errorEndBeforeStart?: string;
+    /** Custom class names for styling */
+    classNames?: DateTimeInputsClassNames;
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const dateTimeInputsVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const dateTimeGroupVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const dateInputWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const timeInputWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const inputLabelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;