@present-day/scroll-area 0.1.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/core/mergeRefs.ts","../src/core/props.ts","../src/core/useScrollEdges.ts","../src/radix/parts.tsx","../src/radix/ScrollArea.tsx"],"sourcesContent":["// The default entry is the Radix adapter; Base UI lives at `./base-ui`.\nexport * from './radix'\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 * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport const Root = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaProps\n>(function Root({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-primitive=\"radix\"\n      className={clsx('sa-root', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Viewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaViewportProps\n>(function Viewport({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={clsx('sa-viewport', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Scrollbar = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaScrollbarProps\n>(function Scrollbar({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      className={clsx('sa-scrollbar', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Thumb = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaThumbProps\n>(function Thumb({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Thumb\n      ref={ref}\n      className={clsx('sa-thumb', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Corner = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaCornerProps\n>(function Corner({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Corner\n      ref={ref}\n      className={clsx('sa-corner', className)}\n      {...props}\n    />\n  )\n})\n","import type * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { mergeRefs } from '../core/mergeRefs'\nimport { axesFor, rootStyle, type ScrollAreaSharedProps } from '../core/props'\nimport { useScrollEdges } from '../core/useScrollEdges'\nimport { Corner, Root, Scrollbar, Thumb, Viewport } from './parts'\n\nexport interface ScrollAreaProps\n  extends ScrollAreaSharedProps,\n    Omit<\n      ScrollAreaPrimitive.ScrollAreaProps,\n      keyof ScrollAreaSharedProps | 'type'\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      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    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    return (\n      <Root\n        {...rootProps}\n        ref={mergedRootRef}\n        // Radix only lets the viewport scroll while a scrollbar is mounted, so\n        // \"hidden\" keeps them mounted and the stylesheet hides them.\n        type={scrollbars === 'hidden' ? 'scroll' : scrollbars}\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          {children}\n        </Viewport>\n        {edgeEffect === 'shadow' ? (\n          <div className=\"sa-edge-shadow\" aria-hidden=\"true\" />\n        ) : null}\n        {vertical ? (\n          <Scrollbar orientation=\"vertical\" className={classNames.scrollbar}>\n            <Thumb className={classNames.thumb} />\n          </Scrollbar>\n        ) : null}\n        {horizontal ? (\n          <Scrollbar orientation=\"horizontal\" className={classNames.scrollbar}>\n            <Thumb className={classNames.thumb} />\n          </Scrollbar>\n        ) : null}\n        {vertical && horizontal ? <Corner /> : null}\n      </Root>\n    )\n  },\n)\n"],"mappings":"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","names":["Corner","Root","Scrollbar","Thumb","Viewport","Root","clsx","Viewport","Scrollbar","Thumb","Corner","import_clsx","React","import_jsx_runtime","ScrollArea","Root","clsx","Viewport","Scrollbar","Thumb","Corner"]}

package/dist/index.mjs

