@present-day/scroll-area 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Present Day
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+# @present-day/scroll-area
+
+A Radix or Base UI scroll area that shows where more content is hidden, using an edge fade or a theme-aware shadow. It supports light and dark mode, RTL, and never re-renders while scrolling.
+
+**[▶ Try it in Storybook](https://present-day.github.io/scroll-area/)**
+
+Install it with the primitive library you use. Both are optional peer dependencies:
+
+```bash
+bun add @present-day/scroll-area @radix-ui/react-scroll-area
+# or
+bun add @present-day/scroll-area @base-ui/react
+```
+
+```tsx
+import { ScrollArea } from '@present-day/scroll-area'         // Radix (also '/radix')
+import { ScrollArea } from '@present-day/scroll-area/base-ui' // Base UI
+
+<div style={{ height: 320 }}>
+  <ScrollArea edgeEffect="shadow">{items}</ScrollArea>
+</div>
+```
+
+Both adapters take the same props and produce the same DOM contract, so switching is an import change. Styles load automatically with either entry. To load them yourself instead, import `@present-day/scroll-area/styles.css`.
+
+## Props
+
+| Prop | Type | Default | |
+| --- | --- | --- | --- |
+| `axis` | `"vertical" \| "horizontal" \| "both"` | `"vertical"` | Which directions scroll |
+| `edgeEffect` | `"fade" \| "shadow" \| "none"` | `"fade"` | How hidden content is signaled |
+| `edgeSize` | `number \| string` | `24px` (token) | Depth of the edge effect; numbers are px |
+| `scrollbars` | `"hover" \| "scroll" \| "auto" \| "always" \| "hidden"` | `"hover"` | When scrollbars show; `"hidden"` still scrolls |
+| `dir` | `"ltr" \| "rtl"` | inherited | Reading direction |
+| `classNames` | `{ root, viewport, scrollbar, thumb }` | | Classes for internal parts (Base UI adds `content`) |
+| `viewportRef` | `Ref<HTMLDivElement>` | | The scrolling element (object or callback ref) |
+| `ref` | `Ref<HTMLDivElement>` | | The root element |
+
+Every other `Root` prop of the underlying library passes through. That includes `scrollHideDelay` and `asChild` for Radix, and `render` and `overflowEdgeThreshold` for Base UI.
+
+### Option objects
+
+Every union prop also has an `as const` object in SCREAMING_SNAKE_CASE, next to its PascalCase type. Either form works:
+
+```tsx
+import { SCROLL_AREA_EDGE_EFFECT, ScrollArea } from '@present-day/scroll-area'
+
+<ScrollArea edgeEffect={SCROLL_AREA_EDGE_EFFECT.SHADOW} />
+<ScrollArea edgeEffect="shadow" />
+```
+
+| Object | Type |
+| --- | --- |
+| `SCROLL_AREA_AXIS` | `ScrollAreaAxis` |
+| `SCROLL_AREA_EDGE_EFFECT` | `ScrollAreaEdgeEffect` |
+| `SCROLL_AREA_SCROLLBARS` | `ScrollAreaScrollbars` |
+
+`Object.values(...)` lists the allowed values.
+
+### Adapter differences
+
+| | Radix | Base UI |
+| --- | --- | --- |
+| Composition | `asChild` | `render` |
+| Content wrapper | hidden `display: table` div | `Content` part (`classNames.content`) |
+| `scrollbar="hover" \| "scroll"` | handled by Radix (`scrollHideDelay`) | CSS, keyed off Base UI's `data-hovering` / `data-scrolling` |
+| RTL | `dir` attribute | `dir` attribute plus a `DirectionProvider` when `dir` is set |
+| Keyboard | viewport not focusable | viewport focusable while it overflows |
+
+## Edge effects
+
+- **fade** masks the content itself, so it blends into any background with no color setup.
+- **shadow** draws `--scroll-area-shadow-color` over the edge. Use it when content should stay fully opaque.
+- **none** draws nothing.
+
+The root always carries `data-overflow-top|right|bottom|left` attributes for your own styling. It also carries `data-edge-effect`, `data-scrollbars`, and `data-primitive` (`radix` or `base-ui`).
+
+## Theming
+
+Colors use `light-dark()` and follow the inherited `color-scheme`. The package never sets `color-scheme` itself:
+
+```css
+:root { color-scheme: light dark; }        /* follow the OS */
+[data-theme="dark"] { color-scheme: dark; } /* or force a mode */
+```
+
+Override these tokens on any ancestor:
+
+| Token | Default |
+| --- | --- |
+| `--scroll-area-edge-size` | `24px` |
+| `--scroll-area-edge-fade-min` | `transparent` |
+| `--scroll-area-shadow-color` | `light-dark(rgb(0 0 0 / .16), rgb(0 0 0 / .6))` |
+| `--scroll-area-thumb-color` | `light-dark(rgb(0 0 0 / .28), rgb(255 255 255 / .28))` |
+| `--scroll-area-thumb-color-hover` | `light-dark(rgb(0 0 0 / .45), rgb(255 255 255 / .45))` |
+| `--scroll-area-thumb-size` | `6px` |
+| `--scroll-area-touch-target` | `24px` |
+| `--scroll-area-content-display` | `table` (Radix) / `block` (Base UI) |
+
+## Building blocks
+
+`useScrollEdges(targetRef, { horizontal, vertical })` returns a callback ref for any scrolling element and mirrors its edges as `data-overflow-*` on the target. Each entry also exports its parts (`Root`, `Viewport`, `Scrollbar`, `Thumb`, `Corner`, and `Content` for Base UI) with the `sa-` classes applied, plus `mergeRefs`, for custom layouts.
+
+## Development
+
+```bash
+bun run storybook   # http://localhost:6006 (toolbar: Theme, Adapter)
+bun run test
+bun run build
+```

package/dist/base-ui.d.mts

@@ -0,0 +1,23 @@
+import { S as ScrollAreaClassNames, 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, h as ScrollAreaEdgeEffect, i as ScrollAreaScrollbars, j as ScrollAxes, m as measureEdges, k as mergeRefs, u as useScrollEdges } from './props-CCrZyXhY.mjs';
+import * as _base_ui_react_scroll_area from '@base-ui/react/scroll-area';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import * as React from 'react';
+
+declare const Root: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Viewport: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Scrollbar: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Thumb: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Corner: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type BaseUIScrollAreaClassNames = ScrollAreaClassNames & {
+    /** The Content part that wraps `children` inside the viewport. */
+    content?: string;
+};
+interface ScrollAreaProps extends Omit<ScrollAreaSharedProps, 'classNames'>, Omit<ScrollArea$1.Root.Props, keyof ScrollAreaSharedProps> {
+    classNames?: BaseUIScrollAreaClassNames;
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { type BaseUIScrollAreaClassNames, Content, Corner, Root, ScrollArea, ScrollAreaClassNames, type ScrollAreaProps, ScrollAreaSharedProps, Scrollbar, Thumb, Viewport };

package/dist/base-ui.d.ts

@@ -0,0 +1,23 @@
+import { S as ScrollAreaClassNames, 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, h as ScrollAreaEdgeEffect, i as ScrollAreaScrollbars, j as ScrollAxes, m as measureEdges, k as mergeRefs, u as useScrollEdges } from './props-CCrZyXhY.js';
+import * as _base_ui_react_scroll_area from '@base-ui/react/scroll-area';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import * as React from 'react';
+
+declare const Root: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Viewport: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Scrollbar: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Thumb: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Corner: React.ForwardRefExoticComponent<Omit<_base_ui_react_scroll_area.ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type BaseUIScrollAreaClassNames = ScrollAreaClassNames & {
+    /** The Content part that wraps `children` inside the viewport. */
+    content?: string;
+};
+interface ScrollAreaProps extends Omit<ScrollAreaSharedProps, 'classNames'>, Omit<ScrollArea$1.Root.Props, keyof ScrollAreaSharedProps> {
+    classNames?: BaseUIScrollAreaClassNames;
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { type BaseUIScrollAreaClassNames, Content, Corner, Root, ScrollArea, ScrollAreaClassNames, type ScrollAreaProps, ScrollAreaSharedProps, Scrollbar, Thumb, Viewport };

package/dist/base-ui.js

@@ -0,0 +1,319 @@
+"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/base-ui/index.ts
+var base_ui_exports = {};
+__export(base_ui_exports, {
+  Content: () => Content,
+  Corner: () => Corner,
+  EDGE_SIDES: () => EDGE_SIDES,
+  Root: () => Root,
+  SCROLL_AREA_AXIS: () => SCROLL_AREA_AXIS,
+  SCROLL_AREA_EDGE_EFFECT: () => SCROLL_AREA_EDGE_EFFECT,
+  SCROLL_AREA_SCROLLBARS: () => SCROLL_AREA_SCROLLBARS,
+  ScrollArea: () => ScrollArea,
+  Scrollbar: () => Scrollbar,
+  Thumb: () => Thumb,
+  Viewport: () => Viewport,
+  measureEdges: () => measureEdges,
+  mergeRefs: () => mergeRefs,
+  useScrollEdges: () => useScrollEdges
+});
+module.exports = __toCommonJS(base_ui_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/base-ui/parts.tsx
+var import_scroll_area = require("@base-ui/react/scroll-area");
+var import_clsx = __toESM(require("clsx"));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function withBase(base, className) {
+  return typeof className === "function" ? (state) => (0, import_clsx.default)(base, className(state)) : (0, import_clsx.default)(base, className);
+}
+var Root = React.forwardRef(function Root2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Root,
+    {
+      ref,
+      "data-primitive": "base-ui",
+      className: withBase("sa-root", className),
+      ...props
+    }
+  );
+});
+var Viewport = React.forwardRef(function Viewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Viewport,
+    {
+      ref,
+      className: withBase("sa-viewport", className),
+      ...props
+    }
+  );
+});
+var Content = React.forwardRef(function Content2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Content,
+    {
+      ref,
+      className: withBase("sa-content", className),
+      ...props
+    }
+  );
+});
+var Scrollbar = React.forwardRef(function Scrollbar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Scrollbar,
+    {
+      ref,
+      className: withBase("sa-scrollbar", className),
+      ...props
+    }
+  );
+});
+var Thumb = React.forwardRef(function Thumb2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Thumb,
+    {
+      ref,
+      className: withBase("sa-thumb", className),
+      ...props
+    }
+  );
+});
+var Corner = React.forwardRef(function Corner2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Corner,
+    {
+      ref,
+      className: withBase("sa-corner", className),
+      ...props
+    }
+  );
+});
+
+// src/base-ui/ScrollArea.tsx
+var import_direction_provider = require("@base-ui/react/direction-provider");
+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",
+    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__ */ (0, import_jsx_runtime2.jsxs)(
+      Root,
+      {
+        ...rootProps,
+        ref: mergedRootRef,
+        dir,
+        "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)(
+            Viewport,
+            {
+              ref: mergedViewportRef,
+              className: classNames.viewport,
+              onScroll,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { className: classNames.content, 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)(
+            Scrollbar,
+            {
+              orientation: "vertical",
+              keepMounted,
+              className: classNames.scrollbar,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Thumb, { className: classNames.thumb })
+            }
+          ) : null,
+          horizontal ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Scrollbar,
+            {
+              orientation: "horizontal",
+              keepMounted,
+              className: classNames.scrollbar,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Thumb, { className: classNames.thumb })
+            }
+          ) : null,
+          vertical && horizontal ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Corner, {}) : null
+        ]
+      }
+    );
+    return dir ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_direction_provider.DirectionProvider, { direction: dir, children: area }) : area;
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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.js.map

package/dist/base-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/base-ui/index.ts","../src/core/mergeRefs.ts","../src/core/props.ts","../src/core/useScrollEdges.ts","../src/base-ui/parts.tsx","../src/base-ui/ScrollArea.tsx"],"sourcesContent":["export * from '../core'\nexport { Content, Corner, Root, Scrollbar, Thumb, Viewport } from './parts'\nexport {\n  type BaseUIScrollAreaClassNames,\n  ScrollArea,\n  type ScrollAreaProps,\n} from './ScrollArea'\n","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","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":["clsx","Root","ScrollAreaPrimitive","Viewport","Content","Scrollbar","Thumb","Corner","import_clsx","React","import_jsx_runtime","ScrollArea","clsx"]}