@bifrostui/react 1.2.9-beta.0 → 1.3.1-beta.0

package/dist/Breadcrumb/index.js

@@ -0,0 +1,45 @@
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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 Breadcrumb_exports = {};
+__export(Breadcrumb_exports, {
+  Breadcrumb: () => import_Breadcrumb2.default,
+  BreadcrumbItem: () => import_BreadcrumbItem.default,
+  default: () => import_Breadcrumb.default
+});
+module.exports = __toCommonJS(Breadcrumb_exports);
+var import_Breadcrumb = __toESM(require("./Breadcrumb"));
+var import_Breadcrumb2 = __toESM(require("./Breadcrumb"));
+var import_BreadcrumbItem = __toESM(require("./BreadcrumbItem"));
+__reExport(Breadcrumb_exports, require("./Breadcrumb.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb,
+  BreadcrumbItem,
+  ...require("./Breadcrumb.types")
+});

package/dist/Button/Button.css

@@ -1,14 +1,23 @@
 .bui-btn {
+  --border-radius: var(--bui-button-border-radius, 100px);
   --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
-  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
   --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
-  --border-radius: var(--bui-button-border-radius, 100px);
-  --font-weight: var(--bui-button-font-weight, var(--bui-font-weight-medium));
+  --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));
+  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
+  --small-padding: var(--bui-button-small-padding, 0 11px);
+  --small-height: var(--bui-button-small-height, 24px);
+  --medium-padding: var(--bui-button-medium-padding, 0 14px);
+  --large-padding: var(--bui-button-large-padding, 0 14px);
+  --large-height: var(--bui-button-large-height, 33px);
+  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
+  --full-height: var(--bui-button-full-height, 42px);
   border: 1px solid transparent;
   outline: 0;
   background-color: transparent;
   cursor: pointer;
-  color: var(--text-color);
+  color: var(--bui-color-fg-muted);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
@@ -17,9 +26,9 @@
   justify-content: center;
   white-space: nowrap;
   font-size: var(--bui-text-size-3);
-  font-weight: var(--font-weight);
+  font-weight: var(--bui-font-weight-medium);
   border-radius: var(--border-radius);
-  height: 27px;
+  height: var(--height);
   line-height: var(--bui-line-height);
   font-family: var(--bui-font-family);
 }
