@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Calendar/index.css

@@ -0,0 +1,167 @@
+:root,
+page,
+xhs-page {
+  --bui-calendar-transition-exit: transform 300ms ease 0ms;
+  --bui-calendar-transition-enter: transform 300ms ease 0ms;
+  --bui-calendar-transition-group-min-height: 228px;
+  --bui-calendar-padding: 6px 12px 7px;
+  --bui-calendar-week-height: 30px;
+  --bui-calendar-handler-height: 28px;
+  --bui-calendar-handler-margin: 0 0 7px 0;
+  --bui-calendar-handler-text-width: 80px;
+  --bui-calendar-handler-btn-width: 46px;
+  --bui-calendar-handler-btn-height: 100%;
+  --bui-calendar-handler-btn-icon-font-size: 28px;
+  --bui-calendar-day-box-height: 30px;
+  --bui-calendar-day-box-margin: 0 0 7px 0;
+  --bui-calendar-day-disabled-color: #9c9ca5;
+  --bui-calendar-middle-color: #000;
+  --bui-calendar-middle-bg-color: #ffeaf1;
+  --bui-calendar-range-both-ends-color: #000;
+  --bui-calendar-range-both-ends-bg-color: #ffc7da;
+}
+.bui-calendar {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bui-color-bg-view);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--bui-calendar-padding);
+  font-family: var(--bui-font-family);
+}
+.bui-calendar-week {
+  height: var(--bui-calendar-week-height);
+  font-size: var(--bui-text-size-2);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-fg-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bui-calendar-week-item {
+  width: 14.28%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-calendar-week-item:nth-child(1),
+.bui-calendar-week-item:nth-child(7) {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-handler {
+  height: var(--bui-calendar-handler-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--bui-calendar-handler-margin);
+}
+.bui-calendar-handler-text {
+  width: var(--bui-calendar-handler-text-width);
+  font-size: var(--bui-title-size-3);
+  font-weight: var(--bui-font-weight-medium);
+  text-align: center;
+}
+.bui-calendar-handler-btn {
+  font-size: 16px;
+  height: var(--bui-calendar-handler-btn-width);
+  width: var(--handler-btn-width);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-calendar-handler-btn-icon {
+  font-size: var(--bui-calendar-handler-btn-icon-font-size);
+}
+.bui-calendar-transition-group {
+  position: relative;
+  min-height: var(--bui-calendar-transition-group-min-height);
+}
+.bui-calendar-month {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--bui-spacing-sm);
+}
+.bui-calendar-month.enable-transition {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+.bui-calendar-month.visible {
+  visibility: visible;
+}
+.bui-calendar-day-box {
+  width: 14.28%;
+  height: var(--bui-calendar-day-box-height);
+  margin: var(--bui-calendar-day-box-margin);
+}
+.bui-calendar-highlight-day .bui-calendar-day {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-day {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--bui-shape-radius-default);
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-fg-default);
+  cursor: pointer;
+}
+.bui-calendar-day.bui-calendar-disabled {
+  color: var(--bui-calendar-day-disabled-color);
+}
+.bui-calendar-today {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-middle {
+  color: var(--bui-calendar-middle-color);
+  border-radius: 0;
+  background-color: var(--bui-calendar-middle-bg-color);
+}
+.bui-calendar-start {
+  color: var(--bui-calendar-range-both-ends-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
+}
+.bui-calendar-range {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.bui-calendar-end {
+  color: var(--bui-calendar-range-both-ends-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.bui-calendar .slide-enter-left {
+  transform: translate3d(100%, 0, 0);
+}
+.bui-calendar .slide-enter-right {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-enter-done {
+  visibility: visible;
+}
+.bui-calendar .slide-exit {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-exit);
+}
+.bui-calendar .slide-active {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-enter);
+}
+.bui-calendar .slide-exit-left {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-exit-right {
+  transform: translate3d(100%, 0, 0);
+}

package/es/Calendar/utils.js

@@ -1,19 +1,27 @@
 import dayjs from "dayjs/esm/index";
 const isSame = (start, end) => dayjs(start).isSame(end, "day");
-const geteDateDiff = (a, b) => {
-  return dayjs(dayjs(a).format("YYYYMMDD")).diff(
-    dayjs(dayjs(b).format("YYYYMMDD")),
-    "day"
-  );
-};
-const isRange = (current, start, end) => {
-  let flag = true;
-  if (geteDateDiff(current, start) < 0 || geteDateDiff(current, end) > 0) {
-    flag = false;
+const isEqualVal = (a, b) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length)
+      return false;
+    return a.every((item, index) => isSame(item, b[index]));
   }
-  return flag;
+  if (typeof a !== typeof b)
+    return false;
+  return a instanceof Date && b instanceof Date && isSame(a, b);
+};
+const getDateDiff = (a, b) => {
+  const aDate = dayjs(dayjs(a).format("YYYYMMDD"));
+  const bDate = dayjs(dayjs(b).format("YYYYMMDD"));
+  return aDate.diff(bDate, "day");
 };
-const generateRangeDate = (value) => {
+const isDateInRange = (current, start, end) => {
+  return getDateDiff(current, start) >= 0 && getDateDiff(current, end) <= 0;
+};
+const generateDateRange = (value) => {
+  if (!Array.isArray(value) || value.length === 0) {
+    return { start: null, end: null };
+  }
   const finalIndex = value.length - 1;
   return {
     start: value[0],
@@ -26,16 +34,16 @@ const formatDate = (mode, value, minDate, maxDate) => {
   let defaultStartDate = null;
   let defaultEndDate = null;
   if (mode === "single" && value) {
-    defaultStartDate = isRange(value, minDate, maxDate) ? value : null;
+    defaultStartDate = isDateInRange(value, minDate, maxDate) ? value : null;
   } else if (mode === "range") {
-    const { start, end } = generateRangeDate(value);
+    const { start, end } = generateDateRange(value);
     if (start) {
-      defaultStartDate = isRange(start, minDate, maxDate) ? start : null;
+      defaultStartDate = isDateInRange(start, minDate, maxDate) ? start : null;
     }
     if (end) {
-      defaultEndDate = isRange(end, minDate, maxDate) ? end : null;
+      defaultEndDate = isDateInRange(end, minDate, maxDate) ? end : null;
     }
-    if (start && end && geteDateDiff(start, end) > 0) {
+    if (start && end && getDateDiff(start, end) > 0) {
       defaultStartDate = end;
       defaultEndDate = start;
     }
@@ -44,8 +52,9 @@ const formatDate = (mode, value, minDate, maxDate) => {
 };
 export {
   formatDate,
-  generateRangeDate,
-  geteDateDiff,
-  isRange,
+  generateDateRange,
+  getDateDiff,
+  isDateInRange,
+  isEqualVal,
   isSame
 };

package/es/Card/Card.css

@@ -1,3 +1,12 @@
+: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);

package/es/Card/CardContent.css

@@ -1,6 +1,5 @@
 .bui-card-content {
-  font-size: var(--bui-text-size-2);
   padding: var(--bui-spacing-lg);
   color: var(--bui-color-fg-muted);
-  font-family: var(--bui-font-family);
+  font-size: var(--bui-card-content-font-size);
 }

package/es/Card/CardFooter.css

@@ -1,9 +1,7 @@
 .bui-card-footer {
-  --padding: var(--bui-card-footer-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
   color: var(--bui-color-fg-muted);
-  font-size: var(--bui-text-size-1);
   display: flex;
   align-items: center;
-  padding: var(--padding);
-  font-family: var(--bui-font-family);
+  padding: var(--bui-card-footer-padding);
+  font-size: var(--bui-card-footer-font-size);
 }

package/es/Card/CardHeader.css

@@ -1,15 +1,13 @@
 .bui-card-header {
-  --padding: var(--bui-card-header-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
-  --end-icon-margin-left: var(--bui-card-header-end-icon-margin-left, 2px);
   display: flex;
   align-items: center;
   flex-direction: row;
   position: relative;
-  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  padding: var(--bui-card-header-padding);
   font-size: var(--bui-title-size-4);
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--bui-color-fg-default);
+  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;
@@ -17,6 +15,8 @@
   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);

package/es/Card/CardHeader.js

@@ -36,13 +36,13 @@ const CardHeader = /* @__PURE__ */ React.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__ */ React.createElement(ArrowForwardIcon, { size: "small", htmlColor: "#ced1d6" }) : null;
+        return endIcon ? /* @__PURE__ */ React.createElement(ArrowForwardIcon, { size: "small", color: "disabled" }) : null;
       }
       if (React.isValidElement(endIcon)) {
         return endIcon;
       }
       if (onClick) {
-        return /* @__PURE__ */ React.createElement(ArrowForwardIcon, { size: "small", htmlColor: "#ced1d6" });
+        return /* @__PURE__ */ React.createElement(ArrowForwardIcon, { size: "small", color: "disabled" });
       }
       return null;
     })();

package/es/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/es/Checkbox/Checkbox.js

@@ -34,14 +34,14 @@ import { useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef, useContext } from "react";
 import CheckboxContext from "./CheckboxContext";
-import "./Checkbox.css";
+import "./index.css";
 const prefixCls = "bui-checkbox";
 const Checkbox = forwardRef((props, ref) => {
   var _b, _c;
   const _a = props, {
     className,
-    defaultChecked,
-    checked,
+    defaultChecked = false,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -49,7 +49,7 @@ const Checkbox = forwardRef((props, ref) => {
     disabled,
     icon,
     checkedIcon,
-    labelPlacement,
+    labelPlacement = "right",
     onChange,
     children
   } = _a, others = __objRest(_a, [
@@ -67,6 +67,7 @@ const Checkbox = forwardRef((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = useContext(CheckboxContext);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -82,8 +83,8 @@ const Checkbox = forwardRef((props, ref) => {
     console.error("CheckboxGroup\u6A21\u5F0F\u4E0BCheckbox\u987B\u4F20\u5165value\u5C5E\u6027");
   }
   const checkboxCheckIcon = checkedIcon || /* @__PURE__ */ React.createElement(SuccessCircleFilledIcon, { color: "primary" });
-  const checkboxUncheckIcon = icon || /* @__PURE__ */ React.createElement(CircleOutlinedIcon, { htmlColor: "#ced1d6" });
-  const checkboxDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const checkboxUncheckIcon = icon || /* @__PURE__ */ React.createElement(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;
@@ -114,14 +115,14 @@ const Checkbox = forwardRef((props, ref) => {
     }, others),
     /* @__PURE__ */ React.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "checkbox",
         value,
         name,
         checked: checkboxChecked,
         disabled: checkboxDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })
@@ -131,10 +132,6 @@ const Checkbox = forwardRef((props, ref) => {
   );
 });
 Checkbox.displayName = "BuiCheckbox";
-Checkbox.defaultProps = {
-  defaultChecked: false,
-  labelPlacement: "right"
-};
 var Checkbox_default = Checkbox;
 export {
   Checkbox_default as default

package/es/Checkbox/CheckboxGroup.js

@@ -30,18 +30,18 @@ import { useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef } from "react";
 import { CheckboxContextProvider } from "./CheckboxContext";
-import "./Checkbox.css";
+import "./index.css";
 const prefixCls = "bui-checkbox-group";
 const CheckboxGroup = 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",
@@ -78,9 +78,6 @@ const CheckboxGroup = forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-CheckboxGroup.defaultProps = {
-  disabled: false
-};
 var CheckboxGroup_default = CheckboxGroup;
 export {
   CheckboxGroup_default as default

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Checkbox from "../../Checkbox";
+const basicCheckboxDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Checkbox, { checked: true }), "Checkbox"));
+};
+const disabledCheckboxDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Checkbox, { disabled: true }), "Checkbox"));
+};
+const ariaLabelCheckboxDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Checkbox, { inputProps: { "aria-label": "\u590D\u9009\u6846" } }, "Checkbox"));
+};
+var A11yDemos_default = {
+  basicCheckboxDemo,
+  disabledCheckboxDemo,
+  ariaLabelCheckboxDemo
+};
+export {
+  ariaLabelCheckboxDemo,
+  basicCheckboxDemo,
+  A11yDemos_default as default,
+  disabledCheckboxDemo
+};

package/es/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/es/CitySelector/CitySelector.miniapp.js

@@ -20,7 +20,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React, { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import CitySelectorCore from "./CitySelectorCore";
-import "./miniapp.css";
 const CitySelector = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
     const { cities } = props;

package/es/CitySelector/CitySelectorCore.js

@@ -32,7 +32,7 @@ import { throttle, useForkRef, useTouchEmulator } from "@bifrostui/utils";
 import { useLocaleText } from "../locales";
 import ScrollView from "../ScrollView";
 import Selector from "./Selector";
-import "./CitySelector.css";
+import "./index.css";
 const DEVIATION_HEIGHT = "6vmin";
 const prefixCls = "bui-city-selector";
 const CitySelector = /* @__PURE__ */ React.forwardRef(

package/es/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);
 }