impact-nova 2.0.9 → 2.1.0-alpha.1

package/dist/components/forms/combobox/combobox.js

@@ -0,0 +1,283 @@
+import { jsx as a, jsxs as xe } from "react/jsx-runtime";
+import * as ve from "react";
+import { useId as Q, useMemo as T, useState as C, useRef as R, useCallback as u, useEffect as we } from "react";
+import * as N from "@radix-ui/react-popover";
+import { cn as _ } from "../../../lib/utils.js";
+import { useFieldChrome as ye } from "../../../lib/primitives/use-field-chrome.js";
+import { comboboxSizeVariants as Ce } from "./combobox.variants.js";
+function Ie(c) {
+  if (c.options) return c.options;
+  const { min: l, max: d, step: f } = c;
+  if (l == null || d == null || f == null || f <= 0 || l > d) return [];
+  const I = [];
+  for (let b = l; b <= d; b += f) {
+    const k = Math.round(b * 1e10) / 1e10;
+    I.push(String(k));
+  }
+  return I;
+}
+function ke(c, l) {
+  if (!l) return c;
+  const d = l.toLowerCase();
+  return c.filter((f) => f.toLowerCase().includes(d));
+}
+const De = ve.forwardRef(
+  ({
+    options: c,
+    min: l,
+    max: d,
+    step: f,
+    defaultValue: I = "",
+    value: b,
+    onChange: k,
+    onBlur: $,
+    placeholder: F,
+    label: D,
+    helperText: X,
+    helperTextPosition: Y = "absolute",
+    error: Z,
+    isError: ee,
+    disabled: p,
+    isNumeric: E,
+    size: te = "default",
+    className: oe,
+    emptyMessage: ne = "No options found",
+    allowFreeText: L = !1,
+    required: z,
+    labelOrientation: re
+  }, x) => {
+    const ie = Q(), A = Q(), H = typeof D == "string" ? D : F ?? "Options", V = ye({
+      label: D,
+      helperText: X,
+      helperTextPosition: Y,
+      labelOrientation: re,
+      error: Z ?? ee,
+      required: z,
+      disabled: p,
+      id: ie,
+      className: oe
+    }), B = T(
+      () => Ie({ options: c, min: l, max: d, step: f }),
+      [c, l, d, f]
+    ), M = b !== void 0, [se, ae] = C(I), S = M ? b : se, [ce, K] = C(""), [o, v] = C(!1), n = o ? ce : S, [O, m] = C(-1), U = R(-1), [le, w] = C("keyboard"), W = R(null), P = R(null), ue = u(
+      (e) => {
+        W.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+      },
+      [x]
+    ), r = T(
+      () => ke(B, n),
+      [B, n]
+    ), q = R(r), de = T(() => {
+      if (!o || !n) return -1;
+      const e = r.findIndex(
+        (t) => t.toLowerCase() === n.toLowerCase()
+      );
+      return e >= 0 ? e : -1;
+    }, [o, n, r]), h = O >= 0 ? O : de, G = O >= 0 ? le : "mouse", fe = o && h >= 0 ? `${A}-option-${h}` : void 0;
+    we(() => {
+      U.current = h, q.current = r, o && h >= 0 && P.current && P.current.querySelectorAll("[data-combobox-item]")[h]?.scrollIntoView({ block: "nearest" });
+    }, [h, o, r]);
+    const s = u(
+      (e) => {
+        M || ae(e), k?.(e), v(!1), m(-1);
+      },
+      [M, k]
+    ), y = u(() => {
+      v(!1), m(-1);
+    }, []), pe = u(
+      (e) => {
+        const t = e.target.value;
+        K(t), m(-1), w("mouse"), o || v(!0);
+      },
+      [o]
+    ), me = u(() => {
+      p || (K(S), v(!0));
+    }, [p, S]), he = u(
+      (e) => {
+        const t = e.relatedTarget;
+        if (!P.current?.contains(t)) {
+          if (o) {
+            const i = r.find(
+              (g) => g.toLowerCase() === n.toLowerCase()
+            );
+            i ? s(i) : r.length === 1 ? s(r[0]) : L && n ? s(n) : y();
+          }
+          $?.(e);
+        }
+      },
+      [o, r, n, s, y, L, $]
+    ), ge = u(
+      (e) => {
+        if (!o) {
+          (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), v(!0));
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault(), e.stopPropagation(), y();
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), w("keyboard"), m(
+            (t) => t < r.length - 1 ? t + 1 : 0
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), w("keyboard"), m(
+            (t) => t > 0 ? t - 1 : r.length - 1
+          );
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          e.preventDefault();
+          const t = U.current, i = q.current;
+          if (t >= 0 && t < i.length)
+            s(i[t]);
+          else {
+            const g = i.find(
+              (j) => j.toLowerCase() === n.toLowerCase()
+            );
+            g ? s(g) : i.length === 1 ? s(i[0]) : L && n ? s(n) : y();
+          }
+          return;
+        }
+      },
+      [o, r, n, s, y, L]
+    ), J = u(
+      (e) => {
+        s(e), setTimeout(() => W.current?.focus(), 0);
+      },
+      [s]
+    ), be = u(
+      (e) => {
+        const t = e.target.closest(
+          "[data-combobox-item]"
+        );
+        if (t) {
+          if (e.button !== 0) return;
+          e.preventDefault();
+          const i = t.getAttribute("data-combobox-value");
+          i != null && J(i);
+          return;
+        }
+        e.preventDefault();
+      },
+      [J]
+    );
+    return /* @__PURE__ */ a("div", { "data-component": "combobox", "data-numeric": E || void 0, children: V.wrapControl(
+      /* @__PURE__ */ xe(N.Root, { open: o && !p, modal: !1, children: [
+        /* @__PURE__ */ a(N.Anchor, { asChild: !0, children: /* @__PURE__ */ a(
+          "div",
+          {
+            "data-component": "combobox-input-border",
+            tabIndex: -1,
+            className: _(
+              "flex w-full items-center gap-1 rounded-md border bg-transparent px-3 text-sm transition-colors outline-none ring-0 focus:outline-none focus:ring-0",
+              "focus-within:outline-none focus-within:ring-0 focus-within:border-brand hover:border-brand",
+              V.hasError ? "border-destructive hover:border-destructive" : "border-field",
+              p && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+              Ce({ size: te }),
+              "bg-canvas"
+            ),
+            children: /* @__PURE__ */ a(
+              "input",
+              {
+                ref: ue,
+                type: "text",
+                value: n,
+                onChange: pe,
+                onFocus: me,
+                onBlur: he,
+                onKeyDown: ge,
+                placeholder: F,
+                disabled: !!p,
+                className: _(
+                  "flex h-full w-full bg-transparent p-0 text-sm font-medium",
+                  "outline-none ring-0 shadow-none border-none",
+                  "focus:outline-none focus:ring-0 focus:shadow-none focus:border-none",
+                  "focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none focus-visible:border-none",
+                  "placeholder:font-medium placeholder:text-content-empty",
+                  p && "opacity-100 text-disabled-foreground placeholder:text-disabled-foreground cursor-not-allowed",
+                  E && "text-right"
+                ),
+                style: { boxShadow: "none", outline: "none" },
+                autoComplete: "off",
+                role: "combobox",
+                "aria-expanded": o,
+                "aria-autocomplete": "list",
+                "aria-haspopup": "listbox",
+                "aria-controls": o ? A : void 0,
+                "aria-activedescendant": fe,
+                "aria-required": z || void 0,
+                "aria-label": D ? void 0 : H,
+                ...V.controlAria
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ a(N.Portal, { children: /* @__PURE__ */ a(
+          N.Content,
+          {
+            align: "start",
+            side: "bottom",
+            sideOffset: 4,
+            avoidCollisions: !0,
+            collisionPadding: 8,
+            "aria-label": H,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            onInteractOutside: () => {
+            },
+            onWheel: (e) => e.stopPropagation(),
+            className: "z-[9999] overflow-hidden rounded-[12px] bg-canvas text-base shadow-[0px_1px_6px_0px_rgba(26,39,124,0.14)] focus:outline-none sm:text-sm flex flex-col border-none w-[var(--radix-popover-trigger-width)]",
+            style: {
+              maxHeight: "var(--radix-popover-content-available-height)"
+            },
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                ref: P,
+                id: A,
+                className: "flex-1 overflow-auto py-1 px-[6px]",
+                style: { maxHeight: 240, overscrollBehavior: "contain" },
+                role: "listbox",
+                "aria-label": H,
+                onPointerDown: be,
+                onWheel: (e) => e.stopPropagation(),
+                onMouseLeave: () => {
+                  w("mouse"), m(-1);
+                },
+                children: r.length === 0 ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-6 text-sm text-content-muted", children: ne }) : r.map((e, t) => {
+                  const i = t === h, g = e.toLowerCase() === S.toLowerCase(), j = `${A}-option-${t}`;
+                  return /* @__PURE__ */ a("div", { className: "w-full pb-[2px]", children: /* @__PURE__ */ a(
+                    "div",
+                    {
+                      "data-combobox-item": !0,
+                      "data-combobox-value": e,
+                      id: j,
+                      role: "option",
+                      "aria-selected": g,
+                      className: _(
+                        "cursor-default select-none py-[6px] px-3 flex items-center transition-colors rounded-md",
+                        E ? "justify-end text-right" : "justify-between",
+                        i && G === "keyboard" ? "ring-2 ring-inset ring-primary bg-accent text-content-primary" : i && G === "mouse" ? "bg-muted text-content-primary" : g ? "bg-accent text-content-primary" : "text-content-primary hover:bg-muted cursor-pointer"
+                      ),
+                      onMouseEnter: () => {
+                        w("mouse"), m(t);
+                      },
+                      children: /* @__PURE__ */ a("span", { className: "text-sm", children: e })
+                    }
+                  ) }, e);
+                })
+              }
+            )
+          }
+        ) })
+      ] })
+    ) });
+  }
+);
+De.displayName = "Combobox";
+export {
+  De as Combobox
+};