@@ -55,36 +64,36 @@
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-right: var(--bui-spacing-xs);
+  margin-right: var(--icon-start-margin-right);
 }
 .bui-btn-icon-end {
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-left: var(--bui-spacing-xs);
+  margin-left: var(--icon-start-margin-left);
 }
 .bui-btn-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 .bui-btn-small {
   font-size: var(--bui-text-size-4);
-  padding: 0 11px;
-  height: 24px;
+  padding: var(--small-padding);
+  height: var(--small-height);
 }
 .bui-btn-medium {
-  padding: 0 14px;
-  height: 27px;
+  padding: var(--medium-padding);
+  height: var(--height);
 }
 .bui-btn-large {
   font-size: var(--bui-text-size-2);
-  padding: 0 14px;
-  height: 33px;
+  padding: var(--large-padding);
+  height: var(--large-height);
 }
 .bui-btn-full {
-  font-size: var(--bui-title-size-4);
+  font-size: var(--full-font-size);
   width: 100%;
-  height: 42px;
+  height: var(--full-height);
 }
 .bui-btn-text.bui-btn-primary {
   color: var(--bui-color-primary);

package/dist/Calendar/Calendar.css

@@ -1,4 +1,19 @@
 .bui-calendar {
+  --padding: var(--bui-calendar-padding, 6px 12px 7px);
+  --week-height: var(--bui-calendar-week-height, 30px);
+  --handler-height: var(--bui-calendar-handler-height, 28px);
+  --handler-margin-bottom: var(--bui-calendar-handler-margin-bottom, 7px);
+  --handler-text-width: var(--bui-calendar-handler-text-width, 80px);
+  --handler-btn-width: var(--bui-calendar-handler-btn-width, 46px);
+  --handler-btn-height: var(--bui-calendar-handler-btn-height, 100%);
+  --handler-btn-icon-font-size: var(--bui-calendar-handler-btn-icon-font-size, 28px);
+  --day-box-height: var(--bui-calendar-day-box-height, 30px);
+  --day-box-margin-bottom: var(--bui-calendar-day-box-margin-bottom, 7px);
+  --day-disabled-color: var(--bui-calendar-day-disabled-color, #9c9ca5);
+  --middle-color: var(--bui-calendar-middle-color, #000);
+  --middle-background-color: var(--bui-calendar-middle-background-color, #ffeaf1);
+  --range-both-ends-color: var(--bui-calendar-range-both-ends-color, #000);
+  --range-both-ends-background-color: var(--bui-calendar-range-both-ends-background-color, #ffc7da);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -6,11 +21,11 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  padding: 6px 12px 7px;
+  padding: var(--padding);
   font-family: var(--bui-font-family);
 }
 .bui-calendar-week {
-  height: 30px;
+  height: var(--week-height);
   font-size: var(--bui-text-size-2);
   font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-fg-default);
@@ -29,29 +44,29 @@
   color: var(--bui-color-primary);
 }
 .bui-calendar-handler {
-  height: 28px;
+  height: var(--handler-height);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 7px;
+  margin-bottom: var(--handler-margin-bottom);
 }
 .bui-calendar-handler-text {
-  width: 80px;
+  width: var(--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: 100%;
-  width: 46px;
+  height: var(--handler-btn-height);
+  width: var(--handler-btn-width);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .bui-calendar-handler-btn-icon {
-  font-size: 28px;
+  font-size: var(--handler-btn-icon-font-size);
 }
 .bui-calendar-month {
   display: flex;
@@ -60,8 +75,8 @@
 }
 .bui-calendar-day-box {
   width: 14.28%;
-  height: 30px;
-  margin-bottom: 7px;
+  height: var(--day-box-height);
+  margin-bottom: var(--day-box-margin-bottom);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -72,34 +87,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  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: #9c9ca5;
+  color: var(--day-disabled-color);
 }
 .bui-calendar-today {
   color: var(--bui-color-primary);
 }
 .bui-calendar-middle {
-  color: #000;
+  color: var(--middle-color);
   border-radius: 0;
-  background-color: #ffeaf1;
+  background-color: var(--middle-background-color);
 }
 .bui-calendar-start {
-  color: #000;
-  background-color: #ffc7da;
+  color: var(--range-both-ends-color);
+  background-color: var(--range-both-ends-background-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .bui-calendar-end {
-  color: #000;
-  background-color: #ffc7da;
+  color: var(--range-both-ends-color);
+  background-color: var(--range-both-ends-background-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/dist/Calendar/Calendar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Calendar.less';
 import { CalendarProps } from './Calendar.types';
+import './Calendar.less';
 declare const Calendar: React.ForwardRefExoticComponent<Omit<CalendarProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Calendar;

package/dist/Calendar/Calendar.js

@@ -65,10 +65,11 @@ var import_clsx = __toESM(require("clsx"));
 var import_dayjs = __toESM(require("dayjs"));
 var import_isoWeek = __toESM(require("dayjs/plugin/isoWeek"));
 var import_react = __toESM(require("react"));
-var import_Calendar = require("./Calendar.css");
 var import_utils2 = require("./utils");
+var import_locales = require("../locales");
+var import_Calendar2 = require("./Calendar.css");
+const Picker = (0, import_react.lazy)(() => import("../Picker"));
 import_dayjs.default.extend(import_isoWeek.default);
-const SUNDAY_WEEK_DATA = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
 const classes = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -86,11 +87,16 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       maxDate,
       mode,
       hideDaysOutsideCurrentMonth,
+      headerBarFormat,
+      headerBarLeftIcon,
+      headerBarRightIcon,
       disabledDate,
+      enableSelectYear,
       highlightDate,
       dateRender,
       weekRender,
       onMonthChange,
+      onYearChange,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -100,13 +106,28 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       "maxDate",
       "mode",
       "hideDaysOutsideCurrentMonth",
+      "headerBarFormat",
+      "headerBarLeftIcon",
+      "headerBarRightIcon",
       "disabledDate",
+      "enableSelectYear",
       "highlightDate",
       "dateRender",
       "weekRender",
       "onMonthChange",
+      "onYearChange",
       "onChange"
     ]);
+    const { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday } = (0, import_locales.useLocaleText)("calendar");
+    const SUNDAY_WEEK_DATA = [
+      Sunday,
+      Monday,
+      Tuesday,
+      Wednesday,
+      Thursday,
+      Friday,
+      Saturday
+    ];
     const isRangeMode = mode === "range";
     const formattedValue = (0, import_utils2.formatDate)(mode, value, minDate, maxDate);
     const formattedDefaultValue = (0, import_utils2.formatDate)(
@@ -115,6 +136,7 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       minDate,
       maxDate
     );
+    const [openPicker, setOpenPicker] = (0, import_react.useState)(false);
     const [renderMonth, setRenderMonth] = (0, import_react.useState)(() => {
       const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
       return (0, import_dayjs.default)(initMonth || minDate).toDate();
@@ -132,6 +154,22 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
     }, [calendarValue]);
     const isMinMonth = (0, import_dayjs.default)(minDate).isSame(renderMonth, "month");
     const isMaxMonth = (0, import_dayjs.default)(maxDate).isSame(renderMonth, "month");
+    const headerBarIcon = {
+      left: headerBarLeftIcon ? headerBarLeftIcon({ isMinMonth }) : /* @__PURE__ */ import_react.default.createElement(
+        import_icons.CaretLeftIcon,
+        {
+          className: `${classes.handler}-btn-icon`,
+          htmlColor: isMinMonth && "#cccccc"
+        }
+      ),
+      right: headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ import_react.default.createElement(
+        import_icons.CaretRightIcon,
+        {
+          className: `${classes.handler}-btn-icon`,
+          htmlColor: isMaxMonth && "#cccccc"
+        }
+      )
+    };
     (0, import_utils.useDidMountEffect)(() => {
       const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
       setRenderMonth((0, import_dayjs.default)(initMonth || minDate).toDate());
@@ -177,6 +215,19 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       });
       return list;
     };
+    const getYearsList = () => {
+      const result = [];
+      let startTime = new Date(minDate).getFullYear();
+      const endTime = new Date(maxDate).getFullYear();
+      while (endTime - startTime >= 0) {
+        result.push({
+          label: startTime,
+          value: startTime
+        });
+        startTime += 1;
+      }
+      return result;
+    };
     const getDayClassName = ({ day: itemDate, disabled }) => {
       let result = "";
       if (disabled)
@@ -255,7 +306,7 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
         setRenderMonth(month);
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "prev",
-          month: (0, import_dayjs.default)(month).format("YYYY/MM")
+          month: (0, import_dayjs.default)(month).format(headerBarFormat)
         });
       }
     };
@@ -265,10 +316,27 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
         setRenderMonth(month);
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "next",
-          month: (0, import_dayjs.default)(month).format("YYYY/MM")
+          month: (0, import_dayjs.default)(month).format(headerBarFormat)
         });
       }
     };
+    const onClickDate = (e) => {
+      if (!enableSelectYear) {
+        return;
+      }
+      e.stopPropagation();
+      setOpenPicker(true);
+      getYearsList();
+    };
+    const onClosePicker = (e, data2) => {
+      const selectYear = data2.value[0];
+      e.stopPropagation();
+      setRenderMonth((0, import_dayjs.default)(renderMonth).set("year", selectYear).toDate());
+      onYearChange == null ? void 0 : onYearChange(e, {
+        year: selectYear
+      });
+      setOpenPicker(false);
+    };
     let data = {};
     if (isRangeMode) {
       data = {
@@ -290,29 +358,28 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       }, others), {
         "data-mode": mode
       }), data),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.handler }, /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, /* @__PURE__ */ import_react.default.createElement(
-        import_icons.CaretLeftIcon,
-        {
-          className: `${classes.handler}-btn-icon`,
-          htmlColor: isMinMonth && "#cccccc"
-        }
-      )), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text` }, (0, import_dayjs.default)(renderMonth).format("YYYY/MM")), /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, /* @__PURE__ */ import_react.default.createElement(
-        import_icons.CaretRightIcon,
-        {
-          className: `${classes.handler}-btn-icon`,
-          htmlColor: isMaxMonth && "#cccccc"
-        }
-      ))),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.handler }, /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text`, onClick: onClickDate }, (0, import_dayjs.default)(renderMonth).format(headerBarFormat)), /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
       /* @__PURE__ */ import_react.default.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ import_react.default.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${classes.root}-month`) }, renderDayList())
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${classes.root}-month`) }, renderDayList()),
+      enableSelectYear && /* @__PURE__ */ import_react.default.createElement(import_react.Suspense, { fallback: null }, /* @__PURE__ */ import_react.default.createElement(
+        Picker,
+        {
+          options: [getYearsList()],
+          open: openPicker,
+          value: [(0, import_dayjs.default)(renderMonth).year()],
+          onClose: onClosePicker
+        }
+      ))
     );
   }
 );
 Calendar.displayName = "BuiCalendar";
 Calendar.defaultProps = {
   hideDaysOutsideCurrentMonth: false,
+  headerBarFormat: "YYYY/MM",
+  enableSelectYear: false,
   mode: "single",
   minDate: (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(0, "month").toDate(),
   maxDate: (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(11, "month").toDate(),

package/dist/Calendar/Calendar.types.d.ts

@@ -12,6 +12,16 @@ export interface ICalendarMonthChangeData {
     /** 操作类型，prev: 点击上个月 next: 点击下个月 */
     type: 'prev' | 'next';
 }
+export interface ICalendarYearChangeData {
+    /** 切换后的年份 */
+    year: number;
+}
+export interface ICustomIconProps {
+    /** 是否为可选范围内的最小月份 */
+    isMinMonth?: boolean;
+    /** 是否为可选范围内的最大月份 */
+    isMaxMonth?: boolean;
+}
 export type ICalendarMode = 'single' | 'range';
 export type ICalendarValue = Date | Date[] | null;
 export type CalendarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
@@ -43,6 +53,21 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * 是否隐藏当前月之外的日期，默认为false
          */
         hideDaysOutsideCurrentMonth?: boolean;
+        /**
+         * 头部操作栏日期显示格式
+         * @default YYYY/MM
+         */
+        headerBarFormat?: string;
+        /**
+         * 头部操作栏左边图标
+         * @defaultReturn <CaretLeftIcon />
+         */
+        headerBarLeftIcon?: (options: ICustomIconProps) => React.ReactNode;
+        /**
+         * 头部操作栏右边图标
+         * @defaultReturn <CaretRightIcon />
+         */
+        headerBarRightIcon?: (options: ICustomIconProps) => React.ReactNode;
         /**
          * 不可选择的日期
          */
@@ -61,6 +86,14 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * 自定义周单元格的内容
          */
         weekRender?: (week: string) => React.ReactNode;
+        /**
+         * 是否开启选择年
+         */
+        enableSelectYear?: boolean;
+        /**
+         * 年份发生变化的回调
+         */
+        onYearChange?: (e: React.SyntheticEvent, data: ICalendarYearChangeData) => void;
         /**
          * 月份发生变化的回调
          */

package/dist/Card/CardFooter.css

@@ -1,8 +1,9 @@
 .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(--bui-spacing-md) var(--bui-spacing-lg);
+  padding: var(--padding);
   font-family: var(--bui-font-family);
 }

package/dist/Card/CardHeader.css

@@ -1,11 +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);
   font-size: var(--bui-title-size-4);
-  font-weight: 500;
+  font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-fg-default);
   font-family: var(--bui-font-family);
 }

