bj-web-components 0.2.27 → 0.2.28

package/dist/web/Modal/Modal.js

@@ -1 +1,84 @@
-"use strict";const l=require("react/jsx-runtime");;/* empty css            */function w({open:u=!1,title:r="标题",mode:o="standard",children:_,okText:b="确认",cancelText:m="取消",onOk:x,onCancel:j,onClose:i,activeLang:n="zh",onLangChange:s,labels:t,hint:c,confirmLoading:e=!1,width:a,className:N,style:d}){const h=(t==null?void 0:t.zh)??"中文",p=(t==null?void 0:t.en)??"EN";if(!u)return null;const v=o==="bilingual",k=o==="single",y=a!=null?{width:a,...d}:d;return l.jsx("div",{className:["bu-modal__overlay",N].filter(Boolean).join(" "),onClick:i,children:l.jsxs("div",{className:"bu-modal__container",style:y,onClick:f=>f.stopPropagation(),children:[l.jsxs("div",{className:"bu-modal__header",children:[l.jsx("p",{className:"bu-modal__title",children:r}),v&&l.jsxs("div",{className:"bu-modal__lang-toggle",children:[l.jsx("button",{type:"button",className:`bu-modal__lang-btn${n==="zh"?" bu-modal__lang-btn--active":""}`,onClick:()=>s==null?void 0:s("zh"),children:h}),l.jsx("button",{type:"button",className:`bu-modal__lang-btn${n==="en"?" bu-modal__lang-btn--active":""}`,onClick:()=>s==null?void 0:s("en"),children:p})]}),l.jsx("button",{type:"button",className:"bu-modal__close",onClick:i,children:l.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{d:"M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z",fill:"currentColor"})})})]}),l.jsx("div",{className:"bu-modal__body",children:_}),l.jsxs("div",{className:"bu-modal__footer",children:[c&&l.jsx("p",{className:"bu-modal__hint",children:c}),l.jsxs("div",{className:"bu-modal__btn-row",children:[!k&&l.jsx("button",{type:"button",className:"bu-modal__btn-cancel",onClick:j??i,children:m}),l.jsxs("button",{type:"button",className:["bu-modal__btn-ok",e?"bu-modal__btn-ok--loading":""].filter(Boolean).join(" "),disabled:e,onClick:e?void 0:x,children:[e&&l.jsx("span",{className:"bu-modal__btn-ok-spinner"}),b]})]})]})]})})}module.exports=w;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css            */
+function BuModal({
+  open = false,
+  title = "标题",
+  mode = "standard",
+  children,
+  okText = "确认",
+  cancelText = "取消",
+  onOk,
+  onCancel,
+  onClose,
+  activeLang = "zh",
+  onLangChange,
+  labels,
+  hint,
+  confirmLoading = false,
+  width,
+  className,
+  style
+}) {
+  const zhLabel = (labels == null ? void 0 : labels.zh) ?? "中文";
+  const enLabel = (labels == null ? void 0 : labels.en) ?? "EN";
+  if (!open) return null;
+  const isBilingual = mode === "bilingual";
+  const isSingle = mode === "single";
+  const containerStyle = width != null ? { width, ...style } : style;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["bu-modal__overlay", className].filter(Boolean).join(" "), onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "bu-modal__container",
+      style: containerStyle,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-modal__header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bu-modal__title", children: title }),
+          isBilingual && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-modal__lang-toggle", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `bu-modal__lang-btn${activeLang === "zh" ? " bu-modal__lang-btn--active" : ""}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+                children: zhLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `bu-modal__lang-btn${activeLang === "en" ? " bu-modal__lang-btn--active" : ""}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+                children: enLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-modal__close", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z", fill: "currentColor" }) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-modal__body", children }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-modal__footer", children: [
+          hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bu-modal__hint", children: hint }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-modal__btn-row", children: [
+            !isSingle && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-modal__btn-cancel", onClick: onCancel ?? onClose, children: cancelText }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: ["bu-modal__btn-ok", confirmLoading ? "bu-modal__btn-ok--loading" : ""].filter(Boolean).join(" "),
+                disabled: confirmLoading,
+                onClick: confirmLoading ? void 0 : onOk,
+                children: [
+                  confirmLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-modal__btn-ok-spinner" }),
+                  okText
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+module.exports = BuModal;

package/dist/web/Modal/Modal.mjs

@@ -1,73 +1,76 @@
-import { jsx as l, jsxs as i } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 /* empty css            */
-function j({
-  open: _ = !1,
-  title: r = "标题",
-  mode: n = "standard",
-  children: b,
-  okText: m = "确认",
-  cancelText: p = "取消",
-  onOk: N,
-  onCancel: h,
-  onClose: a,
-  activeLang: c = "zh",
-  onLangChange: t,
-  labels: o,
-  hint: d,
-  confirmLoading: e = !1,
-  width: s,
-  className: v,
-  style: u
+function BuModal({
+  open = false,
+  title = "标题",
+  mode = "standard",
+  children,
+  okText = "确认",
+  cancelText = "取消",
+  onOk,
+  onCancel,
+  onClose,
+  activeLang = "zh",
+  onLangChange,
+  labels,
+  hint,
+  confirmLoading = false,
+  width,
+  className,
+  style
 }) {
-  const k = (o == null ? void 0 : o.zh) ?? "中文", f = (o == null ? void 0 : o.en) ?? "EN";
-  if (!_) return null;
-  const y = n === "bilingual", w = n === "single", x = s != null ? { width: s, ...u } : u;
-  return /* @__PURE__ */ l("div", { className: ["bu-modal__overlay", v].filter(Boolean).join(" "), onClick: a, children: /* @__PURE__ */ i(
+  const zhLabel = (labels == null ? void 0 : labels.zh) ?? "中文";
+  const enLabel = (labels == null ? void 0 : labels.en) ?? "EN";
+  if (!open) return null;
+  const isBilingual = mode === "bilingual";
+  const isSingle = mode === "single";
+  const containerStyle = width != null ? { width, ...style } : style;
+  return /* @__PURE__ */ jsx("div", { className: ["bu-modal__overlay", className].filter(Boolean).join(" "), onClick: onClose, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: "bu-modal__container",
-      style: x,
-      onClick: (z) => z.stopPropagation(),
+      style: containerStyle,
+      onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ i("div", { className: "bu-modal__header", children: [
-          /* @__PURE__ */ l("p", { className: "bu-modal__title", children: r }),
-          y && /* @__PURE__ */ i("div", { className: "bu-modal__lang-toggle", children: [
-            /* @__PURE__ */ l(
+        /* @__PURE__ */ jsxs("div", { className: "bu-modal__header", children: [
+          /* @__PURE__ */ jsx("p", { className: "bu-modal__title", children: title }),
+          isBilingual && /* @__PURE__ */ jsxs("div", { className: "bu-modal__lang-toggle", children: [
+            /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: `bu-modal__lang-btn${c === "zh" ? " bu-modal__lang-btn--active" : ""}`,
-                onClick: () => t == null ? void 0 : t("zh"),
-                children: k
+                className: `bu-modal__lang-btn${activeLang === "zh" ? " bu-modal__lang-btn--active" : ""}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+                children: zhLabel
               }
             ),
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: `bu-modal__lang-btn${c === "en" ? " bu-modal__lang-btn--active" : ""}`,
-                onClick: () => t == null ? void 0 : t("en"),
-                children: f
+                className: `bu-modal__lang-btn${activeLang === "en" ? " bu-modal__lang-btn--active" : ""}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+                children: enLabel
               }
             )
           ] }),
-          /* @__PURE__ */ l("button", { type: "button", className: "bu-modal__close", onClick: a, children: /* @__PURE__ */ l("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ l("path", { d: "M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z", fill: "currentColor" }) }) })
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bu-modal__close", onClick: onClose, children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z", fill: "currentColor" }) }) })
         ] }),
-        /* @__PURE__ */ l("div", { className: "bu-modal__body", children: b }),
-        /* @__PURE__ */ i("div", { className: "bu-modal__footer", children: [
-          d && /* @__PURE__ */ l("p", { className: "bu-modal__hint", children: d }),
-          /* @__PURE__ */ i("div", { className: "bu-modal__btn-row", children: [
-            !w && /* @__PURE__ */ l("button", { type: "button", className: "bu-modal__btn-cancel", onClick: h ?? a, children: p }),
-            /* @__PURE__ */ i(
+        /* @__PURE__ */ jsx("div", { className: "bu-modal__body", children }),
+        /* @__PURE__ */ jsxs("div", { className: "bu-modal__footer", children: [
+          hint && /* @__PURE__ */ jsx("p", { className: "bu-modal__hint", children: hint }),
+          /* @__PURE__ */ jsxs("div", { className: "bu-modal__btn-row", children: [
+            !isSingle && /* @__PURE__ */ jsx("button", { type: "button", className: "bu-modal__btn-cancel", onClick: onCancel ?? onClose, children: cancelText }),
+            /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
-                className: ["bu-modal__btn-ok", e ? "bu-modal__btn-ok--loading" : ""].filter(Boolean).join(" "),
-                disabled: e,
-                onClick: e ? void 0 : N,
+                className: ["bu-modal__btn-ok", confirmLoading ? "bu-modal__btn-ok--loading" : ""].filter(Boolean).join(" "),
+                disabled: confirmLoading,
+                onClick: confirmLoading ? void 0 : onOk,
                 children: [
-                  e && /* @__PURE__ */ l("span", { className: "bu-modal__btn-ok-spinner" }),
-                  m
+                  confirmLoading && /* @__PURE__ */ jsx("span", { className: "bu-modal__btn-ok-spinner" }),
+                  okText
                 ]
               }
             )
@@ -78,5 +81,5 @@ function j({
   ) });
 }
 export {
-  j as default
+  BuModal as default
 };

package/dist/web/OverlayScrollbar/BOverlayScrollbar.js

@@ -1 +1,232 @@
-"use strict";const Y=require("react/jsx-runtime"),s=require("react");;/* empty css                        */const $=24,re=800,H={visible:!1,offset:0,length:0,cross:0};function se({containerRef:_,targetRef:j,selector:U,direction:S="vertical",size:E=4,gap:w=0,background:F,showOnHover:l=!0,showOnScroll:Z=!0,hoverSelector:A,horizontalInsetStart:p=0,horizontalInsetEnd:D=0,horizontalThumbLength:R,className:te=""}){const P=S==="vertical"||S==="both",V=S==="horizontal"||S==="both",m=s.useRef(null),f=s.useRef(null),y=s.useRef(null),L=s.useRef(!1),M=s.useRef(!1),[k,G]=s.useState(H),[B,J]=s.useState(H),[ne,v]=s.useState(!l);s.useEffect(()=>{l||v(!0)},[l]);const g=s.useCallback(()=>{const e=m.current,n=_.current;if(!e||!n)return;const{scrollTop:t,scrollHeight:o,clientHeight:c,scrollLeft:d,scrollWidth:u,clientWidth:i}=e,h=e.getBoundingClientRect(),r=n.getBoundingClientRect(),b=h.top-r.top,x=h.left-r.left;if(P){const C=o-c;if(C<=1)G(a=>a.visible?H:a);else{const a=Math.max(c/o*c,$);G({visible:!0,offset:b+t/C*(c-a),length:a,cross:x+i-E-w})}}if(V){const C=u-i,a=Math.max(i-p-D,0);if(C<=1||a<=0)J(W=>W.visible?H:W);else{const W=i/u*a,ee=Math.min(a,Math.max(R??W,$));J({visible:!0,offset:x+p+d/C*(a-ee),length:ee,cross:b+c-E-w})}}},[_,w,D,p,R,V,P,E]),q=s.useCallback(()=>{if(!l)return;const e=L.current||M.current||f.current;if(!Z&&!e){v(!1);return}v(!0),y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{!f.current&&!L.current&&!M.current&&v(!1)},re)},[l,Z]),X=s.useCallback(()=>{g(),q()},[g,q]);s.useEffect(()=>{const e=_.current;if(!e)return;window.getComputedStyle(e).position==="static"&&(e.style.position="relative");let n,t=null;const o=()=>{const r=(j==null?void 0:j.current)??(U?e.querySelector(U):e.firstElementChild);if(!r||r===m.current)return;n==null||n(),m.current=r,r.addEventListener("scroll",X,{passive:!0});const b=new ResizeObserver(g);b.observe(r),r.firstElementChild&&b.observe(r.firstElementChild),n=()=>{r.removeEventListener("scroll",X),b.disconnect()},g()},c=()=>{L.current=!0,l&&v(!0)},d=()=>{L.current=!1,l&&!M.current&&!f.current&&v(!1)},u=()=>{t==null||t.removeEventListener("mouseenter",c),t==null||t.removeEventListener("mouseleave",d),t=null,L.current=!1},i=()=>{const r=A?e.querySelector(A):e;!r||r===t||(u(),t=r,t.addEventListener("mouseenter",c),t.addEventListener("mouseleave",d))};o(),i();const h=new MutationObserver(()=>{(!m.current||!e.contains(m.current))&&o(),t&&!e.contains(t)&&u(),t||i(),g()});return h.observe(e,{childList:!0,subtree:!0}),()=>{h.disconnect(),n==null||n(),u(),m.current=null,y.current&&clearTimeout(y.current)}},[_,A,X,U,l,g,j]);const T=s.useCallback(e=>{const n=m.current,t=f.current;if(!n||!t)return;const o=t.axis==="vertical",c=o?n.clientHeight:n.clientWidth,d=o?n.scrollHeight:n.scrollWidth,u=o?c:Math.max(c-p-D,0),i=c/d*u,h=Math.min(u,Math.max(o?i:R??i,$)),r=u-h;if(r<=0)return;const b=(o?e.clientY:e.clientX)-t.client,x=t.scroll+b*((d-c)/r);o?n.scrollTop=x:n.scrollLeft=x},[D,p,R]),N=s.useCallback(()=>{const e=!!f.current;f.current=null,document.body.style.userSelect="",document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",N),e&&q()},[T,q]),K=e=>n=>{const t=m.current;t&&(n.preventDefault(),n.stopPropagation(),f.current={axis:e,client:e==="vertical"?n.clientY:n.clientX,scroll:e==="vertical"?t.scrollTop:t.scrollLeft},document.body.style.userSelect="none",document.addEventListener("mousemove",T),document.addEventListener("mouseup",N))};s.useEffect(()=>()=>{f.current=null,document.body.style.userSelect="",document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",N)},[N,T]);const Q=["bj-overlay-scrollbar__thumb",ne&&"bj-overlay-scrollbar__thumb--active",te].filter(Boolean).join(" "),I=F?{"--bj-overlay-scrollbar-bg":F}:void 0,z=()=>{M.current=!0,l&&v(!0)},O=()=>{M.current=!1,l&&!L.current&&!f.current&&v(!1)};return Y.jsxs(Y.Fragment,{children:[P&&k.visible&&Y.jsx("div",{className:`${Q} bj-overlay-scrollbar__thumb--vertical`,onMouseDown:K("vertical"),onMouseEnter:z,onMouseLeave:O,style:{...I,top:k.offset,left:k.cross,height:k.length,width:E}}),V&&B.visible&&Y.jsx("div",{className:`${Q} bj-overlay-scrollbar__thumb--horizontal`,onMouseDown:K("horizontal"),onMouseEnter:z,onMouseLeave:O,style:{...I,left:B.offset,top:B.cross,width:B.length,height:E}})]})}module.exports=se;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css                        */
+const MIN_THUMB_SIZE = 24;
+const HIDE_DELAY = 800;
+const EMPTY_THUMB = { visible: false, offset: 0, length: 0, cross: 0 };
+function BOverlayScrollbar({
+  containerRef,
+  targetRef,
+  selector,
+  direction = "vertical",
+  size = 4,
+  gap = 0,
+  background,
+  showOnHover = true,
+  showOnScroll = true,
+  hoverSelector,
+  horizontalInsetStart = 0,
+  horizontalInsetEnd = 0,
+  horizontalThumbLength,
+  className = ""
+}) {
+  const showVertical = direction === "vertical" || direction === "both";
+  const showHorizontal = direction === "horizontal" || direction === "both";
+  const scrollElementRef = react.useRef(null);
+  const dragRef = react.useRef(null);
+  const hideTimerRef = react.useRef(null);
+  const hoverTargetRef = react.useRef(false);
+  const thumbHoverRef = react.useRef(false);
+  const [verticalThumb, setVerticalThumb] = react.useState(EMPTY_THUMB);
+  const [horizontalThumb, setHorizontalThumb] = react.useState(EMPTY_THUMB);
+  const [active, setActive] = react.useState(!showOnHover);
+  react.useEffect(() => {
+    if (!showOnHover) setActive(true);
+  }, [showOnHover]);
+  const sync = react.useCallback(() => {
+    const element = scrollElementRef.current;
+    const container = containerRef.current;
+    if (!element || !container) return;
+    const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = element;
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const offsetTop = elementRect.top - containerRect.top;
+    const offsetLeft = elementRect.left - containerRect.left;
+    if (showVertical) {
+      const maxScroll = scrollHeight - clientHeight;
+      if (maxScroll <= 1) {
+        setVerticalThumb((previous) => previous.visible ? EMPTY_THUMB : previous);
+      } else {
+        const length = Math.max(clientHeight / scrollHeight * clientHeight, MIN_THUMB_SIZE);
+        setVerticalThumb({
+          visible: true,
+          offset: offsetTop + scrollTop / maxScroll * (clientHeight - length),
+          length,
+          cross: offsetLeft + clientWidth - size - gap
+        });
+      }
+    }
+    if (showHorizontal) {
+      const maxScroll = scrollWidth - clientWidth;
+      const trackLength = Math.max(clientWidth - horizontalInsetStart - horizontalInsetEnd, 0);
+      if (maxScroll <= 1 || trackLength <= 0) {
+        setHorizontalThumb((previous) => previous.visible ? EMPTY_THUMB : previous);
+      } else {
+        const proportionalLength = clientWidth / scrollWidth * trackLength;
+        const length = Math.min(trackLength, Math.max(horizontalThumbLength ?? proportionalLength, MIN_THUMB_SIZE));
+        setHorizontalThumb({
+          visible: true,
+          offset: offsetLeft + horizontalInsetStart + scrollLeft / maxScroll * (trackLength - length),
+          length,
+          cross: offsetTop + clientHeight - size - gap
+        });
+      }
+    }
+  }, [containerRef, gap, horizontalInsetEnd, horizontalInsetStart, horizontalThumbLength, showHorizontal, showVertical, size]);
+  const wakeUp = react.useCallback(() => {
+    if (!showOnHover) return;
+    const interacting = hoverTargetRef.current || thumbHoverRef.current || dragRef.current;
+    if (!showOnScroll && !interacting) {
+      setActive(false);
+      return;
+    }
+    setActive(true);
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      if (!dragRef.current && !hoverTargetRef.current && !thumbHoverRef.current) setActive(false);
+    }, HIDE_DELAY);
+  }, [showOnHover, showOnScroll]);
+  const onScroll = react.useCallback(() => {
+    sync();
+    wakeUp();
+  }, [sync, wakeUp]);
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (window.getComputedStyle(container).position === "static") container.style.position = "relative";
+    let detach;
+    let hoverElement = null;
+    const attach = () => {
+      const element = (targetRef == null ? void 0 : targetRef.current) ?? (selector ? container.querySelector(selector) : container.firstElementChild);
+      if (!element || element === scrollElementRef.current) return;
+      detach == null ? void 0 : detach();
+      scrollElementRef.current = element;
+      element.addEventListener("scroll", onScroll, { passive: true });
+      const observer = new ResizeObserver(sync);
+      observer.observe(element);
+      if (element.firstElementChild) observer.observe(element.firstElementChild);
+      detach = () => {
+        element.removeEventListener("scroll", onScroll);
+        observer.disconnect();
+      };
+      sync();
+    };
+    const onEnter = () => {
+      hoverTargetRef.current = true;
+      if (showOnHover) setActive(true);
+    };
+    const onLeave = () => {
+      hoverTargetRef.current = false;
+      if (showOnHover && !thumbHoverRef.current && !dragRef.current) setActive(false);
+    };
+    const detachHover = () => {
+      hoverElement == null ? void 0 : hoverElement.removeEventListener("mouseenter", onEnter);
+      hoverElement == null ? void 0 : hoverElement.removeEventListener("mouseleave", onLeave);
+      hoverElement = null;
+      hoverTargetRef.current = false;
+    };
+    const attachHover = () => {
+      const next = hoverSelector ? container.querySelector(hoverSelector) : container;
+      if (!next || next === hoverElement) return;
+      detachHover();
+      hoverElement = next;
+      hoverElement.addEventListener("mouseenter", onEnter);
+      hoverElement.addEventListener("mouseleave", onLeave);
+    };
+    attach();
+    attachHover();
+    const mutation = new MutationObserver(() => {
+      if (!scrollElementRef.current || !container.contains(scrollElementRef.current)) attach();
+      if (hoverElement && !container.contains(hoverElement)) detachHover();
+      if (!hoverElement) attachHover();
+      sync();
+    });
+    mutation.observe(container, { childList: true, subtree: true });
+    return () => {
+      mutation.disconnect();
+      detach == null ? void 0 : detach();
+      detachHover();
+      scrollElementRef.current = null;
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    };
+  }, [containerRef, hoverSelector, onScroll, selector, showOnHover, sync, targetRef]);
+  const onDragMove = react.useCallback((event) => {
+    const element = scrollElementRef.current;
+    const start = dragRef.current;
+    if (!element || !start) return;
+    const vertical = start.axis === "vertical";
+    const clientSize = vertical ? element.clientHeight : element.clientWidth;
+    const scrollSize = vertical ? element.scrollHeight : element.scrollWidth;
+    const trackLength = vertical ? clientSize : Math.max(clientSize - horizontalInsetStart - horizontalInsetEnd, 0);
+    const proportionalLength = clientSize / scrollSize * trackLength;
+    const thumbLength = Math.min(trackLength, Math.max(vertical ? proportionalLength : horizontalThumbLength ?? proportionalLength, MIN_THUMB_SIZE));
+    const trackRange = trackLength - thumbLength;
+    if (trackRange <= 0) return;
+    const delta = (vertical ? event.clientY : event.clientX) - start.client;
+    const moved = start.scroll + delta * ((scrollSize - clientSize) / trackRange);
+    if (vertical) element.scrollTop = moved;
+    else element.scrollLeft = moved;
+  }, [horizontalInsetEnd, horizontalInsetStart, horizontalThumbLength]);
+  const onDragEnd = react.useCallback(() => {
+    const wasDragging = Boolean(dragRef.current);
+    dragRef.current = null;
+    document.body.style.userSelect = "";
+    document.removeEventListener("mousemove", onDragMove);
+    document.removeEventListener("mouseup", onDragEnd);
+    if (wasDragging) wakeUp();
+  }, [onDragMove, wakeUp]);
+  const startDrag = (axis) => (event) => {
+    const element = scrollElementRef.current;
+    if (!element) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragRef.current = {
+      axis,
+      client: axis === "vertical" ? event.clientY : event.clientX,
+      scroll: axis === "vertical" ? element.scrollTop : element.scrollLeft
+    };
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", onDragMove);
+    document.addEventListener("mouseup", onDragEnd);
+  };
+  react.useEffect(() => () => {
+    dragRef.current = null;
+    document.body.style.userSelect = "";
+    document.removeEventListener("mousemove", onDragMove);
+    document.removeEventListener("mouseup", onDragEnd);
+  }, [onDragEnd, onDragMove]);
+  const thumbClassName = ["bj-overlay-scrollbar__thumb", active && "bj-overlay-scrollbar__thumb--active", className].filter(Boolean).join(" ");
+  const colorStyle = background ? { "--bj-overlay-scrollbar-bg": background } : void 0;
+  const onThumbEnter = () => {
+    thumbHoverRef.current = true;
+    if (showOnHover) setActive(true);
+  };
+  const onThumbLeave = () => {
+    thumbHoverRef.current = false;
+    if (showOnHover && !hoverTargetRef.current && !dragRef.current) setActive(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showVertical && verticalThumb.visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${thumbClassName} bj-overlay-scrollbar__thumb--vertical`,
+        onMouseDown: startDrag("vertical"),
+        onMouseEnter: onThumbEnter,
+        onMouseLeave: onThumbLeave,
+        style: { ...colorStyle, top: verticalThumb.offset, left: verticalThumb.cross, height: verticalThumb.length, width: size }
+      }
+    ),
+    showHorizontal && horizontalThumb.visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${thumbClassName} bj-overlay-scrollbar__thumb--horizontal`,
+        onMouseDown: startDrag("horizontal"),
+        onMouseEnter: onThumbEnter,
+        onMouseLeave: onThumbLeave,
+        style: { ...colorStyle, left: horizontalThumb.offset, top: horizontalThumb.cross, width: horizontalThumb.length, height: size }
+      }
+    )
+  ] });
+}
+module.exports = BOverlayScrollbar;