@botiverse/raft-ui 0.59.2 → 0.60.0

package/dist/components/scroll-area/scroll-area.d.mts

@@ -1,17 +1,26 @@
-import { StyledProps } from "../../lib/styled-props.mjs";
-import { ScrollArea } from "@base-ui/react/scroll-area";
+import { ScrollAreaContentProps, ScrollAreaProps } from "./types.mjs";
 //#region src/components/scroll-area/scroll-area.d.ts
-export type ScrollAreaProps = StyledProps<ScrollArea.Root.Props>;
-declare function ScrollArea$1({ className, ...props }: ScrollAreaProps): import("react").JSX.Element;
-export type ScrollAreaViewportProps = StyledProps<ScrollArea.Viewport.Props>;
-export declare function ScrollAreaViewport({ className, ...props }: ScrollAreaViewportProps): import("react").JSX.Element;
-export type ScrollAreaContentProps = StyledProps<ScrollArea.Content.Props>;
+/**
+ * An optional box around the content, inside the container (the demo's
+ * `ScrollAreaResizableContent`): for padding, so the scrollbars stay at the
+ * edges, or a layout of the content's own. In a horizontal (or `both`) area
+ * it is as wide as its widest child. It is watched for size changes like any
+ * child of the container.
+ */
 export declare function ScrollAreaContent({ className, ...props }: ScrollAreaContentProps): import("react").JSX.Element;
-export type ScrollAreaScrollbarProps = StyledProps<ScrollArea.Scrollbar.Props>;
-export declare function ScrollAreaScrollbar({ className, orientation, ...props }: ScrollAreaScrollbarProps): import("react").JSX.Element;
-export type ScrollAreaThumbProps = StyledProps<ScrollArea.Thumb.Props>;
-export declare function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps): import("react").JSX.Element;
-export type ScrollAreaCornerProps = StyledProps<ScrollArea.Corner.Props>;
-export declare function ScrollAreaCorner({ className, ...props }: ScrollAreaCornerProps): import("react").JSX.Element;
-//#endregion
-export { ScrollArea$1 as ScrollArea };
+/**
+ * A scrolling box with thin overlay scrollbars that look the same on every
+ * platform and theme. Scrolling itself stays native (wheel, touch,
+ * keyboard); the scrollbars can also be dragged, and a press on a gutter
+ * pages.
+ *
+ * Modelled on 07akioni/react-scroll-area-demo: one element, the container
+ * (the element that scrolls), with the gutters (the scrollbars) as its first
+ * child, a zero-height sticky layer. `ref`, `className`, `style` and the
+ * native props are the container's; `render` puts another element in its
+ * place; `actionsRef` adds `scrollToElement` and `measure`. For an element of
+ * your own that can't take children through ScrollArea (a textarea,
+ * VirtualList's scroller), see `useScrollAreaContainer`.
+ */
+export declare function ScrollArea({ actionsRef, children, className, contentClassName, contentRef, contentStyle, fade, hideDelay, onEdgeChange, onScroll, orientation, overscroll, railInset, ref, render, size, style, tabIndex, trigger, ...props }: ScrollAreaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/scroll-area/scroll-area.mjs

@@ -1,55 +1,77 @@
-import { scrollArea } from "./scroll-area.recipe.mjs";
-import { jsx } from "react/jsx-runtime";
-import { ScrollArea } from "@base-ui/react/scroll-area";
+import { cn } from "../../cn.mjs";
+import { ScrollAreaGutters } from "./scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "./use-scroll-area-container.mjs";
+import { useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/scroll-area/scroll-area.tsx
-function ScrollArea$1({ className, ...props }) {
-	const { root } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea.Root, {
-		"data-slot": "scroll-area",
-		className: root({ className }),
-		...props
-	});
-}
-function ScrollAreaViewport({ className, ...props }) {
-	const { viewport } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
-		"data-slot": "scroll-area-viewport",
-		className: viewport({ className }),
-		...props
-	});
-}
+/**
+* An optional box around the content, inside the container (the demo's
+* `ScrollAreaResizableContent`): for padding, so the scrollbars stay at the
+* edges, or a layout of the content's own. In a horizontal (or `both`) area
+* it is as wide as its widest child. It is watched for size changes like any
+* child of the container.
+*/
 function ScrollAreaContent({ className, ...props }) {
-	const { content } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "scroll-area-content",
-		className: content({ className }),
-		...props
+		...props,
+		className: cn("r-scroll-area__content", className)
 	});
 }
