twenty-ui 2.44.0 → 2.46.0

package/dist/input-CKcuJwhb.js

@@ -0,0 +1,450 @@
+import { t as y } from "./isDefined-fMi6eQ4r.js";
+import { Di as Te, Pn as ve, Tn as le, Uc as xe, Wo as Oe, Zc as Pe, hl as ke, js as we, pl as ze } from "./icon-Bo3y4NHM.js";
+import { r as ge } from "./theme-yAk9zrNA.js";
+import { t as A } from "./normalizeSearchText-DA4xMLCJ.js";
+import { n as fe, t as z } from "./Button-DQUIhQAm.js";
+import { t as W } from "./mergeClassNames-ClFMR1v0.js";
+import { t as se } from "./OverflowingTextWithTooltip-wRABzEWd.js";
+import { t as s } from "./Dropdown-CZVEnq0N.js";
+import { n as me, t as Ee } from "./Input-D3-FH2Zz.js";
+import { n as oe, t as Fe } from "./InputGroup-wM9PT12U.js";
+import { useRender as _e } from "@base-ui/react/use-render";
+import { isFunction as pe, isNonEmptyArray as V, isNonEmptyString as _ } from "@sniptt/guards";
+import { clsx as ce } from "clsx";
+import { useContext as be, useEffect as Be, useId as Q, useRef as De, useState as O } from "react";
+import { Fragment as U, jsx as e, jsxs as m } from "react/jsx-runtime";
+import { useMergedRefs as $e } from "@base-ui/utils/useMergedRefs";
+import { useStableCallback as je } from "@base-ui/utils/useStableCallback";
+var Me = "_root_1x3d7_1", Le = "_label_1x3d7_6", Re = "_flag_1x3d7_14", G = {
+  root: Me,
+  label: Le,
+  flag: Re
+}, Ae = ({ disabled: r, open: a, onOpenChange: t }) => {
+  const n = je(t);
+  return Be(() => {
+    !r || !a || n(!1);
+  }, [
+    r,
+    a,
+    n
+  ]), null;
+}, Ge = ({ countries: r, value: a, onValueChange: t, searchLabel: n, noCountryLabel: l, noResultsLabel: i }) => {
+  const [d, h] = O(""), c = A(d.trim()), b = _(c), v = r.filter((f) => A(f.label).includes(c)), o = A(l).includes(c), g = o || V(v), C = o && /* @__PURE__ */ e(s.OptionItem, {
+    selected: !_(a),
+    startIcon: /* @__PURE__ */ e("span", {
+      className: G.flag,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ e(ve, {})
+    }),
+    onSelect: () => t(""),
+    children: l
+  });
+  return /* @__PURE__ */ m(U, { children: [
+    /* @__PURE__ */ e(s.Search, {
+      value: d,
+      onValueChange: h,
+      placeholder: n,
+      "aria-label": n
+    }),
+    g && /* @__PURE__ */ e(s.Separator, {}),
+    g && /* @__PURE__ */ m(s.Section, {
+      scrollable: !0,
+      children: [
+        !b && C,
+        v.map((f) => /* @__PURE__ */ e(s.OptionItem, {
+          selected: f.value === a,
+          startIcon: /* @__PURE__ */ e("span", {
+            className: G.flag,
+            "aria-hidden": "true",
+            children: f.flag
+          }),
+          onSelect: () => t(f.value),
+          children: f.label
+        }, f.value)),
+        b && C
+      ]
+    }),
+    !g && /* @__PURE__ */ e(s.Empty, { children: i })
+  ] });
+}, Ve = ({ ariaLabelledBy: r, ariaLabel: a, visibleLabelId: t }) => {
+  if (_(r)) return r;
+  if (!_(a))
+    return t;
+}, L = (r) => r.preventBaseUIHandler?.(), Lr = ({ countries: r, value: a, onValueChange: t, label: n, searchLabel: l = "Search", noCountryLabel: i = "No country", noResultsLabel: d = "No results", open: h, onOpenChange: c, popupProps: b, disabled: v = !1, className: o, style: g, render: C, onClick: f, onMouseDown: P, onPointerDown: E, onKeyDown: u, onKeyUp: Y, id: ee, "aria-label": F, "aria-labelledby": H, "aria-describedby": re, ...K }) => {
+  const k = Q(), B = ee ?? k, q = `${k}-label`, D = `${k}-value`, $ = _(n), S = _(F) ? F : void 0, w = Ve({
+    ariaLabelledBy: H,
+    ariaLabel: S,
+    visibleLabelId: $ ? q : void 0
+  }), T = [re, y(w) || y(S) ? D : void 0].filter(_), [ae, te] = O(!1), p = v || !V(r), j = h ?? ae, x = !p && j, [M, X] = O(x), [de, Ce] = O(0);
+  M !== x && (X(x), x && Ce(de + 1));
+  const ne = r.find((I) => I.value === a), Ie = ne?.label ?? i, ye = y(ne) ? ne.flag : /* @__PURE__ */ e(ve, {}), ie = (I) => ({
+    ...I,
+    disabled: p
+  }), Se = W(ce(me.input, me.md, oe.trigger), o), ue = (I) => {
+    I && p || (te(I), c?.(I));
+  };
+  return /* @__PURE__ */ m("div", {
+    className: G.root,
+    children: [
+      /* @__PURE__ */ e(Ae, {
+        disabled: p,
+        open: j,
+        onOpenChange: ue
+      }),
+      $ && /* @__PURE__ */ e("label", {
+        id: q,
+        className: G.label,
+        htmlFor: B,
+        children: n
+      }),
+      /* @__PURE__ */ m(s.Root, {
+        type: "picker",
+        open: x,
+        onOpenChange: ue,
+        children: [/* @__PURE__ */ m(s.Trigger, {
+          ...K,
+          id: B,
+          "aria-label": S,
+          "aria-labelledby": w,
+          "aria-describedby": V(T) ? T.join(" ") : void 0,
+          "aria-disabled": p || void 0,
+          "data-disabled": p ? "" : void 0,
+          onClick: p ? L : f,
+          onMouseDown: p ? L : P,
+          onPointerDown: p ? L : E,
+          onKeyDown: p ? L : u,
+          onKeyUp: p ? L : Y,
+          className: (I) => Se(ie(I)),
+          style: pe(g) ? (I) => g(ie(I)) : g,
+          render: pe(C) ? (I, Ne) => C(I, ie(Ne)) : C,
+          children: [
+            /* @__PURE__ */ e("span", {
+              className: G.flag,
+              "aria-hidden": "true",
+              children: ye
+            }),
+            /* @__PURE__ */ e("span", {
+              className: oe.value,
+              id: D,
+              children: /* @__PURE__ */ e(se, { text: Ie })
+            }),
+            /* @__PURE__ */ e("span", {
+              className: oe.icon,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(le, {})
+            })
+          ]
+        }), /* @__PURE__ */ e(s.Content, {
+          ...b,
+          "aria-label": S,
+          "aria-labelledby": w,
+          children: /* @__PURE__ */ e(Ge, {
+            countries: r,
+            value: a,
+            onValueChange: t,
+            searchLabel: l,
+            noCountryLabel: i,
+            noResultsLabel: d
+          }, de)
+        })]
+      })
+    ]
+  });
+}, Ue = "_trigger_gi29o_1", We = "_chevron_gi29o_35", He = "_options_gi29o_40", Ke = "_emptyStatus_gi29o_46", J = {
+  trigger: Ue,
+  chevron: We,
+  options: He,
+  emptyStatus: Ke
+}, he = ({ code: r, name: a }) => `${a} (${r})`, qe = ({ currencies: r, value: a, onValueChange: t, disabled: n = !1, searchLabel: l = "Search", emptyLabel: i = "No results", className: d, render: h, ref: c, ...b }) => {
+  const [v, o] = O(""), g = v.trim().toLowerCase(), C = r.filter((u) => he(u).toLowerCase().includes(g)), f = V(C), P = C.find(({ code: u }) => u === a), E = y(P) ? [P, ...C.filter(({ code: u }) => u !== a)] : C;
+  return _e({
+    render: h,
+    ref: c,
+    props: {
+      ...b,
+      className: ce(J.options, d),
+      children: /* @__PURE__ */ m(U, { children: [
+        /* @__PURE__ */ e(s.Search, {
+          value: v,
+          placeholder: l,
+          "aria-label": l,
+          onValueChange: o,
+          disabled: n
+        }),
+        /* @__PURE__ */ e(s.Separator, {}),
+        f && /* @__PURE__ */ e(s.Section, {
+          scrollable: !0,
+          children: E.map((u) => /* @__PURE__ */ e(s.OptionItem, {
+            selected: u.code === a,
+            disabled: n || u.disabled,
+            onSelect: () => t(u.code),
+            children: /* @__PURE__ */ e(se, { text: he(u) })
+          }, u.code))
+        }),
+        /* @__PURE__ */ e(s.Empty, {
+          className: J.emptyStatus,
+          children: f ? null : i
+        })
+      ] })
+    }
+  });
+}, Xe = ({ value: r, className: a, ...t }) => /* @__PURE__ */ m(s.Trigger, {
+  ...t,
+  className: W(J.trigger, a),
+  children: [r, /* @__PURE__ */ e(le, {
+    "aria-hidden": "true",
+    className: J.chevron
+  })]
+}), Rr = {
+  Trigger: Xe,
+  Options: qe
+}, Ze = "_root_u3myi_1", Je = "_preview_u3myi_6", Qe = "_image_u3myi_35", Ye = "_fileInput_u3myi_48", er = "_content_u3myi_58", rr = "_actions_u3myi_67", ar = "_helperText_u3myi_73", tr = "_errorMessage_u3myi_78", N = {
+  root: Ze,
+  preview: Je,
+  image: Qe,
+  fileInput: Ye,
+  content: er,
+  actions: rr,
+  helperText: ar,
+  errorMessage: tr
+}, nr = ({ src: r }) => {
+  const a = ge(), [t, n] = O(!1);
+  return !_(r) || t ? /* @__PURE__ */ e(Oe, {
+    size: a.icon.size.lg,
+    "aria-hidden": !0
+  }) : /* @__PURE__ */ e("img", {
+    className: N.image,
+    src: r,
+    alt: "",
+    onError: () => n(!0)
+  });
+}, ir = "image/*", Ar = ({ src: r, onFileSelect: a, onRemove: t, onAbort: n, disabled: l = !1, isUploading: i = !1, helperText: d, errorMessage: h, uploadLabel: c = "Upload", removeLabel: b = "Remove", abortLabel: v = "Abort", accept: o = ir, inputRef: g, onChange: C, "aria-describedby": f, className: P, style: E, dir: u, render: Y, ref: ee, ...F }) => {
+  const H = De(null), re = $e(H, g), K = Q(), k = `${K}-helper`, B = `${K}-error`, q = _(r), D = _(d), $ = _(h), S = l || !y(a), w = l || !q || !y(t), T = S || i, ae = w || i, te = i && y(n), p = [
+    f,
+    D && k,
+    $ && B
+  ].filter(_).join(" ") || void 0, j = () => {
+    T || H.current?.click();
+  }, x = (M) => {
+    const X = M.currentTarget.files?.[0];
+    try {
+      C?.(M);
+    } finally {
+      M.currentTarget.value = "";
+    }
+    T || !y(X) || a?.(X);
+  };
+  return _e({
+    render: Y,
+    ref: ee,
+    props: {
+      className: ce(N.root, P),
+      style: E,
+      dir: u,
+      "aria-busy": i || F["aria-busy"],
+      children: /* @__PURE__ */ m(U, { children: [/* @__PURE__ */ e("button", {
+        className: N.preview,
+        type: "button",
+        disabled: S,
+        "aria-disabled": i || void 0,
+        "aria-label": c,
+        "aria-describedby": p,
+        onClick: j,
+        children: /* @__PURE__ */ e(nr, { src: r }, r)
+      }), /* @__PURE__ */ m("div", {
+        className: N.content,
+        children: [
+          /* @__PURE__ */ m("div", {
+            className: N.actions,
+            children: [
+              /* @__PURE__ */ e("input", {
+                "aria-label": c,
+                ...F,
+                ref: re,
+                className: N.fileInput,
+                dir: u,
+                children: void 0,
+                dangerouslySetInnerHTML: void 0,
+                type: "file",
+                multiple: !1,
+                value: void 0,
+                defaultValue: void 0,
+                accept: o,
+                disabled: T,
+                "aria-describedby": p,
+                hidden: !0,
+                onChange: x
+              }),
+              te ? /* @__PURE__ */ e(z, {
+                type: "button",
+                startIcon: /* @__PURE__ */ e(ke, {}),
+                onClick: n,
+                disabled: l,
+                variant: "outline",
+                children: v
+              }) : /* @__PURE__ */ e(z, {
+                type: "button",
+                startIcon: /* @__PURE__ */ e(Pe, {}),
+                onClick: j,
+                disabled: T,
+                focusableWhenDisabled: i && !S,
+                "aria-describedby": p,
+                variant: "outline",
+                children: c
+              }),
+              /* @__PURE__ */ e(z, {
+                type: "button",
+                startIcon: /* @__PURE__ */ e(xe, {}),
+                onClick: t,
+                disabled: ae,
+                focusableWhenDisabled: i && !w,
+                variant: "outline",
+                children: b
+              })
+            ]
+          }),
+          D && /* @__PURE__ */ e("span", {
+            className: N.helperText,
+            id: k,
+            children: d
+          }),
+          $ && /* @__PURE__ */ e("span", {
+            className: N.errorMessage,
+            id: B,
+            role: "alert",
+            children: h
+          })
+        ]
+      })] })
+    }
+  });
+}, or = "_button_k3e4y_1", lr = { button: or }, Gr = ({ className: r, emphasis: a = "standard", size: t, variant: n, ...l }) => {
+  const i = be(fe), d = t ?? i?.size ?? "sm", h = n ?? i?.variant ?? "ghost";
+  return /* @__PURE__ */ e(z, {
+    ...l,
+    size: d,
+    variant: h,
+    "data-emphasis": a,
+    className: W(lr.button, r)
+  });
+}, sr = "_button_1fwx7_1", cr = { button: sr }, Vr = ({ className: r, elevated: a = !0, variant: t, ...n }) => {
+  const l = be(fe), i = t ?? l?.variant ?? "solid";
+  return /* @__PURE__ */ e(z, {
+    ...n,
+    elevated: a,
+    variant: i,
+    className: W(cr.button, r)
+  });
+}, dr = "_trigger_1fjn7_1", ur = "_triggerFlag_1fjn7_31", mr = "_optionFlag_1fjn7_32", pr = "_chevron_1fjn7_52", hr = "_selectedCountryLabel_1fjn7_57", R = {
+  trigger: dr,
+  triggerFlag: ur,
+  optionFlag: mr,
+  chevron: pr,
+  selectedCountryLabel: hr
+}, vr = ({ label: r, callingCode: a }) => `${r} (+${a})`, gr = ({ countries: r, value: a, onValueChange: t, searchLabel: n = "Search", emptyLabel: l = "No results" }) => {
+  const [i, d] = O(""), h = A(i), c = r.filter(({ label: o }) => A(o).includes(h)), b = c.find((o) => o.value === a), v = y(b) ? [b, ...c.filter((o) => o.value !== a)] : c;
+  return /* @__PURE__ */ m(U, { children: [
+    /* @__PURE__ */ e(s.Search, {
+      value: i,
+      onValueChange: d,
+      placeholder: n,
+      "aria-label": n
+    }),
+    /* @__PURE__ */ e(s.Separator, {}),
+    /* @__PURE__ */ m(s.Section, {
+      scrollable: !0,
+      children: [!V(v) && /* @__PURE__ */ e(s.Empty, { children: l }), v.map((o) => {
+        const g = vr(o);
+        return /* @__PURE__ */ e(s.OptionItem, {
+          "aria-label": g,
+          selected: o.value === a,
+          onSelect: () => t(o.value),
+          startIcon: /* @__PURE__ */ e("span", {
+            className: R.optionFlag,
+            "aria-hidden": !0,
+            children: o.flag
+          }),
+          children: /* @__PURE__ */ e(se, {
+            text: /* @__PURE__ */ m(U, { children: [
+              o.label,
+              " (",
+              /* @__PURE__ */ m("bdi", {
+                dir: "ltr",
+                children: ["+", o.callingCode]
+              }),
+              ")"
+            ] }),
+            tooltipContent: g
+          })
+        }, o.value);
+      })]
+    })
+  ] });
+}, fr = ({ country: r, className: a, "aria-describedby": t, ...n }) => {
+  const l = Q(), i = [y(r) && l, t].filter(_).join(" ") || void 0;
+  return /* @__PURE__ */ m(s.Trigger, {
+    ...n,
+    "aria-describedby": i,
+    className: W(R.trigger, a),
+    children: [
+      /* @__PURE__ */ e("span", {
+        className: R.triggerFlag,
+        "aria-hidden": !0,
+        children: r?.flag ?? /* @__PURE__ */ e(ze, {})
+      }),
+      y(r) && /* @__PURE__ */ e("span", {
+        id: l,
+        className: R.selectedCountryLabel,
+        children: r.label
+      }),
+      /* @__PURE__ */ e(le, {
+        className: R.chevron,
+        "aria-hidden": !0
+      })
+    ]
+  });
+}, Ur = {
+  Trigger: fr,
+  Options: gr
+}, _r = "_wrapper_fz4xu_1", br = "_filterButton_fz4xu_8", Cr = "_inputGroup_fz4xu_17", Ir = "_searchIcon_fz4xu_23", Z = {
+  wrapper: _r,
+  filterButton: br,
+  inputGroup: Cr,
+  searchIcon: Ir
+}, Wr = ({ placeholder: r, filterDropdown: a, size: t = "md", id: n, filterButtonAriaLabel: l = "Filter", "aria-label": i, "aria-labelledby": d, ...h }) => {
+  const c = ge(), b = Q(), v = n ?? b, o = /* @__PURE__ */ e(z, {
+    variant: "outline",
+    size: t,
+    "aria-label": l,
+    startIcon: /* @__PURE__ */ e(Te, { size: c.icon.size.md }),
+    className: Z.filterButton
+  });
+  return /* @__PURE__ */ m("div", {
+    className: Z.wrapper,
+    children: [/* @__PURE__ */ e(Fe, {
+      className: Z.inputGroup,
+      size: t,
+      startElement: /* @__PURE__ */ e(we, {
+        className: Z.searchIcon,
+        size: c.icon.size.md,
+        "aria-hidden": !0
+      }),
+      children: /* @__PURE__ */ e(Ee, {
+        ...h,
+        id: v,
+        placeholder: r,
+        "aria-label": _(d) ? void 0 : i ?? r,
+        "aria-labelledby": d
+      })
+    }), a?.(o)]
+  });
+};
+export {
+  Ar as a,
+  Gr as i,
+  Ur as n,
+  Rr as o,
+  Vr as r,
+  Lr as s,
+  Wr as t
+};