@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Card/CardHeader.js

@@ -66,13 +66,13 @@ const CardHeader = /* @__PURE__ */ import_react.default.forwardRef(
     const _a = props, { title, subtitle, className, extra, endIcon, onClick } = _a, others = __objRest(_a, ["title", "subtitle", "className", "extra", "endIcon", "onClick"]);
     const chevron = (() => {
       if (typeof endIcon === "boolean") {
-        return endIcon ? /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", htmlColor: "#ced1d6" }) : null;
+        return endIcon ? /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", color: "disabled" }) : null;
       }
       if (import_react.default.isValidElement(endIcon)) {
         return endIcon;
       }
       if (onClick) {
-        return /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", htmlColor: "#ced1d6" });
+        return /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small", color: "disabled" });
       }
       return null;
     })();

package/dist/Card/index.css

@@ -0,0 +1,77 @@
+:root,
+page,
+xhs-page {
+  --bui-card-header-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-footer-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-header-title-font-size: var(--bui-title-size-4);
+  --bui-card-content-font-size: var(--bui-text-size-2);
+  --bui-card-footer-font-size: var(--bui-text-size-2);
+}
+.bui-card {
+  background-color: var(--bui-color-bg-view);
+  border-radius: var(--bui-shape-radius-card);
+  overflow: hidden;
+  font-family: var(--bui-font-family);
+}
+.bui-card-header + .bui-card-content {
+  padding-top: 0;
+}
+.bui-card-content {
+  padding: var(--bui-spacing-lg);
+  color: var(--bui-color-fg-muted);
+  font-size: var(--bui-card-content-font-size);
+}
+.bui-card-footer {
+  color: var(--bui-color-fg-muted);
+  display: flex;
+  align-items: center;
+  padding: var(--bui-card-footer-padding);
+  font-size: var(--bui-card-footer-font-size);
+}
+.bui-card-header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  padding: var(--bui-card-header-padding);
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-font-family);
+  color: var(--bui-color-fg-default);
+}
+.bui-card-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  flex-shrink: 0;
+  font-size: var(--bui-card-header-title-font-size);
+  font-family: var(--bui-font-family-accent, inherit);
+}
+.bui-card-header-subtitle {
+  font-size: var(--bui-text-size-3);
+  font-weight: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--bui-color-fg-subtle);
+  padding: 0 var(--bui-spacing-xs);
+}
+.bui-card-header-extra {
+  white-space: nowrap;
+}
+.bui-card-header-end-icon {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.bui-card-header-extra,
+.bui-card-header-end-icon {
+  font-size: var(--bui-text-size-3);
+  font-weight: normal;
+  color: var(--bui-color-fg-subtle);
+  margin-left: auto;
+}
+.bui-card-header-extra + .bui-card-header-end-icon {
+  margin-left: 2px;
+}

package/dist/Checkbox/Checkbox.js

@@ -64,14 +64,14 @@ var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_CheckboxContext = __toESM(require("./CheckboxContext"));
-var import_Checkbox2 = require("./Checkbox.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-checkbox";
 const Checkbox = (0, import_react.forwardRef)((props, ref) => {
   var _b, _c;
   const _a = props, {
     className,
-    defaultChecked,
-    checked,
+    defaultChecked = false,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -79,7 +79,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     disabled,
     icon,
     checkedIcon,
-    labelPlacement,
+    labelPlacement = "right",
     onChange,
     children
   } = _a, others = __objRest(_a, [
@@ -97,6 +97,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = (0, import_react.useContext)(import_CheckboxContext.default);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -112,8 +113,8 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     console.error("CheckboxGroup\u6A21\u5F0F\u4E0BCheckbox\u987B\u4F20\u5165value\u5C5E\u6027");
   }
   const checkboxCheckIcon = checkedIcon || /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledIcon, { color: "primary" });
-  const checkboxUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { htmlColor: "#ced1d6" });
-  const checkboxDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const checkboxUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { color: "neutral" });
+  const checkboxDisabled = disabled !== void 0 ? disabled : (groupContext == null ? void 0 : groupContext.disabled) || false;
   const handleChange = (e) => {
     var _a2, _b2, _c2;
     const isChecked = !checkboxChecked;
@@ -144,14 +145,14 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     }, others),
     /* @__PURE__ */ import_react.default.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "checkbox",
         value,
         name,
         checked: checkboxChecked,
         disabled: checkboxDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })
@@ -161,8 +162,4 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 Checkbox.displayName = "BuiCheckbox";
-Checkbox.defaultProps = {
-  defaultChecked: false,
-  labelPlacement: "right"
-};
 var Checkbox_default = Checkbox;

package/dist/Checkbox/CheckboxGroup.js

