@mastra/playground-ui 33.0.0-alpha.2 → 33.0.0-alpha.4

package/dist/scroll-area-KogxLVrV.cjs

@@ -0,0 +1,221 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const scrollArea = require('@base-ui/react/scroll-area');
+const React = require('react');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const SCROLL_END_THRESHOLD = 8;
+const useAutoscroll = (ref, { enabled = true }) => {
+  const shouldScrollRef = React.useRef(enabled);
+  const scrollFrameRef = React.useRef(null);
+  const userScrollIntentRef = React.useRef(false);
+  const userScrollIntentTimeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!enabled) return;
+    if (!ref?.current) return;
+    const area = ref.current;
+    const scrollToEnd = () => {
+      if (!shouldScrollRef.current) return;
+      if (scrollFrameRef.current !== null) {
+        cancelAnimationFrame(scrollFrameRef.current);
+      }
+      scrollFrameRef.current = requestAnimationFrame(() => {
+        if (shouldScrollRef.current) {
+          area.scrollTop = area.scrollHeight;
+        }
+        scrollFrameRef.current = null;
+      });
+    };
+    const mutationObserver = new MutationObserver(scrollToEnd);
+    mutationObserver.observe(area, {
+      childList: true,
+      // observe direct children changes
+      subtree: true,
+      // observe all descendants
+      characterData: true
+      // observe text content changes
+    });
+    const resizeObserver = new ResizeObserver(scrollToEnd);
+    resizeObserver.observe(area);
+    const cancelPendingScroll = () => {
+      if (scrollFrameRef.current !== null) {
+        cancelAnimationFrame(scrollFrameRef.current);
+        scrollFrameRef.current = null;
+      }
+    };
+    const stopFollowing = () => {
+      shouldScrollRef.current = false;
+      cancelPendingScroll();
+    };
+    const registerUserScrollIntent = () => {
+      userScrollIntentRef.current = true;
+      if (userScrollIntentTimeoutRef.current !== null) {
+        window.clearTimeout(userScrollIntentTimeoutRef.current);
+      }
+      userScrollIntentTimeoutRef.current = window.setTimeout(() => {
+        userScrollIntentRef.current = false;
+        userScrollIntentTimeoutRef.current = null;
+      }, 250);
+    };
+    const handleWheel = (event) => {
+      registerUserScrollIntent();
+      if (event.deltaY < 0) {
+        stopFollowing();
+      }
+    };
+    const handleKeyDown = (event) => {
+      registerUserScrollIntent();
+      if (["ArrowUp", "PageUp", "Home"].includes(event.key)) {
+        stopFollowing();
+      }
+    };
+    const handleScroll = (e) => {
+      const scrollElement = e.target;
+      const currentPosition = scrollElement.scrollTop + scrollElement.clientHeight;
+      const totalHeight = scrollElement.scrollHeight;
+      const isAtEnd = currentPosition >= totalHeight - SCROLL_END_THRESHOLD;
+      if (isAtEnd) {
+        shouldScrollRef.current = true;
+        return;
+      }
+      if (userScrollIntentRef.current) {
+        shouldScrollRef.current = false;
+        cancelPendingScroll();
+      }
+    };
+    area.addEventListener("wheel", handleWheel, { passive: true });
+    area.addEventListener("touchmove", registerUserScrollIntent, { passive: true });
+    area.addEventListener("pointerdown", registerUserScrollIntent);
+    area.addEventListener("keydown", handleKeyDown);
+    area.addEventListener("scroll", handleScroll);
+    scrollToEnd();
+    return () => {
+      area.removeEventListener("wheel", handleWheel);
+      area.removeEventListener("touchmove", registerUserScrollIntent);
+      area.removeEventListener("pointerdown", registerUserScrollIntent);
+      area.removeEventListener("keydown", handleKeyDown);
+      area.removeEventListener("scroll", handleScroll);
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      cancelPendingScroll();
+      if (userScrollIntentTimeoutRef.current !== null) {
+        window.clearTimeout(userScrollIntentTimeoutRef.current);
+        userScrollIntentTimeoutRef.current = null;
+      }
+    };
+  }, [enabled, ref]);
+};
+
+function resolveMask(mask, orientation) {
+  if (mask === false) return { top: false, bottom: false, left: false, right: false };
+  const vertical = orientation === "vertical" || orientation === "both";
+  const horizontal = orientation === "horizontal" || orientation === "both";
+  const sides = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };
+  if (mask === true || mask === void 0) return sides;
+  if (mask.y !== void 0) {
+    sides.top = mask.y;
+    sides.bottom = mask.y;
+  }
+  if (mask.x !== void 0) {
+    sides.left = mask.x;
+    sides.right = mask.x;
+  }
+  if (mask.top !== void 0) sides.top = mask.top;
+  if (mask.bottom !== void 0) sides.bottom = mask.bottom;
+  if (mask.left !== void 0) sides.left = mask.left;
+  if (mask.right !== void 0) sides.right = mask.right;
+  return sides;
+}
+function maskClasses(sides) {
+  return utils.cn(
+    sides.top && "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]",
+    sides.bottom && "data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]",
+    sides.left && "data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]",
+    sides.right && "data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]"
+  );
+}
+const ScrollArea = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    viewPortClassName,
+    maxHeight,
+    autoScroll = false,
+    orientation = "vertical",
+    mask,
+    showMask,
+    ...props
+  }, ref) => {
+    const areaRef = React__namespace.useRef(null);
+    useAutoscroll(areaRef, { enabled: autoScroll });
+    const effectiveMask = mask !== void 0 ? mask : showMask;
+    const sides = resolveMask(effectiveMask, orientation);
+    const viewportStyle = {};
+    if (maxHeight) viewportStyle.maxHeight = maxHeight;
+    if (orientation === "vertical") {
+      viewportStyle.overflowX = "hidden";
+      viewportStyle.overflowY = "scroll";
+    } else if (orientation === "horizontal") {
+      viewportStyle.overflowX = "scroll";
+      viewportStyle.overflowY = "hidden";
+    }
+    const contentStyle = orientation === "vertical" ? { minWidth: "0px" } : orientation === "horizontal" ? { minHeight: "0px" } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(scrollArea.ScrollArea.Root, { ref, className: utils.cn("relative overflow-hidden", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        scrollArea.ScrollArea.Viewport,
+        {
+          ref: areaRef,
+          className: utils.cn("h-full w-full rounded-[inherit]", maskClasses(sides), viewPortClassName),
+          style: viewportStyle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Content, { style: contentStyle, children })
+        }
+      ),
+      (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical" }),
+      (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal" }),
+      orientation === "both" && /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Corner, {})
+    ] });
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+const ScrollBar = React__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  scrollArea.ScrollArea.Scrollbar,
+  {
+    ref,
+    orientation,
+    className: utils.cn(
+      "flex touch-none select-none transition-opacity duration-normal ease-out-custom",
+      "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0",
+      orientation === "vertical" && "h-full w-1.5 p-px",
+      orientation === "horizontal" && "h-1.5 w-full flex-col p-px",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
+  }
+));
+ScrollBar.displayName = "ScrollBar";
+
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
+exports.useAutoscroll = useAutoscroll;
+//# sourceMappingURL=scroll-area-KogxLVrV.cjs.map

