@brycks/core-front 0.3.5 → 0.5.0

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

@@ -1,173 +1,179 @@
-import { jsxs as m, jsx as o, Fragment as ye } from "react/jsx-runtime";
-import { forwardRef as he, useState as v, useRef as D, useMemo as V, useEffect as $, useCallback as I } from "react";
-import { createPortal as ve } from "react-dom";
-import { cx as ge } from "../../../utils/styles.js";
-import { durations as k, easings as w } from "../../../design-system/tokens/motion.js";
-import { iconSizes as j, componentPaddingX as L, componentHeights as B, componentGap as ke } from "../../../design-system/primitives/sizing.js";
-import { fontSizes as E } from "../../../design-system/tokens/typography.js";
-import { spacing as c } from "../../../design-system/tokens/spacing.js";
-const we = {
-  sm: { height: B.sm, fontSize: E.base - 1, padding: L.sm, iconSize: j.sm },
-  md: { height: B.md, fontSize: E.base, padding: L.md, iconSize: j.md },
-  lg: { height: B.lg, fontSize: E.md, padding: L.lg, iconSize: j.lg }
-}, xe = (x, f) => {
-  const d = f.toLowerCase();
-  return x.label.toLowerCase().includes(d) || x.value.toLowerCase().includes(d) || (x.description?.toLowerCase().includes(d) ?? !1);
+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 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 Se() {
-  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 Ce() {
-  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 ze = he(function({
-  options: f,
-  value: d,
-  defaultValue: X = null,
+const Oe = Ce(function({
+  options: p,
+  value: c,
+  defaultValue: J = null,
   onChange: P,
-  onInputChange: W,
-  placeholder: G = "Select or search...",
-  size: F = "md",
+  onInputChange: F,
+  placeholder: Q = "Select or search...",
+  size: T = "md",
   disabled: b = !1,
-  isInvalid: T = !1,
-  required: U = !1,
-  clearable: J = !0,
-  "aria-label": A,
-  "aria-labelledby": Q,
-  filterFn: Y = xe,
-  emptyText: Z = "No options found",
+  isInvalid: A = !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: M,
-  className: _,
-  testId: ee
+  onCreate: O,
+  createLabel: oe = (h) => `Create "${h}"`,
+  clearLabel: ne = "Clear selection",
+  listboxLabel: ie = "Options",
+  className: ae,
+  testId: se
 }, S) {
-  const [re, te] = v(X), [a, y] = v(""), [r, p] = v(!1), [n, s] = v(-1), [N, q] = v(!1), C = D(null), z = D(null), H = D(null), i = d !== void 0 ? d : re, h = we[F], l = V(
-    () => f.find((e) => e.value === i),
-    [f, i]
-  ), u = V(() => a ? f.filter((e) => Y(e, a)) : f, [f, a, Y]);
-  $(() => {
-    !r && l ? y(l.label) : !r && !i && y("");
-  }, [r, l, i]);
-  const g = I(
+  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 && d ? y(d.label) : !r && !l && y("");
+  }, [r, d, l]);
+  const k = L(
     (e) => {
-      d === void 0 && te(e), P?.(e), p(!1), s(-1), z.current?.focus();
+      c === void 0 && de(e), P?.(e), m(!1), s(-1), z.current?.focus();
     },
-    [d, P]
-  ), oe = I(
+    [c, P]
+  ), ce = L(
     (e) => {
-      const t = e.target.value;
-      y(t), W?.(t), r || p(!0), s(0);
+      const o = e.target.value;
+      y(o), F?.(o), r || m(!0), s(0);
     },
-    [r, W]
-  ), ne = I(
+    [r, F]
+  ), ue = L(
     (e) => {
-      e.stopPropagation(), g(null), y(""), z.current?.focus();
+      e.stopPropagation(), k(null), y(""), z.current?.focus();
     },
-    [g]
-  ), ae = I(
+    [k]
+  ), 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 || g(u[n].value) : R && a && u.length === 0 && M?.(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, g, R, a, M, l]
+    [r, n, u, k, R, i, O, d]
   );
-  $(() => {
+  I(() => {
     if (!r) return;
-    const e = (t) => {
-      C.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]), $(() => {
+  }, [r, d]), I(() => {
     if (!r || n < 0) return;
-    H.current?.children[n]?.scrollIntoView({ block: "nearest" });
+    V.current?.children[n]?.scrollIntoView({ block: "nearest" });
   }, [r, n]);
-  const [O, se] = v({ top: 0, left: 0, width: 0 });
-  $(() => {
-    if (!r || !C.current) return;
+  const [D, pe] = g({ top: 0, left: 0, width: 0 });
+  I(() => {
+    if (!r || !$.current) return;
     const e = () => {
-      const t = C.current.getBoundingClientRect();
-      se({
-        top: t.bottom + window.scrollY + c[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 ie = {
+  const be = {
     position: "relative",
     display: "inline-flex",
     width: "100%"
-  }, le = {
+  }, 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 ${T ? "var(--brycks-error-default)" : N ? "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 ${k.fast}ms ${w.easeOut}`,
+    transition: `all ${w.fast}ms ${x.easeOut}`,
     cursor: b ? "not-allowed" : "text",
-    boxShadow: N ? "var(--brycks-focus-ring)" : void 0
-  }, ce = {
+    boxShadow: H ? "var(--brycks-focus-ring)" : void 0
+  }, he = {
     flex: 1,
     height: "100%",
-    padding: `0 ${h.padding}px`,
-    paddingRight: c[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"
-  }, de = {
+  }, ye = {
     position: "absolute",
-    right: h.padding,
+    right: v.padding,
     display: "flex",
     alignItems: "center",
-    gap: c[1],
+    gap: a[1],
     pointerEvents: "none"
-  }, ue = {
+  }, ve = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: c[5],
-    height: c[5],
+    width: a[5],
+    height: a[5],
     color: "var(--brycks-foreground-muted)",
     cursor: "pointer",
     borderRadius: "var(--brycks-radius-sm)",
-    transition: `all ${k.fast}ms ${w.easeOut}`,
+    transition: `all ${w.fast}ms ${x.easeOut}`,
     pointerEvents: "auto"
-  }, fe = {
+  }, ge = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     color: "var(--brycks-foreground-muted)",
     transform: r ? "rotate(180deg)" : "rotate(0)",
-    transition: `transform ${k.fast}ms ${w.easeOut}`
-  }, be = {
+    transition: `transform ${w.fast}ms ${x.easeOut}`
+  }, ke = {
     position: "absolute",
-    top: O.top,
-    left: O.left,
-    width: O.width,
+    top: D.top,
+    left: D.left,
+    width: D.width,
     maxHeight: 300,
     overflowY: "auto",
     backgroundColor: "var(--brycks-background-elevated)",
@@ -175,40 +181,40 @@ const ze = he(function({
     borderRadius: "var(--brycks-radius-lg)",
     boxShadow: "var(--brycks-shadow-lg)",
     zIndex: "var(--brycks-z-dropdown)",
-    padding: c[1],
-    animation: `brycks-dropdown-in ${k.quick}ms ${w.easeOut}`
-  }, K = (e, t, me) => ({
+    padding: a[1],
+    animation: `brycks-dropdown-in ${w.quick}ms ${x.easeOut}`
+  }, X = (e, o, we) => ({
     display: "flex",
     alignItems: "center",
-    gap: ke.md,
-    padding: `${c[2]}px ${L.sm}px`,
-    fontSize: h.fontSize,
-    color: t ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
-    backgroundColor: e ? "var(--brycks-background-muted)" : me ? "var(--brycks-primary-50)" : "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",
-    transition: `background-color ${k.fast}ms ${w.easeOut}`
-  }), pe = {
-    padding: `${c[4]}px ${c[3]}px`,
-    fontSize: h.fontSize,
+    cursor: o ? "not-allowed" : "pointer",
+    transition: `background-color ${w.fast}ms ${x.easeOut}`
+  }), G = {
+    padding: `${a[4]}px ${a[3]}px`,
+    fontSize: v.fontSize,
     color: "var(--brycks-foreground-muted)",
     textAlign: "center"
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ f(
     "div",
     {
-      ref: C,
-      className: ge("brycks-combobox", `brycks-combobox--${F}`, _),
-      style: ie,
-      "data-testid": ee,
+      ref: $,
+      className: $e("brycks-combobox", `brycks-combobox--${T}`, ae),
+      style: be,
+      "data-testid": se,
       children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ f(
           "div",
           {
-            style: le,
+            style: me,
             onClick: () => !b && z.current?.focus(),
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 "input",
                 {
                   ref: (e) => {
@@ -219,79 +225,97 @@ const ze = he(function({
                   "aria-expanded": r,
                   "aria-haspopup": "listbox",
                   "aria-autocomplete": "list",
-                  "aria-controls": r ? "combobox-listbox" : void 0,
-                  "aria-activedescendant": r && n >= 0 ? `combobox-option-${n}` : void 0,
-                  "aria-invalid": T,
-                  "aria-required": U,
-                  "aria-label": A,
-                  "aria-labelledby": Q,
-                  value: a,
-                  placeholder: G,
+                  "aria-controls": r ? h : void 0,
+                  "aria-activedescendant": r && n >= 0 ? `${h}-option-${n}` : void 0,
+                  "aria-invalid": A,
+                  "aria-required": Z,
+                  "aria-label": N,
+                  "aria-labelledby": ee,
+                  value: i,
+                  placeholder: Q,
                   disabled: b,
-                  style: ce,
-                  onChange: oe,
-                  onKeyDown: ae,
+                  style: he,
+                  onChange: ce,
+                  onKeyDown: fe,
                   onFocus: () => {
-                    q(!0), p(!0);
+                    K(!0), m(!0);
                   },
-                  onBlur: () => q(!1)
+                  onBlur: () => K(!1)
                 }
               ),
-              /* @__PURE__ */ m("div", { style: de, children: [
-                J && i && !b && /* @__PURE__ */ o(
+              /* @__PURE__ */ f("div", { style: ye, children: [
+                _ && l && !b && /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Clear selection",
-                    style: ue,
-                    onClick: ne,
+                    "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(Ce, {})
+                    children: /* @__PURE__ */ t(Re, {})
                   }
                 ),
-                /* @__PURE__ */ o("span", { style: fe, children: /* @__PURE__ */ o(Se, {}) })
+                /* @__PURE__ */ t("span", { style: ge, children: /* @__PURE__ */ t(Me, {}) })
               ] })
             ]
           }
         ),
-        r && ve(
-          /* @__PURE__ */ m(ye, { 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: H,
-                id: "combobox-listbox",
+                ref: V,
+                id: h,
                 role: "listbox",
-                "aria-label": A || "Options",
-                style: be,
-                children: u.length > 0 ? u.map((e, t) => /* @__PURE__ */ m(
+                "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: `combobox-option-${t}`,
+                    id: `${h}-option-${o}`,
                     role: "option",
-                    "aria-selected": e.value === i,
+                    "aria-selected": e.value === l,
                     "aria-disabled": e.disabled,
-                    style: K(t === n, !!e.disabled, e.value === i),
-                    onClick: () => !e.disabled && g(e.value),
-                    onMouseEnter: () => s(t),
+                    style: X(o === n, !!e.disabled, e.value === l),
+                    onClick: () => !e.disabled && k(e.value),
+                    onMouseEnter: () => s(o),
                     children: [
-                      e.icon && /* @__PURE__ */ o("span", { style: { flexShrink: 0 }, children: e.icon }),
-                      /* @__PURE__ */ m("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: E.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",
@@ -304,24 +328,20 @@ const ze = he(function({
                     ]
                   },
                   e.value
-                )) : /* @__PURE__ */ o("li", { style: pe, children: R && a ? /* @__PURE__ */ m(
+                )) : /* @__PURE__ */ t("li", { style: G, children: R && i ? /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
                     style: {
-                      ...K(!0, !1, !1),
+                      ...X(!0, !1, !1),
                       width: "100%",
                       border: "none",
                       cursor: "pointer"
                     },
-                    onClick: () => M?.(a),
-                    children: [
-                      'Create "',
-                      a,
-                      '"'
-                    ]
+                    onClick: () => O?.(i),
+                    children: oe(i)
                   }
-                ) : Z })
+                ) : re })
               }
             )
           ] }),
@@ -331,8 +351,8 @@ const ze = he(function({
     }
   );
 });
-ze.displayName = "Combobox";
+Oe.displayName = "Combobox";
 export {
-  ze as Combobox
+  Oe as Combobox
 };
 //# sourceMappingURL=Combobox.js.map