impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/forms/date-picker/calendar-selection-adapters.d.ts

@@ -0,0 +1,24 @@
+import { DateRange } from 'react-day-picker';
+import { CalendarApplyValue, MonthRange, MonthSelection, WeekRange, WeekSelection } from '../../data-display/calendar';
+export type DateSelectValue = Date | Date[] | DateRange | undefined;
+export type MonthSelectValue = MonthSelection | MonthSelection[] | MonthRange | undefined;
+export type WeekSelectValue = WeekSelection | WeekSelection[] | WeekRange | undefined;
+export declare function isMonthRangeSelection(value: MonthSelectValue | CalendarApplyValue | undefined): value is MonthRange;
+export declare function isWeekRangeSelection(value: WeekSelectValue | CalendarApplyValue | undefined): value is WeekRange;
+export declare function isDateRangeSelection(value: DateSelectValue): value is DateRange;
+export declare function coerceSingleDate(value: DateSelectValue): Date | undefined;
+export declare function coerceDateRange(value: DateSelectValue): DateRange | undefined;
+export declare function coerceSingleDateApply(value: CalendarApplyValue | undefined, fallback?: Date): Date | undefined;
+export declare function coerceDateRangeApply(value: CalendarApplyValue | undefined, fallback?: DateRange): DateRange | undefined;
+export declare function coerceSingleMonth(value: MonthSelectValue): MonthSelection | undefined;
+export declare function coerceMonthArray(value: MonthSelectValue): MonthSelection[] | undefined;
+export declare function coerceMonthRangeApply(value: CalendarApplyValue | undefined, fallback?: MonthRange): MonthRange | undefined;
+export declare function coerceSingleWeek(value: WeekSelectValue): WeekSelection | undefined;
+export declare function coerceWeekArray(value: WeekSelectValue): WeekSelection[] | undefined;
+export declare function coerceWeekRangeApply(value: CalendarApplyValue | undefined, fallback?: WeekRange): WeekRange | undefined;
+export declare function coerceDateArray(value: DateSelectValue): Date[] | undefined;
+export declare function coerceDateArrayApply(value: CalendarApplyValue | undefined, fallback?: Date[]): Date[] | undefined;
+export declare function coerceMonthArrayApply(value: CalendarApplyValue | undefined, fallback?: MonthSelection[]): MonthSelection[] | undefined;
+export declare function coerceWeekArrayApply(value: CalendarApplyValue | undefined, fallback?: WeekSelection[]): WeekSelection[] | undefined;
+export declare function coerceSingleMonthApply(value: CalendarApplyValue | undefined, fallback?: MonthSelection): MonthSelection | undefined;
+export declare function coerceSingleWeekApply(value: CalendarApplyValue | undefined, fallback?: WeekSelection): WeekSelection | undefined;

package/dist/components/forms/date-picker/calendar-selection-adapters.js

