docthub-core-components 3.0.0 → 3.2.1

package/dist/components/overrides/ui/pickers/date-picker-field.js

@@ -0,0 +1,361 @@
+"use client";
+import { jsxs as C, jsx as l } from "react/jsx-runtime";
+import { c as Pe } from "react-compiler-runtime";
+import H from "dayjs";
+import Ae from "dayjs/plugin/customParseFormat";
+import Ce from "dayjs/plugin/localizedFormat";
+import { X as Ie, CalendarDays as Ee, ChevronLeft as Ve, ChevronRight as je } from "lucide-react";
+import * as o from "react";
+import { DayPicker as Fe } from "react-day-picker";
+import { Input as Le } from "../../../ui/input.js";
+import { Label as Re } from "../../../ui/label.js";
+import { Popover as Te, PopoverTrigger as Oe, PopoverContent as Be } from "../../../ui/popover.js";
+import { SelectContent as me, Select as pe, SelectItem as Ye, SelectTrigger as ge, SelectValue as he } from "../../../ui/select.js";
+import { cn as S } from "../../../../lib/utils.js";
+import { mergeDisabledMatchers as Ke, minMaxDisabledMatchers as ze, calendarMonthAnchor as be, isDateWithinMinMaxLocalDay as Ue } from "./day-picker-bounds.js";
+H.extend(Ae);
+H.extend(Ce);
+const oe = 100;
+function de(g, D, e = /* @__PURE__ */ new Date()) {
+  const n = e.getFullYear();
+  let s = n - oe, a = n + oe;
+  return g && (s = Math.max(s, g.getFullYear())), D && (a = Math.min(a, D.getFullYear())), s > a && (s = n - oe, a = n + oe), {
+    minYear: s,
+    maxYear: a
+  };
+}
+function ye(g, D, e) {
+  const n = g.getFullYear(), {
+    minYear: s,
+    maxYear: a
+  } = de(D, e);
+  return n >= s && n <= a;
+}
+const We = o.memo(function(D) {
+  const e = Pe(57), {
+    month: n,
+    onMonthChange: s,
+    locale: a,
+    minDate: c,
+    maxDate: ee
+  } = D, h = a === void 0 ? "en" : a, u = n.getFullYear(), L = n.getMonth();
+  let A;
+  e[0] !== h ? (A = Array.from({
+    length: 12
+  }, (d, m) => {
+    const U = new Date(2024, m, 1);
+    return H(U).locale(h).format("MMMM");
+  }), e[0] = h, e[1] = A) : A = e[1];
+  const I = A;
+  let X;
+  e[2] !== ee || e[3] !== c ? (X = de(c, ee), e[2] = ee, e[3] = c, e[4] = X) : X = e[4];
+  const {
+    minYear: f,
+    maxYear: E
+  } = X;
+  let Z;
+  if (e[5] !== E || e[6] !== f) {
+    let d;
+    e[8] !== f ? (d = (m, U) => f + U, e[8] = f, e[9] = d) : d = e[9], Z = Array.from({
+      length: E - f + 1
+    }, d), e[5] = E, e[6] = f, e[7] = Z;
+  } else
+    Z = e[7];
+  const N = Z;
+  let y;
+  e[10] !== n || e[11] !== s ? (y = (d) => {
+    const m = new Date(n);
+    m.setMonth(Number.parseInt(d, 10)), s(m);
+  }, e[10] = n, e[11] = s, e[12] = y) : y = e[12];
+  const _ = y;
+  let R;
+  e[13] !== n || e[14] !== s ? (R = (d) => {
+    const m = new Date(n);
+    m.setFullYear(Number.parseInt(d, 10)), s(m);
+  }, e[13] = n, e[14] = s, e[15] = R) : R = e[15];
+  const te = R;
+  let q;
+  e[16] !== n || e[17] !== s ? (q = () => {
+    const d = new Date(n);
+    d.setMonth(d.getMonth() - 1), s(d);
+  }, e[16] = n, e[17] = s, e[18] = q) : q = e[18];
+  const M = q;
+  let J;
+  e[19] !== n || e[20] !== s ? (J = () => {
+    const d = new Date(n);
+    d.setMonth(d.getMonth() + 1), s(d);
+  }, e[19] = n, e[20] = s, e[21] = J) : J = e[21];
+  const re = J;
+  let T;
+  e[22] !== u || e[23] !== n || e[24] !== s || e[25] !== N ? (T = () => {
+    if (N.length === 0)
+      return;
+    const d = N[0], m = N[N.length - 1];
+    if (u >= d && u <= m)
+      return;
+    const U = Math.min(Math.max(u, d), m), ne = new Date(n);
+    ne.setFullYear(U), s(ne);
+  }, e[22] = u, e[23] = n, e[24] = s, e[25] = N, e[26] = T) : T = e[26], o.useLayoutEffect(T, [N, u, n, s]);
+  const ue = "flex items-center justify-between p-2 border-b bg-muted";
+  let se;
+  e[27] === Symbol.for("react.memo_cache_sentinel") ? (se = /* @__PURE__ */ l(Ve, { className: "h-4 w-4" }), e[27] = se) : se = e[27];
+  let V;
+  e[28] !== M ? (V = /* @__PURE__ */ l("button", { type: "button", onClick: M, className: "h-7 w-7 p-0 border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 rounded-md flex items-center justify-center", children: se }), e[28] = M, e[29] = V) : V = e[29];
+  const le = "flex items-center gap-2", O = L.toString(), ae = I[L];
+  let j;
+  e[30] !== ae ? (j = /* @__PURE__ */ l(ge, { className: "w-32 h-8 text-sm", children: /* @__PURE__ */ l(he, { children: ae }) }), e[30] = ae, e[31] = j) : j = e[31];
+  let Y;
+  e[32] !== I ? (Y = /* @__PURE__ */ l(me, { children: I.map(Xe) }), e[32] = I, e[33] = Y) : Y = e[33];
+  let v;
+  e[34] !== _ || e[35] !== O || e[36] !== j || e[37] !== Y ? (v = /* @__PURE__ */ C(pe, { value: O, onValueChange: _, children: [
+    j,
+    Y
+  ] }), e[34] = _, e[35] = O, e[36] = j, e[37] = Y, e[38] = v) : v = e[38];
+  const B = pe, k = u.toString();
+  let w;
+  e[39] === Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ l(ge, { className: "w-20 h-8 text-sm", children: /* @__PURE__ */ l(he, {}) }), e[39] = w) : w = e[39];
+  let x;
+  e[40] !== N ? (x = /* @__PURE__ */ l(me, { className: "max-h-[200px]", children: N.map(Ze) }), e[40] = N, e[41] = x) : x = e[41];
+  let $;
+  e[42] !== B || e[43] !== te || e[44] !== k || e[45] !== x ? ($ = /* @__PURE__ */ C(B, { value: k, onValueChange: te, children: [
+    w,
+    x
+  ] }), e[42] = B, e[43] = te, e[44] = k, e[45] = x, e[46] = $) : $ = e[46];
+  let b;
+  e[47] !== v || e[48] !== $ ? (b = /* @__PURE__ */ C("div", { className: le, children: [
+    v,
+    $
+  ] }), e[47] = v, e[48] = $, e[49] = b) : b = e[49];
+  let K;
+  e[50] === Symbol.for("react.memo_cache_sentinel") ? (K = /* @__PURE__ */ l(je, { className: "h-4 w-4" }), e[50] = K) : K = e[50];
+  let P;
+  e[51] !== re ? (P = /* @__PURE__ */ l("button", { type: "button", onClick: re, className: "h-7 w-7 p-0 border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 rounded-md flex items-center justify-center", children: K }), e[51] = re, e[52] = P) : P = e[52];
+  let z;
+  return e[53] !== V || e[54] !== b || e[55] !== P ? (z = /* @__PURE__ */ C("div", { className: ue, children: [
+    V,
+    b,
+    P
+  ] }), e[53] = V, e[54] = b, e[55] = P, e[56] = z) : z = e[56], z;
+}), Ge = {
+  "MM/DD/YYYY": {
+    separator: "/",
+    pattern: /^[0-9/]$/
+  },
+  "DD/MM/YYYY": {
+    separator: "/",
+    pattern: /^[0-9/]$/
+  },
+  "YYYY-MM-DD": {
+    separator: "-",
+    pattern: /^[0-9-]$/
+  },
+  "DD-MM-YYYY": {
+    separator: "-",
+    pattern: /^[0-9-]$/
+  },
+  "DD MMM YYYY": {
+    separator: " ",
+    pattern: /^[0-9a-zA-Z\s]$/
+  }
+}, He = o.memo(({
+  label: g,
+  placeholder: D,
+  helperText: e,
+  required: n,
+  value: s,
+  onSelect: a,
+  onChange: c,
+  className: ee,
+  minDate: h,
+  maxDate: u,
+  disabled: L,
+  readOnly: A,
+  locale: I = "en",
+  inputClassName: X,
+  dateFormat: f = "YYYY-MM-DD",
+  error: E,
+  showOutsideDays: Z,
+  clearable: N = !1,
+  month: y,
+  onMonthChange: _,
+  open: R,
+  onOpenChange: te,
+  dayPickerProps: q,
+  manual: M = !1,
+  // Default to true for backward compatibility
+  popoverAlign: J = "end",
+  ...re
+}) => {
+  const {
+    disabled: T,
+    fromDate: ue,
+    toDate: se,
+    startMonth: V,
+    endMonth: le,
+    ...O
+  } = q ?? {}, [ae, j] = o.useState(!1), Y = R !== void 0 ? R : ae, v = te || j, [B, k] = o.useState(""), [w, x] = o.useState(s), [$, b] = o.useState(), [K, P] = o.useState(y ?? s ?? /* @__PURE__ */ new Date()), z = o.useMemo(() => y ?? K, [y, K]), d = o.useCallback((t) => {
+    _ ? _(t) : P(t);
+  }, [_]), m = o.useMemo(() => {
+    const t = Ge[f];
+    return t || {
+      separator: "",
+      pattern: /.*/
+    };
+  }, [f]), U = o.useMemo(() => D || (M ? f.toLowerCase() : "Click to select date"), [D, f, M]), ne = o.useCallback((t) => {
+    const r = t.replace(/\D/g, ""), {
+      separator: i
+    } = m;
+    if (r.length <= 2)
+      return r;
+    switch (f) {
+      case "MM/DD/YYYY":
+      case "DD/MM/YYYY":
+        return r.length <= 4 ? `${r.substring(0, 2)}${i}${r.substring(2)}` : `${r.substring(0, 2)}${i}${r.substring(2, 4)}${i}${r.substring(4, 8)}`;
+      case "YYYY-MM-DD":
+        return r.length <= 4 ? r : r.length <= 6 ? `${r.substring(0, 4)}${i}${r.substring(4)}` : `${r.substring(0, 4)}${i}${r.substring(4, 6)}${i}${r.substring(6, 8)}`;
+      case "DD-MM-YYYY":
+        return r.length <= 4 ? `${r.substring(0, 2)}${i}${r.substring(2)}` : `${r.substring(0, 2)}${i}${r.substring(2, 4)}${i}${r.substring(4, 8)}`;
+      case "DD MMM YYYY":
+        return t;
+      default:
+        return t;
+    }
+  }, [f, m]), ie = o.useMemo(() => (t) => {
+    const r = t.trim();
+    return r && H(r, f, !0).isValid() ? H(r, f) : null;
+  }, [f]), W = o.useCallback((t) => H(t).format(f), [f]), ve = o.useMemo(() => ({
+    months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+    month: "space-y-4",
+    caption: "hidden",
+    // Hide default caption since we have custom navigation
+    caption_label: "text-sm font-medium",
+    nav: "hidden",
+    // Hide default navigation
+    nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+    nav_button_previous: "absolute left-1 top-1",
+    nav_button_next: "absolute right-1 top-1",
+    table: "w-full border-collapse space-y-1",
+    head_row: "flex",
+    head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+    row: "flex w-full mt-2",
+    cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+    day: "p-0 font-normal aria-selected:opacity-100 rounded-md transition-colors items-center justify-center hover:bg-accent hover:text-accent-foreground aria-selected:bg-primary aria-selected:text-white aria-selected:hover:bg-primary aria-selected:hover:text-white",
+    day_button: "h-9 w-9 flex items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:bg-primary aria-selected:text-primary-foreground aria-selected:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:text-muted-foreground aria-disabled:grayscale aria-disabled:hover:bg-transparent aria-disabled:hover:text-muted-foreground",
+    day_range_end: "day-range-end",
+    day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+    day_today: "bg-accent text-accent-foreground",
+    day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    disabled: "text-muted-foreground opacity-40 grayscale pointer-events-none cursor-not-allowed",
+    day_disabled: "text-muted-foreground opacity-40 grayscale pointer-events-none cursor-not-allowed",
+    day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+    day_hidden: "invisible"
+  }), []), Me = o.useMemo(() => Ke(ze(h, u), T), [h, u, T]), we = h ? be(h) : V, xe = u ? be(u) : le;
+  o.useEffect(() => {
+    k(s ? W(s) : ""), x(s), b(void 0), s && !y && P(s), H.locale(I);
+  }, [s, I, W, y]);
+  const fe = o.useRef(!1);
+  o.useLayoutEffect(() => {
+    const t = Y && !fe.current;
+    if (fe.current = Y, !t) return;
+    const r = s ?? w;
+    if (!r) return;
+    const i = new Date(r.getFullYear(), r.getMonth(), 1), p = i.getFullYear(), F = i.getMonth();
+    if (y !== void 0) {
+      _ && (y.getFullYear() !== p || y.getMonth() !== F) && _(i);
+      return;
+    }
+    P(i);
+  }, [Y, y, s, w, _]);
+  const Q = o.useCallback((t) => ye(t, h, u) && Ue(t, h, u), [h, u]), De = o.useCallback((t) => {
+    if (!M) return;
+    b(void 0);
+    let r = t.target.value;
+    if (k(r), !r.trim()) {
+      x(void 0), a == null || a(void 0), c == null || c(void 0);
+      return;
+    }
+    const i = ne(r);
+    i !== r && r.replace(/\D/g, "").length > 1 && (k(i), r = i);
+    const p = ie(r);
+    if (p != null && p.isValid()) {
+      const F = p.toDate();
+      Q(F) && (x(F), a == null || a(F), c == null || c(F));
+    }
+  }, [M, ne, ie, a, c, Q]), ce = o.useCallback(() => {
+    const t = B.trim(), r = s ?? w;
+    if (!t) {
+      k(""), b(void 0);
+      return;
+    }
+    const i = ie(t), p = i != null && i.isValid() ? i.toDate() : void 0;
+    if (p && Q(p)) {
+      k(W(p)), b(void 0), (!w || w.getTime() !== p.getTime()) && (x(p), a == null || a(p), c == null || c(p));
+      return;
+    }
+    if (i != null && i.isValid() && p) {
+      const {
+        minYear: F,
+        maxYear: _e
+      } = de(h, u);
+      ye(p, h, u) ? b("Date is outside the allowed range.") : b(`Enter a year between ${F} and ${_e}.`);
+    } else
+      b(void 0);
+    k(r ? W(r) : "");
+  }, [B, s, w, ie, W, Q, h, u, a, c]), Ne = o.useCallback((t) => {
+    t && Q(t) && (k(W(t)), x(t), b(void 0), a == null || a(t), c == null || c(t), v(!1));
+  }, [Q, a, c, W, v]), ke = o.useCallback((t) => {
+    t.stopPropagation(), k(""), x(void 0), a == null || a(void 0), c == null || c(void 0);
+  }, [a, c]), G = !!(L || A), $e = o.useCallback((t) => {
+    if (!M) {
+      !G && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), v(!Y));
+      return;
+    }
+    if (!["Backspace", "Delete", "Tab", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(t.key) && !m.pattern.test(t.key) && !t.ctrlKey && !t.metaKey) {
+      t.preventDefault();
+      return;
+    }
+    t.key === "Enter" && (t.preventDefault(), ce());
+  }, [M, m.pattern, ce, v, Y, G]);
+  return /* @__PURE__ */ C("div", { className: S("space-y-1", ee), ...re, children: [
+    g && /* @__PURE__ */ C(Re, { className: "text-sm font-medium text-gray-700", children: [
+      g,
+      n && /* @__PURE__ */ l("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ C(Te, { open: Y, onOpenChange: (t) => {
+      G && t || v(t);
+    }, children: [
+      /* @__PURE__ */ C("div", { className: S("w-60 relative", X), children: [
+        /* @__PURE__ */ l(Le, { type: "text", value: B, onChange: De, onBlur: ce, onKeyDown: $e, placeholder: U, disabled: L, readOnly: A || !M, onClick: () => {
+          !M && !L && !A && v(!0);
+        }, className: S("w-full pr-12", (E || $) && "border border-destructive focus-visible:ring-destructive", !M && !G && "cursor-pointer") }),
+        N && (s ?? w) && !L && !A && /* @__PURE__ */ l("button", { type: "button", onClick: ke, className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring", "aria-label": "Clear date", children: /* @__PURE__ */ l(Ie, { className: "h-4 w-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ l(Oe, { asChild: !0, children: /* @__PURE__ */ l("button", { type: "button", className: S("absolute right-1 top-1/2 -translate-y-1/2 border-0 bg-transparent outline-none", G ? "cursor-default text-muted-foreground" : "cursor-pointer text-black hover:text-black"), style: {
+          height: "1.75rem",
+          width: "1.75rem"
+        }, onClick: G ? void 0 : () => {
+          v(!Y);
+        }, disabled: G, "aria-label": "Open calendar", children: /* @__PURE__ */ l(Ee, { strokeWidth: 1, className: "h-5 w-5" }) }) })
+      ] }),
+      /* @__PURE__ */ l(Be, { className: "w-auto p-0 mt-2", align: J, children: /* @__PURE__ */ C("div", { className: "bg-white rounded-md border shadow-md", children: [
+        /* @__PURE__ */ l(We, { month: z, onMonthChange: d, locale: I, minDate: h, maxDate: u }),
+        /* @__PURE__ */ l("div", { className: "p-3", children: /* @__PURE__ */ l(Fe, { ...O, mode: "single", selected: w, onSelect: Ne, month: z, onMonthChange: d, startMonth: we, endMonth: xe, disabled: Me, showOutsideDays: Z, className: S("p-0", O.className), classNames: {
+          ...ve,
+          ...O.classNames
+        } }) })
+      ] }) })
+    ] }),
+    (e || E || $) && /* @__PURE__ */ l("p", { className: S("text-xs", E || $ ? "text-destructive" : "text-gray-500"), children: E || $ || e })
+  ] });
+});
+He.displayName = "DatePickerField";
+function Xe(g, D) {
+  return /* @__PURE__ */ l(Ye, { value: D.toString(), children: g }, g);
+}
+function Ze(g) {
+  return /* @__PURE__ */ l(Ye, { value: g.toString(), children: g }, g);
+}
+export {
+  oe as CALENDAR_YEAR_HALF_SPAN,
+  He as DatePickerField,
+  de as getEffectiveCalendarYearBounds
+};

package/dist/components/overrides/ui/pickers/date-range-picker-field.js

@@ -0,0 +1,288 @@
+"use client";
+import { jsx as d, jsxs as F } from "react/jsx-runtime";
+import { c as Le } from "react-compiler-runtime";
+import K from "dayjs";
+import $e from "dayjs/plugin/customParseFormat";
+import Fe from "dayjs/plugin/localizedFormat";
+import { CalendarDays as Be, X as Te, ChevronLeft as ze, ChevronRight as Ae } from "lucide-react";
+import * as i from "react";
+import { DayPicker as Ke } from "react-day-picker";
+import { Input as We } from "../../../ui/input.js";
+import { Label as Xe } from "../../../ui/label.js";
+import { Popover as qe, PopoverTrigger as fe, PopoverContent as Ge } from "../../../ui/popover.js";
+import { cn as _ } from "../../../../lib/utils.js";
+import { mergeDisabledMatchers as He, minMaxDisabledMatchers as Je, calendarMonthAnchor as me, isRangeWithinMinMaxLocalDay as U } from "./day-picker-bounds.js";
+K.extend($e);
+K.extend(Fe);
+const Qe = i.memo(function(B) {
+  const e = Le(30), {
+    month: m,
+    onMonthChange: l,
+    locale: r,
+    numberOfMonths: s
+  } = B, V = r === void 0 ? "en" : r, c = s === void 0 ? 2 : s;
+  let u;
+  e[0] !== m || e[1] !== l ? (u = () => {
+    const a = new Date(m);
+    a.setMonth(a.getMonth() - 1), l(a);
+  }, e[0] = m, e[1] = l, e[2] = u) : u = e[2];
+  const h = u;
+  let k;
+  e[3] !== m || e[4] !== l ? (k = () => {
+    const a = new Date(m);
+    a.setMonth(a.getMonth() + 1), l(a);
+  }, e[3] = m, e[4] = l, e[5] = k) : k = e[5];
+  const M = k;
+  let O;
+  if (e[6] !== V || e[7] !== m || e[8] !== c) {
+    let a;
+    e[10] !== V || e[11] !== m ? (a = (se, W) => K(m).add(W, "month").locale(V).format("MMMM YYYY"), e[10] = V, e[11] = m, e[12] = a) : a = e[12], O = Array.from({
+      length: c
+    }, a), e[6] = V, e[7] = m, e[8] = c, e[9] = O;
+  } else
+    O = e[9];
+  const v = O;
+  let L;
+  e[13] === Symbol.for("react.memo_cache_sentinel") ? (L = /* @__PURE__ */ d(ze, { className: "h-4 w-4" }), e[13] = L) : L = e[13];
+  let b;
+  e[14] !== h ? (b = /* @__PURE__ */ d("button", { type: "button", onClick: h, className: "flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background p-0 text-foreground hover:bg-accent", "aria-label": "Previous month", children: L }), e[14] = h, e[15] = b) : b = e[15];
+  const T = `repeat(${c}, minmax(0, 1fr))`;
+  let P;
+  e[16] !== T ? (P = {
+    gridTemplateColumns: T
+  }, e[16] = T, e[17] = P) : P = e[17];
+  let p;
+  e[18] !== v ? (p = v.map(Ze), e[18] = v, e[19] = p) : p = e[19];
+  let x;
+  e[20] !== p || e[21] !== P ? (x = /* @__PURE__ */ d("div", { className: "grid flex-1 gap-2 px-2 text-center text-sm font-semibold text-foreground", style: P, children: p }), e[20] = p, e[21] = P, e[22] = x) : x = e[22];
+  let D;
+  e[23] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ d(Ae, { className: "h-4 w-4" }), e[23] = D) : D = e[23];
+  let R;
+  e[24] !== M ? (R = /* @__PURE__ */ d("button", { type: "button", onClick: M, className: "flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background p-0 text-foreground hover:bg-accent", "aria-label": "Next month", children: D }), e[24] = M, e[25] = R) : R = e[25];
+  let $;
+  return e[26] !== x || e[27] !== R || e[28] !== b ? ($ = /* @__PURE__ */ F("div", { className: "flex items-center border-b border-border bg-muted px-2 py-1.5", children: [
+    b,
+    x,
+    R
+  ] }), e[26] = x, e[27] = R, e[28] = b, e[29] = $) : $ = e[29], $;
+}), Ue = i.memo(({
+  label: Y,
+  placeholder: B,
+  helperText: e,
+  required: m,
+  value: l,
+  onSelect: r,
+  onChange: s,
+  className: V,
+  minDate: c,
+  maxDate: u,
+  disabled: h,
+  readOnly: k,
+  locale: M = "en",
+  inputClassName: O,
+  dateFormat: v = "YYYY-MM-DD",
+  displayFormat: L,
+  error: b,
+  showOutsideDays: T,
+  clearable: P = !1,
+  month: p,
+  onMonthChange: x,
+  open: D,
+  onOpenChange: R,
+  dayPickerProps: $,
+  manual: a = !1,
+  // Default to false: calendar-only selection unless enabled
+  popoverAlign: se = "end",
+  iconPosition: W = "right",
+  // Default to right
+  icon: z,
+  iconClassName: X,
+  iconColor: I,
+  presets: Z,
+  numberOfMonths: oe = 2,
+  openOnInputClick: pe = !0,
+  openOnFieldClick: be = !1,
+  trigger: ie,
+  ...ye
+}) => {
+  const {
+    disabled: ae,
+    fromDate: Ce,
+    toDate: Se,
+    startMonth: he,
+    endMonth: ve,
+    showOutsideDays: xe,
+    ...C
+  } = $ ?? {}, ge = T ?? xe, de = L ?? v, [we, ke] = i.useState(!1), q = D !== void 0 ? D : we, j = R || ke, [S, y] = i.useState(""), [E, g] = i.useState(l), [ne, le] = i.useState(p ?? (l == null ? void 0 : l.from) ?? /* @__PURE__ */ new Date()), ce = i.useMemo(() => p ?? ne, [p, ne]), G = i.useCallback((t) => {
+    x ? x(t) : le(t);
+  }, [x]), Me = i.useMemo(() => B || (a ? `${v.toLowerCase()} - ${v.toLowerCase()}` : "Click to select date range"), [B, v, a]), H = i.useCallback((t) => K(t).locale(M).format(de), [de, M]), w = i.useCallback((t) => t != null && t.from ? t.from && t.to ? `${H(t.from)} - ${H(t.to)}` : H(t.from) : "", [H]), J = i.useCallback((t) => {
+    const o = t.trim();
+    if (!o) return null;
+    const f = K(o, v, !0).locale(M);
+    return f.isValid() ? f : null;
+  }, [v, M]), Q = i.useCallback((t) => {
+    const o = t.trim();
+    if (!o) return null;
+    const f = o.split(/\s+-\s+/);
+    if (f.length === 1) {
+      const n = J(f[0]);
+      return n != null && n.isValid() ? {
+        from: n.toDate()
+      } : null;
+    }
+    if (f.length === 2) {
+      const n = J(f[0]), A = J(f[1]);
+      if (n != null && n.isValid() && (A != null && A.isValid())) {
+        const te = n.toDate(), re = A.toDate();
+        return te > re ? {
+          from: re,
+          to: te
+        } : {
+          from: te,
+          to: re
+        };
+      }
+      if (n != null && n.isValid())
+        return {
+          from: n.toDate()
+        };
+    }
+    return null;
+  }, [J]), ue = i.useCallback((t) => t, []), Ne = i.useMemo(() => ({
+    months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+    month: "space-y-4",
+    caption: "hidden",
+    // Hide default caption since we have custom navigation
+    month_caption: "hidden",
+    // react-day-picker v9 month title wrapper
+    caption_label: "text-sm font-medium",
+    nav: "hidden",
+    // Hide default navigation
+    nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+    nav_button_previous: "absolute left-1 top-1",
+    nav_button_next: "absolute right-1 top-1",
+    table: "w-full border-collapse space-y-1",
+    head_row: "flex",
+    head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+    row: "flex w-full mt-2",
+    cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+    day: "p-0 font-normal aria-selected:opacity-100 rounded-md transition-colors items-center justify-center hover:bg-accent hover:text-accent-foreground aria-selected:bg-primary aria-selected:text-white aria-selected:hover:bg-primary aria-selected:hover:text-white",
+    day_button: "h-9 w-9 flex items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:bg-primary aria-selected:text-primary-foreground aria-selected:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:text-muted-foreground aria-disabled:grayscale aria-disabled:hover:bg-transparent aria-disabled:hover:text-muted-foreground",
+    day_range_end: "day-range-end",
+    // react-day-picker v9 selection state keys
+    range_end: "day-range-end",
+    day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+    // react-day-picker v9 selection state keys
+    selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+    day_today: "bg-accent text-accent-foreground",
+    day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    disabled: "text-muted-foreground opacity-40 grayscale pointer-events-none cursor-not-allowed",
+    day_disabled: "text-muted-foreground opacity-40 grayscale pointer-events-none cursor-not-allowed",
+    day_range_middle: (
+      // Middle of selected range: gray background + no rounded corners
+      // react-day-picker v9 uses `range_middle` on the Day cell (no aria-selected).
+      "!bg-muted !text-foreground rounded-none [&>button]:!rounded-none"
+    ),
+    // react-day-picker v9 selection state keys
+    range_middle: "!bg-muted !text-foreground rounded-none [&>button]:!rounded-none",
+    day_hidden: "invisible"
+  }), []), _e = i.useMemo(() => He(Je(c, u), ae), [c, u, ae]), Pe = c ? me(c) : he, Re = u ? me(u) : ve;
+  i.useEffect(() => {
+    y(w(l)), g(l), l != null && l.from && !p && le(l.from);
+  }, [l, w, p]);
+  const Ve = i.useCallback((t) => {
+    if (!a) return;
+    let o = t.target.value;
+    if (y(o), !o.trim()) {
+      g(void 0), r == null || r(void 0), s == null || s(void 0);
+      return;
+    }
+    const f = ue(o);
+    f !== o && (y(f), o = f);
+    const n = Q(o);
+    n && U(n, c, u) && (g(n), r == null || r(n), s == null || s(n));
+  }, [a, r, s, ue, Q, c, u]), ee = i.useCallback(() => {
+    const t = S.trim();
+    if (!t) {
+      g(void 0), r == null || r(void 0), s == null || s(void 0);
+      return;
+    }
+    const o = Q(t);
+    o && U(o, c, u) ? (g(o), y(w(o)), r == null || r(o), s == null || s(o)) : E ? y(w(E)) : (y(""), g(void 0), r == null || r(void 0), s == null || s(void 0));
+  }, [S, E, w, Q, c, u, r, s]), De = i.useCallback((t) => {
+    t && !U(t, c, u) || (y(w(t)), g(t), r == null || r(t), s == null || s(t));
+  }, [r, s, w, c, u]), Ie = i.useCallback((t) => {
+    t.stopPropagation(), y(""), g(void 0), r == null || r(void 0), s == null || s(void 0);
+  }, [r, s]), je = i.useCallback((t) => {
+    const o = t.getRange();
+    U(o, c, u) && (y(w(o)), g(o), o.from && G(o.from), r == null || r(o), s == null || s(o));
+  }, [w, G, c, u, s, r]), Ee = !!(P && E && !h && !k), N = !!(h || k), Ye = i.useCallback((t) => {
+    if (!a) {
+      !N && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), j(!q));
+      return;
+    }
+    t.key === "Enter" && (t.preventDefault(), ee());
+  }, [a, ee, j, q, N]), Oe = i.useMemo(() => {
+    var t, o;
+    if (z) {
+      if (i.isValidElement(z)) {
+        const f = z;
+        return i.cloneElement(f, {
+          className: _("h-5 w-5", X, (t = f.props) == null ? void 0 : t.className),
+          style: {
+            ...((o = f.props) == null ? void 0 : o.style) || {},
+            ...I ? {
+              color: I
+            } : {}
+          }
+        });
+      }
+      return /* @__PURE__ */ d("span", { className: _("h-5 w-5 inline-flex items-center justify-center", X), style: I ? {
+        color: I
+      } : void 0, children: z });
+    }
+    return /* @__PURE__ */ d(Be, { strokeWidth: 1, className: _("h-5 w-5", X, h && "opacity-50"), style: I ? {
+      color: I
+    } : void 0 });
+  }, [z, X, I, h]);
+  return /* @__PURE__ */ F("div", { className: _("space-y-1", V), ...ye, children: [
+    Y && /* @__PURE__ */ F(Xe, { className: "text-sm font-medium text-foreground", children: [
+      Y,
+      m && /* @__PURE__ */ d("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ F(qe, { open: q, onOpenChange: (t) => {
+      N && t || j(t);
+    }, children: [
+      ie ? /* @__PURE__ */ d(fe, { asChild: !0, children: ie }) : /* @__PURE__ */ F("div", { className: _("w-80 relative", O), onMouseDownCapture: () => {
+        a && be && !h && !k && j(!0);
+      }, children: [
+        /* @__PURE__ */ d(We, { type: "text", value: S, onChange: Ve, onBlur: ee, onKeyDown: Ye, onClick: () => {
+          (!a && !N || a && pe && !N) && j(!0);
+        }, placeholder: Me, disabled: h, readOnly: k || !a, className: _("w-full pr-12", W === "left" && "pl-12", b && "border border-destructive focus-visible:ring-destructive", !a && !N && "cursor-pointer") }),
+        Ee && /* @__PURE__ */ d("button", { type: "button", onClick: Ie, className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring", "aria-label": "Clear date range", children: /* @__PURE__ */ d(Te, { className: "h-4 w-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ d(fe, { asChild: !0, children: /* @__PURE__ */ d("button", { type: "button", className: _("absolute top-1/2 -translate-y-1/2 border-0 bg-transparent outline-none", W === "left" ? "left-3" : "right-1", N ? "cursor-default text-muted-foreground" : "cursor-pointer text-black hover:text-black"), style: {
+          height: "1.75rem",
+          width: "1.75rem"
+        }, onClick: N ? void 0 : () => {
+          j(!q);
+        }, disabled: N, "aria-label": "Open calendar", children: Oe }) })
+      ] }),
+      /* @__PURE__ */ d(Ge, { className: "w-auto p-0 mt-2", align: se, children: /* @__PURE__ */ F("div", { className: "rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
+        Z && Z.length > 0 && /* @__PURE__ */ d("div", { className: "flex flex-wrap gap-2 p-3 border-b bg-muted/40", children: Z.map((t) => /* @__PURE__ */ d("button", { type: "button", className: "rounded-md border bg-background px-2.5 py-1.5 text-xs font-medium hover:bg-accent hover:text-accent-foreground", onClick: () => je(t), children: t.label }, t.label)) }),
+        /* @__PURE__ */ d(Qe, { month: ce, onMonthChange: G, locale: M, numberOfMonths: oe }),
+        /* @__PURE__ */ d("div", { className: "p-3", children: /* @__PURE__ */ d(Ke, { ...C, mode: "range", selected: E, onSelect: De, month: ce, onMonthChange: G, startMonth: Pe, endMonth: Re, disabled: _e, numberOfMonths: oe, showOutsideDays: ge, className: _("p-0", C.className), classNames: {
+          ...Ne,
+          ...C.classNames
+        } }) })
+      ] }) })
+    ] }),
+    (e || b) && /* @__PURE__ */ d("p", { className: _("text-xs", b ? "text-destructive" : "text-muted-foreground"), children: b || e })
+  ] });
+});
+Ue.displayName = "DateRangePickerField";
+function Ze(Y) {
+  return /* @__PURE__ */ d("span", { className: "truncate", children: Y }, Y);
+}
+export {
+  Ue as DateRangePickerField
+};