@present-day/scroll-area 0.1.0

package/dist/base-ui.mjs

@@ -0,0 +1,179 @@
+"use client";
+import "./styles.css";
+import {
+  EDGE_SIDES,
+  SCROLL_AREA_AXIS,
+  SCROLL_AREA_EDGE_EFFECT,
+  SCROLL_AREA_SCROLLBARS,
+  axesFor,
+  measureEdges,
+  mergeRefs,
+  rootStyle,
+  useScrollEdges
+} from "./chunk-GSHKDU53.mjs";
+
+// src/base-ui/parts.tsx
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import clsx from "clsx";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function withBase(base, className) {
+  return typeof className === "function" ? (state) => clsx(base, className(state)) : clsx(base, className);
+}
+var Root = React.forwardRef(function Root2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      "data-primitive": "base-ui",
+      className: withBase("sa-root", className),
+      ...props
+    }
+  );
+});
+var Viewport = React.forwardRef(function Viewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Viewport,
+    {
+      ref,
+      className: withBase("sa-viewport", className),
+      ...props
+    }
+  );
+});
+var Content = React.forwardRef(function Content2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Content,
+    {
+      ref,
+      className: withBase("sa-content", className),
+      ...props
+    }
+  );
+});
+var Scrollbar = React.forwardRef(function Scrollbar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Scrollbar,
+    {
+      ref,
+      className: withBase("sa-scrollbar", className),
+      ...props
+    }
+  );
+});
+var Thumb = React.forwardRef(function Thumb2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Thumb,
+    {
+      ref,
+      className: withBase("sa-thumb", className),
+      ...props
+    }
+  );
+});
+var Corner = React.forwardRef(function Corner2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Corner,
+    {
+      ref,
+      className: withBase("sa-corner", className),
+      ...props
+    }
+  );
+});
+
+// src/base-ui/ScrollArea.tsx
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import clsx2 from "clsx";
+import * as React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ScrollArea = React2.forwardRef(
+  function ScrollArea2({
+    children,
+    axis = "vertical",
+    edgeEffect = "fade",
+    edgeSize,
+    scrollbars = "hover",
+    dir,
+    classNames = {},
+    className,
+    style,
+    viewportRef,
+    onScroll,
+    ...rootProps
+  }, ref) {
+    const rootRef = React2.useRef(null);
+    const { horizontal, vertical } = axesFor(axis);
+    const edgesRef = useScrollEdges(rootRef, {
+      horizontal,
+      vertical
+    });
+    const mergedRootRef = React2.useMemo(() => mergeRefs(ref, rootRef), [ref]);
+    const mergedViewportRef = React2.useMemo(
+      () => mergeRefs(viewportRef, edgesRef),
+      [viewportRef, edgesRef]
+    );
+    const keepMounted = scrollbars === "always";
+    const area = /* @__PURE__ */ jsxs(
+      Root,
+      {
+        ...rootProps,
+        ref: mergedRootRef,
+        dir,
+        "data-edge-effect": edgeEffect,
+        "data-scrollbars": scrollbars,
+        className: clsx2(className, classNames.root),
+        style: rootStyle(style, edgeSize),
+        children: [
+          /* @__PURE__ */ jsx2(
+            Viewport,
+            {
+              ref: mergedViewportRef,
+              className: classNames.viewport,
+              onScroll,
+              children: /* @__PURE__ */ jsx2(Content, { className: classNames.content, children })
+            }
+          ),
+          edgeEffect === "shadow" ? /* @__PURE__ */ jsx2("div", { className: "sa-edge-shadow", "aria-hidden": "true" }) : null,
+          vertical ? /* @__PURE__ */ jsx2(
+            Scrollbar,
+            {
+              orientation: "vertical",
+              keepMounted,
+              className: classNames.scrollbar,
+              children: /* @__PURE__ */ jsx2(Thumb, { className: classNames.thumb })
+            }
+          ) : null,
+          horizontal ? /* @__PURE__ */ jsx2(
+            Scrollbar,
+            {
+              orientation: "horizontal",
+              keepMounted,
+              className: classNames.scrollbar,
+              children: /* @__PURE__ */ jsx2(Thumb, { className: classNames.thumb })
+            }
+          ) : null,
+          vertical && horizontal ? /* @__PURE__ */ jsx2(Corner, {}) : null
+        ]
+      }
+    );
+    return dir ? /* @__PURE__ */ jsx2(DirectionProvider, { direction: dir, children: area }) : area;
+  }
+);
+export {
+  Content,
+  Corner,
+  EDGE_SIDES,
+  Root,
+  SCROLL_AREA_AXIS,
+  SCROLL_AREA_EDGE_EFFECT,
+  SCROLL_AREA_SCROLLBARS,
+  ScrollArea,
+  Scrollbar,
+  Thumb,
+  Viewport,
+  measureEdges,
+  mergeRefs,
+  useScrollEdges
+};
+//# sourceMappingURL=base-ui.mjs.map

