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

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

@@ -0,0 +1,100 @@
+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, {
+  accessibilityProgressDemo: () => accessibilityProgressDemo,
+  basicProgressDemo: () => basicProgressDemo,
+  coloredProgressDemo: () => coloredProgressDemo,
+  customTrailColorProgressDemo: () => customTrailColorProgressDemo,
+  default: () => A11yDemos_default,
+  gradientProgressDemo: () => gradientProgressDemo,
+  sizedProgressDemo: () => sizedProgressDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Progress = __toESM(require("../../Progress"));
+const basicProgressDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 40 }));
+};
+const coloredProgressDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 40, strokeColor: "var(--bui-color-primary)" }), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 50, strokeColor: "var(--bui-color-info)" }), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 30, strokeColor: "var(--bui-color-success)" }), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 80, strokeColor: "var(--bui-color-warning)" }), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 90, strokeColor: "var(--bui-color-vip)" }));
+};
+const sizedProgressDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 60, strokeWidth: 10 }), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 60, strokeWidth: 15 }), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 60, strokeWidth: 20 }));
+};
+const gradientProgressDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Progress.default,
+    {
+      percent: 60,
+      strokeColor: {
+        from: "var(--bui-color-primary)",
+        to: "var(--bui-color-primary-light)"
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Progress.default,
+    {
+      percent: 90,
+      strokeColor: {
+        "0%": "var(--bui-color-orange)",
+        "100%": "var(--bui-color-orange-light)"
+      }
+    }
+  ));
+};
+const customTrailColorProgressDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 60, trailColor: "var(--bui-color-primary-light)" }), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 80, trailColor: "var(--bui-color-gray-light)" }));
+};
+const accessibilityProgressDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 50, "aria-label": "\u6587\u4EF6\u4E0B\u8F7D\u8FDB\u5EA6" }), /* @__PURE__ */ import_react.default.createElement(
+    import_Progress.default,
+    {
+      percent: 75,
+      "aria-label": "\u6570\u636E\u52A0\u8F7D\u8FDB\u5EA6",
+      "aria-valuetext": "\u5DF2\u5B8C\u621075%"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_Progress.default, { percent: 30, "aria-describedby": "progress-description" }), /* @__PURE__ */ import_react.default.createElement("span", { id: "progress-description", style: { display: "none" } }, "\u8FD9\u662F\u8FDB\u5EA6\u6761\u7684\u8BE6\u7EC6\u63CF\u8FF0\u4FE1\u606F"));
+};
+var A11yDemos_default = {
+  basicProgressDemo,
+  coloredProgressDemo,
+  sizedProgressDemo,
+  gradientProgressDemo,
+  customTrailColorProgressDemo,
+  accessibilityProgressDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  accessibilityProgressDemo,
+  basicProgressDemo,
+  coloredProgressDemo,
+  customTrailColorProgressDemo,
+  gradientProgressDemo,
+  sizedProgressDemo
+});

package/dist/Radio/Radio.js

@@ -70,7 +70,7 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
     defaultChecked = false,
-    checked,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -96,6 +96,7 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = (0, import_react.useContext)(import_RadioContext.default);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -116,7 +117,7 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
   }
   const radioCheckIcon = checkedIcon || /* @__PURE__ */ import_react.default.createElement(import_RadioButtonIcon.default, { checked: true });
   const radioUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_RadioButtonIcon.default, { checked: false });
-  const radioDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const radioDisabled = disabled !== void 0 ? disabled : (groupContext == null ? void 0 : groupContext.disabled) || false;
   const changeAction = (e, isChecked) => {
     var _a2;
     if (!groupContext) {
@@ -160,14 +161,14 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
     }),
     /* @__PURE__ */ import_react.default.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "radio",
         value,
         name,
         checked: radioChecked,
         disabled: radioDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })

package/dist/Radio/RadioGroup.js

