@bifrostui/react 1.3.1-beta.1 → 1.4.0-beta.0

package/dist/Button/Button.css

@@ -5,6 +5,9 @@
   --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);
@@ -13,7 +16,7 @@
   --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: 1px solid transparent;
+  border: var(--default-border);
   outline: 0;
   background-color: transparent;
   cursor: pointer;
@@ -165,7 +168,7 @@
       var(--bui-color-vip-end) 100%);
 }
 .bui-btn-outlined {
-  border: solid 1px var(--border-color);
+  border: var(--outlined-default-border);
 }
 .bui-btn-outlined.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -194,35 +197,35 @@
 .bui-btn-light {
   background-image: none;
   background-color: var(--bui-color-gray-light);
-  border: 1px solid transparent;
+  border: var(--light-border);
 }
 .bui-btn-light.bui-btn-warning {
   background-image: none;
-  border: 1px solid transparent;
+  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: 1px solid transparent;
+  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: 1px solid transparent;
+  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: 1px solid transparent;
+  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: 1px solid transparent;
+  border: var(--light-border);
   color: var(--bui-color-danger);
   background-color: var(--bui-color-danger-light);
 }

package/dist/Input/Input.css

@@ -1,8 +1,10 @@
 .bui-input {
   --height: var(--bui-input-height, 32px);
   --padding: var(--bui-input-padding, 4px 10px);
+  --border-radius: var(--bui-input-border-radius, var(--bui-shape-radius-default));
   --icon-start-margin-right: var(--bui-input-icon-start-margin-right, 3px);
   --icon-end-margin-left: var(--bui-input-icon-end-margin-left, 3px);
+  --background-color: var(--bui-input-background-color, transparent);
   --disabled-background-color: var(--bui-input-disabled-background-color, rgba(0, 0, 0, 0.04));
   position: relative;
   display: flex;
@@ -10,7 +12,7 @@
   height: var(--height);
   padding: var(--padding);
   box-sizing: border-box;
-  border-radius: var(--bui-shape-radius-default);
+  border-radius: var(--border-radius);
   border: 1px solid var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
@@ -35,7 +37,7 @@
   color: var(--bui-color-fg-default);
   border: none;
   outline: none;
-  background-color: transparent;
+  background-color: var(--background-color);
   font-size: var(--bui-text-size-2);
 }
 .bui-input-input::placeholder {

package/dist/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 | "container" | "open" | "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/dist/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);
+  --arrow-size: var(--bui-popover-arrow-size, 8PX);
+  --localtion-position: var(--bui-popover-localtion-position, 8PX);
   --max-width: var(--bui-popover-max-width, 350px);
   --content-min-width: var(--bui-popover-content-min-width, 30px);
   --content-min-height: var(--bui-popover-content-min-height, 32px);

package/dist/Popover/Popover.js

@@ -93,6 +93,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "hideArrow",
     "PortalProps"
   ]);
+  const controlByUser = typeof open !== "undefined";
   const positionArr = placement.split(/([A-Z])/);
   const direction = positionArr[0];
   let location;
@@ -108,6 +109,11 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
   const [tooltyles, setTooltyles] = (0, import_react.useState)({});
   const ttId = (0, import_utils.useUniqueId)();
