@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Slider/Slider.js

@@ -80,8 +80,8 @@ var import_icons = require("@bifrostui/icons");
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Slider = require("./Slider.css");
 var import_utils2 = require("./utils");
+var import_index = require("./index.css");
 const classes = {
   root: "bui-slider",
   button: "bui-slider-button",
@@ -97,15 +97,15 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     className,
     defaultValue,
     value: valueProp,
-    min,
-    max,
-    step,
-    tipVisible,
-    tooltipRender,
+    min = 0,
+    max = 100,
+    step = 1,
+    tipVisible = false,
+    tooltipRender = (value2) => value2,
     disabled,
     startIcon,
     endIcon,
-    disableSwap,
+    disableSwap = false,
     onChange
   } = _a, others = __objRest(_a, [
     "className",
@@ -133,7 +133,7 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const touchStartLeft = (0, import_react.useRef)();
   const buttonIndex = (0, import_react.useRef)(0);
   const beforeMoveValue = (0, import_react.useRef)([0, 0]);
-  const defaultIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.GripperBarVerticalIcon, { htmlColor: "#2e333e" });
+  const defaultIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.GripperBarVerticalIcon, { htmlColor: "var(--bui-color-fg-default)" });
   const initialRange = (0, import_react.useRef)(
     value !== void 0 && Array.isArray(value) || defaultValue !== void 0 && Array.isArray(defaultValue)
   );
@@ -322,12 +322,4 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 Slider.displayName = "BuiSlider";
-Slider.defaultProps = {
-  min: 0,
-  max: 100,
-  step: 1,
-  disableSwap: false,
-  tipVisible: false,
-  tooltipRender: (value) => value
-};
 var Slider_default = Slider;

package/dist/Slider/index.css

@@ -0,0 +1,111 @@
+:root,
+page,
+xhs-page {
+  --bui-slider-line-color: var(--bui-color-primary);
+  --bui-slider-line-bg-color: var(--bui-color-border-default);
+  --bui-slider-width: 100%;
+  --bui-slider-height: 2px;
+  --bui-slider-padding: 19px 0;
+  --bui-slider-button-width: 26px;
+  --bui-slider-button-height: 26px;
+  --bui-slider-button-font-size: var(--bui-title-size-3);
+  --bui-slider-button-box-shadow: #ddd 0 0 10px;
+  --bui-slider-button-border-radius: 50%;
+  --bui-slider-tooltip-width: 46px;
+  --bui-slider-tooltip-height: 24px;
+  --bui-slider-tooltip-line-height: 24px;
+  --bui-slider-tooltip-border-radius: 24px;
+  --bui-slider-tooltip-font-size: var(--bui-text-size-3);
+  --bui-slider-tooltip-color: var(--bui-color-white);
+  --bui-slider-tooltip-bg-color: var(--bui-slider-line-color);
+}
+.bui-slider {
+  position: relative;
+  width: var(--bui-slider-width);
+  height: var(--bui-slider-height);
+  padding: var(--bui-slider-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(--bui-slider-height);
+  transform: translateY(-50%);
+  background-color: var(--bui-slider-line-color);
+}
+.bui-slider-rail {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: var(--bui-slider-height);
+  transform: translateY(-50%);
+  background-color: var(--bui-slider-line-bg-color);
+}
+.bui-slider-button {
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: var(--bui-slider-button-width);
+  height: var(--bui-slider-button-height);
+  background-color: var(--bui-color-white);
+  box-shadow: var(--bui-slider-button-box-shadow);
+  border-radius: var(--bui-slider-button-border-radius);
+  transform: translate(-50%, -50%);
+  font-size: var(--bui-slider-button-font-size);
+  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(--bui-slider-tooltip-width);
+  height: var(--bui-slider-tooltip-height);
+  line-height: var(--bui-slider-tooltip-line-height);
+  font-size: var(--bui-slider-tooltip-font-size);
+  border-radius: var(--bui-slider-tooltip-border-radius);
+  color: var(--bui-slider-tooltip-color);
+  text-align: center;
+  background-color: var(--bui-slider-tooltip-bg-color);
+  transform: translate(-50%, -50%);
+  z-index: var(--bui-z-index-affix);
+}
+.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(--bui-slider-tooltip-bg-color);
+}
+.bui-slider-tooltip-hidden {
+  display: none;
+}

package/dist/Stack/Stack.js