package/dist/components/forms/combobox/combobox.types.d.ts

@@ -0,0 +1,39 @@
+import { FieldControlProps } from '../../../lib/primitives/field.types';
+import type * as React from "react";
+/**
+ * Combobox supports two option sources:
+ *  - **Static list**: provide `options` (string array).
+ *  - **Numeric range**: provide `min`, `max`, and `step` to auto-generate values.
+ *
+ * At least one source must be provided; if both are given, `options` takes priority.
+ */
+export interface ComboboxProps extends FieldControlProps {
+    /** Static list of allowed string values */
+    options?: string[];
+    /** Numeric range start (used with max + step to generate options) */
+    min?: number;
+    /** Numeric range end */
+    max?: number;
+    /** Numeric range increment */
+    step?: number;
+    /** Initial value (uncontrolled mode) */
+    defaultValue?: string;
+    /** Current value (controlled mode — overrides internal state when provided) */
+    value?: string;
+    /** Fires when a value is committed (selection or free-text) */
+    onChange?: (value: string) => void;
+    /** Fires on input blur */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Input placeholder */
+    placeholder?: string;
+    /** @deprecated Use `error` */
+    isError?: boolean;
+    /** Right-align input and dropdown values (for numeric data) */
+    isNumeric?: boolean;
+    /** Additional class on the root wrapper */
+    className?: string;
+    /** Message shown when no options match the filter (default: "No options found") */
+    emptyMessage?: string;
+    /** If true, typed text is committed even when it doesn't match any option */
+    allowFreeText?: boolean;
+}

