@bifrostui/react 1.4.4-beta.0 → 1.4.5-beta.0

package/dist/Tabs/Tabs.js

@@ -64,14 +64,19 @@ var import_TabsContext = require("./TabsContext");
 var import_bound = __toESM(require("./utils/bound"));
 var import_Tabs2 = require("./Tabs.css");
 const prefixCls = "bui-tabs";
+const defaultProps = {
+  align: "center",
+  tabs: []
+};
 const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
+  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
   const [active, setActive] = (0, import_react.useState)("");
   const tabsRef = (0, import_react.useRef)(null);
   const activeLineRef = (0, import_react.useRef)(null);
   const [lineData, setLineData] = (0, import_react.useState)({
     x: 0,
-    transitionInUse: false
+    transitionInUse: false,
+    hasActiveTab: false
   });
   const [maskData, setMaskData] = (0, import_react.useState)({
     leftMaskOpacity: 0,
@@ -114,7 +119,8 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     }
     setLineData({
       x,
-      transitionInUse
+      transitionInUse,
+      hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0 || !activeTab)
@@ -128,25 +134,6 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       tabsRef.current.scrollLeft = nextScrollLeft;
     }
   };
-  (0, import_react.useEffect)(() => {
-    setActive(value);
-  }, [value]);
-  (0, import_react.useLayoutEffect)(() => {
-    animate({ transitionInUse: false });
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const handleResize = (0, import_utils.debounce)(() => {
-      animate({ transitionInUse: true });
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [active]);
-  (0, import_utils.useDidMountEffect)(() => {
-    animate({ transitionInUse: true });
-  }, [active, tabs, children]);
   const updateMask = (0, import_react.useMemo)(
     () => (0, import_utils.throttle)(
       () => {
@@ -169,6 +156,25 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     ),
     []
   );
+  (0, import_react.useEffect)(() => {
+    setActive(value);
+  }, [value]);
+  (0, import_react.useLayoutEffect)(() => {
+    animate({ transitionInUse: false });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const handleResize = (0, import_utils.debounce)(() => {
+      animate({ transitionInUse: true });
+      updateMask();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [active]);
+  (0, import_utils.useDidMountEffect)(() => {
+    animate({ transitionInUse: true });
+  }, [active, tabs, children]);
   (0, import_react.useLayoutEffect)(() => {
     updateMask();
   }, []);
@@ -210,10 +216,10 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     {
       ref: activeLineRef,
       className: (0, import_clsx.default)(`${prefixCls}-tabline`, {
-        "bui-tabline-invisible": import_utils.isMini || !lineData.x
+        "bui-tabline-invisible": import_utils.isMini || !lineData.hasActiveTab
       }),
       style: {
-        transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
+        transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
         transform: `translate3d(${lineData.x}px, 0px, 0px)`
       }
     }
@@ -230,8 +236,4 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   }), children)));
 });
 Tabs.displayName = "BuiTabs";
-Tabs.defaultProps = {
-  align: "center",
-  tabs: []
-};
 var Tabs_default = Tabs;

package/dist/Tabs/Tabs.types.d.ts

