@base-ui/react 1.5.0 → 1.6.0

package/esm/scroll-area/content/ScrollAreaContent.js

@@ -1,63 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useScrollAreaViewportContext } from "../viewport/ScrollAreaViewportContext.js";
-import { useRenderElement } from "../../internals/useRenderElement.js";
-import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
-import { scrollAreaStateAttributesMapping } from "../root/stateAttributes.js";
-/**
- * A container for the content of the scroll area.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
- */
-export const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAreaContent(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    style,
-    ...elementProps
-  } = componentProps;
-  const {
-    computeThumbPosition
-  } = useScrollAreaViewportContext();
-  const {
-    viewportState
-  } = useScrollAreaRootContext();
-  const contentWrapperRef = React.useRef(null);
-  useIsoLayoutEffect(() => {
-    if (typeof ResizeObserver === 'undefined') {
-      return undefined;
-    }
-    let hasInitialized = false;
-    const resizeObserver = new ResizeObserver(() => {
-      // ResizeObserver fires once upon observing, so we skip the initial call
-      // to avoid double-calculating the thumb position on mount.
-      if (!hasInitialized) {
-        hasInitialized = true;
-        return;
-      }
-      computeThumbPosition();
-    });
-    if (contentWrapperRef.current) {
-      resizeObserver.observe(contentWrapperRef.current);
-    }
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [computeThumbPosition]);
-  const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, contentWrapperRef],
-    state: viewportState,
-    stateAttributesMapping: scrollAreaStateAttributesMapping,
-    props: [{
-      role: 'presentation',
-      style: {
-        minWidth: 'fit-content'
-      }
-    }, elementProps]
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ScrollAreaContent.displayName = "ScrollAreaContent";

package/esm/scroll-area/corner/ScrollAreaCorner.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import type { BaseUIComponentProps } from "../../internals/types.js";
-/**
- * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
- */
-export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaCornerState {}
-export interface ScrollAreaCornerProps extends BaseUIComponentProps<'div', ScrollAreaCornerState> {}
-export declare namespace ScrollAreaCorner {
-  type State = ScrollAreaCornerState;
-  type Props = ScrollAreaCornerProps;
-}

package/esm/scroll-area/corner/ScrollAreaCorner.js

@@ -1,42 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
-import { useRenderElement } from "../../internals/useRenderElement.js";
-
-/**
- * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
- */
-export const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAreaCorner(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    style,
-    ...elementProps
-  } = componentProps;
-  const {
-    cornerRef,
-    cornerSize,
-    hiddenState
-  } = useScrollAreaRootContext();
-  const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, cornerRef],
-    props: [{
-      style: {
-        position: 'absolute',
-        bottom: 0,
-        insetInlineEnd: 0,
-        width: cornerSize.width,
-        height: cornerSize.height
-      }
-    }, elementProps]
-  });
-  if (hiddenState.corner) {
-    return null;
-  }
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ScrollAreaCorner.displayName = "ScrollAreaCorner";

package/esm/scroll-area/index.d.ts

@@ -1,7 +0,0 @@
-export * as ScrollArea from "./index.parts.js";
-export type * from "./root/ScrollAreaRoot.js";
-export type * from "./viewport/ScrollAreaViewport.js";
-export type * from "./scrollbar/ScrollAreaScrollbar.js";
-export type * from "./content/ScrollAreaContent.js";
-export type * from "./thumb/ScrollAreaThumb.js";
-export type * from "./corner/ScrollAreaCorner.js";

package/esm/scroll-area/index.js

@@ -1 +0,0 @@
-export * as ScrollArea from "./index.parts.js";

package/esm/scroll-area/index.parts.d.ts

@@ -1,6 +0,0 @@
-export { ScrollAreaRoot as Root } from "./root/ScrollAreaRoot.js";
-export { ScrollAreaViewport as Viewport } from "./viewport/ScrollAreaViewport.js";
-export { ScrollAreaScrollbar as Scrollbar } from "./scrollbar/ScrollAreaScrollbar.js";
-export { ScrollAreaContent as Content } from "./content/ScrollAreaContent.js";
-export { ScrollAreaThumb as Thumb } from "./thumb/ScrollAreaThumb.js";
-export { ScrollAreaCorner as Corner } from "./corner/ScrollAreaCorner.js";