@@ -58,7 +58,7 @@ __export(Stack_exports, {
 module.exports = __toCommonJS(Stack_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Stack2 = require("./Stack.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-stack";
 const Stack = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {

package/dist/Stack/demo/index.css

@@ -1,6 +1,7 @@
 .bui-stack-demo-options {
   display: flex;
   column-gap: 30px;
+  flex-wrap: wrap;
 }
 .bui-stack-demo-options-title {
   font-weight: 500;
@@ -10,6 +11,7 @@
     display: flex;
     flex-direction: column;
     row-gap: 15px;
+    flex-wrap: wrap;
   }
   .bui-stack-demo-options-title {
     width: 100%;

package/dist/Steps/Step.css

@@ -5,7 +5,7 @@
   font-family: var(--bui-font-family);
 }
 .bui-step-label-horizontal {
-  line-height: var(--step-label-horizontal-line-height);
+  line-height: var(--bui-step-label-horizontal-line-height);
 }
 .bui-step:last-child .bui-step-line::after {
   display: none;
@@ -13,17 +13,17 @@
 .bui-step-line {
   position: absolute;
   top: 0;
-  width: var(--step-line-width);
-  height: var(--step-line-height);
+  width: var(--bui-step-line-width);
+  height: var(--bui-step-line-height);
   box-sizing: border-box;
   left: 13px;
-  padding: var(--step-line-padding);
+  padding: var(--bui-step-line-padding);
 }
 .bui-step-line::after {
   display: inline-block;
   content: "";
-  width: var(--step-line-width);
-  border-left-width: var(--step-line-width);
+  width: var(--bui-step-line-width);
+  border-left-width: var(--bui-step-line-width);
   border-left-style: dotted;
   height: calc(100% + 11px);
 }
@@ -41,14 +41,14 @@
 }
 .bui-step-icon {
   flex-shrink: 0;
-  width: var(--step-icon-width);
+  width: var(--bui-step-icon-width);
   text-align: center;
-  margin: var(--step-icon-margin);
-  font-size: var(--step-icon-font-size);
+  margin: var(--bui-step-icon-margin);
+  font-size: var(--bui-step-icon-font-size);
 }
 .bui-step-icon-active {
-  width: var(--step-icon-active-width);
-  height: var(--step-icon-active-height);
+  width: var(--bui-step-icon-active-width);
+  height: var(--bui-step-icon-active-height);
   position: relative;
   background-color: var(--bui-color-primary);
   border-radius: 50%;
@@ -56,7 +56,7 @@
   display: inline-block;
 }
 .bui-step-content {
-  padding: var(--step-content-padding);
+  padding: var(--bui-step-content-padding);
   box-sizing: border-box;
   flex: 1 0 0;
   overflow: hidden;
@@ -98,7 +98,7 @@
   width: 100%;
 }
 .bui-step-subtitle {
-  font-size: var(--subtitle-font-size);
+  font-size: var(--bui-step-subtitle-font-size);
   color: var(--bui-color-fg-subtle);
   width: auto;
   overflow: hidden;
@@ -128,7 +128,7 @@
 }
 .bui-step-horizontal .bui-step-line {
   display: none;
-  padding: var(--step-horizontal-line-padding);
+  padding: var(--bui-step-horizontal-line-padding);
 }
 .bui-step-horizontal .bui-step-icon {
   margin-right: 0;

package/dist/Steps/Step.js

@@ -68,97 +68,96 @@ const classes = {
   title: "bui-step-title",
   subtitle: "bui-step-subtitle"
 };
-const Step = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, {
-    className,
-    description,
-    icon,
-    title,
-    subtitle,
-    status,
-    disabled,
-    onClick
-  } = _a, others = __objRest(_a, [
-    "className",
-    "description",
-    "icon",
-    "title",
-    "subtitle",
-    "status",
-    "disabled",
-    "onClick"
-  ]);
-  const stepsContext = (0, import_react.useContext)(import_StepsContext.default);
-  const { direction, labelPlacement, current, onChange } = stepsContext;
-  const isTitleVertical = labelPlacement === "vertical";
-  const handleClick = (e) => {
-    if (disabled)
-      return;
-    onClick == null ? void 0 : onClick(e, { current });
-    onChange == null ? void 0 : onChange(e, { current });
-  };
-  const renderIcon = () => {
-    const icons = {
-      active: /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.icon}-active` }),
-      wait: /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { htmlColor: "#ced1d6" }),
-      finish: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledIcon, { color: "primary" }),
-      error: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledIcon, { color: "primary" })
+const Step = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      description,
+      icon,
+      title,
+      subtitle,
+      status,
+      disabled = false,
+      onClick
+    } = _b, others = __objRest(_b, [
+      "className",
+      "description",
+      "icon",
+      "title",
+      "subtitle",
+      "status",
+      "disabled",
+      "onClick"
+    ]);
+    const stepsContext = (0, import_react.useContext)(import_StepsContext.default);
+    const { direction, labelPlacement, current, onChange } = stepsContext;
+    const isTitleVertical = labelPlacement === "vertical";
+    const handleClick = (e) => {
+      if (disabled)
+        return;
+      onClick == null ? void 0 : onClick(e, { current });
+      onChange == null ? void 0 : onChange(e, { current });
     };
-    if (icon)
-      return icon;
-    return icons[status];
-  };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    __spreadValues({
-      className: (0, import_clsx.default)(classes.root, className, {
-        [`${classes.root}-${direction}`]: direction,
-        [`${classes.root}-label-${labelPlacement}`]: labelPlacement,
-        [`${classes.root}-disabled`]: disabled
-      }),
-      ref,
-      onClick: handleClick
-    }, others),
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_clsx.default)(classes.line, {
-          [`${classes.line}-${status}`]: status
-        })
-      }
-    ),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: classes.icon }, renderIcon()),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.root}-content` }, /* @__PURE__ */ import_react.default.createElement(
+    const renderIcon = () => {
+      const icons = {
+        active: /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.icon}-active` }),
+        wait: /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { color: "disabled" }),
+        finish: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledIcon, { color: "primary" }),
+        error: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledIcon, { color: "primary" })
+      };
+      if (icon)
+        return icon;
+      return icons[status];
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
       "div",
-      {
-        className: (0, import_clsx.default)(`${classes.title}-wrapper`, {
-          [`${classes.title}-wrapper-vertical`]: isTitleVertical,
-          [`${classes.title}-wrapper-line-${status}`]: status
-        })
-      },
-      !!title && /* @__PURE__ */ import_react.default.createElement(
+      __spreadValues({
+        className: (0, import_clsx.default)(classes.root, className, {
+          [`${classes.root}-${direction}`]: direction,
+          [`${classes.root}-label-${labelPlacement}`]: labelPlacement,
+          [`${classes.root}-disabled`]: disabled
+        }),
+        ref,
+        onClick: handleClick
+      }, others),
+      /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: (0, import_clsx.default)(classes.title, `${classes.title}-${status}`, {
-            [`${classes.title}-${labelPlacement}`]: labelPlacement
+          className: (0, import_clsx.default)(classes.line, {
+            [`${classes.line}-${status}`]: status
           })
-        },
-        title
+        }
       ),
-      !!subtitle && /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.icon }, renderIcon()),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.root}-content` }, /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: (0, import_clsx.default)(classes.subtitle, {
-            [`${classes.subtitle}-${labelPlacement}`]: labelPlacement
+          className: (0, import_clsx.default)(`${classes.title}-wrapper`, {
+            [`${classes.title}-wrapper-vertical`]: isTitleVertical,
+            [`${classes.title}-wrapper-line-${status}`]: status
           })
         },
-        subtitle
-      )
-    ), !!description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.root}-desc` }, description))
-  );
-});
+        !!title && /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_clsx.default)(classes.title, `${classes.title}-${status}`, {
+              [`${classes.title}-${labelPlacement}`]: labelPlacement
+            })
+          },
+          title
+        ),
+        !!subtitle && /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_clsx.default)(classes.subtitle, {
+              [`${classes.subtitle}-${labelPlacement}`]: labelPlacement
+            })
+          },
+          subtitle
+        )
+      ), !!description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.root}-desc` }, description))
+    );
+  }
+);
 Step.displayName = "Step";
