twenty-ui 2.46.0 → 2.48.0

package/dist/input-TM3nUdu6.js

@@ -0,0 +1,554 @@
+import { t as N } from "./isDefined-fMi6eQ4r.js";
+import { Pn as Ie, So as we, Tn as he, Uc as xe, Wo as Fe, Zc as $e, gl as Me, js as ze, ml as Be, ts as De } from "./icon-CUE-QGQK.js";
+import { r as ye } from "./theme-B2EaXhye.js";
+import { t as M } from "./mergeClassNames-ClFMR1v0.js";
+import { n as Z } from "./preventDismissingClickActivation-CzWqpjiX.js";
+import { r as Ne, t as F } from "./Button-D5enZ0Qz.js";
+import { t as de } from "./isRenderableSlot-DT_depzM.js";
+import { t as ve } from "./OverflowingTextWithTooltip-BmUROIah.js";
+import { t as d } from "./Dropdown-C2hXrjvD.js";
+import { n as te, t as Ve } from "./Input-DZWl81G_.js";
+import { i as ue, n as Ae, r as ae, t as Ge } from "./Radio-DMI1B7o5.js";
+import { useRender as Se } from "@base-ui/react/use-render";
+import { isFunction as ge, isNonEmptyArray as Q, isNonEmptyString as C } from "@sniptt/guards";
+import { clsx as A } from "clsx";
+import { useContext as Oe, useEffect as Le, useId as oe, useRef as je, useState as $ } from "react";
+import { Fragment as Y, jsx as e, jsxs as h } from "react/jsx-runtime";
+import { useMergedRefs as Ue } from "@base-ui/utils/useMergedRefs";
+import { useStableCallback as qe } from "@base-ui/utils/useStableCallback";
+import { useControlled as We } from "@base-ui/utils/useControlled";
+import { useValueAsRef as He } from "@base-ui/utils/useValueAsRef";
+import { formatNumber as fe } from "@base-ui/utils/formatNumber";
+import { RadioGroup as Ke } from "@base-ui/react/radio-group";
+var Xe = "_root_1x3d7_1", Ze = "_label_1x3d7_6", Je = "_flag_1x3d7_14", J = {
+  root: Xe,
+  label: Ze,
+  flag: Je
+}, Qe = ({ disabled: r, open: a, onOpenChange: t }) => {
+  const n = qe(t);
+  return Le(() => {
+    !r || !a || n(!1);
+  }, [
+    r,
+    a,
+    n
+  ]), null;
+}, Ye = ({ countries: r, value: a, onValueChange: t, searchLabel: n, noCountryLabel: i, noResultsLabel: o }) => {
+  const [u, s] = $(""), c = Z(u.trim()), m = C(c), f = r.filter((_) => Z(_.label).includes(c)), l = Z(i).includes(c), v = l || Q(f), b = l && /* @__PURE__ */ e(d.OptionItem, {
+    selected: !C(a),
+    startIcon: /* @__PURE__ */ e("span", {
+      className: J.flag,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ e(Ie, {})
+    }),
+    onSelect: () => t(""),
+    children: i
+  });
+  return /* @__PURE__ */ h(Y, { children: [
+    /* @__PURE__ */ e(d.Search, {
+      value: u,
+      onValueChange: s,
+      placeholder: n,
+      "aria-label": n
+    }),
+    v && /* @__PURE__ */ e(d.Separator, {}),
+    v && /* @__PURE__ */ h(d.Section, {
+      scrollable: !0,
+      children: [
+        !m && b,
+        f.map((_) => /* @__PURE__ */ e(d.OptionItem, {
+          selected: _.value === a,
+          startIcon: /* @__PURE__ */ e("span", {
+            className: J.flag,
+            "aria-hidden": "true",
+            children: _.flag
+          }),
+          onSelect: () => t(_.value),
+          children: _.label
+        }, _.value)),
+        m && b
+      ]
+    }),
+    !v && /* @__PURE__ */ e(d.Empty, { children: o })
+  ] });
+}, er = ({ ariaLabelledBy: r, ariaLabel: a, visibleLabelId: t }) => {
+  if (C(r)) return r;
+  if (!C(a))
+    return t;
+}, K = (r) => r.preventBaseUIHandler?.(), ma = ({ countries: r, value: a, onValueChange: t, label: n, searchLabel: i = "Search", noCountryLabel: o = "No country", noResultsLabel: u = "No results", open: s, onOpenChange: c, popupProps: m, disabled: f = !1, className: l, style: v, render: b, onClick: _, onMouseDown: O, onPointerDown: k, onKeyDown: p, onKeyUp: G, id: z, "aria-label": E, "aria-labelledby": T, "aria-describedby": L, ...S }) => {
+  const y = oe(), j = z ?? y, ee = `${y}-label`, U = `${y}-value`, q = C(n), P = C(E) ? E : void 0, B = er({
+    ariaLabelledBy: T,
+    ariaLabel: P,
+    visibleLabelId: q ? ee : void 0
+  }), w = [L, N(B) || N(P) ? U : void 0].filter(C), [ie, le] = $(!1), g = f || !Q(r), W = s ?? ie, x = !g && W, [H, re] = $(x), [_e, Te] = $(0);
+  H !== x && (re(x), x && Te(_e + 1));
+  const se = r.find((I) => I.value === a), Pe = se?.label ?? o, Re = N(se) ? se.flag : /* @__PURE__ */ e(Ie, {}), ce = (I) => ({
+    ...I,
+    disabled: g
+  }), ke = M(A(te.input, te.md, ue.trigger), l), be = (I) => {
+    I && g || (le(I), c?.(I));
+  };
+  return /* @__PURE__ */ h("div", {
+    className: J.root,
+    children: [
+      /* @__PURE__ */ e(Qe, {
+        disabled: g,
+        open: W,
+        onOpenChange: be
+      }),
+      q && /* @__PURE__ */ e("label", {
+        id: ee,
+        className: J.label,
+        htmlFor: j,
+        children: n
+      }),
+      /* @__PURE__ */ h(d.Root, {
+        type: "picker",
+        open: x,
+        onOpenChange: be,
+        children: [/* @__PURE__ */ h(d.Trigger, {
+          ...S,
+          id: j,
+          "aria-label": P,
+          "aria-labelledby": B,
+          "aria-describedby": Q(w) ? w.join(" ") : void 0,
+          "aria-disabled": g || void 0,
+          "data-disabled": g ? "" : void 0,
+          onClick: g ? K : _,
+          onMouseDown: g ? K : O,
+          onPointerDown: g ? K : k,
+          onKeyDown: g ? K : p,
+          onKeyUp: g ? K : G,
+          className: (I) => ke(ce(I)),
+          style: ge(v) ? (I) => v(ce(I)) : v,
+          render: ge(b) ? (I, Ee) => b(I, ce(Ee)) : b,
+          children: [
+            /* @__PURE__ */ e("span", {
+              className: J.flag,
+              "aria-hidden": "true",
+              children: Re
+            }),
+            /* @__PURE__ */ e("span", {
+              className: ue.value,
+              id: U,
+              children: /* @__PURE__ */ e(ve, { text: Pe })
+            }),
+            /* @__PURE__ */ e("span", {
+              className: ue.icon,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(he, {})
+            })
+          ]
+        }), /* @__PURE__ */ e(d.Content, {
+          ...m,
+          "aria-label": P,
+          "aria-labelledby": B,
+          children: /* @__PURE__ */ e(Ye, {
+            countries: r,
+            value: a,
+            onValueChange: t,
+            searchLabel: i,
+            noCountryLabel: o,
+            noResultsLabel: u
+          }, _e)
+        })]
+      })
+    ]
+  });
+}, rr = "_trigger_18tlx_1", ar = "_chevron_18tlx_40", tr = "_options_18tlx_45", nr = "_emptyStatus_18tlx_51", ne = {
+  trigger: rr,
+  chevron: ar,
+  options: tr,
+  emptyStatus: nr
+}, Ce = ({ code: r, name: a }) => `${a} (${r})`, or = ({ currencies: r, value: a, onValueChange: t, disabled: n = !1, searchLabel: i = "Search", emptyLabel: o = "No results", className: u, render: s, ref: c, ...m }) => {
+  const [f, l] = $(""), v = f.trim().toLowerCase(), b = r.filter((p) => Ce(p).toLowerCase().includes(v)), _ = Q(b), O = b.find(({ code: p }) => p === a), k = N(O) ? [O, ...b.filter(({ code: p }) => p !== a)] : b;
+  return Se({
+    render: s,
+    ref: c,
+    props: {
+      ...m,
+      className: A(ne.options, u),
+      children: /* @__PURE__ */ h(Y, { children: [
+        /* @__PURE__ */ e(d.Search, {
+          value: f,
+          placeholder: i,
+          "aria-label": i,
+          onValueChange: l,
+          disabled: n
+        }),
+        /* @__PURE__ */ e(d.Separator, {}),
+        _ && /* @__PURE__ */ e(d.Section, {
+          scrollable: !0,
+          children: k.map((p) => /* @__PURE__ */ e(d.OptionItem, {
+            selected: p.code === a,
+            disabled: n || p.disabled,
+            onSelect: () => t(p.code),
+            children: /* @__PURE__ */ e(ve, { text: Ce(p) })
+          }, p.code))
+        }),
+        /* @__PURE__ */ e(d.Empty, {
+          className: ne.emptyStatus,
+          children: _ ? null : o
+        })
+      ] })
+    }
+  });
+}, ir = ({ value: r, className: a, ...t }) => /* @__PURE__ */ h(d.Trigger, {
+  ...t,
+  className: M(ne.trigger, a),
+  children: [r, /* @__PURE__ */ e(he, {
+    "aria-hidden": "true",
+    className: ne.chevron
+  })]
+}), pa = {
+  Trigger: ir,
+  Options: or
+}, lr = "_root_u3myi_1", sr = "_preview_u3myi_6", cr = "_image_u3myi_35", dr = "_fileInput_u3myi_48", ur = "_content_u3myi_58", mr = "_actions_u3myi_67", pr = "_helperText_u3myi_73", hr = "_errorMessage_u3myi_78", R = {
+  root: lr,
+  preview: sr,
+  image: cr,
+  fileInput: dr,
+  content: ur,
+  actions: mr,
+  helperText: pr,
+  errorMessage: hr
+}, vr = ({ src: r }) => {
+  const a = ye(), [t, n] = $(!1);
+  return !C(r) || t ? /* @__PURE__ */ e(Fe, {
+    size: a.icon.size.lg,
+    "aria-hidden": !0
+  }) : /* @__PURE__ */ e("img", {
+    className: R.image,
+    src: r,
+    alt: "",
+    onError: () => n(!0)
+  });
+}, _r = "image/*", ha = ({ src: r, onFileSelect: a, onRemove: t, onAbort: n, disabled: i = !1, isUploading: o = !1, helperText: u, errorMessage: s, uploadLabel: c = "Upload", removeLabel: m = "Remove", abortLabel: f = "Abort", accept: l = _r, inputRef: v, onChange: b, "aria-describedby": _, className: O, style: k, dir: p, render: G, ref: z, ...E }) => {
+  const T = je(null), L = Ue(T, v), S = oe(), y = `${S}-helper`, j = `${S}-error`, ee = C(r), U = C(u), q = C(s), P = i || !N(a), B = i || !ee || !N(t), w = P || o, ie = B || o, le = o && N(n), g = [
+    _,
+    U && y,
+    q && j
+  ].filter(C).join(" ") || void 0, W = () => {
+    w || T.current?.click();
+  }, x = (H) => {
+    const re = H.currentTarget.files?.[0];
+    try {
+      b?.(H);
+    } finally {
+      H.currentTarget.value = "";
+    }
+    w || !N(re) || a?.(re);
+  };
+  return Se({
+    render: G,
+    ref: z,
+    props: {
+      className: A(R.root, O),
+      style: k,
+      dir: p,
+      "aria-busy": o || E["aria-busy"],
+      children: /* @__PURE__ */ h(Y, { children: [/* @__PURE__ */ e("button", {
+        className: R.preview,
+        type: "button",
+        disabled: P,
+        "aria-disabled": o || void 0,
+        "aria-label": c,
+        "aria-describedby": g,
+        onClick: W,
+        children: /* @__PURE__ */ e(vr, { src: r }, r)
+      }), /* @__PURE__ */ h("div", {
+        className: R.content,
+        children: [
+          /* @__PURE__ */ h("div", {
+            className: R.actions,
+            children: [
+              /* @__PURE__ */ e("input", {
+                "aria-label": c,
+                ...E,
+                ref: L,
+                className: R.fileInput,
+                dir: p,
+                children: void 0,
+                dangerouslySetInnerHTML: void 0,
+                type: "file",
+                multiple: !1,
+                value: void 0,
+                defaultValue: void 0,
+                accept: l,
+                disabled: w,
+                "aria-describedby": g,
+                hidden: !0,
+                onChange: x
+              }),
+              le ? /* @__PURE__ */ e(F, {
+                type: "button",
+                startIcon: /* @__PURE__ */ e(Me, {}),
+                onClick: n,
+                disabled: i,
+                variant: "outline",
+                children: f
+              }) : /* @__PURE__ */ e(F, {
+                type: "button",
+                startIcon: /* @__PURE__ */ e($e, {}),
+                onClick: W,
+                disabled: w,
+                focusableWhenDisabled: o && !P,
+                "aria-describedby": g,
+                variant: "outline",
+                children: c
+              }),
+              /* @__PURE__ */ e(F, {
+                type: "button",
+                startIcon: /* @__PURE__ */ e(xe, {}),
+                onClick: t,
+                disabled: ie,
+                focusableWhenDisabled: o && !B,
+                variant: "outline",
+                children: m
+              })
+            ]
+          }),
+          U && /* @__PURE__ */ e("span", {
+            className: R.helperText,
+            id: y,
+            children: u
+          }),
+          q && /* @__PURE__ */ e("span", {
+            className: R.errorMessage,
+            id: j,
+            role: "alert",
+            children: s
+          })
+        ]
+      })] })
+    }
+  });
+}, br = "_button_k3e4y_1", gr = { button: br }, va = ({ className: r, emphasis: a = "standard", size: t, variant: n, ...i }) => {
+  const o = Oe(Ne), u = t ?? o?.size ?? "sm", s = n ?? o?.variant ?? "ghost";
+  return /* @__PURE__ */ e(F, {
+    ...i,
+    size: u,
+    variant: s,
+    "data-emphasis": a,
+    className: M(gr.button, r)
+  });
+}, fr = "_button_1fwx7_1", Cr = { button: fr }, _a = ({ className: r, elevated: a = !0, variant: t, ...n }) => {
+  const i = Oe(Ne), o = t ?? i?.variant ?? "solid";
+  return /* @__PURE__ */ e(F, {
+    ...n,
+    elevated: a,
+    variant: o,
+    className: M(Cr.button, r)
+  });
+}, pe = {
+  maximumFractionDigits: 15,
+  numberingSystem: "latn",
+  useGrouping: "min2"
+}, Ir = ({ nextValue: r, currentValue: a, reason: t }) => t === "input-blur" && fe(r, void 0, pe) === fe(a, void 0, pe), yr = "_root_17bio_1", Nr = "_valueInput_17bio_7", Sr = "_button_17bio_14", Or = "_icon_17bio_32", D = {
+  root: yr,
+  valueInput: Nr,
+  button: Sr,
+  icon: Or
+}, ba = ({ value: r, defaultValue: a, onValueChange: t, onValueCommitted: n, allowOutOfRange: i = !1, min: o, max: u, step: s = 1, disabled: c, readOnly: m, required: f, name: l, form: v, id: b, showButtons: _ = !0, decrementLabel: O = "Decrease value", incrementLabel: k = "Increase value", className: p, ...G }) => {
+  const [z, E] = We({
+    controlled: r,
+    default: a ?? null,
+    name: "NumberStepper",
+    state: "value"
+  }), T = He(z), L = (S, y) => {
+    if (S !== T.current) {
+      if (Ir({
+        nextValue: S,
+        currentValue: T.current,
+        reason: y.reason
+      })) {
+        y.cancel();
+        return;
+      }
+      t?.(S, y), !y.isCanceled && (T.current = S, E(S));
+    }
+  };
+  return /* @__PURE__ */ h(ae.Root, {
+    value: z,
+    onValueChange: L,
+    onValueCommitted: n,
+    min: o,
+    max: u,
+    allowOutOfRange: i,
+    step: s,
+    smallStep: s,
+    largeStep: s,
+    disabled: c,
+    readOnly: m,
+    required: f,
+    name: l,
+    form: v,
+    id: b,
+    format: pe,
+    className: D.root,
+    children: [
+      _ && /* @__PURE__ */ e(ae.Decrement, {
+        "aria-label": O,
+        render: /* @__PURE__ */ e(F, {
+          type: "button",
+          size: "sm",
+          className: D.button,
+          startIcon: /* @__PURE__ */ e("span", {
+            className: D.icon,
+            children: /* @__PURE__ */ e(we, {})
+          })
+        })
+      }),
+      /* @__PURE__ */ e(ae.Input, {
+        ...G,
+        form: v,
+        className: M(A(te.input, te.sm, D.valueInput), p)
+      }),
+      _ && /* @__PURE__ */ e(ae.Increment, {
+        "aria-label": k,
+        render: /* @__PURE__ */ e(F, {
+          type: "button",
+          size: "sm",
+          className: D.button,
+          startIcon: /* @__PURE__ */ e("span", {
+            className: D.icon,
+            children: /* @__PURE__ */ e(De, {})
+          })
+        })
+      })
+    ]
+  });
+}, Tr = "_trigger_s8ccg_1", Pr = "_triggerFlag_s8ccg_35", Rr = "_optionFlag_s8ccg_36", kr = "_chevron_s8ccg_56", Er = "_selectedCountryLabel_s8ccg_61", X = {
+  trigger: Tr,
+  triggerFlag: Pr,
+  optionFlag: Rr,
+  chevron: kr,
+  selectedCountryLabel: Er
+}, wr = ({ label: r, callingCode: a }) => `${r} (+${a})`, xr = ({ countries: r, value: a, onValueChange: t, searchLabel: n = "Search", emptyLabel: i = "No results" }) => {
+  const [o, u] = $(""), s = Z(o), c = r.filter(({ label: l }) => Z(l).includes(s)), m = c.find((l) => l.value === a), f = N(m) ? [m, ...c.filter((l) => l.value !== a)] : c;
+  return /* @__PURE__ */ h(Y, { children: [
+    /* @__PURE__ */ e(d.Search, {
+      value: o,
+      onValueChange: u,
+      placeholder: n,
+      "aria-label": n
+    }),
+    /* @__PURE__ */ e(d.Separator, {}),
+    /* @__PURE__ */ h(d.Section, {
+      scrollable: !0,
+      children: [!Q(f) && /* @__PURE__ */ e(d.Empty, { children: i }), f.map((l) => {
+        const v = wr(l);
+        return /* @__PURE__ */ e(d.OptionItem, {
+          "aria-label": v,
+          selected: l.value === a,
+          onSelect: () => t(l.value),
+          startIcon: /* @__PURE__ */ e("span", {
+            className: X.optionFlag,
+            "aria-hidden": !0,
+            children: l.flag
+          }),
+          children: /* @__PURE__ */ e(ve, {
+            text: /* @__PURE__ */ h(Y, { children: [
+              l.label,
+              " (",
+              /* @__PURE__ */ h("bdi", {
+                dir: "ltr",
+                children: ["+", l.callingCode]
+              }),
+              ")"
+            ] }),
+            tooltipContent: v
+          })
+        }, l.value);
+      })]
+    })
+  ] });
+}, Fr = ({ country: r, className: a, "aria-describedby": t, ...n }) => {
+  const i = oe(), o = [N(r) && i, t].filter(C).join(" ") || void 0;
+  return /* @__PURE__ */ h(d.Trigger, {
+    ...n,
+    "aria-describedby": o,
+    className: M(X.trigger, a),
+    children: [
+      /* @__PURE__ */ e("span", {
+        className: X.triggerFlag,
+        "aria-hidden": !0,
+        children: r?.flag ?? /* @__PURE__ */ e(Be, {})
+      }),
+      N(r) && /* @__PURE__ */ e("span", {
+        id: i,
+        className: X.selectedCountryLabel,
+        children: r.label
+      }),
+      /* @__PURE__ */ e(he, {
+        className: X.chevron,
+        "aria-hidden": !0
+      })
+    ]
+  });
+}, ga = {
+  Trigger: Fr,
+  Options: xr
+}, $r = "_wrapper_c0mqd_1", Mr = "_inputGroup_c0mqd_8", zr = "_searchIcon_c0mqd_14", me = {
+  wrapper: $r,
+  inputGroup: Mr,
+  searchIcon: zr
+}, fa = ({ placeholder: r, actions: a, size: t = "md", id: n, "aria-label": i, "aria-labelledby": o, ...u }) => {
+  const s = ye(), c = oe(), m = n ?? c;
+  return /* @__PURE__ */ h("div", {
+    className: me.wrapper,
+    children: [/* @__PURE__ */ e(Ae, {
+      className: me.inputGroup,
+      size: t,
+      startElement: /* @__PURE__ */ e(ze, {
+        className: me.searchIcon,
+        size: s.icon.size.md,
+        "aria-hidden": !0
+      }),
+      children: /* @__PURE__ */ e(Ve, {
+        ...u,
+        id: m,
+        placeholder: r,
+        "aria-label": C(o) ? void 0 : i ?? r,
+        "aria-labelledby": o
+      })
+    }), a]
+  });
+}, Br = "_container_1eoop_1", Dr = "_sm_1eoop_20", Vr = "_md_1eoop_26", Ar = "_item_1eoop_32", Gr = "_iconOnly_1eoop_72", Lr = "_icon_1eoop_72", jr = "_label_1eoop_91", V = {
+  container: Br,
+  sm: Dr,
+  md: Vr,
+  item: Ar,
+  iconOnly: Gr,
+  icon: Lr,
+  label: jr
+}, Ca = ({ className: r, itemWidth: a = "equal", options: t, size: n = "md", ...i }) => /* @__PURE__ */ e(Ke, {
+  ...i,
+  className: M(A(V.container, V[n]), r),
+  "data-item-width": a,
+  children: t.map(({ "aria-label": o, disabled: u, label: s, startIcon: c, value: m }) => /* @__PURE__ */ h(Ge.Root, {
+    value: m,
+    disabled: u,
+    "aria-label": o,
+    className: A(V.item, !de(s) && V.iconOnly),
+    children: [de(c) && /* @__PURE__ */ e("span", {
+      className: V.icon,
+      "aria-hidden": !0,
+      children: c
+    }), de(s) && /* @__PURE__ */ e("span", {
+      className: V.label,
+      children: s
+    })]
+  }, m))
+});
+export {
+  _a as a,
+  pa as c,
+  ba as i,
+  ma as l,
+  fa as n,
+  va as o,
+  ga as r,
+  ha as s,
+  Ca as t
+};