@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/ScrollView/useScrollView.js

@@ -0,0 +1,279 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { useForkRef } from "@bifrostui/utils";
+import { useCallback, useEffect, useRef } from "react";
+function easeOutScroll(from, to, callback) {
+  if (from === to || typeof from !== "number") {
+    return;
+  }
+  const change = to - from;
+  const dur = 500;
+  const sTime = +/* @__PURE__ */ new Date();
+  function linear(t, b, c, d) {
+    return c * t / d + b;
+  }
+  const isLarger = to >= from;
+  function step() {
+    const stepFrom = linear(+/* @__PURE__ */ new Date() - sTime, from, change, dur);
+    if (isLarger && stepFrom >= to || !isLarger && to >= stepFrom) {
+      callback == null ? void 0 : callback(to);
+      return;
+    }
+    callback == null ? void 0 : callback(stepFrom);
+    requestAnimationFrame(step);
+  }
+  step();
+}
+function useScrollView(parameters) {
+  const _a = parameters, {
+    ref,
+    onScroll,
+    onScrollToUpper,
+    onScrollToLower,
+    scrollTop: scrollTopProp,
+    scrollLeft: scrollLeftProp,
+    scrollX,
+    scrollY,
+    scrollIntoView,
+    onTouchMove: propsOnTouchMove,
+    scrollIntoViewAlignment,
+    upperThreshold = 50,
+    lowerThreshold = 50,
+    scrollWithAnimation
+  } = _a, otherProps = __objRest(_a, [
+    "ref",
+    "onScroll",
+    "onScrollToUpper",
+    "onScrollToLower",
+    "scrollTop",
+    "scrollLeft",
+    "scrollX",
+    "scrollY",
+    "scrollIntoView",
+    "onTouchMove",
+    "scrollIntoViewAlignment",
+    "upperThreshold",
+    "lowerThreshold",
+    "scrollWithAnimation"
+  ]);
+  const container = useRef(null);
+  const handleRef = useForkRef(ref, container);
+  const upperLowerStatus = useRef(0);
+  const onTouchMove = (_e) => {
+  };
+  const scrollVertical = useCallback((top, isAnimation) => {
+    if (top === void 0)
+      return;
+    if (isAnimation) {
+      easeOutScroll(container.current.scrollTop, top, (pos) => {
+        if (container.current)
+          container.current.scrollTop = pos;
+      });
+    } else if (container.current)
+      container.current.scrollTop = top;
+  }, []);
+  const scrollHorizontal = useCallback(
+    (left, isAnimation) => {
+      if (left === void 0)
+        return;
+      if (isAnimation) {
+        easeOutScroll(container.current.scrollLeft, left, (pos) => {
+          if (container.current)
+            container.current.scrollLeft = pos;
+        });
+      } else if (container.current)
+        container.current.scrollLeft = left;
+    },
+    []
+  );
+  const handleScroll = useCallback(
+    (isInit = false) => {
+      var _a2, _b;
+      const isAnimation = scrollWithAnimation;
+      if (scrollIntoView && typeof scrollIntoView === "string" && ((_b = (_a2 = container == null ? void 0 : container.current) == null ? void 0 : _a2.querySelector) == null ? void 0 : _b.call(_a2, `#${scrollIntoView}`))) {
+        const doScrollIntoView = (id, alignment = "start", _isAnimation = isAnimation) => {
+          const target = container.current.querySelector(
+            `#${id}`
+          );
+          if (scrollY) {
+            const start = target.offsetTop;
+            const end = target.offsetTop + target.offsetHeight - container.current.clientHeight;
+            let nearest;
+            if (container.current.scrollTop < end)
+              nearest = end;
+            else if (container.current.scrollTop > start)
+              nearest = start;
+            else
+              nearest = container.current.scrollTop;
+            const center = (start + end) / 2;
+            const positions = { start, end, nearest, center };
+            scrollVertical(
+              positions[alignment],
+              _isAnimation
+            );
+          }
+          if (scrollX) {
+            const start = target.offsetLeft;
+            const end = target.offsetLeft + target.offsetWidth - container.current.clientWidth;
+            let nearest;
+            if (container.current.scrollLeft < end)
+              nearest = end;
+            else if (container.current.scrollLeft > start)
+              nearest = start;
+            else
+              nearest = container.current.scrollLeft;
+            const center = (start + end) / 2;
+            const positions = { start, end, nearest, center };
+            scrollHorizontal(
+              positions[alignment],
+              _isAnimation
+            );
+          }
+        };
+        if (isInit) {
+          setTimeout(
+            () => doScrollIntoView(
+              scrollIntoView,
+              scrollIntoViewAlignment,
+              isAnimation
+            ),
+            500
+          );
+        } else {
+          doScrollIntoView(
+            scrollIntoView,
+            scrollIntoViewAlignment,
+            isAnimation
+          );
+        }
+      } else {
+        if (scrollY && typeof scrollTopProp === "number" && scrollTopProp !== container.current.scrollTop) {
+          if (isInit) {
+            setTimeout(() => scrollVertical(scrollTopProp, isAnimation), 10);
+          } else {
+            scrollVertical(scrollTopProp, isAnimation);
+          }
+        }
+        if (scrollX && typeof scrollLeftProp === "number" && scrollLeftProp !== container.current.scrollLeft) {
+          if (isInit) {
+            setTimeout(() => scrollHorizontal(scrollLeftProp, isAnimation), 10);
+          } else {
+            scrollHorizontal(scrollLeftProp, isAnimation);
+          }
+        }
+      }
+    },
+    [
+      scrollIntoView,
+      scrollY,
+      scrollTopProp,
+      scrollX,
+      scrollLeftProp,
+      scrollVertical,
+      scrollHorizontal,
+      scrollWithAnimation,
+      scrollIntoViewAlignment
+    ]
+  );
+  useEffect(() => {
+    handleScroll(true);
+  }, []);
+  useEffect(() => {
+    handleScroll();
+  }, [
+    scrollIntoView,
+    scrollY,
+    scrollTopProp,
+    scrollX,
+    scrollLeftProp,
+    handleScroll
+  ]);
+  const upperAndLower = (e) => {
+    if (!container.current)
+      return;
+    const {
+      offsetWidth,
+      offsetHeight,
+      scrollLeft,
+      scrollTop,
+      scrollHeight,
+      scrollWidth
+    } = container.current;
+    if (onScrollToLower && (scrollY && offsetHeight + scrollTop + Number(lowerThreshold) >= scrollHeight || scrollX && offsetWidth + scrollLeft + Number(lowerThreshold) >= scrollWidth)) {
+      if (upperLowerStatus.current !== -1)
+        onScrollToLower(e);
+      upperLowerStatus.current = -1;
+    } else if (onScrollToUpper && (scrollY && scrollTop <= Number(upperThreshold) || scrollX && scrollLeft <= Number(upperThreshold))) {
+      if (upperLowerStatus.current !== 1)
+        onScrollToUpper(e);
+      upperLowerStatus.current = 1;
+    } else {
+      upperLowerStatus.current = 0;
+    }
+  };
+  const onScrollHandler = (e) => {
+    const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = container.current;
+    Object.defineProperty(e, "detail", {
+      enumerable: true,
+      writable: true,
+      value: {
+        scrollLeft,
+        scrollTop,
+        scrollHeight,
+        scrollWidth
+      }
+    });
+    upperAndLower(e);
+    onScroll == null ? void 0 : onScroll(e);
+  };
+  const onTouchMoveHandler = (e) => {
+    var _a2;
+    (_a2 = propsOnTouchMove || onTouchMove) == null ? void 0 : _a2(e);
+  };
+  const getRootProps = useCallback(
+    (rootHandlers) => {
+      return __spreadProps(__spreadValues(__spreadValues({}, otherProps), rootHandlers), {
+        ref: handleRef,
+        onScroll: onScrollHandler,
+        onTouchMove: onTouchMoveHandler
+      });
+    },
+    [otherProps, handleRef, onScrollHandler, onTouchMoveHandler]
+  );
+  return {
+    getRootProps,
+    containerRef: handleRef
+  };
+}
+export {
+  useScrollView
+};