-function ScrollAreaScrollbar({ className, orientation = "vertical", ...props }) {
-	const { scrollbar } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
-		"data-slot": "scroll-area-scrollbar",
+/**
+* A scrolling box with thin overlay scrollbars that look the same on every
+* platform and theme. Scrolling itself stays native (wheel, touch,
+* keyboard); the scrollbars can also be dragged, and a press on a gutter
+* pages.
+*
+* Modelled on 07akioni/react-scroll-area-demo: one element, the container
+* (the element that scrolls), with the gutters (the scrollbars) as its first
+* child, a zero-height sticky layer. `ref`, `className`, `style` and the
+* native props are the container's; `render` puts another element in its
+* place; `actionsRef` adds `scrollToElement` and `measure`. For an element of
+* your own that can't take children through ScrollArea (a textarea,
+* VirtualList's scroller), see `useScrollAreaContainer`.
+*/
+function ScrollArea({ actionsRef, children, className, contentClassName, contentRef, contentStyle, fade = false, hideDelay, onEdgeChange, onScroll, orientation, overscroll, railInset, ref, render, size, style, tabIndex, trigger, ...props }) {
+	const fadeRef = useRef(null);
+	const { containerProps, guttersProps } = useScrollAreaContainer({
+		actionsRef,
+		containerRef: ref,
+		contentRef,
+		fade,
+		fadeRef,
+		hideDelay,
+		onEdgeChange,
 		orientation,
-		className: scrollbar({ className }),
-		...props
+		overscroll,
+		railInset,
+		size,
+		trigger
 	});
-}
-function ScrollAreaThumb({ className, ...props }) {
-	const { thumb } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
-		"data-slot": "scroll-area-thumb",
-		className: thumb({ className }),
-		...props
-	});
-}
-function ScrollAreaCorner({ className, ...props }) {
-	const { corner } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea.Corner, {
-		"data-slot": "scroll-area-corner",
-		className: corner({ className }),
-		...props
+	const ownStyle = useMemo(() => ({
+		...containerProps.style,
+		...style
+	}), [containerProps.style, style]);
+	const content = contentClassName !== void 0 || contentStyle !== void 0 || fade ? /* @__PURE__ */ jsx(ScrollAreaContent, {
+		className: contentClassName,
+		ref: fadeRef,
+		style: contentStyle,
+		children
+	}) : children;
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ "data-slot": "scroll-area" }, props, {
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps }), content] }),
+			className: cn(containerProps.className, "r-scroll-area__viewport", className),
+			onScroll,
+			ref: containerProps.ref,
+			style: ownStyle,
+			tabIndex: tabIndex ?? containerProps.tabIndex
+		})
 	});
 }
 //#endregion
-export { ScrollArea$1 as ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport };
+export { ScrollArea, ScrollAreaContent };

package/dist/components/scroll-area/scroll-geometry.mjs

