bj-web-components 0.2.27 → 0.2.28

package/dist/web/Dropdown/BDropdown.mjs

@@ -1,49 +1,56 @@
-import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import { useRef as M, useState as j } from "react";
-import { createPortal as Y } from "react-dom";
-import Z from "../BasicInput/BInput.mjs";
-import { BCheckBox as $ } from "../CheckBox/index.mjs";
-import V from "../Icon/Icon.mjs";
-import ee from "../OverlayScrollbar/BOverlayScrollbar.mjs";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import BInput from "../BasicInput/BInput.mjs";
+import { BCheckBox as CompoundBCheckBox } from "../CheckBox/index.mjs";
+import BuIcon from "../Icon/Icon.mjs";
+import BOverlayScrollbar from "../OverlayScrollbar/BOverlayScrollbar.mjs";
 /* empty css                       */
-import le from "../Tooltip/ContentTooltip.mjs";
+import BTooltip from "../Tooltip/ContentTooltip.mjs";
 import "../Tooltip/TooltipWrapper.mjs";
-import ne from "../ProductField/no_data_light.svg.mjs";
+import defaultEmptyImage from "../ProductField/no_data_light.svg.mjs";
 /* empty css                */
-function u(...n) {
-  return n.filter(Boolean).join(" ");
+function classNames(...values) {
+  return values.filter(Boolean).join(" ");
 }
-function te(n) {
-  return typeof n.label == "string" || typeof n.label == "number" ? String(n.label) : String(n.value);
+function getOptionText(option) {
+  return typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : String(option.value);
 }
-function R({ option: n }) {
-  const d = M(null), [p, i] = j(!1), [o, g] = j(null), b = typeof n.label == "string" || typeof n.label == "number", m = b ? String(n.label) : n.label;
-  function f() {
-    const a = d.current;
-    b && a && a.scrollWidth > a.clientWidth && (g(a.getBoundingClientRect()), i(!0));
+function TruncatedOptionLabel({ option }) {
+  const labelRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [anchorRect, setAnchorRect] = useState(null);
+  const isTextLabel = typeof option.label === "string" || typeof option.label === "number";
+  const label = isTextLabel ? String(option.label) : option.label;
+  function handleMouseEnter() {
+    const element = labelRef.current;
+    if (isTextLabel && element && element.scrollWidth > element.clientWidth) {
+      setAnchorRect(element.getBoundingClientRect());
+      setVisible(true);
+    }
   }
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
-      ref: d,
+      ref: labelRef,
       className: "bj-dropdown__option-label",
-      onMouseEnter: f,
-      onMouseLeave: () => i(!1),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: () => setVisible(false),
       children: [
-        m,
-        p && o && typeof document < "u" && Y(
-          /* @__PURE__ */ l(
+        label,
+        visible && anchorRect && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx(
             "span",
             {
               className: "bj-dropdown__option-tooltip-anchor",
               style: {
                 position: "fixed",
-                top: o.top,
-                left: o.left,
-                width: o.width,
-                height: o.height
+                top: anchorRect.top,
+                left: anchorRect.left,
+                width: anchorRect.width,
+                height: anchorRect.height
               },
-              children: /* @__PURE__ */ l(le, { className: "bj-dropdown__option-tooltip", content: m, placement: "top" })
+              children: /* @__PURE__ */ jsx(BTooltip, { className: "bj-dropdown__option-tooltip", content: label, placement: "top" })
             }
           ),
           document.body
@@ -52,109 +59,128 @@ function R({ option: n }) {
     }
   );
 }
-function W({ option: n, doubleLine: d }) {
-  return d ? /* @__PURE__ */ r("span", { className: "bj-dropdown__option-content", children: [
-    /* @__PURE__ */ l(R, { option: n }),
-    n.description !== void 0 && /* @__PURE__ */ l("span", { className: "bj-dropdown__option-description", children: n.description })
-  ] }) : /* @__PURE__ */ l(R, { option: n });
+function DefaultOptionContent({ option, doubleLine }) {
+  if (!doubleLine) return /* @__PURE__ */ jsx(TruncatedOptionLabel, { option });
+  return /* @__PURE__ */ jsxs("span", { className: "bj-dropdown__option-content", children: [
+    /* @__PURE__ */ jsx(TruncatedOptionLabel, { option }),
+    option.description !== void 0 && /* @__PURE__ */ jsx("span", { className: "bj-dropdown__option-description", children: option.description })
+  ] });
 }
-function _e({
-  className: n,
-  style: d,
-  options: p,
-  value: i,
-  defaultValue: o = [],
-  multiple: g = !1,
-  optionMode: b = "single-line",
-  searchable: m = !1,
-  searchValue: f,
-  searchPlaceholder: a = "搜索",
-  onSearch: _,
-  filterOption: y = !0,
-  emptyText: z,
-  labels: N,
-  t: x = (w) => w,
-  optionRender: h,
-  onChange: B,
-  footer: L = !0,
-  showReset: A = !0,
-  showConfirm: G = !0,
-  resetText: P = x("重置"),
-  confirmText: q = x("确定"),
-  onReset: k,
-  onConfirm: C
+function BDropdown({
+  className,
+  style,
+  options,
+  value,
+  defaultValue = [],
+  multiple = false,
+  optionMode = "single-line",
+  searchable = false,
+  searchValue,
+  searchPlaceholder = "搜索",
+  onSearch,
+  filterOption = true,
+  emptyText,
+  labels,
+  t = (text) => text,
+  optionRender,
+  onChange,
+  footer = true,
+  showReset = true,
+  showConfirm = true,
+  resetText = t("重置"),
+  confirmText = t("确定"),
+  onReset,
+  onConfirm
 }) {
-  const w = M(null), S = M(null), [F, E] = j(o), [H, J] = j(""), t = i ?? F, s = g === !0, c = b === "double-line", v = f ?? H, K = z ?? (N == null ? void 0 : N.emptyText) ?? x("暂无结果"), I = !_ && y !== !1 && v ? p.filter((e) => typeof y == "function" ? y(v, e) : te(e).toLocaleLowerCase().includes(v.toLocaleLowerCase())) : p;
-  function Q(e, T) {
-    i === void 0 && E(e), B == null || B(e, T);
+  const dropdownRef = useRef(null);
+  const optionsRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalSearchValue, setInternalSearchValue] = useState("");
+  const selectedValue = value ?? internalValue;
+  const isMultiple = multiple === true;
+  const isDoubleLine = optionMode === "double-line";
+  const currentSearchValue = searchValue ?? internalSearchValue;
+  const resolvedEmptyText = emptyText ?? (labels == null ? void 0 : labels.emptyText) ?? t("暂无结果");
+  const visibleOptions = !onSearch && filterOption !== false && currentSearchValue ? options.filter((option) => typeof filterOption === "function" ? filterOption(currentSearchValue, option) : getOptionText(option).toLocaleLowerCase().includes(currentSearchValue.toLocaleLowerCase())) : options;
+  function updateValue(nextValue, option) {
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onChange == null ? void 0 : onChange(nextValue, option);
   }
-  function O(e) {
-    f === void 0 && J(e), _ == null || _(e);
+  function handleSearch(nextSearchValue) {
+    if (searchValue === void 0) {
+      setInternalSearchValue(nextSearchValue);
+    }
+    onSearch == null ? void 0 : onSearch(nextSearchValue);
   }
-  function D(e) {
-    if (e.disabled) return;
-    const T = s ? t.includes(e.value) ? t.filter((X) => X !== e.value) : [...t, e.value] : [e.value];
-    Q(T, e);
+  function handleOptionChange(option) {
+    if (option.disabled) return;
+    const nextValue = isMultiple ? selectedValue.includes(option.value) ? selectedValue.filter((item) => item !== option.value) : [...selectedValue, option.value] : [option.value];
+    updateValue(nextValue, option);
   }
-  function U() {
-    i === void 0 && E([]), k == null || k();
+  function handleReset() {
+    if (value === void 0) {
+      setInternalValue([]);
+    }
+    onReset == null ? void 0 : onReset();
   }
-  return /* @__PURE__ */ r("div", { ref: w, className: u("bj-dropdown", c && "bj-dropdown--double-line", !s && "bj-dropdown--single", n), role: "dialog", style: d, children: [
-    m && /* @__PURE__ */ l("div", { className: "bj-dropdown__search", children: /* @__PURE__ */ l(
-      Z,
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: classNames("bj-dropdown", isDoubleLine && "bj-dropdown--double-line", !isMultiple && "bj-dropdown--single", className), role: "dialog", style, children: [
+    searchable && /* @__PURE__ */ jsx("div", { className: "bj-dropdown__search", children: /* @__PURE__ */ jsx(
+      BInput,
       {
         "aria-label": "搜索选项",
-        allowClear: { clearIcon: /* @__PURE__ */ l(V, { className: "bj-dropdown__search-clear-icon", type: "icon-a-guanbixi" }) },
-        onChange: (e) => O(e.target.value),
-        onClear: () => O(""),
-        placeholder: a,
-        prefix: /* @__PURE__ */ l(V, { type: "icon-a-sousuoxi" }),
+        allowClear: { clearIcon: /* @__PURE__ */ jsx(BuIcon, { className: "bj-dropdown__search-clear-icon", type: "icon-a-guanbixi" }) },
+        onChange: (event) => handleSearch(event.target.value),
+        onClear: () => handleSearch(""),
+        placeholder: searchPlaceholder,
+        prefix: /* @__PURE__ */ jsx(BuIcon, { type: "icon-a-sousuoxi" }),
         inputMode: "search",
         role: "searchbox",
         type: "text",
-        value: v
+        value: currentSearchValue
       }
     ) }),
-    /* @__PURE__ */ r("div", { ref: S, className: u("bj-dropdown__options", "bj-overlay-scrollbar-hidden", I.length === 0 && "bj-dropdown__options--empty", !s && "bj-dropdown__options--single"), children: [
-      I.map((e) => s ? /* @__PURE__ */ l(
-        $,
+    /* @__PURE__ */ jsxs("div", { ref: optionsRef, className: classNames("bj-dropdown__options", "bj-overlay-scrollbar-hidden", visibleOptions.length === 0 && "bj-dropdown__options--empty", !isMultiple && "bj-dropdown__options--single"), children: [
+      visibleOptions.map((option) => isMultiple ? /* @__PURE__ */ jsx(
+        CompoundBCheckBox,
         {
-          checked: t.includes(e.value),
-          className: u("bj-dropdown__option", c && e.description !== void 0 && "bj-dropdown__option--double-line"),
-          disabled: e.disabled,
-          onChange: () => D(e),
-          skipGroup: !0,
+          checked: selectedValue.includes(option.value),
+          className: classNames("bj-dropdown__option", isDoubleLine && option.description !== void 0 && "bj-dropdown__option--double-line"),
+          disabled: option.disabled,
+          onChange: () => handleOptionChange(option),
+          skipGroup: true,
           variant: "white",
-          children: h ? h(e) : /* @__PURE__ */ l(W, { doubleLine: c && e.description !== void 0, option: e })
+          children: optionRender ? optionRender(option) : /* @__PURE__ */ jsx(DefaultOptionContent, { doubleLine: isDoubleLine && option.description !== void 0, option })
         },
-        String(e.value)
-      ) : /* @__PURE__ */ r(
+        String(option.value)
+      ) : /* @__PURE__ */ jsxs(
         "button",
         {
-          "aria-pressed": t.includes(e.value),
-          className: u("bj-dropdown__option", "bj-dropdown__option--single", c && e.description !== void 0 && "bj-dropdown__option--double-line", t.includes(e.value) && "bj-dropdown__option--selected"),
-          disabled: e.disabled,
-          onClick: () => D(e),
+          "aria-pressed": selectedValue.includes(option.value),
+          className: classNames("bj-dropdown__option", "bj-dropdown__option--single", isDoubleLine && option.description !== void 0 && "bj-dropdown__option--double-line", selectedValue.includes(option.value) && "bj-dropdown__option--selected"),
+          disabled: option.disabled,
+          onClick: () => handleOptionChange(option),
           type: "button",
           children: [
-            h ? /* @__PURE__ */ l("span", { className: "bj-dropdown__option-label", children: h(e) }) : /* @__PURE__ */ l(W, { doubleLine: c && e.description !== void 0, option: e }),
-            t.includes(e.value) && /* @__PURE__ */ l(V, { className: "bj-dropdown__option-icon", type: "icon-a-dagouxi" })
+            optionRender ? /* @__PURE__ */ jsx("span", { className: "bj-dropdown__option-label", children: optionRender(option) }) : /* @__PURE__ */ jsx(DefaultOptionContent, { doubleLine: isDoubleLine && option.description !== void 0, option }),
+            selectedValue.includes(option.value) && /* @__PURE__ */ jsx(BuIcon, { className: "bj-dropdown__option-icon", type: "icon-a-dagouxi" })
           ]
         },
-        String(e.value)
+        String(option.value)
       )),
-      I.length === 0 && /* @__PURE__ */ r("div", { className: "bj-dropdown__empty", children: [
-        /* @__PURE__ */ l("img", { alt: "", className: "bj-dropdown__empty-image", src: ne }),
-        /* @__PURE__ */ l("span", { className: "bj-dropdown__empty-text", children: K })
+      visibleOptions.length === 0 && /* @__PURE__ */ jsxs("div", { className: "bj-dropdown__empty", children: [
+        /* @__PURE__ */ jsx("img", { alt: "", className: "bj-dropdown__empty-image", src: defaultEmptyImage }),
+        /* @__PURE__ */ jsx("span", { className: "bj-dropdown__empty-text", children: resolvedEmptyText })
       ] })
     ] }),
-    /* @__PURE__ */ l(ee, { containerRef: w, gap: 2, size: 2, targetRef: S }),
-    L !== !1 && (L !== !0 ? L : /* @__PURE__ */ r("div", { className: u("bj-dropdown__actions", !s && "bj-dropdown__actions--single"), children: [
-      A && /* @__PURE__ */ l("button", { onClick: U, type: "button", children: P }),
-      s && G && /* @__PURE__ */ l("button", { onClick: () => C == null ? void 0 : C(t), type: "button", children: q })
+    /* @__PURE__ */ jsx(BOverlayScrollbar, { containerRef: dropdownRef, gap: 2, size: 2, targetRef: optionsRef }),
+    footer !== false && (footer !== true ? footer : /* @__PURE__ */ jsxs("div", { className: classNames("bj-dropdown__actions", !isMultiple && "bj-dropdown__actions--single"), children: [
+      showReset && /* @__PURE__ */ jsx("button", { onClick: handleReset, type: "button", children: resetText }),
+      isMultiple && showConfirm && /* @__PURE__ */ jsx("button", { onClick: () => onConfirm == null ? void 0 : onConfirm(selectedValue), type: "button", children: confirmText })
     ] }))
   ] });
 }
 export {
-  _e as BDropdown
+  BDropdown
 };

package/dist/web/EmptyInputBox/EmptyInputBox.js

@@ -1 +1,77 @@
-"use strict";const t=require("react/jsx-runtime"),h=require("react");;/* empty css                    */function v(){return t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z",fill:"currentColor"})})}const N=h.forwardRef(function({mode:l="single",activeLang:c="zh",onLangChange:e,value:n="",onChange:u,placeholder:_,maxLength:x,error:d=!1,disabled:o,onDelete:r,labels:i,id:j,className:C,style:m},V){const p=(i==null?void 0:i.zh)??"中文",f=(i==null?void 0:i.en)??"EN",s=l==="bilingual",b=!!r,H=["bu-eib__box",s&&b&&"bu-eib__box--actions-both",s&&!b&&"bu-eib__box--actions-toggle",!s&&b&&"bu-eib__box--actions-delete",d&&"bu-eib__box--error",o&&"bu-eib__box--disabled"].filter(Boolean).join(" ");return t.jsx("div",{className:["bu-eib",C].filter(Boolean).join(" "),style:m,children:t.jsxs("div",{className:H,children:[t.jsx("input",{ref:V,id:j,className:"bu-eib__field",value:n,onChange:a=>u==null?void 0:u(a.target.value),placeholder:_,maxLength:x,disabled:o}),(s||b)&&t.jsxs("div",{className:"bu-eib__actions",children:[s&&t.jsxs("div",{className:"bu-eib__lang-toggle",children:[t.jsx("button",{type:"button",className:`bu-eib__lang-btn${c==="zh"?" bu-eib__lang-btn--active":""}`,onClick:()=>e==null?void 0:e("zh"),children:p}),t.jsx("button",{type:"button",className:`bu-eib__lang-btn${c==="en"?" bu-eib__lang-btn--active":""}`,onClick:()=>e==null?void 0:e("en"),children:f})]}),b&&t.jsx("button",{type:"button",className:"bu-eib__delete",onClick:r,children:t.jsx(v,{})})]})]})})});module.exports=N;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css                    */
+function DeleteIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+}
+const BuEmptyInputBox = react.forwardRef(
+  function BuEmptyInputBox2({
+    mode = "single",
+    activeLang = "zh",
+    onLangChange,
+    value = "",
+    onChange,
+    placeholder,
+    maxLength,
+    error = false,
+    disabled,
+    onDelete,
+    labels,
+    id,
+    className,
+    style
+  }, ref) {
+    const zhLabel = (labels == null ? void 0 : labels.zh) ?? "中文";
+    const enLabel = (labels == null ? void 0 : labels.en) ?? "EN";
+    const hasBilingual = mode === "bilingual";
+    const hasDelete = !!onDelete;
+    const boxCls = [
+      "bu-eib__box",
+      hasBilingual && hasDelete && "bu-eib__box--actions-both",
+      hasBilingual && !hasDelete && "bu-eib__box--actions-toggle",
+      !hasBilingual && hasDelete && "bu-eib__box--actions-delete",
+      error && "bu-eib__box--error",
+      disabled && "bu-eib__box--disabled"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["bu-eib", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: boxCls, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          id,
+          className: "bu-eib__field",
+          value,
+          onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+          placeholder,
+          maxLength,
+          disabled
+        }
+      ),
+      (hasBilingual || hasDelete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-eib__actions", children: [
+        hasBilingual && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-eib__lang-toggle", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: `bu-eib__lang-btn${activeLang === "zh" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+              children: zhLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: `bu-eib__lang-btn${activeLang === "en" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+              children: enLabel
+            }
+          )
+        ] }),
+        hasDelete && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-eib__delete", onClick: onDelete, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) })
+      ] })
+    ] }) });
+  }
+);
+module.exports = BuEmptyInputBox;

package/dist/web/EmptyInputBox/EmptyInputBox.mjs

@@ -1,74 +1,78 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 /* empty css                    */
-function B() {
-  return /* @__PURE__ */ t("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+function DeleteIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
 }
-const Z = N(
-  function({
-    mode: _ = "single",
-    activeLang: l = "zh",
-    onLangChange: i,
-    value: n = "",
-    onChange: u,
-    placeholder: d,
-    maxLength: m,
-    error: p = !1,
-    disabled: r,
-    onDelete: s,
-    labels: e,
-    id: x,
-    className: f,
-    style: C
-  }, V) {
-    const a = (e == null ? void 0 : e.zh) ?? "中文", H = (e == null ? void 0 : e.en) ?? "EN", b = _ === "bilingual", o = !!s, h = [
+const BuEmptyInputBox = forwardRef(
+  function BuEmptyInputBox2({
+    mode = "single",
+    activeLang = "zh",
+    onLangChange,
+    value = "",
+    onChange,
+    placeholder,
+    maxLength,
+    error = false,
+    disabled,
+    onDelete,
+    labels,
+    id,
+    className,
+    style
+  }, ref) {
+    const zhLabel = (labels == null ? void 0 : labels.zh) ?? "中文";
+    const enLabel = (labels == null ? void 0 : labels.en) ?? "EN";
+    const hasBilingual = mode === "bilingual";
+    const hasDelete = !!onDelete;
+    const boxCls = [
       "bu-eib__box",
-      b && o && "bu-eib__box--actions-both",
-      b && !o && "bu-eib__box--actions-toggle",
-      !b && o && "bu-eib__box--actions-delete",
-      p && "bu-eib__box--error",
-      r && "bu-eib__box--disabled"
+      hasBilingual && hasDelete && "bu-eib__box--actions-both",
+      hasBilingual && !hasDelete && "bu-eib__box--actions-toggle",
+      !hasBilingual && hasDelete && "bu-eib__box--actions-delete",
+      error && "bu-eib__box--error",
+      disabled && "bu-eib__box--disabled"
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ t("div", { className: ["bu-eib", f].filter(Boolean).join(" "), style: C, children: /* @__PURE__ */ c("div", { className: h, children: [
-      /* @__PURE__ */ t(
+    return /* @__PURE__ */ jsx("div", { className: ["bu-eib", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxs("div", { className: boxCls, children: [
+      /* @__PURE__ */ jsx(
         "input",
         {
-          ref: V,
-          id: x,
+          ref,
+          id,
           className: "bu-eib__field",
-          value: n,
-          onChange: (v) => u == null ? void 0 : u(v.target.value),
-          placeholder: d,
-          maxLength: m,
-          disabled: r
+          value,
+          onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+          placeholder,
+          maxLength,
+          disabled
         }
       ),
-      (b || o) && /* @__PURE__ */ c("div", { className: "bu-eib__actions", children: [
-        b && /* @__PURE__ */ c("div", { className: "bu-eib__lang-toggle", children: [
-          /* @__PURE__ */ t(
+      (hasBilingual || hasDelete) && /* @__PURE__ */ jsxs("div", { className: "bu-eib__actions", children: [
+        hasBilingual && /* @__PURE__ */ jsxs("div", { className: "bu-eib__lang-toggle", children: [
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: `bu-eib__lang-btn${l === "zh" ? " bu-eib__lang-btn--active" : ""}`,
-              onClick: () => i == null ? void 0 : i("zh"),
-              children: a
+              className: `bu-eib__lang-btn${activeLang === "zh" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+              children: zhLabel
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: `bu-eib__lang-btn${l === "en" ? " bu-eib__lang-btn--active" : ""}`,
-              onClick: () => i == null ? void 0 : i("en"),
-              children: H
+              className: `bu-eib__lang-btn${activeLang === "en" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+              children: enLabel
             }
           )
         ] }),
-        o && /* @__PURE__ */ t("button", { type: "button", className: "bu-eib__delete", onClick: s, children: /* @__PURE__ */ t(B, {}) })
+        hasDelete && /* @__PURE__ */ jsx("button", { type: "button", className: "bu-eib__delete", onClick: onDelete, children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
       ] })
     ] }) });
   }
 );
 export {
-  Z as default
+  BuEmptyInputBox as default
 };