@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/scroll-area-9-S7wfSs.js

@@ -0,0 +1,227 @@
+import { controlStateColorTransition, focusRing } from "./primitives/transitions.es.js";
+import { quietTextHover } from "./primitives/typography.es.js";
+import { useAutoscroll } from "./hooks/use-autoscroll.es.js";
+import { t as mergeRefs } from "./merge-refs-BXb4SnRx.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+// src/ds/components/ScrollArea/scroll-area.tsx
+var DEFAULT_SCROLL_BUTTON_SPEED = 100;
+var DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;
+var MIN_SCROLL_BUTTON_SPEED = 1;
+var MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;
+var DEFAULT_MASK_FADE_DEPTH = "2rem";
+var NO_MASK_FADE = "0px";
+var SCROLL_DRIVEN_FADE_CLASSES = [
+	"mask-t-from-[calc(100%-min(var(--scroll-area-fade-top),var(--scroll-area-overflow-y-start,0px)))]",
+	"mask-b-from-[calc(100%-min(var(--scroll-area-fade-bottom),var(--scroll-area-overflow-y-end,0px)))]",
+	"mask-l-from-[calc(100%-min(var(--scroll-area-fade-left),var(--scroll-area-overflow-x-start,0px)))]",
+	"mask-r-from-[calc(100%-min(var(--scroll-area-fade-right),var(--scroll-area-overflow-x-end,0px)))]"
+].join(" ");
+var fadeDepth = (side) => side === true ? DEFAULT_MASK_FADE_DEPTH : side;
+function resolveMask(mask, orientation) {
+	if (mask === false) return {
+		top: false,
+		bottom: false,
+		left: false,
+		right: false
+	};
+	const verticalFade = (orientation === "vertical" || orientation === "both") && DEFAULT_MASK_FADE_DEPTH;
+	const horizontalFade = (orientation === "horizontal" || orientation === "both") && DEFAULT_MASK_FADE_DEPTH;
+	const sides = {
+		top: verticalFade,
+		bottom: verticalFade,
+		left: horizontalFade,
+		right: horizontalFade
+	};
+	if (mask === true || mask === void 0) return sides;
+	if (mask.y !== void 0) {
+		sides.top = fadeDepth(mask.y);
+		sides.bottom = fadeDepth(mask.y);
+	}
+	if (mask.x !== void 0) {
+		sides.left = fadeDepth(mask.x);
+		sides.right = fadeDepth(mask.x);
+	}
+	if (mask.top !== void 0) sides.top = fadeDepth(mask.top);
+	if (mask.bottom !== void 0) sides.bottom = fadeDepth(mask.bottom);
+	if (mask.left !== void 0) sides.left = fadeDepth(mask.left);
+	if (mask.right !== void 0) sides.right = fadeDepth(mask.right);
+	return sides;
+}
+var fadeDepthVars = (sides) => ({
+	"--scroll-area-fade-top": sides.top || NO_MASK_FADE,
+	"--scroll-area-fade-bottom": sides.bottom || NO_MASK_FADE,
+	"--scroll-area-fade-left": sides.left || NO_MASK_FADE,
+	"--scroll-area-fade-right": sides.right || NO_MASK_FADE
+});
+function clampScrollButtonNumber(value, fallback, min) {
+	const resolvedValue = value ?? fallback;
+	return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);
+}
+var ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }) => {
+	const Icon = direction === "left" ? ChevronLeftIcon : ChevronRightIcon;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		className: cn("absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent hover:bg-fill-subtle active:bg-fill", quietTextHover, controlStateColorTransition, focusRing, direction === "left" ? "left-1 group-data-[overflow-x-start]/scroll-area:flex" : "right-1 group-data-[overflow-x-end]/scroll-area:flex"),
+		onPointerDown: (event) => onStartScrolling(direction, event),
+		onPointerUp: onStopScrolling,
+		onPointerLeave: onStopScrolling,
+		onPointerCancel: onStopScrolling,
+		onBlur: onStopScrolling,
+		onClick: (event) => {
+			if (event.detail === 0) onKeyboardScroll(direction);
+		},
+		children: /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+};
+var ScrollButtons = ({ areaRef, scrollButtons }) => {
+	const scrollButtonInterval = React$1.useRef(null);
+	const scrollButtonOptions = typeof scrollButtons === "object" ? scrollButtons : void 0;
+	const scrollButtonSpeed = clampScrollButtonNumber(scrollButtonOptions?.scrollSpeed, DEFAULT_SCROLL_BUTTON_SPEED, MIN_SCROLL_BUTTON_SPEED);
+	const scrollButtonIntervalTime = clampScrollButtonNumber(scrollButtonOptions?.scrollIntervalTime, DEFAULT_SCROLL_BUTTON_INTERVAL_TIME, MIN_SCROLL_BUTTON_INTERVAL_TIME);
+	const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? "Scroll left";
+	const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? "Scroll right";
+	const stopScrollButtonScrolling = React$1.useCallback(() => {
+		if (!scrollButtonInterval.current) return;
+		clearInterval(scrollButtonInterval.current);
+		scrollButtonInterval.current = null;
+	}, []);
+	const scrollByDirection = React$1.useCallback((direction, multiplier = 1) => {
+		const viewport = areaRef.current;
+		if (!viewport) return;
+		viewport.scrollBy({
+			left: direction === "right" ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,
+			behavior: "smooth"
+		});
+	}, [areaRef, scrollButtonSpeed]);
+	const startScrollButtonScrolling = React$1.useCallback((direction, event) => {
+		event?.preventDefault();
+		event?.stopPropagation();
+		event?.currentTarget.setPointerCapture?.(event.pointerId);
+		stopScrollButtonScrolling();
+		scrollByDirection(direction, 2);
+		scrollButtonInterval.current = setInterval(() => {
+			scrollByDirection(direction);
+		}, scrollButtonIntervalTime);
+	}, [
+		scrollButtonIntervalTime,
+		scrollByDirection,
+		stopScrollButtonScrolling
+	]);
+	React$1.useEffect(() => {
+		return () => {
+			stopScrollButtonScrolling();
+		};
+	}, [stopScrollButtonScrolling]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollButton, {
+		direction: "left",
+		label: leftScrollButtonLabel,
+		onStartScrolling: startScrollButtonScrolling,
+		onStopScrolling: stopScrollButtonScrolling,
+		onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+	}), /* @__PURE__ */ jsx(ScrollButton, {
+		direction: "right",
+		label: rightScrollButtonLabel,
+		onStartScrolling: startScrollButtonScrolling,
+		onStopScrolling: stopScrollButtonScrolling,
+		onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+	})] });
+};
+var ScrollAreaViewportContext = React$1.createContext(null);
+function useScrollAreaViewportContext() {
+	const viewport = React$1.use(ScrollAreaViewportContext);
+	if (!viewport) throw new Error("ScrollAreaViewport must be a direct child of ScrollArea");
+	return viewport;
+}
+function ScrollAreaViewport({ className, contentClassName, children, ref, render }) {
+	const viewport = useScrollAreaViewportContext();
+	const { areaRef } = viewport;
+	const viewportRef = React$1.useMemo(() => mergeRefs(areaRef, ref), [areaRef, ref]);
+	return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+		ref: viewportRef,
+		className: cn(viewport.className, className),
+		style: viewport.style,
+		render,
+		children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+			className: contentClassName,
+			style: viewport.contentStyle,
+			children: /* @__PURE__ */ jsx(ScrollAreaViewportContext, {
+				value: null,
+				children
+			})
+		})
+	});
+}
+function ScrollArea$1({ className, children, maxHeight, autoScroll = false, autoScrollStartFollowing, onAutoScrollFollowingChange, orientation = "vertical", scrollButtons, mask, revealScrollbarOnHover = true, alwaysShowScrollbar = false, ...props }) {
+	const areaRef = React$1.useRef(null);
+	useAutoscroll(areaRef, {
+		enabled: autoScroll,
+		startFollowing: autoScrollStartFollowing,
+		onFollowingChange: onAutoScrollFollowingChange
+	});
+	const sides = resolveMask(mask, orientation);
+	const fadesAnySide = Object.values(sides).some(Boolean);
+	const viewportStyle = fadeDepthVars(sides);
+	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;
+	const viewport = {
+		areaRef,
+		className: cn("size-full", fadesAnySide && SCROLL_DRIVEN_FADE_CLASSES),
+		style: viewportStyle,
+		contentStyle
+	};
+	const callerViewportCount = React$1.Children.toArray(children).filter((child) => React$1.isValidElement(child) && child.type === ScrollAreaViewport).length;
+	if (callerViewportCount > 1) throw new Error("ScrollArea takes at most one ScrollAreaViewport");
+	const callerRendersViewport = callerViewportCount === 1;
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		className: cn("group/scroll-area relative overflow-hidden", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaViewportContext, {
+				value: viewport,
+				children: callerRendersViewport ? children : /* @__PURE__ */ jsx(ScrollAreaViewport, { children })
+			}),
+			scrollButtons && orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollButtons, {
+				areaRef,
+				scrollButtons
+			}),
+			(orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "vertical",
+				revealOnHover: revealScrollbarOnHover,
+				alwaysVisible: alwaysShowScrollbar
+			}),
+			(orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "horizontal",
+				revealOnHover: revealScrollbarOnHover,
+				alwaysVisible: alwaysShowScrollbar
+			}),
+			orientation === "both" && /* @__PURE__ */ jsx(ScrollArea.Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", revealOnHover = true, alwaysVisible = false, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: cn("flex touch-none transition-opacity duration-normal ease-out-custom select-none", alwaysVisible ? "opacity-100" : "opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0", revealOnHover && !alwaysVisible && "data-[hovering]:opacity-100", orientation === "vertical" && "my-(--scroll-area-scrollbar-inset,0px) w-1.5 p-px", orientation === "horizontal" && "mx-(--scroll-area-scrollbar-inset,0px) h-1.5 flex-col p-px", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/60" })
+	});
+}
+export { ScrollAreaViewport as n, ScrollBar as r, ScrollArea$1 as t };
+
+//# sourceMappingURL=scroll-area-9-S7wfSs.js.map