@@ -3,9 +3,6 @@ import React, { SyntheticEvent } from 'react';
 export interface TabHeaderItem {
     title: React.ReactNode;
     index: string;
-    /**
-     * 是否禁止点击
-     */
     disabled?: boolean;
 }
 export interface ITabsChangeData {
@@ -14,11 +11,8 @@ export interface ITabsChangeData {
 }
 export type TabChangeEvent = (e?: SyntheticEvent, data?: ITabsChangeData) => void;
 export interface ITabItem {
-    /** 面板标题 */
     title: React.ReactNode;
-    /** 面板的索引值 */
     index: string;
-    /** 面板是否禁用 */
     disabled?: boolean;
 }
 export type ITabAlign = 'start' | 'center';

package/dist/Tag/Tag.css

@@ -47,7 +47,7 @@
   border: 1px solid var(--bui-color-border-danger);
 }
 .bui-tag-outlined.bui-tag-vip {
-  color: var(--bui-color-red);
+  color: var(--bui-color-primary);
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {

package/dist/Tooltip/Tooltip.css

@@ -1,6 +1,6 @@
 .bui-tooltip {
   --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
-  --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
+  --location-position: var(--bui-tooltip-location-position, 8PX);
   --max-width: var(--bui-tooltip-max-width, 350px);
   --content-min-width: var(--bui-tooltip-content-min-width, 30px);
   --content-min-height: var(--bui-tooltip-content-min-height, 32px);
@@ -17,16 +17,16 @@
   position: absolute;
 }
 .bui-tooltip .bui-tooltip-arrow.location-left {
-  left: var(--localtion-position);
+  left: var(--location-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-right {
-  right: var(--localtion-position);
+  right: var(--location-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-top {
-  top: var(--localtion-position);
+  top: var(--location-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-bottom {
-  bottom: var(--localtion-position);
+  bottom: var(--location-position);
 }
 .bui-tooltip.tooltip-top .location-center,
 .bui-tooltip.tooltip-bottom .location-center {

package/es/ActionSheet/ActionSheet.css

@@ -1,7 +1,7 @@
 .bui-action-sheet {
   --extra-line-height: var(--bui-action-sheet-extra-line-height, 23px);
   --extra-padding: var(--bui-action-sheet-extra-padding, var(--bui-spacing-xl));
-  --extra-magin: var(--bui-action-sheet-extra-magin, 0 var(--bui-spacing-xl));
+  --extra-margin: var(--bui-action-sheet-extra-margin, 0 var(--bui-spacing-xl));
   font-family: var(--bui-font-family);
 }
 .bui-action-sheet-content {
@@ -26,5 +26,5 @@
   background: var(--bui-color-bg-view);
   text-align: center;
   border-bottom: 1px solid var(--bui-color-border-default);
-  margin: var(--extra-magin);
+  margin: var(--extra-margin);
 }

package/es/Button/Button.css

@@ -1,27 +1,16 @@
 .bui-btn {
-  --border-radius: var(--bui-button-border-radius, 100px);
-  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
-  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
-  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
-  --height: var(--bui-button-height, 27px);
-  --icon-start-margin-right: var(--bui-button-icon-start-margin-right, var(--bui-spacing-xs));
-  --icon-start-margin-left: var(--bui-button-icon-start-margin-left, var(--bui-spacing-xs));
-  --default-border: var(--bui-button-default-border, 1px solid transparent);
-  --light-border: var(--bui-button-light-border, 1px solid transparent);
-  --outlined-default-border: var(--bui-button-outlined-default-border, 1px solid var(--bui-color-neutral-4));
-  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
-  --small-padding: var(--bui-button-small-padding, 0 11px);
-  --small-height: var(--bui-button-small-height, 24px);
-  --medium-padding: var(--bui-button-medium-padding, 0 14px);
-  --large-padding: var(--bui-button-large-padding, 0 14px);
-  --large-height: var(--bui-button-large-height, 33px);
-  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
-  --full-height: var(--bui-button-full-height, 42px);
-  border: var(--default-border);
+  --bui-btn-font-size: var(--bui-text-size-3);
+  --bui-btn-font-weight: var(--bui-font-weight-medium);
+  --bui-btn-border-radius: 120px;
+  --bui-btn-height: 27px;
+  --bui-btn-color: var(--bui-color-fg-muted);
+  --bui-btn-bg: var(--bui-color-bg-view);
+  --bui-btn-opacity: 1;
+  --bui-btn-padding: 0 14px;
+  --bui-btn-border: 0;
+  --bui-btn-font-family: var(--bui-font-family);
   outline: 0;
-  background-color: transparent;
   cursor: pointer;
-  color: var(--text-color);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
@@ -29,12 +18,17 @@
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  font-size: var(--bui-text-size-3);
-  font-weight: var(--bui-font-weight-medium);
-  border-radius: var(--border-radius);
-  height: var(--height);
+  color: var(--bui-btn-color);
+  background: var(--bui-btn-bg);
+  font-size: var(--bui-btn-font-size);
+  font-weight: var(--bui-btn-font-weight);
+  border: var(--bui-btn-border);
+  border-radius: var(--bui-btn-border-radius);
+  height: var(--bui-btn-height);
+  padding: var(--bui-btn-padding);
   line-height: var(--bui-line-height);
-  font-family: var(--bui-font-family);
+  font-family: var(--bui-btn-font-family);
+  opacity: var(--bui-btn-opacity);
 }
 @keyframes spin {
   from {
@@ -68,36 +62,31 @@
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-right: var(--icon-start-margin-right);
+  margin-right: var(--bui-spacing-xs);
 }
 .bui-btn-icon-end {
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-left: var(--icon-start-margin-left);
+  margin-left: var(--bui-spacing-xs);
 }
 .bui-btn-disabled {
   pointer-events: none;
-  opacity: var(--disabled-opacity);
+  --bui-btn-opacity: 0.5;
 }
 .bui-btn-small {
-  font-size: var(--bui-text-size-4);
-  padding: var(--small-padding);
-  height: var(--small-height);
-}
-.bui-btn-medium {
-  padding: var(--medium-padding);
-  height: var(--height);
+  --bui-btn-height: 24px;
+  --bui-btn-font-size: var(--bui-text-size-4);
+  --bui-btn-padding: 0 11px;
 }
 .bui-btn-large {
-  font-size: var(--bui-text-size-2);
-  padding: var(--large-padding);
-  height: var(--large-height);
+  --bui-btn-height: 33px;
+  --bui-btn-font-size: var(--bui-text-size-2);
 }
 .bui-btn-full {
-  font-size: var(--full-font-size);
+  --bui-btn-height: 42px;
+  --bui-btn-font-size: var(--bui-title-size-4);
   width: 100%;
-  height: var(--full-height);
 }
 .bui-btn-text.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -118,13 +107,13 @@
   color: var(--bui-color-vip);
 }
 .bui-btn-contained {
-  background-color: var(--bg-color);
+  --bui-btn-bg: var(--bui-color-neutral-5);
 }
 .bui-btn-contained.bui-btn-primary {
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-primary-start) 0%,
       var(--bui-color-primary-end) 100%);
 }
@@ -132,7 +121,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-success-start) 0%,
       var(--bui-color-success-end) 100%);
 }
@@ -140,7 +129,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-info-start) 0%,
       var(--bui-color-info-end) 100%);
 }
@@ -148,7 +137,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-warning-start) 0%,
       var(--bui-color-warning-end) 100%);
 }