@@ -0,0 +1,58 @@
+//#region src/components/scroll-area/scroll-geometry.ts
+/**
+* Where the thumb of one axis goes, or `null` when that axis has nothing to
+* scroll. One pixel of overflow is ignored: it is usually rounding.
+*/
+function thumbPlacement(metrics, axis) {
+	const client = axis === "y" ? metrics.clientHeight : metrics.clientWidth;
+	const scroll = axis === "y" ? metrics.scrollHeight : metrics.scrollWidth;
+	const offset = axis === "y" ? metrics.scrollTop : metrics.scrollLeft;
+	const overflow = scroll - client;
+	if (client <= 0 || overflow <= 1) return null;
+	return {
+		progress: Math.min(1, Math.max(0, offset / overflow)),
+		ratio: client / scroll
+	};
+}
+/** The thumb's length in px: its share of the rail, at least `min`, and never longer than the rail. */
+function thumbLength(ratio, rail, min) {
+	return Math.max(0, Math.min(rail, Math.max(min, ratio * rail)));
+}
+/** How far down (or along) its rail a thumb of `length` px starts, in px. */
+function thumbOffset(progress, rail, length) {
+	return Math.max(0, rail - length) * progress;
+}
+/** The px left past each edge of the axes that have a thumb (`thumbPlacement` isn't `null`). */
+function scrollOverflow(metrics, axes) {
+	const [yStart, yEnd] = axes.y ? remaining(metrics.scrollTop, metrics.scrollHeight - metrics.clientHeight) : [0, 0];
+	const [xStart, xEnd] = axes.x ? remaining(metrics.scrollLeft, metrics.scrollWidth - metrics.clientWidth) : [0, 0];
+	return {
+		xEnd,
+		xStart,
+		yEnd,
+		yStart
+	};
+}
+function remaining(offset, overflow) {
+	const start = Math.min(overflow, Math.max(0, offset));
+	return [start, overflow - start];
+}
+/** An edge has more content past it once at least a pixel is left; less is rounding. */
+function overflows(remainingPx) {
+	return remainingPx >= 1;
+}
+/**
+* How far a click on the rail pages: most of a viewport, keeping a strip of
+* the previous page in view, as browsers do for Page Down.
+*/
+function pageDistance(client) {
+	return Math.round(client * .875);
+}
+/** -1 when the pointer is before the thumb, 1 after it, 0 on it. */
+function pageDirection(pointer, thumbStart, thumbEnd) {
+	if (pointer < thumbStart) return -1;
+	if (pointer > thumbEnd) return 1;
+	return 0;
+}
+//#endregion
+export { overflows, pageDirection, pageDistance, scrollOverflow, thumbLength, thumbOffset, thumbPlacement };

package/dist/components/scroll-area/scroll-to-element.mjs

@@ -0,0 +1,67 @@
+//#region src/components/scroll-area/scroll-to-element.ts
+/**
+* The scroll offset on one axis that brings an element into view, clamped to
+* what the container can scroll. `nearest` doesn't move an element that is
+* already in view (inside the `offset` margins), and otherwise lines it up
+* with the closer edge. Works on physical coordinates, so it holds for a
+* negative `scrollLeft` in right-to-left layouts too.
+*/
+function alignedScrollOffset({ align, itemSize, itemStart, max, min, offset, scroll, viewSize, viewStart }) {
+	const position = scroll + itemStart - viewStart;
+	const atStart = position - offset;
+	const atEnd = position + itemSize - viewSize + offset;
+	let target;
+	if (align === "start") target = atStart;
+	else if (align === "end") target = atEnd;
+	else if (align === "center") target = position - (viewSize - itemSize) / 2;
+	else if (atStart < scroll) target = atStart;
+	else if (atEnd > scroll) target = Math.min(atEnd, atStart);
+	else target = scroll;
+	return Math.min(max, Math.max(min, target));
+}
+/**
+* Scrolls `container`, and nothing around it, so that `element` is in view.
+* `block` and `offset` apply to the axis the area scrolls in: vertical,
+* unless the area is horizontal only (where `start` is the inline start, so
+* the right edge in right-to-left layouts). With `orientation="both"` the
+* horizontal axis just brings the element into view.
+*/
+function scrollToElement(container, element, orientation, { behavior, block = "start", offset = 0 } = {}) {
+	const view = container.getBoundingClientRect();
+	const item = element.getBoundingClientRect();
+	const target = {};
+	if (behavior) target.behavior = behavior;
+	if (orientation !== "horizontal") target.top = alignedScrollOffset({
+		align: block,
+		itemSize: item.height,
+		itemStart: item.top,
+		max: container.scrollHeight - container.clientHeight,
+		min: 0,
+		offset,
+		scroll: container.scrollTop,
+		viewSize: container.clientHeight,
+		viewStart: view.top + container.clientTop
+	});
+	if (orientation !== "vertical") {
+		const rtl = getComputedStyle(container).direction === "rtl";
+		const max = container.scrollWidth - container.clientWidth;
+		const inline = orientation === "horizontal";
+		let align = inline ? block : "nearest";
+		if (rtl && align === "start") align = "end";
+		else if (rtl && align === "end") align = "start";
+		target.left = alignedScrollOffset({
+			align,
+			itemSize: item.width,
+			itemStart: item.left,
+			max: rtl ? 0 : max,
+			min: rtl ? -max : 0,
+			offset: inline ? offset : 0,
+			scroll: container.scrollLeft,
+			viewSize: container.clientWidth,
+			viewStart: view.left + container.clientLeft
+		});
+	}
+	container.scrollTo(target);
+}
+//#endregion
+export { alignedScrollOffset, scrollToElement };