@@ -68,7 +68,7 @@ const RadioGroup = (0, import_react.forwardRef)((props, ref) => {
     defaultValue,
     value,
     onChange,
-    disabled,
+    disabled = false,
     children
   } = _a, others = __objRest(_a, [
     "className",

package/dist/Radio/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * 自定义 Radio 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicRadioDemo: () => React.JSX.Element;
+export declare const disabledRadioDemo: () => React.JSX.Element;
+export declare const ariaLabelRadioDemo: () => React.JSX.Element;
+declare const _default: {
+    basicRadioDemo: () => React.JSX.Element;
+    disabledRadioDemo: () => React.JSX.Element;
+    ariaLabelRadioDemo: () => React.JSX.Element;
+};
+export default _default;

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

@@ -0,0 +1,57 @@
+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, {
+  ariaLabelRadioDemo: () => ariaLabelRadioDemo,
+  basicRadioDemo: () => basicRadioDemo,
+  default: () => A11yDemos_default,
+  disabledRadioDemo: () => disabledRadioDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Radio = __toESM(require("../../Radio"));
+const basicRadioDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Radio.default, { checked: true }), "Radio"));
+};
+const disabledRadioDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Radio.default, { disabled: true }), "Radio"));
+};
+const ariaLabelRadioDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Radio.default, { inputProps: { "aria-label": "\u5355\u9009\u6846" } }, "Radio"));
+};
+var A11yDemos_default = {
+  basicRadioDemo,
+  disabledRadioDemo,
+  ariaLabelRadioDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelRadioDemo,
+  basicRadioDemo,
+  disabledRadioDemo
+});

package/dist/Rating/index.css

