@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/Modal/useModal.js

@@ -0,0 +1,190 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useModal_exports = {};
+__export(useModal_exports, {
+  useModal: () => useModal
+});
+module.exports = __toCommonJS(useModal_exports);
+var import_react = require("react");
+var import_utils = require("@bifrostui/utils");
+var import_ModalManager = require("./ModalManager");
+function getContainer(container) {
+  if (typeof container === "function") {
+    return container();
+  }
+  return container || null;
+}
+function getHasTransition(children) {
+  return Object.prototype.hasOwnProperty.call((children == null ? void 0 : children.props) || {}, "in");
+}
+function useModal(parameters) {
+  const {
+    container,
+    disableScrollLock = false,
+    onClose,
+    open,
+    rootRef,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    children
+  } = parameters;
+  const modal = (0, import_react.useRef)({
+    modalRef: null,
+    mount: null
+  });
+  const modalRef = (0, import_react.useRef)(null);
+  const mountNodeRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(modalRef, rootRef);
+  const [exited, setExited] = (0, import_react.useState)(!open);
+  const hasTransition = getHasTransition(children);
+  let ariaHiddenProp = true;
+  if (parameters["aria-hidden"] === "false" || parameters["aria-hidden"] === false) {
+    ariaHiddenProp = false;
+  }
+  const getModal = () => {
+    if (modalRef.current && mountNodeRef.current) {
+      modal.current.modalRef = modalRef.current;
+      modal.current.mount = mountNodeRef.current;
+    }
+    return modal.current;
+  };
+  const isTopModal = () => import_ModalManager.modalManager.isTopModal(getModal());
+  const handleMounted = () => {
+    import_ModalManager.modalManager.mount(getModal(), {
+      disableScrollLock
+    });
+  };
+  const handleOpen = (0, import_utils.useEventCallback)(() => {
+    const resolvedContainer = getContainer(container) || document.body;
+    import_ModalManager.modalManager.add(getModal(), resolvedContainer);
+    if (modalRef.current) {
+      handleMounted();
+    }
+  });
+  const handlePortalRef = (0, import_utils.useEventCallback)((node) => {
+    mountNodeRef.current = node;
+    if (!node) {
+      return;
+    }
+    if (open && isTopModal()) {
+      handleMounted();
+    } else if (modalRef.current) {
+      (0, import_ModalManager.ariaHidden)(modalRef.current, ariaHiddenProp);
+    }
+  });
+  const handleClose = (0, import_react.useCallback)(() => {
+    import_ModalManager.modalManager.remove(getModal(), ariaHiddenProp);
+  }, [ariaHiddenProp]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      handleClose();
+    };
+  }, [handleClose]);
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [open, handleClose, hasTransition, handleOpen]);
+  const createHandleBackdropClick = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (backdropHandlers = {}) => (event) => {
+      var _a;
+      (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (onClose) {
+        onClose(event, { from: "backdropClick" });
+      }
+    }
+  );
+  const getRootProps = (0, import_react.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (rootHandlers) => {
+      return __spreadProps(__spreadValues({
+        role: "presentation"
+      }, rootHandlers), {
+        ref: handleRef
+      });
+    },
+    [handleRef]
+  );
+  const getBackdropProps = (0, import_react.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (backdropHandlers = {}) => {
+      const propsEventHandlers = {
+        onClick: createHandleBackdropClick(backdropHandlers)
+      };
+      const cleanedHandlers = __spreadValues({}, backdropHandlers);
+      delete cleanedHandlers.onClick;
+      return __spreadProps(__spreadValues(__spreadValues({
+        "aria-hidden": true
+      }, cleanedHandlers), propsEventHandlers), {
+        open
+      });
+    },
+    [createHandleBackdropClick, open]
+  );
+  const getTransitionProps = (0, import_react.useCallback)(() => {
+    const handleEnter = () => {
+      var _a, _b;
+      setExited(false);
+      (_b = (_a = children == null ? void 0 : children.props) == null ? void 0 : _a.onEnter) == null ? void 0 : _b.call(_a);
+    };
+    const handleExited = () => {
+      var _a, _b;
+      setExited(true);
+      (_b = (_a = children == null ? void 0 : children.props) == null ? void 0 : _a.onExited) == null ? void 0 : _b.call(_a);
+    };
+    return {
+      onEnter: handleEnter,
+      onExited: handleExited
+    };
+  }, [children]);
+  return {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    rootRef: handleRef,
+    portalRef: handlePortalRef,
+    exited,
+    hasTransition
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useModal
+});

