wz-h5-design 1.0.4 → 1.0.6

package/dist/Search/index.js

@@ -39,6 +39,7 @@ const Search = forwardRef(
     suffix,
     leftIcon = /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }),
     actionText = "搜索",
+    actionColor,
     showCancel = false,
     cancelText = "返回",
     background,
@@ -135,13 +136,20 @@ const Search = forwardRef(
                           ...props
                         }
                       ),
-                      showClear && /* @__PURE__ */ jsx("div", { className: "wz-search-clear", onMouseDown: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16, color: "#BDBDBD" }) })
+                      showClear && /* @__PURE__ */ jsx("div", { className: "wz-search-clear", onMouseDown: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16, color: "#CCCCCC" }) })
                     ]
                   }
                 ),
                 actionText && /* @__PURE__ */ jsxs("div", { className: "wz-search-action", onClick: handleSearch, children: [
                   /* @__PURE__ */ jsx("div", { className: "wz-search-divider" }),
-                  /* @__PURE__ */ jsx("div", { className: "wz-search-action-text", children: actionText })
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "wz-search-action-text",
+                      style: actionColor ? { color: actionColor } : void 0,
+                      children: actionText
+                    }
+                  )
                 ] })
               ]
             }

package/dist/Search/index.umd.cjs

@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],s):(e="undefined"!=typeof globalThis?globalThis:e||self).Search=s(e.jsxRuntime,e.React)}(this,(function(e,s){"use strict";const a=({name:s,size:a=24,color:n="currentColor",className:c="",style:l,onClick:r,type:i="yunying"})=>{const o={fontSize:"number"==typeof a?`${a}px`:a,color:n,...l},t=`iconfont-${i}`,u=`icon-${s}`;return e.jsx("i",{className:`wz-icon ${t} ${u} ${c}`,style:o,onClick:r})},n=s.forwardRef((({value:n,defaultValue:c,placeholder:l="输入关键词搜索",shape:r="round",clearable:i=!0,disabled:o=!1,prefix:t,suffix:u,leftIcon:d=e.jsx(a,{name:"search",size:16}),actionText:h="搜索",showCancel:f=!1,cancelText:x="返回",background:m,style:p,className:w="",onSearch:z,onClear:v,onChange:j,onFocus:N,onBlur:y,onCancel:b,...C},$)=>{const g=void 0!==n,[k,D]=s.useState(c||""),[S,B]=s.useState(!1),R=s.useRef(null);s.useImperativeHandle($,(()=>R.current));const T=g?n:k,q=i&&T&&S&&!o,F=()=>{var e;o||(null==(e=R.current)||e.blur(),null==z||z(T))},I=()=>{B(!1),null==b||b()},E={...p,backgroundColor:m};return e.jsxs("div",{className:`wz-search ${S?"wz-search-focused":""} ${w}`,style:E,children:[t&&e.jsx("div",{className:"wz-search-prefix",children:t}),!t&&f&&S?e.jsx("div",{className:"wz-search-cancel",onClick:I,children:x}):null,e.jsxs("div",{className:`wz-search-content wz-search-shape-${r} ${o?"wz-search-disabled":""}`,children:[e.jsxs("div",{className:"wz-search-input-wrapper "+(q?"wz-search-input-wrapper--with-clear":""),children:[d&&e.jsx("div",{className:"wz-search-left-icon",children:d}),e.jsx("input",{ref:R,className:"wz-search-input",value:T,onChange:e=>{const s=e.target.value;g||D(s),null==j||j(s)},onFocus:e=>{B(!0),null==N||N(e)},onBlur:e=>{B(!1),null==y||y(e)},onKeyDown:e=>{"Enter"!==e.key||o||F()},placeholder:l,disabled:o,...C}),q&&e.jsx("div",{className:"wz-search-clear",onMouseDown:e=>{var s;e.preventDefault(),g||D(""),null==j||j(""),null==v||v(),null==(s=R.current)||s.focus()},children:e.jsx(a,{name:"close",size:16,color:"#BDBDBD"})})]}),h&&e.jsxs("div",{className:"wz-search-action",onClick:F,children:[e.jsx("div",{className:"wz-search-divider"}),e.jsx("div",{className:"wz-search-action-text",children:h})]})]}),u&&e.jsx("div",{className:"wz-search-suffix",children:u})]})}));return n.displayName="Search",n}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],s):(e="undefined"!=typeof globalThis?globalThis:e||self).Search=s(e.jsxRuntime,e.React)}(this,(function(e,s){"use strict";const a=({name:s,size:a=24,color:n="currentColor",className:c="",style:l,onClick:r,type:o="yunying"})=>{const i={fontSize:"number"==typeof a?`${a}px`:a,color:n,...l},t=`iconfont-${o}`,u=`icon-${s}`;return e.jsx("i",{className:`wz-icon ${t} ${u} ${c}`,style:i,onClick:r})},n=s.forwardRef((({value:n,defaultValue:c,placeholder:l="输入关键词搜索",shape:r="round",clearable:o=!0,disabled:i=!1,prefix:t,suffix:u,leftIcon:d=e.jsx(a,{name:"search",size:16}),actionText:h="搜索",actionColor:f,showCancel:x=!1,cancelText:m="返回",background:p,style:w,className:v="",onSearch:z,onClear:j,onChange:C,onFocus:y,onBlur:N,onCancel:b,...$},g)=>{const k=void 0!==n,[S,R]=s.useState(c||""),[T,D]=s.useState(!1),q=s.useRef(null);s.useImperativeHandle(g,(()=>q.current));const B=k?n:S,F=o&&B&&T&&!i,I=()=>{var e;i||(null==(e=q.current)||e.blur(),null==z||z(B))},E=()=>{D(!1),null==b||b()},H={...w,backgroundColor:p};return e.jsxs("div",{className:`wz-search ${T?"wz-search-focused":""} ${v}`,style:H,children:[t&&e.jsx("div",{className:"wz-search-prefix",children:t}),!t&&x&&T?e.jsx("div",{className:"wz-search-cancel",onClick:E,children:m}):null,e.jsxs("div",{className:`wz-search-content wz-search-shape-${r} ${i?"wz-search-disabled":""}`,children:[e.jsxs("div",{className:"wz-search-input-wrapper "+(F?"wz-search-input-wrapper--with-clear":""),children:[d&&e.jsx("div",{className:"wz-search-left-icon",children:d}),e.jsx("input",{ref:q,className:"wz-search-input",value:B,onChange:e=>{const s=e.target.value;k||R(s),null==C||C(s)},onFocus:e=>{D(!0),null==y||y(e)},onBlur:e=>{D(!1),null==N||N(e)},onKeyDown:e=>{"Enter"!==e.key||i||I()},placeholder:l,disabled:i,...$}),F&&e.jsx("div",{className:"wz-search-clear",onMouseDown:e=>{var s;e.preventDefault(),k||R(""),null==C||C(""),null==j||j(),null==(s=q.current)||s.focus()},children:e.jsx(a,{name:"close",size:16,color:"#CCCCCC"})})]}),h&&e.jsxs("div",{className:"wz-search-action",onClick:I,children:[e.jsx("div",{className:"wz-search-divider"}),e.jsx("div",{className:"wz-search-action-text",style:f?{color:f}:void 0,children:h})]})]}),u&&e.jsx("div",{className:"wz-search-suffix",children:u})]})}));return n.displayName="Search",n}));

package/dist/Search/style/index.css