@@ -2,19 +2,15 @@
 page,
 xhs-page {
   --bui-rating-xsmall-font-size: var(--bui-text-size-5);
-  --bui-rating-xsmall-margin-right: 0;
-  --bui-rating-small-margin-right: 0.5px;
+  --bui-rating-xsmall-margin: 0;
+  --bui-rating-small-margin: 0 0.5px 0 0;
   --bui-rating-small-font-size: var(--bui-text-size-1);
-  --bui-rating-margin-right: 1px;
+  --bui-rating-margin: 0 1px 0 0;
   --bui-rating-font-size: var(--bui-title-size-3);
-  --bui-rating-large-margin-right: 2px;
+  --bui-rating-large-margin: 0 2px 0 0;
   --bui-rating-large-font-size: 22px;
 }
 .bui-rating {
-  --small-margin-right: var(--bui-rating-small-margin-right, 0.5px);
-  --medium-margin-right: var(--bui-rating-medium-margin-right, 1px);
-  --large-margin-right: var(--bui-rating-large-margin-right, 2px);
-  --large-font-size: var(--bui-rating-large-font-size, 22px);
   display: flex;
   flex-wrap: wrap;
   font-family: var(--bui-font-family);
@@ -32,19 +28,19 @@ xhs-page {
 }
 .bui-rating-container-xsmall {
   font-size: var(--bui-rating-xsmall-font-size);
-  margin-right: var(--bui-rating-xsmall-margin-right);
+  margin: var(--bui-rating-xsmall-margin);
 }
 .bui-rating-container-small {
   font-size: var(--bui-rating-small-font-size);
-  margin-right: var(--bui-rating-small-margin-right);
+  margin: var(--bui-rating-small-margin);
 }
 .bui-rating-container-medium {
   font-size: var(--bui-rating-font-size);
-  margin-right: var(--bui-rating-margin-right);
+  margin: var(--bui-rating-margin);
 }
 .bui-rating-container-large {
   font-size: var(--bui-rating-large-font-size);
-  margin-right: var(--bui-rating-large-margin-right);
+  margin: var(--bui-rating-large-margin);
 }
 .bui-rating-item {
   display: flex;

package/dist/ScrollView/ScrollView.js

@@ -1,9 +1,38 @@
 var __create = Object.create;
 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 __getProtoOf = Object.getPrototypeOf;
 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;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,159 +59,33 @@ __export(ScrollView_exports, {
   default: () => ScrollView_default
 });
 module.exports = __toCommonJS(ScrollView_exports);
-var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_index = require("./index.css");
-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();
-}
+var import_useScrollView = require("./useScrollView");
 const classes = {
   root: "bui-scroll"
 };
 const ScrollView = (0, import_react.forwardRef)(
   (props, ref) => {
-    const {
+    const _a = props, {
       className,
       style = {},
-      onScroll,
-      onScrollToUpper,
-      onScrollToLower,
-      scrollTop: scrollTopProp,
-      scrollLeft: scrollLeftProp,
       scrollX,
       scrollY,
-      scrollIntoView,
-      onTouchMove: propsOnTouchMove,
-      scrollIntoViewAlignment,
       children
-    } = props;
-    const container = (0, import_react.useRef)(null);
-    const handleRef = (0, import_utils.useForkRef)(ref, container);
-    const onTouchMove = (e) => {
-    };
-    const scrollVertical = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(
-      (isInit = false) => {
-        var _a, _b;
-        const isAnimation = props == null ? void 0 : props.scrollWithAnimation;
-        if (scrollIntoView && typeof scrollIntoView === "string" && ((_b = (_a = container == null ? void 0 : container.current) == null ? void 0 : _a.querySelector) == null ? void 0 : _b.call(_a, `#${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;
-              const center = (start + end) / 2;
-              scrollVertical(
-                { start, end, nearest, center }[alignment],
-                _isAnimation
-              );
-            }
-            if (scrollX) {
-              const start = target.offsetLeft;
-              const end = target.offsetLeft + target.offsetWidth - container.current.clientWidth;
-              let nearest;
-              if (container.current.scrollTop < end)
-                nearest = end;
-              else if (container.current.scrollTop > start)
-                nearest = start;
-              const center = (start + end) / 2;
-              scrollHorizontal(
-                { start, end, nearest, center }[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]
-    );
-    (0, import_react.useEffect)(() => {
-      handleScroll(true);
-    }, []);
-    (0, import_react.useEffect)(() => {
-      handleScroll();
-    }, [scrollIntoView, scrollY, scrollTopProp, scrollX, scrollLeftProp]);
-    let { upperThreshold = 50, lowerThreshold = 50 } = props;
+    } = _a, otherProps = __objRest(_a, [
+      "className",
+      "style",
+      "scrollX",
+      "scrollY",
+      "children"
+    ]);
+    const { getRootProps } = (0, import_useScrollView.useScrollView)(__spreadProps(__spreadValues({}, otherProps), {
+      scrollX,
+      scrollY,
+      ref
+    }));
     const cls = (0, import_clsx.default)(
       classes.root,
       {
@@ -191,62 +94,11 @@ const ScrollView = (0, import_react.forwardRef)(
       },
       className
     );
-    upperThreshold = Number(upperThreshold);
-    lowerThreshold = Number(lowerThreshold);
-    const upperLowerStatus = (0, import_react.useRef)(0);
-    const upperAndLower = (e) => {
-      if (!container.current)
-        return;
-      const {
-        offsetWidth,
-        offsetHeight,
-        scrollLeft,
-        scrollTop,
-        scrollHeight,
-        scrollWidth
-      } = container.current;
-      if (onScrollToLower && (scrollY && offsetHeight + scrollTop + lowerThreshold >= scrollHeight || scrollX && offsetWidth + scrollLeft + lowerThreshold >= scrollWidth)) {
-        if (upperLowerStatus.current !== -1)
-          onScrollToLower(e);
-        upperLowerStatus.current = -1;
-      } else if (onScrollToUpper && (scrollY && scrollTop <= upperThreshold || scrollX && scrollLeft <= 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 _a;
-      (_a = propsOnTouchMove || onTouchMove) == null ? void 0 : _a(e);
-    };
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        ref: handleRef,
-        style,
-        className: cls,
-        onScroll: onScrollHandler,
-        onTouchMove: onTouchMoveHandler
-      },
-      children
-    );
+    const rootProps = getRootProps({
+      style,
+      className: cls
+    });
+    return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({}, rootProps), children);
   }
 );
 ScrollView.displayName = "BuiScrollView";