@bifrostui/react 2.0.0-beta.2 → 2.0.0-beta.5

package/es/TextArea/index.css

@@ -0,0 +1,57 @@
+:root,
+page,
+xhs-page {
+  --bui-textarea-border-radius: var(--bui-shape-radius-label);
+  --bui-textarea-width: 100%;
+  --bui-textarea-background-color: var(--bui-color-bg-default);
+  --bui-textarea-text-color: var(--bui-color-fg-subtle);
+  --bui-textarea-count-background-color: var(--bui-textarea-background-color, var(--bui-color-bg-default));
+  --bui-textarea-count-color: var(--bui-color-fg-subtle);
+  --bui-textarea-text-font-size: var(--bui-text-size-2);
+  --bui-textarea-count-font-size: var(--bui-title-size-3);
+  --bui-textarea-padding: 8px;
+  --bui-textarea-count-padding: 0 4px;
+  --bui-textarea-placeholder-color: #ced1d6;
+  --bui-textarea-placeholder-line-height: 1.3;
+}
+.bui-textarea {
+  background: var(--bui-color-bg-default);
+  border-radius: var(--bui-textarea-border-radius);
+  font-family: var(--bui-font-family);
+  overflow: hidden;
+}
+.bui-textarea textarea {
+  font-size: var(--bui-textarea-text-font-size);
+  color: var(--bui-textarea-text-color);
+  line-height: var(--bui-line-height);
+}
+.bui-textarea .bui-mini-placeholder {
+  color: var(--bui-textarea-placeholder-color);
+}
+.bui-textarea-disabled {
+  pointer-events: none;
+}
+.bui-textarea .a-textarea-count-wrap {
+  display: none;
+}
+.bui-textarea-content {
+  width: var(--bui-textarea-width);
+  resize: none;
+  background-color: var(--bui-textarea-background-color);
+  padding: var(--bui-textarea-padding);
+  border: none;
+  outline: none;
+  word-break: break-all;
+  box-sizing: border-box;
+}
+.bui-textarea-content::placeholder {
+  color: var(--bui-textarea-placeholder-color);
+  line-height: var(--bui-textarea-placeholder-line-height);
+}
+.bui-textarea-count {
+  background-color: var(--bui-textarea-count-background-color);
+  color: var(--bui-textarea-count-color);
+  text-align: right;
+  padding: var(--bui-textarea-count-padding);
+  font-size: var(--bui-textarea-count-font-size);
+}

package/es/ThemeProvider/ThemeProvider.js

@@ -13,7 +13,6 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
       defaultLightToken,
       defaultDarkToken,
       dmLightToken,
-      dmDarkToken,
       token,
       children
     } = props;
@@ -29,7 +28,7 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
       });
     }
     useEffect(() => {
-      if (responsive || defaultLightToken || defaultDarkToken || dmLightToken || dmDarkToken || token) {
+      if (responsive || defaultLightToken || defaultDarkToken || dmLightToken || token) {
         mountTokens({
           isRoot,
           containerId,
@@ -38,7 +37,6 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
           defaultLightToken,
           defaultDarkToken,
           dmLightToken,
-          dmDarkToken,
           token
         });
       }
@@ -49,7 +47,6 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
       defaultLightToken,
       defaultDarkToken,
       dmLightToken,
-      dmDarkToken,
       token
     ]);
     return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: theme }, childrenNode);

package/es/ThemeProvider/ThemeProvider.types.d.ts

@@ -57,7 +57,6 @@ interface ThemeProps {
     /**
      * 当前ThemeProvider是否为最顶层
      * 若当前应用会出现嵌套的ThemeProvider，则需要将最外层的ThemeProvider isRoot属性设置为true
-     * TODO 不通过属性判断
      * @default false
      */
     isRoot?: boolean;
@@ -91,26 +90,22 @@ interface ThemeProps {
      */
     dmLightToken?: Record<string, string>;
     /**
-     * 大麦暗黑主题Token
+     * 先锋版高亮主题Token
      */
-    dmDarkToken?: Record<string, string>;
+    pioneerLightToken?: Record<string, string>;
     /**
-     * 组件全局Token
+     * 组件Token
      */
     token?: Record<string, string>;
 }
 /**
  * 复写内置主题Tokens
  */
-type BuiltInThemesTokenOptions = Pick<ThemeProps, 'defaultLightToken' | 'defaultDarkToken' | 'dmLightToken' | 'dmDarkToken'>;
+type BuiltInThemesTokenOptions = Pick<ThemeProps, 'defaultLightToken' | 'defaultDarkToken' | 'dmLightToken' | 'pioneerLightToken'>;
 /**
  * 挂载组件自定义Tokens参数
  */
 export type MountComponentsTokenOptions = Pick<ThemeProps, 'isRoot' | 'container' | 'containerId' | 'token'>;
-/**
- * 挂载响应式Tokens参数
- */
-type componentsTokenOptions = Pick<ThemeProps, 'token'>;
 export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
     breakpoints?: Breakpoints;
 };