package/dist/components/scroll-area/types.d.mts

@@ -0,0 +1,224 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode, Ref, RefCallback, RefObject, UIEventHandler } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/scroll-area/types.d.ts
+/**
+ * `hover` shows the scrollbars while the pointer is over the area or it
+ * scrolls; `scroll` only while it scrolls; `none` always shows them.
+ */
+export type ScrollAreaTrigger = "hover" | "scroll" | "none";
+export type ScrollAreaSize = "small" | "medium";
+/** The directions the area scrolls in, each with its own scrollbar. */
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+/**
+ * What a scroll does at the end of the area: `none` stops there, with no bounce; `contain` stops
+ * there but lets Mac trackpads and iOS bounce the area; `auto` carries on to the page behind.
+ */
+export type ScrollAreaOverscroll = "none" | "contain" | "auto";
+/** Which edges the area is scrolled to: `true` when there is nothing more past that edge. */
+export type ScrollAreaEdges = {
+  top: boolean;
+  bottom: boolean;
+  left: boolean;
+  right: boolean;
+};
+/**
+ * Room in px the scrollbars keep clear at each end, such as for a sticky
+ * header or footer inside the area. `top` and `bottom` shorten the vertical
+ * scrollbar, `left` and `right` the horizontal one.
+ */
+export type ScrollAreaRailInset = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+export type ScrollAreaScrollToElementOptions = {
+  /** Where the element lines up, as in `scrollIntoView`. */
+  block?: "start" | "center" | "end" | "nearest";
+  /** Room in px kept between the element and that edge, such as a sticky header's height. `center` ignores it. */
+  offset?: number;
+  behavior?: ScrollBehavior;
+};
+/** Methods on `actionsRef`. */
+export type ScrollAreaActions = {
+  /** Scrolls the container, and only the container (never the page), so that `element` inside it is in view. */
+  scrollToElement: (element: Element, options?: ScrollAreaScrollToElementOptions) => void;
+  /** Measures the container again now, for a size change nothing observed reports. */
+  measure: () => void;
+};
+/** How the scrollbars look and behave: set on `ScrollArea`, or passed to `useScrollAreaContainer`. */
+export type ScrollAreaOptions = {
+  /** Methods to scroll from code that the container doesn't have natively. */
+  actionsRef?: Ref<ScrollAreaActions>;
+  /** Fade the content out toward an edge that has more past it. The scrollbars don't fade. */
+  fade?: boolean;
+  /** How long the scrollbars stay after scrolling stops, in ms. At least 100 with `trigger="scroll"`. */
+  hideDelay?: number;
+  /** The directions the area scrolls in. Content too wide for a vertical area is cut off. */
+  orientation?: ScrollAreaOrientation;
+  /**
+   * What a scroll that reaches the end does: stop there with no bounce (`none`, the default), stop
+   * there but let Mac trackpads and iOS bounce the area (`contain`), or carry on to the page behind
+   * (`auto`, which leaves the container's own `overscroll-behavior` alone). Only in the directions
+   * the area overflows right now.
+   */
+  overscroll?: ScrollAreaOverscroll;
+  /**
+   * Room in px the scrollbars keep clear at each end, such as a sticky header's height, so
+   * they don't run over it. Also settable in CSS, on the root:
+   * `--r-scroll-area-rail-inset-{top,bottom,left,right}`, which don't inherit.
+   */
+  railInset?: ScrollAreaRailInset;
+  /** Thumb thickness: `small` is 5px, `medium` 7px; both grow while pointed at or dragged. */
+  size?: ScrollAreaSize;
+  /** When the scrollbars show. They always show while scrolling or dragging. */
+  trigger?: ScrollAreaTrigger;
+  /** Called when the area reaches or leaves an edge, and after mounting when the content overflows. */
+  onEdgeChange?: (edges: ScrollAreaEdges) => void;
+};
+/**
+ * Where the gutters (the scrollbars) go. `sticky`: inside the container, as its first child, a
+ * zero-height layer stuck to the top of the viewport; the container is the root, with no frame
+ * around it. `absolute`: beside the container, a layer laid over a positioned frame (the root)
+ * that holds both; for a container that can't hold children (a textarea).
+ */
+export type ScrollAreaGuttersPosition = "sticky" | "absolute";
+/** What `useScrollAreaContainer` takes: ScrollArea's options, where the gutters go, and your refs. */
+export type ScrollAreaContainerOptions<E extends HTMLElement = HTMLElement> = ScrollAreaOptions & {
+  /** Your ref to the element that scrolls: `containerProps.ref` forwards to it. */
+  containerRef?: Ref<E> | undefined;
+  /** With absolute gutters, your ref to the frame: `frameProps.ref` forwards to it. */
+  frameRef?: Ref<HTMLDivElement> | undefined;
+  /** Where the gutters go: inside the container (`sticky`, the default) or beside it in a frame (`absolute`). */
+  guttersPosition?: ScrollAreaGuttersPosition;
+  /**
+   * An element whose size is the content's, watched for size changes (such as a hidden mirror of a
+   * textarea's text). Without it each element child of the container is watched, and children
+   * added or removed.
+   */
+  contentRef?: RefObject<HTMLElement | null>;
+  /**
+   * With `fade` and sticky gutters, the element the fade masks: a content element inside the
+   * container (`ScrollAreaContent`), since the mask can't sit on a container that holds the
+   * gutters. With absolute gutters the container itself is masked and this isn't read.
+   */
+  fadeRef?: RefObject<HTMLElement | null>;
+};
+/**
+ * What to spread on the element that scrolls (the container), merged with your own `className`
+ * and `style`, so the area measures it and its gutters follow it.
+ */
+export type ScrollAreaContainerProps<E extends HTMLElement = HTMLElement> = {
+  /**
+   * Put it on the element that scrolls (it fits any element's `ref` and VirtualList's `domRef`).
+   * It forwards to the `containerRef` you pass, so there is nothing to merge.
+   */
+  ref: RefCallback<E>;
+  /**
+   * Before your own classes. With sticky gutters the container is the root, so these are the
+   * root's classes and modifiers; with absolute gutters, `r-scroll-area__container`.
+   */
+  className: string;
+  /** With sticky gutters, the root's variables (`railInset`, the timelines); merge your style after it. */
+  style: CSSProperties | undefined;
+  /** `0` while there is something to scroll, so the container is a tab stop; else `undefined`. */
+  tabIndex: 0 | undefined;
+};
+/** With absolute gutters, what to spread on the positioned frame (the root) around the container and the gutters. */
+export type ScrollAreaFrameProps = {
+  /** It forwards to the `frameRef` you pass. */
+  ref: RefCallback<HTMLDivElement>;
+  /** The root's classes and modifiers, before your own (size and frame the area there). */
+  className: string;
+  /** The root's variables (`railInset`, the timelines); merge your style after it. */
+  style: CSSProperties;
+};
+declare const guttersBinding: unique symbol;
+/**
+ * How `<ScrollAreaGutters />` is wired to its container: opaque, made only by
+ * `useScrollAreaContainer`, so how the gutters are wired can change without breaking a caller.
+ */
+export type ScrollAreaGuttersBinding = {
+  readonly [guttersBinding]: true;
+};
+/** What `<ScrollAreaGutters />` takes: spread `useScrollAreaContainer`'s `guttersProps`, never built by hand. */
+export type ScrollAreaGuttersProps = {
+  /** The binding to its container, from `useScrollAreaContainer`. */
+  binding: ScrollAreaGuttersBinding;
+};
+/**
+ * What `useScrollAreaContainer` returns: props to spread on the elements you render (the
+ * container, the frame with absolute gutters, `<ScrollAreaGutters />`), and the area's methods.
+ */
+export type ScrollAreaContainer<E extends HTMLElement = HTMLElement> = {
+  /** Spread on the element that scrolls. */
+  containerProps: ScrollAreaContainerProps<E>;
+  /** With absolute gutters, spread on the frame around the container and the gutters; `undefined` with sticky gutters. */
+  frameProps: ScrollAreaFrameProps | undefined;
+  /** Spread on `<ScrollAreaGutters />`. */
+  guttersProps: ScrollAreaGuttersProps;
+  /** Where to put the gutters: the container's first child (`sticky`) or right after it (`absolute`). */
+  guttersPosition: ScrollAreaGuttersPosition;
+  /** Measures again now, for a size change nothing observed reports (a textarea's input). */
+  measure: () => void;
+  /** Scrolls the container, and only the container, so that `element` inside it is in view. */
+  scrollToElement: (element: Element, options?: ScrollAreaScrollToElementOptions) => void;
+  /** Whether either axis has something to scroll now. */
+  scrollable: boolean;
+};
+export type ScrollAreaOwnProps = ScrollAreaOptions & {
+  /** The scrolling content, in ScrollArea's own container. */
+  children?: ReactNode;
+  /**
+   * An element whose size is the content's, watched for size changes (such as a hidden mirror of a
+   * textarea's text). Without it each element child of the container is watched, and children
+   * added or removed.
+   */
+  contentRef?: RefObject<HTMLElement | null>;
+  /** Class of the area, the element that scrolls: size and frame it here. */
+  className?: string;
+  /** Style of the area. */
+  style?: CSSProperties;
+  /**
+   * Class of a content element around `children`, inside the container: put padding and the
+   * content's own layout (grid, flex, `gap`, `stack-y-*`) here, so the scrollbars stay at the edges
+   * and the gutters layer is never one of the laid-out children. Only with it, `contentStyle` or
+   * `fade` is there one.
+   */
+  contentClassName?: string;
+  /** Style of the content element; renders it, as `contentClassName` does. */
+  contentStyle?: CSSProperties;
+  /** The container's scroll events. */
+  onScroll?: UIEventHandler<HTMLDivElement>;
+  /** The container's: by default `0` while there is something to scroll. */
+  tabIndex?: number;
+  /**
+   * Another element in place of ScrollArea's own `<div>`, as the container (an element or a
+   * function that gets the props). It must hold children: the gutters are its first child.
+   */
+  render?: useRender.RenderProp | undefined;
+};
+/**
+ * `ref`, `className`, `style` and the native props go to the area: one element, the container,
+ * the element that scrolls, with the scrollbars inside it (sticky gutters).
+ */
+export type ScrollAreaProps = ScrollAreaOwnProps & Omit<ComponentPropsWithRef<"div">, keyof ScrollAreaOwnProps>;
+/** An optional box around the content, inside the container: native div props and `ref`. */
+export type ScrollAreaContentProps = ComponentPropsWithRef<"div">;
+export type ScrollAreaTextareaOwnProps = {
+  /** How long the scrollbar stays after scrolling stops, as on ScrollArea. */
+  hideDelay?: number;
+  /** Whether a scroll that reaches the end carries on to the page, as on ScrollArea. */
+  overscroll?: ScrollAreaOverscroll;
+  /** Thumb thickness, as on ScrollArea. */
+  size?: ScrollAreaSize;
+  /** When the scrollbar shows, as on ScrollArea. */
+  trigger?: ScrollAreaTrigger;
+  /** Class of the root that holds the textarea and its scrollbar. */
+  wrapperClassName?: string;
+  /** Style of the root; size the textarea itself with `className` / `style`. */
+  wrapperStyle?: CSSProperties;
+};
+/** Native textarea props; `ref`, `className`, `style` and `onScroll` go to the textarea. */
+export type ScrollAreaTextareaProps = ScrollAreaTextareaOwnProps & Omit<ComponentPropsWithRef<"textarea">, keyof ScrollAreaTextareaOwnProps>;
+//#endregion