package/dist/NavBar/index.css

@@ -6,7 +6,7 @@ xhs-page {
   --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-bg-color: var(--bui-color-white);
   --bui-navbar-border-bottom: none;
   --bui-navbar-z-index: auto;
   --bui-navbar-title-max-width: 60%;
@@ -20,7 +20,7 @@ xhs-page {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--bui-navbar-background-color);
+  background-color: var(--bui-navbar-bg-color);
   border-bottom: var(--bui-navbar-border-bottom);
   user-select: none;
   z-index: var(--bui-navbar-z-index);

package/dist/Picker/Picker.css

@@ -46,6 +46,10 @@ xhs-page {
   line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
+.bui-picker-confirm-disabled {
+  color: var(--bui-color-fg-default);
+  opacity: var(--bui-picker-confirm-disabled-opacity);
+}
 .bui-picker-container {
   width: 100%;
   height: var(--bui-picker-panel-height);

package/dist/Picker/Picker.js

@@ -59,14 +59,20 @@ __export(Picker_exports, {
   default: () => Picker_default
 });
 module.exports = __toCommonJS(Picker_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
 var import_Drawer = __toESM(require("../Drawer"));
-var import_PickerPanel = __toESM(require("./PickerPanel"));
 var import_locales = require("../locales");
 var import_utils = require("./utils");
+var import_PickerPanel = __toESM(require("./PickerPanel"));
 var import_Picker2 = require("./Picker.css");
 const prefixCls = "bui-picker";
+const checkDisabled = (values, columns) => values.find(
+  (value, index) => {
+    var _a, _b;
+    return (_b = (_a = columns == null ? void 0 : columns[index]) == null ? void 0 : _a.find((column) => (column == null ? void 0 : column.value) === value)) == null ? void 0 : _b.disabled;
+  }
+);
 const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -74,6 +80,8 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     title,
     options = [],
     value,
+    confirmText: propConfirmText,
+    cancelText: propCancelText,
     contentProps,
     onConfirm,
     onOptionChange,
@@ -85,6 +93,8 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "title",
     "options",
     "value",
+    "confirmText",
+    "cancelText",
     "contentProps",
     "onConfirm",
     "onOptionChange",
@@ -96,6 +106,7 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const [columns, setColumns] = (0, import_react.useState)([]);
   const [internalValue, setInternalValue] = (0, import_react.useState)([]);
   const { cancel: cancelText, confirm: confirmText } = (0, import_locales.useLocaleText)("picker");
+  const disabled = checkDisabled(internalValue, columns);
   (0, import_react.useEffect)(() => {
     if (!open)
       return;
@@ -118,7 +129,7 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   }, [value, options]);
   const confirm = (e) => {
     const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
-    if (isMoving)
+    if (isMoving || disabled)
       return;
     const { safeValue } = (0, import_utils.safeData)({
       value: internalValue,
@@ -177,7 +188,8 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: conbineValues,
           options: formatted,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       } else {
         const result = [...internalValue];
@@ -186,7 +198,8 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: result,
           options,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       }
     }
@@ -221,26 +234,67 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       ref,
       open,
       className: (0, import_clsx.default)(prefixCls, className),
-      onClose: handleClose
+      onClose: handleClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title || "Picker"
     }, others),
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       __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 }, 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,
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
         {
-          ref: setRefs(index),
-          key: index,
-          options: column,
-          columnIndex: index,
-          defaultValue: internalValue == null ? void 0 : internalValue[index],
-          onSelect: handleSelect,
-          open
-        }
-      )))
+          className: `${prefixCls}-header`,
+          role: "toolbar",
+          "aria-label": "Toolbar"
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${prefixCls}-cancel`,
+            onClick: cancel,
+            "aria-label": "Cancel"
+          },
+          propCancelText || cancelText
+        ),
+        title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title`, role: "heading", "aria-level": 2 }, title),
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_clsx.default)(`${prefixCls}-confirm`, {
+              [`${prefixCls}-confirm-disabled`]: disabled
+            }),
+            onClick: confirm,
+            type: "button",
+            "aria-label": "Confirm",
+            tabIndex: disabled ? -1 : 0
+          },
+          propConfirmText || confirmText
+        )
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${prefixCls}-container`,
+          role: "listbox",
+          "aria-label": "Options"
+        },
+        columns.map((column, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_PickerPanel.default,
+          {
+            ref: setRefs(index),
+            key: index,
+            options: column,
+            columnIndex: index,
+            value: internalValue == null ? void 0 : internalValue[index],
+            onSelect: handleSelect,
+            open
+          }
+        ))
+      )
     )
   );
 });

package/dist/Picker/PickerPanel.css

@@ -1,4 +1,5 @@
 .bui-picker-panel {
+  --bui-picker-option-disabled-opacity: 0.38;
   flex: 1;
   flex-shrink: 0;
   position: relative;
@@ -56,6 +57,9 @@
   white-space: nowrap;
   width: 100%;
 }
+.bui-picker-panel-option-disabled {
+  opacity: var(--bui-picker-option-disabled-opacity);
+}
 .bui-picker-panel-option-hidden {
   visibility: hidden;
   opacity: 0;

package/dist/Picker/PickerPanel.js

@@ -56,34 +56,34 @@ __export(PickerPanel_exports, {
   default: () => PickerPanel_default
 });
 module.exports = __toCommonJS(PickerPanel_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
 var import_PickerPanel = require("./PickerPanel.css");
 const prefixCls = "bui-picker-panel";
+const INERTIA_TIME = 200;
+const INERTIA_DISTANCE = 15;
+const DEFAULT_DURATION = 200;
+const ROTATION = 20;
+const TOUCH_END = "end";
+const DEFAULT_LINE_SPACING = 36;
 const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
     const _a = props, {
       options = [],
-      defaultValue,
+      value,
       onSelect,
       columnIndex,
       open
     } = _a, others = __objRest(_a, [
       "options",
-      "defaultValue",
+      "value",
       "onSelect",
       "columnIndex",
       "open"
     ]);
     const touch = (0, import_utils.useTouch)();
-    let timer;
-    const INERTIA_TIME = 200;
-    const INERTIA_DISTANCE = 15;
-    const DEFAULT_DURATION = 200;
-    const ROTATION = 20;
-    const TOUCH_END = "end";
-    const DEFAULT_LINE_SPACING = 36;
+    const timerRef = (0, import_react.useRef)(null);
     const lineSpacing = (0, import_react.useRef)(DEFAULT_LINE_SPACING);
     const [indicatorOffset, setIndicatorOffset] = (0, import_react.useState)(108);
     const [startY, setStartY] = (0, import_react.useState)(0);
@@ -106,29 +106,6 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         setIndicatorOffset(lineSpacing.current * 108 / DEFAULT_LINE_SPACING);
       });
     }, [open]);
-    const updateSelect = () => {
-      let index = -1;
-      if (defaultValue) {
-        options.some((item, idx) => {
-          if (item.value === defaultValue) {
-            index = idx;
-            return true;
-          }
-          return false;
-        });
-      }
-      setCurrIndex(index === -1 ? 1 : index + 1);
-      const move = index === -1 ? 0 : index * lineSpacing.current;
-      setMove({ move: -move });
-    };
-    (0, import_react.useEffect)(() => {
-      setScrollDistance(0);
-      transformY.current = 0;
-      updateSelect();
-      return () => {
-        clearTimeout(timer);
-      };
-    }, [options]);
     const setTransform = (type, deg, time = DEFAULT_DURATION, translateY = 0) => {
       let nTime = time;
       if (type !== TOUCH_END) {
@@ -166,6 +143,29 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         }
       }
     };
+    const updateSelect = () => {
+      let index = -1;
+      if (value) {
+        options.some((item, idx) => {
+          if (item.value === value) {
+            index = idx;
+            return true;
+          }
+          return false;
+        });
+      }
+      setCurrIndex(index === -1 ? 1 : index + 1);
+      const move = index === -1 ? 0 : index * lineSpacing.current;
+      setMove({ move: -move });
+    };
+    (0, import_react.useEffect)(() => {
+      setScrollDistance(0);
+      transformY.current = 0;
+      updateSelect();
+      return () => {
+        clearTimeout(timerRef.current);
+      };
+    }, [options, value]);
     const momentum = (distance, duration) => {
       let nDistance = distance;
       const speed = Math.abs(nDistance / duration);
@@ -206,7 +206,7 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
           type: TOUCH_END
         });
       }
-      timer = setTimeout(() => {
+      timerRef.current = setTimeout(() => {
         touch.reset();
       }, 0);
     };
@@ -227,7 +227,7 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         );
         (_c2 = PickerPanelRef.current) == null ? void 0 : _c2.removeEventListener("touchend", panelTouchEnd);
       };
-    });
+    }, [panelTouchStart, panelTouchMove, panelTouchEnd]);
     const onTransitionEnd = (e) => {
       isVerticalMoving.current = false;
       setTouchTime(0);
@@ -236,9 +236,12 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         columnIndex
       });
     };
-    (0, import_react.useImperativeHandle)(ref, () => ({
-      isMoving: isVerticalMoving.current
-    }));
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        isMoving: isVerticalMoving.current
+      })
+    );
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       __spreadValues({
@@ -246,7 +249,11 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         ref: pickerPanelRef,
         onTouchStart: panelTouchStart,
         onTouchMove: panelTouchMove,
-        onTouchEnd: panelTouchEnd
+        onTouchEnd: panelTouchEnd,
+        role: "listbox",
+        "aria-label": "options",
+        "aria-orientation": "vertical",
+        tabIndex: 0
       }, others),
       /* @__PURE__ */ import_react.default.createElement(
         "div",
@@ -266,12 +273,16 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
                 fitstOptionRef.current = el;
             },
             className: (0, import_clsx.default)(`${prefixCls}-option`, {
-              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8
+              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8,
+              [`${prefixCls}-option-disabled`]: item == null ? void 0 : item.disabled
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {
               transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${indicatorOffset}px)`
