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

package/dist/Dialog/index.css

@@ -0,0 +1,75 @@
+.bui-dialog {
+  --max-width: var(--bui-dialog-max-width, 300px);
+  --border-radius: var(--bui-dialog-border-radius, var(--bui-shape-radius-drawer));
+  --title-padding: var(--bui-dialog-title-padding, 0 40px 9px);
+  --desc-padding: var(--bui-dialog-desc-padding, 0 24px);
+  --footer-margin-top: var(--bui-dialog-footer-margin-top, 15px);
+  --button-height: var(--bui-dialog-button-height, 53px);
+  --button-line-height: var(--bui-dialog-button-line-height, 25px);
+  --button-padding: var(--bui-dialog-button-padding, 12px 0 13px);
+  --button-font-size: var(--bui-dialog-button-font-size, 17px);
+  --button-border-left: var(--bui-dialog-button-border-left, 1px solid rgba(0, 0, 0, 0.05));
+  --button-active-background-color: var(--bui-dialog-button-active-background-color, rgba(54, 57, 64, 0.05));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-dialog-body {
+  padding-top: 21px;
+  min-width: var(--max-width);
+  margin: 0 auto;
+  border-radius: var(--border-radius);
+  background-clip: padding-box;
+  background-color: var(--bui-color-bg-view);
+  line-height: 21px;
+}
+.bui-dialog-body-title {
+  padding: var(--title-padding);
+  font-size: var(--bui-title-size-2);
+  text-align: center;
+  color: var(--bui-color-fg-default);
+  font-weight: var(--bui-font-weight-medium);
+}
+.bui-dialog-body-title + .bui-dialog-body-footer {
+  margin-top: var(--bui-spacing-sm);
+}
+.bui-dialog-body-desc {
+  padding: var(--desc-padding);
+  color: var(--bui-color-fg-muted);
+  font-size: var(--bui-title-size-4);
+  text-align: center;
+}
+.bui-dialog-body-desc:first-child {
+  padding-top: 0;
+}
+.bui-dialog-body-footer {
+  margin-top: var(--footer-margin-top);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  display: -webkit-box;
+  display: flex;
+}
+.bui-dialog-body-input {
+  width: calc(100% - 48px);
+  margin: 14px 24px 0;
+}
+.bui-dialog-body-button {
+  flex: 1;
+  display: block;
+  width: 100%;
+  height: var(--button-height);
+  line-height: var(--button-line-height);
+  padding: var(--button-padding);
+  font-size: var(--button-font-size);
+  border: 0;
+  outline: 0;
+  border-left: var(--button-border-left);
+  border-radius: 0;
+  text-align: center;
+  box-sizing: border-box;
+}
+.bui-dialog-body-button:first-child {
+  border: none;
+}
+.bui-dialog-body-button:active {
+  background-color: var(--button-active-background-color);
+}

package/dist/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as Dialog } from './FunctionalDialog';
+export * from './Dialog.types';

package/dist/Dialog/index.js

@@ -0,0 +1,41 @@
+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 Dialog_exports = {};
+__export(Dialog_exports, {
+  Dialog: () => import_FunctionalDialog.default,
+  default: () => import_FunctionalDialog.default
+});
+module.exports = __toCommonJS(Dialog_exports);
+var import_FunctionalDialog = __toESM(require("./FunctionalDialog"));
+__reExport(Dialog_exports, require("./Dialog.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog,
+  ...require("./Dialog.types")
+});

package/dist/Divider/Divider.css

