@bifrostui/react 2.0.0-beta.2 → 2.0.0-beta.5

package/es/List/index.css

@@ -0,0 +1,80 @@
+:root,
+page,
+xhs-page {
+  --bui-list-small-item-padding: 5px 12px;
+  --bui-list-medium-item-padding: 18px 12px;
+  --bui-list-large-item-padding: 20px 12px;
+}
+.bui-list {
+  background: var(--bui-color-bg-view);
+  font-size: var(--bui-title-size-3);
+  font-family: var(--bui-font-family);
+  list-style: none;
+}
+.bui-list .bui-divider:last-of-type {
+  display: none;
+}
+.bui-list-item,
+.bui-list-item-contained {
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-disabled {
+  pointer-events: none;
+  background-color: var(--bui-color-bg-default);
+  color: var(--bui-color-fg-subtle);
+}
+.bui-list-small .bui-list-item {
+  padding: var(--bui-list-small-item-padding);
+}
+.bui-list-medium .bui-list-item {
+  padding: var(--bui-list-medium-item-padding);
+}
+.bui-list-large .bui-list-item {
+  padding: var(--bui-list-large-item-padding);
+}
+.bui-list-item-divider:not(:last-child) {
+  border-bottom: 1px solid var(--bui-color-border-default);
+}
+.bui-list-item-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+  width: 100%;
+  font-family: var(--bui-font-family);
+}
+.bui-list-small .bui-list-item-content {
+  font-size: var(--bui-text-size-2);
+}
+.bui-list-item-content-primary {
+  flex: 1 1 auto;
+}
+.bui-list-item-content-secondary {
+  font-size: var(--bui-text-size-2);
+  color: var(--bui-color-fg-muted);
+}
+.bui-list-item-extra {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  color: var(--bui-color-fg-subtle);
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-footer .bui-svg-icon {
+  color: var(--bui-color-fg-subtle);
+}
+.bui-list-item-header {
+  flex: 0 0 auto;
+  margin-right: var(--bui-spacing-sm);
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}

package/es/Loading/Loading.d.ts

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

package/es/Loading/Loading.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import React from "react";
 import clsx from "clsx";
 import { LoadingThreeQuartersOutlinedIcon } from "@bifrostui/icons";
-import "./Loading.css";
+import "./index.css";
 const prefixCls = "bui-loading";
 const Loading = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {

package/{dist/Loading/Loading.css → es/Loading/index.css}

@@ -1,7 +1,11 @@
+:root,
+page,
+xhs-page {
+  --bui-loading-icon-font-size: 30px;
+  --bui-loading-text-padding: 10px;
+  --bui-loading-animation-duration: 1.6s;
+}
 .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;
   justify-content: center;
@@ -10,11 +14,11 @@
   font-family: var(--bui-font-family);
 }
 .bui-loading-icon {
-  font-size: var(--icon-font-size);
-  animation: loading var(--animation-duration) linear infinite;
+  font-size: var(--bui-loading-icon-font-size);
+  animation: loading var(--bui-loading-animation-duration) linear infinite;
 }
 .bui-loading-text {
-  padding: var(--text-padding);
+  padding: var(--bui-loading-text-padding);
   font-size: var(--bui-title-size-3);
 }
 .bui-loading-vertical {

package/es/Modal/Modal.d.ts

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

package/es/Modal/Modal.js

@@ -34,7 +34,7 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
-import "./Modal.css";
+import "./index.css";
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {

package/es/Modal/Modal.miniapp.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewProps } from '@tarojs/components';
-import './Modal.less';
+import './index.less';
 declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     open?: boolean;
     container?: Element | (() => Element);
@@ -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" | "onClose" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Modal/Modal.miniapp.js

@@ -35,7 +35,7 @@ import React, { useState } from "react";
 import { View } from "@tarojs/components";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
-import "./Modal.css";
+import "./index.css";
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {

package/es/NavBar/NavBar.d.ts

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

package/es/NavBar/NavBar.js

@@ -30,7 +30,7 @@ import React from "react";
 import clsx from "clsx";
 import { useForkRef, useSize } from "@bifrostui/utils";
 import { ArrowBackwardLargeIcon } from "@bifrostui/icons";
-import "./NavBar.css";
+import "./index.css";
 const prefixCls = "bui-navbar";
 const NavBar = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {

package/es/NavBar/index.css

@@ -0,0 +1,65 @@
+:root,
+page,
+xhs-page {
+  --bui-navbar-width: 100%;
+  --bui-navbar-height: 45px;
+  --bui-navbar-padding: 0 8px;
+  --bui-navbar-title-padding: 0 8px;
+  --bui-navbar-icon-font-size: 24px;
+  --bui-navbar-background-color: var(--bui-color-white);
+  --bui-navbar-border-bottom: none;
+  --bui-navbar-z-index: auto;
+  --bui-navbar-title-max-width: 60%;
+}
+.bui-navbar {
+  position: relative;
+  width: var(--bui-navbar-width);
+  height: var(--bui-navbar-height);
+  box-sizing: border-box;
+  padding: var(--bui-navbar-padding);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bui-navbar-background-color);
+  border-bottom: var(--bui-navbar-border-bottom);
+  user-select: none;
+  z-index: var(--bui-navbar-z-index);
+  font-family: var(--bui-font-family);
+}
+.bui-navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.bui-navbar-title {
+  max-width: var(--bui-navbar-title-max-width);
+  padding: var(--bui-navbar-title-padding);
+  font-size: var(--bui-title-size-2);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bui-navbar-left,
+.bui-navbar-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-title-size-3);
+}
+.bui-navbar-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+.bui-navbar-right {
+  justify-content: flex-end;
+  text-align: right;
+  align-self: stretch;
+}
+.bui-navbar-icon {
+  font-size: var(--bui-navbar-icon-font-size);
+}
+.bui-navbar-placeholder {
+  width: 100%;
+}

package/es/Picker/Picker.css

@@ -1,31 +1,36 @@
+:root,
+page,
+xhs-page {
+  --bui-picker-header-height: 50px;
+  --bui-picker-header-padding: 0 var(--bui-spacing-lg);
+  --bui-picker-cancel-height: 100%;
+  --bui-picker-cancel-line-height: 50px;
+  --bui-picker-confirm-height: 100%;
+  --bui-picker-confirm-line-height: 50px;
+  --bui-picker-panel-height: 260px;
+  --bui-picker-indicator-top: 108px;
+  --bui-picker-option-height: 36px;
+  --bui-picker-option-font-size: var(--bui-title-size-4);
+}
 .bui-picker {
-  --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: var(--header-height);
+  height: var(--bui-picker-header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--header-padding);
+  padding: var(--bui-picker-header-padding);
 }
 .bui-picker-cancel {
   cursor: pointer;
-  height: var(--cancel-height);
+  height: var(--bui-picker-cancel-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--cancel-line-height);
+  line-height: var(--bui-picker-cancel-line-height);
   color: var(--bui-color-fg-default);
 }
 .bui-picker-title {
@@ -35,15 +40,15 @@
 }
 .bui-picker-confirm {
   cursor: pointer;
-  height: var(--confirm-height);
+  height: var(--bui-picker-confirm-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--confirm-line-height);
+  line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
 .bui-picker-container {
   width: 100%;
-  height: var(--panel-container-height);
+  height: var(--bui-picker-panel-height);
   display: flex;
   overflow: hidden;
 }

package/es/Picker/Picker.js

@@ -208,7 +208,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
           columnIndex: index,
           defaultValue: internalValue == null ? void 0 : internalValue[index],
           onSelect: handleSelect,
-          pickerStyle: others == null ? void 0 : others.style
+          open
         }
       )))
     )