-            }
+            },
+            role: "option",
+            "aria-selected": item.value === value,
+            "aria-disabled": !!(item == null ? void 0 : item.disabled)
           },
           item == null ? void 0 : item.label
         ))

package/dist/Picker/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,79 @@
+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 __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 A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  CalendarDemo: () => CalendarDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Picker = __toESM(require("../../Picker"));
+const CalendarDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Picker.default,
+    {
+      open: true,
+      value: [2],
+      options: [
+        [
+          {
+            value: 1,
+            label: "\u5468\u4E00"
+          },
+          {
+            value: 2,
+            label: "\u5468\u4E8C"
+          },
+          {
+            value: 3,
+            label: "\u5468\u4E09"
+          },
+          {
+            value: 4,
+            label: "\u5468\u56DB"
+          },
+          {
+            value: 5,
+            label: "\u5468\u4E94"
+          },
+          {
+            value: 6,
+            label: "\u5468\u516D"
+          },
+          {
+            value: 7,
+            label: "\u5468\u65E5"
+          }
+        ]
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarDemo
+});

package/dist/Picker/index.css

@@ -46,6 +46,10 @@ xhs-page {
   line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
+.bui-picker-confirm-disabled {
+  color: var(--bui-color-fg-default);
+  opacity: var(--bui-picker-confirm-disabled-opacity);
+}
 .bui-picker-container {
   width: 100%;
   height: var(--bui-picker-panel-height);
@@ -53,6 +57,7 @@ xhs-page {
   overflow: hidden;
 }
 .bui-picker-panel {
+  --bui-picker-option-disabled-opacity: 0.38;
   flex: 1;
   flex-shrink: 0;
   position: relative;
@@ -110,6 +115,9 @@ xhs-page {
   white-space: nowrap;
   width: 100%;
 }
+.bui-picker-panel-option-disabled {
+  opacity: var(--bui-picker-option-disabled-opacity);
+}
 .bui-picker-panel-option-hidden {
   visibility: hidden;
   opacity: 0;