package/esm/scroll-area/index.parts.js

@@ -1,6 +0,0 @@
-export { ScrollAreaRoot as Root } from "./root/ScrollAreaRoot.js";
-export { ScrollAreaViewport as Viewport } from "./viewport/ScrollAreaViewport.js";
-export { ScrollAreaScrollbar as Scrollbar } from "./scrollbar/ScrollAreaScrollbar.js";
-export { ScrollAreaContent as Content } from "./content/ScrollAreaContent.js";
-export { ScrollAreaThumb as Thumb } from "./thumb/ScrollAreaThumb.js";
-export { ScrollAreaCorner as Corner } from "./corner/ScrollAreaCorner.js";

package/esm/scroll-area/root/ScrollAreaRoot.d.ts

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import type { BaseUIComponentProps } from "../../internals/types.js";
-declare const DEFAULT_COORDS: {
-  x: number;
-  y: number;
-};
-declare const DEFAULT_SIZE: {
-  width: number;
-  height: number;
-};
-declare const DEFAULT_OVERFLOW_EDGES: {
-  xStart: boolean;
-  xEnd: boolean;
-  yStart: boolean;
-  yEnd: boolean;
-};
-declare const DEFAULT_HIDDEN_STATE: {
-  x: boolean;
-  y: boolean;
-  corner: boolean;
-};
-export type HiddenState = typeof DEFAULT_HIDDEN_STATE;
-export type OverflowEdges = typeof DEFAULT_OVERFLOW_EDGES;
-export type Size = typeof DEFAULT_SIZE;
-export type Coords = typeof DEFAULT_COORDS;
-/**
- * Groups all parts of the scroll area.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
- */
-export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaRootState {
-  /**
-   * Whether the scroll area is being scrolled.
-   */
-  scrolling: boolean;
-  /**
-   * Whether horizontal overflow is present.
-   */
-  hasOverflowX: boolean;
-  /**
-   * Whether vertical overflow is present.
-   */
-  hasOverflowY: boolean;
-  /**
-   * Whether there is overflow on the inline start side for the horizontal axis.
-   */
-  overflowXStart: boolean;
-  /**
-   * Whether there is overflow on the inline end side for the horizontal axis.
-   */
-  overflowXEnd: boolean;
-  /**
-   * Whether there is overflow on the block start side.
-   */
-  overflowYStart: boolean;
-  /**
-   * Whether there is overflow on the block end side.
-   */
-  overflowYEnd: boolean;
-  /**
-   * Whether the scrollbar corner is hidden.
-   */
-  cornerHidden: boolean;
-}
-export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollAreaRootState> {
-  /**
-   * The threshold in pixels that must be passed before the overflow edge attributes are applied.
-   * Accepts a single number for all edges or an object to configure them individually.
-   * @default 0
-   */
-  overflowEdgeThreshold?: number | Partial<{
-    xStart: number;
-    xEnd: number;
-    yStart: number;
-    yEnd: number;
-  }> | undefined;
-}
-export declare namespace ScrollAreaRoot {
-  type State = ScrollAreaRootState;
-  type Props = ScrollAreaRootProps;
-}
-export {};

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -1,261 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useTimeout } from '@base-ui/utils/useTimeout';
-import { ScrollAreaRootContext } from "./ScrollAreaRootContext.js";
-import { useRenderElement } from "../../internals/useRenderElement.js";
-import { ScrollAreaRootCssVars } from "./ScrollAreaRootCssVars.js";
-import { SCROLL_TIMEOUT } from "../constants.js";
-import { getOffset } from "../utils/getOffset.js";
-import { ScrollAreaScrollbarDataAttributes } from "../scrollbar/ScrollAreaScrollbarDataAttributes.js";
-import { styleDisableScrollbar } from "../../utils/styles.js";
-import { useBaseUiId } from "../../internals/useBaseUiId.js";
-import { scrollAreaStateAttributesMapping } from "./stateAttributes.js";
-import { contains } from "../../floating-ui-react/utils.js";
-import { useCSPContext } from "../../internals/csp-context/CSPContext.js";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_COORDS = {
-  x: 0,
-  y: 0
-};
-const DEFAULT_SIZE = {
-  width: 0,
-  height: 0
-};
-const DEFAULT_OVERFLOW_EDGES = {
-  xStart: false,
-  xEnd: false,
-  yStart: false,
-  yEnd: false
-};
-const DEFAULT_HIDDEN_STATE = {
-  x: true,
-  y: true,
-  corner: true
-};
-/**
- * Groups all parts of the scroll area.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
- */
-export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    overflowEdgeThreshold: overflowEdgeThresholdProp,
-    style,
-    ...elementProps
-  } = componentProps;
-  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
-  const rootId = useBaseUiId();
-  const scrollYTimeout = useTimeout();
-  const scrollXTimeout = useTimeout();
-  const {
-    nonce,
-    disableStyleElements
-  } = useCSPContext();
-  const [hovering, setHovering] = React.useState(false);
-  const [scrollingX, setScrollingX] = React.useState(false);
-  const [scrollingY, setScrollingY] = React.useState(false);
-  const [touchModality, setTouchModality] = React.useState(false);
-  const [hasMeasuredScrollbar, setHasMeasuredScrollbar] = React.useState(false);
-  const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
-  const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
-  const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
-  const [hiddenState, setHiddenState] = React.useState(DEFAULT_HIDDEN_STATE);
-  const rootRef = React.useRef(null);
-  const viewportRef = React.useRef(null);
-  const scrollbarYRef = React.useRef(null);
-  const scrollbarXRef = React.useRef(null);
-  const thumbYRef = React.useRef(null);
-  const thumbXRef = React.useRef(null);
-  const cornerRef = React.useRef(null);
-  const thumbDraggingRef = React.useRef(false);
-  const startYRef = React.useRef(0);
-  const startXRef = React.useRef(0);
-  const startScrollTopRef = React.useRef(0);
-  const startScrollLeftRef = React.useRef(0);
-  const currentOrientationRef = React.useRef('vertical');
-  const scrollPositionRef = React.useRef(DEFAULT_COORDS);
-  const handleScroll = useStableCallback(scrollPosition => {
-    const offsetX = scrollPosition.x - scrollPositionRef.current.x;
-    const offsetY = scrollPosition.y - scrollPositionRef.current.y;
-    scrollPositionRef.current = scrollPosition;
-    if (offsetY !== 0) {
-      setScrollingY(true);
-      scrollYTimeout.start(SCROLL_TIMEOUT, () => {
-        setScrollingY(false);
-      });
-    }
-    if (offsetX !== 0) {
-      setScrollingX(true);
-      scrollXTimeout.start(SCROLL_TIMEOUT, () => {
-        setScrollingX(false);
-      });
-    }
-  });
-  const handlePointerDown = useStableCallback(event => {
-    if (event.button !== 0) {
-      return;
-    }
-    thumbDraggingRef.current = true;
-    startYRef.current = event.clientY;
-    startXRef.current = event.clientX;
-    currentOrientationRef.current = event.currentTarget.getAttribute(ScrollAreaScrollbarDataAttributes.orientation);
-    if (viewportRef.current) {
-      startScrollTopRef.current = viewportRef.current.scrollTop;
-      startScrollLeftRef.current = viewportRef.current.scrollLeft;
-    }
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
-      thumbYRef.current.setPointerCapture(event.pointerId);
-    }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
-      thumbXRef.current.setPointerCapture(event.pointerId);
-    }
-  });
-  const handlePointerMove = useStableCallback(event => {
-    if (!thumbDraggingRef.current) {
-      return;
-    }
-    const deltaY = event.clientY - startYRef.current;
-    const deltaX = event.clientX - startXRef.current;
-    if (viewportRef.current) {
-      const scrollableContentHeight = viewportRef.current.scrollHeight;
-      const viewportHeight = viewportRef.current.clientHeight;
-      const scrollableContentWidth = viewportRef.current.scrollWidth;
-      const viewportWidth = viewportRef.current.clientWidth;
-      if (thumbYRef.current && scrollbarYRef.current && currentOrientationRef.current === 'vertical') {
-        const scrollbarYOffset = getOffset(scrollbarYRef.current, 'padding', 'y');
-        const thumbYOffset = getOffset(thumbYRef.current, 'margin', 'y');
-        const thumbHeight = thumbYRef.current.offsetHeight;
-        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
-        const scrollRatioY = deltaY / maxThumbOffsetY;
-        viewportRef.current.scrollTop = startScrollTopRef.current + scrollRatioY * (scrollableContentHeight - viewportHeight);
-        event.preventDefault();
-        setScrollingY(true);
-        scrollYTimeout.start(SCROLL_TIMEOUT, () => {
-          setScrollingY(false);
-        });
-      }
-      if (thumbXRef.current && scrollbarXRef.current && currentOrientationRef.current === 'horizontal') {
-        const scrollbarXOffset = getOffset(scrollbarXRef.current, 'padding', 'x');
-        const thumbXOffset = getOffset(thumbXRef.current, 'margin', 'x');
-        const thumbWidth = thumbXRef.current.offsetWidth;
-        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
-        const scrollRatioX = deltaX / maxThumbOffsetX;
-        viewportRef.current.scrollLeft = startScrollLeftRef.current + scrollRatioX * (scrollableContentWidth - viewportWidth);
-        event.preventDefault();
-        setScrollingX(true);
-        scrollXTimeout.start(SCROLL_TIMEOUT, () => {
-          setScrollingX(false);
-        });
-      }
-    }
-  });
-  const handlePointerUp = useStableCallback(event => {
-    thumbDraggingRef.current = false;
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
-      thumbYRef.current.releasePointerCapture(event.pointerId);
-    }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
-      thumbXRef.current.releasePointerCapture(event.pointerId);
-    }
-  });
-  function handleTouchModalityChange(event) {
-    setTouchModality(event.pointerType === 'touch');
-  }
-  function handlePointerEnterOrMove(event) {
-    handleTouchModalityChange(event);
-    if (event.pointerType !== 'touch') {
-      const isTargetRootChild = contains(rootRef.current, event.target);
-      setHovering(isTargetRootChild);
-    }
-  }
-  const state = React.useMemo(() => ({
-    scrolling: scrollingX || scrollingY,
-    hasOverflowX: !hiddenState.x,
-    hasOverflowY: !hiddenState.y,
-    overflowXStart: overflowEdges.xStart,
-    overflowXEnd: overflowEdges.xEnd,
-    overflowYStart: overflowEdges.yStart,
-    overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.corner
-  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
-  const props = {
-    role: 'presentation',
-    onPointerEnter: handlePointerEnterOrMove,
-    onPointerMove: handlePointerEnterOrMove,
-    onPointerDown: handleTouchModalityChange,
-    onPointerLeave() {
-      setHovering(false);
-    },
-    style: {
-      position: 'relative',
-      [ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.height}px`,
-      [ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.width}px`
-    }
-  };
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, rootRef],
-    props: [props, elementProps],
-    stateAttributesMapping: scrollAreaStateAttributesMapping
-  });
-  const contextValue = React.useMemo(() => ({
-    handlePointerDown,
-    handlePointerMove,
-    handlePointerUp,
-    handleScroll,
-    cornerSize,
-    setCornerSize,
-    thumbSize,
-    setThumbSize,
-    hasMeasuredScrollbar,
-    setHasMeasuredScrollbar,
-    touchModality,
-    cornerRef,
-    scrollingX,
-    setScrollingX,
-    scrollingY,
-    setScrollingY,
-    hovering,
-    setHovering,
-    viewportRef,
-    rootRef,
-    scrollbarYRef,
-    scrollbarXRef,
-    thumbYRef,
-    thumbXRef,
-    rootId,
-    hiddenState,
-    setHiddenState,
-    overflowEdges,
-    setOverflowEdges,
-    viewportState: state,
-    overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
-  return /*#__PURE__*/_jsxs(ScrollAreaRootContext.Provider, {
-    value: contextValue,
-    children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]
-  });
-});
-if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";
-function normalizeOverflowEdgeThreshold(threshold) {
-  if (typeof threshold === 'number') {
-    const value = Math.max(0, threshold);
-    return {
-      xStart: value,
-      xEnd: value,
-      yStart: value,
-      yEnd: value
-    };
-  }
-  return {
-    xStart: Math.max(0, threshold?.xStart || 0),
-    xEnd: Math.max(0, threshold?.xEnd || 0),
-    yStart: Math.max(0, threshold?.yStart || 0),
-    yEnd: Math.max(0, threshold?.yEnd || 0)
-  };
-}