package/dist/components/scroll-area/use-rail-pointer.mjs

@@ -0,0 +1,93 @@
+import { pageDirection, pageDistance } from "./scroll-geometry.mjs";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/scroll-area/use-rail-pointer.ts
+const reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+/**
+* Mouse and pen input on one scrollbar: dragging the thumb scrolls the
+* container in proportion, a press on the rail beside the thumb pages
+* toward it. Wheel, touch and keyboard scrolling stay native.
+*
+* `scrollLeft` is negative in right-to-left layouts, and both a drag delta
+* and a page step are physical (left is negative), so neither needs a
+* direction check.
+*/
+function useRailPointer({ axis, containerRef, onDraggingChange }) {
+	const drag = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const changeDragging = (next) => {
+		setDragging(next);
+		onDraggingChange(next);
+	};
+	const notifyRef = useRef(onDraggingChange);
+	useLayoutEffect(() => {
+		notifyRef.current = onDraggingChange;
+	});
+	useLayoutEffect(() => () => {
+		const current = drag.current;
+		if (!current) return;
+		drag.current = null;
+		try {
+			if (current.thumb.hasPointerCapture(current.pointerId)) current.thumb.releasePointerCapture(current.pointerId);
+		} catch {}
+		notifyRef.current(false);
+	}, []);
+	const vertical = axis === "y";
+	const along = (event) => vertical ? event.clientY : event.clientX;
+	const onRailPointerDown = (event) => {
+		const container = containerRef.current;
+		const thumb = event.currentTarget.firstElementChild;
+		if (!container || !thumb || event.button !== 0 || event.pointerType === "touch") return;
+		event.preventDefault();
+		const rect = thumb.getBoundingClientRect();
+		const distance = (vertical ? pageDirection(event.clientY, rect.top, rect.bottom) : pageDirection(event.clientX, rect.left, rect.right)) * pageDistance(vertical ? container.clientHeight : container.clientWidth);
+		container.scrollBy({
+			behavior: reducedMotion() ? "instant" : "smooth",
+			[vertical ? "top" : "left"]: distance
+		});
+	};
+	const onThumbPointerDown = (event) => {
+		const container = containerRef.current;
+		const thumb = event.currentTarget;
+		const rail = thumb.parentElement;
+		if (!container || !rail || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const travel = vertical ? rail.clientHeight - thumb.offsetHeight : rail.clientWidth - thumb.offsetWidth;
+		const overflow = vertical ? container.scrollHeight - container.clientHeight : container.scrollWidth - container.clientWidth;
+		drag.current = {
+			pointerId: event.pointerId,
+			thumb,
+			scale: travel > 0 ? overflow / travel : 0,
+			scrollStart: vertical ? container.scrollTop : container.scrollLeft,
+			start: along(event)
+		};
+		thumb.setPointerCapture(event.pointerId);
+		changeDragging(true);
+	};
+	const onThumbPointerMove = (event) => {
+		const container = containerRef.current;
+		const current = drag.current;
+		if (!container || current?.pointerId !== event.pointerId) return;
+		const scroll = current.scrollStart + (along(event) - current.start) * current.scale;
+		if (vertical) container.scrollTop = scroll;
+		else container.scrollLeft = scroll;
+	};
+	const endDrag = (event) => {
+		if (drag.current?.pointerId !== event.pointerId) return;
+		drag.current = null;
+		changeDragging(false);
+	};
+	return {
+		dragging,
+		railHandlers: { onPointerDown: onRailPointerDown },
+		thumbHandlers: {
+			onLostPointerCapture: endDrag,
+			onPointerCancel: endDrag,
+			onPointerDown: onThumbPointerDown,
+			onPointerMove: onThumbPointerMove,
+			onPointerUp: endDrag
+		}
+	};
+}
+//#endregion
+export { useRailPointer };

package/dist/components/scroll-area/use-scroll-area-container.d.mts

@@ -0,0 +1,26 @@
+import { ScrollAreaContainer, ScrollAreaContainerOptions, ScrollAreaFrameProps } from "./types.mjs";
+//#region src/components/scroll-area/use-scroll-area-container.d.ts
+/**
+ * ScrollArea's scrollbars for an element you render yourself: the demo's `useContainer`, as a
+ * hook in your own component. It measures the element that scrolls (the container), listens to
+ * its scroll, and keeps the state; you render the elements.
+ *
+ * Spread `containerProps` on the element that scrolls (a `<ul>`, a `<textarea>`, VirtualList's
+ * scroller through `domRef`), merging your own `className` and `style` with them (pass your own
+ * refs as `containerRef` and `frameRef`: the returned `ref`s already forward to them), and render
+ * `<ScrollAreaGutters {...guttersProps} />` where `guttersPosition` says:
+ *
+ * - `sticky` (the default): as the container's first child. The container is the root and
+ *   carries its classes; `frameProps` is `undefined`.
+ * - `absolute`: right after the container, both inside a frame that gets `frameProps` (the
+ *   root, positioned, sized and bordered by you).
+ *
+ * `<ScrollArea>` is this hook with a `<div>` of its own.
+ */
+export declare function useScrollAreaContainer<E extends HTMLElement = HTMLElement>(options: ScrollAreaContainerOptions<E> & {
+  guttersPosition: "absolute";
+}): ScrollAreaContainer<E> & {
+  frameProps: ScrollAreaFrameProps;
+};
+export declare function useScrollAreaContainer<E extends HTMLElement = HTMLElement>(options?: ScrollAreaContainerOptions<E>): ScrollAreaContainer<E>;
+//#endregion