package/dist/scroll-area-KogxLVrV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-KogxLVrV.cjs","sources":["../src/hooks/use-autoscroll.tsx","../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface UseAutoscrollOptions {\n  enabled?: boolean;\n}\n\nconst SCROLL_END_THRESHOLD = 8;\n\nexport const useAutoscroll = (ref: React.RefObject<HTMLElement | null>, { enabled = true }: UseAutoscrollOptions) => {\n  const shouldScrollRef = useRef(enabled);\n  const scrollFrameRef = useRef<number | null>(null);\n  const userScrollIntentRef = useRef(false);\n  const userScrollIntentTimeoutRef = useRef<number | null>(null);\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    if (!ref?.current) return;\n\n    const area = ref.current;\n\n    const scrollToEnd = () => {\n      if (!shouldScrollRef.current) return;\n\n      if (scrollFrameRef.current !== null) {\n        cancelAnimationFrame(scrollFrameRef.current);\n      }\n\n      scrollFrameRef.current = requestAnimationFrame(() => {\n        if (shouldScrollRef.current) {\n          area.scrollTop = area.scrollHeight;\n        }\n        scrollFrameRef.current = null;\n      });\n    };\n\n    const mutationObserver = new MutationObserver(scrollToEnd);\n\n    mutationObserver.observe(area, {\n      childList: true, // observe direct children changes\n      subtree: true, // observe all descendants\n      characterData: true, // observe text content changes\n    });\n\n    const resizeObserver = new ResizeObserver(scrollToEnd);\n    resizeObserver.observe(area);\n\n    const cancelPendingScroll = () => {\n      if (scrollFrameRef.current !== null) {\n        cancelAnimationFrame(scrollFrameRef.current);\n        scrollFrameRef.current = null;\n      }\n    };\n\n    const stopFollowing = () => {\n      shouldScrollRef.current = false;\n      cancelPendingScroll();\n    };\n\n    const registerUserScrollIntent = () => {\n      userScrollIntentRef.current = true;\n\n      if (userScrollIntentTimeoutRef.current !== null) {\n        window.clearTimeout(userScrollIntentTimeoutRef.current);\n      }\n\n      userScrollIntentTimeoutRef.current = window.setTimeout(() => {\n        userScrollIntentRef.current = false;\n        userScrollIntentTimeoutRef.current = null;\n      }, 250);\n    };\n\n    const handleWheel = (event: WheelEvent) => {\n      registerUserScrollIntent();\n\n      if (event.deltaY < 0) {\n        stopFollowing();\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      registerUserScrollIntent();\n\n      if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) {\n        stopFollowing();\n      }\n    };\n\n    const handleScroll = (e: Event) => {\n      const scrollElement = e.target as HTMLElement;\n      const currentPosition = scrollElement.scrollTop + scrollElement.clientHeight;\n      const totalHeight = scrollElement.scrollHeight;\n      const isAtEnd = currentPosition >= totalHeight - SCROLL_END_THRESHOLD;\n\n      if (isAtEnd) {\n        shouldScrollRef.current = true;\n        return;\n      }\n\n      if (userScrollIntentRef.current) {\n        shouldScrollRef.current = false;\n        cancelPendingScroll();\n      }\n    };\n\n    area.addEventListener('wheel', handleWheel, { passive: true });\n    area.addEventListener('touchmove', registerUserScrollIntent, { passive: true });\n    area.addEventListener('pointerdown', registerUserScrollIntent);\n    area.addEventListener('keydown', handleKeyDown);\n    area.addEventListener('scroll', handleScroll);\n    scrollToEnd();\n\n    return () => {\n      area.removeEventListener('wheel', handleWheel);\n      area.removeEventListener('touchmove', registerUserScrollIntent);\n      area.removeEventListener('pointerdown', registerUserScrollIntent);\n      area.removeEventListener('keydown', handleKeyDown);\n      area.removeEventListener('scroll', handleScroll);\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n      cancelPendingScroll();\n\n      if (userScrollIntentTimeoutRef.current !== null) {\n        window.clearTimeout(userScrollIntentTimeoutRef.current);\n        userScrollIntentTimeoutRef.current = null;\n      }\n    };\n  }, [enabled, ref]);\n};\n","import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport * as React from 'react';\n\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\n\nexport type MaskSides = {\n  top?: boolean;\n  bottom?: boolean;\n  left?: boolean;\n  right?: boolean;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: boolean;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: boolean;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  viewPortClassName?: string;\n  maxHeight?: string;\n  autoScroll?: boolean;\n  orientation?: Orientation;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /** @deprecated Use `mask` instead. Retained for backward compatibility. */\n  showMask?: boolean;\n};\n\ntype ResolvedMask = { top: boolean; bottom: boolean; left: boolean; right: boolean };\n\nfunction resolveMask(mask: ScrollAreaMask | undefined, orientation: Orientation): ResolvedMask {\n  if (mask === false) return { top: false, bottom: false, left: false, right: false };\n\n  const vertical = orientation === 'vertical' || orientation === 'both';\n  const horizontal = orientation === 'horizontal' || orientation === 'both';\n  const sides: ResolvedMask = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = mask.y;\n    sides.bottom = mask.y;\n  }\n  if (mask.x !== undefined) {\n    sides.left = mask.x;\n    sides.right = mask.x;\n  }\n  if (mask.top !== undefined) sides.top = mask.top;\n  if (mask.bottom !== undefined) sides.bottom = mask.bottom;\n  if (mask.left !== undefined) sides.left = mask.left;\n  if (mask.right !== undefined) sides.right = mask.right;\n\n  return sides;\n}\n\nfunction maskClasses(sides: ResolvedMask) {\n  return cn(\n    sides.top && 'data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]',\n    sides.bottom && 'data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]',\n    sides.left && 'data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]',\n    sides.right && 'data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]',\n  );\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      viewPortClassName,\n      maxHeight,\n      autoScroll = false,\n      orientation = 'vertical',\n      mask,\n      showMask,\n      ...props\n    },\n    ref,\n  ) => {\n    const areaRef = React.useRef<HTMLDivElement>(null);\n    useAutoscroll(areaRef, { enabled: autoScroll });\n\n    const effectiveMask: ScrollAreaMask | undefined = mask !== undefined ? mask : showMask;\n    const sides = resolveMask(effectiveMask, orientation);\n\n    const viewportStyle: React.CSSProperties = {};\n    if (maxHeight) viewportStyle.maxHeight = maxHeight;\n    if (orientation === 'vertical') {\n      viewportStyle.overflowX = 'hidden';\n      viewportStyle.overflowY = 'scroll';\n    } else if (orientation === 'horizontal') {\n      viewportStyle.overflowX = 'scroll';\n      viewportStyle.overflowY = 'hidden';\n    }\n\n    // Base UI's ScrollAreaContent forces `min-width: fit-content` so the\n    // content can grow wider than the viewport (required for horizontal scroll\n    // measurement). For vertical-only scroll we override it so children shrink\n    // to the viewport width instead of forcing horizontal scroll.\n    const contentStyle: React.CSSProperties | undefined =\n      orientation === 'vertical'\n        ? { minWidth: '0px' }\n        : orientation === 'horizontal'\n          ? { minHeight: '0px' }\n          : undefined;\n\n    return (\n      <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>\n        <ScrollAreaPrimitive.Viewport\n          ref={areaRef}\n          className={cn('h-full w-full rounded-[inherit]', maskClasses(sides), viewPortClassName)}\n          style={viewportStyle}\n        >\n          <ScrollAreaPrimitive.Content style={contentStyle}>{children}</ScrollAreaPrimitive.Content>\n        </ScrollAreaPrimitive.Viewport>\n        {(orientation === 'vertical' || orientation === 'both') && <ScrollBar orientation=\"vertical\" />}\n        {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation=\"horizontal\" />}\n        {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nconst ScrollBar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.Scrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-opacity duration-normal ease-out-custom',\n      'opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n      orientation === 'vertical' && 'h-full w-1.5 p-px',\n      orientation === 'horizontal' && 'h-1.5 w-full flex-col p-px',\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal\" />\n  </ScrollAreaPrimitive.Scrollbar>\n));\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["useRef","cn","React","jsxs","ScrollAreaPrimitive","jsx"],"mappings":"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"}

package/dist/scrollable-container-BqOFHwdb.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const INDICATOR_WIDTH = 40;
+const INDICATOR_HEIGHT = 150;
+const INDICATOR_SPACE = 10;
+const ScrollableContainer = ({
+  className,
+  children,
+  scrollSpeed = 100,
+  scrollIntervalTime = 20
+}) => {
+  const containerRef = useRef(null);
+  const scrollInterval = useRef(null);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [containerRight, setContainerRight] = useState(0);
+  const [containerTop, setContainerTop] = useState(0);
+  const [containerLeft, setContainerLeft] = useState(0);
+  const [showRightIndicator, setShowRightIndicator] = useState(false);
+  const [showLeftIndicator, setShowLeftIndicator] = useState(false);
+  useEffect(() => {
+    const updatePositions = () => {
+      if (!containerRef.current) return;
+      const canScrollRight = containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;
+      setShowRightIndicator(canScrollRight);
+      setContainerHeight(containerRef.current.clientHeight);
+      const rect = containerRef.current.getBoundingClientRect();
+      setContainerRight(rect.right);
+      setContainerLeft(rect.left);
+      setContainerTop(rect.top);
+    };
+    updatePositions();
+    const resizeObserver = new ResizeObserver(updatePositions);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+      const canScrollLeft = containerRef.current.scrollLeft > 0;
+      const canScrollRight = containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;
+      setShowLeftIndicator(canScrollLeft);
+      setShowRightIndicator(canScrollRight);
+      updatePositions();
+    };
+    containerRef?.current?.addEventListener("scroll", handleScroll);
+    const container = containerRef.current;
+    return () => {
+      if (container) {
+        resizeObserver.unobserve(container);
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+  const ScrollIndicator = ({
+    isVisible,
+    position,
+    containerHeight: containerHeight2,
+    containerTop: containerTop2,
+    containerRight: containerRight2,
+    onStartScrolling,
+    onStopScrolling
+  }) => {
+    if (!isVisible) return null;
+    const styles = {
+      top: containerHeight2 < INDICATOR_HEIGHT ? containerTop2 : containerTop2 + (containerHeight2 - INDICATOR_HEIGHT) / 2,
+      width: INDICATOR_WIDTH,
+      height: containerHeight2 < INDICATOR_HEIGHT ? `${containerHeight2}px` : `${INDICATOR_HEIGHT}px`
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onMouseDown: onStartScrolling,
+        onTouchStart: onStartScrolling,
+        onMouseUp: onStopScrolling,
+        onTouchEnd: onStopScrolling,
+        onTouchCancel: onStopScrolling,
+        className: "bg-surface4 text-neutral3 border-surface5 hover:border-neutral3 fixed z-10 flex items-center justify-center rounded-lg border text-2xl hover:text-white",
+        style: {
+          ...styles,
+          left: position === "left" ? containerLeft + INDICATOR_SPACE : containerRight2 - INDICATOR_WIDTH - INDICATOR_SPACE
+        },
+        children: [
+          " ",
+          position === "left" ? "«" : "»"
+        ]
+      }
+    );
+  };
+  const startScrolling = useCallback(
+    (direction, e) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+      if (scrollInterval.current) {
+        clearInterval(scrollInterval.current);
+        scrollInterval.current = null;
+      }
+      if (containerRef.current) {
+        containerRef.current.scrollBy({
+          left: direction === "right" ? scrollSpeed * 2 : -scrollSpeed * 2,
+          behavior: "smooth"
+        });
+      }
+      scrollInterval.current = setInterval(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollBy({
+            left: direction === "right" ? scrollSpeed : -scrollSpeed,
+            behavior: "smooth"
+          });
+        }
+      }, scrollIntervalTime);
+    },
+    [scrollSpeed, scrollIntervalTime]
+  );
+  const stopScrolling = useCallback(() => {
+    if (scrollInterval.current) {
+      clearInterval(scrollInterval.current);
+      scrollInterval.current = null;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative max-h-full overflow-auto", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      ScrollIndicator,
+      {
+        isVisible: showLeftIndicator,
+        position: "left",
+        containerHeight,
+        containerTop,
+        containerRight,
+        onStartScrolling: (e) => startScrolling("left", e),
+        onStopScrolling: stopScrolling
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollIndicator,
+      {
+        isVisible: showRightIndicator,
+        position: "right",
+        containerHeight,
+        containerTop,
+        containerRight,
+        onStartScrolling: (e) => startScrolling("right", e),
+        onStopScrolling: stopScrolling
+      }
+    )
+  ] });
+};
+
+export { ScrollableContainer as S };
+//# sourceMappingURL=scrollable-container-BqOFHwdb.js.map

package/dist/scrollable-container-BqOFHwdb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollable-container-BqOFHwdb.js","sources":["../src/ds/components/ScrollableContainer/scrollable-container.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst INDICATOR_WIDTH = 40;\nconst INDICATOR_HEIGHT = 150;\nconst INDICATOR_SPACE = 10;\n\nexport type ScrollableContainerProps = {\n  className?: string;\n  children: React.ReactNode;\n  scrollSpeed?: number; // Optional prop to set scroll speed (pixels per interval)\n  scrollIntervalTime?: number; // Optional prop to set scroll interval time (ms)\n};\n\nexport const ScrollableContainer = ({\n  className,\n  children,\n  scrollSpeed = 100,\n  scrollIntervalTime = 20,\n}: ScrollableContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollInterval = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const [containerHeight, setContainerHeight] = useState(0);\n  const [containerRight, setContainerRight] = useState(0);\n  const [containerTop, setContainerTop] = useState(0);\n  const [containerLeft, setContainerLeft] = useState(0);\n  const [showRightIndicator, setShowRightIndicator] = useState(false);\n  const [showLeftIndicator, setShowLeftIndicator] = useState(false);\n\n  useEffect(() => {\n    const updatePositions = () => {\n      if (!containerRef.current) return;\n\n      // Update container dimensions\n      const canScrollRight =\n        containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;\n      setShowRightIndicator(canScrollRight);\n      setContainerHeight(containerRef.current.clientHeight);\n\n      // Calculate container's edges relative to viewport\n      const rect = containerRef.current.getBoundingClientRect();\n      setContainerRight(rect.right);\n      setContainerLeft(rect.left);\n      setContainerTop(rect.top);\n    };\n\n    // Initial update\n    updatePositions();\n\n    // Observe resize\n    const resizeObserver = new ResizeObserver(updatePositions);\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    // Handle scroll\n    const handleScroll = () => {\n      if (!containerRef.current) return;\n\n      // Check if we can scroll in either direction\n      const canScrollLeft = containerRef.current.scrollLeft > 0;\n      const canScrollRight =\n        containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;\n\n      // Update indicator states\n      setShowLeftIndicator(canScrollLeft);\n      setShowRightIndicator(canScrollRight);\n\n      // Update positions\n      updatePositions();\n    };\n\n    // Add scroll listener\n    containerRef?.current?.addEventListener('scroll', handleScroll);\n\n    const container = containerRef.current;\n\n    return () => {\n      if (container) {\n        resizeObserver.unobserve(container);\n        container.removeEventListener('scroll', handleScroll);\n      }\n    };\n  }, []);\n\n  const ScrollIndicator = ({\n    isVisible,\n    position,\n    containerHeight,\n    containerTop,\n    containerRight,\n    onStartScrolling,\n    onStopScrolling,\n  }: {\n    isVisible: boolean;\n    position: 'left' | 'right';\n    containerHeight: number;\n    containerTop: number;\n    containerRight: number;\n    onStartScrolling: (e: React.MouseEvent | React.TouchEvent) => void;\n    onStopScrolling: () => void;\n  }) => {\n    if (!isVisible) return null;\n\n    const styles = {\n      top: containerHeight < INDICATOR_HEIGHT ? containerTop : containerTop + (containerHeight - INDICATOR_HEIGHT) / 2,\n      width: INDICATOR_WIDTH,\n      height: containerHeight < INDICATOR_HEIGHT ? `${containerHeight}px` : `${INDICATOR_HEIGHT}px`,\n    } as const;\n\n    return (\n      <button\n        onMouseDown={onStartScrolling}\n        onTouchStart={onStartScrolling}\n        onMouseUp={onStopScrolling}\n        onTouchEnd={onStopScrolling}\n        onTouchCancel={onStopScrolling}\n        className=\"bg-surface4 text-neutral3 border-surface5 hover:border-neutral3 fixed z-10 flex items-center justify-center rounded-lg border text-2xl hover:text-white\"\n        style={{\n          ...styles,\n          left:\n            position === 'left' ? containerLeft + INDICATOR_SPACE : containerRight - INDICATOR_WIDTH - INDICATOR_SPACE,\n        }}\n      >\n        {' '}\n        {position === 'left' ? '«' : '»'}\n      </button>\n    );\n  };\n\n  const startScrolling = useCallback(\n    (direction: 'left' | 'right', e?: React.MouseEvent | React.TouchEvent) => {\n      // Prevent default to avoid any text selection or other default behaviors\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      // Clear any existing interval to prevent duplicates\n      if (scrollInterval.current) {\n        clearInterval(scrollInterval.current);\n        scrollInterval.current = null;\n      }\n\n      // Initial scroll to handle the first click immediately\n      if (containerRef.current) {\n        containerRef.current.scrollBy({\n          left: direction === 'right' ? scrollSpeed * 2 : -scrollSpeed * 2,\n          behavior: 'smooth',\n        });\n      }\n\n      // Then start the interval for continuous scrolling\n      scrollInterval.current = setInterval(() => {\n        if (containerRef.current) {\n          containerRef.current.scrollBy({\n            left: direction === 'right' ? scrollSpeed : -scrollSpeed,\n            behavior: 'smooth',\n          });\n        }\n      }, scrollIntervalTime);\n    },\n    [scrollSpeed, scrollIntervalTime],\n  );\n\n  const stopScrolling = useCallback(() => {\n    if (scrollInterval.current) {\n      clearInterval(scrollInterval.current);\n      scrollInterval.current = null;\n    }\n  }, []);\n\n  return (\n    <div ref={containerRef} className={cn('relative max-h-full overflow-auto', className)}>\n      {children}\n      <ScrollIndicator\n        isVisible={showLeftIndicator}\n        position=\"left\"\n        containerHeight={containerHeight}\n        containerTop={containerTop}\n        containerRight={containerRight}\n        onStartScrolling={e => startScrolling('left', e)}\n        onStopScrolling={stopScrolling}\n      />\n      <ScrollIndicator\n        isVisible={showRightIndicator}\n        position=\"right\"\n        containerHeight={containerHeight}\n        containerTop={containerTop}\n        containerRight={containerRight}\n        onStartScrolling={e => startScrolling('right', e)}\n        onStopScrolling={stopScrolling}\n      />\n    </div>\n  );\n};\n"],"names":["containerHeight","containerTop","containerRight"],"mappings":";;;;AAGA,MAAM,eAAA,GAAkB,EAAA;AACxB,MAAM,gBAAA,GAAmB,GAAA;AACzB,MAAM,eAAA,GAAkB,EAAA;AASjB,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,GAAA;AAAA,EACd,kBAAA,GAAqB;AACvB,CAAA,KAAgC;AAC9B,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,cAAA,GAAiB,OAA8C,IAAI,CAAA;AAEzE,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,CAAC,CAAA;AACxD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,CAAC,CAAA;AACtD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,CAAC,CAAA;AAClD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAAS,KAAK,CAAA;AAClE,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AAG3B,MAAA,MAAM,cAAA,GACJ,aAAa,OAAA,CAAQ,UAAA,GAAa,aAAa,OAAA,CAAQ,WAAA,GAAc,aAAa,OAAA,CAAQ,WAAA;AAC5F,MAAA,qBAAA,CAAsB,cAAc,CAAA;AACpC,MAAA,kBAAA,CAAmB,YAAA,CAAa,QAAQ,YAAY,CAAA;AAGpD,MAAA,MAAM,IAAA,GAAO,YAAA,CAAa,OAAA,CAAQ,qBAAA,EAAsB;AACxD,MAAA,iBAAA,CAAkB,KAAK,KAAK,CAAA;AAC5B,MAAA,gBAAA,CAAiB,KAAK,IAAI,CAAA;AAC1B,MAAA,eAAA,CAAgB,KAAK,GAAG,CAAA;AAAA,IAC1B,CAAA;AAGA,IAAA,eAAA,EAAgB;AAGhB,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,eAAe,CAAA;AACzD,IAAA,IAAI,aAAa,OAAA,EAAS;AACxB,MAAA,cAAA,CAAe,OAAA,CAAQ,aAAa,OAAO,CAAA;AAAA,IAC7C;AAGA,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AAG3B,MAAA,MAAM,aAAA,GAAgB,YAAA,CAAa,OAAA,CAAQ,UAAA,GAAa,CAAA;AACxD,MAAA,MAAM,cAAA,GACJ,aAAa,OAAA,CAAQ,UAAA,GAAa,aAAa,OAAA,CAAQ,WAAA,GAAc,aAAa,OAAA,CAAQ,WAAA;AAG5F,MAAA,oBAAA,CAAqB,aAAa,CAAA;AAClC,MAAA,qBAAA,CAAsB,cAAc,CAAA;AAGpC,MAAA,eAAA,EAAgB;AAAA,IAClB,CAAA;AAGA,IAAA,YAAA,EAAc,OAAA,EAAS,gBAAA,CAAiB,QAAA,EAAU,YAAY,CAAA;AAE9D,IAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAE/B,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,SAAA,EAAW;AACb,QAAA,cAAA,CAAe,UAAU,SAAS,CAAA;AAClC,QAAA,SAAA,CAAU,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,MACtD;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,kBAAkB,CAAC;AAAA,IACvB,SAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA,EAAAA,gBAAAA;AAAA,IACA,YAAA,EAAAC,aAAAA;AAAA,IACA,cAAA,EAAAC,eAAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF,KAQM;AACJ,IAAA,IAAI,CAAC,WAAW,OAAO,IAAA;AAEvB,IAAA,MAAM,MAAA,GAAS;AAAA,MACb,KAAKF,gBAAAA,GAAkB,gBAAA,GAAmBC,aAAAA,GAAeA,aAAAA,GAAAA,CAAgBD,mBAAkB,gBAAA,IAAoB,CAAA;AAAA,MAC/G,KAAA,EAAO,eAAA;AAAA,MACP,QAAQA,gBAAAA,GAAkB,gBAAA,GAAmB,GAAGA,gBAAe,CAAA,EAAA,CAAA,GAAO,GAAG,gBAAgB,CAAA,EAAA;AAAA,KAC3F;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAa,gBAAA;AAAA,QACb,YAAA,EAAc,gBAAA;AAAA,QACd,SAAA,EAAW,eAAA;AAAA,QACX,UAAA,EAAY,eAAA;AAAA,QACZ,aAAA,EAAe,eAAA;AAAA,QACf,SAAA,EAAU,yJAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,GAAG,MAAA;AAAA,UACH,MACE,QAAA,KAAa,MAAA,GAAS,aAAA,GAAgB,eAAA,GAAkBE,kBAAiB,eAAA,GAAkB;AAAA,SAC/F;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UACA,QAAA,KAAa,SAAS,GAAA,GAAM;AAAA;AAAA;AAAA,KAC/B;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,WAA6B,CAAA,KAA4C;AAExE,MAAA,CAAA,EAAG,cAAA,EAAe;AAClB,MAAA,CAAA,EAAG,eAAA,EAAgB;AAGnB,MAAA,IAAI,eAAe,OAAA,EAAS;AAC1B,QAAA,aAAA,CAAc,eAAe,OAAO,CAAA;AACpC,QAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AAAA,MAC3B;AAGA,MAAA,IAAI,aAAa,OAAA,EAAS;AACxB,QAAA,YAAA,CAAa,QAAQ,QAAA,CAAS;AAAA,UAC5B,MAAM,SAAA,KAAc,OAAA,GAAU,WAAA,GAAc,CAAA,GAAI,CAAC,WAAA,GAAc,CAAA;AAAA,UAC/D,QAAA,EAAU;AAAA,SACX,CAAA;AAAA,MACH;AAGA,MAAA,cAAA,CAAe,OAAA,GAAU,YAAY,MAAM;AACzC,QAAA,IAAI,aAAa,OAAA,EAAS;AACxB,UAAA,YAAA,CAAa,QAAQ,QAAA,CAAS;AAAA,YAC5B,IAAA,EAAM,SAAA,KAAc,OAAA,GAAU,WAAA,GAAc,CAAC,WAAA;AAAA,YAC7C,QAAA,EAAU;AAAA,WACX,CAAA;AAAA,QACH;AAAA,MACF,GAAG,kBAAkB,CAAA;AAAA,IACvB,CAAA;AAAA,IACA,CAAC,aAAa,kBAAkB;AAAA,GAClC;AAEA,EAAA,MAAM,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,IAAI,eAAe,OAAA,EAAS;AAC1B,MAAA,aAAA,CAAc,eAAe,OAAO,CAAA;AACpC,MAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,IAAA,CAAC,SAAI,GAAA,EAAK,YAAA,EAAc,WAAW,EAAA,CAAG,mCAAA,EAAqC,SAAS,CAAA,EACjF,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,iBAAA;AAAA,QACX,QAAA,EAAS,MAAA;AAAA,QACT,eAAA;AAAA,QACA,YAAA;AAAA,QACA,cAAA;AAAA,QACA,gBAAA,EAAkB,CAAA,CAAA,KAAK,cAAA,CAAe,MAAA,EAAQ,CAAC,CAAA;AAAA,QAC/C,eAAA,EAAiB;AAAA;AAAA,KACnB;AAAA,oBACA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,kBAAA;AAAA,QACX,QAAA,EAAS,OAAA;AAAA,QACT,eAAA;AAAA,QACA,YAAA;AAAA,QACA,cAAA;AAAA,QACA,gBAAA,EAAkB,CAAA,CAAA,KAAK,cAAA,CAAe,OAAA,EAAS,CAAC,CAAA;AAAA,QAChD,eAAA,EAAiB;AAAA;AAAA;AACnB,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/scrollable-container-Btq-TfCL.cjs

@@ -0,0 +1,153 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const INDICATOR_WIDTH = 40;
+const INDICATOR_HEIGHT = 150;
+const INDICATOR_SPACE = 10;
+const ScrollableContainer = ({
+  className,
+  children,
+  scrollSpeed = 100,
+  scrollIntervalTime = 20
+}) => {
+  const containerRef = React.useRef(null);
+  const scrollInterval = React.useRef(null);
+  const [containerHeight, setContainerHeight] = React.useState(0);
+  const [containerRight, setContainerRight] = React.useState(0);
+  const [containerTop, setContainerTop] = React.useState(0);
+  const [containerLeft, setContainerLeft] = React.useState(0);
+  const [showRightIndicator, setShowRightIndicator] = React.useState(false);
+  const [showLeftIndicator, setShowLeftIndicator] = React.useState(false);
+  React.useEffect(() => {
+    const updatePositions = () => {
+      if (!containerRef.current) return;
+      const canScrollRight = containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;
+      setShowRightIndicator(canScrollRight);
+      setContainerHeight(containerRef.current.clientHeight);
+      const rect = containerRef.current.getBoundingClientRect();
+      setContainerRight(rect.right);
+      setContainerLeft(rect.left);
+      setContainerTop(rect.top);
+    };
+    updatePositions();
+    const resizeObserver = new ResizeObserver(updatePositions);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+      const canScrollLeft = containerRef.current.scrollLeft > 0;
+      const canScrollRight = containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;
+      setShowLeftIndicator(canScrollLeft);
+      setShowRightIndicator(canScrollRight);
+      updatePositions();
+    };
+    containerRef?.current?.addEventListener("scroll", handleScroll);
+    const container = containerRef.current;
+    return () => {
+      if (container) {
+        resizeObserver.unobserve(container);
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+  const ScrollIndicator = ({
+    isVisible,
+    position,
+    containerHeight: containerHeight2,
+    containerTop: containerTop2,
+    containerRight: containerRight2,
+    onStartScrolling,
+    onStopScrolling
+  }) => {
+    if (!isVisible) return null;
+    const styles = {
+      top: containerHeight2 < INDICATOR_HEIGHT ? containerTop2 : containerTop2 + (containerHeight2 - INDICATOR_HEIGHT) / 2,
+      width: INDICATOR_WIDTH,
+      height: containerHeight2 < INDICATOR_HEIGHT ? `${containerHeight2}px` : `${INDICATOR_HEIGHT}px`
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onMouseDown: onStartScrolling,
+        onTouchStart: onStartScrolling,
+        onMouseUp: onStopScrolling,
+        onTouchEnd: onStopScrolling,
+        onTouchCancel: onStopScrolling,
+        className: "bg-surface4 text-neutral3 border-surface5 hover:border-neutral3 fixed z-10 flex items-center justify-center rounded-lg border text-2xl hover:text-white",
+        style: {
+          ...styles,
+          left: position === "left" ? containerLeft + INDICATOR_SPACE : containerRight2 - INDICATOR_WIDTH - INDICATOR_SPACE
+        },
+        children: [
+          " ",
+          position === "left" ? "«" : "»"
+        ]
+      }
+    );
+  };
+  const startScrolling = React.useCallback(
+    (direction, e) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+      if (scrollInterval.current) {
+        clearInterval(scrollInterval.current);
+        scrollInterval.current = null;
+      }
+      if (containerRef.current) {
+        containerRef.current.scrollBy({
+          left: direction === "right" ? scrollSpeed * 2 : -scrollSpeed * 2,
+          behavior: "smooth"
+        });
+      }
+      scrollInterval.current = setInterval(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollBy({
+            left: direction === "right" ? scrollSpeed : -scrollSpeed,
+            behavior: "smooth"
+          });
+        }
+      }, scrollIntervalTime);
+    },
+    [scrollSpeed, scrollIntervalTime]
+  );
+  const stopScrolling = React.useCallback(() => {
+    if (scrollInterval.current) {
+      clearInterval(scrollInterval.current);
+      scrollInterval.current = null;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: utils.cn("relative max-h-full overflow-auto", className), children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollIndicator,
+      {
+        isVisible: showLeftIndicator,
+        position: "left",
+        containerHeight,
+        containerTop,
+        containerRight,
+        onStartScrolling: (e) => startScrolling("left", e),
+        onStopScrolling: stopScrolling
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollIndicator,
+      {
+        isVisible: showRightIndicator,
+        position: "right",
+        containerHeight,
+        containerTop,
+        containerRight,
+        onStartScrolling: (e) => startScrolling("right", e),
+        onStopScrolling: stopScrolling
+      }
+    )
+  ] });
+};
+
+exports.ScrollableContainer = ScrollableContainer;
+//# sourceMappingURL=scrollable-container-Btq-TfCL.cjs.map

package/dist/scrollable-container-Btq-TfCL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollable-container-Btq-TfCL.cjs","sources":["../src/ds/components/ScrollableContainer/scrollable-container.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst INDICATOR_WIDTH = 40;\nconst INDICATOR_HEIGHT = 150;\nconst INDICATOR_SPACE = 10;\n\nexport type ScrollableContainerProps = {\n  className?: string;\n  children: React.ReactNode;\n  scrollSpeed?: number; // Optional prop to set scroll speed (pixels per interval)\n  scrollIntervalTime?: number; // Optional prop to set scroll interval time (ms)\n};\n\nexport const ScrollableContainer = ({\n  className,\n  children,\n  scrollSpeed = 100,\n  scrollIntervalTime = 20,\n}: ScrollableContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollInterval = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const [containerHeight, setContainerHeight] = useState(0);\n  const [containerRight, setContainerRight] = useState(0);\n  const [containerTop, setContainerTop] = useState(0);\n  const [containerLeft, setContainerLeft] = useState(0);\n  const [showRightIndicator, setShowRightIndicator] = useState(false);\n  const [showLeftIndicator, setShowLeftIndicator] = useState(false);\n\n  useEffect(() => {\n    const updatePositions = () => {\n      if (!containerRef.current) return;\n\n      // Update container dimensions\n      const canScrollRight =\n        containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;\n      setShowRightIndicator(canScrollRight);\n      setContainerHeight(containerRef.current.clientHeight);\n\n      // Calculate container's edges relative to viewport\n      const rect = containerRef.current.getBoundingClientRect();\n      setContainerRight(rect.right);\n      setContainerLeft(rect.left);\n      setContainerTop(rect.top);\n    };\n\n    // Initial update\n    updatePositions();\n\n    // Observe resize\n    const resizeObserver = new ResizeObserver(updatePositions);\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    // Handle scroll\n    const handleScroll = () => {\n      if (!containerRef.current) return;\n\n      // Check if we can scroll in either direction\n      const canScrollLeft = containerRef.current.scrollLeft > 0;\n      const canScrollRight =\n        containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;\n\n      // Update indicator states\n      setShowLeftIndicator(canScrollLeft);\n      setShowRightIndicator(canScrollRight);\n\n      // Update positions\n      updatePositions();\n    };\n\n    // Add scroll listener\n    containerRef?.current?.addEventListener('scroll', handleScroll);\n\n    const container = containerRef.current;\n\n    return () => {\n      if (container) {\n        resizeObserver.unobserve(container);\n        container.removeEventListener('scroll', handleScroll);\n      }\n    };\n  }, []);\n\n  const ScrollIndicator = ({\n    isVisible,\n    position,\n    containerHeight,\n    containerTop,\n    containerRight,\n    onStartScrolling,\n    onStopScrolling,\n  }: {\n    isVisible: boolean;\n    position: 'left' | 'right';\n    containerHeight: number;\n    containerTop: number;\n    containerRight: number;\n    onStartScrolling: (e: React.MouseEvent | React.TouchEvent) => void;\n    onStopScrolling: () => void;\n  }) => {\n    if (!isVisible) return null;\n\n    const styles = {\n      top: containerHeight < INDICATOR_HEIGHT ? containerTop : containerTop + (containerHeight - INDICATOR_HEIGHT) / 2,\n      width: INDICATOR_WIDTH,\n      height: containerHeight < INDICATOR_HEIGHT ? `${containerHeight}px` : `${INDICATOR_HEIGHT}px`,\n    } as const;\n\n    return (\n      <button\n        onMouseDown={onStartScrolling}\n        onTouchStart={onStartScrolling}\n        onMouseUp={onStopScrolling}\n        onTouchEnd={onStopScrolling}\n        onTouchCancel={onStopScrolling}\n        className=\"bg-surface4 text-neutral3 border-surface5 hover:border-neutral3 fixed z-10 flex items-center justify-center rounded-lg border text-2xl hover:text-white\"\n        style={{\n          ...styles,\n          left:\n            position === 'left' ? containerLeft + INDICATOR_SPACE : containerRight - INDICATOR_WIDTH - INDICATOR_SPACE,\n        }}\n      >\n        {' '}\n        {position === 'left' ? '«' : '»'}\n      </button>\n    );\n  };\n\n  const startScrolling = useCallback(\n    (direction: 'left' | 'right', e?: React.MouseEvent | React.TouchEvent) => {\n      // Prevent default to avoid any text selection or other default behaviors\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      // Clear any existing interval to prevent duplicates\n      if (scrollInterval.current) {\n        clearInterval(scrollInterval.current);\n        scrollInterval.current = null;\n      }\n\n      // Initial scroll to handle the first click immediately\n      if (containerRef.current) {\n        containerRef.current.scrollBy({\n          left: direction === 'right' ? scrollSpeed * 2 : -scrollSpeed * 2,\n          behavior: 'smooth',\n        });\n      }\n\n      // Then start the interval for continuous scrolling\n      scrollInterval.current = setInterval(() => {\n        if (containerRef.current) {\n          containerRef.current.scrollBy({\n            left: direction === 'right' ? scrollSpeed : -scrollSpeed,\n            behavior: 'smooth',\n          });\n        }\n      }, scrollIntervalTime);\n    },\n    [scrollSpeed, scrollIntervalTime],\n  );\n\n  const stopScrolling = useCallback(() => {\n    if (scrollInterval.current) {\n      clearInterval(scrollInterval.current);\n      scrollInterval.current = null;\n    }\n  }, []);\n\n  return (\n    <div ref={containerRef} className={cn('relative max-h-full overflow-auto', className)}>\n      {children}\n      <ScrollIndicator\n        isVisible={showLeftIndicator}\n        position=\"left\"\n        containerHeight={containerHeight}\n        containerTop={containerTop}\n        containerRight={containerRight}\n        onStartScrolling={e => startScrolling('left', e)}\n        onStopScrolling={stopScrolling}\n      />\n      <ScrollIndicator\n        isVisible={showRightIndicator}\n        position=\"right\"\n        containerHeight={containerHeight}\n        containerTop={containerTop}\n        containerRight={containerRight}\n        onStartScrolling={e => startScrolling('right', e)}\n        onStopScrolling={stopScrolling}\n      />\n    </div>\n  );\n};\n"],"names":["useRef","useState","useEffect","containerHeight","containerTop","containerRight","jsxs","useCallback","cn","jsx"],"mappings":"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"}