@msviderok/base-ui-solid 1.0.0-beta.1

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

@@ -0,0 +1,43 @@
+import { onCleanup, onMount } from 'solid-js';
+import { splitComponentProps } from "../../solid-helpers.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useScrollAreaViewportContext } from "../viewport/ScrollAreaViewportContext.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)
+ */
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function ScrollAreaContent(componentProps) {
+  const [,, elementProps] = splitComponentProps(componentProps, []);
+  let contentWrapperRef;
+  const context = useScrollAreaViewportContext();
+  onMount(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const ro = new ResizeObserver(context.computeThumbPosition);
+    if (contentWrapperRef) {
+      ro.observe(contentWrapperRef);
+    }
+    onCleanup(() => {
+      ro.disconnect();
+    });
+  });
+  const element = useRenderElement('div', componentProps, {
+    ref: el => {
+      contentWrapperRef = el;
+    },
+    props: [{
+      role: 'presentation',
+      style: {
+        'min-width': 'fit-content'
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: element()
+  });
+}

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

@@ -0,0 +1,13 @@
+import { type JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/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 function ScrollAreaCorner(componentProps: ScrollAreaCorner.Props): JSX.Element;
+export declare namespace ScrollAreaCorner {
+  interface State {}
+  interface Props extends BaseUIComponentProps<'div', State> {}
+}

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

@@ -0,0 +1,36 @@
+import { Show } from 'solid-js';
+import { splitComponentProps } from "../../solid-helpers.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.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)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ScrollAreaCorner(componentProps) {
+  const [,, elementProps] = splitComponentProps(componentProps, []);
+  const context = useScrollAreaRootContext();
+  const element = useRenderElement('div', componentProps, {
+    ref: el => {
+      context.refs.cornerRef = el;
+    },
+    props: [{
+      get style() {
+        return {
+          position: 'absolute',
+          bottom: 0,
+          'inset-inline-end': 0,
+          width: `${context.cornerSize.width}px`,
+          height: `${context.cornerSize.height}px`
+        };
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(Show, {
+    when: !context.hiddenState.cornerHidden,
+    children: element()
+  });
+}

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

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

package/esm/scroll-area/index.js

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

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,13 @@
+import { type JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * 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 function ScrollAreaRoot(componentProps: ScrollAreaRoot.Props): JSX.Element;
+export declare namespace ScrollAreaRoot {
+  interface Props extends BaseUIComponentProps<'div', State> {}
+  interface State {}
+}

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

@@ -0,0 +1,205 @@
+import { createSignal, onCleanup, onMount } from 'solid-js';
+import { createStore } from 'solid-js/store';
+import { splitComponentProps } from "../../solid-helpers.js";
+import { STYLE_TAG_ID, styleDisableScrollbar } from "../../utils/styles.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useTimeout } from "../../utils/useTimeout.js";
+import { SCROLL_TIMEOUT } from "../constants.js";
+import { ScrollAreaScrollbarDataAttributes } from "../scrollbar/ScrollAreaScrollbarDataAttributes.js";
+import { getOffset } from "../utils/getOffset.js";
+import { ScrollAreaRootContext } from "./ScrollAreaRootContext.js";
+import { ScrollAreaRootCssVars } from "./ScrollAreaRootCssVars.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 function ScrollAreaRoot(componentProps) {
+  const [,, elementProps] = splitComponentProps(componentProps, []);
+  const [hovering, setHovering] = createSignal(false);
+  const [scrollingX, setScrollingX] = createSignal(false);
+  const [scrollingY, setScrollingY] = createSignal(false);
+  const [cornerSize, setCornerSize] = createStore({
+    width: 0,
+    height: 0
+  });
+  const [thumbSize, setThumbSize] = createStore({
+    width: 0,
+    height: 0
+  });
+  const [touchModality, setTouchModality] = createSignal(false);
+  const rootId = useBaseUiId();
+  const refs = {
+    viewportRef: null,
+    scrollbarYRef: null,
+    scrollbarXRef: null,
+    thumbYRef: null,
+    thumbXRef: null,
+    cornerRef: null
+  };
+  const [scrollPositionRef, setScrollPositionRef] = createSignal({
+    x: 0,
+    y: 0
+  });
+  let thumbDraggingRef = false;
+  let startYRef = 0;
+  let startXRef = 0;
+  let startScrollTopRef = 0;
+  let startScrollLeftRef = 0;
+  let currentOrientationRef = 'vertical';
+  const scrollYTimeout = useTimeout();
+  const scrollXTimeout = useTimeout();
+  const [hiddenState, setHiddenState] = createStore({
+    scrollbarYHidden: false,
+    scrollbarXHidden: false,
+    get cornerHidden() {
+      return this.scrollbarYHidden || this.scrollbarXHidden;
+    }
+  });
+  function handleScroll(scrollPosition) {
+    const offsetX = scrollPosition.x - scrollPositionRef().x;
+    const offsetY = scrollPosition.y - scrollPositionRef().y;
+    setScrollPositionRef(scrollPosition);
+    if (offsetY !== 0) {
+      setScrollingY(true);
+      scrollYTimeout.start(SCROLL_TIMEOUT, () => {
+        setScrollingY(false);
+      });
+    }
+    if (offsetX !== 0) {
+      setScrollingX(true);
+      scrollXTimeout.start(SCROLL_TIMEOUT, () => {
+        setScrollingX(false);
+      });
+    }
+  }
+  function handlePointerDown(event) {
+    thumbDraggingRef = true;
+    startYRef = event.clientY;
+    startXRef = event.clientX;
+    currentOrientationRef = event.currentTarget.getAttribute(ScrollAreaScrollbarDataAttributes.orientation);
+    if (refs.viewportRef) {
+      startScrollTopRef = refs.viewportRef.scrollTop;
+      startScrollLeftRef = refs.viewportRef.scrollLeft;
+    }
+    if (refs.thumbYRef && currentOrientationRef === 'vertical') {
+      refs.thumbYRef.setPointerCapture(event.pointerId);
+    }
+    if (refs.thumbXRef && currentOrientationRef === 'horizontal') {
+      refs.thumbXRef.setPointerCapture(event.pointerId);
+    }
+  }
+  function handlePointerMove(event) {
+    if (!thumbDraggingRef) {
+      return;
+    }
+    const deltaY = event.clientY - startYRef;
+    const deltaX = event.clientX - startXRef;
+    if (refs.viewportRef) {
+      const scrollableContentHeight = refs.viewportRef.scrollHeight;
+      const viewportHeight = refs.viewportRef.clientHeight;
+      const scrollableContentWidth = refs.viewportRef.scrollWidth;
+      const viewportWidth = refs.viewportRef.clientWidth;
+      if (refs.thumbYRef && refs.scrollbarYRef && currentOrientationRef === 'vertical') {
+        const scrollbarYOffset = getOffset(refs.scrollbarYRef, 'padding', 'y');
+        const thumbYOffset = getOffset(refs.thumbYRef, 'margin', 'y');
+        const thumbHeight = refs.thumbYRef.offsetHeight;
+        const maxThumbOffsetY = refs.scrollbarYRef.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+        const scrollRatioY = deltaY / maxThumbOffsetY;
+        refs.viewportRef.scrollTop = startScrollTopRef + scrollRatioY * (scrollableContentHeight - viewportHeight);
+        event.preventDefault();
+        setScrollingY(true);
+        scrollYTimeout.start(SCROLL_TIMEOUT, () => {
+          setScrollingY(false);
+        });
+      }
+      if (refs.thumbXRef && refs.scrollbarXRef && currentOrientationRef === 'horizontal') {
+        const scrollbarXOffset = getOffset(refs.scrollbarXRef, 'padding', 'x');
+        const thumbXOffset = getOffset(refs.thumbXRef, 'margin', 'x');
+        const thumbWidth = refs.thumbXRef.offsetWidth;
+        const maxThumbOffsetX = refs.scrollbarXRef.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+        const scrollRatioX = deltaX / maxThumbOffsetX;
+        refs.viewportRef.scrollLeft = startScrollLeftRef + scrollRatioX * (scrollableContentWidth - viewportWidth);
+        event.preventDefault();
+        setScrollingX(true);
+        scrollXTimeout.start(SCROLL_TIMEOUT, () => {
+          setScrollingX(false);
+        });
+      }
+    }
+  }
+  function handlePointerUp(event) {
+    thumbDraggingRef = false;
+    if (refs.thumbYRef && currentOrientationRef === 'vertical') {
+      refs.thumbYRef.releasePointerCapture(event.pointerId);
+    }
+    if (refs.thumbXRef && currentOrientationRef === 'horizontal') {
+      refs.thumbXRef.releasePointerCapture(event.pointerId);
+    }
+  }
+  function handlePointerEnterOrMove(event) {
+    const isTouch = event.pointerType === 'touch';
+    setTouchModality(isTouch);
+    if (!isTouch) {
+      setHovering(true);
+    }
+  }
+  const contextValue = {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleScroll,
+    cornerSize,
+    setCornerSize,
+    thumbSize,
+    setThumbSize,
+    touchModality,
+    refs,
+    scrollingX,
+    setScrollingX,
+    scrollingY,
+    setScrollingY,
+    hovering,
+    setHovering,
+    rootId,
+    hiddenState,
+    setHiddenState
+  };
+  onMount(() => {
+    if (!document.head.getElementsByTagName('style').namedItem(STYLE_TAG_ID)) {
+      document.head.appendChild(styleDisableScrollbar.element);
+    }
+    onCleanup(() => {
+      if (document.head.getElementsByTagName('style').namedItem(STYLE_TAG_ID)) {
+        document.head.removeChild(styleDisableScrollbar.element);
+      }
+    });
+  });
+  const element = useRenderElement('div', componentProps, {
+    props: [{
+      role: 'presentation',
+      onPointerEnter: handlePointerEnterOrMove,
+      onPointerMove: handlePointerEnterOrMove,
+      onPointerDown(event) {
+        setTouchModality(event.pointerType === 'touch');
+      },
+      onPointerLeave() {
+        setHovering(false);
+      },
+      get style() {
+        return {
+          position: 'relative',
+          [ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.height}px`,
+          [ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.width}px`
+        };
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(ScrollAreaRootContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

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

@@ -0,0 +1,54 @@
+import { type Accessor, type Setter } from 'solid-js';
+import type { SetStoreFunction, Store } from 'solid-js/store';
+export interface ScrollAreaRootContext {
+  cornerSize: Store<{
+    width: number;
+    height: number;
+  }>;
+  setCornerSize: SetStoreFunction<{
+    width: number;
+    height: number;
+  }>;
+  thumbSize: Store<{
+    width: number;
+    height: number;
+  }>;
+  setThumbSize: SetStoreFunction<{
+    width: number;
+    height: number;
+  }>;
+  touchModality: Accessor<boolean>;
+  hovering: Accessor<boolean>;
+  setHovering: Setter<boolean>;
+  scrollingX: Accessor<boolean>;
+  setScrollingX: Setter<boolean>;
+  scrollingY: Accessor<boolean>;
+  setScrollingY: Setter<boolean>;
+  refs: {
+    viewportRef: HTMLDivElement | null | undefined;
+    scrollbarYRef: HTMLDivElement | null | undefined;
+    scrollbarXRef: HTMLDivElement | null | undefined;
+    thumbYRef: HTMLDivElement | null | undefined;
+    thumbXRef: HTMLDivElement | null | undefined;
+    cornerRef: HTMLDivElement | null | undefined;
+  };
+  handlePointerDown: (event: PointerEvent) => void;
+  handlePointerMove: (event: PointerEvent) => void;
+  handlePointerUp: (event: PointerEvent) => void;
+  handleScroll: (scrollPosition: {
+    x: number;
+    y: number;
+  }) => void;
+  rootId: Accessor<string | undefined>;
+  hiddenState: Store<{
+    scrollbarYHidden: boolean;
+    scrollbarXHidden: boolean;
+    cornerHidden: boolean;
+  }>;
+  setHiddenState: SetStoreFunction<{
+    scrollbarYHidden: boolean;
+    scrollbarXHidden: boolean;
+  }>;
+}
+export declare const ScrollAreaRootContext: import("solid-js").Context<ScrollAreaRootContext | undefined>;
+export declare function useScrollAreaRootContext(): ScrollAreaRootContext;

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

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'solid-js';
+export const ScrollAreaRootContext = createContext();
+export function useScrollAreaRootContext() {
+  const context = useContext(ScrollAreaRootContext);
+  if (context === undefined) {
+    throw new Error('Base UI: ScrollAreaRootContext is missing. ScrollArea parts must be placed within <ScrollArea.Root>.');
+  }
+  return context;
+}

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

@@ -0,0 +1,12 @@
+export declare enum ScrollAreaRootCssVars {
+  /**
+   * The scroll area's corner height.
+   * @type {number}
+   */
+  scrollAreaCornerHeight = "--scroll-area-corner-height",
+  /**
+   * The scroll area's corner width.
+   * @type {number}
+   */
+  scrollAreaCornerWidth = "--scroll-area-corner-width",
+}

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

@@ -0,0 +1,13 @@
+export let ScrollAreaRootCssVars = /*#__PURE__*/function (ScrollAreaRootCssVars) {
+  /**
+   * The scroll area's corner height.
+   * @type {number}
+   */
+  ScrollAreaRootCssVars["scrollAreaCornerHeight"] = "--scroll-area-corner-height";
+  /**
+   * The scroll area's corner width.
+   * @type {number}
+   */
+  ScrollAreaRootCssVars["scrollAreaCornerWidth"] = "--scroll-area-corner-width";
+  return ScrollAreaRootCssVars;
+}({});

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

@@ -0,0 +1,28 @@
+import { type JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/types.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 function ScrollAreaScrollbar(componentProps: ScrollAreaScrollbar.Props): JSX.Element;
+export declare namespace ScrollAreaScrollbar {
+  interface State {
+    hovering: boolean;
+    scrolling: boolean;
+    orientation: 'vertical' | 'horizontal';
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * Whether the scrollbar controls vertical or horizontal scroll.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
+}

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -0,0 +1,175 @@
+import { createEffect, onCleanup, Show } from 'solid-js';
+import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { splitComponentProps } from "../../solid-helpers.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
+import { ScrollAreaRootCssVars } from "../root/ScrollAreaRootCssVars.js";
+import { getOffset } from "../utils/getOffset.js";
+import { ScrollAreaScrollbarContext } from "./ScrollAreaScrollbarContext.js";
+import { ScrollAreaScrollbarCssVars } from "./ScrollAreaScrollbarCssVars.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)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ScrollAreaScrollbar(componentProps) {
+  const [, local, elementProps] = splitComponentProps(componentProps, ['orientation', 'keepMounted']);
+  const orientation = () => local.orientation ?? 'vertical';
+  const keepMounted = () => local.keepMounted ?? false;
+  const context = useScrollAreaRootContext();
+  const state = {
+    get hovering() {
+      return context.hovering();
+    },
+    get scrolling() {
+      return {
+        horizontal: context.scrollingX(),
+        vertical: context.scrollingY()
+      }[orientation()];
+    },
+    get orientation() {
+      return orientation();
+    }
+  };
+  const direction = useDirection();
+  createEffect(() => {
+    const viewportEl = context.refs.viewportRef;
+    const scrollbarEl = orientation() === 'vertical' ? context.refs.scrollbarYRef : context.refs.scrollbarXRef;
+    if (!scrollbarEl) {
+      return;
+    }
+    function handleWheel(event) {
+      if (!viewportEl || !scrollbarEl || event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      if (orientation() === 'vertical') {
+        if (viewportEl.scrollTop === 0 && event.deltaY < 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === 0 && event.deltaX < 0) {
+        return;
+      }
+      if (orientation() === 'vertical') {
+        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) {
+        return;
+      }
+      if (orientation() === 'vertical') {
+        viewportEl.scrollTop += event.deltaY;
+      } else {
+        viewportEl.scrollLeft += event.deltaX;
+      }
+    }
+    scrollbarEl.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    onCleanup(() => {
+      scrollbarEl.removeEventListener('wheel', handleWheel);
+    });
+  });
+  const contextValue = {
+    orientation
+  };
+  const isHidden = () => orientation() === 'vertical' ? context.hiddenState.scrollbarYHidden : context.hiddenState.scrollbarXHidden;
+  const shouldRender = () => keepMounted() || !isHidden();
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: el => {
+      if (orientation() === 'vertical') {
+        context.refs.scrollbarYRef = el;
+      } else {
+        context.refs.scrollbarXRef = el;
+      }
+    },
+    props: [{
+      get ['data-id']() {
+        return context.rootId() ? `${context.rootId()}-scrollbar` : undefined;
+      },
+      onPointerDown(event) {
+        // Ignore clicks on thumb
+        if (event.currentTarget !== event.target) {
+          return;
+        }
+        const viewportEl = context.refs.viewportRef;
+        const thumbYEl = context.refs.thumbYRef;
+        const scrollbarYEl = context.refs.scrollbarYRef;
+        const thumbXEl = context.refs.thumbXRef;
+        const scrollbarXEl = context.refs.scrollbarXRef;
+        if (!viewportEl) {
+          return;
+        }
+
+        // Handle Y-axis (vertical) scroll
+        if (thumbYEl && scrollbarYEl && orientation() === 'vertical') {
+          const thumbYOffset = getOffset(thumbYEl, 'margin', 'y');
+          const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y');
+          const thumbHeight = thumbYEl.offsetHeight;
+          const trackRectY = scrollbarYEl.getBoundingClientRect();
+          const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
+          const scrollableContentHeight = viewportEl.scrollHeight;
+          const viewportHeight = viewportEl.clientHeight;
+          const maxThumbOffsetY = scrollbarYEl.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+          const scrollRatioY = clickY / maxThumbOffsetY;
+          const newScrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
+          viewportEl.scrollTop = newScrollTop;
+        }
+        if (thumbXEl && scrollbarXEl && orientation() === 'horizontal') {
+          const thumbXOffset = getOffset(thumbXEl, 'margin', 'x');
+          const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x');
+          const thumbWidth = thumbXEl.offsetWidth;
+          const trackRectX = scrollbarXEl.getBoundingClientRect();
+          const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
+          const scrollableContentWidth = viewportEl.scrollWidth;
+          const viewportWidth = viewportEl.clientWidth;
+          const maxThumbOffsetX = scrollbarXEl.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+          const scrollRatioX = clickX / maxThumbOffsetX;
+          let newScrollLeft;
+          if (direction() === 'rtl') {
+            // In RTL, invert the scroll direction
+            newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+
+            // Adjust for browsers that use negative scrollLeft in RTL
+            if (viewportEl.scrollLeft <= 0) {
+              newScrollLeft = -newScrollLeft;
+            }
+          } else {
+            newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
+          }
+          viewportEl.scrollLeft = newScrollLeft;
+        }
+        context.handlePointerDown(event);
+      },
+      onPointerUp: context.handlePointerUp,
+      get style() {
+        return {
+          position: 'absolute',
+          'touch-action': 'none',
+          ...(orientation() === 'vertical' && {
+            top: 0,
+            bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+            'inset-inline-end': 0,
+            [ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${context.thumbSize.height}px`
+          }),
+          ...(orientation() === 'horizontal' && {
+            'inset-inline-start': 0,
+            'inset-inline-end': `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+            bottom: 0,
+            [ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${context.thumbSize.width}px`
+          })
+        };
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(Show, {
+    when: shouldRender(),
+    children: /*#__PURE__*/_jsx(ScrollAreaScrollbarContext.Provider, {
+      value: contextValue,
+      children: element()
+    })
+  });
+}

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

@@ -0,0 +1,6 @@
+import { type Accessor } from 'solid-js';
+export interface ScrollAreaScrollbarContext {
+  orientation: Accessor<'horizontal' | 'vertical'>;
+}
+export declare const ScrollAreaScrollbarContext: import("solid-js").Context<ScrollAreaScrollbarContext | undefined>;
+export declare function useScrollAreaScrollbarContext(): ScrollAreaScrollbarContext;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbarContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'solid-js';
+export const ScrollAreaScrollbarContext = createContext();
+export function useScrollAreaScrollbarContext() {
+  const context = useContext(ScrollAreaScrollbarContext);
+  if (context === undefined) {
+    throw new Error('Base UI: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>.');
+  }
+  return context;
+}

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

@@ -0,0 +1,12 @@
+export declare enum ScrollAreaScrollbarCssVars {
+  /**
+   * The scroll area thumb's height.
+   * @type {number}
+   */
+  scrollAreaThumbHeight = "--scroll-area-thumb-height",
+  /**
+   * The scroll area thumb's width.
+   * @type {number}
+   */
+  scrollAreaThumbWidth = "--scroll-area-thumb-width",
+}