@@ -124,4 +119,4 @@ export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = Ov
     props: P & ThemeProps;
     defaultComponent: D;
 }, D>;
-export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, componentsTokenOptions, };
+export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, };

package/es/ThemeProvider/utils/constants.d.ts

@@ -30,7 +30,7 @@ export declare const rootSelector: {
     defaultLight: string[];
     defaultDark: string[];
     dmLight: string[];
-    dmDark: string[];
+    pioneerLight: string[];
 };
 /**
  * BUI css变量前缀

package/es/ThemeProvider/utils/constants.js

@@ -30,7 +30,10 @@ const rootSelector = {
   ],
   defaultDark: [".bui-dark", '[data-color-mode="dark"][data-theme="default"]'],
   dmLight: [".bui-dm-light", '[data-color-mode="light"][data-theme="dm"]'],
-  dmDark: [".bui-dm-dark", '[data-color-mode="dark"][data-theme="dm"]']
+  pioneerLight: [
+    ".bui-pioneer-light",
+    '[data-color-mode="light"][data-theme="pioneer"]'
+  ]
 };
 const BUI_VAR_PREFIX = "bui-var-";
 export {

package/es/ThemeProvider/utils/mountTokens.d.ts

@@ -1,7 +1,7 @@
 import { ThemeProps, MountResponsiveTokenOptions, BuiltInThemesTokenOptions } from '../ThemeProvider.types';
 /**
  * 挂载响应式自定义Tokens
- * 响应式相关的Tokens挂载在全局根节点上，暗黑模式或大麦高亮主题下可自定义额外Toekns复写响应式Tokens
+ * 将自定义Tokens挂载在rootSelector.defaultLight下，其他主题下可自定义额外Toekns复写响应式Tokens
  */
 export declare const mountResponsiveTokens: (options: MountResponsiveTokenOptions) => void;
 /**
@@ -10,17 +10,17 @@ export declare const mountResponsiveTokens: (options: MountResponsiveTokenOption
  * 1. 默认高亮模式（defaultLightToken 复写 default-light.less）
  * 2. 默认暗黑模式（defaultDarkToken 复写 default-dark.less）
  * 3. 大麦高亮模式（dmLightToken 复写 dm-light.less）
- * 4. 大麦暗黑模式（dmDarkToken 复写 dm-dark.less）
+ * 4. 先锋版高亮模式（pioneerLightToken 复写 pioneer-light.less）
  */
 export declare const overrideBuiltInThemes: (tokenOptions: BuiltInThemesTokenOptions) => void;
 /**
  * 挂载Design Tokens
  * Tokens的优先级：
  * 1. 通常情况：组件的Tokens > 响应式Tokens > BUI内置Tokens（挂载顺序控制）
- * 2. 暗黑模式：组件的Tokens > BUI内置的两种暗黑模式Tokens > 响应式Tokens (选择器权重控制)
+ * 2. 暗黑模式：组件的Tokens > BUI内置的暗黑模式Tokens > 响应式Tokens (选择器权重控制)
  *
  * - 挂载顺序决定BUI内置Tokens（暗黑模式除外）和响应式Tokens的优先级
  * - 选择器权重决定暗黑模式的Tokens和响应式Tokens的优先级
- * - 命名规则决定组件的Tokens（如：--bui-button-xxx）
+ * - 命名规则决定组件的Tokens（如：--bui-btn-xxx）
  */
 export declare const mountTokens: (tokenOptions?: ThemeProps) => void;

package/es/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ToastProps, ToastRef } from './Toast.types';
-import './Toast.less';
+import './index.less';
 declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>>;
 export default ToastComponent;