package/esm/scroll-area/root/ScrollAreaRootContext.d.ts

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import type { Coords, HiddenState, OverflowEdges, Size, ScrollAreaRootState } from "./ScrollAreaRoot.js";
-export interface ScrollAreaRootContext {
-  cornerSize: Size;
-  setCornerSize: React.Dispatch<React.SetStateAction<Size>>;
-  thumbSize: Size;
-  setThumbSize: React.Dispatch<React.SetStateAction<Size>>;
-  hasMeasuredScrollbar: boolean;
-  setHasMeasuredScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
-  touchModality: boolean;
-  hovering: boolean;
-  setHovering: React.Dispatch<React.SetStateAction<boolean>>;
-  scrollingX: boolean;
-  setScrollingX: React.Dispatch<React.SetStateAction<boolean>>;
-  scrollingY: boolean;
-  setScrollingY: React.Dispatch<React.SetStateAction<boolean>>;
-  viewportRef: React.RefObject<HTMLDivElement | null>;
-  rootRef: React.RefObject<HTMLDivElement | null>;
-  scrollbarYRef: React.RefObject<HTMLDivElement | null>;
-  thumbYRef: React.RefObject<HTMLDivElement | null>;
-  scrollbarXRef: React.RefObject<HTMLDivElement | null>;
-  thumbXRef: React.RefObject<HTMLDivElement | null>;
-  cornerRef: React.RefObject<HTMLDivElement | null>;
-  handlePointerDown: (event: React.PointerEvent) => void;
-  handlePointerMove: (event: React.PointerEvent) => void;
-  handlePointerUp: (event: React.PointerEvent) => void;
-  handleScroll: (scrollPosition: Coords) => void;
-  rootId: string | undefined;
-  hiddenState: HiddenState;
-  setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;
-  overflowEdges: OverflowEdges;
-  setOverflowEdges: React.Dispatch<React.SetStateAction<OverflowEdges>>;
-  viewportState: ScrollAreaRootState;
-  overflowEdgeThreshold: {
-    xStart: number;
-    xEnd: number;
-    yStart: number;
-    yEnd: number;
-  };
-}
-export declare const ScrollAreaRootContext: React.Context<ScrollAreaRootContext | undefined>;
-export declare function useScrollAreaRootContext(): ScrollAreaRootContext;