package/es/Picker/Picker.types.d.ts

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

package/es/Picker/PickerPanel.css

@@ -8,9 +8,9 @@
   transform: rotate3d(1, 0, 0, 60deg);
   transform-style: preserve-3d;
   position: absolute;
-  top: var(--indicator-top);
+  top: var(--bui-picker-indicator-top);
   width: 100%;
-  height: var(--option-height);
+  height: var(--bui-picker-option-height);
 }
 .bui-picker-panel-mask {
   position: absolute;
@@ -28,14 +28,14 @@
       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-size: 100% var(--bui-picker-indicator-top);
   background-repeat: no-repeat;
   transform: translateZ(0);
 }
 .bui-picker-panel-indicator {
   position: absolute;
-  top: var(--indicator-top);
-  height: var(--option-height);
+  top: var(--bui-picker-indicator-top);
+  height: var(--bui-picker-option-height);
   width: 100%;
   border-top: 1px solid var(--bui-color-border-default);
   border-bottom: 1px solid var(--bui-color-border-default);
@@ -45,10 +45,10 @@
   top: 0;
   left: 0;
   text-align: center;
-  height: var(--option-height);
-  line-height: var(--option-height);
+  height: var(--bui-picker-option-height);
+  line-height: var(--bui-picker-option-height);
   color: var(--bui-color-fg-default);
-  font-size: var(--option-font-size);
+  font-size: var(--bui-picker-option-font-size);
   backface-visibility: hidden;
   width: auto;
   overflow: hidden;

package/es/Picker/PickerPanel.js

@@ -27,25 +27,35 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useEffect, useState, useRef, useImperativeHandle } from "react";
-import { useTouch, useForkRef, useTouchEmulator } from "@bifrostui/utils";
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useImperativeHandle,
+  useLayoutEffect
+} from "react";
+import {
+  useTouch,
+  useForkRef,
+  useTouchEmulator,
+  getBoundingClientRect
+} from "@bifrostui/utils";
 import "./PickerPanel.css";
 const prefixCls = "bui-picker-panel";
 const PickerPanel = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