+  (0, import_react.useEffect)(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open]);
   const onRootElementMouted = () => {
     const result = (0, import_utils.getStylesAndLocation)({
       childrenRef,
@@ -127,7 +133,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     setTooltyles(styles);
   };
   const changeOpenStatus = (event, status) => {
-    if (open)
+    if (controlByUser)
       return;
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
@@ -144,12 +150,15 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   };
   if (!title && !content)
     return null;
-  const triggerEventOption = (0, import_utils.triggerEventTransform)({
-    trigger,
-    click: triggerClick,
-    show: showPopover,
-    hide: hidePopover
-  });
+  let triggerEventOption;
+  if (!controlByUser) {
+    triggerEventOption = (0, import_utils.triggerEventTransform)({
+      trigger,
+      click: triggerClick,
+      show: showPopover,
+      hide: hidePopover
+    });
+  }
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);

package/dist/Popover/Popover.types.d.ts

@@ -11,7 +11,6 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
         defaultOpen?: boolean;
         /**
          * 用于手动控制浮层显隐
-         * @default false
          */
         open?: boolean;
         /**

package/dist/Progress/Progress.css

@@ -1,5 +1,5 @@
 .bui-progress {
-  --fill-color: var(--bui-color-primary);
+  --fill-color: var(--bui-progress-fill-color, --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%);

package/dist/Radio/Radio.css

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

package/dist/Skeleton/Skeleton.css

@@ -1,5 +1,4 @@
 .bui-skeleton {
-  --border-radius: var(--bui-shape-radius-label);
   --height: var(--bui-skeleton-height, 1.2em);
   display: block;
 }
@@ -21,7 +20,7 @@
   height: auto;
   transform-origin: 0 55%;
   transform: scale(1, 0.6);
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-text::before {
   content: "\a0";
@@ -31,7 +30,7 @@
 }
 .bui-skeleton-rounded {
   height: var(--height);
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-circular {
   border-radius: 50%;

package/dist/Slider/Slider.css

@@ -1,9 +1,6 @@
 .bui-slider {
-  --line-color: var(--bui-color-primary);
-  --line-bg-color: var(--bui-color-border-default);
-  --tooltip-font-size: var(--bui-text-size-3);
-  --tooltip-color: var(--bui-color-white);
-  --tooltip-bg-color: var(--line-color);
+  --line-color: var(--bui-slider-line-color, --bui-color-primary);
+  --line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
   --width: var(--bui-slider-width, 100%);
   --height: var(--bui-slider-height, 2px);
   --padding: var(--bui-slider-padding, 19px 0);
@@ -15,6 +12,9 @@
   --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, --bui-text-size-3);
+  --tooltip-color: var(--bui-tooltip-color, --bui-color-white);
+  --tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
   position: relative;
   width: var(--width);
   height: var(--height);

package/dist/Steps/Step.css

@@ -71,8 +71,8 @@
   align-items: flex-start;
 }
 .bui-step-title {
-  font-size: var(--title-font-size);
-  font-weight: var(--title-font-weight);
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-medium);
   width: auto;
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/Steps/Steps.css

@@ -1,7 +1,5 @@
 .bui-steps {
   --font-size: var(--bui-steps-font-size, var(--bui-title-size-3));
-  --title-font-size: var(--bui-title-size-4);
-  --title-font-weight: var(--bui-font-weight-medium);
   --subtitle-font-size: var(--bui-step-subtitle-font-size, var(--bui-text-size-2));
   --step-line-padding: var(--bui-step-line-padding, 20px 0 3px 0);
   --step-line-width: var(--bui-step-line-width, 1px);

package/dist/Tabs/Tab.css

@@ -8,20 +8,20 @@
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--font-size);
+  font-size: var(--bui-text-size-1);
   line-height: var(--bui-line-height);
   color: var(--color);
   padding: var(--tab-padding);
   font-family: var(--bui-font-family);
 }
 .bui-tab-active {
-  font-size: var(--font-size);
+  font-size: var(--bui-text-size-1);
   line-height: var(--bui-line-height);
   font-weight: var(--bui-font-weight-medium);
   color: var(--active-color);
 }
 .bui-tab-miniapp-active {
-  font-size: var(--font-size);
+  font-size: var(--bui-text-size-1);
   line-height: 1.5;
   font-weight: var(--bui-font-weight-medium);
   color: var(--active-color);
@@ -36,7 +36,7 @@
   width: 18px;
   height: 2px;
   transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: var(--line-color);
+  background-color: var(--bui-color-primary);
 }
 .bui-tab-disabled {
   opacity: 0.5;

package/dist/Tabs/Tabs.css

@@ -1,9 +1,7 @@
 .bui-tabs {
   --height: var(--bui-tabs-height, 39px);
-  --font-size: var(--bui-text-size-1);
-  --color: var(--bui-color-fg-subtle);
-  --active-color: var(--bui-color-fg-default);
-  --line-color: var(--bui-color-primary);
+  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
+  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
   --line-height: var(--bui-tabs-line-height, 3PX);
   --line-width: var(--bui-tabs-line-width, 18px);
   --mask-height: var(--bui-tabs-mask-height, 100%);
@@ -31,7 +29,7 @@
   bottom: 0;
   height: var(--line-height);
   color: var(--bui-color-primary);
-  background: var(--line-color);
+  background: var(--bui-color-primary);
   border-radius: var(--bui-shape-radius-label);
 }
 .bui-tabs-content {

package/dist/TextArea/TextArea.css

@@ -1,6 +1,7 @@
 .bui-textarea {
+  --border-radius: var(--bui-textarea-border-radius, var(--bui-shape-radius-label));
   --width: var(--bui-textarea-width, 100%);
-  --bg-color: var(--bui-color-bg-default);
+  --bg-color: var(--bui-textarea-background-color, var(--bui-color-bg-default));
   --text-color: var(--bui-textarea-text-color, var(--bui-color-fg-subtle));
   --count-bg-color: var(--bg-color, var(--bui-color-bg-default));
   --count-text-color: var(--bui-textarea-count-color, var(--bui-color-fg-subtle));
@@ -8,9 +9,12 @@
   --count-font-size: var(--bui-textarea-count-font-size, var(--bui-title-size-3));
   --content-padding: var(--bui-textarea-padding, 8px);
   --count-padding: var(--bui-textarea-count-padding, 0 4px);
+  --placeholder-color: var(--bui-textarea-placeholder-color, #ced1d6);
   --placeholder-line-height: var(--bui-textarea-placeholder-line-height, 1.3);
   background: var(--bui-color-bg-default);
+  border-radius: var(--border-radius);
   font-family: var(--bui-font-family);
+  overflow: hidden;
 }
 .bui-textarea textarea {
   font-size: var(--text-font-size);
@@ -18,7 +22,7 @@
   line-height: var(--bui-line-height);
 }
 .bui-textarea .bui-mini-placeholder {
-  color: var(--bui-color-fg-disabled);
+  color: var(--placeholder-color);
 }
 .bui-textarea-disabled {
   pointer-events: none;
@@ -29,7 +33,7 @@
 .bui-textarea-content {
   width: var(--width);
   resize: none;
-  background: var(--bg-color);
+  background-color: var(--bg-color);
   padding: var(--content-padding);
   border: none;
   outline: none;
@@ -37,11 +41,11 @@
   box-sizing: border-box;
 }
 .bui-textarea-content::placeholder {
-  color: var(--bui-color-fg-disabled);
+  color: var(--placeholder-color);
   line-height: var(--placeholder-line-height);
 }
 .bui-textarea-count {
-  background: var(--count-bg-color);
+  background-color: var(--count-bg-color);
   color: var(--count-text-color);
   text-align: right;
   padding: var(--count-padding);

package/dist/Toast/Toast.css

@@ -3,18 +3,15 @@
   --max-width: var(--bui-toast-max-width, 80%);
   --flex-direction: var(--bui-toast-flex-direction, column);
   --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
-  --word-break: break-all;
-  --z-index: var(--bui-z-index-toast);
   --position-top: var(--bui-toast-position-top, 15%);
   --position-bottom: var(--bui-toast-position-bottom, 85%);
   --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
   --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
   --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
   --icon-font-size: var(--bui-toast-icon-font-size, 30px);
-  --text-align: center;
   position: fixed;
   left: 50%;
-  z-index: var(--z-index);
+  z-index: var(--bui-z-index-toast);
   width: fit-content;
   min-width: var(--min-width);
   max-width: var(--max-width);
@@ -22,10 +19,10 @@
   font-size: var(--bui-text-size-1);
   color: var(--bui-color-white);
   border-radius: var(--border-radius);
-  word-break: var(--word-break);
+  word-break: break-all;
   white-space: pre-wrap;
   background-color: var(--background-color);
-  text-align: var(--text-align);
+  text-align: center;
   font-family: var(--bui-font-family);
 }
 .bui-toast.bui-toast-allow-click {

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);
+  --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
+  --localtion-position: var(--bui-tooltip-localtion-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);

package/dist/Tooltip/Tooltip.js

@@ -89,6 +89,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "open",
     "PortalProps"
   ]);
+  const controlByUser = typeof open !== "undefined";
   const positionArr = placement.split(/([A-Z])/);
   const direction = positionArr[0];
   let location;
@@ -104,6 +105,11 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
   const [tooltyles, setTooltyles] = (0, import_react.useState)({});
   const ttId = (0, import_utils.useUniqueId)();
+  (0, import_react.useEffect)(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open]);
   const onRootElementMouted = () => {
     const result = (0, import_utils.getStylesAndLocation)({
       childrenRef,
@@ -123,7 +129,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     setTooltyles(styles);
   };
   const changeOpenStatus = (event, status) => {
-    if (open)
+    if (controlByUser)
       return;
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
@@ -138,12 +144,15 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const showTooltip = (event) => {
     changeOpenStatus(event, true);
   };
-  const triggerEventOption = (0, import_utils.triggerEventTransform)({
-    trigger,
-    click: triggerClick,
-    show: showTooltip,
-    hide: hideTooltip
-  });
+  let triggerEventOption;
+  if (!controlByUser) {
+    triggerEventOption = (0, import_utils.triggerEventTransform)({
+      trigger,
+      click: triggerClick,
+      show: showTooltip,
+      hide: hideTooltip
+    });
+  }
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);

package/dist/Tooltip/Tooltip.types.d.ts

@@ -15,7 +15,6 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
         defaultOpen?: boolean;
         /**
          * 用于手动控制气泡浮层显隐
-         * @default false
          */
         open?: boolean;
         /**

package/es/Button/Button.css

@@ -5,6 +5,9 @@
   --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);
@@ -13,7 +16,7 @@
   --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: 1px solid transparent;
+  border: var(--default-border);
   outline: 0;
   background-color: transparent;
   cursor: pointer;
@@ -165,7 +168,7 @@
       var(--bui-color-vip-end) 100%);
 }
 .bui-btn-outlined {
-  border: solid 1px var(--border-color);
+  border: var(--outlined-default-border);
 }
 .bui-btn-outlined.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -194,35 +197,35 @@
 .bui-btn-light {
   background-image: none;
   background-color: var(--bui-color-gray-light);
-  border: 1px solid transparent;
+  border: var(--light-border);
 }
 .bui-btn-light.bui-btn-warning {
   background-image: none;
-  border: 1px solid transparent;
+  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: 1px solid transparent;
+  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: 1px solid transparent;
+  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: 1px solid transparent;
+  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: 1px solid transparent;
+  border: var(--light-border);
   color: var(--bui-color-danger);
   background-color: var(--bui-color-danger-light);
 }

package/es/Input/Input.css

@@ -1,8 +1,10 @@
 .bui-input {
   --height: var(--bui-input-height, 32px);
   --padding: var(--bui-input-padding, 4px 10px);
+  --border-radius: var(--bui-input-border-radius, var(--bui-shape-radius-default));
   --icon-start-margin-right: var(--bui-input-icon-start-margin-right, 3px);
   --icon-end-margin-left: var(--bui-input-icon-end-margin-left, 3px);
+  --background-color: var(--bui-input-background-color, transparent);
   --disabled-background-color: var(--bui-input-disabled-background-color, rgba(0, 0, 0, 0.04));
   position: relative;
   display: flex;
@@ -10,7 +12,7 @@
   height: var(--height);
   padding: var(--padding);
   box-sizing: border-box;
-  border-radius: var(--bui-shape-radius-default);
+  border-radius: var(--border-radius);
   border: 1px solid var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
@@ -35,7 +37,7 @@
   color: var(--bui-color-fg-default);
   border: none;
   outline: none;
-  background-color: transparent;
+  background-color: var(--background-color);
   font-size: var(--bui-text-size-2);
 }
 .bui-input-input::placeholder {

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>;
-}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "onClose" | "keepMounted" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "disableScrollLock">, "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/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);
+  --arrow-size: var(--bui-popover-arrow-size, 8PX);
+  --localtion-position: var(--bui-popover-localtion-position, 8PX);
   --max-width: var(--bui-popover-max-width, 350px);
   --content-min-width: var(--bui-popover-content-min-width, 30px);
   --content-min-height: var(--bui-popover-content-min-height, 32px);

package/es/Popover/Popover.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
   getStylesAndLocation,
   triggerEventTransform,
@@ -67,6 +67,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "hideArrow",
     "PortalProps"
   ]);
+  const controlByUser = typeof open !== "undefined";
   const positionArr = placement.split(/([A-Z])/);
   const direction = positionArr[0];
   let location;
@@ -82,6 +83,11 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [arrowLocation, setArrowLocation] = useState(location);
   const [tooltyles, setTooltyles] = useState({});
   const ttId = useUniqueId();
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open]);
   const onRootElementMouted = () => {
     const result = getStylesAndLocation({
       childrenRef,
@@ -101,7 +107,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     setTooltyles(styles);
   };
   const changeOpenStatus = (event, status) => {
-    if (open)
+    if (controlByUser)
       return;
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
@@ -118,12 +124,15 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
   };
   if (!title && !content)
     return null;
-  const triggerEventOption = triggerEventTransform({
-    trigger,
-    click: triggerClick,
-    show: showPopover,
-    hide: hidePopover
-  });
+  let triggerEventOption;
+  if (!controlByUser) {
+    triggerEventOption = triggerEventTransform({
+      trigger,
+      click: triggerClick,
+      show: showPopover,
+      hide: hidePopover
+    });
+  }
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);

package/es/Popover/Popover.types.d.ts

@@ -11,7 +11,6 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
         defaultOpen?: boolean;
         /**
          * 用于手动控制浮层显隐
-         * @default false
          */
         open?: boolean;
         /**

package/es/Progress/Progress.css

@@ -1,5 +1,5 @@
 .bui-progress {
-  --fill-color: var(--bui-color-primary);
+  --fill-color: var(--bui-progress-fill-color, --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%);

package/es/Radio/Radio.css

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

package/es/Skeleton/Skeleton.css

@@ -1,5 +1,4 @@
 .bui-skeleton {
-  --border-radius: var(--bui-shape-radius-label);
   --height: var(--bui-skeleton-height, 1.2em);
   display: block;
 }
@@ -21,7 +20,7 @@
   height: auto;
   transform-origin: 0 55%;
   transform: scale(1, 0.6);
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-text::before {
   content: "\a0";
@@ -31,7 +30,7 @@
 }
 .bui-skeleton-rounded {
   height: var(--height);
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-circular {
   border-radius: 50%;

package/es/Slider/Slider.css

@@ -1,9 +1,6 @@
 .bui-slider {
-  --line-color: var(--bui-color-primary);
-  --line-bg-color: var(--bui-color-border-default);
-  --tooltip-font-size: var(--bui-text-size-3);
-  --tooltip-color: var(--bui-color-white);
-  --tooltip-bg-color: var(--line-color);
+  --line-color: var(--bui-slider-line-color, --bui-color-primary);
+  --line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
   --width: var(--bui-slider-width, 100%);
   --height: var(--bui-slider-height, 2px);
   --padding: var(--bui-slider-padding, 19px 0);
@@ -15,6 +12,9 @@
   --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, --bui-text-size-3);
+  --tooltip-color: var(--bui-tooltip-color, --bui-color-white);
+  --tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
   position: relative;
   width: var(--width);
   height: var(--height);

package/es/Steps/Step.css

@@ -71,8 +71,8 @@
   align-items: flex-start;
 }
 .bui-step-title {
-  font-size: var(--title-font-size);
-  font-weight: var(--title-font-weight);
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-medium);
   width: auto;
   overflow: hidden;
   text-overflow: ellipsis;

package/es/Steps/Steps.css

@@ -1,7 +1,5 @@
 .bui-steps {
   --font-size: var(--bui-steps-font-size, var(--bui-title-size-3));
-  --title-font-size: var(--bui-title-size-4);
-  --title-font-weight: var(--bui-font-weight-medium);
   --subtitle-font-size: var(--bui-step-subtitle-font-size, var(--bui-text-size-2));
   --step-line-padding: var(--bui-step-line-padding, 20px 0 3px 0);
   --step-line-width: var(--bui-step-line-width, 1px);

package/es/Tabs/Tab.css

@@ -8,20 +8,20 @@
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--font-size);
+  font-size: var(--bui-text-size-1);
   line-height: var(--bui-line-height);
   color: var(--color);
   padding: var(--tab-padding);
   font-family: var(--bui-font-family);
 }
 .bui-tab-active {
-  font-size: var(--font-size);
+  font-size: var(--bui-text-size-1);
   line-height: var(--bui-line-height);
   font-weight: var(--bui-font-weight-medium);
   color: var(--active-color);
 }
 .bui-tab-miniapp-active {
-  font-size: var(--font-size);
+  font-size: var(--bui-text-size-1);
   line-height: 1.5;
   font-weight: var(--bui-font-weight-medium);
   color: var(--active-color);
@@ -36,7 +36,7 @@
   width: 18px;
   height: 2px;
   transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: var(--line-color);
+  background-color: var(--bui-color-primary);
 }
 .bui-tab-disabled {
   opacity: 0.5;

package/es/Tabs/Tabs.css

@@ -1,9 +1,7 @@
 .bui-tabs {
   --height: var(--bui-tabs-height, 39px);
-  --font-size: var(--bui-text-size-1);
-  --color: var(--bui-color-fg-subtle);
-  --active-color: var(--bui-color-fg-default);
-  --line-color: var(--bui-color-primary);
+  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
+  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
   --line-height: var(--bui-tabs-line-height, 3PX);
   --line-width: var(--bui-tabs-line-width, 18px);
   --mask-height: var(--bui-tabs-mask-height, 100%);
@@ -31,7 +29,7 @@
   bottom: 0;
   height: var(--line-height);
   color: var(--bui-color-primary);
-  background: var(--line-color);
+  background: var(--bui-color-primary);
   border-radius: var(--bui-shape-radius-label);
 }
 .bui-tabs-content {

package/es/TextArea/TextArea.css

@@ -1,6 +1,7 @@
 .bui-textarea {
+  --border-radius: var(--bui-textarea-border-radius, var(--bui-shape-radius-label));
   --width: var(--bui-textarea-width, 100%);
-  --bg-color: var(--bui-color-bg-default);
+  --bg-color: var(--bui-textarea-background-color, var(--bui-color-bg-default));
   --text-color: var(--bui-textarea-text-color, var(--bui-color-fg-subtle));
   --count-bg-color: var(--bg-color, var(--bui-color-bg-default));
   --count-text-color: var(--bui-textarea-count-color, var(--bui-color-fg-subtle));
@@ -8,9 +9,12 @@
   --count-font-size: var(--bui-textarea-count-font-size, var(--bui-title-size-3));
   --content-padding: var(--bui-textarea-padding, 8px);
   --count-padding: var(--bui-textarea-count-padding, 0 4px);
+  --placeholder-color: var(--bui-textarea-placeholder-color, #ced1d6);
   --placeholder-line-height: var(--bui-textarea-placeholder-line-height, 1.3);
   background: var(--bui-color-bg-default);
+  border-radius: var(--border-radius);
   font-family: var(--bui-font-family);
+  overflow: hidden;
 }
 .bui-textarea textarea {
   font-size: var(--text-font-size);
@@ -18,7 +22,7 @@
   line-height: var(--bui-line-height);
 }
 .bui-textarea .bui-mini-placeholder {
-  color: var(--bui-color-fg-disabled);
+  color: var(--placeholder-color);
 }
 .bui-textarea-disabled {
   pointer-events: none;
@@ -29,7 +33,7 @@
 .bui-textarea-content {
   width: var(--width);
   resize: none;
-  background: var(--bg-color);
+  background-color: var(--bg-color);
   padding: var(--content-padding);
   border: none;
   outline: none;
@@ -37,11 +41,11 @@
   box-sizing: border-box;
 }
 .bui-textarea-content::placeholder {
-  color: var(--bui-color-fg-disabled);
+  color: var(--placeholder-color);
   line-height: var(--placeholder-line-height);
 }
 .bui-textarea-count {
-  background: var(--count-bg-color);
+  background-color: var(--count-bg-color);
   color: var(--count-text-color);
   text-align: right;
   padding: var(--count-padding);

package/es/Toast/Toast.css

@@ -3,18 +3,15 @@
   --max-width: var(--bui-toast-max-width, 80%);
   --flex-direction: var(--bui-toast-flex-direction, column);
   --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
-  --word-break: break-all;
-  --z-index: var(--bui-z-index-toast);
   --position-top: var(--bui-toast-position-top, 15%);
   --position-bottom: var(--bui-toast-position-bottom, 85%);
   --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
   --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
   --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
   --icon-font-size: var(--bui-toast-icon-font-size, 30px);
-  --text-align: center;
   position: fixed;
   left: 50%;
-  z-index: var(--z-index);
+  z-index: var(--bui-z-index-toast);
   width: fit-content;
   min-width: var(--min-width);
   max-width: var(--max-width);
@@ -22,10 +19,10 @@
   font-size: var(--bui-text-size-1);
   color: var(--bui-color-white);
   border-radius: var(--border-radius);
-  word-break: var(--word-break);
+  word-break: break-all;
   white-space: pre-wrap;
   background-color: var(--background-color);
-  text-align: var(--text-align);
+  text-align: center;
   font-family: var(--bui-font-family);
 }
 .bui-toast.bui-toast-allow-click {

package/es/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);
+  --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
+  --localtion-position: var(--bui-tooltip-localtion-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);

package/es/Tooltip/Tooltip.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
   getStylesAndLocation,
   triggerEventTransform,
@@ -63,6 +63,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "open",
     "PortalProps"
   ]);
+  const controlByUser = typeof open !== "undefined";
   const positionArr = placement.split(/([A-Z])/);
   const direction = positionArr[0];
   let location;
@@ -78,6 +79,11 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [arrowLocation, setArrowLocation] = useState(location);
   const [tooltyles, setTooltyles] = useState({});
   const ttId = useUniqueId();
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open]);
   const onRootElementMouted = () => {
     const result = getStylesAndLocation({
       childrenRef,
@@ -97,7 +103,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     setTooltyles(styles);
   };
   const changeOpenStatus = (event, status) => {
-    if (open)
+    if (controlByUser)
       return;
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
@@ -112,12 +118,15 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const showTooltip = (event) => {
     changeOpenStatus(event, true);
   };
-  const triggerEventOption = triggerEventTransform({
-    trigger,
-    click: triggerClick,
-    show: showTooltip,
-    hide: hideTooltip
-  });
+  let triggerEventOption;
+  if (!controlByUser) {
+    triggerEventOption = triggerEventTransform({
+      trigger,
+      click: triggerClick,
+      show: showTooltip,
+      hide: hideTooltip
+    });
+  }
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);

package/es/Tooltip/Tooltip.types.d.ts

@@ -15,7 +15,6 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
         defaultOpen?: boolean;
         /**
          * 用于手动控制气泡浮层显隐
-         * @default false
          */
         open?: boolean;
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.3.1-beta.1",
+  "version": "1.4.0-beta.0",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.3.1-beta.1",
-    "@bifrostui/utils": "1.3.1-beta.1",
-    "@bifrostui/types": "1.3.1-beta.1",
-    "@bifrostui/styles": "1.3.1-beta.1"
+    "@bifrostui/icons": "1.4.0-beta.0",
+    "@bifrostui/types": "1.4.0-beta.0",
+    "@bifrostui/styles": "1.4.0-beta.0",
+    "@bifrostui/utils": "1.4.0-beta.0"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",