package/dist/base-ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/base-ui/parts.tsx","../src/base-ui/ScrollArea.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\ntype ClassName<State> =\n  | string\n  | ((state: State) => string | undefined)\n  | undefined\n\n/** Prepends a base class, preserving Base UI's state-callback form. */\nfunction withBase<State>(base: string, className: ClassName<State>) {\n  return typeof className === 'function'\n    ? (state: State) => clsx(base, className(state))\n    : clsx(base, className)\n}\n\nexport const Root = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.Root.Props\n>(function Root({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-primitive=\"base-ui\"\n      className={withBase('sa-root', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Viewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.Viewport.Props\n>(function Viewport({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={withBase('sa-viewport', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Content = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.Content.Props\n>(function Content({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Content\n      ref={ref}\n      className={withBase('sa-content', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Scrollbar = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.Scrollbar.Props\n>(function Scrollbar({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      className={withBase('sa-scrollbar', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Thumb = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.Thumb.Props\n>(function Thumb({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Thumb\n      ref={ref}\n      className={withBase('sa-thumb', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Corner = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.Corner.Props\n>(function Corner({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Corner\n      ref={ref}\n      className={withBase('sa-corner', className)}\n      {...props}\n    />\n  )\n})\n","import { DirectionProvider } from '@base-ui/react/direction-provider'\nimport type { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { mergeRefs } from '../core/mergeRefs'\nimport {\n  axesFor,\n  rootStyle,\n  type ScrollAreaClassNames,\n  type ScrollAreaSharedProps,\n} from '../core/props'\nimport { useScrollEdges } from '../core/useScrollEdges'\nimport { Content, Corner, Root, Scrollbar, Thumb, Viewport } from './parts'\n\nexport type BaseUIScrollAreaClassNames = ScrollAreaClassNames & {\n  /** The Content part that wraps `children` inside the viewport. */\n  content?: string\n}\n\nexport interface ScrollAreaProps\n  extends Omit<ScrollAreaSharedProps, 'classNames'>,\n    Omit<ScrollAreaPrimitive.Root.Props, keyof ScrollAreaSharedProps> {\n  classNames?: BaseUIScrollAreaClassNames\n}\n\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  function ScrollArea(\n    {\n      children,\n      axis = 'vertical',\n      edgeEffect = 'fade',\n      edgeSize,\n      scrollbars = 'hover',\n      dir,\n      classNames = {},\n      className,\n      style,\n      viewportRef,\n      onScroll,\n      ...rootProps\n    },\n    ref,\n  ) {\n    const rootRef = React.useRef<HTMLDivElement>(null)\n    const { horizontal, vertical } = axesFor(axis)\n    // Base UI sets its own logical `data-overflow-x-start` etc. The shared hook\n    // adds the physical `data-overflow-*` attributes the stylesheet keys off.\n    const edgesRef = useScrollEdges<HTMLDivElement>(rootRef, {\n      horizontal,\n      vertical,\n    })\n    // Memoized so React doesn't detach and reattach the refs on every render.\n    const mergedRootRef = React.useMemo(() => mergeRefs(ref, rootRef), [ref])\n    const mergedViewportRef = React.useMemo(\n      () => mergeRefs(viewportRef, edgesRef),\n      [viewportRef, edgesRef],\n    )\n\n    // Base UI mounts scrollbars only while content overflows (\"auto\"), and\n    // exposes hover/scroll state that the stylesheet uses for the other modes.\n    const keepMounted = scrollbars === 'always'\n\n    const area = (\n      <Root\n        {...rootProps}\n        ref={mergedRootRef}\n        dir={dir}\n        data-edge-effect={edgeEffect}\n        data-scrollbars={scrollbars}\n        className={clsx(className, classNames.root)}\n        style={rootStyle(style, edgeSize)}\n      >\n        <Viewport\n          ref={mergedViewportRef}\n          className={classNames.viewport}\n          onScroll={onScroll}\n        >\n          <Content className={classNames.content}>{children}</Content>\n        </Viewport>\n        {edgeEffect === 'shadow' ? (\n          <div className=\"sa-edge-shadow\" aria-hidden=\"true\" />\n        ) : null}\n        {vertical ? (\n          <Scrollbar\n            orientation=\"vertical\"\n            keepMounted={keepMounted}\n            className={classNames.scrollbar}\n          >\n            <Thumb className={classNames.thumb} />\n          </Scrollbar>\n        ) : null}\n        {horizontal ? (\n          <Scrollbar\n            orientation=\"horizontal\"\n            keepMounted={keepMounted}\n            className={classNames.scrollbar}\n          >\n            <Thumb className={classNames.thumb} />\n          </Scrollbar>\n        ) : null}\n        {vertical && horizontal ? <Corner /> : null}\n      </Root>\n    )\n\n    // Base UI reads direction from context, not the `dir` attribute. Only\n    // provide it when set, so an app-level DirectionProvider still applies.\n    return dir ? (\n      <DirectionProvider direction={dir}>{area}</DirectionProvider>\n    ) : (\n      area\n    )\n  },\n)\n"],"mappings":"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","names":["Root","Viewport","Content","Scrollbar","Thumb","Corner","clsx","React","jsx","ScrollArea","clsx"]}

package/dist/chunk-GSHKDU53.mjs

@@ -0,0 +1,117 @@
+"use client";
+import "./styles.css";
+
+// src/core/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+
+// src/core/props.ts
+var SCROLL_AREA_AXIS = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal",
+  BOTH: "both"
+};
+var SCROLL_AREA_EDGE_EFFECT = {
+  /** Fades the content itself toward the edge (color-independent). */
+  FADE: "fade",
+  /** Draws `--scroll-area-shadow-color` over the edge. */
+  SHADOW: "shadow",
+  /** Draws nothing; `data-overflow-*` attributes are still set. */
+  NONE: "none"
+};
+var SCROLL_AREA_SCROLLBARS = {
+  /** While scrolling or hovering the area. */
+  HOVER: "hover",
+  /** While scrolling. */
+  SCROLL: "scroll",
+  /** While the content overflows. */
+  AUTO: "auto",
+  /** Even when the content doesn't overflow. */
+  ALWAYS: "always",
+  /** Never; the area still scrolls by wheel, touch, and keyboard. */
+  HIDDEN: "hidden"
+};
+function axesFor(axis) {
+  return {
+    horizontal: axis !== "vertical",
+    vertical: axis !== "horizontal"
+  };
+}
+function rootStyle(style, edgeSize) {
+  const result = { ...style };
+  if (edgeSize !== void 0) {
+    result["--scroll-area-edge-size"] = typeof edgeSize === "number" ? `${edgeSize}px` : edgeSize;
+  }
+  return result;
+}
+
+// src/core/useScrollEdges.ts
+import { useLayoutEffect, useState } from "react";
+var EDGE_SIDES = [
+  "top",
+  "right",
+  "bottom",
+  "left"
+];
+var TOLERANCE = 1;
+function measureEdges(el, axes) {
+  const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = el;
+  const maxLeft = scrollWidth - clientWidth;
+  const rtl = getComputedStyle(el).direction === "rtl";
+  const fromLeft = rtl ? maxLeft + el.scrollLeft : el.scrollLeft;
+  return {
+    top: axes.vertical && scrollTop > TOLERANCE,
+    right: axes.horizontal && maxLeft - fromLeft > TOLERANCE,
+    bottom: axes.vertical && scrollHeight - clientHeight - scrollTop > TOLERANCE,
+    left: axes.horizontal && fromLeft > TOLERANCE
+  };
+}
+function useScrollEdges(targetRef, { horizontal, vertical }) {
+  const [viewport, setViewport] = useState(null);
+  useLayoutEffect(() => {
+    if (!viewport) return;
+    let frame = 0;
+    const apply = () => {
+      frame = 0;
+      const target = targetRef.current;
+      if (!target) return;
+      const edges = measureEdges(viewport, { horizontal, vertical });
+      for (const side of EDGE_SIDES) {
+        target.toggleAttribute(`data-overflow-${side}`, edges[side]);
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(apply);
+    };
+    apply();
+    viewport.addEventListener("scroll", schedule, { passive: true });
+    const observer = new ResizeObserver(schedule);
+    observer.observe(viewport);
+    if (viewport.firstElementChild) observer.observe(viewport.firstElementChild);
+    return () => {
+      cancelAnimationFrame(frame);
+      viewport.removeEventListener("scroll", schedule);
+      observer.disconnect();
+    };
+  }, [viewport, targetRef, horizontal, vertical]);
+  return setViewport;
+}
+
+export {
+  mergeRefs,
+  SCROLL_AREA_AXIS,
+  SCROLL_AREA_EDGE_EFFECT,
+  SCROLL_AREA_SCROLLBARS,
+  axesFor,
+  rootStyle,
+  EDGE_SIDES,
+  measureEdges,
+  useScrollEdges
+};
+//# sourceMappingURL=chunk-GSHKDU53.mjs.map

package/dist/chunk-GSHKDU53.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/mergeRefs.ts","../src/core/props.ts","../src/core/useScrollEdges.ts"],"sourcesContent":["import type { Ref, RefCallback } from 'react'\n\n/** Combines several refs into one callback ref. */\nexport function mergeRefs<T>(\n  ...refs: Array<Ref<T> | undefined>\n): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: T | null }).current = node\n    }\n  }\n}\n","import type { CSSProperties, ReactNode, Ref, UIEventHandler } from 'react'\n\nimport type { ScrollAxes } from './useScrollEdges'\n\n/*\n * Each option set is an `as const` object in SCREAMING_SNAKE_CASE plus a\n * PascalCase union type derived from it, so `axis={SCROLL_AREA_AXIS.BOTH}` and\n * `axis=\"both\"` are equivalent.\n */\n\n/** Which directions scroll. */\nexport const SCROLL_AREA_AXIS = {\n  VERTICAL: 'vertical',\n  HORIZONTAL: 'horizontal',\n  BOTH: 'both',\n} as const\nexport type ScrollAreaAxis =\n  (typeof SCROLL_AREA_AXIS)[keyof typeof SCROLL_AREA_AXIS]\n\n/** How edges with more content beyond them are signaled. */\nexport const SCROLL_AREA_EDGE_EFFECT = {\n  /** Fades the content itself toward the edge (color-independent). */\n  FADE: 'fade',\n  /** Draws `--scroll-area-shadow-color` over the edge. */\n  SHADOW: 'shadow',\n  /** Draws nothing; `data-overflow-*` attributes are still set. */\n  NONE: 'none',\n} as const\nexport type ScrollAreaEdgeEffect =\n  (typeof SCROLL_AREA_EDGE_EFFECT)[keyof typeof SCROLL_AREA_EDGE_EFFECT]\n\n/** When scrollbars are visible. */\nexport const SCROLL_AREA_SCROLLBARS = {\n  /** While scrolling or hovering the area. */\n  HOVER: 'hover',\n  /** While scrolling. */\n  SCROLL: 'scroll',\n  /** While the content overflows. */\n  AUTO: 'auto',\n  /** Even when the content doesn't overflow. */\n  ALWAYS: 'always',\n  /** Never; the area still scrolls by wheel, touch, and keyboard. */\n  HIDDEN: 'hidden',\n} as const\nexport type ScrollAreaScrollbars =\n  (typeof SCROLL_AREA_SCROLLBARS)[keyof typeof SCROLL_AREA_SCROLLBARS]\n\nexport type ScrollAreaClassNames = {\n  root?: string\n  viewport?: string\n  scrollbar?: string\n  thumb?: string\n}\n\n/** Props every adapter's `ScrollArea` accepts, with the same meaning. */\nexport interface ScrollAreaSharedProps {\n  children?: ReactNode\n  /** Which directions scroll. Defaults to `\"vertical\"`. */\n  axis?: ScrollAreaAxis\n  /** How edges with more content beyond them are signaled. Defaults to `\"fade\"`. */\n  edgeEffect?: ScrollAreaEdgeEffect\n  /** Depth of the edge effect: a number of pixels or any CSS length. */\n  edgeSize?: number | string\n  /** When scrollbars are visible. Defaults to `\"hover\"`. */\n  scrollbars?: ScrollAreaScrollbars\n  /** Reading direction; flips horizontal scrolling and the scrollbar side. */\n  dir?: 'ltr' | 'rtl'\n  className?: string\n  style?: CSSProperties\n  /** Classes for the internal parts. */\n  classNames?: ScrollAreaClassNames\n  /** Ref to the scrolling viewport element. */\n  viewportRef?: Ref<HTMLDivElement>\n  onScroll?: UIEventHandler<HTMLDivElement>\n}\n\ntype StyleWithVars = CSSProperties & Record<`--${string}`, string>\n\nexport function axesFor(axis: ScrollAreaAxis): ScrollAxes {\n  return {\n    horizontal: axis !== 'vertical',\n    vertical: axis !== 'horizontal',\n  }\n}\n\n/** The root's inline style, with `edgeSize` applied as the size token. */\nexport function rootStyle(\n  style: CSSProperties | undefined,\n  edgeSize: number | string | undefined,\n): StyleWithVars {\n  const result: StyleWithVars = { ...style }\n  if (edgeSize !== undefined) {\n    result['--scroll-area-edge-size'] =\n      typeof edgeSize === 'number' ? `${edgeSize}px` : edgeSize\n  }\n  return result\n}\n","import { type RefObject, useLayoutEffect, useState } from 'react'\n\nexport type ScrollAxes = { horizontal: boolean; vertical: boolean }\nexport type EdgeSide = 'top' | 'right' | 'bottom' | 'left'\nexport type Edges = Record<EdgeSide, boolean>\n\nexport const EDGE_SIDES: readonly EdgeSide[] = [\n  'top',\n  'right',\n  'bottom',\n  'left',\n]\n\n/** Absorbs fractional scroll positions from zoom and high-DPI displays. */\nconst TOLERANCE = 1\n\n/** Which physical edges of `el` have more content beyond them. */\nexport function measureEdges(el: HTMLElement, axes: ScrollAxes): Edges {\n  const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = el\n  const maxLeft = scrollWidth - clientWidth\n  // In RTL, scrollLeft is 0 at the right edge and goes negative toward the left.\n  const rtl = getComputedStyle(el).direction === 'rtl'\n  const fromLeft = rtl ? maxLeft + el.scrollLeft : el.scrollLeft\n\n  return {\n    top: axes.vertical && scrollTop > TOLERANCE,\n    right: axes.horizontal && maxLeft - fromLeft > TOLERANCE,\n    bottom:\n      axes.vertical && scrollHeight - clientHeight - scrollTop > TOLERANCE,\n    left: axes.horizontal && fromLeft > TOLERANCE,\n  }\n}\n\n/**\n * Tracks which edges of a scrolling element have hidden content and mirrors\n * them as `data-overflow-{side}` attributes on `targetRef`. Writes go straight\n * to the DOM, so scrolling never re-renders React.\n *\n * Returns a callback ref for the scrolling element.\n */\nexport function useScrollEdges<T extends HTMLElement = HTMLDivElement>(\n  targetRef: RefObject<HTMLElement | null>,\n  { horizontal, vertical }: ScrollAxes,\n): (node: T | null) => void {\n  const [viewport, setViewport] = useState<T | null>(null)\n\n  useLayoutEffect(() => {\n    if (!viewport) return\n\n    let frame = 0\n    const apply = () => {\n      frame = 0\n      const target = targetRef.current\n      if (!target) return\n      const edges = measureEdges(viewport, { horizontal, vertical })\n      for (const side of EDGE_SIDES) {\n        target.toggleAttribute(`data-overflow-${side}`, edges[side])\n      }\n    }\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(apply)\n    }\n\n    apply()\n    viewport.addEventListener('scroll', schedule, { passive: true })\n    const observer = new ResizeObserver(schedule)\n    observer.observe(viewport)\n    if (viewport.firstElementChild) observer.observe(viewport.firstElementChild)\n\n    return () => {\n      cancelAnimationFrame(frame)\n      viewport.removeEventListener('scroll', schedule)\n      observer.disconnect()\n    }\n  }, [viewport, targetRef, horizontal, vertical])\n\n  return setViewport\n}\n"],"mappings":";;;;AAGO,SAAS,aACX,MACa;AAChB,SAAO,CAAC,SAAS;AACf,eAAW,OAAO,MAAM;AACtB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAC9B,IAAK,CAAC,IAA8B,UAAU;AAAA,IACzD;AAAA,EACF;AACF;;;ACDO,IAAM,mBAAmB;AAAA,EAC9B,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AACR;AAKO,IAAM,0BAA0B;AAAA;AAAA,EAErC,MAAM;AAAA;AAAA,EAEN,QAAQ;AAAA;AAAA,EAER,MAAM;AACR;AAKO,IAAM,yBAAyB;AAAA;AAAA,EAEpC,OAAO;AAAA;AAAA,EAEP,QAAQ;AAAA;AAAA,EAER,MAAM;AAAA;AAAA,EAEN,QAAQ;AAAA;AAAA,EAER,QAAQ;AACV;AAmCO,SAAS,QAAQ,MAAkC;AACxD,SAAO;AAAA,IACL,YAAY,SAAS;AAAA,IACrB,UAAU,SAAS;AAAA,EACrB;AACF;AAGO,SAAS,UACd,OACA,UACe;AACf,QAAM,SAAwB,EAAE,GAAG,MAAM;AACzC,MAAI,aAAa,QAAW;AAC1B,WAAO,yBAAyB,IAC9B,OAAO,aAAa,WAAW,GAAG,QAAQ,OAAO;AAAA,EACrD;AACA,SAAO;AACT;;;AChGA,SAAyB,iBAAiB,gBAAgB;AAMnD,IAAM,aAAkC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGA,IAAM,YAAY;AAGX,SAAS,aAAa,IAAiB,MAAyB;AACrE,QAAM,EAAE,WAAW,cAAc,cAAc,aAAa,YAAY,IAAI;AAC5E,QAAM,UAAU,cAAc;AAE9B,QAAM,MAAM,iBAAiB,EAAE,EAAE,cAAc;AAC/C,QAAM,WAAW,MAAM,UAAU,GAAG,aAAa,GAAG;AAEpD,SAAO;AAAA,IACL,KAAK,KAAK,YAAY,YAAY;AAAA,IAClC,OAAO,KAAK,cAAc,UAAU,WAAW;AAAA,IAC/C,QACE,KAAK,YAAY,eAAe,eAAe,YAAY;AAAA,IAC7D,MAAM,KAAK,cAAc,WAAW;AAAA,EACtC;AACF;AASO,SAAS,eACd,WACA,EAAE,YAAY,SAAS,GACG;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,IAAI;AAEvD,kBAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,QAAI,QAAQ;AACZ,UAAM,QAAQ,MAAM;AAClB,cAAQ;AACR,YAAM,SAAS,UAAU;AACzB,UAAI,CAAC,OAAQ;AACb,YAAM,QAAQ,aAAa,UAAU,EAAE,YAAY,SAAS,CAAC;AAC7D,iBAAW,QAAQ,YAAY;AAC7B,eAAO,gBAAgB,iBAAiB,IAAI,IAAI,MAAM,IAAI,CAAC;AAAA,MAC7D;AAAA,IACF;AACA,UAAM,WAAW,MAAM;AACrB,UAAI,CAAC,MAAO,SAAQ,sBAAsB,KAAK;AAAA,IACjD;AAEA,UAAM;AACN,aAAS,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC/D,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,QAAQ;AACzB,QAAI,SAAS,kBAAmB,UAAS,QAAQ,SAAS,iBAAiB;AAE3E,WAAO,MAAM;AACX,2BAAqB,KAAK;AAC1B,eAAS,oBAAoB,UAAU,QAAQ;AAC/C,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,WAAW,YAAY,QAAQ,CAAC;AAE9C,SAAO;AACT;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import { a as ScrollAreaSharedProps } from './props-CCrZyXhY.mjs';
+export { E as EDGE_SIDES, b as EdgeSide, c as Edges, d as SCROLL_AREA_AXIS, e as SCROLL_AREA_EDGE_EFFECT, f as SCROLL_AREA_SCROLLBARS, g as ScrollAreaAxis, S as ScrollAreaClassNames, h as ScrollAreaEdgeEffect, i as ScrollAreaScrollbars, j as ScrollAxes, m as measureEdges, k as mergeRefs, u as useScrollEdges } from './props-CCrZyXhY.mjs';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+
+declare const Root: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+declare const Viewport: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
+declare const Scrollbar: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+declare const Thumb: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
+declare const Corner: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ScrollAreaProps extends ScrollAreaSharedProps, Omit<ScrollAreaPrimitive.ScrollAreaProps, keyof ScrollAreaSharedProps | 'type'> {
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Corner, Root, ScrollArea, type ScrollAreaProps, ScrollAreaSharedProps, Scrollbar, Thumb, Viewport };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { a as ScrollAreaSharedProps } from './props-CCrZyXhY.js';
+export { E as EDGE_SIDES, b as EdgeSide, c as Edges, d as SCROLL_AREA_AXIS, e as SCROLL_AREA_EDGE_EFFECT, f as SCROLL_AREA_SCROLLBARS, g as ScrollAreaAxis, S as ScrollAreaClassNames, h as ScrollAreaEdgeEffect, i as ScrollAreaScrollbars, j as ScrollAxes, m as measureEdges, k as mergeRefs, u as useScrollEdges } from './props-CCrZyXhY.js';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+
+declare const Root: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+declare const Viewport: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
+declare const Scrollbar: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+declare const Thumb: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
+declare const Corner: React.ForwardRefExoticComponent<ScrollAreaPrimitive.ScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ScrollAreaProps extends ScrollAreaSharedProps, Omit<ScrollAreaPrimitive.ScrollAreaProps, keyof ScrollAreaSharedProps | 'type'> {
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Corner, Root, ScrollArea, type ScrollAreaProps, ScrollAreaSharedProps, Scrollbar, Thumb, Viewport };

package/dist/index.js

@@ -0,0 +1,284 @@
+"use client";
+require("./styles.css");
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Corner: () => Corner2,
+  EDGE_SIDES: () => EDGE_SIDES,
+  Root: () => Root2,
+  SCROLL_AREA_AXIS: () => SCROLL_AREA_AXIS,
+  SCROLL_AREA_EDGE_EFFECT: () => SCROLL_AREA_EDGE_EFFECT,
+  SCROLL_AREA_SCROLLBARS: () => SCROLL_AREA_SCROLLBARS,
+  ScrollArea: () => ScrollArea,
+  Scrollbar: () => Scrollbar2,
+  Thumb: () => Thumb2,
+  Viewport: () => Viewport2,
+  measureEdges: () => measureEdges,
+  mergeRefs: () => mergeRefs,
+  useScrollEdges: () => useScrollEdges
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+
+// src/core/props.ts
+var SCROLL_AREA_AXIS = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal",
+  BOTH: "both"
+};
+var SCROLL_AREA_EDGE_EFFECT = {
+  /** Fades the content itself toward the edge (color-independent). */
+  FADE: "fade",
+  /** Draws `--scroll-area-shadow-color` over the edge. */
+  SHADOW: "shadow",
+  /** Draws nothing; `data-overflow-*` attributes are still set. */
+  NONE: "none"
+};
+var SCROLL_AREA_SCROLLBARS = {
+  /** While scrolling or hovering the area. */
+  HOVER: "hover",
+  /** While scrolling. */
+  SCROLL: "scroll",
+  /** While the content overflows. */
+  AUTO: "auto",
+  /** Even when the content doesn't overflow. */
+  ALWAYS: "always",
+  /** Never; the area still scrolls by wheel, touch, and keyboard. */
+  HIDDEN: "hidden"
+};
+function axesFor(axis) {
+  return {
+    horizontal: axis !== "vertical",
+    vertical: axis !== "horizontal"
+  };
+}
+function rootStyle(style, edgeSize) {
+  const result = { ...style };
+  if (edgeSize !== void 0) {
+    result["--scroll-area-edge-size"] = typeof edgeSize === "number" ? `${edgeSize}px` : edgeSize;
+  }
+  return result;
+}
+
+// src/core/useScrollEdges.ts
+var import_react = require("react");
+var EDGE_SIDES = [
+  "top",
+  "right",
+  "bottom",
+  "left"
+];
+var TOLERANCE = 1;
+function measureEdges(el, axes) {
+  const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = el;
+  const maxLeft = scrollWidth - clientWidth;
+  const rtl = getComputedStyle(el).direction === "rtl";
+  const fromLeft = rtl ? maxLeft + el.scrollLeft : el.scrollLeft;
+  return {
+    top: axes.vertical && scrollTop > TOLERANCE,
+    right: axes.horizontal && maxLeft - fromLeft > TOLERANCE,
+    bottom: axes.vertical && scrollHeight - clientHeight - scrollTop > TOLERANCE,
+    left: axes.horizontal && fromLeft > TOLERANCE
+  };
+}
+function useScrollEdges(targetRef, { horizontal, vertical }) {
+  const [viewport, setViewport] = (0, import_react.useState)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!viewport) return;
+    let frame = 0;
+    const apply = () => {
+      frame = 0;
+      const target = targetRef.current;
+      if (!target) return;
+      const edges = measureEdges(viewport, { horizontal, vertical });
+      for (const side of EDGE_SIDES) {
+        target.toggleAttribute(`data-overflow-${side}`, edges[side]);
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(apply);
+    };
+    apply();
+    viewport.addEventListener("scroll", schedule, { passive: true });
+    const observer = new ResizeObserver(schedule);
+    observer.observe(viewport);
+    if (viewport.firstElementChild) observer.observe(viewport.firstElementChild);
+    return () => {
+      cancelAnimationFrame(frame);
+      viewport.removeEventListener("scroll", schedule);
+      observer.disconnect();
+    };
+  }, [viewport, targetRef, horizontal, vertical]);
+  return setViewport;
+}
+
+// src/radix/parts.tsx
+var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
+var import_clsx = __toESM(require("clsx"));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Root2 = React.forwardRef(function Root3({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      "data-primitive": "radix",
+      className: (0, import_clsx.default)("sa-root", className),
+      ...props
+    }
+  );
+});
+var Viewport2 = React.forwardRef(function Viewport3({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ScrollAreaPrimitive.Viewport,
+    {
+      ref,
+      className: (0, import_clsx.default)("sa-viewport", className),
+      ...props
+    }
+  );
+});
+var Scrollbar2 = React.forwardRef(function Scrollbar3({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ScrollAreaPrimitive.Scrollbar,
+    {
+      ref,
+      className: (0, import_clsx.default)("sa-scrollbar", className),
+      ...props
+    }
+  );
+});
+var Thumb2 = React.forwardRef(function Thumb3({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ScrollAreaPrimitive.Thumb,
+    {
+      ref,
+      className: (0, import_clsx.default)("sa-thumb", className),
+      ...props
+    }
+  );
+});
+var Corner2 = React.forwardRef(function Corner3({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ScrollAreaPrimitive.Corner,
+    {
+      ref,
+      className: (0, import_clsx.default)("sa-corner", className),
+      ...props
+    }
+  );
+});
+
+// src/radix/ScrollArea.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ScrollArea = React2.forwardRef(
+  function ScrollArea2({
+    children,
+    axis = "vertical",
+    edgeEffect = "fade",
+    edgeSize,
+    scrollbars = "hover",
+    classNames = {},
+    className,
+    style,
+    viewportRef,
+    onScroll,
+    ...rootProps
+  }, ref) {
+    const rootRef = React2.useRef(null);
+    const { horizontal, vertical } = axesFor(axis);
+    const edgesRef = useScrollEdges(rootRef, {
+      horizontal,
+      vertical
+    });
+    const mergedRootRef = React2.useMemo(() => mergeRefs(ref, rootRef), [ref]);
+    const mergedViewportRef = React2.useMemo(
+      () => mergeRefs(viewportRef, edgesRef),
+      [viewportRef, edgesRef]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      Root2,
+      {
+        ...rootProps,
+        ref: mergedRootRef,
+        type: scrollbars === "hidden" ? "scroll" : scrollbars,
+        "data-edge-effect": edgeEffect,
+        "data-scrollbars": scrollbars,
+        className: (0, import_clsx2.default)(className, classNames.root),
+        style: rootStyle(style, edgeSize),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Viewport2,
+            {
+              ref: mergedViewportRef,
+              className: classNames.viewport,
+              onScroll,
+              children
+            }
+          ),
+          edgeEffect === "shadow" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sa-edge-shadow", "aria-hidden": "true" }) : null,
+          vertical ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Scrollbar2, { orientation: "vertical", className: classNames.scrollbar, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Thumb2, { className: classNames.thumb }) }) : null,
+          horizontal ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Scrollbar2, { orientation: "horizontal", className: classNames.scrollbar, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Thumb2, { className: classNames.thumb }) }) : null,
+          vertical && horizontal ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Corner2, {}) : null
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Corner,
+  EDGE_SIDES,
+  Root,
+  SCROLL_AREA_AXIS,
+  SCROLL_AREA_EDGE_EFFECT,
+  SCROLL_AREA_SCROLLBARS,
+  ScrollArea,
+  Scrollbar,
+  Thumb,
+  Viewport,
+  measureEdges,
+  mergeRefs,
+  useScrollEdges
+});
+//# sourceMappingURL=index.js.map