-    var _b;
     const _a = props, {
       options = [],
       defaultValue,
       onSelect,
       columnIndex,
-      pickerStyle
+      open
     } = _a, others = __objRest(_a, [
       "options",
       "defaultValue",
       "onSelect",
       "columnIndex",
-      "pickerStyle"
+      "open"
     ]);
     const touch = useTouch();
     let timer;
@@ -55,9 +65,8 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     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 lineSpacing = useRef(DEFAULT_LINE_SPACING);
+    const [indicatorOffset, setIndicatorOffset] = useState(108);
     const [startY, setStartY] = useState(0);
     const [currIndex, setCurrIndex] = useState(1);
     const [startTime, setStartTime] = useState(0);
@@ -66,10 +75,18 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     const [scrollDistance, setScrollDistance] = useState(0);
     const transformY = useRef(0);
     const isVerticalMoving = useRef(false);
-    const rollerRef = useRef(null);
+    const fitstOptionRef = useRef(null);
     const PickerPanelRef = useRef(null);
     const pickerPanelRef = useForkRef(PickerPanelRef, ref);
     useTouchEmulator(PickerPanelRef.current);
+    useLayoutEffect(() => {
+      if (!open)
+        return;
+      getBoundingClientRect(fitstOptionRef.current).then((rect) => {
+        lineSpacing.current = (rect == null ? void 0 : rect.height) || DEFAULT_LINE_SPACING;
+        setIndicatorOffset(lineSpacing.current * 108 / DEFAULT_LINE_SPACING);
+      });
+    }, [open]);
     const updateSelect = () => {
       let index = -1;
       if (defaultValue) {
@@ -82,7 +99,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         });
       }
       setCurrIndex(index === -1 ? 1 : index + 1);
-      const move = index === -1 ? 0 : index * LINE_SPACING;
+      const move = index === -1 ? 0 : index * lineSpacing.current;
       setMove({ move: -move });
     };
     useEffect(() => {
@@ -109,22 +126,24 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         if (updateMove > 0) {
           updateMove = 0;
         }
-        if (updateMove < -(options.length - 1) * LINE_SPACING) {
-          updateMove = -(options.length - 1) * LINE_SPACING;
+        if (updateMove < -(options.length - 1) * lineSpacing.current) {
+          updateMove = -(options.length - 1) * lineSpacing.current;
         }
-        const endMove = Math.round(updateMove / LINE_SPACING) * LINE_SPACING;
-        const deg = `${(Math.abs(Math.round(endMove / LINE_SPACING)) + 1) * ROTATION}deg`;
+        const endMove = Math.round(updateMove / lineSpacing.current) * lineSpacing.current;
+        const deg = `${(Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * ROTATION}deg`;
         setTransform(type, deg, time, endMove);
-        setCurrIndex(Math.abs(Math.round(endMove / LINE_SPACING)) + 1);
+        setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1);
       } else {
         let deg = 0;
-        const currentDeg = (-updateMove / LINE_SPACING + 1) * ROTATION;
+        const currentDeg = (-updateMove / lineSpacing.current + 1) * ROTATION;
         const maxDeg = (options.length + 1) * ROTATION;
         const minDeg = 0;
         deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
         if (minDeg < deg && deg < maxDeg) {
           setTransform("", `${deg}deg`, void 0, updateMove);
-          setCurrIndex(Math.abs(Math.round(updateMove / LINE_SPACING)) + 1);
+          setCurrIndex(
+            Math.abs(Math.round(updateMove / lineSpacing.current)) + 1
+          );
         }
       }
     };