@@ -0,0 +1,145 @@
+"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/radix/parts.tsx
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import clsx from "clsx";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Root2 = React.forwardRef(function Root3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      "data-primitive": "radix",
+      className: clsx("sa-root", className),
+      ...props
+    }
+  );
+});
+var Viewport2 = React.forwardRef(function Viewport3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Viewport,
+    {
+      ref,
+      className: clsx("sa-viewport", className),
+      ...props
+    }
+  );
+});
+var Scrollbar2 = React.forwardRef(function Scrollbar3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Scrollbar,
+    {
+      ref,
+      className: clsx("sa-scrollbar", className),
+      ...props
+    }
+  );
+});
+var Thumb2 = React.forwardRef(function Thumb3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Thumb,
+    {
+      ref,
+      className: clsx("sa-thumb", className),
+      ...props
+    }
+  );
+});
+var Corner2 = React.forwardRef(function Corner3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Corner,
+    {
+      ref,
+      className: clsx("sa-corner", className),
+      ...props
+    }
+  );
+});
+
+// src/radix/ScrollArea.tsx
+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",
+    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__ */ jsxs(
+      Root2,
+      {
+        ...rootProps,
+        ref: mergedRootRef,
+        type: scrollbars === "hidden" ? "scroll" : scrollbars,
+        "data-edge-effect": edgeEffect,
+        "data-scrollbars": scrollbars,
+        className: clsx2(className, classNames.root),
+        style: rootStyle(style, edgeSize),
+        children: [
+          /* @__PURE__ */ jsx2(
+            Viewport2,
+            {
+              ref: mergedViewportRef,
+              className: classNames.viewport,
+              onScroll,
+              children
+            }
+          ),
+          edgeEffect === "shadow" ? /* @__PURE__ */ jsx2("div", { className: "sa-edge-shadow", "aria-hidden": "true" }) : null,
+          vertical ? /* @__PURE__ */ jsx2(Scrollbar2, { orientation: "vertical", className: classNames.scrollbar, children: /* @__PURE__ */ jsx2(Thumb2, { className: classNames.thumb }) }) : null,
+          horizontal ? /* @__PURE__ */ jsx2(Scrollbar2, { orientation: "horizontal", className: classNames.scrollbar, children: /* @__PURE__ */ jsx2(Thumb2, { className: classNames.thumb }) }) : null,
+          vertical && horizontal ? /* @__PURE__ */ jsx2(Corner2, {}) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  Corner2 as Corner,
+  EDGE_SIDES,
+  Root2 as Root,
+  SCROLL_AREA_AXIS,
+  SCROLL_AREA_EDGE_EFFECT,
+  SCROLL_AREA_SCROLLBARS,
+  ScrollArea,
+  Scrollbar2 as Scrollbar,
+  Thumb2 as Thumb,
+  Viewport2 as Viewport,
+  measureEdges,
+  mergeRefs,
+  useScrollEdges
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radix/parts.tsx","../src/radix/ScrollArea.tsx"],"sourcesContent":["import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport const Root = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaProps\n>(function Root({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-primitive=\"radix\"\n      className={clsx('sa-root', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Viewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaViewportProps\n>(function Viewport({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={clsx('sa-viewport', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Scrollbar = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaScrollbarProps\n>(function Scrollbar({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      className={clsx('sa-scrollbar', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Thumb = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaThumbProps\n>(function Thumb({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Thumb\n      ref={ref}\n      className={clsx('sa-thumb', className)}\n      {...props}\n    />\n  )\n})\n\nexport const Corner = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaPrimitive.ScrollAreaCornerProps\n>(function Corner({ className, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Corner\n      ref={ref}\n      className={clsx('sa-corner', className)}\n      {...props}\n    />\n  )\n})\n","import type * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { mergeRefs } from '../core/mergeRefs'\nimport { axesFor, rootStyle, type ScrollAreaSharedProps } from '../core/props'\nimport { useScrollEdges } from '../core/useScrollEdges'\nimport { Corner, Root, Scrollbar, Thumb, Viewport } from './parts'\n\nexport interface ScrollAreaProps\n  extends ScrollAreaSharedProps,\n    Omit<\n      ScrollAreaPrimitive.ScrollAreaProps,\n      keyof ScrollAreaSharedProps | 'type'\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      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    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    return (\n      <Root\n        {...rootProps}\n        ref={mergedRootRef}\n        // Radix only lets the viewport scroll while a scrollbar is mounted, so\n        // \"hidden\" keeps them mounted and the stylesheet hides them.\n        type={scrollbars === 'hidden' ? 'scroll' : scrollbars}\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          {children}\n        </Viewport>\n        {edgeEffect === 'shadow' ? (\n          <div className=\"sa-edge-shadow\" aria-hidden=\"true\" />\n        ) : null}\n        {vertical ? (\n          <Scrollbar orientation=\"vertical\" className={classNames.scrollbar}>\n            <Thumb className={classNames.thumb} />\n          </Scrollbar>\n        ) : null}\n        {horizontal ? (\n          <Scrollbar orientation=\"horizontal\" className={classNames.scrollbar}>\n            <Thumb className={classNames.thumb} />\n          </Scrollbar>\n        ) : null}\n        {vertical && horizontal ? <Corner /> : null}\n      </Root>\n    )\n  },\n)\n"],"mappings":"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","names":["Root","Viewport","Scrollbar","Thumb","Corner","clsx","React","jsx","ScrollArea","Root","clsx","Viewport","Scrollbar","Thumb","Corner"]}

package/dist/props-CCrZyXhY.d.mts

@@ -0,0 +1,83 @@
+import { Ref, RefCallback, RefObject, ReactNode, CSSProperties, UIEventHandler } from 'react';
+
+/** Combines several refs into one callback ref. */
+declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
+
+type ScrollAxes = {
+    horizontal: boolean;
+    vertical: boolean;
+};
+type EdgeSide = 'top' | 'right' | 'bottom' | 'left';
+type Edges = Record<EdgeSide, boolean>;
+declare const EDGE_SIDES: readonly EdgeSide[];
+/** Which physical edges of `el` have more content beyond them. */
+declare function measureEdges(el: HTMLElement, axes: ScrollAxes): Edges;
+/**
+ * Tracks which edges of a scrolling element have hidden content and mirrors
+ * them as `data-overflow-{side}` attributes on `targetRef`. Writes go straight
+ * to the DOM, so scrolling never re-renders React.
+ *
+ * Returns a callback ref for the scrolling element.
+ */
+declare function useScrollEdges<T extends HTMLElement = HTMLDivElement>(targetRef: RefObject<HTMLElement | null>, { horizontal, vertical }: ScrollAxes): (node: T | null) => void;
+
+/** Which directions scroll. */
+declare const SCROLL_AREA_AXIS: {
+    readonly VERTICAL: "vertical";
+    readonly HORIZONTAL: "horizontal";
+    readonly BOTH: "both";
+};
+type ScrollAreaAxis = (typeof SCROLL_AREA_AXIS)[keyof typeof SCROLL_AREA_AXIS];
+/** How edges with more content beyond them are signaled. */
+declare const SCROLL_AREA_EDGE_EFFECT: {
+    /** Fades the content itself toward the edge (color-independent). */
+    readonly FADE: "fade";
+    /** Draws `--scroll-area-shadow-color` over the edge. */
+    readonly SHADOW: "shadow";
+    /** Draws nothing; `data-overflow-*` attributes are still set. */
+    readonly NONE: "none";
+};
+type ScrollAreaEdgeEffect = (typeof SCROLL_AREA_EDGE_EFFECT)[keyof typeof SCROLL_AREA_EDGE_EFFECT];
+/** When scrollbars are visible. */
+declare const SCROLL_AREA_SCROLLBARS: {
+    /** While scrolling or hovering the area. */
+    readonly HOVER: "hover";
+    /** While scrolling. */
+    readonly SCROLL: "scroll";
+    /** While the content overflows. */
+    readonly AUTO: "auto";
+    /** Even when the content doesn't overflow. */
+    readonly ALWAYS: "always";
+    /** Never; the area still scrolls by wheel, touch, and keyboard. */
+    readonly HIDDEN: "hidden";
+};
+type ScrollAreaScrollbars = (typeof SCROLL_AREA_SCROLLBARS)[keyof typeof SCROLL_AREA_SCROLLBARS];
+type ScrollAreaClassNames = {
+    root?: string;
+    viewport?: string;
+    scrollbar?: string;
+    thumb?: string;
+};
+/** Props every adapter's `ScrollArea` accepts, with the same meaning. */
+interface ScrollAreaSharedProps {
+    children?: ReactNode;
+    /** Which directions scroll. Defaults to `"vertical"`. */
+    axis?: ScrollAreaAxis;
+    /** How edges with more content beyond them are signaled. Defaults to `"fade"`. */
+    edgeEffect?: ScrollAreaEdgeEffect;
+    /** Depth of the edge effect: a number of pixels or any CSS length. */
+    edgeSize?: number | string;
+    /** When scrollbars are visible. Defaults to `"hover"`. */
+    scrollbars?: ScrollAreaScrollbars;
+    /** Reading direction; flips horizontal scrolling and the scrollbar side. */
+    dir?: 'ltr' | 'rtl';
+    className?: string;
+    style?: CSSProperties;
+    /** Classes for the internal parts. */
+    classNames?: ScrollAreaClassNames;
+    /** Ref to the scrolling viewport element. */
+    viewportRef?: Ref<HTMLDivElement>;
+    onScroll?: UIEventHandler<HTMLDivElement>;
+}
+
+export { EDGE_SIDES as E, type ScrollAreaClassNames as S, type ScrollAreaSharedProps as a, type EdgeSide as b, type Edges as c, SCROLL_AREA_AXIS as d, SCROLL_AREA_EDGE_EFFECT as e, SCROLL_AREA_SCROLLBARS as f, type ScrollAreaAxis as g, type ScrollAreaEdgeEffect as h, type ScrollAreaScrollbars as i, type ScrollAxes as j, mergeRefs as k, measureEdges as m, useScrollEdges as u };

package/dist/props-CCrZyXhY.d.ts

@@ -0,0 +1,83 @@
+import { Ref, RefCallback, RefObject, ReactNode, CSSProperties, UIEventHandler } from 'react';
+
+/** Combines several refs into one callback ref. */
+declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
+
+type ScrollAxes = {
+    horizontal: boolean;
+    vertical: boolean;
+};
+type EdgeSide = 'top' | 'right' | 'bottom' | 'left';
+type Edges = Record<EdgeSide, boolean>;
+declare const EDGE_SIDES: readonly EdgeSide[];
+/** Which physical edges of `el` have more content beyond them. */
+declare function measureEdges(el: HTMLElement, axes: ScrollAxes): Edges;
+/**
+ * Tracks which edges of a scrolling element have hidden content and mirrors
+ * them as `data-overflow-{side}` attributes on `targetRef`. Writes go straight
+ * to the DOM, so scrolling never re-renders React.
+ *
+ * Returns a callback ref for the scrolling element.
+ */
+declare function useScrollEdges<T extends HTMLElement = HTMLDivElement>(targetRef: RefObject<HTMLElement | null>, { horizontal, vertical }: ScrollAxes): (node: T | null) => void;
+
+/** Which directions scroll. */
+declare const SCROLL_AREA_AXIS: {
+    readonly VERTICAL: "vertical";
+    readonly HORIZONTAL: "horizontal";
+    readonly BOTH: "both";
+};
+type ScrollAreaAxis = (typeof SCROLL_AREA_AXIS)[keyof typeof SCROLL_AREA_AXIS];
+/** How edges with more content beyond them are signaled. */
+declare const SCROLL_AREA_EDGE_EFFECT: {
+    /** Fades the content itself toward the edge (color-independent). */
+    readonly FADE: "fade";
+    /** Draws `--scroll-area-shadow-color` over the edge. */
+    readonly SHADOW: "shadow";
+    /** Draws nothing; `data-overflow-*` attributes are still set. */
+    readonly NONE: "none";
+};
+type ScrollAreaEdgeEffect = (typeof SCROLL_AREA_EDGE_EFFECT)[keyof typeof SCROLL_AREA_EDGE_EFFECT];
+/** When scrollbars are visible. */
+declare const SCROLL_AREA_SCROLLBARS: {
+    /** While scrolling or hovering the area. */
+    readonly HOVER: "hover";
+    /** While scrolling. */
+    readonly SCROLL: "scroll";
+    /** While the content overflows. */
+    readonly AUTO: "auto";
+    /** Even when the content doesn't overflow. */
+    readonly ALWAYS: "always";
+    /** Never; the area still scrolls by wheel, touch, and keyboard. */
+    readonly HIDDEN: "hidden";
+};
+type ScrollAreaScrollbars = (typeof SCROLL_AREA_SCROLLBARS)[keyof typeof SCROLL_AREA_SCROLLBARS];
+type ScrollAreaClassNames = {
+    root?: string;
+    viewport?: string;
+    scrollbar?: string;
+    thumb?: string;
+};
+/** Props every adapter's `ScrollArea` accepts, with the same meaning. */
+interface ScrollAreaSharedProps {
+    children?: ReactNode;
+    /** Which directions scroll. Defaults to `"vertical"`. */
+    axis?: ScrollAreaAxis;
+    /** How edges with more content beyond them are signaled. Defaults to `"fade"`. */
+    edgeEffect?: ScrollAreaEdgeEffect;
+    /** Depth of the edge effect: a number of pixels or any CSS length. */
+    edgeSize?: number | string;
+    /** When scrollbars are visible. Defaults to `"hover"`. */
+    scrollbars?: ScrollAreaScrollbars;
+    /** Reading direction; flips horizontal scrolling and the scrollbar side. */
+    dir?: 'ltr' | 'rtl';
+    className?: string;
+    style?: CSSProperties;
+    /** Classes for the internal parts. */
+    classNames?: ScrollAreaClassNames;
+    /** Ref to the scrolling viewport element. */
+    viewportRef?: Ref<HTMLDivElement>;
+    onScroll?: UIEventHandler<HTMLDivElement>;
+}
+
+export { EDGE_SIDES as E, type ScrollAreaClassNames as S, type ScrollAreaSharedProps as a, type EdgeSide as b, type Edges as c, SCROLL_AREA_AXIS as d, SCROLL_AREA_EDGE_EFFECT as e, SCROLL_AREA_SCROLLBARS as f, type ScrollAreaAxis as g, type ScrollAreaEdgeEffect as h, type ScrollAreaScrollbars as i, type ScrollAxes as j, mergeRefs as k, measureEdges as m, useScrollEdges as u };

package/dist/styles.css

@@ -0,0 +1,157 @@
+/* src/core/styles.css */
+@property --_sa-t { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --_sa-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --_sa-b { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --_sa-l { syntax: "<length>"; inherits: true; initial-value: 0px; }
+:where(.sa-root) {
+  block-size: 100%;
+  inline-size: 100%;
+}
+.sa-root {
+  --_sa-size: var(--scroll-area-edge-size, 24px);
+  --_sa-t: 0px;
+  --_sa-r: 0px;
+  --_sa-b: 0px;
+  --_sa-l: 0px;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition:
+    --_sa-t 150ms ease-out,
+    --_sa-r 150ms ease-out,
+    --_sa-b 150ms ease-out,
+    --_sa-l 150ms ease-out;
+}
+.sa-root[data-overflow-top] {
+  --_sa-t: var(--_sa-size);
+}
+.sa-root[data-overflow-right] {
+  --_sa-r: var(--_sa-size);
+}
+.sa-root[data-overflow-bottom] {
+  --_sa-b: var(--_sa-size);
+}
+.sa-root[data-overflow-left] {
+  --_sa-l: var(--_sa-size);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sa-root {
+    transition: none;
+  }
+}
+:where(.sa-viewport) {
+  block-size: 100%;
+  inline-size: 100%;
+}
+.sa-viewport {
+  box-sizing: border-box;
+  border-radius: inherit;
+}
+.sa-viewport:focus-visible {
+  outline: 2px solid Highlight;
+  outline-offset: -2px;
+}
+.sa-viewport[data-radix-scroll-area-viewport] > div {
+  display: var(--scroll-area-content-display, table) !important;
+}
+.sa-content {
+  display: var(--scroll-area-content-display, block);
+}
+.sa-root[data-edge-effect=fade] > .sa-viewport {
+  --_sa-min: var(--scroll-area-edge-fade-min, transparent);
+  mask-image:
+    linear-gradient(
+      to bottom,
+      var(--_sa-min),
+      #000 var(--_sa-t)),
+    linear-gradient(
+      to left,
+      var(--_sa-min),
+      #000 var(--_sa-r)),
+    linear-gradient(
+      to top,
+      var(--_sa-min),
+      #000 var(--_sa-b)),
+    linear-gradient(
+      to right,
+      var(--_sa-min),
+      #000 var(--_sa-l));
+  mask-composite: intersect;
+}
+.sa-edge-shadow {
+  --_sa-c: var( --scroll-area-shadow-color, light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)) );
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      to bottom,
+      var(--_sa-c),
+      transparent) top / 100% var(--_sa-t) no-repeat,
+    linear-gradient(
+      to left,
+      var(--_sa-c),
+      transparent) right / var(--_sa-r) 100% no-repeat,
+    linear-gradient(
+      to top,
+      var(--_sa-c),
+      transparent) bottom / 100% var(--_sa-b) no-repeat,
+    linear-gradient(
+      to right,
+      var(--_sa-c),
+      transparent) left / var(--_sa-l) 100% no-repeat;
+}
+.sa-scrollbar {
+  --_sa-gutter: 2px;
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--_sa-gutter);
+  user-select: none;
+  touch-action: none;
+}
+.sa-root[data-scrollbars=hidden] > .sa-scrollbar {
+  display: none;
+}
+.sa-root[data-primitive=base-ui] > .sa-scrollbar {
+  transition: opacity 150ms;
+}
+.sa-root[data-primitive=base-ui][data-scrollbars=hover] > .sa-scrollbar:not([data-hovering], [data-scrolling]),
+.sa-root[data-primitive=base-ui][data-scrollbars=scroll] > .sa-scrollbar:not([data-scrolling]) {
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sa-root[data-primitive=base-ui] > .sa-scrollbar {
+    transition: none;
+  }
+}
+.sa-scrollbar[data-orientation=vertical] {
+  inline-size: calc(var(--scroll-area-thumb-size, 6px) + var(--_sa-gutter) * 2);
+}
+.sa-scrollbar[data-orientation=horizontal] {
+  flex-direction: column;
+  block-size: calc(var(--scroll-area-thumb-size, 6px) + var(--_sa-gutter) * 2);
+}
+.sa-thumb {
+  position: relative;
+  flex: 1;
+  border-radius: 9999px;
+  background: var( --scroll-area-thumb-color, light-dark(rgb(0 0 0 / 0.28), rgb(255 255 255 / 0.28)) );
+  transition: background-color 150ms;
+}
+.sa-thumb:hover {
+  background: var( --scroll-area-thumb-color-hover, light-dark(rgb(0 0 0 / 0.45), rgb(255 255 255 / 0.45)) );
+}
+.sa-thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: var(--scroll-area-touch-target, 24px);
+  min-block-size: var(--scroll-area-touch-target, 24px);
+}
+/*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/styles.css"],"sourcesContent":["/*\n * Public tokens (set on any ancestor to override). Defaults are var()\n * fallbacks so nothing here shadows an inherited value:\n *   --scroll-area-edge-size        depth of the fade/shadow      24px\n *   --scroll-area-edge-fade-min    opacity at the very edge      transparent\n *   --scroll-area-shadow-color     shadow tint                   light-dark()\n *   --scroll-area-thumb-color      scrollbar thumb               light-dark()\n *   --scroll-area-thumb-color-hover\n *   --scroll-area-thumb-size       thumb thickness               6px\n *   --scroll-area-touch-target     minimum thumb hit area        24px\n *   --scroll-area-content-display  content wrapper display       table (Radix) / block (Base UI)\n *\n * light-dark() resolves against the inherited `color-scheme`, which this\n * package never sets.\n */\n\n/* Per-edge depth, registered so it can transition. */\n@property --_sa-t {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n@property --_sa-r {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n@property --_sa-b {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n@property --_sa-l {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n/* :where() keeps sizing easy to override. */\n:where(.sa-root) {\n  block-size: 100%;\n  inline-size: 100%;\n}\n\n.sa-root {\n  --_sa-size: var(--scroll-area-edge-size, 24px);\n  /* Reset explicitly so a nested scroll area doesn't inherit its parent's edges. */\n  --_sa-t: 0px;\n  --_sa-r: 0px;\n  --_sa-b: 0px;\n  --_sa-l: 0px;\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition:\n    --_sa-t 150ms ease-out,\n    --_sa-r 150ms ease-out,\n    --_sa-b 150ms ease-out,\n    --_sa-l 150ms ease-out;\n}\n\n.sa-root[data-overflow-top] {\n  --_sa-t: var(--_sa-size);\n}\n.sa-root[data-overflow-right] {\n  --_sa-r: var(--_sa-size);\n}\n.sa-root[data-overflow-bottom] {\n  --_sa-b: var(--_sa-size);\n}\n.sa-root[data-overflow-left] {\n  --_sa-l: var(--_sa-size);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sa-root {\n    transition: none;\n  }\n}\n\n:where(.sa-viewport) {\n  block-size: 100%;\n  inline-size: 100%;\n}\n\n.sa-viewport {\n  box-sizing: border-box;\n  border-radius: inherit;\n}\n\n.sa-viewport:focus-visible {\n  /* Base UI makes an overflowing viewport focusable; the root clips outer outlines. */\n  outline: 2px solid Highlight;\n  outline-offset: -2px;\n}\n\n.sa-viewport[data-radix-scroll-area-viewport] > div {\n  /* Overrides the inline `display: table` Radix sets on the content wrapper. */\n  /* biome-ignore lint/complexity/noImportantStyles: only way to beat an inline style */\n  display: var(--scroll-area-content-display, table) !important;\n}\n\n.sa-content {\n  display: var(--scroll-area-content-display, block);\n}\n\n/*\n * Fade: one mask layer per edge, intersected. A 0px edge is fully opaque, so\n * any combination of edges works without combination rules.\n */\n.sa-root[data-edge-effect=\"fade\"] > .sa-viewport {\n  --_sa-min: var(--scroll-area-edge-fade-min, transparent);\n  mask-image:\n    linear-gradient(to bottom, var(--_sa-min), #000 var(--_sa-t)),\n    linear-gradient(to left, var(--_sa-min), #000 var(--_sa-r)),\n    linear-gradient(to top, var(--_sa-min), #000 var(--_sa-b)),\n    linear-gradient(to right, var(--_sa-min), #000 var(--_sa-l));\n  mask-composite: intersect;\n}\n\n/* Shadow: an overlay above the content and below the scrollbars. */\n.sa-edge-shadow {\n  --_sa-c: var(\n    --scroll-area-shadow-color,\n    light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6))\n  );\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  border-radius: inherit;\n  background:\n    linear-gradient(to bottom, var(--_sa-c), transparent) top / 100%\n    var(--_sa-t) no-repeat,\n    linear-gradient(to left, var(--_sa-c), transparent) right / var(--_sa-r)\n    100% no-repeat,\n    linear-gradient(to top, var(--_sa-c), transparent) bottom / 100%\n    var(--_sa-b) no-repeat,\n    linear-gradient(to right, var(--_sa-c), transparent) left / var(--_sa-l)\n    100% no-repeat;\n}\n\n.sa-scrollbar {\n  --_sa-gutter: 2px;\n  display: flex;\n  box-sizing: border-box;\n  padding: var(--_sa-gutter);\n  user-select: none;\n  /* Disables browser panning and zooming gestures on the track. */\n  touch-action: none;\n}\n\n/* Mounted (so the viewport can scroll) but never shown. */\n.sa-root[data-scrollbars=\"hidden\"] > .sa-scrollbar {\n  display: none;\n}\n\n/*\n * Base UI has no visibility prop, so \"hover\" and \"scroll\" key off the\n * hover/scroll state its scrollbars carry. Radix handles these itself.\n */\n.sa-root[data-primitive=\"base-ui\"] > .sa-scrollbar {\n  transition: opacity 150ms;\n}\n\n.sa-root[data-primitive=\"base-ui\"][data-scrollbars=\"hover\"]\n  > .sa-scrollbar:not([data-hovering], [data-scrolling]),\n.sa-root[data-primitive=\"base-ui\"][data-scrollbars=\"scroll\"]\n  > .sa-scrollbar:not([data-scrolling]) {\n  opacity: 0;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sa-root[data-primitive=\"base-ui\"] > .sa-scrollbar {\n    transition: none;\n  }\n}\n\n.sa-scrollbar[data-orientation=\"vertical\"] {\n  inline-size: calc(var(--scroll-area-thumb-size, 6px) + var(--_sa-gutter) * 2);\n}\n\n.sa-scrollbar[data-orientation=\"horizontal\"] {\n  flex-direction: column;\n  block-size: calc(var(--scroll-area-thumb-size, 6px) + var(--_sa-gutter) * 2);\n}\n\n.sa-thumb {\n  position: relative;\n  flex: 1;\n  border-radius: 9999px;\n  background: var(\n    --scroll-area-thumb-color,\n    light-dark(rgb(0 0 0 / 0.28), rgb(255 255 255 / 0.28))\n  );\n  transition: background-color 150ms;\n}\n\n.sa-thumb:hover {\n  background: var(\n    --scroll-area-thumb-color-hover,\n    light-dark(rgb(0 0 0 / 0.45), rgb(255 255 255 / 0.45))\n  );\n}\n\n/* Larger hit area for touch: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */\n.sa-thumb::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  translate: -50% -50%;\n  inline-size: 100%;\n  block-size: 100%;\n  min-inline-size: var(--scroll-area-touch-target, 24px);\n  min-block-size: var(--scroll-area-touch-target, 24px);\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "@present-day/scroll-area",
+  "version": "0.1.0",
+  "description": "A Radix or Base UI scroll area with theme-aware edge fades and shadows",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./radix": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./base-ui": {
+      "import": {
+        "types": "./dist/base-ui.d.mts",
+        "default": "./dist/base-ui.mjs"
+      },
+      "require": {
+        "types": "./dist/base-ui.d.ts",
+        "default": "./dist/base-ui.js"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "packageManager": "bun@1.3.13",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "bun run build",
+    "lint": "biome check .",
+    "format": "biome check --write .",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "react",
+    "scroll-area",
+    "radix",
+    "base-ui",
+    "scroll-shadow",
+    "fade"
+  ],
+  "author": "Present Day",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/present-day/scroll-area.git"
+  },
+  "bugs": {
+    "url": "https://github.com/present-day/scroll-area/issues"
+  },
+  "homepage": "https://github.com/present-day/scroll-area#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@biomejs/biome": "^2.4.12",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "happy-dom": "^20.9.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "storybook": "^10.6.0",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.0",
+    "vitest": "^4.1.6"
+  },
+  "peerDependenciesMeta": {
+    "@base-ui/react": {
+      "optional": true
+    },
+    "@radix-ui/react-scroll-area": {
+      "optional": true
+    }
+  }
+}