@@ -1 +1 @@
-:root{--wz-search-height:48px;--wz-search-radius:8px;--wz-search-bg:var(--wz-bg-color-base,#f5f5f5);--wz-search-active-bg:#f0f0f0;--wz-search-border:var(--wz-border-color-lighter,#ebebeb);--wz-search-shadow:0 2px 8px #00000008;--wz-search-font-size:16px;--wz-search-placeholder-color:var(--wz-text-color-placeholder,#c0c4cc);--wz-search-text-color:var(--wz-text-color-primary,#333);--wz-search-divider-color:var(--wz-border-color-lighter,#ebebeb);--wz-search-btn-color:var(--wz-info-color,#1890ff);--wz-search-btn-active-color:#096dd9;--wz-search-btn-text:"搜索";--wz-search-padding:12px;--wz-search-inner-padding:0 16px;--wz-search-disabled-opacity:.5}.wz-search{background-color:var(--wz-bg-color-base,#f7f8fa);box-sizing:border-box;align-items:center;width:100%;padding:8px 12px;display:flex}.wz-search-cancel{color:var(--wz-primary-color,#22c94d);cursor:pointer;white-space:nowrap;padding-right:12px;font-size:14px}.wz-search-prefix{flex-shrink:0;align-items:center;padding-right:12px;display:flex}.wz-search-content{background-color:var(--wz-bg-color-white,#fff);flex:1;align-items:center;min-width:0;padding:6px 12px;transition:all .2s;display:flex}.wz-search-content.wz-search-shape-round{border-radius:100px}.wz-search-content.wz-search-shape-square{border-radius:4px}.wz-search-content.wz-search-disabled{background-color:var(--wz-disabled-bg,#f2f3f5);opacity:.6;cursor:not-allowed}.wz-search-focused .wz-search.wz-search-content{border:1px solid var(--wz-primary-color,#22c94d);padding:5px 11px}.wz-search-input-wrapper{flex:1;align-items:center;min-width:0;display:flex;position:relative}.wz-search-left-icon{color:var(--wz-text-color-secondary,#999);align-items:center;margin-right:6px;display:flex}.wz-search-input{color:var(--wz-text-color-primary,#333);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;outline:none;flex:1;padding:0;font-size:14px;line-height:1.5;overflow:hidden}.wz-search-input-wrapper--with-clear .wz-search-input{padding-right:22px}.wz-search-input::placeholder{color:var(--wz-text-color-placeholder,#b3b3b3)}.wz-search-clear{cursor:pointer;align-items:center;display:flex;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.wz-search-action{cursor:pointer;align-items:center;display:flex}.wz-search-divider{background-color:var(--wz-border-color-light,#e0e0e0);width:1px;height:16px;margin:0 12px}.wz-search-action-text{color:var(--wz-primary-color,#22c94d);white-space:nowrap;font-size:14px}.wz-search-suffix{cursor:pointer;white-space:nowrap;flex-shrink:0;align-items:center;padding-left:12px;display:flex}
+:root{--wz-search-height:48px;--wz-search-radius:8px;--wz-search-bg:var(--wz-bg-color-base,#f5f5f5);--wz-search-active-bg:#f0f0f0;--wz-search-border:var(--wz-border-color-lighter,#ebebeb);--wz-search-shadow:0 2px 8px #00000008;--wz-search-font-size:16px;--wz-search-placeholder-color:var(--wz-text-color-placeholder,#c0c4cc);--wz-search-text-color:var(--wz-text-color-primary,#333);--wz-search-divider-color:var(--wz-border-color-lighter,#ebebeb);--wz-search-btn-color:var(--wz-info-color,#1890ff);--wz-search-btn-active-color:#096dd9;--wz-search-btn-text:"搜索";--wz-search-padding:12px;--wz-search-inner-padding:0 16px;--wz-search-disabled-opacity:.5}.wz-search{background-color:var(--wz-bg-color-base,#f7f8fa);box-sizing:border-box;align-items:center;width:100%;padding:4px 14px;display:flex}.wz-search-cancel{color:var(--wz-primary-color,#22c94d);cursor:pointer;white-space:nowrap;padding-right:12px;font-size:14px}.wz-search-prefix{flex-shrink:0;align-items:center;padding-right:12px;display:flex}.wz-search-content{background-color:var(--wz-bg-color-white,#fff);flex:1;align-items:center;min-width:0;padding:5px 14px;transition:all .2s;display:flex}.wz-search-content.wz-search-shape-round{border-radius:35px}.wz-search-content.wz-search-shape-square{border-radius:4px}.wz-search-content.wz-search-disabled{background-color:var(--wz-disabled-bg,#f2f3f5);opacity:.6;cursor:not-allowed}.wz-search-focused .wz-search.wz-search-content{border:1px solid var(--wz-primary-color,#22c94d);padding:5px 11px}.wz-search-input-wrapper{flex:1;align-items:center;min-width:0;display:flex;position:relative}.wz-search-left-icon{color:var(--wz-text-color-secondary,#999);align-items:center;margin-right:6px;display:flex}.wz-search-input{color:var(--wz-text-color-primary,#333);text-overflow:ellipsis;white-space:nowrap;caret-color:var(--wz-primary-color,#22c94d);background:0 0;border:none;outline:none;flex:1;padding:0;font-size:14px;line-height:1.5;overflow:hidden}.wz-search-input-wrapper--with-clear .wz-search-input{padding-right:22px}.wz-search-input::placeholder{color:var(--wz-text-color-placeholder,#b3b3b3)}.wz-search-clear{cursor:pointer;align-items:center;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.wz-search-action{cursor:pointer;align-items:center;display:flex}.wz-search-divider{background-color:var(--wz-border-color-light,#e0e0e0);width:1px;height:16px;margin:0 12px}.wz-search-action-text{color:var(--wz-primary-color,#22c94d);white-space:nowrap;font-size:14px}.wz-search-suffix{cursor:pointer;white-space:nowrap;flex-shrink:0;align-items:center;padding-left:12px;display:flex}

package/dist/Search/style.css

@@ -1 +1 @@
-.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}:root{--wz-search-height:48px;--wz-search-radius:8px;--wz-search-bg:var(--wz-bg-color-base,#f5f5f5);--wz-search-active-bg:#f0f0f0;--wz-search-border:var(--wz-border-color-lighter,#ebebeb);--wz-search-shadow:0 2px 8px #00000008;--wz-search-font-size:16px;--wz-search-placeholder-color:var(--wz-text-color-placeholder,#c0c4cc);--wz-search-text-color:var(--wz-text-color-primary,#333);--wz-search-divider-color:var(--wz-border-color-lighter,#ebebeb);--wz-search-btn-color:var(--wz-info-color,#1890ff);--wz-search-btn-active-color:#096dd9;--wz-search-btn-text:"搜索";--wz-search-padding:12px;--wz-search-inner-padding:0 16px;--wz-search-disabled-opacity:.5}.wz-search{background-color:var(--wz-bg-color-base,#f7f8fa);box-sizing:border-box;align-items:center;width:100%;padding:8px 12px;display:flex}.wz-search-cancel{color:var(--wz-primary-color,#22c94d);cursor:pointer;white-space:nowrap;padding-right:12px;font-size:14px}.wz-search-prefix{flex-shrink:0;align-items:center;padding-right:12px;display:flex}.wz-search-content{background-color:var(--wz-bg-color-white,#fff);flex:1;align-items:center;min-width:0;padding:6px 12px;transition:all .2s;display:flex}.wz-search-content.wz-search-shape-round{border-radius:100px}.wz-search-content.wz-search-shape-square{border-radius:4px}.wz-search-content.wz-search-disabled{background-color:var(--wz-disabled-bg,#f2f3f5);opacity:.6;cursor:not-allowed}.wz-search-focused .wz-search.wz-search-content{border:1px solid var(--wz-primary-color,#22c94d);padding:5px 11px}.wz-search-input-wrapper{flex:1;align-items:center;min-width:0;display:flex;position:relative}.wz-search-left-icon{color:var(--wz-text-color-secondary,#999);align-items:center;margin-right:6px;display:flex}.wz-search-input{color:var(--wz-text-color-primary,#333);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;outline:none;flex:1;padding:0;font-size:14px;line-height:1.5;overflow:hidden}.wz-search-input-wrapper--with-clear .wz-search-input{padding-right:22px}.wz-search-input::placeholder{color:var(--wz-text-color-placeholder,#b3b3b3)}.wz-search-clear{cursor:pointer;align-items:center;display:flex;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.wz-search-action{cursor:pointer;align-items:center;display:flex}.wz-search-divider{background-color:var(--wz-border-color-light,#e0e0e0);width:1px;height:16px;margin:0 12px}.wz-search-action-text{color:var(--wz-primary-color,#22c94d);white-space:nowrap;font-size:14px}.wz-search-suffix{cursor:pointer;white-space:nowrap;flex-shrink:0;align-items:center;padding-left:12px;display:flex}
+.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}:root{--wz-search-height:48px;--wz-search-radius:8px;--wz-search-bg:var(--wz-bg-color-base,#f5f5f5);--wz-search-active-bg:#f0f0f0;--wz-search-border:var(--wz-border-color-lighter,#ebebeb);--wz-search-shadow:0 2px 8px #00000008;--wz-search-font-size:16px;--wz-search-placeholder-color:var(--wz-text-color-placeholder,#c0c4cc);--wz-search-text-color:var(--wz-text-color-primary,#333);--wz-search-divider-color:var(--wz-border-color-lighter,#ebebeb);--wz-search-btn-color:var(--wz-info-color,#1890ff);--wz-search-btn-active-color:#096dd9;--wz-search-btn-text:"搜索";--wz-search-padding:12px;--wz-search-inner-padding:0 16px;--wz-search-disabled-opacity:.5}.wz-search{background-color:var(--wz-bg-color-base,#f7f8fa);box-sizing:border-box;align-items:center;width:100%;padding:4px 14px;display:flex}.wz-search-cancel{color:var(--wz-primary-color,#22c94d);cursor:pointer;white-space:nowrap;padding-right:12px;font-size:14px}.wz-search-prefix{flex-shrink:0;align-items:center;padding-right:12px;display:flex}.wz-search-content{background-color:var(--wz-bg-color-white,#fff);flex:1;align-items:center;min-width:0;padding:5px 14px;transition:all .2s;display:flex}.wz-search-content.wz-search-shape-round{border-radius:35px}.wz-search-content.wz-search-shape-square{border-radius:4px}.wz-search-content.wz-search-disabled{background-color:var(--wz-disabled-bg,#f2f3f5);opacity:.6;cursor:not-allowed}.wz-search-focused .wz-search.wz-search-content{border:1px solid var(--wz-primary-color,#22c94d);padding:5px 11px}.wz-search-input-wrapper{flex:1;align-items:center;min-width:0;display:flex;position:relative}.wz-search-left-icon{color:var(--wz-text-color-secondary,#999);align-items:center;margin-right:6px;display:flex}.wz-search-input{color:var(--wz-text-color-primary,#333);text-overflow:ellipsis;white-space:nowrap;caret-color:var(--wz-primary-color,#22c94d);background:0 0;border:none;outline:none;flex:1;padding:0;font-size:14px;line-height:1.5;overflow:hidden}.wz-search-input-wrapper--with-clear .wz-search-input{padding-right:22px}.wz-search-input::placeholder{color:var(--wz-text-color-placeholder,#b3b3b3)}.wz-search-clear{cursor:pointer;align-items:center;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.wz-search-action{cursor:pointer;align-items:center;display:flex}.wz-search-divider{background-color:var(--wz-border-color-light,#e0e0e0);width:1px;height:16px;margin:0 12px}.wz-search-action-text{color:var(--wz-primary-color,#22c94d);white-space:nowrap;font-size:14px}.wz-search-suffix{cursor:pointer;white-space:nowrap;flex-shrink:0;align-items:center;padding-left:12px;display:flex}

package/dist/Switch/index.js

@@ -18,11 +18,17 @@ const Switch = ({
   const [innerValue, setInnerValue] = useState(defaultValue);
   const isControlled = value !== void 0;
   const checked = isControlled ? value : innerValue;
-  const text = checked ? activeText || DEFAULT_ACTIVE_TEXT : inactiveText || DEFAULT_INACTIVE_TEXT;
+  const activeTextDisplay = activeText || DEFAULT_ACTIVE_TEXT;
+  const inactiveTextDisplay = inactiveText || DEFAULT_INACTIVE_TEXT;
+  const text = checked ? activeTextDisplay : inactiveTextDisplay;
   const textWidth = showText ? `${text.length * 12 + 8}px` : "0px";
+  const maxTextLen = Math.max(activeTextDisplay.length, inactiveTextDisplay.length);
   const baseWidth = size === "large" ? 62 : 60;
-  const switchWidthNum = showText ? text.length * 12 + 40 : baseWidth;
+  const calculatedWidth = showText ? maxTextLen * 12 + 40 : baseWidth;
+  const switchWidthNum = Math.max(calculatedWidth, baseWidth);
   const switchWidth = `${switchWidthNum}px`;
+  const sliderSize = size === "large" ? 24 : 22;
+  const sliderTranslateX = checked ? switchWidthNum - sliderSize - 4 : 0;
   const onBg = activeColor ? activeColor.includes("gradient") ? activeColor : activeColor : void 0;
   const handleClick = () => {
     if (disabled) return;
@@ -41,7 +47,8 @@ const Switch = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `wz-switch-slider ${checked ? "wz-switch-slider-on" : "wz-switch-slider-off"}`
+            className: `wz-switch-slider ${checked ? "wz-switch-slider-on" : "wz-switch-slider-off"}`,
+            style: { transform: `translateX(${sliderTranslateX}px)` }
           }
         )
       ]

package/dist/Switch/index.umd.cjs

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Switch=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";return({value:i,defaultValue:s=!1,onChange:n,disabled:c=!1,showText:l=!0,activeText:a="",inactiveText:d="",style:o,className:r="",size:u="default",activeColor:h})=>{const[w,f]=t.useState(s),x=void 0!==i,m=x?i:w,p=m?a||"开启":d||"关闭",z=l?12*p.length+8+"px":"0px",g="large"===u?62:60,v=`${l?12*p.length+40:g}px`,b=h?(h.includes("gradient"),h):void 0,j=m&&h?{background:b}:{};return e.jsxs("div",{className:`wz-switch-bg ${m?"wz-switch-on":"wz-switch-off"}${c?" wz-switch-disabled":""}${r?" "+r:""} wz-switch-${u}`,style:{width:v,minWidth:`${g}px`,...o,...j},onClick:()=>{c||(x||f(!m),null==n||n(!m))},children:[l&&e.jsx("span",{className:"wz-switch-text",style:{width:z},children:p}),e.jsx("div",{className:"wz-switch-slider "+(m?"wz-switch-slider-on":"wz-switch-slider-off")})]})}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Switch=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";return({value:i,defaultValue:s=!1,onChange:a,disabled:n=!1,showText:l=!0,activeText:c="",inactiveText:d="",style:r,className:o="",size:h="default",activeColor:u})=>{const[w,f]=t.useState(s),x=void 0!==i,m=x?i:w,p=c||"开启",g=d||"关闭",z=m?p:g,v=l?12*z.length+8+"px":"0px",y=Math.max(p.length,g.length),b="large"===h?62:60,j=l?12*y+40:b,$=Math.max(j,b),T=`${$}px`,N=m?$-("large"===h?24:22)-4:0,C=u?(u.includes("gradient"),u):void 0,k=m&&u?{background:C}:{};return e.jsxs("div",{className:`wz-switch-bg ${m?"wz-switch-on":"wz-switch-off"}${n?" wz-switch-disabled":""}${o?" "+o:""} wz-switch-${h}`,style:{width:T,minWidth:`${b}px`,...r,...k},onClick:()=>{n||(x||f(!m),null==a||a(!m))},children:[l&&e.jsx("span",{className:"wz-switch-text",style:{width:v},children:z}),e.jsx("div",{className:"wz-switch-slider "+(m?"wz-switch-slider-on":"wz-switch-slider-off"),style:{transform:`translateX(${N}px)`}})]})}}));

package/dist/Switch/style/index.css

@@ -1 +1 @@
-.wz-switch-bg{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;align-items:center;transition:background .2s;display:flex;position:relative;box-shadow:0 1px 3px #00000014}.wz-switch-default{border-radius:26px;height:26px}.wz-switch-default .wz-switch-slider{width:22px;height:22px;top:2px}.wz-switch-default .wz-switch-text{top:5px}.wz-switch-large{border-radius:28px;height:28px}.wz-switch-large .wz-switch-slider{width:24px;height:24px}.wz-switch-large .wz-switch-text{top:6px}.wz-switch-off{background:var(--wz-disabled-color,#ccc);box-shadow:inset 0 0 2px #0000001a}.wz-switch-on{background:var(--wz-primary-color,#22c94d);box-shadow:inset 0 0 2px #0eb54999}.wz-switch-text{text-align:center;color:var(--wz-text-color-white,#fff);z-index:2;pointer-events:none;height:16px;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;font-size:12px;font-weight:600;line-height:16px;position:absolute;left:29px}.wz-switch-on .wz-switch-text{color:var(--wz-text-color-white,#fff);left:8px}.wz-switch-slider{z-index:3;background:#fff;border-radius:50%;width:22px;height:22px;transition:right .2s,left .2s;position:absolute;top:2px;box-shadow:0 1px 3px #00000014}.wz-switch-slider-on{left:auto;right:2px}.wz-switch-slider-off{left:2px;right:auto}.wz-switch-disabled{opacity:.6;cursor:not-allowed}
+.wz-switch-bg{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;align-items:center;transition:background-color .3s,box-shadow .3s;display:flex;position:relative;box-shadow:0 1px 3px #00000014}.wz-switch-default{border-radius:26px;height:26px}.wz-switch-default .wz-switch-slider{width:22px;height:22px;top:2px}.wz-switch-default .wz-switch-text{top:5px}.wz-switch-large{border-radius:28px;height:28px}.wz-switch-large .wz-switch-slider{width:24px;height:24px}.wz-switch-large .wz-switch-text{top:6px}.wz-switch-off{background:var(--wz-disabled-color,#ccc);box-shadow:inset 0 0 2px #0000001a}.wz-switch-on{background:var(--wz-primary-color,#22c94d);box-shadow:inset 0 0 2px #0eb54999}.wz-switch-text{text-align:center;color:var(--wz-text-color-white,#fff);z-index:2;pointer-events:none;height:16px;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;font-size:12px;font-weight:600;line-height:16px;transition:left .3s cubic-bezier(.4,0,.2,1),opacity .2s;position:absolute;left:29px}.wz-switch-on .wz-switch-text{color:var(--wz-text-color-white,#fff);left:8px}.wz-switch-slider{z-index:3;background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000014}.wz-switch-disabled{opacity:.6;cursor:not-allowed}

package/dist/Switch/style.css

@@ -1 +1 @@
-.wz-switch-bg{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;align-items:center;transition:background .2s;display:flex;position:relative;box-shadow:0 1px 3px #00000014}.wz-switch-default{border-radius:26px;height:26px}.wz-switch-default .wz-switch-slider{width:22px;height:22px;top:2px}.wz-switch-default .wz-switch-text{top:5px}.wz-switch-large{border-radius:28px;height:28px}.wz-switch-large .wz-switch-slider{width:24px;height:24px}.wz-switch-large .wz-switch-text{top:6px}.wz-switch-off{background:var(--wz-disabled-color,#ccc);box-shadow:inset 0 0 2px #0000001a}.wz-switch-on{background:var(--wz-primary-color,#22c94d);box-shadow:inset 0 0 2px #0eb54999}.wz-switch-text{text-align:center;color:var(--wz-text-color-white,#fff);z-index:2;pointer-events:none;height:16px;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;font-size:12px;font-weight:600;line-height:16px;position:absolute;left:29px}.wz-switch-on .wz-switch-text{color:var(--wz-text-color-white,#fff);left:8px}.wz-switch-slider{z-index:3;background:#fff;border-radius:50%;width:22px;height:22px;transition:right .2s,left .2s;position:absolute;top:2px;box-shadow:0 1px 3px #00000014}.wz-switch-slider-on{left:auto;right:2px}.wz-switch-slider-off{left:2px;right:auto}.wz-switch-disabled{opacity:.6;cursor:not-allowed}
+.wz-switch-bg{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;align-items:center;transition:background-color .3s,box-shadow .3s;display:flex;position:relative;box-shadow:0 1px 3px #00000014}.wz-switch-default{border-radius:26px;height:26px}.wz-switch-default .wz-switch-slider{width:22px;height:22px;top:2px}.wz-switch-default .wz-switch-text{top:5px}.wz-switch-large{border-radius:28px;height:28px}.wz-switch-large .wz-switch-slider{width:24px;height:24px}.wz-switch-large .wz-switch-text{top:6px}.wz-switch-off{background:var(--wz-disabled-color,#ccc);box-shadow:inset 0 0 2px #0000001a}.wz-switch-on{background:var(--wz-primary-color,#22c94d);box-shadow:inset 0 0 2px #0eb54999}.wz-switch-text{text-align:center;color:var(--wz-text-color-white,#fff);z-index:2;pointer-events:none;height:16px;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;font-size:12px;font-weight:600;line-height:16px;transition:left .3s cubic-bezier(.4,0,.2,1),opacity .2s;position:absolute;left:29px}.wz-switch-on .wz-switch-text{color:var(--wz-text-color-white,#fff);left:8px}.wz-switch-slider{z-index:3;background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000014}.wz-switch-disabled{opacity:.6;cursor:not-allowed}

package/dist/Tabbar/index.js

@@ -79,14 +79,17 @@ const Icon = ({
   );
 };
 const TabbarItem = (props) => {
-  const { title, icon, activeIcon, badge, badgeAsBubble, hump, active, onItemClick, onClick, activeColor } = props;
+  const { title, icon, activeIcon, badge, badgeAsBubble, dot, hump, active, onItemClick, onClick, activeColor } = props;
   const renderIcon = (iconSource) => {
     if (typeof iconSource === "string") {
-      return /* @__PURE__ */ jsx(Icon, { name: iconSource });
+      return /* @__PURE__ */ jsx(Icon, { size: 22, name: iconSource });
     }
     return iconSource;
   };
   const renderBadge = () => {
+    if (dot) {
+      return /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-dot" });
+    }
     if (!badge) return null;
     if (badgeAsBubble) {
       return /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-badge-custom", children: /* @__PURE__ */ jsxs("div", { className: "wz-tabbar-item-badge-bubble", children: [
@@ -115,7 +118,7 @@ const TabbarItem = (props) => {
       active ? renderIcon(activeIcon || icon) : renderIcon(icon),
       renderBadge()
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-title", children: title })
+    !hump && /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-title", children: title })
   ] });
 };
 const Tabbar = (props) => {

package/dist/Tabbar/index.umd.cjs

@@ -3,4 +3,4 @@
   	Copyright (c) 2018 Jed Watson.
   	Licensed under the MIT License (MIT), see
   	http://jedwatson.github.io/classnames
-  */i=r,function(){var e={}.hasOwnProperty;function t(){for(var a=[],i=0;i<arguments.length;i++){var r=arguments[i];if(r){var n=typeof r;if("string"===n||"number"===n)a.push(r);else if(Array.isArray(r)){if(r.length){var s=t.apply(null,r);s&&a.push(s)}}else if("object"===n){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){a.push(r.toString());continue}for(var o in r)e.call(r,o)&&r[o]&&a.push(o)}}}return a.join(" ")}i.exports?(t.default=t,i.exports=t):window.classNames=t}();const n=a(r.exports),s=({name:t,size:a=24,color:i="currentColor",className:r="",style:n,onClick:s,type:o="yunying"})=>{const l={fontSize:"number"==typeof a?`${a}px`:a,color:i,...n},c=`iconfont-${o}`,u=`icon-${t}`;return e.jsx("i",{className:`wz-icon ${c} ${u} ${r}`,style:l,onClick:s})},o=a=>{const{title:i,icon:r,activeIcon:o,badge:l,badgeAsBubble:c,hump:u,active:d,onItemClick:b,onClick:m,activeColor:f}=a,p=t=>"string"==typeof t?e.jsx(s,{name:t}):t,v=n("wz-tabbar-item",{"wz-tabbar-item-active":!u&&d,"wz-tabbar-item-hump":u}),y=t.useMemo((()=>{const e={};return d&&f&&(e.color=f),e}),[d,f]);return e.jsxs("div",{className:v,style:y,onClick:u?m:b,children:[e.jsxs("div",{className:"wz-tabbar-item-icon",children:[p(d&&o||r),l?c?e.jsx("div",{className:"wz-tabbar-item-badge-custom",children:e.jsxs("div",{className:"wz-tabbar-item-badge-bubble",children:[l,e.jsx("div",{className:"wz-tabbar-item-badge-bubble-arrow"})]})}):t.isValidElement(l)?e.jsx("div",{className:"wz-tabbar-item-badge-custom",children:l}):e.jsx("div",{className:"wz-tabbar-item-badge",children:l}):null]}),e.jsx("div",{className:"wz-tabbar-item-title",children:i})]})};return a=>{var i;const{activeKey:r,defaultActiveKey:s,onChange:l,items:c,fixed:u=!0,className:d,style:b}=a,[m,f]=t.useState(r??s??(null==(i=null==c?void 0:c[0])?void 0:i.key));t.useEffect((()=>{void 0!==r&&f(r)}),[r]);const p=n("wz-tabbar",{"wz-tabbar-fixed":u},d);return e.jsx("div",{className:p,style:b,children:c.map((e=>t.createElement(o,{...e,key:e.key,active:!e.hump&&m===e.key,onItemClick:()=>{return t=e.key,void 0===r&&f(t),void(null==l||l(t));var t}})))})}}));
+  */i=r,function(){var e={}.hasOwnProperty;function t(){for(var a=[],i=0;i<arguments.length;i++){var r=arguments[i];if(r){var s=typeof r;if("string"===s||"number"===s)a.push(r);else if(Array.isArray(r)){if(r.length){var n=t.apply(null,r);n&&a.push(n)}}else if("object"===s){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){a.push(r.toString());continue}for(var o in r)e.call(r,o)&&r[o]&&a.push(o)}}}return a.join(" ")}i.exports?(t.default=t,i.exports=t):window.classNames=t}();const s=a(r.exports),n=({name:t,size:a=24,color:i="currentColor",className:r="",style:s,onClick:n,type:o="yunying"})=>{const l={fontSize:"number"==typeof a?`${a}px`:a,color:i,...s},c=`iconfont-${o}`,u=`icon-${t}`;return e.jsx("i",{className:`wz-icon ${c} ${u} ${r}`,style:l,onClick:n})},o=a=>{const{title:i,icon:r,activeIcon:o,badge:l,badgeAsBubble:c,dot:u,hump:d,active:b,onItemClick:m,onClick:f,activeColor:v}=a,p=t=>"string"==typeof t?e.jsx(n,{size:22,name:t}):t,y=s("wz-tabbar-item",{"wz-tabbar-item-active":!d&&b,"wz-tabbar-item-hump":d}),x=t.useMemo((()=>{const e={};return b&&v&&(e.color=v),e}),[b,v]);return e.jsxs("div",{className:y,style:x,onClick:d?f:m,children:[e.jsxs("div",{className:"wz-tabbar-item-icon",children:[p(b&&o||r),u?e.jsx("div",{className:"wz-tabbar-item-dot"}):l?c?e.jsx("div",{className:"wz-tabbar-item-badge-custom",children:e.jsxs("div",{className:"wz-tabbar-item-badge-bubble",children:[l,e.jsx("div",{className:"wz-tabbar-item-badge-bubble-arrow"})]})}):t.isValidElement(l)?e.jsx("div",{className:"wz-tabbar-item-badge-custom",children:l}):e.jsx("div",{className:"wz-tabbar-item-badge",children:l}):null]}),!d&&e.jsx("div",{className:"wz-tabbar-item-title",children:i})]})};return a=>{var i;const{activeKey:r,defaultActiveKey:n,onChange:l,items:c,fixed:u=!0,className:d,style:b}=a,[m,f]=t.useState(r??n??(null==(i=null==c?void 0:c[0])?void 0:i.key));t.useEffect((()=>{void 0!==r&&f(r)}),[r]);const v=s("wz-tabbar",{"wz-tabbar-fixed":u},d);return e.jsx("div",{className:v,style:b,children:c.map((e=>t.createElement(o,{...e,key:e.key,active:!e.hump&&m===e.key,onItemClick:()=>{return t=e.key,void 0===r&&f(t),void(null==l||l(t));var t}})))})}}));