@@ -1,18 +1,20 @@
 .bui-divider {
   --height: var(--bui-divider-height, 100%);
   --width: var(--bui-divider-width, 100%);
+  --border-width: var(--bui-divider-border-width, 1px);
+  --line-width: var(--bui-divider-line-width, 40px);
   border-color: var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
 .bui-divider-vertical {
   height: var(--height);
   display: inline-block;
-  border-right-width: 1px;
+  border-right-width: var(--border-width);
   border-right-style: solid;
 }
 .bui-divider-horizontal {
   width: var(--width);
-  border-bottom-width: 1px;
+  border-bottom-width: var(--border-width);
   border-bottom-style: solid;
 }
 .bui-divider-vertical-dashed {
@@ -29,8 +31,8 @@
   justify-content: center;
 }
 .bui-divider-line {
-  width: 40px;
-  border-bottom-width: 1px;
+  width: var(--line-width);
+  border-bottom-width: var(--border-width);
   border-bottom-style: solid;
   border-color: var(--bui-color-border-default);
 }

package/dist/IconButton/IconButton.css

@@ -1,8 +1,10 @@
 .bui-icon-btn {
-  --bg-color: var(--bui-color-neutral-5);
-  --color: var(--bui-color-fg-muted);
-  --icon-size: 17px;
-  --user-area: 5px;
+  --bg-color: var(--bui-icon-btn-bg-color, var(--bui-color-neutral-5));
+  --color: var(--bui-icon-btn-color, var(--bui-color-fg-muted));
+  --icon-size: var(--bui-icon-btn-font-size, 17px);
+  --user-area: var(--bui-icon-btn-padding, 5px);
+  --large-font-size: var(--bui-icon-btn-large-font-size, 23px);
+  --disabled-opacity: var(--bui-icon-btn-disabled-opacity, 0.5);
   position: relative;
   display: inline-flex;
   height: auto;
@@ -47,10 +49,10 @@
 }
 .bui-icon-btn-medium.bui-icon-btn-outlined,
 .bui-icon-btn-medium.bui-icon-btn-contained {
-  padding: 5px;
+  padding: var(--user-area);
 }
 .bui-icon-btn-large {
-  font-size: 23px;
+  font-size: var(--large-font-size);
   padding: var(--bui-spacing-sm);
 }
 .bui-icon-btn-large.bui-icon-btn-outlined,
@@ -59,7 +61,7 @@
 }
 .bui-icon-btn-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 .bui-icon-btn-circular {
   border-radius: 100%;

package/dist/Image/index.css

@@ -1,4 +1,5 @@
 .bui-image {
+  --default-background-color: var(--bui-image-default-background-color, rgba(127, 127, 127, 0.2));
   width: auto;
   height: auto;
   display: inline-block;
@@ -31,5 +32,5 @@
 .bui-image-default-icon-item {
   width: 100%;
   height: 100%;
-  background-color: rgba(127, 127, 127, 0.2);
+  background-color: var(--default-background-color);
 }

package/dist/Input/Input.css

@@ -1,9 +1,14 @@
 .bui-input {
+  --height: var(--bui-input-height, 32px);
+  --padding: var(--bui-input-padding, 4px 10px);
+  --icon-start-margin-right: var(--bui-input-icon-start-margin-right, 3px);
+  --icon-end-margin-left: var(--bui-input-icon-end-margin-left, 3px);
+  --disabled-background-color: var(--bui-input-disabled-background-color, rgba(0, 0, 0, 0.04));
   position: relative;
   display: flex;
   align-items: center;
-  height: 32px;
-  padding: 4px 10px;
+  height: var(--height);
+  padding: var(--padding);
   box-sizing: border-box;
   border-radius: var(--bui-shape-radius-default);
   border: 1px solid var(--bui-color-border-default);
@@ -16,10 +21,10 @@
   font-size: var(--bui-title-size-3);
 }
 .bui-input-icon-start {
-  margin-right: 3px;
+  margin-right: var(--icon-start-margin-right);
 }
 .bui-input-icon-end {
-  margin-left: 3px;
+  margin-left: var(--icon-end-margin-left);
 }
 .bui-input-input {
   flex: 1;
@@ -38,7 +43,7 @@
 }
 .bui-input-disabled {
   pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: var(--disabled-background-color);
 }
 .bui-input-disabled .bui-input-input {
   color: var(--bui-color-fg-disabled);

package/dist/List/List.css

@@ -1,4 +1,7 @@
 .bui-list {
+  --small-item-padding: var(--bui-list-small-item-padding, 5px 12px);
+  --medium-item-padding: var(--bui-list-medium-item-padding, 18px 12px);
+  --large-item-padding: var(--bui-list-large-item-padding, 20px 12px);
   background: var(--bui-color-bg-view);
   font-size: var(--bui-title-size-3);
   font-family: var(--bui-font-family);

package/dist/List/ListItem.css

@@ -10,13 +10,13 @@
   color: var(--bui-color-fg-subtle);
 }
 .bui-list-small .bui-list-item {
-  padding: 5px 12px;
+  padding: var(--small-item-padding);
 }
 .bui-list-medium .bui-list-item {
-  padding: 18px 12px;
+  padding: var(--medium-item-padding);
 }
 .bui-list-large .bui-list-item {
-  padding: 20px 12px;
+  padding: var(--large-item-padding);
 }
 .bui-list-item-divider:not(:last-child) {
   border-bottom: 1px solid var(--bui-color-border-default);

package/dist/List/ListItemContent.css

@@ -13,6 +13,6 @@
   flex: 1 1 auto;
 }
 .bui-list-item-content-secondary {
-  font-size: 13px;
+  font-size: var(--bui-text-size-2);
   color: var(--bui-color-fg-muted);
 }

package/dist/Loading/Loading.css

@@ -1,4 +1,6 @@
 .bui-loading {
+  --icon-font-size: var(--bui-loading-icon-font-size, 30px);
+  --text-padding: var(--bui-loading-text-padding, 10px);
   --animation-duration: var(--bui-loading-animation-duration, 1.6s);
   width: fit-content;
   display: flex;
@@ -8,11 +10,11 @@
   font-family: var(--bui-font-family);
 }
 .bui-loading-icon {
-  font-size: 30px;
+  font-size: var(--icon-font-size);
   animation: loading var(--animation-duration) linear infinite;
 }
 .bui-loading-text {
-  padding: 10px;
+  padding: var(--text-padding);
   font-size: var(--bui-title-size-3);
 }
 .bui-loading-vertical {

package/dist/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | "disablePortal" | keyof import("@bifrostui/types").ICommonProps | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/NavBar/NavBar.css

@@ -1,14 +1,18 @@
 .bui-navbar {
+  --width: var(--bui-navbar-width, 100%);
   --height: var(--bui-navbar-height, 45px);
+  --padding: var(--bui-navbar-padding, 0 8px);
   --icon-size: var(--bui-navbar-icon-size, 24px);
+  --icon-font-size: var(--bui-navbar-icon-font-size, var(--bui-title-size-3));
   --background-color: var(--bui-navbar-background-color, var(--bui-color-white));
   --border-bottom: var(--bui-navbar-border-bottom, none);
   --z-index: var(--bui-navbar-z-index, auto);
+  --title-max-width: var(--bui-navbar-title-max-width, 60%);
   position: relative;
-  width: 100%;
+  width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  padding: 0 8px;
+  padding: var(--padding);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -25,8 +29,8 @@
   width: 100%;
 }
 .bui-navbar-title {
-  max-width: 60%;
-  padding: 0 8px;
+  max-width: var(--title-max-width);
+  padding: var(--padding);
   font-size: var(--bui-title-size-2);
   width: auto;
   overflow: hidden;
@@ -38,7 +42,7 @@
   flex: 1;
   display: flex;
   align-items: center;
-  font-size: var(--bui-title-size-3);
+  font-size: var(--icon-font-size);
 }
 .bui-navbar-left {
   justify-content: flex-start;

package/dist/Picker/Picker.css

@@ -1,53 +1,49 @@
 .bui-picker {
-  --cancel-color: var(--bui-color-fg-default);
-  --cancel-font-size: var(--bui-title-size-4, 15px);
-  --confirm-color: var(--bui-color-primary);
-  --confirm-font-size: var(--bui-title-size-4, 15px);
-  --title-color: var(--bui-color-fg-default);
-  --title-font-size: var(--bui-title-size-3, 16px);
-  --title-font-weight: var(--bui-font-weight-medium, 500);
-  --panel-container-height: 260px;
-  --indicator-top: 108px;
-  --indicator-height: 36px;
-  --indicator-border-color: var(--bui-color-border-default);
-  --option-color: var(--bui-color-fg-default);
-  --option-font-size: var(--bui-title-size-4);
-  --option-height: 36px;
+  --header-height: var(--bui-picker-header-height, 50px);
+  --header-padding: var(--bui-picker-header-padding, 0 var(--bui-spacing-lg));
+  --cancel-height: var(--bui-picker-cancel-height, 100%);
+  --cancel-line-height: var(--bui-picker-cancel-line-height, 50px);
+  --confirm-height: var(--bui-picker-confirm-height, 100%);
+  --confirm-line-height: var(--bui-picker-confirm-line-height, 50px);
+  --panel-container-height: var(--bui-picker-panel-height, 260px);
+  --indicator-top: var(--bui-picker-indicator-top, 108px);
+  --option-height: var(--bui-picker-option-height, 36px);
   font-family: var(--bui-font-family);
 }
 .bui-picker .bui-drawer-content {
   border-radius: var(--bui-shape-radius-drawer) var(--bui-shape-radius-drawer) 0 0;
 }
 .bui-picker-header {
-  height: 50px;
+  height: var(--header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--bui-spacing-lg);
+  padding: var(--header-padding);
 }
 .bui-picker-cancel {
-  width: 40px;
-  height: 100%;
-  font-size: var(--cancel-font-size);
+  cursor: pointer;
+  height: var(--cancel-height);
+  font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: 50px;
-  color: var(--cancel-color);
+  line-height: var(--cancel-line-height);
+  color: var(--bui-color-fg-default);
 }
 .bui-picker-title {
-  font-size: var(--title-font-size);
-  color: var(--title-color);
-  font-weight: var(--title-font-weight);
+  font-size: var(--bui-title-size-3);
+  color: var(--bui-color-fg-default);
+  font-weight: var(--bui-font-weight-medium);
 }
 .bui-picker-confirm {
-  width: 40px;
-  height: 100%;
-  font-size: var(--confirm-font-size);
+  cursor: pointer;
+  height: var(--confirm-height);
+  font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: 50px;
-  color: var(--confirm-color);
+  line-height: var(--confirm-line-height);
+  color: var(--bui-color-primary);
 }
 .bui-picker-container {
   width: 100%;
   height: var(--panel-container-height);
   display: flex;
+  overflow: hidden;
 }

package/dist/Picker/Picker.js

@@ -63,6 +63,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Drawer = __toESM(require("../Drawer"));
 var import_PickerPanel = __toESM(require("./PickerPanel"));
+var import_locales = require("../locales");
 var import_utils = require("./utils");
 var import_Picker2 = require("./Picker.css");
 const prefixCls = "bui-picker";
@@ -94,6 +95,7 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const rollerRefs = (0, import_react.useRef)([]);
   const [columns, setColumns] = (0, import_react.useState)([]);
   const [internalValue, setInternalValue] = (0, import_react.useState)([]);
+  const { cancel: cancelText, confirm: confirmText } = (0, import_locales.useLocaleText)("picker");
   (0, import_react.useEffect)(() => {
     if (!open)
       return;
@@ -115,13 +117,18 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     }
   }, [value, options]);
   const confirm = (e) => {
-    const payload = {
-      value: internalValue,
-      options: columns
-    };
     const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
     if (isMoving)
       return;
+    const { safeValue } = (0, import_utils.safeData)({
+      value: internalValue,
+      formatted: columns,
+      options
+    });
+    const payload = {
+      value: safeValue,
+      options: columns
+    };
     onConfirm == null ? void 0 : onConfirm(e, payload);
     onClose == null ? void 0 : onClose(e, __spreadValues({
       from: "confirm"
@@ -129,11 +136,18 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   };
   const cancel = (e) => {
     onCancel == null ? void 0 : onCancel(e);
-    onClose == null ? void 0 : onClose(e, {
-      from: "cancel",
+    const { safeValue } = (0, import_utils.safeData)({
       value: internalValue,
-      options: columns
+      formatted: columns,
+      options
     });
+    const payload = {
+      value: safeValue,
+      options: columns
+    };
+    onClose == null ? void 0 : onClose(e, __spreadValues({
+      from: "cancel"
+    }, payload));
   };
   const updateItem = (e, columnOption, columnIndex) => {
     var _a2, _b, _c;
@@ -166,7 +180,7 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
           currentOption: columnOption
         });
       } else {
-        const result = internalValue;
+        const result = [...internalValue];
         result[columnIndex] = columnOption.value;
         setInternalValue(result);
         onOptionChange == null ? void 0 : onOptionChange(e, {
@@ -181,8 +195,13 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     updateItem(e, columnOption, columnIndex);
   };
   const handleClose = (e, data) => {
-    onClose == null ? void 0 : onClose(e, __spreadValues({
+    const { safeValue } = (0, import_utils.safeData)({
       value: internalValue,
+      formatted: columns,
+      options
+    });
+    onClose == null ? void 0 : onClose(e, __spreadValues({
+      value: safeValue,
       options: columns
     }, data));
   };
@@ -206,7 +225,7 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       __spreadProps(__spreadValues({}, contentProps), {
         className: (0, import_clsx.default)(`${prefixCls}-content`, contentProps == null ? void 0 : contentProps.className)
       }),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-cancel`, onClick: cancel }, "\u53D6\u6D88"), title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-confirm`, onClick: confirm }, "\u786E\u8BA4")),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-cancel`, onClick: cancel }, cancelText), title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-confirm`, onClick: confirm }, confirmText)),
       /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-container` }, columns.map((column, index) => /* @__PURE__ */ import_react.default.createElement(
         import_PickerPanel.default,
         {
@@ -215,7 +234,8 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
           options: column,
           columnIndex: index,
           defaultValue: internalValue == null ? void 0 : internalValue[index],
-          onSelect: handleSelect
+          onSelect: handleSelect,
+          pickerStyle: others == null ? void 0 : others.style
         }
       )))
     )

package/dist/Picker/Picker.types.d.ts

@@ -86,6 +86,10 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
          * 列索引
          */
         columnIndex?: number;
+        /**
+         * Piker组件的样式，PickerPanel的主题定制与css变量传入的Tokens有关，需要透传计算
+         */
+        pickerStyle?: React.CSSProperties;
         /**
          * 选择选项时的回调
          */

package/dist/Picker/PickerPanel.css

@@ -21,12 +21,12 @@
   background-image:
     linear-gradient(
       180deg,
-      var(--bui-color-bg-view-opacity-9),
-      var(--bui-color-bg-view-opacity-4)),
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3)),
     linear-gradient(
       0deg,
-      var(--bui-color-bg-view-opacity-9),
-      var(--bui-color-bg-view-opacity-4));
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3));
   background-position: top, bottom;
   background-size: 100% var(--indicator-top);
   background-repeat: no-repeat;
@@ -35,10 +35,10 @@
 .bui-picker-panel-indicator {
   position: absolute;
   top: var(--indicator-top);
-  height: var(--indicator-height);
+  height: var(--option-height);
   width: 100%;
-  border-top: 1px solid var(--indicator-border-color);
-  border-bottom: 1px solid var(--indicator-border-color);
+  border-top: 1px solid var(--bui-color-border-default);
+  border-bottom: 1px solid var(--bui-color-border-default);
 }
 .bui-picker-panel-option {
   position: absolute;
@@ -47,7 +47,7 @@
   text-align: center;
   height: var(--option-height);
   line-height: var(--option-height);
-  color: var(--option-color);
+  color: var(--bui-color-fg-default);
   font-size: var(--option-font-size);
   backface-visibility: hidden;
   width: auto;

package/dist/Picker/PickerPanel.js

@@ -63,25 +63,31 @@ var import_PickerPanel = require("./PickerPanel.css");
 const prefixCls = "bui-picker-panel";
 const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
+    var _b;
     const _a = props, {
       options = [],
       defaultValue,
       onSelect,
-      columnIndex
+      columnIndex,
+      pickerStyle
     } = _a, others = __objRest(_a, [
       "options",
       "defaultValue",
       "onSelect",
-      "columnIndex"
+      "columnIndex",
+      "pickerStyle"
     ]);
     const touch = (0, import_utils.useTouch)();
     let timer;
     const INERTIA_TIME = 200;
     const INERTIA_DISTANCE = 15;
     const DEFAULT_DURATION = 200;
-    const LINE_SPACING = 36;
     const ROTATION = 20;
     const TOUCH_END = "end";
+    const DEFAULT_LINE_SPACING = 36;
+    const LINE_SPACING_STR = (_b = ((pickerStyle == null ? void 0 : pickerStyle["--option-height"]) ? `${pickerStyle == null ? void 0 : pickerStyle["--option-height"]}` : `${DEFAULT_LINE_SPACING}`).match(/\d+/)) == null ? void 0 : _b[0];
+    const LINE_SPACING = parseInt(LINE_SPACING_STR, 10);
+    const INDICATOR_OFFSET = LINE_SPACING * 108 / DEFAULT_LINE_SPACING;
     const [startY, setStartY] = (0, import_react.useState)(0);
     const [currIndex, setCurrIndex] = (0, import_react.useState)(1);
     const [startTime, setStartTime] = (0, import_react.useState)(0);
@@ -197,17 +203,17 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
       }, 0);
     };
     (0, import_react.useEffect)(() => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", panelTouchStart);
-      (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", panelTouchMove);
+      (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.addEventListener("touchmove", panelTouchMove);
       (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", panelTouchEnd);
       return () => {
-        var _a3, _b2, _c2;
+        var _a3, _b3, _c2;
         (_a3 = PickerPanelRef.current) == null ? void 0 : _a3.removeEventListener(
           "touchstart",
           panelTouchStart
         );
-        (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.removeEventListener(
+        (_b3 = PickerPanelRef.current) == null ? void 0 : _b3.removeEventListener(
           "touchmove",
           panelTouchMove
         );
@@ -253,7 +259,7 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {
-              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, 104px)`
+              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${INDICATOR_OFFSET}px)`
             }
           },
           item == null ? void 0 : item.label