package/dist/components/forms/combobox/combobox.variants.d.ts

@@ -0,0 +1,4 @@
+/** Mirrors Input height variants — keep in sync with `input.variants.ts`. */
+export declare const comboboxSizeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/forms/combobox/combobox.variants.js

@@ -0,0 +1,17 @@
+import { cva as a } from "class-variance-authority";
+const e = a("", {
+  variants: {
+    size: {
+      default: "h-8",
+      sm: "h-6",
+      md: "h-[28px]",
+      lg: "h-10"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+export {
+  e as comboboxSizeVariants
+};

package/dist/components/forms/combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { Combobox } from './combobox';
+export type { ComboboxProps } from './combobox.types';
+export { comboboxSizeVariants } from './combobox.variants';

package/dist/components/forms/combobox/index.js

@@ -0,0 +1,6 @@
+import { Combobox as b } from "./combobox.js";
+import { comboboxSizeVariants as x } from "./combobox.variants.js";
+export {
+  b as Combobox,
+  x as comboboxSizeVariants
+};

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,164 @@
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import * as s 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, padValidDateString as te, maskDate as re } from "../../../lib/utils.js";
+import { Input as oe } from "../input/input.js";
+import { Popover as ie, PopoverAnchor as le, 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 { coerceSingleDateApply as ue, coerceSingleDate as de } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as fe } from "../../../lib/date-bounds-matcher.js";
+const he = s.forwardRef(
+  ({
+    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: p,
+    className: H,
+    ...q
+  }, G) => {
+    const { locale: N, t: m } = se(), g = s.useMemo(() => pe(N), [N]), J = L ?? m("datePicker.selectDate"), D = s.useRef(null), y = s.useRef(null);
+    s.useImperativeHandle(G, () => D.current);
+    const [i, Q] = s.useState(!1), v = s.useRef(!1), [k, l] = s.useState(null), C = t ? x(t, o, { locale: g }) : "", u = k?.input ?? C, R = i ? k?.pending ?? t : t, U = k?.viewMonth ?? t ?? /* @__PURE__ */ new Date(), a = (e) => {
+      p || (l(e ? {
+        input: C,
+        pending: t,
+        viewMonth: t ?? /* @__PURE__ */ new Date()
+      } : null), Q(e));
+    };
+    s.useEffect(() => {
+      D.current && y.current !== null && (D.current.setSelectionRange(y.current, y.current), y.current = null);
+    }, [u]);
+    const W = (e) => {
+      const n = de(e), d = n ? x(n, o, { locale: g }) : "";
+      l(
+        (c) => c ? { ...c, pending: n, input: d, viewMonth: n ?? c.viewMonth } : null
+      ), n && !h && (f?.(n), a(!1));
+    }, X = (e) => {
+      const n = ue(e, R);
+      f?.(n), a(!1);
+    }, S = () => {
+      a(!1);
+    }, A = () => {
+      f?.(void 0), h ? l(
+        (e) => e ? { ...e, pending: void 0, input: "" } : null
+      ) : a(!1);
+    }, Y = (e) => {
+      const n = e.target.value, d = re(n, o, u);
+      if (l((M) => ({ ...M ?? {
+        input: C,
+        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 && (l((M) => ({ ...M ?? {
+        input: d,
+        pending: t,
+        viewMonth: c
+      }, pending: c, viewMonth: c })), h || f?.(c));
+    }, Z = () => {
+      if (i) return;
+      const e = te(u, o), n = P(e, o, /* @__PURE__ */ new Date(), { locale: g });
+      !b(n) || e.length !== o.length ? l(null) : h || (f?.(n), l(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(ie, { open: p ? !1 : i, onOpenChange: a, children: [
+      /* @__PURE__ */ r(le, { asChild: !0, children: /* @__PURE__ */ r("div", { "data-component": "date-picker", "data-state": i ? "open" : "closed", "data-pending": V || void 0, children: /* @__PURE__ */ r(
+        oe,
+        {
+          ref: D,
+          value: u,
+          onChange: Y,
+          onBlur: Z,
+          onClick: () => !p && a(!0),
+          onKeyDown: (e) => {
+            (e.key === "Enter" || e.key === "ArrowDown") && !i && !p && (e.preventDefault(), v.current = !0, a(!0)), e.key === "Escape" && i && (e.preventDefault(), S());
+          },
+          placeholder: i ? o : J,
+          disabled: p,
+          "data-form-control": "input",
+          className: ne(
+            "cursor-pointer",
+            _ ? "text-destructive" : V ? "text-content-muted" : "",
+            H
+          ),
+          suffix: /* @__PURE__ */ w("div", { className: "flex items-center gap-1", children: [
+            t && !p && /* @__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(), p || a(!i);
+              }, onKeyDown: (e) => {
+                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), p || (v.current = !0, a(!i)));
+              }, 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: R,
+              onSelect: W,
+              month: U,
+              onMonthChange: (e) => l(
+                (n) => n ? { ...n, viewMonth: e } : null
+              ),
+              disabled: fe(B, K),
+              startMonth: z,
+              endMonth: O,
+              showFooter: h,
+              onApply: X,
+              onCancel: S,
+              onClear: A,
+              captionLayout: "dropdown",
+              ...I !== void 0 ? { weekStartsOn: I } : {}
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+he.displayName = "DatePicker";
+export {
+  he as DatePicker
+};