@@ -60,18 +60,18 @@ var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_CheckboxContext = require("./CheckboxContext");
-var import_Checkbox2 = require("./Checkbox.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-checkbox-group";
 const CheckboxGroup = (0, import_react.forwardRef)(
-  (props, ref) => {
-    const _a = props, {
+  (_a, ref) => {
+    var _b = _a, {
       className,
       children,
       defaultValue,
       value,
-      disabled,
+      disabled = false,
       onChange
-    } = _a, others = __objRest(_a, [
+    } = _b, others = __objRest(_b, [
       "className",
       "children",
       "defaultValue",
@@ -108,7 +108,4 @@ const CheckboxGroup = (0, import_react.forwardRef)(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-CheckboxGroup.defaultProps = {
-  disabled: false
-};
 var CheckboxGroup_default = CheckboxGroup;

package/dist/Checkbox/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  ariaLabelCheckboxDemo: () => ariaLabelCheckboxDemo,
+  basicCheckboxDemo: () => basicCheckboxDemo,
+  default: () => A11yDemos_default,
+  disabledCheckboxDemo: () => disabledCheckboxDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Checkbox = __toESM(require("../../Checkbox"));
+const basicCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { checked: true }), "Checkbox"));
+};
+const disabledCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { disabled: true }), "Checkbox"));
+};
+const ariaLabelCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { inputProps: { "aria-label": "\u590D\u9009\u6846" } }, "Checkbox"));
+};
+var A11yDemos_default = {
+  basicCheckboxDemo,
+  disabledCheckboxDemo,
+  ariaLabelCheckboxDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelCheckboxDemo,
+  basicCheckboxDemo,
+  disabledCheckboxDemo
+});

package/dist/Checkbox/index.css

@@ -0,0 +1,51 @@
+:root,
+page,
+xhs-page {
+  --bui-checkbox-label-color: var(--bui-color-fg-default);
+  --bui-checkbox-label-font-size: var(--bui-text-size-1);
+  --bui-checkbox-icon-font-size: var(--bui-title-size-2);
+  --bui-checkbox-disabled-opacity: 0.5;
+  --bui-checkbox-icon-padding: 5px;
+}
+.bui-checkbox {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-checkbox.bui-checkbox-disabled {
+  pointer-events: none;
+  opacity: var(--bui-checkbox-disabled-opacity);
+}
+.bui-checkbox-label-left {
+  flex-direction: row-reverse;
+}
+.bui-checkbox-label-top {
+  flex-direction: column-reverse;
+}
+.bui-checkbox-label-bottom {
+  flex-direction: column;
+}
+.bui-checkbox-input {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.bui-checkbox-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--bui-checkbox-icon-padding);
+  box-sizing: border-box;
+  font-size: var(--bui-checkbox-icon-font-size);
+}
+.bui-checkbox-label {
+  font-size: var(--bui-checkbox-label-font-size);
+  color: var(--bui-checkbox-label-color);
+}

package/dist/CitySelector/CitySelector.miniapp.js

@@ -50,7 +50,6 @@ module.exports = __toCommonJS(CitySelector_miniapp_exports);
 var import_react = __toESM(require("react"));
 var import_taro = __toESM(require("@tarojs/taro"));
 var import_CitySelectorCore = __toESM(require("./CitySelectorCore"));
-var import_miniapp = require("./miniapp.css");
 const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
     const { cities } = props;

package/dist/CitySelector/CitySelectorCore.js

@@ -62,7 +62,7 @@ var import_utils = require("@bifrostui/utils");
 var import_locales = require("../locales");
 var import_ScrollView = __toESM(require("../ScrollView"));
 var import_Selector = __toESM(require("./Selector"));
-var import_CitySelector2 = require("./CitySelector.css");
+var import_index = require("./index.css");
 const DEVIATION_HEIGHT = "6vmin";
 const prefixCls = "bui-city-selector";
 const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(

package/dist/CitySelector/Selector/index.css

@@ -1,11 +1,11 @@
 .bui-city-selector-item {
-  width: var(--select-item-width);
-  height: var(--select-item-height);
+  width: var(--bui-city-selector-item-width);
+  height: var(--bui-city-selector-item-height);
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--select-item-border-radius);
-  margin: var(--select-item-margin);
+  border-radius: var(--bui-city-selector-item-border-radius);
+  margin: var(--bui-city-selector-item-margin);
   background-color: var(--bui-color-bg-default);
   font-size: var(--bui-text-size-2);
 }

package/dist/CitySelector/index.css