package/es/Select/Select.js

@@ -64,7 +64,7 @@ import Slide from "../Slide";
 import BuiSelectContext from "./selectContext";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
-import "./Select.css";
+import "./index.css";
 const prefixCls = "bui-select";
 const defaultPlacement = "bottom";
 const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -76,12 +76,14 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     inputProps,
     BackdropProps,
     value,
-    defaultValue,
+    defaultValue = "",
     disabled,
     placeholder,
     icon,
     open,
-    scrollContainer,
+    scrollContainer = () => {
+      return isMini ? null : document.body;
+    },
     onChange,
     onClose,
     onOpen,
@@ -179,13 +181,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       };
     }
   }, []);
-  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ React.createElement(
-    CaretDownIcon,
-    {
-      className: `${prefixCls}-selector-icon`,
-      htmlColor: "#9c9ca5"
-    }
-  );
+  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" }) : /* @__PURE__ */ React.createElement(CaretDownIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" });
   const renderOptions = () => {
     var _a2;
     return /* @__PURE__ */ React.createElement(
@@ -225,7 +221,9 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
             "div",
             {
               className: clsx(`${prefixCls}-option-main`),
-              ref: optionMainRef
+              ref: optionMainRef,
+              role: "listbox",
+              "aria-label": "option list"
             },
             children
           )
@@ -240,7 +238,12 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-active`]: isOpen
       }),
-      ref: rootRef
+      ref: rootRef,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-label": others["aria-label"] || "Select",
+      tabIndex: disabled ? -1 : 0
     }, others), {
       onClick: handleSelectClick
     }),
@@ -250,14 +253,16 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         name,
         readOnly: true,
         ref: inputRef,
-        value: selectValue
+        value: selectValue,
+        "aria-hidden": "true",
+        tabIndex: -1
       }, inputProps), {
         className: clsx(`${prefixCls}-input`, {
           [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
         })
       })
     ), icon || defaultIcon)
-  ), /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Portal, { onMounted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
     Backdrop,
     __spreadProps(__spreadValues({
       open: isOpen,
@@ -272,10 +277,6 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   ));
 });
 Select.displayName = "BuiSelect";
-Select.defaultProps = {
-  defaultValue: "",
-  scrollContainer: () => null
-};
 var Select_default = Select;
 export {
   Select_default as default

package/es/Select/SelectOption.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import clsx from "clsx";
 import React, { useContext, useEffect } from "react";
 import BuiSelectContext from "./selectContext";
-import "./Select.css";
+import "./index.css";
 const prefixCls = "bui-select-option";
 const SelectOption = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
@@ -53,7 +53,11 @@ const SelectOption = /* @__PURE__ */ React.forwardRef(
           [`${prefixCls}-active`]: !disabled && value === selectValue,
           [`${prefixCls}-disabled`]: disabled
         }),
-        ref
+        ref,
+        role: "option",
+        "aria-selected": !disabled && value === selectValue,
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0
       }, others), {
         onClick: (e) => {
           if (!disabled)

package/es/Select/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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));
+import React, { useState } from "react";
+import Select from "../../Select";
+import SelectOption from "../../SelectOption";
+const basicSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { placeholder: "\u8BF7\u9009\u62E9\u9009\u9879", "aria-label": "\u57FA\u7840\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")));
+};
+const ControlledSelectDemo = () => {
+  const [value, setValue] = useState("option1");
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      value,
+      placeholder: "\u53D7\u63A7\u9009\u62E9\u5668",
+      "aria-label": "\u53D7\u63A7\u9009\u62E9\u5668",
+      onChange: (e, { value: newValue }) => {
+        setValue(newValue);
+        console.log("\u9009\u4E2D\u503C:", newValue);
+      }
+    },
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ), /* @__PURE__ */ React.createElement("p", null, "\u5F53\u524D\u9009\u4E2D\u503C: ", value));
+};
+const disabledSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { disabled: true, placeholder: "\u7981\u7528\u7684\u9009\u62E9\u5668", "aria-label": "\u7981\u7528\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C")));
+};
+const selectWithDisabledOptionsDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { placeholder: "\u5305\u542B\u7981\u7528\u9009\u9879", "aria-label": "\u5305\u542B\u7981\u7528\u9009\u9879\u7684\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C", disabled: true }, "\u9009\u9879\u4E8C\uFF08\u7981\u7528\uFF09"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option4", label: "\u9009\u9879\u56DB", disabled: true }, "\u9009\u9879\u56DB\uFF08\u7981\u7528\uFF09")));
+};
+const defaultValueSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      defaultValue: "option2",
+      placeholder: "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668",
+      "aria-label": "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668"
+    },
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ));
+};
+const complexInteractionSelectDemo = () => {
+  const ComplexInteractionSelectDemo = () => {
+    const [value, setValue] = useState("");
+    const [options, setOptions] = useState([
+      { value: "option1", label: "\u9009\u9879\u4E00", disabled: false },
+      { value: "option2", label: "\u9009\u9879\u4E8C", disabled: false },
+      { value: "option3", label: "\u9009\u9879\u4E09", disabled: false }
+    ]);
+    const toggleOptionDisabled = (targetValue) => {
+      setOptions(
+        (prevOptions) => prevOptions.map(
+          (option) => option.value === targetValue ? __spreadProps(__spreadValues({}, option), { disabled: !option.disabled }) : option
+        )
+      );
+    };
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        value,
+        placeholder: "\u590D\u6742\u4EA4\u4E92\u9009\u62E9\u5668",
+        "aria-label": "\u590D\u6742\u4EA4\u4E92\u9009\u62E9\u5668",
+        onChange: (e, { value: newValue }) => {
+          setValue(newValue);
+        }
+      },
+      options.map((option) => /* @__PURE__ */ React.createElement(
+        SelectOption,
+        {
+          key: option.value,
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled
+        },
+        option.label
+      ))
+    ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 10 } }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => toggleOptionDisabled("option2") }, "\u5207\u6362\u9009\u9879\u4E8C\u72B6\u6001")), value && /* @__PURE__ */ React.createElement("p", null, "\u5F53\u524D\u9009\u4E2D: ", value));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionSelectDemo, null);
+};
+var A11yDemos_default = {
+  basicSelectDemo,
+  ControlledSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo,
+  defaultValueSelectDemo,
+  complexInteractionSelectDemo
+};
+export {
+  ControlledSelectDemo,
+  basicSelectDemo,
+  complexInteractionSelectDemo,
+  A11yDemos_default as default,
+  defaultValueSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo
+};

package/es/Select/index.css

@@ -0,0 +1,118 @@
+:root,
+page,
+xhs-page {
+  --bui-select-height: 32px;
+  --bui-select-min-width: 100px;
+  --bui-select-font-size: var(--bui-text-size-1);
+  --bui-select-selector-container-padding: 0 14px;
+  --bui-select-option-main-padding: 3px 0;
+  --bui-select-option-padding: 0 14px;
+  --bui-select-option-border-radius: 5px;
+  --bui-select-option-margin: 2px 3px;
+  --bui-select-option-height: 32px;
+  --bui-select-option-active-bg-color: #fff2f0;
+  --bui-select-option-hover-bg-color: rgba(255, 242, 240, 0.4);
+}
+.bui-select {
+  position: relative;
+  cursor: pointer;
+  height: var(--bui-select-height);
+  min-width: var(--bui-select-min-width);
+  font-size: var(--bui-select-font-size);
+  border-radius: 5px;
+  background-color: var(--bui-color-bg-view);
+  font-family: var(--bui-font-family);
+  -webkit-tap-highlight-color: transparent;
+}
+.bui-select-active {
+  box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+}
+.bui-select-selector-container {
+  display: flex;
+  align-items: center;
+  padding: var(--bui-select-selector-container-padding);
+  height: 100%;
+}
+.bui-select-input {
+  width: 0;
+  height: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.bui-select-placeholder {
+  color: var(--bui-color-fg-disabled);
+}
+.bui-select-selector {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: var(--bui-select-height);
+  background-color: transparent;
+  outline: none;
+  border: 0;
+}
+.bui-select-selector-icon {
+  font-size: var(--bui-title-size-3);
+}
+.bui-select-option-container {
+  position: absolute;
+  box-sizing: border-box;
+  font-size: var(--bui-select-font-size, var(--bui-title-size-3));
+  z-index: var(--bui-z-index-tooltip);
+  border-radius: 3px;
+  padding: 2px;
+  overflow: hidden;
+}
+.bui-select-option-container-top {
+  margin-top: -6px;
+}
+.bui-select-option-container-bottom {
+  margin-top: 6px;
+}
+.bui-select-option-container-hide {
+  pointer-events: none;
+}
+.bui-select-option-main {
+  border-radius: 3px;
+  padding: var(--bui-select-option-main-padding);
+  box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  background-color: var(--bui-color-bg-view);
+  overflow: hidden;
+}
+.bui-select-option {
+  height: var(--bui-select-option-height);
+  line-height: var(--bui-select-option-height);
+  padding: var(--bui-select-option-padding);
+  border-radius: var(--bui-select-option-border-radius);
+  margin: var(--bui-select-option-margin);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bui-select-option:hover {
+  background-color: var(--bui-select-option-hover-bg-color);
+  color: var(--bui-color-primary);
+}
+.bui-select-option-active {
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-primary);
+  background-color: var(--bui-select-option-active-bg-color);
+}
+.bui-select-option-active:hover {
+  background-color: var(--bui-select-option-active-bg-color);
+}
+.bui-select-option-hide {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+.bui-select.bui-select-disabled,
+.bui-select-option-disabled {
+  pointer-events: none;
+  box-shadow: none;
+  background-color: var(--bui-color-bg-view);
+  color: var(--bui-color-fg-subtle);
+  border: none;
+}

package/es/Skeleton/Skeleton.js

@@ -28,19 +28,19 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
-import "./Skeleton.css";
+import "./index.css";
 const prefixCls = "bui-skeleton";
 const Skeleton = /* @__PURE__ */ React.forwardRef(
-  (props, ref) => {
-    const _a = props, {
+  (_a, ref) => {
+    var _b = _a, {
       className,
       style,
-      animation,
+      animation = "wave",
       width,
       height,
-      variant,
+      variant = "text",
       children
-    } = _a, others = __objRest(_a, [
+    } = _b, others = __objRest(_b, [
       "className",
       "style",
       "animation",
@@ -69,10 +69,6 @@ const Skeleton = /* @__PURE__ */ React.forwardRef(
   }
 );
 Skeleton.displayName = "BuiSkeleton";
-Skeleton.defaultProps = {
-  animation: "wave",
-  variant: "text"
-};
 var Skeleton_default = Skeleton;
 export {
   Skeleton_default as default