package/dist/Checkbox/Checkbox.css

@@ -1,7 +1,9 @@
 .bui-checkbox {
-  --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-checkbox-label-color, --bui-color-fg-default);
+  --label-font-size: var(--bui-checkbox-label-font-size, var(--bui-text-size-1));
+  --icon-font-size: var(--bui-checkbox-icon-font-size, var(--bui-title-size-2));
+  --disabled-opacity: var(--bui-checkbox-disabled-opacity, 0.5);
+  --icon-padding: var(--bui-checkbox-icon-padding, 5px);
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -9,7 +11,7 @@
 }
 .bui-checkbox.bui-checkbox-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 .bui-checkbox-label-left {
   flex-direction: row-reverse;
@@ -35,7 +37,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding: 5px;
+  padding: var(--icon-padding);
   box-sizing: border-box;
   font-size: var(--icon-font-size);
 }

package/dist/CitySelector/CitySelector.css

@@ -1,14 +1,29 @@
 .bui-city-selector {
+  --select-item-width: var(--bui-city-selector-item-width, 111px);
+  --select-item-height: var(--bui-city-selector-item-height, 36px);
+  --select-item-border-radius: var(--bui-city-selector-item-border-radius, 20px);
+  --select-item-margin: var(--bui-city-selector-item-margin, 4.5px 0 4.5px 9px);
+  --title-height: var(--bui-city-selector-title-height, 45px);
+  --title-line-height: var(--bui-city-selector-title-line-height, 45px);
+  --btn-close-size: var(--bui-city-selector-btn-close-size, 45px);
+  --btn-close-font-size: var(--bui-city-selector-btn-close-font-size, 20px);
+  --container-with-title-height: var(--bui-city-selector-container-with-title-height, calc(100% - var(--title-height)));
+  --city-container-min-height: var(--bui-city-selector-city-container-min-height, 500px);
+  --select-city-buttons-padding: var(--bui-city-selector-select-city-buttons-padding, 7.5px 0 0 3px);
+  --select-city-title-line-height: var(--bui-city-selector-select-city-title-line-height, 15px);
+  --list-item-height: var(--bui-city-selector-list-item-height, 45px);
+  --city-index-has-title-top: var(--bui-city-selector-city-index-has-title-top, calc(50% + var(--title-height) / 2));
+  --index-item-height: var(--bui-city-selector-index-item-height, 20px);
   font-family: var(--bui-font-family);
   height: 100%;
   position: relative;
 }
 .bui-city-selector-title {
   width: 100%;
-  height: 45px;
+  height: var(--title-height);
   color: var(--bui-color-fg-default);
   font-size: var(--bui-title-size-3);
-  line-height: 45px;
+  line-height: var(--title-line-height);
   text-align: center;
   position: sticky;
   top: 0;
@@ -20,20 +35,20 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 45px;
-  height: 45px;
+  width: var(--btn-close-size);
+  height: var(--btn-close-size);
   color: var(--bui-color-fg-muted);
   text-align: center;
-  font-size: 20px;
+  font-size: var(--btn-close-font-size);
 }
 .bui-city-selector-scroll-view-container {
   height: 100%;
 }
 .bui-city-selector-scroll-view-container.container-has-title {
-  height: calc(100% - 45px);
+  height: var(--container-with-title-height);
 }
 .bui-city-selector-all-city {
-  min-height: 500px;
+  min-height: var(--city-container-min-height);
   font-size: var(--bui-text-size-2);
   width: 100%;
   background: var(--bui-color-bg-view);
@@ -42,22 +57,21 @@
 .bui-city-selector-all-city .select-city-buttons {
   display: flex;
   flex-flow: wrap;
-  padding-left: 3px;
-  padding-top: 7.5px;
+  padding: var(--select-city-buttons-padding);
 }
 .bui-city-selector-all-city .select-city-title {
   font-size: var(--bui-title-size-4);
-  line-height: 15px;
-  font-weight: 600;
+  line-height: var(--select-city-title-line-height);
+  font-weight: var(--bui-font-weight-bold);
   padding-left: var(--bui-spacing-lg);
-  padding-top: 9px;
+  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: 45px;
+  height: var(--list-item-height);
   font-size: var(--bui-title-size-4);
   display: flex;
   align-items: center;
@@ -81,7 +95,7 @@
   transform: translate(0, -50%);
 }
 .bui-city-selector-index-container.city-index-has-title {
-  top: calc(50% + 22.5px);
+  top: var(--city-index-has-title-top);
 }
 .bui-city-selector-index-container ul {
   margin: 0;
@@ -92,7 +106,7 @@
 }
 .bui-city-selector-index-container li {
   list-style: none;
-  height: 20px;
+  height: var(--index-item-height);
   text-align: center;
   font-size: var(--bui-text-size-3);
   color: var(--bui-color-info, --bui-color-info);