@@ -0,0 +1,120 @@
+:root,
+page,
+xhs-page {
+  --bui-city-selector-item-width: 111px;
+  --bui-city-selector-item-height: 36px;
+  --bui-city-selector-item-border-radius: 20px;
+  --bui-city-selector-item-margin: 4.5px 0 4.5px 9px;
+  --bui-city-selector-title-height: 45px;
+  --bui-city-selector-title-line-height: 45px;
+  --bui-city-selector-btn-close-size: 45px;
+  --bui-city-selector-btn-close-font-size: 20px;
+  --bui-city-selector-container-with-title-height: calc(100% - var(--bui-city-selector-title-height));
+  --bui-city-selector-city-container-min-height: 500px;
+  --bui-city-selector-select-city-buttons-padding: 7.5px 0 0 3px;
+  --bui-city-selector-select-city-title-line-height: 15px;
+  --bui-city-selector-list-item-height: 45px;
+  --bui-city-selector-city-index-has-title-top: calc(50% + var(--bui-city-selector-title-height) / 2);
+  --bui-city-selector-index-item-height: 20px;
+}
+.bui-city-selector {
+  font-family: var(--bui-font-family);
+  height: 100%;
+  position: relative;
+}
+.bui-city-selector-title {
+  width: 100%;
+  height: var(--bui-city-selector-title-height);
+  color: var(--bui-color-fg-default);
+  font-size: var(--bui-title-size-3);
+  line-height: var(--bui-city-selector-title-line-height);
+  text-align: center;
+  position: sticky;
+  top: 0;
+  z-index: 1004;
+  border-bottom: solid 1px var(--bui-color-border-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-city-selector-btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--bui-city-selector-btn-close-size);
+  height: var(--bui-city-selector-btn-close-size);
+  color: var(--bui-color-fg-muted);
+  text-align: center;
+  font-size: var(--bui-city-selector-btn-close-font-size);
+}
+.bui-city-selector-scroll-view-container {
+  height: 100%;
+}
+.bui-city-selector-scroll-view-container.container-has-title {
+  height: var(--bui-city-selector-container-with-title-height);
+}
+.bui-city-selector-all-city {
+  min-height: var(--bui-city-selector-city-container-min-height);
+  font-size: var(--bui-text-size-2);
+  width: 100%;
+  background: var(--bui-color-bg-view);
+  align-self: flex-start;
+}
+.bui-city-selector-all-city .select-city-buttons {
+  display: flex;
+  flex-flow: wrap;
+  padding: var(--bui-city-selector-select-city-buttons-padding);
+}
+.bui-city-selector-all-city .select-city-title {
+  font-size: var(--bui-title-size-4);
+  line-height: var(--bui-city-selector-select-city-title-line-height);
+  font-weight: var(--bui-font-weight-bold);
+  padding-left: var(--bui-spacing-lg);
+  padding-top: var(--bui-spacing-md);
+}
+.bui-city-selector-list {
+  padding-left: var(--bui-spacing-lg);
+  list-style-type: none;
+}
+.bui-city-selector-list-item {
+  height: var(--bui-city-selector-list-item-height);
+  font-size: var(--bui-title-size-4);
+  display: flex;
+  align-items: center;
+}
+.bui-city-selector-list-item:not(:last-child) {
+  border-bottom: 0.5px solid var(--bui-color-border-default);
+}
+.bui-city-selector-index-container {
+  z-index: 1001;
+  position: absolute;
+  white-space: nowrap;
+  right: 0;
+  top: 50%;
+  width: 40px;
+  will-change: transform;
+  transform: translate(0, -50%);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+.bui-city-selector-index-container.left-in {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+.bui-city-selector-index-container.city-index-has-title {
+  top: var(--bui-city-selector-city-index-has-title-top);
+}
+.bui-city-selector-index-container ul {
+  margin: 0;
+  padding: 0;
+  float: left;
+  width: 100%;
+  touch-action: none;
+}
+.bui-city-selector-index-container li {
+  list-style: none;
+  height: var(--bui-city-selector-index-item-height);
+  text-align: center;
+  font-size: var(--bui-text-size-3);
+  color: var(--bui-color-info, --bui-color-info);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/Collapse/Collapse.js

@@ -63,7 +63,7 @@ var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_Transition = require("../Transition");
-var import_Collapse2 = require("./Collapse.css");
+var import_index = require("./index.css");
 const defaultEasing = {
   enter: import_utils.easing.easeOut,
   exit: import_utils.easing.sharp
@@ -126,16 +126,29 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     }),
     (state, childProps) => {
       var _a2;
-      const transition = transitions.create(
+      const transition = state === "entering" || state === "exiting" ? transitions.create(
         size,
         (0, import_utils.getTransitionProps)(
           { timeout, style, easing: easingProp, delay },
-          { mode: state }
+          {
+            mode: state
+          }
         )
-      );
+      ) : "none";
       const wrapperSize = () => {
         var _a3, _b;
-        const collapseWrapperSize = state === "entering" || state === "entered" ? getCollapseWrapperSize((_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]) : collapsedSize;
+        let collapseWrapperSize = collapsedSize;
+        if (inProp && state === "entered") {
+          collapseWrapperSize = "auto";
+        } else if (state === "entering" || state === "entered") {
+          collapseWrapperSize = getCollapseWrapperSize(
+            (_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]
+          );
+        }
+        if (wrapperRef.current && state === "exiting") {
+          const _ = wrapperRef.current.offsetHeight;
+          console.log(_);
+        }
         return isHorizontal ? {
           width: collapseWrapperSize,
           WebKitWidth: collapseWrapperSize
@@ -147,9 +160,7 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
       return import_react.default.createElement(
         "div",
         __spreadProps(__spreadValues({
-          className: (0, import_clsx.default)("bui-collapse", {
-            className
-          }),
+          className: (0, import_clsx.default)("bui-collapse", className),
           style: __spreadValues(__spreadProps(__spreadValues({}, style), {
             transition,
             WebkitTransition: transition