package/dist/Tabbar/style/index.css

@@ -1 +1 @@
-:root{--wz-tabbar-height:52px;--wz-tabbar-bg-color:var(--wz-bg-color-white,#fff);--wz-tabbar-border-color:var(--wz-border-color-lighter,#f0f0f0);--wz-tabbar-item-text-color:var(--wz-text-color-regular,#666);--wz-tabbar-item-active-text-color:var(--wz-primary-color,#0eb549);--wz-tabbar-item-icon-size:24px;--wz-tabbar-item-text-font-size:10px;--wz-tabbar-badge-bg-color:var(--wz-danger-color,#ff4d4f);--wz-tabbar-badge-color:var(--wz-text-color-white,#fff);--wz-tabbar-badge-font-size:12px}.wz-tabbar{height:var(--wz-tabbar-height);background-color:var(--wz-tabbar-bg-color);border-top:1px solid var(--wz-tabbar-border-color);box-sizing:border-box;width:100%;display:flex}.wz-tabbar.wz-tabbar-fixed{z-index:999;position:fixed;bottom:0;left:0;right:0}body:has(.wz-tabbar-fixed){padding-bottom:var(--wz-tabbar-height)}.wz-tabbar-item{color:var(--wz-tabbar-item-text-color);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.wz-tabbar-item .wz-tabbar-item-icon{font-size:var(--wz-tabbar-item-icon-size);margin-bottom:4px;position:relative}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge{background-color:var(--wz-tabbar-badge-bg-color);color:var(--wz-tabbar-badge-color);font-size:var(--wz-tabbar-badge-font-size);text-align:center;box-sizing:border-box;border-radius:10px;min-width:16px;height:16px;padding:0 4px;line-height:16px;position:absolute;top:-2px;right:-8px;transform:translate(50%,-10%)}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge-custom{z-index:1;position:absolute;top:-25px;left:50%;transform:translate(-50%)}.wz-tabbar-item .wz-tabbar-item-badge-bubble{background:var(--wz-warning-color,linear-gradient(135deg,#ff9c38,#fd631a));color:var(--wz-text-color-white,#fff);white-space:nowrap;border-radius:9px;padding:4px 8px;font-size:10px;position:relative}.wz-tabbar-item .wz-tabbar-item-badge-bubble-arrow{content:"";border-top:4px solid #fe7f36;border-left:4px solid #0000;border-right:4px solid #0000;width:0;height:0;margin-left:-4px;position:absolute;bottom:-4px;left:50%}.wz-tabbar-item .wz-tabbar-item-title{font-size:var(--wz-tabbar-item-text-font-size)}.wz-tabbar-item.wz-tabbar-item-active{color:var(--wz-tabbar-item-active-text-color)}.wz-tabbar-item.wz-tabbar-item-hump .wz-tabbar-item-icon{background:var(--wz-primary-gradient,linear-gradient(135deg,#89d028,#1fa71f));color:var(--wz-text-color-white,#fff);border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin-top:-30px;display:flex;box-shadow:0 -2px 4px #0000000d}.wz-tabbar-item.wz-tabbar-item-hump .wz-tabbar-item-title{margin-top:4px}
+:root{--wz-tabbar-height:52px;--wz-tabbar-bg-color:var(--wz-bg-color-white,#fff);--wz-tabbar-border-color:var(--wz-border-color-lighter,#f0f0f0);--wz-tabbar-item-text-color:var(--wz-text-color-regular,#666);--wz-tabbar-item-active-text-color:var(--wz-primary-color,#0eb549);--wz-tabbar-item-icon-size:22px;--wz-tabbar-item-text-font-size:10px;--wz-tabbar-badge-bg-color:var(--wz-danger-color,#ff4d4f);--wz-tabbar-badge-color:var(--wz-text-color-white,#fff);--wz-tabbar-badge-font-size:12px}.wz-tabbar{height:var(--wz-tabbar-height);background-color:var(--wz-tabbar-bg-color);border-top:1px solid var(--wz-tabbar-border-color);box-sizing:border-box;width:100%;display:flex}.wz-tabbar.wz-tabbar-fixed{z-index:999;position:fixed;bottom:0;left:0;right:0}body:has(.wz-tabbar-fixed){padding-bottom:var(--wz-tabbar-height)}.wz-tabbar-item{color:var(--wz-tabbar-item-text-color);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.wz-tabbar-item .wz-tabbar-item-icon{font-size:var(--wz-tabbar-item-icon-size);margin-bottom:4px;position:relative}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge{background-color:var(--wz-tabbar-badge-bg-color);color:var(--wz-tabbar-badge-color);font-size:var(--wz-tabbar-badge-font-size);text-align:center;box-sizing:border-box;border-radius:10px;min-width:16px;height:16px;padding:0 4px;line-height:16px;position:absolute;top:0;right:-3px;transform:translate(50%,-10%)}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-dot{background-color:var(--wz-tabbar-badge-bg-color);border:1.5px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;top:5px;right:0;transform:translate(50%,-50%)}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge-custom{z-index:1;position:absolute;top:-22px;left:50%;transform:translate(-50%)}.wz-tabbar-item .wz-tabbar-item-badge-bubble{background:var(--wz-warning-color,linear-gradient(135deg,#ff9c38,#fd631a));color:var(--wz-text-color-white,#fff);white-space:nowrap;border-radius:9px;padding:4px 8px;font-size:10px;position:relative}.wz-tabbar-item .wz-tabbar-item-badge-bubble-arrow{content:"";border-top:4px solid #fe7f36;border-left:4px solid #0000;border-right:4px solid #0000;width:0;height:0;margin-left:-4px;position:absolute;bottom:-4px;left:50%}.wz-tabbar-item .wz-tabbar-item-title{font-size:var(--wz-tabbar-item-text-font-size)}.wz-tabbar-item.wz-tabbar-item-active{color:var(--wz-tabbar-item-active-text-color)}.wz-tabbar-item.wz-tabbar-item-hump{position:relative}.wz-tabbar-item.wz-tabbar-item-hump .wz-tabbar-item-icon{background:var(--wz-primary-gradient,linear-gradient(90deg,#77c708 -4%,#34b834 100%));color:var(--wz-text-color-white,#fff);box-sizing:border-box;border:5px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0;display:flex;position:absolute;top:-13px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #00000014}

package/dist/Tabbar/style.css

@@ -1 +1 @@
-.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}:root{--wz-tabbar-height:52px;--wz-tabbar-bg-color:var(--wz-bg-color-white,#fff);--wz-tabbar-border-color:var(--wz-border-color-lighter,#f0f0f0);--wz-tabbar-item-text-color:var(--wz-text-color-regular,#666);--wz-tabbar-item-active-text-color:var(--wz-primary-color,#0eb549);--wz-tabbar-item-icon-size:24px;--wz-tabbar-item-text-font-size:10px;--wz-tabbar-badge-bg-color:var(--wz-danger-color,#ff4d4f);--wz-tabbar-badge-color:var(--wz-text-color-white,#fff);--wz-tabbar-badge-font-size:12px}.wz-tabbar{height:var(--wz-tabbar-height);background-color:var(--wz-tabbar-bg-color);border-top:1px solid var(--wz-tabbar-border-color);box-sizing:border-box;width:100%;display:flex}.wz-tabbar.wz-tabbar-fixed{z-index:999;position:fixed;bottom:0;left:0;right:0}body:has(.wz-tabbar-fixed){padding-bottom:var(--wz-tabbar-height)}.wz-tabbar-item{color:var(--wz-tabbar-item-text-color);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.wz-tabbar-item .wz-tabbar-item-icon{font-size:var(--wz-tabbar-item-icon-size);margin-bottom:4px;position:relative}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge{background-color:var(--wz-tabbar-badge-bg-color);color:var(--wz-tabbar-badge-color);font-size:var(--wz-tabbar-badge-font-size);text-align:center;box-sizing:border-box;border-radius:10px;min-width:16px;height:16px;padding:0 4px;line-height:16px;position:absolute;top:-2px;right:-8px;transform:translate(50%,-10%)}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge-custom{z-index:1;position:absolute;top:-25px;left:50%;transform:translate(-50%)}.wz-tabbar-item .wz-tabbar-item-badge-bubble{background:var(--wz-warning-color,linear-gradient(135deg,#ff9c38,#fd631a));color:var(--wz-text-color-white,#fff);white-space:nowrap;border-radius:9px;padding:4px 8px;font-size:10px;position:relative}.wz-tabbar-item .wz-tabbar-item-badge-bubble-arrow{content:"";border-top:4px solid #fe7f36;border-left:4px solid #0000;border-right:4px solid #0000;width:0;height:0;margin-left:-4px;position:absolute;bottom:-4px;left:50%}.wz-tabbar-item .wz-tabbar-item-title{font-size:var(--wz-tabbar-item-text-font-size)}.wz-tabbar-item.wz-tabbar-item-active{color:var(--wz-tabbar-item-active-text-color)}.wz-tabbar-item.wz-tabbar-item-hump .wz-tabbar-item-icon{background:var(--wz-primary-gradient,linear-gradient(135deg,#89d028,#1fa71f));color:var(--wz-text-color-white,#fff);border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin-top:-30px;display:flex;box-shadow:0 -2px 4px #0000000d}.wz-tabbar-item.wz-tabbar-item-hump .wz-tabbar-item-title{margin-top:4px}
+.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}:root{--wz-tabbar-height:52px;--wz-tabbar-bg-color:var(--wz-bg-color-white,#fff);--wz-tabbar-border-color:var(--wz-border-color-lighter,#f0f0f0);--wz-tabbar-item-text-color:var(--wz-text-color-regular,#666);--wz-tabbar-item-active-text-color:var(--wz-primary-color,#0eb549);--wz-tabbar-item-icon-size:22px;--wz-tabbar-item-text-font-size:10px;--wz-tabbar-badge-bg-color:var(--wz-danger-color,#ff4d4f);--wz-tabbar-badge-color:var(--wz-text-color-white,#fff);--wz-tabbar-badge-font-size:12px}.wz-tabbar{height:var(--wz-tabbar-height);background-color:var(--wz-tabbar-bg-color);border-top:1px solid var(--wz-tabbar-border-color);box-sizing:border-box;width:100%;display:flex}.wz-tabbar.wz-tabbar-fixed{z-index:999;position:fixed;bottom:0;left:0;right:0}body:has(.wz-tabbar-fixed){padding-bottom:var(--wz-tabbar-height)}.wz-tabbar-item{color:var(--wz-tabbar-item-text-color);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.wz-tabbar-item .wz-tabbar-item-icon{font-size:var(--wz-tabbar-item-icon-size);margin-bottom:4px;position:relative}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge{background-color:var(--wz-tabbar-badge-bg-color);color:var(--wz-tabbar-badge-color);font-size:var(--wz-tabbar-badge-font-size);text-align:center;box-sizing:border-box;border-radius:10px;min-width:16px;height:16px;padding:0 4px;line-height:16px;position:absolute;top:0;right:-3px;transform:translate(50%,-10%)}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-dot{background-color:var(--wz-tabbar-badge-bg-color);border:1.5px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;top:5px;right:0;transform:translate(50%,-50%)}.wz-tabbar-item .wz-tabbar-item-icon .wz-tabbar-item-badge-custom{z-index:1;position:absolute;top:-22px;left:50%;transform:translate(-50%)}.wz-tabbar-item .wz-tabbar-item-badge-bubble{background:var(--wz-warning-color,linear-gradient(135deg,#ff9c38,#fd631a));color:var(--wz-text-color-white,#fff);white-space:nowrap;border-radius:9px;padding:4px 8px;font-size:10px;position:relative}.wz-tabbar-item .wz-tabbar-item-badge-bubble-arrow{content:"";border-top:4px solid #fe7f36;border-left:4px solid #0000;border-right:4px solid #0000;width:0;height:0;margin-left:-4px;position:absolute;bottom:-4px;left:50%}.wz-tabbar-item .wz-tabbar-item-title{font-size:var(--wz-tabbar-item-text-font-size)}.wz-tabbar-item.wz-tabbar-item-active{color:var(--wz-tabbar-item-active-text-color)}.wz-tabbar-item.wz-tabbar-item-hump{position:relative}.wz-tabbar-item.wz-tabbar-item-hump .wz-tabbar-item-icon{background:var(--wz-primary-gradient,linear-gradient(90deg,#77c708 -4%,#34b834 100%));color:var(--wz-text-color-white,#fff);box-sizing:border-box;border:5px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0;display:flex;position:absolute;top:-13px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #00000014}

package/dist/Tabs/index.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, Children } from "react";
+import { useState, useRef, useCallback, Children } from "react";
 const TabPane = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
 const Tabs = ({
   type = "line",
+  align = "center",
   value,
   defaultValue = 0,
   onChange,
@@ -14,33 +15,72 @@ const Tabs = ({
   headerStyle,
   contentClassName = "",
   contentStyle,
-  children
+  children,
+  maxTabs = 5
 }) => {
   const isControlled = value !== void 0;
   const [innerValue, setInnerValue] = useState(defaultValue);
   const activeIndex = isControlled ? value : innerValue;
-  const panes = Children.toArray(children).filter(Boolean);
+  const headerRef = useRef(null);
+  const isDragging = useRef(false);
+  const startX = useRef(0);
+  const scrollLeft = useRef(0);
+  const handleMouseDown = useCallback((e) => {
+    if (align !== "left" || !headerRef.current) return;
+    isDragging.current = true;
+    startX.current = e.pageX - headerRef.current.offsetLeft;
+    scrollLeft.current = headerRef.current.scrollLeft;
+  }, [align]);
+  const handleMouseMove = useCallback((e) => {
+    if (!isDragging.current || !headerRef.current) return;
+    e.preventDefault();
+    const x = e.pageX - headerRef.current.offsetLeft;
+    const walk = (x - startX.current) * 1.5;
+    headerRef.current.scrollLeft = scrollLeft.current - walk;
+  }, []);
+  const handleMouseUp = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  const allPanes = Children.toArray(children).filter(Boolean);
+  const panes = allPanes.slice(0, maxTabs);
   const handleTabClick = (idx, disabled) => {
     if (disabled) return;
     if (!isControlled) setInnerValue(idx);
     onChange == null ? void 0 : onChange(idx);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `wz-tabs wz-tabs-${type} ${className}`, style, children: [
-    /* @__PURE__ */ jsx("div", { className: `wz-tabs-header ${headerClassName}`, style: headerStyle, children: panes.map((pane, idx) => /* @__PURE__ */ jsxs(
+  const cardTabStyle = type === "card" ? {
+    flex: panes.length > 3 ? "0 0 calc((100% - 28px) / 3)" : "1"
+  } : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: `wz-tabs wz-tabs-${type}${align === "left" ? " wz-tabs-align-left" : ""} ${className}`, style, children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: `wz-tabs-tab${idx === activeIndex ? " wz-tabs-tab-active" : ""}${pane.props.disabled ? " wz-tabs-tab-disabled" : ""}`,
-        onClick: () => handleTabClick(idx, pane.props.disabled),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "wz-tabs-tab-text", children: [
-            pane.props.title,
-            pane.props.badge && /* @__PURE__ */ jsx("div", { className: "wz-tabs-badge", children: pane.props.badge })
-          ] }),
-          idx === activeIndex && type === "line" && /* @__PURE__ */ jsx("div", { className: "wz-tabs-underline" })
-        ]
-      },
-      idx
-    )) }),
+        ref: headerRef,
+        className: `wz-tabs-header ${headerClassName}`,
+        style: headerStyle,
+        onMouseDown: handleMouseDown,
+        onMouseMove: handleMouseMove,
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseLeave,
+        children: panes.map((pane, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `wz-tabs-tab${idx === activeIndex ? " wz-tabs-tab-active" : ""}${pane.props.disabled ? " wz-tabs-tab-disabled" : ""}`,
+            style: cardTabStyle,
+            onClick: () => handleTabClick(idx, pane.props.disabled),
+            children: /* @__PURE__ */ jsxs("div", { className: "wz-tabs-tab-text", children: [
+              pane.props.title,
+              pane.props.badge && /* @__PURE__ */ jsx("div", { className: "wz-tabs-badge", children: pane.props.badge }),
+              idx === activeIndex && type === "line" && /* @__PURE__ */ jsx("div", { className: "wz-tabs-underline" })
+            ] })
+          },
+          idx
+        ))
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: `wz-tabs-content ${contentClassName}`, style: contentStyle, children: panes[activeIndex] })
   ] });
 };