package/es/Toast/Toast.js

@@ -39,7 +39,7 @@ import {
 } from "@bifrostui/icons";
 import Fade from "../Fade";
 import { useTheme } from "../ThemeProvider";
-import "./Toast.css";
+import "./index.css";
 const prefixCls = "bui-toast";
 const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -68,10 +68,10 @@ const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
     return { theme: themeConfig };
   }, []);
   const iconMap = {
-    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
+    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
+    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
+    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
+    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" })
   };
   const iconDom = iconMap[type] || icon;
   return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(

package/es/Toast/index.css

@@ -0,0 +1,58 @@
+:root,
+page,
+xhs-page {
+  --bui-toast-min-width: 86px;
+  --bui-toast-max-width: 80%;
+  --bui-toast-text-align: center;
+  --bui-toast-flex-direction: column;
+  --bui-toast-padding: var(--bui-spacing-xl);
+  --bui-toast-position-top: 15%;
+  --bui-toast-position-bottom: 85%;
+  --bui-toast-bg-color: rgba(0, 0, 0, 0.8);
+  --bui-toast-border-radius: var(--bui-shape-radius-default);
+  --bui-toast-icon-margin: 0 0 8px;
+  --bui-toast-icon-font-size: 30px;
+}
+.bui-toast {
+  position: fixed;
+  left: 50%;
+  z-index: var(--bui-z-index-toast);
+  width: fit-content;
+  min-width: var(--bui-toast-min-width);
+  max-width: var(--bui-toast-max-width);
+  padding: var(--bui-toast-padding);
+  font-size: var(--bui-text-size-1);
+  color: var(--bui-color-white);
+  border-radius: var(--bui-toast-border-radius);
+  word-break: break-all;
+  white-space: pre-wrap;
+  background-color: var(--bui-toast-bg-color);
+  text-align: var(--bui-toast-text-align);
+  font-family: var(--bui-font-family);
+}
+.bui-toast.bui-toast-allow-click {
+  position: fixed;
+  right: unset;
+  bottom: unset;
+}
+.bui-toast-center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.bui-toast-top {
+  top: var(--bui-toast-position-top);
+  transform: translate(-50%, calc(-1 * var(--bui-toast-position-top)));
+}
+.bui-toast-bottom {
+  top: var(--bui-toast-position-bottom);
+  transform: translate(-50%, calc(-1 * var(--bui-toast-position-bottom)));
+}
+.bui-toast-icon {
+  display: flex;
+  flex-direction: var(--bui-toast-flex-direction);
+  align-items: center;
+}
+.bui-toast-icon .bui-svg-icon {
+  margin: var(--bui-toast-icon-margin);
+  font-size: var(--bui-toast-icon-font-size);
+}

package/es/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TooltipProps } from './Tooltip.types';
-import './Tooltip.less';
+import './index.less';
 declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps<"div", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Tooltip;

package/es/Tooltip/Tooltip.js

@@ -36,7 +36,7 @@ import {
   throttle
 } from "@bifrostui/utils";
 import Portal from "../Portal";