package/esm/scroll-area/root/stateAttributes.d.ts

@@ -1,3 +0,0 @@
-import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
-import type { ScrollAreaRootState } from "./ScrollAreaRoot.js";
-export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRootState>;

package/esm/scroll-area/root/stateAttributes.js

@@ -1,22 +0,0 @@
-import { ScrollAreaRootDataAttributes } from "./ScrollAreaRootDataAttributes.js";
-export const scrollAreaStateAttributesMapping = {
-  hasOverflowX: value => value ? {
-    [ScrollAreaRootDataAttributes.hasOverflowX]: ''
-  } : null,
-  hasOverflowY: value => value ? {
-    [ScrollAreaRootDataAttributes.hasOverflowY]: ''
-  } : null,
-  overflowXStart: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowXStart]: ''
-  } : null,
-  overflowXEnd: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowXEnd]: ''
-  } : null,
-  overflowYStart: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowYStart]: ''
-  } : null,
-  overflowYEnd: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowYEnd]: ''
-  } : null,
-  cornerHidden: () => null
-};

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.d.ts

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import type { BaseUIComponentProps } from "../../internals/types.js";
-import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
-/**
- * A vertical or horizontal scrollbar for the scroll area.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
- */
-export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaScrollbarState extends ScrollAreaRootState {
-  /**
-   * Whether the scroll area is being hovered.
-   */
-  hovering: boolean;
-  /**
-   * Whether the scroll area is being scrolled.
-   */
-  scrolling: boolean;
-  /**
-   * The orientation of the scrollbar.
-   */
-  orientation: 'vertical' | 'horizontal';
-}
-export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbarState> {
-  /**
-   * Whether the scrollbar controls vertical or horizontal scroll.
-   * @default 'vertical'
-   */
-  orientation?: 'vertical' | 'horizontal' | undefined;
-  /**
-   * Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
-   * @default false
-   */
-  keepMounted?: boolean | undefined;
-}
-export declare namespace ScrollAreaScrollbar {
-  type State = ScrollAreaScrollbarState;
-  type Props = ScrollAreaScrollbarProps;
-}