@@ -156,20 +145,20 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-danger-start) 0%,
       var(--bui-color-danger-end) 100%);
 }
 .bui-btn-contained.bui-btn-vip {
-  color: #582331;
-  background-image:
+  --bui-btn-color: #582331;
+  --bui-btn-bg:
     linear-gradient(
       90deg,
       var(--bui-color-vip-start) 3%,
       var(--bui-color-vip-end) 100%);
 }
 .bui-btn-outlined {
-  border: var(--outlined-default-border);
+  --bui-btn-border: 1px solid var(--bui-color-neutral-4);
 }
 .bui-btn-outlined.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -196,42 +185,35 @@
   border-color: var(--bui-color-vip);
 }
 .bui-btn-light {
-  background-image: none;
-  background-color: var(--bui-color-gray-light);
-  border: var(--light-border);
+  --bui-btn-bg: var(--bui-color-gray-light);
 }
 .bui-btn-light.bui-btn-warning {
   background-image: none;
-  border: var(--light-border);
   color: var(--bui-color-warning);
   background-color: var(--bui-color-warning-light);
 }
 .bui-btn-light.bui-btn-primary {
   background-image: none;
-  border: var(--light-border);
   color: var(--bui-color-primary);
   background-color: var(--bui-color-primary-light);
 }
 .bui-btn-light.bui-btn-info {
   background-image: none;
-  border: var(--light-border);
   color: var(--bui-color-info);
   background-color: var(--bui-color-info-light);
 }
 .bui-btn-light.bui-btn-success {
   background-image: none;
-  border: var(--light-border);
   color: var(--bui-color-success);
   background-color: var(--bui-color-success-light);
 }
 .bui-btn-light.bui-btn-danger {
   background-image: none;
-  border: var(--light-border);
   color: var(--bui-color-danger);
   background-color: var(--bui-color-danger-light);
 }
 .bui-btn-light.bui-btn-vip {
-  color: var(--bui-color-vip);
   position: relative;
-  background-color: rgba(255, 134, 110, 0.3);
+  --bui-btn-color: var(--bui-color-vip);
+  --bui-btn-bg: rgba(255, 134, 110, 0.3);
 }