@@ -173,17 +192,17 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
       }, 0);
     };
     useEffect(() => {
-      var _a2, _b2, _c;
+      var _a2, _b, _c;
       (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", panelTouchStart);
-      (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.addEventListener("touchmove", panelTouchMove);
+      (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", panelTouchMove);
       (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", panelTouchEnd);
       return () => {
-        var _a3, _b3, _c2;
+        var _a3, _b2, _c2;
         (_a3 = PickerPanelRef.current) == null ? void 0 : _a3.removeEventListener(
           "touchstart",
           panelTouchStart
         );
-        (_b3 = PickerPanelRef.current) == null ? void 0 : _b3.removeEventListener(
+        (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.removeEventListener(
           "touchmove",
           panelTouchMove
         );
@@ -194,7 +213,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
       isVerticalMoving.current = false;
       setTouchTime(0);
       onSelect == null ? void 0 : onSelect(e, {
-        columnOption: options == null ? void 0 : options[Math.round(-scrollDistance / LINE_SPACING)],
+        columnOption: options == null ? void 0 : options[Math.round(-scrollDistance / lineSpacing.current)],
         columnIndex
       });
     };
@@ -214,7 +233,6 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         "div",
         {
           className: `${prefixCls}-roller`,
-          ref: rollerRef,
           style: {
             transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
             transform: `rotate3d(1, 0, 0, ${touchDeg})`
@@ -224,12 +242,16 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         options.map((item, i) => /* @__PURE__ */ React.createElement(
           "div",
           {
+            ref: (el) => {
+              if (i === 0 && !fitstOptionRef.current)
+                fitstOptionRef.current = el;
+            },
             className: clsx(`${prefixCls}-option`, {
               [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {
-              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${INDICATOR_OFFSET}px)`
+              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${indicatorOffset}px)`
             }
           },
           item == null ? void 0 : item.label

package/es/Picker/index.css

@@ -0,0 +1,116 @@
+:root,
+page,
+xhs-page {
+  --bui-picker-header-height: 50px;
+  --bui-picker-header-padding: 0 var(--bui-spacing-lg);
+  --bui-picker-cancel-height: 100%;
+  --bui-picker-cancel-line-height: 50px;
+  --bui-picker-confirm-height: 100%;
+  --bui-picker-confirm-line-height: 50px;
+  --bui-picker-panel-height: 260px;
+  --bui-picker-indicator-top: 108px;
+  --bui-picker-option-height: 36px;
+  --bui-picker-option-font-size: var(--bui-title-size-4);
+}
+.bui-picker {
+  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: var(--bui-picker-header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bui-picker-header-padding);
+}
+.bui-picker-cancel {
+  cursor: pointer;
+  height: var(--bui-picker-cancel-height);
+  font-size: var(--bui-title-size-4);
+  text-align: center;
+  line-height: var(--bui-picker-cancel-line-height);
+  color: var(--bui-color-fg-default);
+}
+.bui-picker-title {
+  font-size: var(--bui-title-size-3);
+  color: var(--bui-color-fg-default);
+  font-weight: var(--bui-font-weight-medium);
+}
+.bui-picker-confirm {
+  cursor: pointer;
+  height: var(--bui-picker-confirm-height);
+  font-size: var(--bui-title-size-4);
+  text-align: center;
+  line-height: var(--bui-picker-confirm-line-height);
+  color: var(--bui-color-primary);
+}
+.bui-picker-container {
+  width: 100%;
+  height: var(--bui-picker-panel-height);
+  display: flex;
+  overflow: hidden;
+}
+.bui-picker-panel {
+  flex: 1;
+  flex-shrink: 0;
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-picker-panel-roller {
+  transform: rotate3d(1, 0, 0, 60deg);
+  transform-style: preserve-3d;
+  position: absolute;
+  top: var(--bui-picker-indicator-top);
+  width: 100%;
+  height: var(--bui-picker-option-height);
+}
+.bui-picker-panel-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image:
+    linear-gradient(
+      180deg,
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3)),
+    linear-gradient(
+      0deg,
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3));
+  background-position: top, bottom;
+  background-size: 100% var(--bui-picker-indicator-top);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.bui-picker-panel-indicator {
+  position: absolute;
+  top: var(--bui-picker-indicator-top);
+  height: var(--bui-picker-option-height);
+  width: 100%;
+  border-top: 1px solid var(--bui-color-border-default);
+  border-bottom: 1px solid var(--bui-color-border-default);
+}
+.bui-picker-panel-option {
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: center;
+  height: var(--bui-picker-option-height);
+  line-height: var(--bui-picker-option-height);
+  color: var(--bui-color-fg-default);
+  font-size: var(--bui-picker-option-font-size);
+  backface-visibility: hidden;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+.bui-picker-panel-option-hidden {
+  visibility: hidden;
+  opacity: 0;
+}