@bifrostui/react 1.3.0 → 1.3.1-beta.1

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,11 +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",
@@ -87,6 +87,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       maxDate,
       mode,
       hideDaysOutsideCurrentMonth,
+      headerBarFormat,
+      headerBarLeftIcon,
+      headerBarRightIcon,
       disabledDate,
       enableSelectYear,
       highlightDate,
@@ -103,6 +106,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       "maxDate",
       "mode",
       "hideDaysOutsideCurrentMonth",
+      "headerBarFormat",
+      "headerBarLeftIcon",
+      "headerBarRightIcon",
       "disabledDate",
       "enableSelectYear",
       "highlightDate",
@@ -112,6 +118,16 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       "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)(
@@ -138,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());
@@ -274,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)
         });
       }
     };
@@ -284,7 +316,7 @@ 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)
         });
       }
     };
@@ -326,19 +358,7 @@ 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`, onClick: onClickDate }, (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);
       })),
@@ -358,6 +378,7 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
 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(),

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

@@ -16,6 +16,12 @@ 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<{
@@ -47,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;
         /**
          * 不可选择的日期
          */

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);

package/dist/CitySelector/CitySelectorCore.js

@@ -59,34 +59,31 @@ module.exports = __toCommonJS(CitySelectorCore_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 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");
 const DEVIATION_HEIGHT = "6vmin";
-const GPS_TYPE = {
-  title: "\u5B9A\u4F4D",
-  code: "GPS"
-};
-const CURRENT_TYPE = {
-  title: "\u5F53\u524D",
-  code: "CRRT"
-};
-const HOT_CITY_TYPE = {
-  title: "\u70ED\u95E8",
-  code: "HOT"
-};
 const prefixCls = "bui-city-selector";
 const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
+    const {
+      selectedCityGroupName: selectedCityGroupLocaleName,
+      currentCityGroupName: currentCityGroupLocaleName,
+      hotCitiesGroupName: hotCitiesGroupLocaleName,
+      located,
+      current,
+      hot
+    } = (0, import_locales.useLocaleText)("citySelector");
     const _a = props, {
       className,
       title: pageTitle,
       selectedCity,
-      selectedCityGroupName = "\u5F53\u524D\u57CE\u5E02",
+      selectedCityGroupName = selectedCityGroupLocaleName,
       currentCity,
-      currentCityGroupName = "\u5B9A\u4F4D\u57CE\u5E02",
+      currentCityGroupName = currentCityGroupLocaleName,
       hotCities,
-      hotCitiesGroupName = "\u70ED\u95E8\u57CE\u5E02",
+      hotCitiesGroupName = hotCitiesGroupLocaleName,
       cities,
       disableIndex,
       touchHandler,
@@ -109,6 +106,18 @@ const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
       "onSelect",
       "onClose"
     ]);
+    const GPS_TYPE = {
+      title: located,
+      code: "GPS"
+    };
+    const CURRENT_TYPE = {
+      title: current,
+      code: "CRRT"
+    };
+    const HOT_CITY_TYPE = {
+      title: hot,
+      code: "HOT"
+    };
     const cityRef = (0, import_react.useRef)(null);
     const nodeRef = (0, import_utils.useForkRef)(ref, cityRef);
     (0, import_utils.useTouchEmulator)(cityRef.current);
@@ -167,7 +176,7 @@ const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
     };
     const renderTitile = (title, titleCode) => {
       const parseTitle = (titleCode || title).toUpperCase();
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, title.toUpperCase());
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, title == null ? void 0 : title.toUpperCase());
     };
     const renderCity = (citys, title, titleCode) => {
       return /* @__PURE__ */ import_react.default.createElement("div", null, renderTitile(title, titleCode), /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-buttons" }, citys.map((city, index) => {

package/dist/CitySelector/Selector/index.css

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