package/es/IconButton/IconButton.css

@@ -114,7 +114,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-primary-start) 0%,
       var(--bui-color-primary-end) 100%);
 }
@@ -122,7 +122,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-success-start) 0%,
       var(--bui-color-success-end) 100%);
 }
@@ -130,7 +130,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-info-start) 0%,
       var(--bui-color-info-end) 100%);
 }
@@ -138,7 +138,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-warning-start) 0%,
       var(--bui-color-warning-end) 100%);
 }
@@ -146,7 +146,7 @@
   color: var(--bui-color-white);
   background-image:
     linear-gradient(
-      45deg,
+      90deg,
       var(--bui-color-danger-start) 0%,
       var(--bui-color-danger-end) 100%);
 }

package/es/Input/Input.types.d.ts

@@ -50,7 +50,7 @@ export type InputProps<D extends React.ElementType = 'div', P = {}> = OverridePr
         /**
          * 点击清除图标的回调，非受控状态也会清除输入框内容
          */
-        onClear?: (e: React.SyntheticEvent) => void;
+        onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
         /**
          * 输入框内容变化时的回调
          */
@@ -60,11 +60,11 @@ export type InputProps<D extends React.ElementType = 'div', P = {}> = OverridePr
         /**
          * 聚焦时的回调
          */
-        onFocus?: (e: React.SyntheticEvent) => void;
+        onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
         /**
          * 失焦时的回调
          */
-        onBlur?: (e: React.SyntheticEvent) => void;
+        onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     };
     defaultComponent: D;
 }, D>;

package/es/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Picker/Picker.js

@@ -161,7 +161,10 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
       }
     }
   };
