rigid-ui 0.0.1

package/LICENSE

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

package/README.md

@@ -0,0 +1,25 @@
+# rigid-ui
+
+Unstyled UI components for SolidJS. Based on [Base UI](https://base-ui.com/).
+
+## Components ported
+
+- **ScrollArea** — a container with native scroll and stylable scrollbars.
+
+## Components not ported
+
+- Anything else from BaseUI. I just needed the ScrollArea, but maybe I'll add more later.
+
+## Usage
+
+```typescript
+import { ScrollArea } from "rigid-ui/scroll-area";
+```
+
+## Notes
+
+- I didn't port the `useRender` utility for polymorphic components. The scroll area components are just divs.
+
+## Credits
+
+This project tries to port some of great code from [Base UI](https://base-ui.com/), an unstyled React component library.

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

@@ -0,0 +1,41 @@
+import { ParentProps, JSX } from 'solid-js';
+
+interface ScrollAreaRootProps extends ParentProps<JSX.HTMLAttributes<HTMLDivElement>> {
+    overflowEdgeThreshold?: number | Partial<{
+        xStart: number;
+        xEnd: number;
+        yStart: number;
+        yEnd: number;
+    }>;
+    ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+declare function ScrollAreaRoot(props: ScrollAreaRootProps): JSX.Element;
+
+interface ScrollAreaViewportProps extends ParentProps<JSX.HTMLAttributes<HTMLDivElement>> {
+    ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+declare function ScrollAreaViewport(props: ScrollAreaViewportProps): JSX.Element;
+
+interface ScrollAreaScrollbarProps extends ParentProps<JSX.HTMLAttributes<HTMLDivElement>> {
+    orientation?: "vertical" | "horizontal";
+    keepMounted?: boolean;
+    ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+declare function ScrollAreaScrollbar(props: ScrollAreaScrollbarProps): JSX.Element;
+
+interface ScrollAreaThumbProps extends ParentProps<JSX.HTMLAttributes<HTMLDivElement>> {
+    ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+declare function ScrollAreaThumb(props: ScrollAreaThumbProps): JSX.Element;
+
+interface ScrollAreaContentProps extends ParentProps<JSX.HTMLAttributes<HTMLDivElement>> {
+    ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+declare function ScrollAreaContent(props: ScrollAreaContentProps): JSX.Element;
+
+interface ScrollAreaCornerProps extends ParentProps<JSX.HTMLAttributes<HTMLDivElement>> {
+    ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+declare function ScrollAreaCorner(props: ScrollAreaCornerProps): JSX.Element;
+
+export { ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps };

package/dist/scroll-area/index.js

@@ -0,0 +1,850 @@
+import { createContext, splitProps, createSignal, onCleanup, onMount, createEffect, Show, useContext } from 'solid-js';
+
+// src/scroll-area/root/ScrollAreaRoot.tsx
+var ScrollAreaRootContext = createContext();
+function useScrollAreaRootContext() {
+  const context = useContext(ScrollAreaRootContext);
+  if (context === void 0) {
+    throw new Error("rigid-ui: ScrollArea parts must be placed within <ScrollAreaRoot>.");
+  }
+  return context;
+}
+
+// src/scroll-area/constants.ts
+var SCROLL_TIMEOUT = 500;
+var MIN_THUMB_SIZE = 16;
+
+// src/utils/getOffset.ts
+function getOffset(element, prop, axis) {
+  if (!element) {
+    return 0;
+  }
+  const styles = getComputedStyle(element);
+  const propAxis = axis === "x" ? "Inline" : "Block";
+  if (axis === "x" && prop === "margin") {
+    return parseFloat(styles[`${prop}InlineStart`]) * 2;
+  }
+  return parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`]);
+}
+
+// src/utils/styles.ts
+var DISABLE_SCROLLBAR_CLASS_NAME = "base-ui-disable-scrollbar";
+var STYLE_CONTENT = `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`;
+var styleInjected = false;
+var styleDisableScrollbar = {
+  className: DISABLE_SCROLLBAR_CLASS_NAME,
+  inject() {
+    if (styleInjected || typeof document === "undefined") {
+      return;
+    }
+    const style = document.createElement("style");
+    style.textContent = STYLE_CONTENT;
+    document.head.appendChild(style);
+    styleInjected = true;
+  }
+};
+
+// src/utils/contains.ts
+function isShadowRoot(node) {
+  return node instanceof ShadowRoot;
+}
+function contains(parent, child) {
+  if (!parent || !child) {
+    return false;
+  }
+  const rootNode = child.getRootNode?.();
+  if (parent.contains(child)) {
+    return true;
+  }
+  if (rootNode && isShadowRoot(rootNode)) {
+    let next = child;
+    while (next) {
+      if (parent === next) {
+        return true;
+      }
+      next = next.parentNode || next.host;
+    }
+  }
+  return false;
+}
+var Timeout = class {
+  constructor() {
+    this.id = null;
+  }
+  start(delay, callback) {
+    this.clear();
+    this.id = setTimeout(() => {
+      this.id = null;
+      callback();
+    }, delay);
+  }
+  clear() {
+    if (this.id !== null) {
+      clearTimeout(this.id);
+      this.id = null;
+    }
+  }
+};
+function useTimeout() {
+  const timeout = new Timeout();
+  onCleanup(() => timeout.clear());
+  return timeout;
+}
+
+// src/scroll-area/root/ScrollAreaRoot.tsx
+var DEFAULT_SIZE = { width: 0, height: 0 };
+var DEFAULT_OVERFLOW_EDGES = {
+  xStart: false,
+  xEnd: false,
+  yStart: false,
+  yEnd: false
+};
+var DEFAULT_HIDDEN_STATE = { x: false, y: false, corner: false };
+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)
+  };
+}
+function ScrollAreaRoot(props) {
+  const [local, others] = splitProps(props, ["children", "overflowEdgeThreshold", "ref", "style"]);
+  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(local.overflowEdgeThreshold);
+  const scrollYTimeout = useTimeout();
+  const scrollXTimeout = useTimeout();
+  const [hovering, setHovering] = createSignal(false);
+  const [scrollingX, setScrollingX] = createSignal(false);
+  const [scrollingY, setScrollingY] = createSignal(false);
+  const [cornerSize, setCornerSize] = createSignal(DEFAULT_SIZE);
+  const [thumbSize, setThumbSize] = createSignal(DEFAULT_SIZE);
+  const [overflowEdges, setOverflowEdges] = createSignal(DEFAULT_OVERFLOW_EDGES);
+  const [hiddenState, setHiddenState] = createSignal(DEFAULT_HIDDEN_STATE);
+  let rootRef;
+  let scrollPosition = { x: 0, y: 0 };
+  let thumbDragging = false;
+  let startY = 0;
+  let startX = 0;
+  let startScrollTop = 0;
+  let startScrollLeft = 0;
+  let currentOrientation = "vertical";
+  styleDisableScrollbar.inject();
+  const refs = {
+    viewportRef: void 0,
+    scrollbarYRef: void 0,
+    scrollbarXRef: void 0,
+    thumbYRef: void 0,
+    thumbXRef: void 0,
+    cornerRef: void 0
+  };
+  function handleScroll(pos) {
+    const offsetX = pos.x - scrollPosition.x;
+    const offsetY = pos.y - scrollPosition.y;
+    scrollPosition = pos;
+    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) {
+    if (event.button !== 0) return;
+    thumbDragging = true;
+    startY = event.clientY;
+    startX = event.clientX;
+    currentOrientation = event.currentTarget.getAttribute("data-orientation");
+    if (refs.viewportRef) {
+      startScrollTop = refs.viewportRef.scrollTop;
+      startScrollLeft = refs.viewportRef.scrollLeft;
+    }
+    if (refs.thumbYRef && currentOrientation === "vertical") {
+      refs.thumbYRef.setPointerCapture(event.pointerId);
+    }
+    if (refs.thumbXRef && currentOrientation === "horizontal") {
+      refs.thumbXRef.setPointerCapture(event.pointerId);
+    }
+  }
+  function handlePointerMove(event) {
+    if (!thumbDragging) return;
+    const deltaY = event.clientY - startY;
+    const deltaX = event.clientX - startX;
+    const vp = refs.viewportRef;
+    if (!vp) return;
+    const scrollableH = vp.scrollHeight;
+    const vpH = vp.clientHeight;
+    const scrollableW = vp.scrollWidth;
+    const vpW = vp.clientWidth;
+    if (refs.thumbYRef && refs.scrollbarYRef && currentOrientation === "vertical") {
+      const sbOffset = getOffset(refs.scrollbarYRef, "padding", "y");
+      const thOffset = getOffset(refs.thumbYRef, "margin", "y");
+      const thH = refs.thumbYRef.offsetHeight;
+      const maxOffset = refs.scrollbarYRef.offsetHeight - thH - sbOffset - thOffset;
+      vp.scrollTop = startScrollTop + deltaY / maxOffset * (scrollableH - vpH);
+      event.preventDefault();
+      setScrollingY(true);
+      scrollYTimeout.start(SCROLL_TIMEOUT, () => setScrollingY(false));
+    }
+    if (refs.thumbXRef && refs.scrollbarXRef && currentOrientation === "horizontal") {
+      const sbOffset = getOffset(refs.scrollbarXRef, "padding", "x");
+      const thOffset = getOffset(refs.thumbXRef, "margin", "x");
+      const thW = refs.thumbXRef.offsetWidth;
+      const maxOffset = refs.scrollbarXRef.offsetWidth - thW - sbOffset - thOffset;
+      vp.scrollLeft = startScrollLeft + deltaX / maxOffset * (scrollableW - vpW);
+      event.preventDefault();
+      setScrollingX(true);
+      scrollXTimeout.start(SCROLL_TIMEOUT, () => setScrollingX(false));
+    }
+  }
+  function handlePointerUp(event) {
+    thumbDragging = false;
+    if (refs.thumbYRef && currentOrientation === "vertical") {
+      refs.thumbYRef.releasePointerCapture(event.pointerId);
+    }
+    if (refs.thumbXRef && currentOrientation === "horizontal") {
+      refs.thumbXRef.releasePointerCapture(event.pointerId);
+    }
+  }
+  function handlePointerEnterOrMove(event) {
+    if (event.pointerType !== "touch") {
+      setHovering(contains(rootRef, event.target));
+    }
+  }
+  const contextValue = {
+    cornerSize,
+    setCornerSize,
+    thumbSize,
+    setThumbSize,
+    hovering,
+    setHovering,
+    scrollingX,
+    setScrollingX,
+    scrollingY,
+    setScrollingY,
+    hiddenState,
+    setHiddenState,
+    overflowEdges,
+    setOverflowEdges,
+    overflowEdgeThreshold,
+    // Refs are read/written directly by child components
+    get viewportRef() {
+      return refs.viewportRef;
+    },
+    set viewportRef(el) {
+      refs.viewportRef = el;
+    },
+    get scrollbarYRef() {
+      return refs.scrollbarYRef;
+    },
+    set scrollbarYRef(el) {
+      refs.scrollbarYRef = el;
+    },
+    get scrollbarXRef() {
+      return refs.scrollbarXRef;
+    },
+    set scrollbarXRef(el) {
+      refs.scrollbarXRef = el;
+    },
+    get thumbYRef() {
+      return refs.thumbYRef;
+    },
+    set thumbYRef(el) {
+      refs.thumbYRef = el;
+    },
+    get thumbXRef() {
+      return refs.thumbXRef;
+    },
+    set thumbXRef(el) {
+      refs.thumbXRef = el;
+    },
+    get cornerRef() {
+      return refs.cornerRef;
+    },
+    set cornerRef(el) {
+      refs.cornerRef = el;
+    },
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleScroll
+  };
+  const mergedStyle = () => {
+    const base = {
+      position: "relative",
+      overflow: "hidden",
+      ["--scroll-area-corner-height" /* scrollAreaCornerHeight */]: `${cornerSize().height}px`,
+      ["--scroll-area-corner-width" /* scrollAreaCornerWidth */]: `${cornerSize().width}px`
+    };
+    if (typeof local.style === "object" && local.style) {
+      return { ...base, ...local.style };
+    }
+    return base;
+  };
+  return /* @__PURE__ */ React.createElement(ScrollAreaRootContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: (el) => {
+        rootRef = el;
+        if (typeof local.ref === "function") local.ref(el);
+      },
+      role: "presentation",
+      onPointerEnter: handlePointerEnterOrMove,
+      onPointerMove: handlePointerEnterOrMove,
+      onPointerLeave: () => setHovering(false),
+      style: mergedStyle(),
+      "data-scrolling": scrollingX() || scrollingY() ? "" : void 0,
+      "data-has-overflow-x": !hiddenState().x ? "" : void 0,
+      "data-has-overflow-y": !hiddenState().y ? "" : void 0,
+      "data-overflow-x-start": overflowEdges().xStart ? "" : void 0,
+      "data-overflow-x-end": overflowEdges().xEnd ? "" : void 0,
+      "data-overflow-y-start": overflowEdges().yStart ? "" : void 0,
+      "data-overflow-y-end": overflowEdges().yEnd ? "" : void 0,
+      ...others
+    },
+    local.children
+  ));
+}
+
+// src/utils/detectBrowser.ts
+var isWebKit = typeof CSS === "undefined" || !CSS.supports ? false : CSS.supports("-webkit-backdrop-filter:none");
+var ScrollAreaViewportContext = createContext();
+function useScrollAreaViewportContext() {
+  const context = useContext(ScrollAreaViewportContext);
+  if (context === void 0) {
+    throw new Error(
+      "rigid-ui: ScrollAreaViewportContext missing. ScrollAreaViewport parts must be placed within <ScrollArea.Viewport>."
+    );
+  }
+  return context;
+}
+
+// src/utils/clamp.ts
+function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+  return Math.max(min, Math.min(val, max));
+}
+
+// src/utils/onVisible.ts
+function onVisible(element, callback) {
+  if (typeof IntersectionObserver === "undefined") {
+    return () => {
+    };
+  }
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.intersectionRatio > 0) {
+        callback();
+        observer.disconnect();
+      }
+    });
+  });
+  observer.observe(element);
+  return () => {
+    observer.disconnect();
+  };
+}
+
+// src/scroll-area/viewport/ScrollAreaViewport.tsx
+var scrollAreaOverflowVarsRegistered = false;
+function removeCSSVariableInheritance() {
+  if (scrollAreaOverflowVarsRegistered || isWebKit) {
+    return;
+  }
+  if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
+    [
+      "--scroll-area-overflow-x-start" /* scrollAreaOverflowXStart */,
+      "--scroll-area-overflow-x-end" /* scrollAreaOverflowXEnd */,
+      "--scroll-area-overflow-y-start" /* scrollAreaOverflowYStart */,
+      "--scroll-area-overflow-y-end" /* scrollAreaOverflowYEnd */
+    ].forEach((name) => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: "<length>",
+          inherits: false,
+          initialValue: "0px"
+        });
+      } catch {
+      }
+    });
+  }
+  scrollAreaOverflowVarsRegistered = true;
+}
+function ScrollAreaViewport(props) {
+  const [local, others] = splitProps(props, ["children", "ref", "class", "style"]);
+  const ctx = useScrollAreaRootContext();
+  let programmaticScroll = true;
+  const scrollEndTimeout = new Timeout();
+  const waitForAnimationsTimeout = new Timeout();
+  onCleanup(() => {
+    scrollEndTimeout.clear();
+    waitForAnimationsTimeout.clear();
+  });
+  function computeThumbPosition() {
+    const viewportEl = ctx.viewportRef;
+    const scrollbarYEl = ctx.scrollbarYRef;
+    const scrollbarXEl = ctx.scrollbarXRef;
+    const thumbYEl = ctx.thumbYRef;
+    const thumbXEl = ctx.thumbXRef;
+    const cornerEl = ctx.cornerRef;
+    if (!viewportEl) return;
+    const scrollableContentHeight = viewportEl.scrollHeight;
+    const scrollableContentWidth = viewportEl.scrollWidth;
+    const viewportHeight = viewportEl.clientHeight;
+    const viewportWidth = viewportEl.clientWidth;
+    const scrollTop = viewportEl.scrollTop;
+    const scrollLeft = viewportEl.scrollLeft;
+    if (scrollableContentHeight === 0 || scrollableContentWidth === 0) return;
+    const scrollbarYHidden = viewportHeight >= scrollableContentHeight;
+    const scrollbarXHidden = viewportWidth >= scrollableContentWidth;
+    const ratioX = viewportWidth / scrollableContentWidth;
+    const ratioY = viewportHeight / scrollableContentHeight;
+    const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth);
+    const maxScrollTop = Math.max(0, scrollableContentHeight - viewportHeight);
+    let scrollLeftFromStart = 0;
+    let scrollLeftFromEnd = 0;
+    if (!scrollbarXHidden) {
+      {
+        scrollLeftFromStart = clamp(scrollLeft, 0, maxScrollLeft);
+      }
+      scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
+    }
+    const scrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
+    const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
+    const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
+    const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
+    let nextCornerWidth = 0;
+    let nextCornerHeight = 0;
+    if (!scrollbarXHidden && !scrollbarYHidden) {
+      nextCornerWidth = scrollbarYEl?.offsetWidth || 0;
+      nextCornerHeight = scrollbarXEl?.offsetHeight || 0;
+    }
+    const cs = ctx.cornerSize();
+    const cornerNotYetSized = cs.width === 0 && cs.height === 0;
+    const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+    const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
+    const scrollbarXOffset = getOffset(scrollbarXEl ?? null, "padding", "x");
+    const scrollbarYOffset = getOffset(scrollbarYEl ?? null, "padding", "y");
+    const thumbXOffset = getOffset(thumbXEl ?? null, "margin", "x");
+    const thumbYOffset = getOffset(thumbYEl ?? null, "margin", "y");
+    const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
+    const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
+    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth;
+    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
+    const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
+    const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
+    ctx.setThumbSize((prevSize) => {
+      if (prevSize.height === clampedNextHeight && prevSize.width === clampedNextWidth) {
+        return prevSize;
+      }
+      return { width: clampedNextWidth, height: clampedNextHeight };
+    });
+    if (scrollbarYEl && thumbYEl) {
+      const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
+      const scrollRangeY = scrollableContentHeight - viewportHeight;
+      const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY;
+      const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+      thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
+    }
+    if (scrollbarXEl && thumbXEl) {
+      const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
+      const scrollRangeX = scrollableContentWidth - viewportWidth;
+      const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeft / scrollRangeX;
+      const thumbOffsetX = clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
+      thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
+    }
+    const clampedScrollLeftStart = clamp(scrollLeftFromStart, 0, maxScrollLeft);
+    const clampedScrollLeftEnd = clamp(scrollLeftFromEnd, 0, maxScrollLeft);
+    const clampedScrollTopStart = clamp(scrollTopFromStart, 0, maxScrollTop);
+    const clampedScrollTopEnd = clamp(scrollTopFromEnd, 0, maxScrollTop);
+    const overflowMetricsPx = [
+      ["--scroll-area-overflow-x-start" /* scrollAreaOverflowXStart */, clampedScrollLeftStart],
+      ["--scroll-area-overflow-x-end" /* scrollAreaOverflowXEnd */, clampedScrollLeftEnd],
+      ["--scroll-area-overflow-y-start" /* scrollAreaOverflowYStart */, clampedScrollTopStart],
+      ["--scroll-area-overflow-y-end" /* scrollAreaOverflowYEnd */, clampedScrollTopEnd]
+    ];
+    for (const [cssVar, value] of overflowMetricsPx) {
+      viewportEl.style.setProperty(cssVar, `${value}px`);
+    }
+    if (cornerEl) {
+      if (scrollbarXHidden || scrollbarYHidden) {
+        ctx.setCornerSize({ width: 0, height: 0 });
+      } else if (!scrollbarXHidden && !scrollbarYHidden) {
+        ctx.setCornerSize({ width: nextCornerWidth, height: nextCornerHeight });
+      }
+    }
+    ctx.setHiddenState((prevState) => {
+      const cornerHidden = scrollbarYHidden || scrollbarXHidden;
+      if (prevState.y === scrollbarYHidden && prevState.x === scrollbarXHidden && prevState.corner === cornerHidden) {
+        return prevState;
+      }
+      return { y: scrollbarYHidden, x: scrollbarXHidden, corner: cornerHidden };
+    });
+    const nextOverflowEdges = {
+      xStart: !scrollbarXHidden && clampedScrollLeftStart > ctx.overflowEdgeThreshold.xStart,
+      xEnd: !scrollbarXHidden && clampedScrollLeftEnd > ctx.overflowEdgeThreshold.xEnd,
+      yStart: !scrollbarYHidden && clampedScrollTopStart > ctx.overflowEdgeThreshold.yStart,
+      yEnd: !scrollbarYHidden && clampedScrollTopEnd > ctx.overflowEdgeThreshold.yEnd
+    };
+    ctx.setOverflowEdges((prev) => {
+      if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) {
+        return prev;
+      }
+      return nextOverflowEdges;
+    });
+  }
+  onMount(() => {
+    const viewportEl = ctx.viewportRef;
+    if (!viewportEl) return;
+    removeCSSVariableInheritance();
+    if (viewportEl.matches(":hover")) {
+      ctx.setHovering(true);
+    }
+    queueMicrotask(computeThumbPosition);
+    let hasInitialized = false;
+    const cleanupVisible = onVisible(viewportEl, () => {
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
+    onCleanup(cleanupVisible);
+    if (typeof ResizeObserver !== "undefined") {
+      let roInitialized = false;
+      const ro = new ResizeObserver(() => {
+        if (!roInitialized) {
+          roInitialized = true;
+          return;
+        }
+        computeThumbPosition();
+      });
+      ro.observe(viewportEl);
+      waitForAnimationsTimeout.start(0, () => {
+        const animations = viewportEl.getAnimations({ subtree: true });
+        if (animations.length === 0) return;
+        Promise.all(animations.map((a) => a.finished)).then(computeThumbPosition).catch(() => {
+        });
+      });
+      onCleanup(() => ro.disconnect());
+    }
+  });
+  createEffect(() => {
+    ctx.hiddenState();
+    queueMicrotask(computeThumbPosition);
+  });
+  function handleUserInteraction() {
+    programmaticScroll = false;
+  }
+  const hs = () => ctx.hiddenState();
+  const mergedClass = () => {
+    const base = styleDisableScrollbar.className;
+    return local.class ? `${base} ${local.class}` : base;
+  };
+  const mergedStyle = () => {
+    const base = {
+      overflow: "scroll",
+      height: "100%"
+    };
+    if (typeof local.style === "object" && local.style) {
+      return { ...base, ...local.style };
+    }
+    return base;
+  };
+  return /* @__PURE__ */ React.createElement(ScrollAreaViewportContext.Provider, { value: { computeThumbPosition } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: (el) => {
+        ctx.viewportRef = el;
+        if (typeof local.ref === "function") local.ref(el);
+      },
+      role: "presentation",
+      tabIndex: !hs().x || !hs().y ? 0 : void 0,
+      class: mergedClass(),
+      onScroll: () => {
+        const viewportEl = ctx.viewportRef;
+        if (!viewportEl) return;
+        computeThumbPosition();
+        if (!programmaticScroll) {
+          ctx.handleScroll({
+            x: viewportEl.scrollLeft,
+            y: viewportEl.scrollTop
+          });
+        }
+        scrollEndTimeout.start(100, () => {
+          programmaticScroll = true;
+        });
+      },
+      onWheel: handleUserInteraction,
+      onTouchMove: handleUserInteraction,
+      onPointerMove: handleUserInteraction,
+      onPointerEnter: handleUserInteraction,
+      onKeyDown: handleUserInteraction,
+      style: mergedStyle(),
+      "data-scrolling": ctx.scrollingX() || ctx.scrollingY() ? "" : void 0,
+      "data-has-overflow-x": !ctx.hiddenState().x ? "" : void 0,
+      "data-has-overflow-y": !ctx.hiddenState().y ? "" : void 0,
+      "data-overflow-x-start": ctx.overflowEdges().xStart ? "" : void 0,
+      "data-overflow-x-end": ctx.overflowEdges().xEnd ? "" : void 0,
+      "data-overflow-y-start": ctx.overflowEdges().yStart ? "" : void 0,
+      "data-overflow-y-end": ctx.overflowEdges().yEnd ? "" : void 0,
+      ...others
+    },
+    local.children
+  ));
+}
+var ScrollAreaScrollbarContext = createContext();
+function useScrollAreaScrollbarContext() {
+  const context = useContext(ScrollAreaScrollbarContext);
+  if (context === void 0) {
+    throw new Error(
+      "rigid-ui: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>."
+    );
+  }
+  return context;
+}
+
+// src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx
+function ScrollAreaScrollbar(props) {
+  const [local, others] = splitProps(props, [
+    "children",
+    "orientation",
+    "keepMounted",
+    "ref",
+    "style"
+  ]);
+  const orientation = () => local.orientation ?? "vertical";
+  const keepMounted = () => local.keepMounted ?? false;
+  const ctx = useScrollAreaRootContext();
+  createEffect(() => {
+    const orient = orientation();
+    const scrollbarEl = orient === "vertical" ? ctx.scrollbarYRef : ctx.scrollbarXRef;
+    const viewportEl = ctx.viewportRef;
+    if (!scrollbarEl) return;
+    function handleWheel(event) {
+      if (!viewportEl || !scrollbarEl || event.ctrlKey) return;
+      event.preventDefault();
+      if (orient === "vertical") {
+        if (viewportEl.scrollTop === 0 && event.deltaY < 0) return;
+        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0)
+          return;
+        viewportEl.scrollTop += event.deltaY;
+      } else {
+        if (viewportEl.scrollLeft === 0 && event.deltaX < 0) return;
+        if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0)
+          return;
+        viewportEl.scrollLeft += event.deltaX;
+      }
+    }
+    scrollbarEl.addEventListener("wheel", handleWheel, { passive: false });
+    onCleanup(() => scrollbarEl.removeEventListener("wheel", handleWheel));
+  });
+  function handleScrollbarPointerDown(event) {
+    if (event.button !== 0) return;
+    if (event.currentTarget !== event.target) return;
+    const viewportEl = ctx.viewportRef;
+    if (!viewportEl) return;
+    const orient = orientation();
+    if (ctx.thumbYRef && ctx.scrollbarYRef && orient === "vertical") {
+      const thumbYOffset = getOffset(ctx.thumbYRef, "margin", "y");
+      const scrollbarYOffset = getOffset(ctx.scrollbarYRef, "padding", "y");
+      const thumbHeight = ctx.thumbYRef.offsetHeight;
+      const trackRectY = ctx.scrollbarYRef.getBoundingClientRect();
+      const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
+      const scrollableContentHeight = viewportEl.scrollHeight;
+      const viewportHeight = viewportEl.clientHeight;
+      const maxThumbOffsetY = ctx.scrollbarYRef.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+      const scrollRatioY = clickY / maxThumbOffsetY;
+      viewportEl.scrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
+    }
+    if (ctx.thumbXRef && ctx.scrollbarXRef && orient === "horizontal") {
+      const thumbXOffset = getOffset(ctx.thumbXRef, "margin", "x");
+      const scrollbarXOffset = getOffset(ctx.scrollbarXRef, "padding", "x");
+      const thumbWidth = ctx.thumbXRef.offsetWidth;
+      const trackRectX = ctx.scrollbarXRef.getBoundingClientRect();
+      const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
+      const scrollableContentWidth = viewportEl.scrollWidth;
+      const viewportWidth = viewportEl.clientWidth;
+      const maxThumbOffsetX = ctx.scrollbarXRef.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+      const scrollRatioX = clickX / maxThumbOffsetX;
+      let newScrollLeft;
+      {
+        newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
+      }
+      viewportEl.scrollLeft = newScrollLeft;
+    }
+    ctx.handlePointerDown(event);
+  }
+  const isHidden = () => orientation() === "vertical" ? ctx.hiddenState().y : ctx.hiddenState().x;
+  const shouldRender = () => keepMounted() || !isHidden();
+  const mergedStyle = () => {
+    const base = {
+      position: "absolute",
+      "touch-action": "none",
+      "-webkit-user-select": "none",
+      "user-select": "none"
+    };
+    if (orientation() === "vertical") {
+      Object.assign(base, {
+        top: "0",
+        bottom: `var(${"--scroll-area-corner-height" /* scrollAreaCornerHeight */})`,
+        "inset-inline-end": "0",
+        ["--scroll-area-thumb-height" /* scrollAreaThumbHeight */]: `${ctx.thumbSize().height}px`
+      });
+    } else {
+      Object.assign(base, {
+        "inset-inline-start": "0",
+        "inset-inline-end": `var(${"--scroll-area-corner-width" /* scrollAreaCornerWidth */})`,
+        bottom: "0",
+        ["--scroll-area-thumb-width" /* scrollAreaThumbWidth */]: `${ctx.thumbSize().width}px`
+      });
+    }
+    if (typeof local.style === "object" && local.style) {
+      return { ...base, ...local.style };
+    }
+    return base;
+  };
+  return /* @__PURE__ */ React.createElement(Show, { when: shouldRender() }, /* @__PURE__ */ React.createElement(ScrollAreaScrollbarContext.Provider, { value: { orientation: orientation() } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: (el) => {
+        if (orientation() === "vertical") {
+          ctx.scrollbarYRef = el;
+        } else {
+          ctx.scrollbarXRef = el;
+        }
+        if (typeof local.ref === "function") local.ref(el);
+      },
+      "data-orientation": orientation(),
+      "data-hovering": ctx.hovering() ? "" : void 0,
+      "data-scrolling": ctx.scrollingX() || ctx.scrollingY() ? "" : void 0,
+      onPointerDown: handleScrollbarPointerDown,
+      onPointerUp: (e) => ctx.handlePointerUp(e),
+      style: mergedStyle(),
+      ...others
+    },
+    local.children
+  )));
+}
+function ScrollAreaThumb(props) {
+  const [local, others] = splitProps(props, ["children", "ref", "style"]);
+  const ctx = useScrollAreaRootContext();
+  const scrollbarCtx = useScrollAreaScrollbarContext();
+  const mergedStyle = () => {
+    const base = scrollbarCtx.orientation === "vertical" ? { height: `var(${"--scroll-area-thumb-height" /* scrollAreaThumbHeight */})` } : { width: `var(${"--scroll-area-thumb-width" /* scrollAreaThumbWidth */})` };
+    if (typeof local.style === "object" && local.style) {
+      return { ...base, ...local.style };
+    }
+    return base;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: (el) => {
+        if (scrollbarCtx.orientation === "vertical") {
+          ctx.thumbYRef = el;
+        } else {
+          ctx.thumbXRef = el;
+        }
+        if (typeof local.ref === "function") local.ref(el);
+      },
+      "data-orientation": scrollbarCtx.orientation,
+      onPointerDown: (e) => ctx.handlePointerDown(e),
+      onPointerMove: (e) => ctx.handlePointerMove(e),
+      onPointerUp: (e) => {
+        if (scrollbarCtx.orientation === "vertical") {
+          ctx.setScrollingY(false);
+        }
+        if (scrollbarCtx.orientation === "horizontal") {
+          ctx.setScrollingX(false);
+        }
+        ctx.handlePointerUp(e);
+      },
+      style: mergedStyle(),
+      ...others
+    },
+    local.children
+  );
+}
+function ScrollAreaContent(props) {
+  const [local, others] = splitProps(props, ["children", "ref", "style"]);
+  const { computeThumbPosition } = useScrollAreaViewportContext();
+  const ctx = useScrollAreaRootContext();
+  let contentRef;
+  onMount(() => {
+    if (typeof ResizeObserver === "undefined" || !contentRef) return;
+    let hasInitialized = false;
+    const ro = new ResizeObserver(() => {
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
+    ro.observe(contentRef);
+    onCleanup(() => ro.disconnect());
+  });
+  const mergedStyle = () => {
+    const base = { "min-width": "fit-content" };
+    if (typeof local.style === "object" && local.style) {
+      return { ...base, ...local.style };
+    }
+    return base;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: (el) => {
+        contentRef = el;
+        if (typeof local.ref === "function") local.ref(el);
+      },
+      role: "presentation",
+      style: mergedStyle(),
+      "data-scrolling": ctx.scrollingX() || ctx.scrollingY() ? "" : void 0,
+      "data-has-overflow-x": !ctx.hiddenState().x ? "" : void 0,
+      "data-has-overflow-y": !ctx.hiddenState().y ? "" : void 0,
+      "data-overflow-x-start": ctx.overflowEdges().xStart ? "" : void 0,
+      "data-overflow-x-end": ctx.overflowEdges().xEnd ? "" : void 0,
+      "data-overflow-y-start": ctx.overflowEdges().yStart ? "" : void 0,
+      "data-overflow-y-end": ctx.overflowEdges().yEnd ? "" : void 0,
+      ...others
+    },
+    local.children
+  );
+}
+function ScrollAreaCorner(props) {
+  const [local, others] = splitProps(props, ["children", "ref", "style"]);
+  const ctx = useScrollAreaRootContext();
+  const mergedStyle = () => {
+    const base = {
+      position: "absolute",
+      bottom: "0",
+      "inset-inline-end": "0",
+      width: `${ctx.cornerSize().width}px`,
+      height: `${ctx.cornerSize().height}px`
+    };
+    if (typeof local.style === "object" && local.style) {
+      return { ...base, ...local.style };
+    }
+    return base;
+  };
+  return /* @__PURE__ */ React.createElement(Show, { when: !ctx.hiddenState().corner }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: (el) => {
+        ctx.cornerRef = el;
+        if (typeof local.ref === "function") local.ref(el);
+      },
+      style: mergedStyle(),
+      ...others
+    },
+    local.children
+  ));
+}
+
+export { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "rigid-ui",
+  "version": "0.0.1",
+  "description": "Unstyled UI components for SolidJS — a port of Base UI",
+  "keywords": [
+    "components",
+    "headless",
+    "scroll-area",
+    "solid",
+    "solidjs",
+    "ui",
+    "unstyled"
+  ],
+  "license": "MIT",
+  "author": "fdemb",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fdemb/rigid-ui"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    "./scroll-area": {
+      "types": "./dist/scroll-area/index.d.ts",
+      "import": "./dist/scroll-area/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsup",
+    "format": "oxfmt ."
+  },
+  "devDependencies": {
+    "oxfmt": "^0.28.0",
+    "solid-js": "^1.9.11",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  }
+}