@@ -0,0 +1,89 @@
+function e(r) {
+  return r == null || Array.isArray(r) || r instanceof Date || "weekOfMonth" in r ? !1 : "from" in r || "to" in r;
+}
+function i(r) {
+  if (r == null || Array.isArray(r) || r instanceof Date || !("from" in r) && !("to" in r)) return !1;
+  const n = r.from;
+  return n == null || "weekOfMonth" in n;
+}
+function o(r) {
+  if (r == null || Array.isArray(r) || r instanceof Date || "weekOfMonth" in r || "year" in r && "month" in r) return !1;
+  const n = r.from;
+  return n === void 0 || n instanceof Date;
+}
+function f(r) {
+  return r instanceof Date ? r : void 0;
+}
+function c(r) {
+  return o(r) ? r : void 0;
+}
+function y(r, n) {
+  return r instanceof Date ? r : n;
+}
+function A(r, n) {
+  if (r == null || Array.isArray(r) || r instanceof Date || "weekOfMonth" in r || "year" in r && "month" in r && !("from" in r)) return n;
+  if ("from" in r || "to" in r) {
+    const t = r.from;
+    if (t === void 0 || t instanceof Date) return r;
+  }
+  return n;
+}
+function s(r) {
+  if (!(r == null || Array.isArray(r) || e(r)))
+    return r;
+}
+function p(r) {
+  return Array.isArray(r) ? r : void 0;
+}
+function h(r, n) {
+  return e(r) ? r : n;
+}
+function D(r) {
+  if (!(r == null || Array.isArray(r) || i(r)))
+    return r;
+}
+function M(r) {
+  return Array.isArray(r) ? r : void 0;
+}
+function g(r, n) {
+  return i(r) ? r : n;
+}
+function m(r) {
+  return Array.isArray(r) ? r : void 0;
+}
+function u(r, n) {
+  return Array.isArray(r) && r.every((t) => t instanceof Date) ? r : n;
+}
+function d(r, n) {
+  return !Array.isArray(r) || !r.every((t) => typeof t == "object" && t !== null && "year" in t && "month" in t && !("weekOfMonth" in t)) ? n : r;
+}
+function S(r, n) {
+  return Array.isArray(r) && r.every((t) => "weekOfMonth" in t) ? r : n;
+}
+function w(r, n) {
+  return r == null || Array.isArray(r) || r instanceof Date || e(r) || "weekOfMonth" in r ? n : "year" in r && "month" in r ? r : n;
+}
+function O(r, n) {
+  return r == null || Array.isArray(r) || r instanceof Date || i(r) ? n : "weekOfMonth" in r ? r : n;
+}
+export {
+  m as coerceDateArray,
+  u as coerceDateArrayApply,
+  c as coerceDateRange,
+  A as coerceDateRangeApply,
+  p as coerceMonthArray,
+  d as coerceMonthArrayApply,
+  h as coerceMonthRangeApply,
+  f as coerceSingleDate,
+  y as coerceSingleDateApply,
+  s as coerceSingleMonth,
+  w as coerceSingleMonthApply,
+  D as coerceSingleWeek,
+  O as coerceSingleWeekApply,
+  M as coerceWeekArray,
+  S as coerceWeekArrayApply,
+  g as coerceWeekRangeApply,
+  o as isDateRangeSelection,
+  e as isMonthRangeSelection,
+  i as isWeekRangeSelection
+};

package/dist/components/forms/date-picker/date-picker.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerProps } from './date-picker.types';
+import * as React from "react";
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/date-picker/date-picker.js