package/dist/Tabs/index.umd.cjs

@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],s):(e="undefined"!=typeof globalThis?globalThis:e||self).Tabs=s(e.jsxRuntime,e.React)}(this,(function(e,s){"use strict";const a=({type:a="line",value:t,defaultValue:l=0,onChange:n,className:i="",style:d,headerClassName:r="",headerStyle:c,contentClassName:o="",contentStyle:b,children:u})=>{const m=void 0!==t,[p,h]=s.useState(l),f=m?t:p,x=s.Children.toArray(u).filter(Boolean);return e.jsxs("div",{className:`wz-tabs wz-tabs-${a} ${i}`,style:d,children:[e.jsx("div",{className:`wz-tabs-header ${r}`,style:c,children:x.map(((s,t)=>e.jsxs("div",{className:`wz-tabs-tab${t===f?" wz-tabs-tab-active":""}${s.props.disabled?" wz-tabs-tab-disabled":""}`,onClick:()=>((e,s)=>{s||(m||h(e),null==n||n(e))})(t,s.props.disabled),children:[e.jsxs("div",{className:"wz-tabs-tab-text",children:[s.props.title,s.props.badge&&e.jsx("div",{className:"wz-tabs-badge",children:s.props.badge})]}),t===f&&"line"===a&&e.jsx("div",{className:"wz-tabs-underline"})]},t)))}),e.jsx("div",{className:`wz-tabs-content ${o}`,style:b,children:x[f]})]})};return a.TabPane=({children:s})=>e.jsx(e.Fragment,{children:s}),a}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Tabs=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";const s=({type:s="line",align:a="center",value:r,defaultValue:n=0,onChange:l,className:c="",style:i,headerClassName:u="",headerStyle:o,contentClassName:d="",contentStyle:f,children:b,maxTabs:p=5})=>{const m=void 0!==r,[h,x]=t.useState(n),v=m?r:h,y=t.useRef(null),g=t.useRef(!1),j=t.useRef(0),w=t.useRef(0),z=t.useCallback((e=>{"left"===a&&y.current&&(g.current=!0,j.current=e.pageX-y.current.offsetLeft,w.current=y.current.scrollLeft)}),[a]),N=t.useCallback((e=>{if(!g.current||!y.current)return;e.preventDefault();const t=1.5*(e.pageX-y.current.offsetLeft-j.current);y.current.scrollLeft=w.current-t}),[]),C=t.useCallback((()=>{g.current=!1}),[]),$=t.useCallback((()=>{g.current=!1}),[]),R=t.Children.toArray(b).filter(Boolean).slice(0,p),k="card"===s?{flex:R.length>3?"0 0 calc((100% - 28px) / 3)":"1"}:void 0;return e.jsxs("div",{className:`wz-tabs wz-tabs-${s}${"left"===a?" wz-tabs-align-left":""} ${c}`,style:i,children:[e.jsx("div",{ref:y,className:`wz-tabs-header ${u}`,style:o,onMouseDown:z,onMouseMove:N,onMouseUp:C,onMouseLeave:$,children:R.map(((t,a)=>e.jsx("div",{className:`wz-tabs-tab${a===v?" wz-tabs-tab-active":""}${t.props.disabled?" wz-tabs-tab-disabled":""}`,style:k,onClick:()=>((e,t)=>{t||(m||x(e),null==l||l(e))})(a,t.props.disabled),children:e.jsxs("div",{className:"wz-tabs-tab-text",children:[t.props.title,t.props.badge&&e.jsx("div",{className:"wz-tabs-badge",children:t.props.badge}),a===v&&"line"===s&&e.jsx("div",{className:"wz-tabs-underline"})]})},a)))}),e.jsx("div",{className:`wz-tabs-content ${d}`,style:f,children:R[v]})]})};return s.TabPane=({children:t})=>e.jsx(e.Fragment,{children:t}),s}));

package/dist/Tabs/style/index.css

@@ -1 +1 @@
-.wz-tabs{background:var(--wz-bg-color-white,#fff);box-sizing:border-box;width:100%}.wz-tabs-header{border-bottom:1px solid var(--wz-border-color-base,#dcdfe6);background:var(--wz-bg-color-white,#fff);z-index:1;display:flex;position:relative}.wz-tabs-tab{text-align:center;color:var(--wz-text-color-regular,#666);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:0 0;outline:none;flex:1;padding:12px 0;font-size:14px;transition:color .2s ease-in-out;position:relative}.wz-tabs-tab-active{color:var(--wz-primary-color,#22c94d);font-weight:600}.wz-tabs-tab-disabled{color:var(--wz-disabled-color,#c0c4cc);cursor:not-allowed;opacity:.5}.wz-tabs-tab-text{display:inline-block;position:relative}.wz-tabs-tab .wz-tabs-badge{background-color:var(--wz-danger-color,#ff4d4f);color:var(--wz-text-color-white,#fff);white-space:nowrap;z-index:1;box-sizing:border-box;text-align:center;border-radius:16px;min-width:16px;height:16px;padding:0 4px;font-size:12px;line-height:16px;position:absolute;top:0;right:0;transform:translate(50%,-50%)}.wz-tabs-underline{background:var(--wz-primary-color,#22c94d);border-radius:2px;width:40%;height:2px;transition:all .2s ease-in-out;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.wz-tabs-content{color:var(--wz-text-color-regular,#666);background:var(--wz-bg-color-white,#fff);padding:12px;font-size:14px}.wz-tabs-card .wz-tabs-header{background-color:#0000;border-bottom:none;gap:14px}.wz-tabs-card .wz-tabs-tab{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-text-color-primary,#333);border:none;border-radius:20px;margin:0;padding:6px 16px;font-size:14px;line-height:20px;transition:all .3s}.wz-tabs-card .wz-tabs-tab-active{background-color:var(--wz-primary-color,#22c94d);color:var(--wz-text-color-white,#fff);font-weight:700}.wz-tabs-card .wz-tabs-tab-disabled{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-disabled-color,#ccc);cursor:not-allowed}.wz-tabs-card .wz-tabs-content{padding-top:10px}.wz-tabs-pills .wz-tabs-header{background-color:#0000;border-bottom:none;flex-wrap:wrap;gap:14px}.wz-tabs-pills .wz-tabs-tab{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-text-color-primary,#333);flex:initial;border:none;border-radius:20px;margin:0;padding:6px 16px;font-size:14px;line-height:20px;transition:all .3s}.wz-tabs-pills .wz-tabs-tab-active{background-color:var(--wz-primary-color,#22c94d);color:var(--wz-text-color-white,#fff);font-weight:700}.wz-tabs-pills .wz-tabs-tab-disabled{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-disabled-color,#ccc);cursor:not-allowed}.wz-tabs-pills .wz-tabs-content{padding-top:10px}
+.wz-tabs{background:var(--wz-bg-color-white,#fff);box-sizing:border-box;width:100%}.wz-tabs-header{background:var(--wz-bg-color-white,#fff);z-index:1;padding:9px 14px;display:flex;position:relative}.wz-tabs-tab{text-align:center;color:var(--wz-text-color-regular,#666);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:0 0;outline:none;flex:1;height:22px;font-size:14px;transition:color .2s ease-in-out;position:relative}.wz-tabs-tab-active{color:var(--wz-primary-color,#22c94d);font-weight:600}.wz-tabs-tab-disabled{color:var(--wz-disabled-color,#c0c4cc);cursor:not-allowed;opacity:.5}.wz-tabs-tab-text{padding-bottom:8px;display:inline-block;position:relative}.wz-tabs-tab .wz-tabs-badge{background-color:var(--wz-danger-color,#ff4d4f);color:var(--wz-text-color-white,#fff);white-space:nowrap;z-index:1;box-sizing:border-box;text-align:center;border-radius:16px;min-width:16px;height:16px;padding:0 4px;font-size:12px;line-height:16px;position:absolute;top:0;right:-25%;transform:translate(50%,-50%)}.wz-tabs-underline{background:var(--wz-primary-color,#22c94d);border-radius:2px;width:100%;height:2px;transition:all .2s ease-in-out;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.wz-tabs-content{color:var(--wz-text-color-regular,#666);background:var(--wz-bg-color-white,#fff);padding:12px;font-size:14px}.wz-tabs-align-left .wz-tabs-header{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;padding:9px 0 9px 20px;overflow:auto hidden}.wz-tabs-align-left .wz-tabs-header::-webkit-scrollbar{display:none}.wz-tabs-align-left .wz-tabs-tab{white-space:nowrap;flex:none;margin-right:30px}.wz-tabs-align-left .wz-tabs-tab:last-child{margin-right:20px}.wz-tabs-card .wz-tabs-header{background-color:#0000;border-bottom:none;flex-wrap:wrap;gap:14px;padding:2px 14px}.wz-tabs-card .wz-tabs-tab{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-text-color-primary,#333);box-sizing:border-box;border:none;border-radius:16px;flex:1;min-width:0;height:32px;margin:0;padding:6px 30px;font-size:13px;font-weight:600;transition:all .3s}.wz-tabs-card .wz-tabs-tab-active{background-color:var(--wz-primary-color,#22c94d);color:var(--wz-text-color-white,#fff);font-weight:700}.wz-tabs-card .wz-tabs-tab-disabled{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-disabled-color,#ccc);cursor:not-allowed}.wz-tabs-card .wz-tabs-content{padding-top:10px}.wz-tabs-text .wz-tabs-header{justify-content:flex-start;gap:24px;padding:12px 16px}.wz-tabs-text .wz-tabs-tab{color:var(--wz-text-color-primary,#333);flex:none;font-size:14px;font-weight:500;line-height:22px;transition:all .2s ease-in-out}.wz-tabs-text .wz-tabs-tab-text{padding-bottom:0}.wz-tabs-text .wz-tabs-tab-active{color:#000000d9;font-size:18px;font-weight:500;line-height:26px}.wz-tabs-text .wz-tabs-tab-disabled{color:var(--wz-disabled-color,#ccc);cursor:not-allowed}

package/dist/Tabs/style.css

@@ -1 +1 @@
-.wz-tabs{background:var(--wz-bg-color-white,#fff);box-sizing:border-box;width:100%}.wz-tabs-header{border-bottom:1px solid var(--wz-border-color-base,#dcdfe6);background:var(--wz-bg-color-white,#fff);z-index:1;display:flex;position:relative}.wz-tabs-tab{text-align:center;color:var(--wz-text-color-regular,#666);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:0 0;outline:none;flex:1;padding:12px 0;font-size:14px;transition:color .2s ease-in-out;position:relative}.wz-tabs-tab-active{color:var(--wz-primary-color,#22c94d);font-weight:600}.wz-tabs-tab-disabled{color:var(--wz-disabled-color,#c0c4cc);cursor:not-allowed;opacity:.5}.wz-tabs-tab-text{display:inline-block;position:relative}.wz-tabs-tab .wz-tabs-badge{background-color:var(--wz-danger-color,#ff4d4f);color:var(--wz-text-color-white,#fff);white-space:nowrap;z-index:1;box-sizing:border-box;text-align:center;border-radius:16px;min-width:16px;height:16px;padding:0 4px;font-size:12px;line-height:16px;position:absolute;top:0;right:0;transform:translate(50%,-50%)}.wz-tabs-underline{background:var(--wz-primary-color,#22c94d);border-radius:2px;width:40%;height:2px;transition:all .2s ease-in-out;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.wz-tabs-content{color:var(--wz-text-color-regular,#666);background:var(--wz-bg-color-white,#fff);padding:12px;font-size:14px}.wz-tabs-card .wz-tabs-header{background-color:#0000;border-bottom:none;gap:14px}.wz-tabs-card .wz-tabs-tab{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-text-color-primary,#333);border:none;border-radius:20px;margin:0;padding:6px 16px;font-size:14px;line-height:20px;transition:all .3s}.wz-tabs-card .wz-tabs-tab-active{background-color:var(--wz-primary-color,#22c94d);color:var(--wz-text-color-white,#fff);font-weight:700}.wz-tabs-card .wz-tabs-tab-disabled{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-disabled-color,#ccc);cursor:not-allowed}.wz-tabs-card .wz-tabs-content{padding-top:10px}.wz-tabs-pills .wz-tabs-header{background-color:#0000;border-bottom:none;flex-wrap:wrap;gap:14px}.wz-tabs-pills .wz-tabs-tab{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-text-color-primary,#333);flex:initial;border:none;border-radius:20px;margin:0;padding:6px 16px;font-size:14px;line-height:20px;transition:all .3s}.wz-tabs-pills .wz-tabs-tab-active{background-color:var(--wz-primary-color,#22c94d);color:var(--wz-text-color-white,#fff);font-weight:700}.wz-tabs-pills .wz-tabs-tab-disabled{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-disabled-color,#ccc);cursor:not-allowed}.wz-tabs-pills .wz-tabs-content{padding-top:10px}
+.wz-tabs{background:var(--wz-bg-color-white,#fff);box-sizing:border-box;width:100%}.wz-tabs-header{background:var(--wz-bg-color-white,#fff);z-index:1;padding:9px 14px;display:flex;position:relative}.wz-tabs-tab{text-align:center;color:var(--wz-text-color-regular,#666);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:0 0;outline:none;flex:1;height:22px;font-size:14px;transition:color .2s ease-in-out;position:relative}.wz-tabs-tab-active{color:var(--wz-primary-color,#22c94d);font-weight:600}.wz-tabs-tab-disabled{color:var(--wz-disabled-color,#c0c4cc);cursor:not-allowed;opacity:.5}.wz-tabs-tab-text{padding-bottom:8px;display:inline-block;position:relative}.wz-tabs-tab .wz-tabs-badge{background-color:var(--wz-danger-color,#ff4d4f);color:var(--wz-text-color-white,#fff);white-space:nowrap;z-index:1;box-sizing:border-box;text-align:center;border-radius:16px;min-width:16px;height:16px;padding:0 4px;font-size:12px;line-height:16px;position:absolute;top:0;right:-25%;transform:translate(50%,-50%)}.wz-tabs-underline{background:var(--wz-primary-color,#22c94d);border-radius:2px;width:100%;height:2px;transition:all .2s ease-in-out;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.wz-tabs-content{color:var(--wz-text-color-regular,#666);background:var(--wz-bg-color-white,#fff);padding:12px;font-size:14px}.wz-tabs-align-left .wz-tabs-header{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;padding:9px 0 9px 20px;overflow:auto hidden}.wz-tabs-align-left .wz-tabs-header::-webkit-scrollbar{display:none}.wz-tabs-align-left .wz-tabs-tab{white-space:nowrap;flex:none;margin-right:30px}.wz-tabs-align-left .wz-tabs-tab:last-child{margin-right:20px}.wz-tabs-card .wz-tabs-header{background-color:#0000;border-bottom:none;flex-wrap:wrap;gap:14px;padding:2px 14px}.wz-tabs-card .wz-tabs-tab{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-text-color-primary,#333);box-sizing:border-box;border:none;border-radius:16px;flex:1;min-width:0;height:32px;margin:0;padding:6px 30px;font-size:13px;font-weight:600;transition:all .3s}.wz-tabs-card .wz-tabs-tab-active{background-color:var(--wz-primary-color,#22c94d);color:var(--wz-text-color-white,#fff);font-weight:700}.wz-tabs-card .wz-tabs-tab-disabled{background-color:var(--wz-bg-color-base,#f5f5f5);color:var(--wz-disabled-color,#ccc);cursor:not-allowed}.wz-tabs-card .wz-tabs-content{padding-top:10px}.wz-tabs-text .wz-tabs-header{justify-content:flex-start;gap:24px;padding:12px 16px}.wz-tabs-text .wz-tabs-tab{color:var(--wz-text-color-primary,#333);flex:none;font-size:14px;font-weight:500;line-height:22px;transition:all .2s ease-in-out}.wz-tabs-text .wz-tabs-tab-text{padding-bottom:0}.wz-tabs-text .wz-tabs-tab-active{color:#000000d9;font-size:18px;font-weight:500;line-height:26px}.wz-tabs-text .wz-tabs-tab-disabled{color:var(--wz-disabled-color,#ccc);cursor:not-allowed}

package/dist/Tooltip/index.js

@@ -1,5 +1,5 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useLayoutEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -51,6 +51,33 @@ var classnames = { exports: {} };
 })(classnames);
 var classnamesExports = classnames.exports;
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+const Icon = ({
+  name,
+  size = 24,
+  color = "currentColor",
+  className = "",
+  style,
+  onClick,
+  type = "yunying"
+  // 默认使用yunying图标库
+}) => {
+  const iconStyle = {
+    fontSize: typeof size === "number" ? `${size}px` : size,
+    color,
+    ...style
+  };
+  const iconFontClass = `iconfont-${type}`;
+  const iconPrefix = "icon-";
+  const iconClass = `${iconPrefix}${name}`;
+  return /* @__PURE__ */ jsx(
+    "i",
+    {
+      className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
+      style: iconStyle,
+      onClick
+    }
+  );
+};
 const Tooltip = ({
   content,
   children,
@@ -62,8 +89,9 @@ const Tooltip = ({
   visible,
   onVisibleChange,
   showMask = false,
-  action,
-  closeIcon
+  actionText,
+  onAction,
+  closable = false
 }) => {
   const [internalVisible, setInternalVisible] = useState(false);
   const [computedStyle, setComputedStyle] = useState({});
@@ -78,8 +106,8 @@ const Tooltip = ({
     }
     onVisibleChange == null ? void 0 : onVisibleChange(newVisible);
   };
-  useLayoutEffect(() => {
-    if (currentVisible && tooltipRef.current && triggerRef.current) {
+  const updatePosition = useCallback(() => {
+    if (tooltipRef.current && triggerRef.current) {
       const bubbleEl = tooltipRef.current;
       const triggerEl = triggerRef.current;
       const { width: bubbleWidth, height: bubbleHeight } = bubbleEl.getBoundingClientRect();
@@ -112,7 +140,24 @@ const Tooltip = ({
         "--wz-tooltip-arrow-left": `${arrowLeft}px`
       });
     }
-  }, [currentVisible]);
+  }, []);
+  useLayoutEffect(() => {
+    if (currentVisible) {
+      updatePosition();
+    }
+  }, [currentVisible, updatePosition]);
+  useEffect(() => {
+    if (!currentVisible) return;
+    const handleScroll = () => {
+      updatePosition();
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [currentVisible, updatePosition]);
   const handleWrapperClick = () => {
     if (trigger === "click") {
       handleVisibleChange(!currentVisible);
@@ -134,17 +179,17 @@ const Tooltip = ({
   const renderBubble = () => {
     if (!currentVisible) return null;
     const renderAction = () => {
-      if (!action) return null;
-      const originalOnClick = action.props.onClick;
-      const newOnClick = (e) => {
-        originalOnClick == null ? void 0 : originalOnClick(e);
+      if (!actionText) return null;
+      const handleActionClick = (e) => {
+        e.stopPropagation();
+        onAction == null ? void 0 : onAction();
         handleVisibleChange(false);
       };
-      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__action-slot", children: React.cloneElement(action, { onClick: newOnClick }) });
+      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__action-slot", children: /* @__PURE__ */ jsx("span", { className: "wz-tooltip-bubble__action-btn", onClick: handleActionClick, children: actionText }) });
     };
     const renderCloseIcon = () => {
-      if (!closeIcon) return null;
-      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__close-slot", children: React.cloneElement(closeIcon, { onClick: handleClose }) });
+      if (!closable) return null;
+      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__close-slot", children: /* @__PURE__ */ jsx("span", { className: "wz-tooltip-bubble__close-btn", onClick: handleClose, children: /* @__PURE__ */ jsx(Icon, { name: "close", type: "yunying" }) }) });
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       showMask && /* @__PURE__ */ jsx("div", { className: "wz-tooltip-mask", onClick: handleClose }),

package/dist/Tooltip/index.umd.cjs

@@ -1,6 +1,6 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Tooltip=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n,l={exports:{}};
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Tooltip=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n,i={exports:{}};
 /*!
   	Copyright (c) 2018 Jed Watson.
   	Licensed under the MIT License (MIT), see
   	http://jedwatson.github.io/classnames
-  */n=l,function(){var e={}.hasOwnProperty;function t(){for(var o=[],n=0;n<arguments.length;n++){var l=arguments[n];if(l){var i=typeof l;if("string"===i||"number"===i)o.push(l);else if(Array.isArray(l)){if(l.length){var r=t.apply(null,l);r&&o.push(r)}}else if("object"===i){if(l.toString!==Object.prototype.toString&&!l.toString.toString().includes("[native code]")){o.push(l.toString());continue}for(var s in l)e.call(l,s)&&l[s]&&o.push(s)}}}return o.join(" ")}n.exports?(t.default=t,n.exports=t):window.classNames=t}();const i=o(l.exports);return({content:o,children:n,className:l,style:r,color:s,textColor:c,trigger:a="click",visible:u,onVisibleChange:p,showMask:d=!1,action:f,closeIcon:b})=>{const[h,m]=t.useState(!1),[g,x]=t.useState({}),[w,y]=t.useState("bottom"),j=t.useRef(null),v=t.useRef(null),_=void 0!==u,z=_?u:h,k=e=>{_||m(e),null==p||p(e)};t.useLayoutEffect((()=>{if(z&&j.current&&v.current){const e=j.current,t=v.current,{width:o,height:n}=e.getBoundingClientRect(),{top:l,left:i,width:r,height:s}=t.getBoundingClientRect(),{innerWidth:c,innerHeight:a}=window,u=8;let p,d=i+r/2-o/2,f="bottom";d<u&&(d=u),d+o>c-u&&(d=c-o-u),p=l+s+u,p+n>a-u&&(f="top",p=l-n-u),p<u&&(f="bottom",p=l+s+u);const b=i+r/2-d;y(f),x({top:`${p}px`,left:`${d}px`,"--wz-tooltip-arrow-left":`${b}px`})}}),[z]);const C=e=>{e.stopPropagation(),k(!1)},N=i("wz-tooltip-bubble",`wz-tooltip-bubble--placement-${w}`,l),S={...r,...g,opacity:g.top?1:0,transition:"opacity 150ms ease-in","--wz-tooltip-bubble-bg":s,color:c},R={onClick:()=>{"click"===a&&k(!z)},ref:v};return e.jsxs(e.Fragment,{children:[t.cloneElement(n,R),(()=>{if(!z)return null;return e.jsxs(e.Fragment,{children:[d&&e.jsx("div",{className:"wz-tooltip-mask",onClick:C}),e.jsxs("div",{className:N,style:S,ref:j,children:[e.jsx("div",{className:"wz-tooltip-bubble__arrow"}),e.jsxs("div",{className:"wz-tooltip-bubble__inner",children:[e.jsx("div",{className:"wz-tooltip-bubble__body",children:o}),(()=>{if(!f)return null;const o=f.props.onClick;return e.jsx("div",{className:"wz-tooltip-bubble__action-slot",children:t.cloneElement(f,{onClick:e=>{null==o||o(e),k(!1)}})})})(),b?e.jsx("div",{className:"wz-tooltip-bubble__close-slot",children:t.cloneElement(b,{onClick:C})}):null]})]})]})})()]})}}));
+  */n=i,function(){var e={}.hasOwnProperty;function t(){for(var o=[],n=0;n<arguments.length;n++){var i=arguments[n];if(i){var l=typeof i;if("string"===l||"number"===l)o.push(i);else if(Array.isArray(i)){if(i.length){var r=t.apply(null,i);r&&o.push(r)}}else if("object"===l){if(i.toString!==Object.prototype.toString&&!i.toString.toString().includes("[native code]")){o.push(i.toString());continue}for(var s in i)e.call(i,s)&&i[s]&&o.push(s)}}}return o.join(" ")}n.exports?(t.default=t,n.exports=t):window.classNames=t}();const l=o(i.exports),r=({name:t,size:o=24,color:n="currentColor",className:i="",style:l,onClick:r,type:s="yunying"})=>{const c={fontSize:"number"==typeof o?`${o}px`:o,color:n,...l},a=`iconfont-${s}`,u=`icon-${t}`;return e.jsx("i",{className:`wz-icon ${a} ${u} ${i}`,style:c,onClick:r})};return({content:o,children:n,className:i,style:s,color:c,textColor:a,trigger:u="click",visible:p,onVisibleChange:d,showMask:b=!1,actionText:f,onAction:m,closable:w=!1})=>{const[h,x]=t.useState(!1),[g,y]=t.useState({}),[v,j]=t.useState("bottom"),z=t.useRef(null),_=t.useRef(null),N=void 0!==p,C=N?p:h,k=e=>{N||x(e),null==d||d(e)},$=t.useCallback((()=>{if(z.current&&_.current){const e=z.current,t=_.current,{width:o,height:n}=e.getBoundingClientRect(),{top:i,left:l,width:r,height:s}=t.getBoundingClientRect(),{innerWidth:c,innerHeight:a}=window,u=8;let p,d=l+r/2-o/2,b="bottom";d<u&&(d=u),d+o>c-u&&(d=c-o-u),p=i+s+u,p+n>a-u&&(b="top",p=i-n-u),p<u&&(b="bottom",p=i+s+u);const f=l+r/2-d;j(b),y({top:`${p}px`,left:`${d}px`,"--wz-tooltip-arrow-left":`${f}px`})}}),[]);t.useLayoutEffect((()=>{C&&$()}),[C,$]),t.useEffect((()=>{if(!C)return;const e=()=>{$()};return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}}),[C,$]);const S=e=>{e.stopPropagation(),k(!1)},E=l("wz-tooltip-bubble",`wz-tooltip-bubble--placement-${v}`,i),R={...s,...g,opacity:g.top?1:0,transition:"opacity 150ms ease-in","--wz-tooltip-bubble-bg":c,color:a},L={onClick:()=>{"click"===u&&k(!C)},ref:_};return e.jsxs(e.Fragment,{children:[t.cloneElement(n,L),(()=>{if(!C)return null;return e.jsxs(e.Fragment,{children:[b&&e.jsx("div",{className:"wz-tooltip-mask",onClick:S}),e.jsxs("div",{className:E,style:R,ref:z,children:[e.jsx("div",{className:"wz-tooltip-bubble__arrow"}),e.jsxs("div",{className:"wz-tooltip-bubble__inner",children:[e.jsx("div",{className:"wz-tooltip-bubble__body",children:o}),(()=>{if(!f)return null;return e.jsx("div",{className:"wz-tooltip-bubble__action-slot",children:e.jsx("span",{className:"wz-tooltip-bubble__action-btn",onClick:e=>{e.stopPropagation(),null==m||m(),k(!1)},children:f})})})(),w?e.jsx("div",{className:"wz-tooltip-bubble__close-slot",children:e.jsx("span",{className:"wz-tooltip-bubble__close-btn",onClick:S,children:e.jsx(r,{name:"close",type:"yunying"})})}):null]})]})]})})()]})}}));

package/dist/Tooltip/style/index.css

@@ -1 +1 @@
-.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__close-icon{color:inherit;opacity:.7;order:3;width:16px;height:16px;margin-left:12px;font-size:16px;position:relative;top:auto;right:auto}.wz-tooltip-bubble__close-icon:hover{opacity:1}.wz-tooltip-bubble__content{flex-direction:column;width:100%;padding:16px;display:flex}.wz-tooltip-bubble__title{color:var(--wz-tooltip-bubble-text-color,#333);margin-bottom:8px;font-size:16px;font-weight:500}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}
+.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__action-btn{color:#fff;cursor:pointer;white-space:nowrap;background-color:#22c94d;border-radius:13px;justify-content:center;align-items:center;min-width:67px;height:22px;padding:0 12px;font-size:13px;font-weight:600;line-height:22px;display:inline-flex}.wz-tooltip-bubble__action-btn:active{opacity:.8}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble__close-btn{color:#ccc;cursor:pointer;justify-content:center;align-items:center;display:inline-flex}.wz-tooltip-bubble__close-btn:active{opacity:.7}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}

package/dist/Tooltip/style.css

@@ -1 +1 @@
-.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__close-icon{color:inherit;opacity:.7;order:3;width:16px;height:16px;margin-left:12px;font-size:16px;position:relative;top:auto;right:auto}.wz-tooltip-bubble__close-icon:hover{opacity:1}.wz-tooltip-bubble__content{flex-direction:column;width:100%;padding:16px;display:flex}.wz-tooltip-bubble__title{color:var(--wz-tooltip-bubble-text-color,#333);margin-bottom:8px;font-size:16px;font-weight:500}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}
+.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__action-btn{color:#fff;cursor:pointer;white-space:nowrap;background-color:#22c94d;border-radius:13px;justify-content:center;align-items:center;min-width:67px;height:22px;padding:0 12px;font-size:13px;font-weight:600;line-height:22px;display:inline-flex}.wz-tooltip-bubble__action-btn:active{opacity:.8}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble__close-btn{color:#ccc;cursor:pointer;justify-content:center;align-items:center;display:inline-flex}.wz-tooltip-bubble__close-btn:active{opacity:.7}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}