-Step.defaultProps = {
-  disabled: false
-};
 var Step_default = Step;

package/dist/Steps/Steps.css

@@ -1,19 +1,23 @@
+:root,
+page,
+xhs-page {
+  --bui-steps-font-size: var(--bui-title-size-3);
+  --bui-step-subtitle-font-size: var(--bui-text-size-2);
+  --bui-step-line-padding: 20px 0 3px 0;
+  --bui-step-line-width: 1px;
+  --bui-step-line-height: 100%;
+  --bui-step-label-horizontal-line-height: 1.8;
+  --bui-step-icon-width: 28px;
+  --bui-step-icon-active-width: 12px;
+  --bui-step-icon-active-height: 12px;
+  --bui-step-icon-font-size: var(--bui-title-size-4);
+  --bui-step-icon-margin: var(--bui-spacing-xs) var(--bui-spacing-xs) 0 0;
+  --bui-step-content-padding: 3px 0;
+  --bui-step-horizontal-line-padding: 28px 0 6px;
+}
 .bui-steps {
-  --font-size: var(--bui-steps-font-size, var(--bui-title-size-3));
-  --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);
-  --step-line-height: var(--bui-step-line-height, 100%);
-  --step-label-horizontal-line-height: var(--bui-step-label-horizontal-line-height, 1.8);
-  --step-icon-width: var(--bui-step-icon-width, 28px);
-  --step-icon-active-width: var(--bui-step-icon-active-width, 12px);
-  --step-icon-active-height: var(--bui-step-icon-active-height, 12px);
-  --step-icon-font-size: var(--bui-step-icon-font-size, var(--bui-title-size-4));
-  --step-icon-margin: var(--bui-step-icon-margin, var(--bui-spacing-xs) var(--bui-spacing-xs) 0 0);
-  --step-content-padding: var(--bui-step-content-padding, 3px 0);
-  --step-horizontal-line-padding: var(--bui-step-horizontal-line-padding, 28px 0 6px);
   display: flex;