-  const handleSelect = (e, { columnIndex, columnOption }) => {
+  const handleSelect = (e, {
+    columnIndex,
+    columnOption
+  }) => {
     updateItem(e, columnOption, columnIndex);
   };
   const handleClose = (e, data) => {

package/es/Picker/Picker.types.d.ts

@@ -11,11 +11,17 @@ export interface IPickerOptionItem {
      */
     value: string | number;
 }
+export type ICascadePickerChildOptionItem = IPickerOptionItem & {
+    /**
+     * 用于级联选项，子节点可能没有children属性
+     */
+    children?: ICascadePickerChildOptionItem[];
+};
 export type ICascadePickerOptionItem = IPickerOptionItem & {
     /**
-     * 用于级联选项
+     * 用于级联选项，根节点必须含有children属性
      */
-    children?: ICascadePickerOptionItem[];
+    children: ICascadePickerChildOptionItem[];
 };
 export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> = OverrideProps<{
     props: P & {
@@ -44,29 +50,29 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
         /**
          * 点击确认按钮时候回调
          */
-        onConfirm?: (e: React.SyntheticEvent, data: {
+        onConfirm?: (e: React.MouseEvent<HTMLDivElement>, data: {
             value: (string | number)[];
-            options: ICascadePickerOptionItem[];
+            options: ICascadePickerChildOptionItem[][];
         }) => void;
         /**
          * 选项值变更时的回调
          */
-        onOptionChange?: (e: React.SyntheticEvent, data: {
+        onOptionChange?: (e: React.TransitionEvent<HTMLDivElement>, data: {
             value: (string | number)[];
-            options: IPickerOptionItem[][] | ICascadePickerOptionItem[];
-            currentOption: ICascadePickerOptionItem;
+            options: ICascadePickerChildOptionItem[][];
+            currentOption: ICascadePickerChildOptionItem;
         }) => void;
         /**
          * 点击取消按钮时候回调
          */
-        onCancel?: (e: React.SyntheticEvent) => void;
+        onCancel?: (e: React.MouseEvent<HTMLDivElement>) => void;
         /**
          * 关闭选择器时执行
          */
-        onClose?: (e: React.SyntheticEvent, data: {
+        onClose?: (e: React.MouseEvent<HTMLDivElement>, data: {
             from: string;
             value: (string | number)[];
-            options: IPickerOptionItem[][] | ICascadePickerOptionItem[];
+            options: ICascadePickerChildOptionItem[][];
         }) => void;
     };
     defaultComponent: D;
@@ -77,7 +83,7 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
          * 单列面板的列表数据
          * @default []
          */
-        options?: IPickerOptionItem[][] | ICascadePickerOptionItem[];
+        options?: ICascadePickerChildOptionItem[];
         /**
          * 默认值
          */
@@ -93,8 +99,8 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
         /**
          * 选择选项时的回调
          */
-        onSelect?: (e: React.SyntheticEvent, data: {
-            columnOption: IPickerOptionItem[] | ICascadePickerOptionItem;
+        onSelect?: (e: React.TransitionEvent<HTMLDivElement>, data: {
+            columnOption: ICascadePickerChildOptionItem;
             columnIndex: number;
         }) => void;
     };

package/es/Picker/utils.d.ts

@@ -1,4 +1,4 @@
-import { ICascadePickerOptionItem } from './Picker.types';
+import { ICascadePickerOptionItem, ICascadePickerChildOptionItem } from './Picker.types';
 /**
  * 根据第一列数据判断选择器类型
  */
@@ -6,7 +6,7 @@ export declare const pickerPanelType: (options?: any[]) => "multiple" | "single"
 /**
  * 格式化级联模式数据
  */
-export declare const formatCascade: (columns: ICascadePickerOptionItem[], values?: (number | string)[]) => ICascadePickerOptionItem[][];
+export declare const formatCascade: (columns: ICascadePickerOptionItem[], values?: (number | string)[]) => ICascadePickerChildOptionItem[][];
 /**
  * 统一options数据格式
  */

package/es/Popover/Popover.css

@@ -1,6 +1,6 @@
 .bui-popover {
   --arrow-size: var(--bui-popover-arrow-size, 8PX);
-  --localtion-position: var(--bui-popover-localtion-position, 8PX);
+  --location-position: var(--bui-popover-location-position, 8PX);
   --max-width: var(--bui-popover-max-width, 350px);
   --content-min-width: var(--bui-popover-content-min-width, 30px);
   --content-padding: var(--bui-popover-content-padding, 6px 8px);
@@ -16,16 +16,16 @@
   position: absolute;
 }
 .bui-popover .bui-popover-arrow.location-left {
-  left: var(--localtion-position);
+  left: var(--location-position);
 }
 .bui-popover .bui-popover-arrow.location-right {
-  right: var(--localtion-position);
+  right: var(--location-position);
 }
 .bui-popover .bui-popover-arrow.location-top {
-  top: var(--localtion-position);
+  top: var(--location-position);
 }
 .bui-popover .bui-popover-arrow.location-bottom {
-  bottom: var(--localtion-position);
+  bottom: var(--location-position);
 }
 .bui-popover.popover-top .location-center,
 .bui-popover.popover-bottom .location-center {

package/es/Radio/Radio.css

@@ -1,7 +1,6 @@
 .bui-radio {
   --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
   --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
-  --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
   --icon-padding: var(--bui-radio-icon-padding, 5px);
   display: inline-flex;
   align-items: center;

package/es/Tabs/Tab.css

@@ -4,31 +4,31 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: var(--tab-height);
+  height: var(--bui-tab-height);
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--font-size);
+  font-size: var(--bui-tab-font-size);
   line-height: var(--bui-line-height);
-  color: var(--color);
-  padding: var(--tab-padding);
+  color: var(--bui-tabs-color);
+  padding: var(--bui-tab-padding);
   font-family: var(--bui-font-family);
 }
 .bui-tab-active {
-  font-size: var(--font-size);
+  font-size: var(--bui-tab-active-font-size);
   line-height: var(--bui-line-height);
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--active-color);
+  font-weight: var(--bui-tabs-active-font-weight);
+  color: var(--bui-tabs-active-color);
 }
 .bui-tab-center {
   flex: 1 0 0;
   margin: 0 auto;
 }
 .bui-tab-miniapp-active {
-  font-size: var(--font-size);
+  font-size: var(--bui-tab-font-size);
   line-height: 1.5;
   font-weight: var(--bui-font-weight-medium);
-  color: var(--active-color);
+  color: var(--bui-tabs-active-color);
   position: relative;
 }
 .bui-tab-miniapp-active-line {