impact-nova 2.1.0-alpha.6 → 2.1.0-alpha.8

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

@@ -1,8 +1,8 @@
 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 { useId as X, useMemo as T, useState as C, useRef as E, useCallback as u, useEffect as ve } from "react";
+import * as H from "@radix-ui/react-popover";
+import { createComponent as we } from "../../../lib/primitives/create-component.js";
+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) {
@@ -21,7 +21,8 @@ function ke(c, l) {
   const d = l.toLowerCase();
   return c.filter((f) => f.toLowerCase().includes(d));
 }
-const De = ve.forwardRef(
+const He = we(
+  "Combobox",
   ({
     options: c,
     min: l,
@@ -30,69 +31,69 @@ const De = ve.forwardRef(
     defaultValue: I = "",
     value: b,
     onChange: k,
-    onBlur: $,
-    placeholder: F,
+    onBlur: F,
+    placeholder: z,
     label: D,
-    helperText: X,
-    helperTextPosition: Y = "absolute",
-    error: Z,
+    helperText: Y,
+    helperTextPosition: Z = "absolute",
+    error: _,
     isError: ee,
-    disabled: p,
-    isNumeric: E,
+    disabled: m,
+    isNumeric: N,
     size: te = "default",
     className: oe,
     emptyMessage: ne = "No options found",
     allowFreeText: L = !1,
-    required: z,
+    required: B,
     labelOrientation: re
   }, x) => {
-    const se = Q(), A = Q(), H = typeof D == "string" ? D : F ?? "Options", V = ye({
+    const se = X(), A = X(), R = typeof D == "string" ? D : z ?? "Options", V = ye({
       label: D,
-      helperText: X,
-      helperTextPosition: Y,
+      helperText: Y,
+      helperTextPosition: Z,
       labelOrientation: re,
-      error: Z ?? ee,
-      required: z,
-      disabled: p,
+      error: _ ?? ee,
+      required: B,
+      disabled: m,
       id: se,
       className: oe
-    }), B = T(
+    }), K = T(
       () => Ie({ options: c, min: l, max: d, step: f }),
       [c, l, d, f]
-    ), M = b !== void 0, [ie, ae] = C(I), S = M ? b : ie, [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(
+    ), M = b !== void 0, [ie, ae] = C(I), S = M ? b : ie, [ce, U] = C(""), [o, v] = C(!1), n = o ? ce : S, [O, p] = C(-1), W = E(-1), [le, w] = C("keyboard"), q = E(null), P = E(null), ue = u(
       (e) => {
-        W.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+        q.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
       },
       [x]
     ), r = T(
-      () => ke(B, n),
-      [B, n]
-    ), q = R(r), de = T(() => {
+      () => ke(K, n),
+      [K, n]
+    ), G = E(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" });
+    }, [o, n, r]), h = O >= 0 ? O : de, J = O >= 0 ? le : "mouse", fe = o && h >= 0 ? `${A}-option-${h}` : void 0;
+    ve(() => {
+      W.current = h, G.current = r, o && h >= 0 && P.current && P.current.querySelectorAll("[data-combobox-item]")[h]?.scrollIntoView({ block: "nearest" });
     }, [h, o, r]);
     const i = u(
       (e) => {
-        M || ae(e), k?.(e), v(!1), m(-1);
+        M || ae(e), k?.(e), v(!1), p(-1);
       },
       [M, k]
     ), y = u(() => {
-      v(!1), m(-1);
-    }, []), pe = u(
+      v(!1), p(-1);
+    }, []), me = u(
       (e) => {
         const t = e.target.value;
-        K(t), m(-1), w("mouse"), o || v(!0);
+        U(t), p(-1), w("mouse"), o || v(!0);
       },
       [o]
-    ), me = u(() => {
-      p || (K(S), v(!0));
-    }, [p, S]), he = u(
+    ), pe = u(() => {
+      m || (U(S), v(!0));
+    }, [m, S]), he = u(
       (e) => {
         const t = e.relatedTarget;
         if (!P.current?.contains(t)) {
@@ -102,10 +103,10 @@ const De = ve.forwardRef(
             );
             s ? i(s) : r.length === 1 ? i(r[0]) : L && n ? i(n) : y();
           }
-          $?.(e);
+          F?.(e);
         }
       },
-      [o, r, n, i, y, L, $]
+      [o, r, n, i, y, L, F]
     ), ge = u(
       (e) => {
         if (!o) {
@@ -117,20 +118,20 @@ const De = ve.forwardRef(
           return;
         }
         if (e.key === "ArrowDown") {
-          e.preventDefault(), w("keyboard"), m(
+          e.preventDefault(), w("keyboard"), p(
             (t) => t < r.length - 1 ? t + 1 : 0
           );
           return;
         }
         if (e.key === "ArrowUp") {
-          e.preventDefault(), w("keyboard"), m(
+          e.preventDefault(), w("keyboard"), p(
             (t) => t > 0 ? t - 1 : r.length - 1
           );
           return;
         }
         if (e.key === "Enter" || e.key === "Tab") {
           e.preventDefault();
-          const t = U.current, s = q.current;
+          const t = W.current, s = G.current;
           if (t >= 0 && t < s.length)
             i(s[t]);
           else {
@@ -143,9 +144,9 @@ const De = ve.forwardRef(
         }
       },
       [o, r, n, i, y, L]
-    ), J = u(
+    ), Q = u(
       (e) => {
-        i(e), setTimeout(() => W.current?.focus(), 0);
+        i(e), setTimeout(() => q.current?.focus(), 0);
       },
       [i]
     ), be = u(
@@ -157,25 +158,25 @@ const De = ve.forwardRef(
           if (e.button !== 0) return;
           e.preventDefault();
           const s = t.getAttribute("data-combobox-value");
-          s != null && J(s);
+          s != null && Q(s);
           return;
         }
         e.preventDefault();
       },
-      [J]
+      [Q]
     );
-    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(
+    return /* @__PURE__ */ a("div", { "data-component": "combobox", "data-numeric": N || void 0, children: V.wrapControl(
+      /* @__PURE__ */ xe(H.Root, { open: o && !m, modal: !1, children: [
+        /* @__PURE__ */ a(H.Anchor, { asChild: !0, children: /* @__PURE__ */ a(
           "div",
           {
             "data-component": "combobox-input-border",
             tabIndex: -1,
-            className: _(
+            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",
+              m && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
               Ce({ size: te }),
               "bg-canvas"
             ),
@@ -185,20 +186,20 @@ const De = ve.forwardRef(
                 ref: ue,
                 type: "text",
                 value: n,
-                onChange: pe,
-                onFocus: me,
+                onChange: me,
+                onFocus: pe,
                 onBlur: he,
                 onKeyDown: ge,
-                placeholder: F,
-                disabled: !!p,
-                className: _(
+                placeholder: z,
+                disabled: !!m,
+                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"
+                  m && "opacity-100 text-disabled-foreground placeholder:text-disabled-foreground cursor-not-allowed",
+                  N && "text-right"
                 ),
                 style: { boxShadow: "none", outline: "none" },
                 autoComplete: "off",
@@ -208,28 +209,28 @@ const De = ve.forwardRef(
                 "aria-haspopup": "listbox",
                 "aria-controls": o ? A : void 0,
                 "aria-activedescendant": fe,
-                "aria-required": z || void 0,
-                "aria-label": D ? void 0 : H,
+                "aria-required": B || void 0,
+                "aria-label": D ? void 0 : R,
                 ...V.controlAria
               }
             )
           }
         ) }),
-        /* @__PURE__ */ a(N.Portal, { children: /* @__PURE__ */ a(
-          N.Content,
+        /* @__PURE__ */ a(H.Portal, { children: /* @__PURE__ */ a(
+          H.Content,
           {
             align: "start",
             side: "bottom",
             sideOffset: 4,
             avoidCollisions: !0,
             collisionPadding: 8,
-            "aria-label": H,
+            "aria-label": R,
             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)]",
+            className: "z-[9999] overflow-hidden rounded-[12px] bg-canvas text-base shadow-elevation-select 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)"
             },
@@ -241,11 +242,11 @@ const De = ve.forwardRef(
                 className: "flex-1 overflow-auto py-1 px-[6px]",
                 style: { maxHeight: 240, overscrollBehavior: "contain" },
                 role: "listbox",
-                "aria-label": H,
+                "aria-label": R,
                 onPointerDown: be,
                 onWheel: (e) => e.stopPropagation(),
                 onMouseLeave: () => {
-                  w("mouse"), m(-1);
+                  w("mouse"), p(-1);
                 },
                 children: r.length === 0 ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-6 text-sm text-secondary-foreground", children: ne }) : r.map((e, t) => {
                   const s = t === h, g = e.toLowerCase() === S.toLowerCase(), j = `${A}-option-${t}`;
@@ -257,13 +258,13 @@ const De = ve.forwardRef(
                       id: j,
                       role: "option",
                       "aria-selected": g,
-                      className: _(
+                      className: $(
                         "cursor-default select-none py-[6px] px-3 flex items-center transition-colors rounded-md",
-                        E ? "justify-end text-right" : "justify-between",
-                        s && G === "keyboard" ? "ring-2 ring-inset ring-primary bg-accent text-content" : s && G === "mouse" ? "bg-canvas-muted text-content" : g ? "bg-accent text-content" : "text-content hover:bg-canvas-muted cursor-pointer"
+                        N ? "justify-end text-right" : "justify-between",
+                        s && J === "keyboard" ? "ring-2 ring-inset ring-primary bg-accent text-content" : s && J === "mouse" ? "bg-canvas-muted text-content" : g ? "bg-accent text-content" : "text-content hover:bg-canvas-muted cursor-pointer"
                       ),
                       onMouseEnter: () => {
-                        w("mouse"), m(t);
+                        w("mouse"), p(t);
                       },
                       children: /* @__PURE__ */ a("span", { className: "text-sm", children: e })
                     }
@@ -277,7 +278,6 @@ const De = ve.forwardRef(
     ) });
   }
 );
-De.displayName = "Combobox";
 export {
-  De as Combobox
+  He as Combobox
 };

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

@@ -1,17 +1,19 @@
 import { jsxs as w, jsx as r } from "react/jsx-runtime";
-import * as s from "react";
+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, padValidDateString as te, maskDate as re } from "../../../lib/utils.js";
+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 { 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(
+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,
@@ -23,40 +25,40 @@ const he = s.forwardRef(
     endMonth: O,
     showFooter: h = !0,
     weekStartsOn: I,
-    disabled: p,
+    disabled: s,
     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 [l, Q] = s.useState(!1), v = s.useRef(!1), [k, i] = s.useState(null), C = t ? x(t, o, { locale: g }) : "", u = k?.input ?? C, R = l ? k?.pending ?? t : t, U = k?.viewMonth ?? t ?? /* @__PURE__ */ new Date(), a = (e) => {
-      p || (i(e ? {
-        input: C,
+    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));
     };
-    s.useEffect(() => {
+    p.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 }) : "";
+      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 = ue(e, R);
+      const n = de(e, N);
       f?.(n), a(!1);
-    }, S = () => {
+    }, 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 = re(n, o, u);
+      const n = e.target.value, d = te(n, o, u);
       if (i((M) => ({ ...M ?? {
-        input: C,
+        input: k,
         pending: t,
         viewMonth: t ?? /* @__PURE__ */ new Date()
       }, input: d })), d === "") {
@@ -71,10 +73,10 @@ const he = s.forwardRef(
       }, pending: c, viewMonth: c })), h || f?.(c));
     }, Z = () => {
       if (l) return;
-      const e = te(u, o), n = P(e, o, /* @__PURE__ */ new Date(), { locale: g });
+      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: p ? !1 : l, onOpenChange: a, children: [
+    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,
         {
@@ -82,12 +84,12 @@ const he = s.forwardRef(
           value: u,
           onChange: Y,
           onBlur: Z,
-          onClick: () => !p && a(!0),
+          onClick: () => !s && a(!0),
           onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === "ArrowDown") && !l && !p && (e.preventDefault(), v.current = !0, a(!0)), e.key === "Escape" && l && (e.preventDefault(), S());
+            (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: p,
+          disabled: s,
           "data-form-control": "input",
           className: ne(
             "cursor-pointer",
@@ -95,7 +97,7 @@ const he = s.forwardRef(
             H
           ),
           suffix: /* @__PURE__ */ w("div", { className: "flex items-center gap-1", children: [
-            t && !p && /* @__PURE__ */ w(E, { children: [
+            t && !s && /* @__PURE__ */ w(E, { children: [
               /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
                 "button",
                 {
@@ -113,9 +115,9 @@ const he = s.forwardRef(
             ] }),
             /* @__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(!l);
+                e.stopPropagation(), s || a(!l);
               }, onKeyDown: (e) => {
-                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), p || (v.current = !0, a(!l)));
+                (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") })
             ] })
@@ -136,18 +138,18 @@ const he = s.forwardRef(
             ce,
             {
               mode: "single",
-              selected: R,
+              selected: N,
               onSelect: W,
               month: U,
               onMonthChange: (e) => i(
                 (n) => n ? { ...n, viewMonth: e } : null
               ),
-              disabled: fe(B, K),
+              disabled: he(B, K),
               startMonth: z,
               endMonth: O,
               showFooter: h,
               onApply: X,
-              onCancel: S,
+              onCancel: R,
               onClear: A,
               captionLayout: "dropdown",
               ...I !== void 0 ? { weekStartsOn: I } : {}
@@ -158,7 +160,6 @@ const he = s.forwardRef(
     ] });
   }
 );
-he.displayName = "DatePicker";
 export {
-  he as DatePicker
+  Se as DatePicker
 };