@sikka/hawa/dist/scrollArea/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/scrollArea/ScrollArea.tsx
import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// elements/scrollArea/ScrollArea.tsx
var ScrollArea = React.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
  const scrollAreaRef = React.useRef(null);
  const isDragging = React.useRef(false);
  const startPos = React.useRef({ x: 0, y: 0 });
  const scrollPos = React.useRef({ top: 0, left: 0 });
  const [showLeftFade, setShowLeftFade] = React.useState(false);
  const [showRightFade, setShowRightFade] = React.useState(false);
  const checkOverflow = () => {
    if (scrollAreaRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
      setShowLeftFade(scrollLeft > 0);
      setShowRightFade(scrollLeft + clientWidth < scrollWidth);
    }
  };
  const onMouseDown = (e) => {
    isDragging.current = true;
    startPos.current = { x: e.clientX, y: e.clientY };
    if (scrollAreaRef.current) {
      scrollPos.current = {
        top: scrollAreaRef.current.scrollTop,
        left: scrollAreaRef.current.scrollLeft
      };
    }
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
  };
  const onMouseMove = (e) => {
    if (!isDragging.current || !scrollAreaRef.current) return;
    const dx = e.clientX - startPos.current.x;
    const dy = e.clientY - startPos.current.y;
    if (orientation === "vertical") {
      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
    } else {
      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
      checkOverflow();
    }
  };
  const onMouseUp = () => {
    isDragging.current = false;
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  };
  React.useEffect(() => {
    checkOverflow();
    if (scrollAreaRef.current) {
      scrollAreaRef.current.addEventListener("scroll", checkOverflow);
      window.addEventListener("resize", checkOverflow);
    }
    return () => {
      if (scrollAreaRef.current) {
        scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
      }
      window.removeEventListener("resize", checkOverflow);
    };
  }, []);
  return /* @__PURE__ */ React.createElement(
    ScrollAreaPrimitive.Root,
    {
      ref,
      className: cn("hawa-relative hawa-overflow-hidden", className),
      ...props
    },
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cn(
          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0 hawa-mask-fade-right",
          showLeftFade ? "hawa-block" : "hawa-hidden"
        )
      }
    ),
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cn(
          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10",
          showRightFade ? "hawa-block" : "hawa-hidden"
        )
      }
    ),
    /* @__PURE__ */ React.createElement(
      ScrollAreaPrimitive.Viewport,
      {
        ref: scrollAreaRef,
        className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
        onMouseDown
      },
      children
    ),
    /* @__PURE__ */ React.createElement(ScrollBar, { orientation }),
    /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Corner, null)
  );
});
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React.createElement(
  ScrollAreaPrimitive.ScrollAreaScrollbar,
  {
    ref,
    orientation,
    className: cn(
      "hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
      orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
      orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
      className
    ),
    ...props
  },
  /* @__PURE__ */ React.createElement(
    ScrollAreaPrimitive.ScrollAreaThumb,
    {
      className: cn(
        "hawa-relative hawa-rounded-full hawa-bg-border",
        orientation === "vertical" && "hawa-flex-1"
      )
    }
  )
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export {
  ScrollArea,
  ScrollBar
};
//# sourceMappingURL=index.mjs.map