@@ -0,0 +1,165 @@
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import * as p from "react";
+import { Cross as F, CalendarMonth as ee } from "impact-nova-icons";
+import { format as x, isValid as b, parse as P } from "date-fns";
+import { cn as ne, maskDate as te, padValidDateString as re } from "../../../lib/utils.js";
+import { Input as oe } from "../input/input.js";
+import { Popover as le, PopoverAnchor as ie, PopoverContent as ae } from "../../feedback/popover/popover.js";
+import { Calendar as ce } from "../../data-display/calendar/calendar.js";
+import { Tooltip as E, TooltipTrigger as T, TooltipContent as j } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as se } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as pe } from "../../../i18n/getDateFnsLocale.js";
+import { createComponent as ue } from "../../../lib/primitives/create-component.js";
+import { coerceSingleDateApply as de, coerceSingleDate as fe } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as he } from "../../../lib/date-bounds-matcher.js";
+const Se = ue(
+  "DatePicker",
+  ({
+    value: t,
+    onChange: f,
+    format: o = "MM/dd/yyyy",
+    placeholder: L,
+    minDate: B,
+    maxDate: K,
+    startMonth: z,
+    endMonth: O,
+    showFooter: h = !0,
+    weekStartsOn: I,
+    disabled: s,
+    className: H,
+    ...q
+  }, G) => {
+    const { locale: S, t: m } = se(), g = p.useMemo(() => pe(S), [S]), J = L ?? m("datePicker.selectDate"), D = p.useRef(null), y = p.useRef(null);
+    p.useImperativeHandle(G, () => D.current);
+    const [l, Q] = p.useState(!1), v = p.useRef(!1), [C, i] = p.useState(null), k = t ? x(t, o, { locale: g }) : "", u = C?.input ?? k, N = l ? C?.pending ?? t : t, U = C?.viewMonth ?? t ?? /* @__PURE__ */ new Date(), a = (e) => {
+      s || (i(e ? {
+        input: k,
+        pending: t,
+        viewMonth: t ?? /* @__PURE__ */ new Date()
+      } : null), Q(e));
+    };
+    p.useEffect(() => {
+      D.current && y.current !== null && (D.current.setSelectionRange(y.current, y.current), y.current = null);
+    }, [u]);
+    const W = (e) => {
+      const n = fe(e), d = n ? x(n, o, { locale: g }) : "";
+      i(
+        (c) => c ? { ...c, pending: n, input: d, viewMonth: n ?? c.viewMonth } : null
+      ), n && !h && (f?.(n), a(!1));
+    }, X = (e) => {
+      const n = de(e, N);
+      f?.(n), a(!1);
+    }, R = () => {
+      a(!1);
+    }, A = () => {
+      f?.(void 0), h ? i(
+        (e) => e ? { ...e, pending: void 0, input: "" } : null
+      ) : a(!1);
+    }, Y = (e) => {
+      const n = e.target.value, d = te(n, o, u);
+      if (i((M) => ({ ...M ?? {
+        input: k,
+        pending: t,
+        viewMonth: t ?? /* @__PURE__ */ new Date()
+      }, input: d })), d === "") {
+        h || f?.(void 0);
+        return;
+      }
+      const c = P(d, o, /* @__PURE__ */ new Date(), { locale: g });
+      b(c) && d.length === o.length && (i((M) => ({ ...M ?? {
+        input: d,
+        pending: t,
+        viewMonth: c
+      }, pending: c, viewMonth: c })), h || f?.(c));
+    }, Z = () => {
+      if (l) return;
+      const e = re(u, o), n = P(e, o, /* @__PURE__ */ new Date(), { locale: g });
+      !b(n) || e.length !== o.length ? i(null) : h || (f?.(n), i(null));
+    }, V = (t ? x(t, o, { locale: g }) : "") !== u, _ = u.length === o.length && !b(P(u, o, /* @__PURE__ */ new Date(), { locale: g }));
+    return /* @__PURE__ */ w(le, { open: s ? !1 : l, onOpenChange: a, children: [
+      /* @__PURE__ */ r(ie, { asChild: !0, children: /* @__PURE__ */ r("div", { "data-component": "date-picker", "data-state": l ? "open" : "closed", "data-pending": V || void 0, children: /* @__PURE__ */ r(
+        oe,
+        {
+          ref: D,
+          value: u,
+          onChange: Y,
+          onBlur: Z,
+          onClick: () => !s && a(!0),
+          onKeyDown: (e) => {
+            (e.key === "Enter" || e.key === "ArrowDown") && !l && !s && (e.preventDefault(), v.current = !0, a(!0)), e.key === "Escape" && l && (e.preventDefault(), R());
+          },
+          placeholder: l ? o : J,
+          disabled: s,
+          "data-form-control": "input",
+          className: ne(
+            "cursor-pointer",
+            _ ? "text-destructive" : V ? "text-content-placeholder" : "",
+            H
+          ),
+          suffix: /* @__PURE__ */ w("div", { className: "flex items-center gap-1", children: [
+            t && !s && /* @__PURE__ */ w(E, { children: [
+              /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "aria-label": m("calendar.clear"),
+                  onClick: (e) => {
+                    e.stopPropagation(), A();
+                  },
+                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ r(F, { className: "size-3 hover:text-content" })
+                }
+              ) }),
+              /* @__PURE__ */ r(j, { variant: "tertiary", side: "top", children: m("calendar.clear") })
+            ] }),
+            /* @__PURE__ */ w(E, { children: [
+              /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
+                e.stopPropagation(), s || a(!l);
+              }, onKeyDown: (e) => {
+                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), s || (v.current = !0, a(!l)));
+              }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ r(ee, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+              /* @__PURE__ */ r(j, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
+            ] })
+          ] }),
+          ...q
+        }
+      ) }) }),
+      /* @__PURE__ */ r(
+        ae,
+        {
+          className: "w-auto p-0",
+          align: "start",
+          "aria-label": m("datePicker.selectDate"),
+          onOpenAutoFocus: (e) => {
+            v.current || e.preventDefault(), v.current = !1;
+          },
+          children: /* @__PURE__ */ r(
+            ce,
+            {
+              mode: "single",
+              selected: N,
+              onSelect: W,
+              month: U,
+              onMonthChange: (e) => i(
+                (n) => n ? { ...n, viewMonth: e } : null
+              ),
+              disabled: he(B, K),
+              startMonth: z,
+              endMonth: O,
+              showFooter: h,
+              onApply: X,
+              onCancel: R,
+              onClear: A,
+              captionLayout: "dropdown",
+              ...I !== void 0 ? { weekStartsOn: I } : {}
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+export {
+  Se as DatePicker
+};

package/dist/components/forms/date-picker/date-picker.types.d.ts

@@ -0,0 +1,138 @@
+import { InputProps } from '../input/input.types';
+import { MonthSelection, MonthRange, WeekSelection, WeekRange } from '../../data-display/calendar';
+import { DateRange } from 'react-day-picker';
+export interface DatePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Which day the week starts on. 0 = Sunday, 1 = Monday, etc. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface DateRangePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: DateRange;
+    onChange?: (range: DateRange | undefined) => void;
+    format?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Which day the week starts on. 0 = Sunday, 1 = Monday, etc. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface MonthPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: MonthSelection;
+    onChange?: (month: MonthSelection | undefined) => void;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+}
+export interface MonthRangePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: MonthRange;
+    onChange?: (range: MonthRange | undefined) => void;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    displayFormat?: "MM/YYYY" | "YYYY/MM";
+}
+export interface WeekPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: WeekSelection;
+    onChange?: (week: WeekSelection | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Whether to use standard calendar weeks or fiscal weeks. Default: "calendar" */
+    calendarType?: "calendar" | "fiscal";
+    /** Only relevant when calendarType="fiscal". Default: "basic" */
+    fiscalMode?: "basic" | "advanced" | "custom";
+    /** What a click selects. "fiscalMonth" only applies with fiscalMode="advanced"|"custom". Default: "week" */
+    selectionMode?: "week" | "fiscalMonth";
+    /** Array of 12 week-counts per fiscal month, e.g. [4,4,5,4,4,5,4,4,5,4,4,5]. Required for fiscalMode="custom", optional for "advanced" (defaults to 4-4-5). */
+    fiscalMonthPattern?: number[];
+    /** 1-based month where the fiscal year starts. Default: 1 (January) */
+    fiscalYearStartMonth?: number;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface WeekRangePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: WeekRange;
+    onChange?: (range: WeekRange | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Whether to use standard calendar weeks or fiscal weeks. Default: "calendar" */
+    calendarType?: "calendar" | "fiscal";
+    /** Only relevant when calendarType="fiscal". Default: "basic" */
+    fiscalMode?: "basic" | "advanced" | "custom";
+    /** What a click selects. "fiscalMonth" only applies with fiscalMode="advanced"|"custom". Default: "week" */
+    selectionMode?: "week" | "fiscalMonth";
+    /** Array of 12 week-counts per fiscal month, e.g. [4,4,5,4,4,5,4,4,5,4,4,5]. Required for fiscalMode="custom", optional for "advanced" (defaults to 4-4-5). */
+    fiscalMonthPattern?: number[];
+    /** 1-based month where the fiscal year starts. Default: 1 (January) */
+    fiscalYearStartMonth?: number;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface MultiDatePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: Date[];
+    onChange?: (dates: Date[] | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+}
+export interface MultiMonthPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: MonthSelection[];
+    onChange?: (months: MonthSelection[] | undefined) => void;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+}
+export interface MultiWeekPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: WeekSelection[];
+    onChange?: (weeks: WeekSelection[] | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Whether to use standard calendar weeks or fiscal weeks. Default: "calendar" */
+    calendarType?: "calendar" | "fiscal";
+    /** Only relevant when calendarType="fiscal". Default: "basic" */
+    fiscalMode?: "basic" | "advanced" | "custom";
+    /** What a click selects. "fiscalMonth" selects an entire fiscal month block. Default: "week" */
+    selectionMode?: "week" | "fiscalMonth";
+    /** Array of 12 week-counts per fiscal month. Required for fiscalMode="custom", optional for "advanced". */
+    fiscalMonthPattern?: number[];
+    /** 1-based month where the fiscal year starts. Default: 1 (January) */
+    fiscalYearStartMonth?: number;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}

package/dist/components/forms/date-picker/date-range-picker.d.ts

@@ -0,0 +1,3 @@
+import { DateRangePickerProps } from './date-picker.types';
+import * as React from "react";
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/date-picker/date-range-picker.js

@@ -0,0 +1,238 @@
+import { jsx as d, jsxs as S } from "react/jsx-runtime";
+import * as m from "react";
+import { Cross as we, CalendarMonth as xe } from "impact-nova-icons";
+import { format as p, isValid as y, parse as D } from "date-fns";
+import { cn as A, padValidDateString as I, maskDate as q } from "../../../lib/utils.js";
+import { useFieldChrome as ke } from "../../../lib/primitives/use-field-chrome.js";
+import { Popover as Ee, PopoverAnchor as Pe, PopoverContent as Re } from "../../feedback/popover/popover.js";
+import { Calendar as Se } from "../../data-display/calendar/calendar.js";
+import { Tooltip as G, TooltipTrigger as J, TooltipContent as Q } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as Ie } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as Ve } from "../../../i18n/getDateFnsLocale.js";
+import { coerceDateRangeApply as Ce, coerceDateRange as Ne } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as Me } from "../../../lib/date-bounds-matcher.js";
+const ve = m.forwardRef(
+  ({
+    value: n,
+    onChange: a,
+    format: e = "MM/dd/yyyy",
+    startPlaceholder: U,
+    endPlaceholder: W,
+    minDate: X,
+    maxDate: Y,
+    startMonth: Z,
+    endMonth: _,
+    showFooter: h = !0,
+    weekStartsOn: T,
+    disabled: f,
+    label: $,
+    helperText: F,
+    helperTextPosition: ee = "absolute",
+    prefix: Ae,
+    prefixClick: Te,
+    isError: te,
+    error: ne,
+    size: j,
+    required: oe,
+    className: re,
+    ...le
+  }, se) => {
+    const { locale: K, t: P } = Ie(), r = m.useMemo(() => Ve(K), [K]), B = U ?? P("datePicker.startDate"), L = W ?? P("datePicker.endDate"), z = ne ?? te, ie = ke({
+      label: $,
+      helperText: F,
+      helperTextPosition: ee,
+      error: z,
+      required: oe,
+      disabled: f ?? void 0,
+      rootClassName: "w-full min-w-[240px]"
+    }), O = m.useRef(null), ce = m.useRef(null);
+    m.useImperativeHandle(se, () => O.current);
+    const [c, u] = m.useState(!1), V = m.useRef(!1), [R, b] = m.useState(n), [w, k] = m.useState(n?.from ? p(n.from, e, { locale: r }) : ""), [x, E] = m.useState(n?.to ? p(n.to, e, { locale: r }) : ""), [ae, N] = m.useState(n?.from || /* @__PURE__ */ new Date());
+    m.useEffect(() => {
+      c || (k(n?.from ? p(n.from, e, { locale: r }) : ""), E(n?.to ? p(n.to, e, { locale: r }) : ""), b(n));
+    }, [n, e, c, r]), m.useEffect(() => {
+      c && (b(n), k(n?.from ? p(n.from, e, { locale: r }) : ""), E(n?.to ? p(n.to, e, { locale: r }) : ""), N(n?.from || /* @__PURE__ */ new Date()));
+    }, [c, n, e, r]);
+    const fe = (t) => {
+      const o = Ne(t);
+      b(o), o?.from && k(p(o.from, e, { locale: r })), o?.to && E(p(o.to, e, { locale: r })), h || o?.from && o?.to && o.from.getTime() !== o.to.getTime() && (a?.(o), u(!1));
+    }, de = (t) => {
+      let o = Ce(t, R);
+      o?.from && !o.to && (o = { from: o.from, to: o.from }), a?.(o), u(!1);
+    }, M = () => {
+      b(n), k(n?.from ? p(n.from, e, { locale: r }) : ""), E(n?.to ? p(n.to, e, { locale: r }) : ""), u(!1);
+    }, v = () => {
+      b(void 0), k(""), E(""), a?.(void 0), h || u(!1);
+    }, pe = (t) => {
+      const o = t.target.value, s = q(o, e, w);
+      if (k(s), s === "") {
+        const l = { from: void 0, to: R?.to };
+        b(l), h || a?.(l);
+        return;
+      }
+      const i = D(s, e, /* @__PURE__ */ new Date(), { locale: r });
+      if (y(i) && s.length === e.length) {
+        const l = { from: i, to: R?.to };
+        b(l), N(i), h || a?.(l);
+      }
+    }, me = (t) => {
+      const o = t.target.value, s = q(o, e, x);
+      if (E(s), s === "") {
+        const l = { from: R?.from, to: void 0 };
+        b(l), h || a?.(l);
+        return;
+      }
+      const i = D(s, e, /* @__PURE__ */ new Date(), { locale: r });
+      if (y(i) && s.length === e.length) {
+        const l = { from: R?.from, to: i };
+        b(l), i && N(i), h || a?.(l);
+      }
+    }, H = () => {
+      if (c) return;
+      const t = I(w, e), o = I(x, e), s = D(t, e, /* @__PURE__ */ new Date(), { locale: r }), i = D(o, e, /* @__PURE__ */ new Date(), { locale: r }), l = y(s) && t.length === e.length, g = y(i) && o.length === e.length;
+      w && !l ? k(n?.from ? p(n.from, e, { locale: r }) : "") : l && k(t), x && !g ? E(n?.to ? p(n.to, e, { locale: r }) : "") : g && E(o), l && g && !h ? a?.({ from: s, to: i }) : l && !h ? a?.({ from: s, to: n?.to }) : g && !h && a?.({ from: n?.from, to: i });
+    }, ue = n?.from ? p(n.from, e, { locale: r }) : "", he = n?.to ? p(n.to, e, { locale: r }) : "", ge = w !== ue, ye = x !== he, De = w.length === e.length && !y(D(w, e, /* @__PURE__ */ new Date(), { locale: r })), be = x.length === e.length && !y(D(x, e, /* @__PURE__ */ new Date(), { locale: r }));
+    return /* @__PURE__ */ d("div", { "data-component": "date-range-picker", "data-disabled": f || void 0, children: ie.wrapControl(
+      /* @__PURE__ */ S(Ee, { open: f ? !1 : c, onOpenChange: (t) => {
+        f || u(t);
+      }, children: [
+        /* @__PURE__ */ d(Pe, { asChild: !0, children: /* @__PURE__ */ S(
+          "div",
+          {
+            "data-state": c ? "open" : "closed",
+            className: A(
+              "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
+              z ? "border-destructive hover:border-destructive" : "border-field",
+              j === "sm" ? "h-6" : j === "md" ? "h-[28px]" : "h-8",
+              f && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+              "cursor-pointer",
+              re
+            ),
+            children: [
+              /* @__PURE__ */ S("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                /* @__PURE__ */ d(
+                  "input",
+                  {
+                    ref: O,
+                    type: "text",
+                    value: w,
+                    onChange: pe,
+                    onBlur: H,
+                    onClick: () => !f && u(!0),
+                    onKeyDown: (t) => {
+                      if (t.key === "Enter" && !c) {
+                        t.preventDefault();
+                        const o = I(w, e), s = I(x, e), i = D(o, e, /* @__PURE__ */ new Date(), { locale: r }), l = D(s, e, /* @__PURE__ */ new Date(), { locale: r }), g = y(i) && o.length === e.length, C = y(l) && s.length === e.length;
+                        g && C ? a?.({ from: i, to: l }) : g ? a?.({ from: i, to: n?.to }) : C && a?.({ from: n?.from, to: l });
+                      }
+                      t.key === "ArrowDown" && !c && !f && (t.preventDefault(), V.current = !0, u(!0)), t.key === "Escape" && c && (t.preventDefault(), M());
+                    },
+                    placeholder: c ? e : B,
+                    disabled: !!f,
+                    "aria-label": B,
+                    "data-field": "start",
+                    className: A(
+                      "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                      De ? "text-destructive" : ge ? "text-content-placeholder" : ""
+                    ),
+                    ...le
+                  }
+                ),
+                /* @__PURE__ */ d(
+                  "input",
+                  {
+                    ref: ce,
+                    type: "text",
+                    value: x,
+                    onChange: me,
+                    onBlur: H,
+                    onClick: () => !f && u(!0),
+                    onKeyDown: (t) => {
+                      if (t.key === "Enter" && !c) {
+                        t.preventDefault();
+                        const o = I(w, e), s = I(x, e), i = D(o, e, /* @__PURE__ */ new Date(), { locale: r }), l = D(s, e, /* @__PURE__ */ new Date(), { locale: r }), g = y(i) && o.length === e.length, C = y(l) && s.length === e.length;
+                        g && C ? a?.({ from: i, to: l }) : g ? a?.({ from: i, to: n?.to }) : C && a?.({ from: n?.from, to: l });
+                      }
+                      t.key === "ArrowDown" && !c && !f && (t.preventDefault(), V.current = !0, u(!0)), t.key === "Escape" && c && (t.preventDefault(), M());
+                    },
+                    placeholder: c ? e : L,
+                    disabled: !!f,
+                    "aria-label": L,
+                    "data-field": "end",
+                    className: A(
+                      "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                      be ? "text-destructive" : ye ? "text-content-placeholder" : ""
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ S("div", { className: "flex items-center gap-1 shrink-0", children: [
+                n?.from && !f && /* @__PURE__ */ S(G, { children: [
+                  /* @__PURE__ */ d(J, { asChild: !0, children: /* @__PURE__ */ d(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: 0,
+                      "aria-label": P("calendar.clear"),
+                      onClick: (t) => {
+                        t.stopPropagation(), v();
+                      },
+                      onKeyDown: (t) => {
+                        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), v());
+                      },
+                      className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                      children: /* @__PURE__ */ d(we, { className: "size-3 hover:text-content text-content-icon" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ d(Q, { variant: "tertiary", side: "top", children: P("calendar.clear") })
+                ] }),
+                /* @__PURE__ */ S(G, { children: [
+                  /* @__PURE__ */ d(J, { asChild: !0, children: /* @__PURE__ */ d("button", { type: "button", tabIndex: 0, "aria-label": P("datePicker.selectMonthRange"), onClick: (t) => {
+                    t.stopPropagation(), f || u(!c);
+                  }, onKeyDown: (t) => {
+                    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), f || (V.current = !0, u(!c)));
+                  }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ d(xe, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+                  /* @__PURE__ */ d(Q, { variant: "tertiary", side: "top", children: P("datePicker.selectMonthRange") })
+                ] })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ d(
+          Re,
+          {
+            className: "w-auto p-0",
+            align: "start",
+            "aria-label": P("datePicker.selectDateRange"),
+            onOpenAutoFocus: (t) => {
+              V.current || t.preventDefault(), V.current = !1;
+            },
+            children: /* @__PURE__ */ d(
+              Se,
+              {
+                mode: "range",
+                selected: R,
+                onSelect: fe,
+                month: ae,
+                onMonthChange: N,
+                disabled: Me(X, Y),
+                startMonth: Z,
+                endMonth: _,
+                showFooter: h,
+                onApply: de,
+                onCancel: M,
+                onClear: v,
+                captionLayout: "dropdown",
+                ...T !== void 0 ? { weekStartsOn: T } : {}
+              }
+            )
+          }
+        )
+      ] })
+    ) });
+  }
+);
+ve.displayName = "DateRangePicker";
+export {
+  ve as DateRangePicker
+};