-  font-size: var(--font-size);
+  font-size: var(--bui-steps-font-size);
   font-family: var(--bui-font-family);
 }
 .bui-steps-vertical {

package/dist/Steps/Steps.js

@@ -59,68 +59,65 @@ module.exports = __toCommonJS(Steps_exports);
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Steps = require("./Steps.css");
 var import_StepsContext = require("./StepsContext");
+var import_Steps2 = require("./Steps.css");
 const prefixCls = "bui-steps";
-const Steps = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, {
-    className,
-    children,
-    direction,
-    current,
-    labelPlacement,
-    onChange
-  } = _a, others = __objRest(_a, [
-    "className",
-    "children",
-    "direction",
-    "current",
-    "labelPlacement",
-    "onChange"
-  ]);
-  const renderStep = () => {
-    return (0, import_utils.toArray)(children).map((child, index) => {
-      const childProps = __spreadValues({
-        key: index
-      }, child.props);
-      if (!child.props.status) {
-        if (index === current) {
-          childProps.status = "active";
-        } else if (index < current) {
-          childProps.status = "finish";
-        } else {
-          childProps.status = "wait";
+const Steps = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      direction = "vertical",
+      current = 0,
+      labelPlacement = "horizontal",
+      onChange
+    } = _b, others = __objRest(_b, [
+      "className",
+      "children",
+      "direction",
+      "current",
+      "labelPlacement",
+      "onChange"
+    ]);
+    const renderStep = () => {
+      return (0, import_utils.toArray)(children).map((child, index) => {
+        const childProps = __spreadValues({
+          key: index
+        }, child.props);
+        if (!child.props.status) {
+          if (index === current) {
+            childProps.status = "active";
+          } else if (index < current) {
+            childProps.status = "finish";
+          } else {
+            childProps.status = "wait";
+          }
         }
-      }
-      return (0, import_react.cloneElement)(child, childProps);
-    });
-  };
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_StepsContext.StepsContextProvider,
-    {
-      value: {
-        direction,
-        current,
-        labelPlacement,
-        onChange
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      __spreadValues({
-        className: (0, import_clsx.default)(prefixCls, className, {
-          [`${prefixCls}-${direction}`]: direction
-        }),
-        ref
-      }, others),
-      renderStep()
-    )
-  );
-});
+        return (0, import_react.cloneElement)(child, childProps);
+      });
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_StepsContext.StepsContextProvider,
+      {
+        value: {
+          direction,
+          current,
+          labelPlacement,
+          onChange
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        __spreadValues({
+          className: (0, import_clsx.default)(prefixCls, className, {
+            [`${prefixCls}-${direction}`]: direction
+          }),
+          ref
+        }, others),
+        renderStep()
+      )
+    );
+  }
+);
 Steps.displayName = "Steps";
-Steps.defaultProps = {
-  current: 0,
-  direction: "vertical",
-  labelPlacement: "horizontal"
-};
 var Steps_default = Steps;