@kloudlite/design-system/mjs/atoms/scroll-area.js

A design system for building ambitious products.

"use client";

// components/atoms/scroll-area.tsx
import { useState } from "react";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/atoms/scroll-area.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var ScrollArea = ({
  children,
  className,
  leftblur = true,
  rightblur = true,
  blurfrom = ""
}) => {
  const [isScrolled, setIsScrolled] = useState(false);
  const handleScroll = ({ target }) => {
    setIsScrolled(target.scrollLeft > 0);
  };
  return /* @__PURE__ */ jsxs("div", { className: cn("kl-w-0 kl-relative", className), children: [
    isScrolled && leftblur && /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "kl-z-20 kl-bg-gradient-to-r kl-to-transparent kl-absolute kl-h-full kl-w-2xl -kl-left-[3px] kl-top-0",
          {
            "kl-from-surface-basic-subdued": !blurfrom
          },
          blurfrom
        )
      }
    ),
    /* @__PURE__ */ jsxs(
      "div",
      {
        tabIndex: -1,
        className: "kl-no-scrollbar kl-overflow-x-scroll kl-flex kl-flex-row kl-py-[3px] kl-pl-[3px] -kl-ml-[3px] kl-pr-2xl kl-whitespace-nowrap",
        onScroll: handleScroll,
        children: [
          children,
          rightblur && /* @__PURE__ */ jsx("div", { className: "kl-w-[3px] kl-min-w-[3px]" })
        ]
      }
    ),
    rightblur && /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "kl-bg-gradient-to-l kl-to-transparent kl-absolute kl-h-full kl-w-2xl kl-right-0 kl-top-0 kl-z-20",
          {
            "kl-from-surface-basic-subdued": !blurfrom
          },
          blurfrom
        )
      }
    )
  ] });
};
var scroll_area_default = ScrollArea;
export {
  scroll_area_default as default
};