@drawbridge/components 0.0.78 → 0.1.1

package/dist/wrapper-gradient.mjs

@@ -1,8 +1,206 @@
 "use client";
-import {
-  useWrapperGradient,
-  wrapper_gradient_default
-} from "./chunk-PT7UR6AO.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+const WrapperGradientContext = createContext(null);
+const useWrapperGradient = () => useContext(WrapperGradientContext);
+const WrapperGradient = ({
+  children,
+  className,
+  classNameGradient,
+  classNameScroll,
+  color,
+  gradientTopOffset,
+  horizontal = false
+}) => {
+  const showX = horizontal === true || horizontal === "both";
+  const showY = horizontal === false || horizontal === "both";
+  const overflowClass = horizontal === "both" ? "overflow-scroll" : horizontal ? "overflow-x-scroll overflow-y-visible" : "overflow-y-scroll overflow-x-visible";
+  const overscrollClass = horizontal ? "overscroll-x-none" : "";
+  const themed = Boolean(color);
+  const gradientDefaults = "absolute z-[2] pointer-events-none transition-all duration-[100ms] ";
+  const classes = {
+    container: [
+      themed ? "relative" : "w-full relative",
+      ...className ? [className] : []
+    ],
+    inner: [
+      "w-full relative scroll-smooth hide-scrollbar",
+      overscrollClass,
+      overflowClass,
+      ...classNameScroll ? [classNameScroll] : []
+    ],
+    topGradient: [
+      gradientDefaults,
+      "w-full -top-[1px]",
+      ...themed ? [] : ["bg-gradient-to-b"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["h-10"] : ["from-white to-transparent h-10"]
+    ],
+    bottomGradient: [
+      gradientDefaults,
+      "w-full -bottom-[1px]",
+      ...themed ? [] : ["bg-gradient-to-t"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["h-10"] : ["from-white to-transparent h-10"]
+    ],
+    leftGradient: [
+      gradientDefaults,
+      "h-full top-0 left-0",
+      ...themed ? [] : ["bg-gradient-to-r"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["w-4"] : ["from-white from-30% to-transparent w-4"]
+    ],
+    rightGradient: [
+      gradientDefaults,
+      "h-full top-0 right-0",
+      ...themed ? [] : ["bg-gradient-to-l"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["w-4"] : ["from-white from-30% to-transparent w-4"]
+    ]
+  };
+  const gradients = {
+    top: "linear-gradient( to bottom, " + color + " 0%, transparent 100% )",
+    bottom: "linear-gradient( to top, " + color + " 0%, transparent 100% )",
+    left: "linear-gradient( to right, " + color + " 0%, transparent 100% )",
+    right: "linear-gradient( to left, " + color + " 0%, transparent 100% )"
+  };
+  const containerRef = useRef(null);
+  const [scroll, setScroll] = useState({
+    top: 0,
+    left: 0,
+    atBottom: true,
+    atRight: true
+  });
+  useEffect(
+    () => {
+      const container = containerRef.current;
+      const handleScroll = () => {
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = container;
+        setScroll({
+          top: scrollTop,
+          left: scrollLeft,
+          atBottom: scrollTop + clientHeight >= scrollHeight - 1,
+          atRight: scrollLeft + clientWidth >= scrollWidth - 1
+        });
+      };
+      const handleUpdate = () => {
+        const { scrollHeight, scrollWidth, clientHeight, clientWidth } = container;
+        if (scrollHeight <= clientHeight && scrollWidth <= clientWidth) {
+          setScroll({
+            top: 0,
+            left: 0,
+            atBottom: true,
+            atRight: true
+          });
+          return;
+        }
+        ;
+        handleScroll();
+      };
+      handleUpdate();
+      container.addEventListener("scroll", handleScroll);
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+            handleUpdate();
+            break;
+          }
+        }
+      });
+      observer.observe(container, {
+        childList: true,
+        subtree: true
+      });
+      const resizeObserver = new ResizeObserver(handleUpdate);
+      resizeObserver.observe(container);
+      return () => {
+        container.removeEventListener("scroll", handleScroll);
+        observer.disconnect();
+        resizeObserver.disconnect();
+      };
+    },
+    [horizontal]
+  );
+  const contextValue = useMemo(
+    () => ({
+      atBottom: scroll.atBottom,
+      atRight: scroll.atRight
+    }),
+    [scroll.atBottom, scroll.atRight]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: classes.container.join(" ")
+      },
+      children: /* @__PURE__ */ jsxs(WrapperGradientContext.Provider, { value: contextValue, children: [
+        showY && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: classes.topGradient.join(" ") + (scroll.top > 5 ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.top
+                },
+                ...gradientTopOffset && {
+                  top: gradientTopOffset
+                }
+              }
+            }
+          }
+        ),
+        showX && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: classes.leftGradient.join(" ") + (scroll.left > 5 ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.left
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: classes.inner.join(" "),
+              ref: containerRef
+            },
+            children
+          }
+        ),
+        showY && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: classes.bottomGradient.join(" ") + (!scroll.atBottom ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.bottom
+                }
+              }
+            }
+          }
+        ),
+        showX && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: classes.rightGradient.join(" ") + (!scroll.atRight ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.right
+                }
+              }
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+var wrapper_gradient_default = WrapperGradient;
 export {
   wrapper_gradient_default as default,
   useWrapperGradient