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

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";

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

@@ -0,0 +1,319 @@
+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 __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, {
+  BasicScrollViewDemo: () => BasicScrollViewDemo,
+  BidirectionalScrollDemo: () => BidirectionalScrollDemo,
+  ControlledScrollDemo: () => ControlledScrollDemo,
+  HorizontalScrollViewDemo: () => HorizontalScrollViewDemo,
+  ScrollEventsDemo: () => ScrollEventsDemo,
+  ThresholdTestDemo: () => ThresholdTestDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_ScrollView = __toESM(require("../../ScrollView"));
+const BasicScrollViewDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_ScrollView.default, { scrollY: true, style: { height: "300px", width: "100%" } }, Array.from({ length: 50 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: index,
+      style: { padding: "10px", borderBottom: "1px solid #eee" }
+    },
+    "Item ",
+    index + 1
+  )));
+};
+const HorizontalScrollViewDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_ScrollView.default, { scrollX: true, style: { width: "300px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", width: "max-content" } }, Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: index,
+      style: {
+        minWidth: "100px",
+        height: "80px",
+        margin: "0 5px",
+        padding: "10px",
+        backgroundColor: "#f0f0f0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    "Item ",
+    index + 1
+  ))));
+};
+const ScrollEventsDemo = () => {
+  const [scrollInfo, setScrollInfo] = import_react.default.useState({
+    scrollTop: 0,
+    atTop: false,
+    atBottom: false
+  });
+  const handleScroll = (e) => {
+    var _a;
+    const event = e;
+    const scrollTop = ((_a = event.detail) == null ? void 0 : _a.scrollTop) || 0;
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), {
+      scrollTop
+    }));
+  };
+  const handleScrollToUpper = () => {
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: true, atBottom: false }));
+  };
+  const handleScrollToLower = () => {
+    setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: false, atBottom: true }));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      "data-testid": "scroll-info",
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f9f9f9"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("p", null, "Scroll Top: ", scrollInfo.scrollTop),
+    /* @__PURE__ */ import_react.default.createElement("p", null, "At Top: ", scrollInfo.atTop ? "Yes" : "No"),
+    /* @__PURE__ */ import_react.default.createElement("p", null, "At Bottom: ", scrollInfo.atBottom ? "Yes" : "No")
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ScrollView.default,
+    {
+      scrollY: true,
+      style: { height: "200px", width: "100%" },
+      onScroll: handleScroll,
+      onScrollToUpper: handleScrollToUpper,
+      onScrollToLower: handleScrollToLower,
+      upperThreshold: 30,
+      lowerThreshold: 30
+    },
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: index,
+        style: { padding: "15px", borderBottom: "1px solid #ddd" }
+      },
+      "Scroll Item ",
+      index + 1
+    ))
+  ));
+};
+const ControlledScrollDemo = () => {
+  const [scrollTop, setScrollTop] = import_react.default.useState(0);
+  const [scrollIntoView, setScrollIntoView] = import_react.default.useState("");
+  const scrollToPosition = (position) => {
+    setScrollIntoView("");
+    setScrollTop(position);
+  };
+  const scrollToElement = (elementId) => {
+    setScrollTop(0);
+    setScrollIntoView(elementId);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f5f5f5"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToPosition(0),
+        style: { marginRight: "5px" }
+      },
+      "Top"
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToPosition(200),
+        style: { marginRight: "5px" }
+      },
+      "200px"
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => scrollToElement("item-10"),
+        style: { marginRight: "5px" }
+      },
+      "Item 10"
+    ),
+    /* @__PURE__ */ import_react.default.createElement("button", { type: "button", onClick: () => scrollToElement("item-20") }, "Item 20")
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ScrollView.default,
+    {
+      scrollY: true,
+      style: { height: "250px", width: "100%" },
+      scrollTop,
+      scrollIntoView,
+      scrollWithAnimation: true
+    },
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: index,
+        id: `item-${index + 1}`,
+        style: {
+          padding: "20px",
+          borderBottom: "1px solid #ccc",
+          backgroundColor: (index + 1) % 10 === 0 ? "#e6f3ff" : "white"
+        }
+      },
+      "Item ",
+      index + 1,
+      " ",
+      (index + 1) % 10 === 0 && "(Highlighted)"
+    ))
+  ));
+};
+const BidirectionalScrollDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_ScrollView.default,
+    {
+      scrollX: true,
+      scrollY: true,
+      style: {
+        width: "300px",
+        height: "200px",
+        border: "1px solid #ddd",
+        borderRadius: "4px"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          width: "600px",
+          height: "400px",
+          backgroundImage: "linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)",
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+          position: "relative"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            padding: "20px",
+            backgroundColor: "white",
+            border: "2px solid #007acc",
+            borderRadius: "8px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement("h3", { style: { margin: "0 0 10px 0", color: "#007acc" } }, "Scroll in both directions!"),
+        /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: 0, color: "#666" } }, "This content area is larger than the viewport")
+      )
+    )
+  );
+};
+const ThresholdTestDemo = () => {
+  const [thresholdEvents, setThresholdEvents] = import_react.default.useState([]);
+  const addEvent = (event) => {
+    setThresholdEvents((prev) => [
+      ...prev.slice(-4),
+      `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${event}`
+    ]);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      "data-testid": "threshold-events",
+      style: {
+        marginBottom: "10px",
+        padding: "10px",
+        backgroundColor: "#f0f8ff",
+        minHeight: "80px"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("strong", null, "Threshold Events:"),
+    thresholdEvents.map((event, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index, style: { fontSize: "12px", color: "#666" } }, event))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ScrollView.default,
+    {
+      scrollY: true,
+      style: { height: "150px", width: "100%" },
+      upperThreshold: 20,
+      lowerThreshold: 20,
+      onScrollToUpper: () => addEvent("Reached upper threshold (20px)"),
+      onScrollToLower: () => addEvent("Reached lower threshold (20px)")
+    },
+    Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: index,
+        style: {
+          padding: "12px",
+          borderBottom: "1px solid #eee",
+          backgroundColor: index === 0 || index === 19 ? "#fff3cd" : "white"
+        }
+      },
+      index === 0 && "First Item (Top Threshold Test)",
+      index === 19 && "Last Item (Bottom Threshold Test)",
+      index !== 0 && index !== 19 && `Item ${index + 1}`
+    ))
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BasicScrollViewDemo,
+  BidirectionalScrollDemo,
+  ControlledScrollDemo,
+  HorizontalScrollViewDemo,
+  ScrollEventsDemo,
+  ThresholdTestDemo
+});