@brycks/core-front 0.3.6 → 0.5.0

package/dist/components/form/Combobox/Combobox.js

@@ -1,173 +1,175 @@
-import { jsxs as v, jsx as o, Fragment as ke } from "react/jsx-runtime";
-import { forwardRef as we, useState as g, useRef as j, useMemo as X, useEffect as I, useCallback as L } from "react";
-import { createPortal as xe } from "react-dom";
-import { cx as Se } from "../../../utils/styles.js";
-import { useId as Ce } from "../../../hooks/useId.js";
+import { jsxs as f, jsx as t, Fragment as xe } from "react/jsx-runtime";
+import { forwardRef as Ce, useState as g, useRef as W, useMemo as U, useEffect as I, useCallback as L } from "react";
+import { createPortal as Se } from "react-dom";
+import { cx as $e } from "../../../utils/styles.js";
+import { useId as ze } from "../../../hooks/useId.js";
 import { durations as w, easings as x } from "../../../design-system/tokens/motion.js";
-import { iconSizes as B, componentPaddingX as E, componentHeights as P, componentGap as $e } from "../../../design-system/primitives/sizing.js";
-import { fontSizes as R } from "../../../design-system/tokens/typography.js";
-import { spacing as d } from "../../../design-system/tokens/spacing.js";
-const ze = {
-  sm: { height: P.sm, fontSize: R.base - 1, padding: E.sm, iconSize: B.sm },
-  md: { height: P.md, fontSize: R.base, padding: E.md, iconSize: B.md },
-  lg: { height: P.lg, fontSize: R.md, padding: E.lg, iconSize: B.lg }
-}, Ie = (S, f) => {
-  const c = f.toLowerCase();
-  return S.label.toLowerCase().includes(c) || S.value.toLowerCase().includes(c) || (S.description?.toLowerCase().includes(c) ?? !1);
+import { iconSizes as j, componentPaddingX as E, componentHeights as B, componentGap as Ie } from "../../../design-system/primitives/sizing.js";
+import { fontSizes as M } from "../../../design-system/tokens/typography.js";
+import { spacing as a } from "../../../design-system/tokens/spacing.js";
+const Le = {
+  sm: { height: B.sm, fontSize: M.base - 1, padding: E.sm, iconSize: j.sm },
+  md: { height: B.md, fontSize: M.base, padding: E.md, iconSize: j.md },
+  lg: { height: B.lg, fontSize: M.md, padding: E.lg, iconSize: j.lg }
+}, Ee = (C, p) => {
+  const c = p.toLowerCase();
+  return C.label.toLowerCase().includes(c) || C.value.toLowerCase().includes(c) || (C.description?.toLowerCase().includes(c) ?? !1);
 };
-function Le() {
-  return /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Me() {
+  return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function Ee() {
-  return /* @__PURE__ */ o("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M4 4l6 6M10 4l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+function Re() {
+  return /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M4 4l6 6M10 4l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
 }
-const Re = we(function({
-  options: f,
+const Oe = Ce(function({
+  options: p,
   value: c,
-  defaultValue: G = null,
-  onChange: W,
+  defaultValue: J = null,
+  onChange: P,
   onInputChange: F,
-  placeholder: U = "Select or search...",
+  placeholder: Q = "Select or search...",
   size: T = "md",
   disabled: b = !1,
   isInvalid: A = !1,
-  required: J = !1,
-  clearable: Q = !0,
-  "aria-label": Y,
-  "aria-labelledby": Z,
-  filterFn: N = Ie,
-  emptyText: _ = "No options found",
-  creatable: M = !1,
+  required: Z = !1,
+  clearable: _ = !0,
+  "aria-label": N,
+  "aria-labelledby": ee,
+  filterFn: Y = Ee,
+  emptyText: re = "No options found",
+  isLoading: q = !1,
+  loadingText: te = "Loading…",
+  creatable: R = !1,
   onCreate: O,
-  createLabel: ee = (m) => `Create "${m}"`,
-  clearLabel: re = "Clear selection",
-  listboxLabel: te = "Options",
-  className: oe,
-  testId: ne
-}, C) {
-  const m = Ce("combobox-listbox"), [ae, se] = g(G), [a, y] = g(""), [r, p] = g(!1), [n, s] = g(-1), [q, H] = g(!1), $ = j(null), z = j(null), K = j(null), i = c !== void 0 ? c : ae, h = ze[T], l = X(
-    () => f.find((e) => e.value === i),
-    [f, i]
-  ), u = X(() => a ? f.filter((e) => N(e, a)) : f, [f, a, N]);
+  createLabel: oe = (h) => `Create "${h}"`,
+  clearLabel: ne = "Clear selection",
+  listboxLabel: ie = "Options",
+  className: ae,
+  testId: se
+}, S) {
+  const h = ze("combobox-listbox"), [le, de] = g(J), [i, y] = g(""), [r, m] = g(!1), [n, s] = g(-1), [H, K] = g(!1), $ = W(null), z = W(null), V = W(null), l = c !== void 0 ? c : le, v = Le[T], d = U(
+    () => p.find((e) => e.value === l),
+    [p, l]
+  ), u = U(() => i ? p.filter((e) => Y(e, i)) : p, [p, i, Y]);
   I(() => {
-    !r && l ? y(l.label) : !r && !i && y("");
-  }, [r, l, i]);
+    !r && d ? y(d.label) : !r && !l && y("");
+  }, [r, d, l]);
   const k = L(
     (e) => {
-      c === void 0 && se(e), W?.(e), p(!1), s(-1), z.current?.focus();
+      c === void 0 && de(e), P?.(e), m(!1), s(-1), z.current?.focus();
     },
-    [c, W]
-  ), ie = L(
+    [c, P]
+  ), ce = L(
     (e) => {
-      const t = e.target.value;
-      y(t), F?.(t), r || p(!0), s(0);
+      const o = e.target.value;
+      y(o), F?.(o), r || m(!0), s(0);
     },
     [r, F]
-  ), le = L(
+  ), ue = L(
     (e) => {
       e.stopPropagation(), k(null), y(""), z.current?.focus();
     },
     [k]
-  ), de = L(
+  ), fe = L(
     (e) => {
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), r ? s((t) => Math.min(t + 1, u.length - 1)) : (p(!0), s(0));
+          e.preventDefault(), r ? s((o) => Math.min(o + 1, u.length - 1)) : (m(!0), s(0));
           break;
         case "ArrowUp":
-          e.preventDefault(), r && s((t) => Math.max(t - 1, 0));
+          e.preventDefault(), r && s((o) => Math.max(o - 1, 0));
           break;
         case "Enter":
-          e.preventDefault(), r && n >= 0 && u[n] ? u[n].disabled || k(u[n].value) : M && a && u.length === 0 && O?.(a);
+          e.preventDefault(), r && n >= 0 && u[n] ? u[n].disabled || k(u[n].value) : R && i && u.length === 0 && O?.(i);
           break;
         case "Escape":
-          e.preventDefault(), p(!1), s(-1), l && y(l.label);
+          e.preventDefault(), m(!1), s(-1), d && y(d.label);
           break;
         case "Tab":
-          r && (p(!1), s(-1));
+          r && (m(!1), s(-1));
           break;
       }
     },
-    [r, n, u, k, M, a, O, l]
+    [r, n, u, k, R, i, O, d]
   );
   I(() => {
     if (!r) return;
-    const e = (t) => {
-      $.current?.contains(t.target) || (p(!1), s(-1), l && y(l.label));
+    const e = (o) => {
+      $.current?.contains(o.target) || (m(!1), s(-1), d && y(d.label));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [r, l]), I(() => {
+  }, [r, d]), I(() => {
     if (!r || n < 0) return;
-    K.current?.children[n]?.scrollIntoView({ block: "nearest" });
+    V.current?.children[n]?.scrollIntoView({ block: "nearest" });
   }, [r, n]);
-  const [D, ce] = g({ top: 0, left: 0, width: 0 });
+  const [D, pe] = g({ top: 0, left: 0, width: 0 });
   I(() => {
     if (!r || !$.current) return;
     const e = () => {
-      const t = $.current.getBoundingClientRect();
-      ce({
-        top: t.bottom + window.scrollY + d[1],
-        left: t.left + window.scrollX,
-        width: t.width
+      const o = $.current.getBoundingClientRect();
+      pe({
+        top: o.bottom + window.scrollY + a[1],
+        left: o.left + window.scrollX,
+        width: o.width
       });
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
   }, [r]);
-  const ue = {
+  const be = {
     position: "relative",
     display: "inline-flex",
     width: "100%"
-  }, fe = {
+  }, me = {
     position: "relative",
     display: "flex",
     alignItems: "center",
     width: "100%",
-    height: h.height,
+    height: v.height,
     backgroundColor: b ? "var(--brycks-background-muted)" : "var(--brycks-background-default)",
-    border: `1px solid ${A ? "var(--brycks-error-default)" : q ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
+    border: `1px solid ${A ? "var(--brycks-error-default)" : H ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
     borderRadius: "var(--brycks-radius-md)",
     transition: `all ${w.fast}ms ${x.easeOut}`,
     cursor: b ? "not-allowed" : "text",
-    boxShadow: q ? "var(--brycks-focus-ring)" : void 0
-  }, be = {
+    boxShadow: H ? "var(--brycks-focus-ring)" : void 0
+  }, he = {
     flex: 1,
     height: "100%",
-    padding: `0 ${h.padding}px`,
-    paddingRight: d[10],
-    fontSize: h.fontSize,
+    padding: `0 ${v.padding}px`,
+    paddingRight: a[10],
+    fontSize: v.fontSize,
     color: b ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
     backgroundColor: "transparent",
     border: "none",
     outline: "none",
     cursor: b ? "not-allowed" : "text"
-  }, pe = {
+  }, ye = {
     position: "absolute",
-    right: h.padding,
+    right: v.padding,
     display: "flex",
     alignItems: "center",
-    gap: d[1],
+    gap: a[1],
     pointerEvents: "none"
-  }, me = {
+  }, ve = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: d[5],
-    height: d[5],
+    width: a[5],
+    height: a[5],
     color: "var(--brycks-foreground-muted)",
     cursor: "pointer",
     borderRadius: "var(--brycks-radius-sm)",
     transition: `all ${w.fast}ms ${x.easeOut}`,
     pointerEvents: "auto"
-  }, ye = {
+  }, ge = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     color: "var(--brycks-foreground-muted)",
     transform: r ? "rotate(180deg)" : "rotate(0)",
     transition: `transform ${w.fast}ms ${x.easeOut}`
-  }, he = {
+  }, ke = {
     position: "absolute",
     top: D.top,
     left: D.left,
@@ -179,123 +181,141 @@ const Re = we(function({
     borderRadius: "var(--brycks-radius-lg)",
     boxShadow: "var(--brycks-shadow-lg)",
     zIndex: "var(--brycks-z-dropdown)",
-    padding: d[1],
+    padding: a[1],
     animation: `brycks-dropdown-in ${w.quick}ms ${x.easeOut}`
-  }, V = (e, t, ge) => ({
+  }, X = (e, o, we) => ({
     display: "flex",
     alignItems: "center",
-    gap: $e.md,
-    padding: `${d[2]}px ${E.sm}px`,
-    fontSize: h.fontSize,
-    color: t ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
-    backgroundColor: e ? "var(--brycks-background-muted)" : ge ? "var(--brycks-primary-muted)" : "transparent",
+    gap: Ie.md,
+    padding: `${a[2]}px ${E.sm}px`,
+    fontSize: v.fontSize,
+    color: o ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
+    backgroundColor: e ? "var(--brycks-background-muted)" : we ? "var(--brycks-primary-muted)" : "transparent",
     borderRadius: "var(--brycks-radius-md)",
-    cursor: t ? "not-allowed" : "pointer",
+    cursor: o ? "not-allowed" : "pointer",
     transition: `background-color ${w.fast}ms ${x.easeOut}`
-  }), ve = {
-    padding: `${d[4]}px ${d[3]}px`,
-    fontSize: h.fontSize,
+  }), G = {
+    padding: `${a[4]}px ${a[3]}px`,
+    fontSize: v.fontSize,
     color: "var(--brycks-foreground-muted)",
     textAlign: "center"
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ f(
     "div",
     {
       ref: $,
-      className: Se("brycks-combobox", `brycks-combobox--${T}`, oe),
-      style: ue,
-      "data-testid": ne,
+      className: $e("brycks-combobox", `brycks-combobox--${T}`, ae),
+      style: be,
+      "data-testid": se,
       children: [
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ f(
           "div",
           {
-            style: fe,
+            style: me,
             onClick: () => !b && z.current?.focus(),
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 "input",
                 {
                   ref: (e) => {
-                    z.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+                    z.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
                   },
                   type: "text",
                   role: "combobox",
                   "aria-expanded": r,
                   "aria-haspopup": "listbox",
                   "aria-autocomplete": "list",
-                  "aria-controls": r ? m : void 0,
-                  "aria-activedescendant": r && n >= 0 ? `${m}-option-${n}` : void 0,
+                  "aria-controls": r ? h : void 0,
+                  "aria-activedescendant": r && n >= 0 ? `${h}-option-${n}` : void 0,
                   "aria-invalid": A,
-                  "aria-required": J,
-                  "aria-label": Y,
-                  "aria-labelledby": Z,
-                  value: a,
-                  placeholder: U,
+                  "aria-required": Z,
+                  "aria-label": N,
+                  "aria-labelledby": ee,
+                  value: i,
+                  placeholder: Q,
                   disabled: b,
-                  style: be,
-                  onChange: ie,
-                  onKeyDown: de,
+                  style: he,
+                  onChange: ce,
+                  onKeyDown: fe,
                   onFocus: () => {
-                    H(!0), p(!0);
+                    K(!0), m(!0);
                   },
-                  onBlur: () => H(!1)
+                  onBlur: () => K(!1)
                 }
               ),
-              /* @__PURE__ */ v("div", { style: pe, children: [
-                Q && i && !b && /* @__PURE__ */ o(
+              /* @__PURE__ */ f("div", { style: ye, children: [
+                _ && l && !b && /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    "aria-label": re,
-                    style: me,
-                    onClick: le,
+                    "aria-label": ne,
+                    style: ve,
+                    onClick: ue,
                     onMouseEnter: (e) => {
                       e.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", e.currentTarget.style.color = "var(--brycks-foreground-default)";
                     },
                     onMouseLeave: (e) => {
                       e.currentTarget.style.backgroundColor = "transparent", e.currentTarget.style.color = "var(--brycks-foreground-muted)";
                     },
-                    children: /* @__PURE__ */ o(Ee, {})
+                    children: /* @__PURE__ */ t(Re, {})
                   }
                 ),
-                /* @__PURE__ */ o("span", { style: ye, children: /* @__PURE__ */ o(Le, {}) })
+                /* @__PURE__ */ t("span", { style: ge, children: /* @__PURE__ */ t(Me, {}) })
               ] })
             ]
           }
         ),
-        r && xe(
-          /* @__PURE__ */ v(ke, { children: [
-            /* @__PURE__ */ o("style", { children: `
+        r && Se(
+          /* @__PURE__ */ f(xe, { children: [
+            /* @__PURE__ */ t("style", { children: `
                 @keyframes brycks-dropdown-in {
                   from { opacity: 0; transform: translateY(-4px); }
                   to { opacity: 1; transform: translateY(0); }
                 }
               ` }),
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ t(
               "ul",
               {
-                ref: K,
-                id: m,
+                ref: V,
+                id: h,
                 role: "listbox",
-                "aria-label": Y || te,
-                style: he,
-                children: u.length > 0 ? u.map((e, t) => /* @__PURE__ */ v(
+                "aria-label": N || ie,
+                "aria-busy": q || void 0,
+                style: ke,
+                children: q ? /* @__PURE__ */ t("li", { style: G, role: "status", "aria-live": "polite", children: /* @__PURE__ */ f("span", { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: a[2] }, children: [
+                  /* @__PURE__ */ f(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      className: "brycks-animate-spin",
+                      "aria-hidden": "true",
+                      children: [
+                        /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.2" }),
+                        /* @__PURE__ */ t("path", { d: "M12 2C6.47715 2 2 6.47715 2 12", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+                      ]
+                    }
+                  ),
+                  te
+                ] }) }) : u.length > 0 ? u.map((e, o) => /* @__PURE__ */ f(
                   "li",
                   {
-                    id: `${m}-option-${t}`,
+                    id: `${h}-option-${o}`,
                     role: "option",
-                    "aria-selected": e.value === i,
+                    "aria-selected": e.value === l,
                     "aria-disabled": e.disabled,
-                    style: V(t === n, !!e.disabled, e.value === i),
+                    style: X(o === n, !!e.disabled, e.value === l),
                     onClick: () => !e.disabled && k(e.value),
-                    onMouseEnter: () => s(t),
+                    onMouseEnter: () => s(o),
                     children: [
-                      e.icon && /* @__PURE__ */ o("span", { style: { flexShrink: 0 }, children: e.icon }),
-                      /* @__PURE__ */ v("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ o("div", { style: { fontWeight: e.value === i ? 500 : 400 }, children: e.label }),
-                        e.description && /* @__PURE__ */ o("div", { style: { fontSize: R.sm, color: "var(--brycks-foreground-muted)" }, children: e.description })
+                      e.icon && /* @__PURE__ */ t("span", { style: { flexShrink: 0 }, children: e.icon }),
+                      /* @__PURE__ */ f("div", { style: { flex: 1, minWidth: 0 }, children: [
+                        /* @__PURE__ */ t("div", { style: { fontWeight: e.value === l ? 500 : 400 }, children: e.label }),
+                        e.description && /* @__PURE__ */ t("div", { style: { fontSize: M.sm, color: "var(--brycks-foreground-muted)" }, children: e.description })
                       ] }),
-                      e.value === i && /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ o(
+                      e.value === l && /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ t(
                         "path",
                         {
                           d: "M3 8l3 3 7-7",
@@ -308,20 +328,20 @@ const Re = we(function({
                     ]
                   },
                   e.value
-                )) : /* @__PURE__ */ o("li", { style: ve, children: M && a ? /* @__PURE__ */ o(
+                )) : /* @__PURE__ */ t("li", { style: G, children: R && i ? /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
                     style: {
-                      ...V(!0, !1, !1),
+                      ...X(!0, !1, !1),
                       width: "100%",
                       border: "none",
                       cursor: "pointer"
                     },
-                    onClick: () => O?.(a),
-                    children: ee(a)
+                    onClick: () => O?.(i),
+                    children: oe(i)
                   }
-                ) : _ })
+                ) : re })
               }
             )
           ] }),
@@ -331,8 +351,8 @@ const Re = we(function({
     }
   );
 });
-Re.displayName = "Combobox";
+Oe.displayName = "Combobox";
 export {
-  Re as Combobox
+  Oe as Combobox
 };
 //# sourceMappingURL=Combobox.js.map