-import "./Tooltip.css";
+import "./index.css";
 const prefixCls = "bui-tooltip";
 const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {

package/es/Tooltip/index.css

@@ -0,0 +1,95 @@
+:root,
+page,
+xhs-page {
+  --bui-tooltip-arrow-size: 8PX;
+  --bui-tooltip-location-position: 8PX;
+  --bui-tooltip-max-width: 350px;
+  --bui-tooltip-content-min-width: 30px;
+  --bui-tooltip-content-min-height: 32px;
+  --bui-tooltip-content-padding: 6px 8px;
+}
+.bui-tooltip {
+  max-width: var(--bui-tooltip-max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-tooltip .bui-tooltip-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-tooltip .bui-tooltip-arrow.location-left {
+  left: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-right {
+  right: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-top {
+  top: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-bottom {
+  bottom: var(--bui-tooltip-location-position);
+}
+.bui-tooltip.tooltip-top .location-center,
+.bui-tooltip.tooltip-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-tooltip.tooltip-left .location-center,
+.bui-tooltip.tooltip-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-tooltip.tooltip-top {
+  padding-bottom: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-top .bui-tooltip-arrow {
+  border-left: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid transparent;
+  border-top: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  bottom: 0;
+}
+.bui-tooltip.tooltip-bottom {
+  padding-top: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
+  border-left: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  top: 0;
+}
+.bui-tooltip.tooltip-left {
+  padding-right: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-left .bui-tooltip-arrow {
+  border-top: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid transparent;
+  border-left: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  right: 0;
+}
+.bui-tooltip.tooltip-right {
+  padding-left: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-right .bui-tooltip-arrow {
+  border-top: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  left: 0;
+}
+.bui-tooltip .bui-tooltip-content {
+  min-width: var(--bui-tooltip-content-min-width);
+  min-height: var(--bui-tooltip-content-min-height);
+  padding: var(--bui-tooltip-content-padding);
+  color: var(--bui-color-white);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-alpha-dark-7);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.5",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -10,6 +10,14 @@
   "directories": {
     "test": "__tests__"
   },
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "module": "./es/index.js",
+      "require": "./dist/index.js"
+    },
+    "./css/*": "./es/*/index.css"
+  },
   "files": [
     "dist",
     "es",
@@ -33,10 +41,10 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "2.0.0-beta.2",
-    "@bifrostui/styles": "2.0.0-beta.2",
-    "@bifrostui/types": "2.0.0-beta.2",
-    "@bifrostui/utils": "2.0.0-beta.2"
+    "@bifrostui/icons": "2.0.0-beta.5",
+    "@bifrostui/styles": "2.0.0-beta.5",
+    "@bifrostui/types": "2.0.0-beta.5",
+    "@bifrostui/utils": "2.0.0-beta.5"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",

package/dist/Breadcrumb/Breadcrumb.css

@@ -1,34 +0,0 @@
-.bui-breadcrumb {
-  --margin: var(--bui-breadcrumb-margin, 0);
-  --padding: var(--bui-breadcrumb-padding, 0);
-  --color: var(--bui-breadcrumb-color, rgba(0, 0, 0, 0.45));
-  --item-separator-margin: var(--bui-breadcrumb-item-separator-margin, 0 8px);
-  --list-li-color: var(--bui-breadcrumb-list-li-color, rgba(0, 0, 0, 0.88));
-  margin: var(--margin);
-  padding: var(--padding);
-  color: var(--color);
-  list-style: none;
-  font-size: var(--bui-text-size-1);
-  line-height: var(--bui-line-height);
-}
-.bui-breadcrumb-list {
-  display: flex;
-  flex-wrap: wrap;
-  margin: var(--margin);
-  padding: var(--padding);
-  list-style: none;
-}
-.bui-breadcrumb-list a {
-  color: var(--color);
-  text-decoration: none;
-  cursor: pointer;
-}
-.bui-breadcrumb-list li:last-child {
-  color: var(--list-li-color);
-}
-.bui-breadcrumb-item {
-  cursor: pointer;
-}
-.bui-breadcrumb-item-separator {
-  margin: var(--item-separator-margin);
-}

package/dist/CitySelector/miniapp.css

@@ -1,4 +0,0 @@
-.bui-city-scroll-view-container {
-  height: 100%;
-  display: block;
-}

package/dist/ItemSelector/miniapp.css

@@ -1,4 +0,0 @@
-.bui-item-scroll-view-container {
-  height: 100%;
-  display: block;
-}

package/dist/NavBar/NavBar.css

@@ -1,61 +0,0 @@
-.bui-navbar {
-  --width: var(--bui-navbar-width, 100%);
-  --height: var(--bui-navbar-height, 45px);
-  --padding: var(--bui-navbar-padding, 0 8px);
-  --icon-size: var(--bui-navbar-icon-size, 24px);
-  --icon-font-size: var(--bui-navbar-icon-font-size, var(--bui-title-size-3));
-  --background-color: var(--bui-navbar-background-color, var(--bui-color-white));
-  --border-bottom: var(--bui-navbar-border-bottom, none);
-  --z-index: var(--bui-navbar-z-index, auto);
-  --title-max-width: var(--bui-navbar-title-max-width, 60%);
-  position: relative;
-  width: var(--width);
-  height: var(--height);
-  box-sizing: border-box;
-  padding: var(--padding);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--background-color);
-  border-bottom: var(--border-bottom);
-  user-select: none;
-  z-index: var(--z-index);
-  font-family: var(--bui-font-family);
-}
-.bui-navbar-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.bui-navbar-title {
-  max-width: var(--title-max-width);
-  padding: var(--padding);
-  font-size: var(--bui-title-size-2);
-  width: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.bui-navbar-left,
-.bui-navbar-right {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  font-size: var(--icon-font-size);
-}
-.bui-navbar-left {
-  justify-content: flex-start;
-  text-align: left;
-}
-.bui-navbar-right {
-  justify-content: flex-end;
-  text-align: right;
-  align-self: stretch;
-}
-.bui-navbar-icon {
-  font-size: var(--icon-size);
-}
-.bui-navbar-placeholder {
-  width: 100%;
-}

package/dist/Progress/Progress.css

@@ -1,24 +0,0 @@
-.bui-progress {
-  --fill-color: var(--bui-progress-fill-color, var(--bui-color-primary));
-  --trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
-  --stroke-width: var(--bui-progress-stroke-width, 8px);
-  --width: var(--bui-progress-width, 100%);
-  --border-radius: var(--bui-progress-border-radius, 100px);
-  width: var(--width);
-  font-family: var(--bui-font-family);
-}
-.bui-progress-inner {
-  position: relative;
-  display: inline-block;
-  width: var(--width);
-  overflow: hidden;
-  vertical-align: middle;
-  background-color: var(--trail-color);
-  border-radius: var(--border-radius);
-}
-.bui-progress-bg {
-  position: relative;
-  border-radius: var(--border-radius);
-  background-color: var(--fill-color);
-  height: var(--stroke-width);
-}

package/dist/Slider/Slider.css

@@ -1,106 +0,0 @@
-.bui-slider {
-  --line-color: var(--bui-slider-line-color, var(--bui-color-primary));
-  --line-bg-color: var(--bui-slider-line-bg-color, var(--bui-color-border-default));
-  --width: var(--bui-slider-width, 100%);
-  --height: var(--bui-slider-height, 2px);
-  --padding: var(--bui-slider-padding, 19px 0);
-  --button-width: var(--bui-slider-button-width, 26px);
-  --button-height: var(--bui-slider-button-height, 26px);
-  --button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
-  --button-border-radius: var(--bui-slider-button-border-radius, 50%);
-  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
-  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
-  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
-  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
-  --tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
-  --tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
-  --tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
-  position: relative;
-  width: var(--width);
-  height: var(--height);
-  padding: var(--padding);
-  box-sizing: border-box;
-  font-family: var(--bui-font-family);
-}
-.bui-slider-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-.bui-slider-line {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  height: var(--height);
-  transform: translateY(-50%);
-  background-color: var(--line-color);
-}
-.bui-slider-rail {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: var(--height);
-  transform: translateY(-50%);
-  background-color: var(--line-bg-color);
-}
-.bui-slider-button {
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  width: var(--button-width);
-  height: var(--button-height);
-  background-color: var(--bui-color-white);
-  box-shadow: #ddd 0 0 10px;
-  border-radius: var(--button-border-radius);
-  transform: translate(-50%, -50%);
-  font-size: var(--bui-title-size-3);
-  cursor: grab;
-}
-.bui-slider-button::after {
-  position: absolute;
-  content: "";
-  top: -10px;
-  bottom: -10px;
-  left: -10px;
-  right: -10px;
-}
-.bui-slider-button-0 {
-  left: 0%;
-  top: 50%;
-  z-index: var(--bui-z-index-affix);
-}
-.bui-slider-button-1 {
-  left: 0%;
-  top: 50%;
-  z-index: var(--bui-z-index-affix);
-}
-.bui-slider-tooltip {
-  position: absolute;
-  top: -14px;
-  width: var(--tooltip-width);
-  height: var(--tooltip-height);
-  line-height: var(--tooltip-line-height);
-  font-size: var(--tooltip-font-size);
-  border-radius: var(--tooltip-border-radius);
-  color: var(--tooltip-color);
-  text-align: center;
-  background-color: var(--tooltip-bg-color);
-  transform: translate(-50%, -50%);
-  z-index: var(--bui-z-index-popover);
-}
-.bui-slider-tooltip::after {
-  position: absolute;
-  bottom: -10px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  content: "";
-  width: 0;
-  height: 0;
-  border: 6px solid transparent;
-  border-top: 6px solid var(--tooltip-bg-color);
-}
-.bui-slider-tooltip-hidden {
-  display: none;
-}