import { jsx } from "../../../packages/jsx/src/jsx-runtime.js";
import { useRef } from "react";
import { useScrolledToRight } from "./useScrolledToRight.js";
import { Spacing } from "../../../tokens/Spacing.js";
function TableScrollview({ onScroll, fade, children, className, ...rest }) {
  const scrollviewRef = useRef(null);
  const { scrolledToRight, shouldTransition } = useScrolledToRight(scrollviewRef, {
    disabled: !fade.right
  });
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...rest,
      role: "presentation",
      className,
      sx: fade.right ? {
        maskImage: `linear-gradient(to left, transparent, black ${Spacing["128px"]})`,
        maskSize: "calc(100% + 128px) 100%",
        maskPosition: scrolledToRight ? "0px 0%" : `-${Spacing["128px"]} 0%`,
        transition: shouldTransition ? "mask-position 0.5s linear, -webkit-mask-position 0.5s linear" : ""
      } : {},
      children: /* @__PURE__ */ jsx(
        "div",
        {
          sx: {
            maskImage: fade.left ? `linear-gradient(to right, transparent, black ${Spacing["32px"]})` : ""
          },
          children: /* @__PURE__ */ jsx(
            "div",
            {
              ref: scrollviewRef,
              css: {
                overflowX: ["overlay", "scroll"],
                overflowY: "hidden"
              },
              onScroll,
              children
            }
          )
        }
      )
    }
  );
}
export {
  TableScrollview
};
