impact-nova 2.0.8 → 2.1.0-alpha.1

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

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

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

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

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

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

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

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

package/dist/components/forms/file-upload/file-upload.d.ts

@@ -0,0 +1,13 @@
+import { FileUploadProps, FileUploadDropZoneProps, FileUploadItemProps } from './file-upload.types';
+import * as React from "react";
+declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLDivElement>>;
+declare const FileUploadContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FileUploadHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FileUploadTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const FileUploadDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FileUploadClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const FileUploadDropZone: React.ForwardRefExoticComponent<FileUploadDropZoneProps & React.RefAttributes<HTMLDivElement>>;
+declare const FileUploadList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FileUploadItem: React.ForwardRefExoticComponent<FileUploadItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const FileUploadFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { FileUpload, FileUploadContent, FileUploadHeader, FileUploadTitle, FileUploadDescription, FileUploadClose, FileUploadDropZone, FileUploadList, FileUploadItem, FileUploadFooter, };