package/dist/scroll-area-9-S7wfSs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-9-S7wfSs.js","names":["React","_Fragment","ScrollAreaPrimitive","ScrollArea"],"sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { controlStateColorTransition, focusRing } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\ntype MaskFadeDepth = `${number}${'rem' | 'px'}`;\ntype MaskSide = boolean | MaskFadeDepth;\n\nconst DEFAULT_MASK_FADE_DEPTH: MaskFadeDepth = '2rem';\nconst NO_MASK_FADE: MaskFadeDepth = '0px';\n\nconst SCROLL_DRIVEN_FADE_CLASSES = [\n  'mask-t-from-[calc(100%-min(var(--scroll-area-fade-top),var(--scroll-area-overflow-y-start,0px)))]',\n  'mask-b-from-[calc(100%-min(var(--scroll-area-fade-bottom),var(--scroll-area-overflow-y-end,0px)))]',\n  'mask-l-from-[calc(100%-min(var(--scroll-area-fade-left),var(--scroll-area-overflow-x-start,0px)))]',\n  'mask-r-from-[calc(100%-min(var(--scroll-area-fade-right),var(--scroll-area-overflow-x-end,0px)))]',\n].join(' ');\n\nexport type MaskSides = {\n  top?: MaskSide;\n  bottom?: MaskSide;\n  left?: MaskSide;\n  right?: MaskSide;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: MaskSide;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: MaskSide;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`, 2rem deep.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default; a length (`'5rem'`) sets that side's fade depth.\n *\n * A fade grows with the distance scrolled from its edge, up to its depth.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\n  maxHeight?: string;\n  autoScroll?: boolean;\n  /** With `autoScroll`, start pinned to the end. `false` resumes where the reader left a remounted area. */\n  autoScrollStartFollowing?: boolean;\n  /** With `autoScroll`, called when the reader scrolls away from the end or back to it. */\n  onAutoScrollFollowingChange?: (following: boolean) => void;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /**\n   * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,\n   * the scrollbar only appears while actively scrolling. Defaults to `true`.\n   */\n  revealScrollbarOnHover?: boolean;\n  /**\n   * Keep the scrollbar visible whenever the content overflows, so readers can tell there is more\n   * to scroll to. Overrides `revealScrollbarOnHover`. Defaults to `false`.\n   */\n  alwaysShowScrollbar?: boolean;\n};\n\ntype ResolvedMask = Record<'top' | 'bottom' | 'left' | 'right', MaskFadeDepth | false>;\n\ntype ScrollAreaViewportStyle = React.CSSProperties & {\n  '--scroll-area-fade-top'?: MaskFadeDepth;\n  '--scroll-area-fade-bottom'?: MaskFadeDepth;\n  '--scroll-area-fade-left'?: MaskFadeDepth;\n  '--scroll-area-fade-right'?: MaskFadeDepth;\n};\n\nconst fadeDepth = (side: MaskSide) => (side === true ? DEFAULT_MASK_FADE_DEPTH : side);\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 verticalFade = (orientation === 'vertical' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const horizontalFade = (orientation === 'horizontal' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const sides: ResolvedMask = { top: verticalFade, bottom: verticalFade, left: horizontalFade, right: horizontalFade };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = fadeDepth(mask.y);\n    sides.bottom = fadeDepth(mask.y);\n  }\n  if (mask.x !== undefined) {\n    sides.left = fadeDepth(mask.x);\n    sides.right = fadeDepth(mask.x);\n  }\n  if (mask.top !== undefined) sides.top = fadeDepth(mask.top);\n  if (mask.bottom !== undefined) sides.bottom = fadeDepth(mask.bottom);\n  if (mask.left !== undefined) sides.left = fadeDepth(mask.left);\n  if (mask.right !== undefined) sides.right = fadeDepth(mask.right);\n\n  return sides;\n}\n\nconst fadeDepthVars = (sides: ResolvedMask): ScrollAreaViewportStyle => ({\n  '--scroll-area-fade-top': sides.top || NO_MASK_FADE,\n  '--scroll-area-fade-bottom': sides.bottom || NO_MASK_FADE,\n  '--scroll-area-fade-left': sides.left || NO_MASK_FADE,\n  '--scroll-area-fade-right': sides.right || NO_MASK_FADE,\n});\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent hover:bg-fill-subtle active:bg-fill',\n        quietTextHover,\n        controlStateColorTransition,\n        focusRing,\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\ntype ScrollAreaViewportContextValue = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  className: string;\n  style: React.CSSProperties;\n  contentStyle: React.CSSProperties | undefined;\n};\n\nconst ScrollAreaViewportContext = React.createContext<ScrollAreaViewportContextValue | null>(null);\n\nexport type ScrollAreaViewportProps = {\n  /**\n   * Viewport layout and scroll chaining overrides. Chaining stays native by default;\n   * use `overscroll-y-contain` to isolate vertical scrolling while allowing browser history swipes.\n   */\n  className?: string;\n  contentClassName?: string;\n  children?: React.ReactNode;\n  /** The scrolling element, e.g. a virtualizer's `getScrollElement`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /**\n   * Renders the scrolling element as another component, for a library that has to own it\n   * (e.g. Base UI's `Select.List`, which Select scrolls to line the selected item up with the trigger).\n   */\n  render?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>['render'];\n};\n\nfunction useScrollAreaViewportContext() {\n  const viewport = React.use(ScrollAreaViewportContext);\n  if (!viewport) throw new Error('ScrollAreaViewport must be a direct child of ScrollArea');\n  return viewport;\n}\n\nfunction ScrollAreaViewport({ className, contentClassName, children, ref, render }: ScrollAreaViewportProps) {\n  const viewport = useScrollAreaViewportContext();\n  const { areaRef } = viewport;\n  const viewportRef = React.useMemo(() => mergeRefs(areaRef, ref), [areaRef, ref]);\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={viewportRef}\n      className={cn(viewport.className, className)}\n      style={viewport.style}\n      render={render}\n    >\n      <ScrollAreaPrimitive.Content className={contentClassName} style={viewport.contentStyle}>\n        <ScrollAreaViewportContext value={null}>{children}</ScrollAreaViewportContext>\n      </ScrollAreaPrimitive.Content>\n    </ScrollAreaPrimitive.Viewport>\n  );\n}\n\nfunction ScrollArea({\n  className,\n  children,\n  maxHeight,\n  autoScroll = false,\n  autoScrollStartFollowing,\n  onAutoScrollFollowingChange,\n  orientation = 'vertical',\n  scrollButtons,\n  mask,\n  revealScrollbarOnHover = true,\n  alwaysShowScrollbar = false,\n  ...props\n}: ScrollAreaProps) {\n  const areaRef = React.useRef<HTMLDivElement>(null);\n  useAutoscroll(areaRef, {\n    enabled: autoScroll,\n    startFollowing: autoScrollStartFollowing,\n    onFollowingChange: onAutoScrollFollowingChange,\n  });\n\n  const sides = resolveMask(mask, orientation);\n  const fadesAnySide = Object.values(sides).some(Boolean);\n\n  const viewportStyle = fadeDepthVars(sides);\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' ? { minWidth: '0px' } : orientation === 'horizontal' ? { minHeight: '0px' } : undefined;\n\n  const viewport: ScrollAreaViewportContextValue = {\n    areaRef,\n    className: cn('size-full', fadesAnySide && SCROLL_DRIVEN_FADE_CLASSES),\n    style: viewportStyle,\n    contentStyle,\n  };\n  const callerViewportCount = React.Children.toArray(children).filter(\n    child => React.isValidElement(child) && child.type === ScrollAreaViewport,\n  ).length;\n  if (callerViewportCount > 1) throw new Error('ScrollArea takes at most one ScrollAreaViewport');\n  const callerRendersViewport = callerViewportCount === 1;\n\n  return (\n    <ScrollAreaPrimitive.Root className={cn('group/scroll-area relative overflow-hidden', className)} {...props}>\n      <ScrollAreaViewportContext value={viewport}>\n        {callerRendersViewport ? children : <ScrollAreaViewport>{children}</ScrollAreaViewport>}\n      </ScrollAreaViewportContext>\n      {scrollButtons && orientation !== 'vertical' && <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />}\n      {(orientation === 'vertical' || orientation === 'both') && (\n        <ScrollBar orientation=\"vertical\" revealOnHover={revealScrollbarOnHover} alwaysVisible={alwaysShowScrollbar} />\n      )}\n      {(orientation === 'horizontal' || orientation === 'both') && (\n        <ScrollBar\n          orientation=\"horizontal\"\n          revealOnHover={revealScrollbarOnHover}\n          alwaysVisible={alwaysShowScrollbar}\n        />\n      )}\n      {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  revealOnHover = true,\n  alwaysVisible = false,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar> & { revealOnHover?: boolean; alwaysVisible?: boolean }) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none transition-opacity duration-normal ease-out-custom select-none',\n        alwaysVisible ? 'opacity-100' : 'opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n        revealOnHover && !alwaysVisible && 'data-[hovering]:opacity-100',\n        // Base UI pins the bar to both ends of the area (top/bottom or left/right), so it spans it\n        // without a size class. `--scroll-area-scrollbar-inset` pulls its ends in, so a rounded\n        // container (a popup) doesn't clip them; 0 by default.\n        orientation === 'vertical' && 'my-(--scroll-area-scrollbar-inset,0px) w-1.5 p-px',\n        orientation === 'horizontal' && 'mx-(--scroll-area-scrollbar-inset,0px) h-1.5 flex-col p-px',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/60\" />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollAreaViewport, ScrollBar };\n"],"mappings":"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"}

package/dist/scroll-area-BU_TorPW.cjs

@@ -0,0 +1,246 @@
+const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
+const require_primitives_transitions = require("./primitives/transitions.cjs.js");
+const require_primitives_typography = require("./primitives/typography.cjs.js");
+const require_hooks_use_autoscroll = require("./hooks/use-autoscroll.cjs.js");
+const require_merge_refs = require("./merge-refs-C0BDbPAW.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _base_ui_react_scroll_area = require("@base-ui/react/scroll-area");
+// src/ds/components/ScrollArea/scroll-area.tsx
+var DEFAULT_SCROLL_BUTTON_SPEED = 100;
+var DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;
+var MIN_SCROLL_BUTTON_SPEED = 1;
+var MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;
+var DEFAULT_MASK_FADE_DEPTH = "2rem";
+var NO_MASK_FADE = "0px";
+var SCROLL_DRIVEN_FADE_CLASSES = [
+	"mask-t-from-[calc(100%-min(var(--scroll-area-fade-top),var(--scroll-area-overflow-y-start,0px)))]",
+	"mask-b-from-[calc(100%-min(var(--scroll-area-fade-bottom),var(--scroll-area-overflow-y-end,0px)))]",
+	"mask-l-from-[calc(100%-min(var(--scroll-area-fade-left),var(--scroll-area-overflow-x-start,0px)))]",
+	"mask-r-from-[calc(100%-min(var(--scroll-area-fade-right),var(--scroll-area-overflow-x-end,0px)))]"
+].join(" ");
+var fadeDepth = (side) => side === true ? DEFAULT_MASK_FADE_DEPTH : side;
+function resolveMask(mask, orientation) {
+	if (mask === false) return {
+		top: false,
+		bottom: false,
+		left: false,
+		right: false
+	};
+	const verticalFade = (orientation === "vertical" || orientation === "both") && DEFAULT_MASK_FADE_DEPTH;
+	const horizontalFade = (orientation === "horizontal" || orientation === "both") && DEFAULT_MASK_FADE_DEPTH;
+	const sides = {
+		top: verticalFade,
+		bottom: verticalFade,
+		left: horizontalFade,
+		right: horizontalFade
+	};
+	if (mask === true || mask === void 0) return sides;
+	if (mask.y !== void 0) {
+		sides.top = fadeDepth(mask.y);
+		sides.bottom = fadeDepth(mask.y);
+	}
+	if (mask.x !== void 0) {
+		sides.left = fadeDepth(mask.x);
+		sides.right = fadeDepth(mask.x);
+	}
+	if (mask.top !== void 0) sides.top = fadeDepth(mask.top);
+	if (mask.bottom !== void 0) sides.bottom = fadeDepth(mask.bottom);
+	if (mask.left !== void 0) sides.left = fadeDepth(mask.left);
+	if (mask.right !== void 0) sides.right = fadeDepth(mask.right);
+	return sides;
+}
+var fadeDepthVars = (sides) => ({
+	"--scroll-area-fade-top": sides.top || NO_MASK_FADE,
+	"--scroll-area-fade-bottom": sides.bottom || NO_MASK_FADE,
+	"--scroll-area-fade-left": sides.left || NO_MASK_FADE,
+	"--scroll-area-fade-right": sides.right || NO_MASK_FADE
+});
+function clampScrollButtonNumber(value, fallback, min) {
+	const resolvedValue = value ?? fallback;
+	return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);
+}
+var ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }) => {
+	const Icon = direction === "left" ? lucide_react.ChevronLeftIcon : lucide_react.ChevronRightIcon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": label,
+		className: require_utils.cn("absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent hover:bg-fill-subtle active:bg-fill", require_primitives_typography.quietTextHover, require_primitives_transitions.controlStateColorTransition, require_primitives_transitions.focusRing, direction === "left" ? "left-1 group-data-[overflow-x-start]/scroll-area:flex" : "right-1 group-data-[overflow-x-end]/scroll-area:flex"),
+		onPointerDown: (event) => onStartScrolling(direction, event),
+		onPointerUp: onStopScrolling,
+		onPointerLeave: onStopScrolling,
+		onPointerCancel: onStopScrolling,
+		onBlur: onStopScrolling,
+		onClick: (event) => {
+			if (event.detail === 0) onKeyboardScroll(direction);
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+};
+var ScrollButtons = ({ areaRef, scrollButtons }) => {
+	const scrollButtonInterval = react.useRef(null);
+	const scrollButtonOptions = typeof scrollButtons === "object" ? scrollButtons : void 0;
+	const scrollButtonSpeed = clampScrollButtonNumber(scrollButtonOptions?.scrollSpeed, DEFAULT_SCROLL_BUTTON_SPEED, MIN_SCROLL_BUTTON_SPEED);
+	const scrollButtonIntervalTime = clampScrollButtonNumber(scrollButtonOptions?.scrollIntervalTime, DEFAULT_SCROLL_BUTTON_INTERVAL_TIME, MIN_SCROLL_BUTTON_INTERVAL_TIME);
+	const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? "Scroll left";
+	const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? "Scroll right";
+	const stopScrollButtonScrolling = react.useCallback(() => {
+		if (!scrollButtonInterval.current) return;
+		clearInterval(scrollButtonInterval.current);
+		scrollButtonInterval.current = null;
+	}, []);
+	const scrollByDirection = react.useCallback((direction, multiplier = 1) => {
+		const viewport = areaRef.current;
+		if (!viewport) return;
+		viewport.scrollBy({
+			left: direction === "right" ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,
+			behavior: "smooth"
+		});
+	}, [areaRef, scrollButtonSpeed]);
+	const startScrollButtonScrolling = react.useCallback((direction, event) => {
+		event?.preventDefault();
+		event?.stopPropagation();
+		event?.currentTarget.setPointerCapture?.(event.pointerId);
+		stopScrollButtonScrolling();
+		scrollByDirection(direction, 2);
+		scrollButtonInterval.current = setInterval(() => {
+			scrollByDirection(direction);
+		}, scrollButtonIntervalTime);
+	}, [
+		scrollButtonIntervalTime,
+		scrollByDirection,
+		stopScrollButtonScrolling
+	]);
+	react.useEffect(() => {
+		return () => {
+			stopScrollButtonScrolling();
+		};
+	}, [stopScrollButtonScrolling]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollButton, {
+		direction: "left",
+		label: leftScrollButtonLabel,
+		onStartScrolling: startScrollButtonScrolling,
+		onStopScrolling: stopScrollButtonScrolling,
+		onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollButton, {
+		direction: "right",
+		label: rightScrollButtonLabel,
+		onStartScrolling: startScrollButtonScrolling,
+		onStopScrolling: stopScrollButtonScrolling,
+		onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+	})] });
+};
+var ScrollAreaViewportContext = react.createContext(null);
+function useScrollAreaViewportContext() {
+	const viewport = react.use(ScrollAreaViewportContext);
+	if (!viewport) throw new Error("ScrollAreaViewport must be a direct child of ScrollArea");
+	return viewport;
+}
+function ScrollAreaViewport({ className, contentClassName, children, ref, render }) {
+	const viewport = useScrollAreaViewportContext();
+	const { areaRef } = viewport;
+	const viewportRef = react.useMemo(() => require_merge_refs.mergeRefs(areaRef, ref), [areaRef, ref]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Viewport, {
+		ref: viewportRef,
+		className: require_utils.cn(viewport.className, className),
+		style: viewport.style,
+		render,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Content, {
+			className: contentClassName,
+			style: viewport.contentStyle,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollAreaViewportContext, {
+				value: null,
+				children
+			})
+		})
+	});
+}
+function ScrollArea({ className, children, maxHeight, autoScroll = false, autoScrollStartFollowing, onAutoScrollFollowingChange, orientation = "vertical", scrollButtons, mask, revealScrollbarOnHover = true, alwaysShowScrollbar = false, ...props }) {
+	const areaRef = react.useRef(null);
+	require_hooks_use_autoscroll.useAutoscroll(areaRef, {
+		enabled: autoScroll,
+		startFollowing: autoScrollStartFollowing,
+		onFollowingChange: onAutoScrollFollowingChange
+	});
+	const sides = resolveMask(mask, orientation);
+	const fadesAnySide = Object.values(sides).some(Boolean);
+	const viewportStyle = fadeDepthVars(sides);
+	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;
+	const viewport = {
+		areaRef,
+		className: require_utils.cn("size-full", fadesAnySide && SCROLL_DRIVEN_FADE_CLASSES),
+		style: viewportStyle,
+		contentStyle
+	};
+	const callerViewportCount = react.Children.toArray(children).filter((child) => react.isValidElement(child) && child.type === ScrollAreaViewport).length;
+	if (callerViewportCount > 1) throw new Error("ScrollArea takes at most one ScrollAreaViewport");
+	const callerRendersViewport = callerViewportCount === 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_scroll_area.ScrollArea.Root, {
+		className: require_utils.cn("group/scroll-area relative overflow-hidden", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollAreaViewportContext, {
+				value: viewport,
+				children: callerRendersViewport ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollAreaViewport, { children })
+			}),
+			scrollButtons && orientation !== "vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollButtons, {
+				areaRef,
+				scrollButtons
+			}),
+			(orientation === "vertical" || orientation === "both") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollBar, {
+				orientation: "vertical",
+				revealOnHover: revealScrollbarOnHover,
+				alwaysVisible: alwaysShowScrollbar
+			}),
+			(orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollBar, {
+				orientation: "horizontal",
+				revealOnHover: revealScrollbarOnHover,
+				alwaysVisible: alwaysShowScrollbar
+			}),
+			orientation === "both" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", revealOnHover = true, alwaysVisible = false, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: require_utils.cn("flex touch-none transition-opacity duration-normal ease-out-custom select-none", alwaysVisible ? "opacity-100" : "opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0", revealOnHover && !alwaysVisible && "data-[hovering]:opacity-100", orientation === "vertical" && "my-(--scroll-area-scrollbar-inset,0px) w-1.5 p-px", orientation === "horizontal" && "mx-(--scroll-area-scrollbar-inset,0px) h-1.5 flex-col p-px", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/60" })
+	});
+}
+Object.defineProperty(exports, "ScrollArea", {
+	enumerable: true,
+	get: function() {
+		return ScrollArea;
+	}
+});
+Object.defineProperty(exports, "ScrollAreaViewport", {
+	enumerable: true,
+	get: function() {
+		return ScrollAreaViewport;
+	}
+});
+Object.defineProperty(exports, "ScrollBar", {
+	enumerable: true,
+	get: function() {
+		return ScrollBar;
+	}
+});
+
+//# sourceMappingURL=scroll-area-BU_TorPW.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-BU_TorPW.cjs","names":["ChevronLeftIcon","ChevronRightIcon","cn","quietTextHover","controlStateColorTransition","focusRing","React","_Fragment","mergeRefs","ScrollAreaPrimitive"],"sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { controlStateColorTransition, focusRing } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\ntype MaskFadeDepth = `${number}${'rem' | 'px'}`;\ntype MaskSide = boolean | MaskFadeDepth;\n\nconst DEFAULT_MASK_FADE_DEPTH: MaskFadeDepth = '2rem';\nconst NO_MASK_FADE: MaskFadeDepth = '0px';\n\nconst SCROLL_DRIVEN_FADE_CLASSES = [\n  'mask-t-from-[calc(100%-min(var(--scroll-area-fade-top),var(--scroll-area-overflow-y-start,0px)))]',\n  'mask-b-from-[calc(100%-min(var(--scroll-area-fade-bottom),var(--scroll-area-overflow-y-end,0px)))]',\n  'mask-l-from-[calc(100%-min(var(--scroll-area-fade-left),var(--scroll-area-overflow-x-start,0px)))]',\n  'mask-r-from-[calc(100%-min(var(--scroll-area-fade-right),var(--scroll-area-overflow-x-end,0px)))]',\n].join(' ');\n\nexport type MaskSides = {\n  top?: MaskSide;\n  bottom?: MaskSide;\n  left?: MaskSide;\n  right?: MaskSide;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: MaskSide;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: MaskSide;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`, 2rem deep.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default; a length (`'5rem'`) sets that side's fade depth.\n *\n * A fade grows with the distance scrolled from its edge, up to its depth.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\n  maxHeight?: string;\n  autoScroll?: boolean;\n  /** With `autoScroll`, start pinned to the end. `false` resumes where the reader left a remounted area. */\n  autoScrollStartFollowing?: boolean;\n  /** With `autoScroll`, called when the reader scrolls away from the end or back to it. */\n  onAutoScrollFollowingChange?: (following: boolean) => void;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /**\n   * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,\n   * the scrollbar only appears while actively scrolling. Defaults to `true`.\n   */\n  revealScrollbarOnHover?: boolean;\n  /**\n   * Keep the scrollbar visible whenever the content overflows, so readers can tell there is more\n   * to scroll to. Overrides `revealScrollbarOnHover`. Defaults to `false`.\n   */\n  alwaysShowScrollbar?: boolean;\n};\n\ntype ResolvedMask = Record<'top' | 'bottom' | 'left' | 'right', MaskFadeDepth | false>;\n\ntype ScrollAreaViewportStyle = React.CSSProperties & {\n  '--scroll-area-fade-top'?: MaskFadeDepth;\n  '--scroll-area-fade-bottom'?: MaskFadeDepth;\n  '--scroll-area-fade-left'?: MaskFadeDepth;\n  '--scroll-area-fade-right'?: MaskFadeDepth;\n};\n\nconst fadeDepth = (side: MaskSide) => (side === true ? DEFAULT_MASK_FADE_DEPTH : side);\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 verticalFade = (orientation === 'vertical' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const horizontalFade = (orientation === 'horizontal' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const sides: ResolvedMask = { top: verticalFade, bottom: verticalFade, left: horizontalFade, right: horizontalFade };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = fadeDepth(mask.y);\n    sides.bottom = fadeDepth(mask.y);\n  }\n  if (mask.x !== undefined) {\n    sides.left = fadeDepth(mask.x);\n    sides.right = fadeDepth(mask.x);\n  }\n  if (mask.top !== undefined) sides.top = fadeDepth(mask.top);\n  if (mask.bottom !== undefined) sides.bottom = fadeDepth(mask.bottom);\n  if (mask.left !== undefined) sides.left = fadeDepth(mask.left);\n  if (mask.right !== undefined) sides.right = fadeDepth(mask.right);\n\n  return sides;\n}\n\nconst fadeDepthVars = (sides: ResolvedMask): ScrollAreaViewportStyle => ({\n  '--scroll-area-fade-top': sides.top || NO_MASK_FADE,\n  '--scroll-area-fade-bottom': sides.bottom || NO_MASK_FADE,\n  '--scroll-area-fade-left': sides.left || NO_MASK_FADE,\n  '--scroll-area-fade-right': sides.right || NO_MASK_FADE,\n});\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent hover:bg-fill-subtle active:bg-fill',\n        quietTextHover,\n        controlStateColorTransition,\n        focusRing,\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\ntype ScrollAreaViewportContextValue = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  className: string;\n  style: React.CSSProperties;\n  contentStyle: React.CSSProperties | undefined;\n};\n\nconst ScrollAreaViewportContext = React.createContext<ScrollAreaViewportContextValue | null>(null);\n\nexport type ScrollAreaViewportProps = {\n  /**\n   * Viewport layout and scroll chaining overrides. Chaining stays native by default;\n   * use `overscroll-y-contain` to isolate vertical scrolling while allowing browser history swipes.\n   */\n  className?: string;\n  contentClassName?: string;\n  children?: React.ReactNode;\n  /** The scrolling element, e.g. a virtualizer's `getScrollElement`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /**\n   * Renders the scrolling element as another component, for a library that has to own it\n   * (e.g. Base UI's `Select.List`, which Select scrolls to line the selected item up with the trigger).\n   */\n  render?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>['render'];\n};\n\nfunction useScrollAreaViewportContext() {\n  const viewport = React.use(ScrollAreaViewportContext);\n  if (!viewport) throw new Error('ScrollAreaViewport must be a direct child of ScrollArea');\n  return viewport;\n}\n\nfunction ScrollAreaViewport({ className, contentClassName, children, ref, render }: ScrollAreaViewportProps) {\n  const viewport = useScrollAreaViewportContext();\n  const { areaRef } = viewport;\n  const viewportRef = React.useMemo(() => mergeRefs(areaRef, ref), [areaRef, ref]);\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={viewportRef}\n      className={cn(viewport.className, className)}\n      style={viewport.style}\n      render={render}\n    >\n      <ScrollAreaPrimitive.Content className={contentClassName} style={viewport.contentStyle}>\n        <ScrollAreaViewportContext value={null}>{children}</ScrollAreaViewportContext>\n      </ScrollAreaPrimitive.Content>\n    </ScrollAreaPrimitive.Viewport>\n  );\n}\n\nfunction ScrollArea({\n  className,\n  children,\n  maxHeight,\n  autoScroll = false,\n  autoScrollStartFollowing,\n  onAutoScrollFollowingChange,\n  orientation = 'vertical',\n  scrollButtons,\n  mask,\n  revealScrollbarOnHover = true,\n  alwaysShowScrollbar = false,\n  ...props\n}: ScrollAreaProps) {\n  const areaRef = React.useRef<HTMLDivElement>(null);\n  useAutoscroll(areaRef, {\n    enabled: autoScroll,\n    startFollowing: autoScrollStartFollowing,\n    onFollowingChange: onAutoScrollFollowingChange,\n  });\n\n  const sides = resolveMask(mask, orientation);\n  const fadesAnySide = Object.values(sides).some(Boolean);\n\n  const viewportStyle = fadeDepthVars(sides);\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' ? { minWidth: '0px' } : orientation === 'horizontal' ? { minHeight: '0px' } : undefined;\n\n  const viewport: ScrollAreaViewportContextValue = {\n    areaRef,\n    className: cn('size-full', fadesAnySide && SCROLL_DRIVEN_FADE_CLASSES),\n    style: viewportStyle,\n    contentStyle,\n  };\n  const callerViewportCount = React.Children.toArray(children).filter(\n    child => React.isValidElement(child) && child.type === ScrollAreaViewport,\n  ).length;\n  if (callerViewportCount > 1) throw new Error('ScrollArea takes at most one ScrollAreaViewport');\n  const callerRendersViewport = callerViewportCount === 1;\n\n  return (\n    <ScrollAreaPrimitive.Root className={cn('group/scroll-area relative overflow-hidden', className)} {...props}>\n      <ScrollAreaViewportContext value={viewport}>\n        {callerRendersViewport ? children : <ScrollAreaViewport>{children}</ScrollAreaViewport>}\n      </ScrollAreaViewportContext>\n      {scrollButtons && orientation !== 'vertical' && <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />}\n      {(orientation === 'vertical' || orientation === 'both') && (\n        <ScrollBar orientation=\"vertical\" revealOnHover={revealScrollbarOnHover} alwaysVisible={alwaysShowScrollbar} />\n      )}\n      {(orientation === 'horizontal' || orientation === 'both') && (\n        <ScrollBar\n          orientation=\"horizontal\"\n          revealOnHover={revealScrollbarOnHover}\n          alwaysVisible={alwaysShowScrollbar}\n        />\n      )}\n      {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  revealOnHover = true,\n  alwaysVisible = false,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar> & { revealOnHover?: boolean; alwaysVisible?: boolean }) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none transition-opacity duration-normal ease-out-custom select-none',\n        alwaysVisible ? 'opacity-100' : 'opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n        revealOnHover && !alwaysVisible && 'data-[hovering]:opacity-100',\n        // Base UI pins the bar to both ends of the area (top/bottom or left/right), so it spans it\n        // without a size class. `--scroll-area-scrollbar-inset` pulls its ends in, so a rounded\n        // container (a popup) doesn't clip them; 0 by default.\n        orientation === 'vertical' && 'my-(--scroll-area-scrollbar-inset,0px) w-1.5 p-px',\n        orientation === 'horizontal' && 'mx-(--scroll-area-scrollbar-inset,0px) h-1.5 flex-col p-px',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/60\" />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollAreaViewport, ScrollBar };\n"],"mappings":"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"}