bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/scroll-area/components/scroll-area-thumb-impl.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ThumbProps } from "../index.js";
+import type { ScrollAreaThumbProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ScrollAreaThumbImpl: $$__sveltets_2_IsomorphicComponent<Omit<ThumbProps, "id" | "forceMount"> & {
+declare const ScrollAreaThumbImpl: $$__sveltets_2_IsomorphicComponent<Omit<ScrollAreaThumbProps, "id" | "forceMount"> & {
     id: string;
     present: boolean;
 }, {

package/dist/bits/scroll-area/components/scroll-area-thumb.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { ThumbProps } from "../index.js";
+	import type { ScrollAreaThumbProps } from "../types.js";
 	import { getScrollAreaScrollbarVisibleContext } from "../scroll-area.svelte.js";
 	import ScrollAreaThumbImpl from "./scroll-area-thumb-impl.svelte";
-	import { useId } from "../../../internal/useId.js";
-	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
+	import { useId } from "../../../internal/use-id.js";
+	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
 	let {
 		id = useId(),
 		ref = $bindable(null),
 		forceMount = false,
 		...restProps
-	}: ThumbProps = $props();
+	}: ScrollAreaThumbProps = $props();
 
 	const scrollbarState = getScrollAreaScrollbarVisibleContext();
 </script>

package/dist/bits/scroll-area/components/scroll-area-thumb.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ThumbProps } from "../index.js";
+import type { ScrollAreaThumbProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ScrollAreaThumb: $$__sveltets_2_IsomorphicComponent<ThumbProps, {
+declare const ScrollAreaThumb: $$__sveltets_2_IsomorphicComponent<ScrollAreaThumbProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ScrollAreaThumb = InstanceType<typeof ScrollAreaThumb>;

package/dist/bits/scroll-area/components/scroll-area-viewport.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ViewportProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ScrollAreaViewportProps } from "../types.js";
 	import { useScrollAreaViewport } from "../scroll-area.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
-	let { ref = $bindable(null), id = useId(), children, ...restProps }: ViewportProps = $props();
+	let {
+		ref = $bindable(null),
+		id = useId(),
+		children,
+		...restProps
+	}: ScrollAreaViewportProps = $props();
 
 	const viewportState = useScrollAreaViewport({
 		id: box.with(() => id),
@@ -35,4 +39,13 @@
 	:global([data-scroll-area-viewport])::-webkit-scrollbar {
 		display: none !important;
 	}
+
+	:global(:where([data-scroll-area-viewport])) {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+	}
+	:global(:where([data-scroll-area-content])) {
+		flex-grow: 1;
+	}
 </style>

package/dist/bits/scroll-area/components/scroll-area-viewport.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ViewportProps } from "../index.js";
+import type { ScrollAreaViewportProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ScrollAreaViewport: $$__sveltets_2_IsomorphicComponent<ViewportProps, {
+declare const ScrollAreaViewport: $$__sveltets_2_IsomorphicComponent<ScrollAreaViewportProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ScrollAreaViewport = InstanceType<typeof ScrollAreaViewport>;

package/dist/bits/scroll-area/components/scroll-area.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ScrollAreaRootProps } from "../types.js";
 	import { useScrollAreaRoot } from "../scroll-area.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +13,7 @@
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: ScrollAreaRootProps = $props();
 
 	const rootState = useScrollAreaRoot({
 		type: box.with(() => type),

package/dist/bits/scroll-area/components/scroll-area.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { ScrollAreaRootProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ScrollArea: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const ScrollArea: $$__sveltets_2_IsomorphicComponent<ScrollAreaRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ScrollArea = InstanceType<typeof ScrollArea>;

package/dist/bits/scroll-area/exports.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/scroll-area.svelte";
+export { default as Viewport } from "./components/scroll-area-viewport.svelte";
+export { default as Scrollbar } from "./components/scroll-area-scrollbar.svelte";
+export { default as Thumb } from "./components/scroll-area-thumb.svelte";
+export { default as Corner } from "./components/scroll-area-corner.svelte";
+export type { ScrollAreaRootProps as RootProps, ScrollAreaViewportProps as ViewportProps, ScrollAreaScrollbarProps as ScrollbarProps, ScrollAreaThumbProps as ThumbProps, ScrollAreaCornerProps as CornerProps, } from "./types.js";

package/dist/bits/scroll-area/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/scroll-area.svelte";
+export { default as Viewport } from "./components/scroll-area-viewport.svelte";
+export { default as Scrollbar } from "./components/scroll-area-scrollbar.svelte";
+export { default as Thumb } from "./components/scroll-area-thumb.svelte";
+export { default as Corner } from "./components/scroll-area-corner.svelte";

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

@@ -1,6 +1 @@
-export { default as Root } from "./components/scroll-area.svelte";
-export { default as Viewport } from "./components/scroll-area-viewport.svelte";
-export { default as Scrollbar } from "./components/scroll-area-scrollbar.svelte";
-export { default as Thumb } from "./components/scroll-area-thumb.svelte";
-export { default as Corner } from "./components/scroll-area-corner.svelte";
-export type { ScrollAreaRootProps as RootProps, ScrollAreaViewportProps as ViewportProps, ScrollAreaScrollbarProps as ScrollbarProps, ScrollAreaThumbProps as ThumbProps, ScrollAreaCornerProps as CornerProps, } from "./types.js";
+export * as ScrollArea from "./exports.js";

package/dist/bits/scroll-area/index.js

@@ -1,5 +1 @@
-export { default as Root } from "./components/scroll-area.svelte";
-export { default as Viewport } from "./components/scroll-area-viewport.svelte";
-export { default as Scrollbar } from "./components/scroll-area-scrollbar.svelte";
-export { default as Thumb } from "./components/scroll-area-thumb.svelte";
-export { default as Corner } from "./components/scroll-area-corner.svelte";
+export * as ScrollArea from "./exports.js";

package/dist/bits/scroll-area/scroll-area.svelte.d.ts

@@ -1,5 +1,5 @@
 /**
- * This logic is adapted from Radix UI's ScrollArea component.
+ * This logic is adapted from Radix UI ScrollArea component.
  * https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx
  * Credit to Jenna Smith (@jjenzz) for the original implementation.
  * Incredible thought must have went into solving all the intricacies of this component.
@@ -47,9 +47,6 @@ declare class ScrollAreaRootState {
         };
         readonly "data-scroll-area-root": "";
     };
-    createViewport(props: ScrollAreaViewportStateProps): ScrollAreaViewportState;
-    createScrollbar(props: ScrollAreaScrollbarStateProps): ScrollAreaScrollbarState;
-    createCorner(props: ScrollAreaCornerImplStateProps): ScrollAreaCornerImplState;
 }
 type ScrollAreaViewportStateProps = WithRefProps;
 declare class ScrollAreaViewportState {
@@ -59,16 +56,23 @@ declare class ScrollAreaViewportState {
     props: {
         readonly id: string;
         readonly style: {
-            readonly overflowX: "scroll" | "hidden";
-            readonly overflowY: "scroll" | "hidden";
+            readonly overflowX: "hidden" | "scroll";
+            readonly overflowY: "hidden" | "scroll";
         };
         readonly "data-scroll-area-viewport": "";
     };
     contentProps: {
         readonly id: string;
+        readonly "data-scroll-area-content": "";
+        /**
+         * When horizontal scrollbar is visible: this element should be at least
+         * as wide as its children for size calculations to work correctly.
+         *
+         * When horizontal scrollbar is NOT visible: this element's width should
+         * be constrained by the parent container to enable `text-overflow: ellipsis`
+         */
         readonly style: {
-            readonly minWidth: "100%";
-            readonly display: "table";
+            readonly minWidth: "fit-content" | undefined;
         };
     };
 }
@@ -83,10 +87,6 @@ declare class ScrollAreaScrollbarState {
     isHorizontal: boolean;
     hasThumb: boolean;
     constructor(props: ScrollAreaScrollbarStateProps, root: ScrollAreaRootState);
-    createScrollbarHover(): ScrollAreaScrollbarHoverState;
-    createScrollbarScroll(): ScrollAreaScrollbarScrollState;
-    createScrollbarAuto(): ScrollAreaScrollbarAutoState;
-    createScrollbarVisible(): ScrollAreaScrollbarVisibleState;
 }
 declare class ScrollAreaScrollbarHoverState {
     root: ScrollAreaRootState;
@@ -143,8 +143,6 @@ declare class ScrollAreaScrollbarVisibleState {
     yOnThumbPositionChange: () => void;
     yOnWheelScroll: (scrollPos: number) => void;
     yOnDragScroll: (pointerPos: number) => void;
-    createScrollbarX(props: ScrollbarAxisStateProps): ScrollAreaScrollbarXState;
-    createScrollbarY(props: ScrollbarAxisStateProps): ScrollAreaScrollbarYState;
 }
 type ScrollbarAxisStateProps = ReadableBoxedValues<{
     mounted: boolean;
@@ -162,7 +160,6 @@ type ScrollbarAxisState = {
     onResize: () => void;
     onThumbPositionChange: () => void;
     onThumbPointerUp: () => void;
-    createShared: () => ScrollAreaScrollbarSharedState;
     props: {
         id: string;
         "data-orientation": "horizontal" | "vertical";
@@ -199,7 +196,6 @@ declare class ScrollAreaScrollbarXState implements ScrollbarAxisState {
             readonly "--bits-scroll-area-thumb-width": `${number}px`;
         };
     };
-    createShared(): ScrollAreaScrollbarSharedState;
 }
 declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
     #private;
@@ -232,7 +228,6 @@ declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
             readonly "--bits-scroll-area-thumb-height": `${number}px`;
         };
     };
-    createShared(): ScrollAreaScrollbarSharedState;
 }
 type ScrollbarAxis = ScrollAreaScrollbarXState | ScrollAreaScrollbarYState;
 declare class ScrollAreaScrollbarSharedState {
@@ -254,7 +249,6 @@ declare class ScrollAreaScrollbarSharedState {
     constructor(scrollbarState: ScrollbarAxis);
     handleDragScroll: (e: PointerEvent) => void;
     props: never;
-    createThumb(props: ScrollAreaThumbImplStateProps): ScrollAreaThumbImplState;
 }
 type ScrollAreaThumbImplStateProps = WithRefProps & ReadableBoxedValues<{
     mounted: boolean;
@@ -296,7 +290,7 @@ declare class ScrollAreaCornerImplState {
 export declare const setScrollAreaRootContext: (value: ScrollAreaRootState) => ScrollAreaRootState, getScrollAreaRootContext: <T extends ScrollAreaRootState | null | undefined = ScrollAreaRootState>(fallback?: T | undefined) => T extends null ? ScrollAreaRootState | null : ScrollAreaRootState;
 export declare const setScrollAreaScrollbarContext: (value: ScrollAreaScrollbarState) => ScrollAreaScrollbarState, getScrollAreaScrollbarContext: <T extends ScrollAreaScrollbarState | null | undefined = ScrollAreaScrollbarState>(fallback?: T | undefined) => T extends null ? ScrollAreaScrollbarState | null : ScrollAreaScrollbarState;
 export declare const setScrollAreaScrollbarVisibleContext: (value: ScrollAreaScrollbarVisibleState) => ScrollAreaScrollbarVisibleState, getScrollAreaScrollbarVisibleContext: <T extends ScrollAreaScrollbarVisibleState | null | undefined = ScrollAreaScrollbarVisibleState>(fallback?: T | undefined) => T extends null ? ScrollAreaScrollbarVisibleState | null : ScrollAreaScrollbarVisibleState;
-export declare const setScrollAreaScrollbarAxisContext: (value: ScrollbarAxisState) => ScrollbarAxisState, getScrollAreaScrollbarAxisContext: <T extends ScrollbarAxisState | null | undefined = ScrollbarAxisState>(fallback?: T | undefined) => T extends null ? ScrollbarAxisState | null : ScrollbarAxisState;
+export declare const setScrollAreaScrollbarAxisContext: (value: ScrollbarAxis) => ScrollbarAxis, getScrollAreaScrollbarAxisContext: <T extends ScrollbarAxis | null | undefined = ScrollbarAxis>(fallback?: T | undefined) => T extends null ? ScrollbarAxis | null : ScrollbarAxis;
 export declare const setScrollAreaScrollbarSharedContext: (value: ScrollAreaScrollbarSharedState) => ScrollAreaScrollbarSharedState, getScrollAreaScrollbarSharedContext: <T extends ScrollAreaScrollbarSharedState | null | undefined = ScrollAreaScrollbarSharedState>(fallback?: T | undefined) => T extends null ? ScrollAreaScrollbarSharedState | null : ScrollAreaScrollbarSharedState;
 export declare function useScrollAreaRoot(props: ScrollAreaRootStateProps): ScrollAreaRootState;
 export declare function useScrollAreaViewport(props: ScrollAreaViewportStateProps): ScrollAreaViewportState;
@@ -305,8 +299,8 @@ export declare function useScrollAreaScrollbarVisible(): ScrollAreaScrollbarVisi
 export declare function useScrollAreaScrollbarAuto(): ScrollAreaScrollbarAutoState;
 export declare function useScrollAreaScrollbarScroll(): ScrollAreaScrollbarScrollState;
 export declare function useScrollAreaScrollbarHover(): ScrollAreaScrollbarHoverState;
-export declare function useScrollAreaScrollbarX(props: ScrollbarAxisStateProps): ScrollbarAxisState;
-export declare function useScrollAreaScrollbarY(props: ScrollbarAxisStateProps): ScrollbarAxisState;
+export declare function useScrollAreaScrollbarX(props: ScrollbarAxisStateProps): ScrollbarAxis;
+export declare function useScrollAreaScrollbarY(props: ScrollbarAxisStateProps): ScrollbarAxis;
 export declare function useScrollAreaScrollbarShared(): ScrollAreaScrollbarSharedState;
 export declare function useScrollAreaThumb(props: ScrollAreaThumbImplStateProps): ScrollAreaThumbImplState;
 export declare function useScrollAreaCorner(props: ScrollAreaCornerImplStateProps): ScrollAreaCornerImplState;

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -1,21 +1,18 @@
 /**
- * This logic is adapted from Radix UI's ScrollArea component.
+ * This logic is adapted from Radix UI ScrollArea component.
  * https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx
  * Credit to Jenna Smith (@jjenzz) for the original implementation.
  * Incredible thought must have went into solving all the intricacies of this component.
  */
 import { useDebounce } from "runed";
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
-import { executeCallbacks } from "../../internal/executeCallbacks.js";
+import { box, executeCallbacks, useRefById } from "svelte-toolbelt";
 import { addEventListener } from "../../internal/events.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 import { mergeProps, useId } from "../../shared/index.js";
-import { useStateMachine } from "../../internal/useStateMachine.svelte.js";
+import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
 import { clamp } from "../../internal/clamp.js";
-import { useResizeObserver } from "../../internal/useResizeObserver.svelte.js";
-import { createContext } from "../../internal/createContext.js";
-import { afterTick } from "../../internal/afterTick.js";
+import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
+import { createContext } from "../../internal/create-context.js";
 const SCROLL_AREA_ROOT_ATTR = "data-scroll-area-root";
 const SCROLL_AREA_VIEWPORT_ATTR = "data-scroll-area-viewport";
 const SCROLL_AREA_CORNER_ATTR = "data-scroll-area-corner";
@@ -60,15 +57,6 @@ class ScrollAreaRootState {
         },
         [SCROLL_AREA_ROOT_ATTR]: "",
     }));
-    createViewport(props) {
-        return new ScrollAreaViewportState(props, this);
-    }
-    createScrollbar(props) {
-        return new ScrollAreaScrollbarState(props, this);
-    }
-    createCorner(props) {
-        return new ScrollAreaCornerImplState(props, this);
-    }
 }
 class ScrollAreaViewportState {
     #id;
@@ -105,10 +93,15 @@ class ScrollAreaViewportState {
     }));
     contentProps = $derived.by(() => ({
         id: this.#contentId.current,
-        style: {
-            minWidth: "100%",
-            display: "table",
-        },
+        "data-scroll-area-content": "",
+        /**
+         * When horizontal scrollbar is visible: this element should be at least
+         * as wide as its children for size calculations to work correctly.
+         *
+         * When horizontal scrollbar is NOT visible: this element's width should
+         * be constrained by the parent container to enable `text-overflow: ellipsis`
+         */
+        style: { minWidth: this.root.scrollbarXEnabled ? "fit-content" : undefined },
     }));
 }
 class ScrollAreaScrollbarState {
@@ -134,18 +127,6 @@ class ScrollAreaScrollbarState {
             };
         });
     }
-    createScrollbarHover() {
-        return new ScrollAreaScrollbarHoverState(this);
-    }
-    createScrollbarScroll() {
-        return new ScrollAreaScrollbarScrollState(this);
-    }
-    createScrollbarAuto() {
-        return new ScrollAreaScrollbarAutoState(this);
-    }
-    createScrollbarVisible() {
-        return new ScrollAreaScrollbarVisibleState(this);
-    }
 }
 class ScrollAreaScrollbarHoverState {
     root;
@@ -356,12 +337,6 @@ class ScrollAreaScrollbarVisibleState {
             return;
         this.root.viewportNode.scrollTop = this.getScrollPosition(pointerPos, this.root.dir.current);
     };
-    createScrollbarX(props) {
-        return new ScrollAreaScrollbarXState(props, this);
-    }
-    createScrollbarY(props) {
-        return new ScrollAreaScrollbarYState(props, this);
-    }
 }
 class ScrollAreaScrollbarXState {
     #id;
@@ -382,17 +357,20 @@ class ScrollAreaScrollbarXState {
             onRefChange: (node) => {
                 this.root.scrollbarXNode = node;
             },
-            condition: () => this.#mounted.current,
+            deps: () => this.#mounted.current,
         });
         $effect(() => {
             if (!this.ref.current)
                 return;
             if (this.#mounted.current) {
-                afterTick(() => {
-                    this.computedStyle = getComputedStyle(this.ref.current);
-                });
+                this.computedStyle = getComputedStyle(this.ref.current);
             }
         });
+        $effect(() => {
+            // Ensure when a user scrolls down and then the scrollbar is hidden
+            // that when it shows again it will be positioned correctly.
+            this.onResize();
+        });
     }
     onThumbPointerDown = (pointerPos) => {
         this.scrollbarVis.onThumbPointerDown(pointerPos.x);
@@ -446,9 +424,6 @@ class ScrollAreaScrollbarXState {
             "--bits-scroll-area-thumb-width": `${this.thumbSize}px`,
         },
     }));
-    createShared() {
-        return new ScrollAreaScrollbarSharedState(this);
-    }
 }
 class ScrollAreaScrollbarYState {
     #id;
@@ -469,17 +444,20 @@ class ScrollAreaScrollbarYState {
             onRefChange: (node) => {
                 this.root.scrollbarYNode = node;
             },
-            condition: () => this.#mounted.current,
+            deps: () => this.#mounted.current,
         });
         $effect(() => {
             if (!this.ref.current)
                 return;
             if (this.#mounted.current) {
-                afterTick(() => {
-                    this.computedStyle = getComputedStyle(this.ref.current);
-                });
+                this.computedStyle = getComputedStyle(this.ref.current);
             }
         });
+        $effect(() => {
+            // Ensure when a user scrolls down and then the scrollbar is hidden
+            // that when it shows again it will be positioned correctly.
+            this.onResize();
+        });
     }
     onThumbPointerDown = (pointerPos) => {
         this.scrollbarVis.onThumbPointerDown(pointerPos.y);
@@ -530,9 +508,6 @@ class ScrollAreaScrollbarYState {
             "--bits-scroll-area-thumb-height": `${this.thumbSize}px`,
         },
     }));
-    createShared() {
-        return new ScrollAreaScrollbarSharedState(this);
-    }
 }
 class ScrollAreaScrollbarSharedState {
     scrollbarState;
@@ -627,9 +602,6 @@ class ScrollAreaScrollbarSharedState {
         onpointermove: this.#onpointermove,
         onpointerup: this.#onpointerup,
     }));
-    createThumb(props) {
-        return new ScrollAreaThumbImplState(props, this);
-    }
 }
 class ScrollAreaThumbImplState {
     #id;
@@ -656,7 +628,7 @@ class ScrollAreaThumbImplState {
             onRefChange: (node) => {
                 this.#scrollbarState.scrollbarVis.thumbNode = node;
             },
-            condition: () => this.#mounted.current,
+            deps: () => this.#mounted.current,
         });
         $effect(() => {
             const viewportNode = this.#root.viewportNode;
@@ -748,37 +720,37 @@ export function useScrollAreaRoot(props) {
     return setScrollAreaRootContext(new ScrollAreaRootState(props));
 }
 export function useScrollAreaViewport(props) {
-    return getScrollAreaRootContext().createViewport(props);
+    return new ScrollAreaViewportState(props, getScrollAreaRootContext());
 }
 export function useScrollAreaScrollbar(props) {
-    return setScrollAreaScrollbarContext(getScrollAreaRootContext().createScrollbar(props));
+    return setScrollAreaScrollbarContext(new ScrollAreaScrollbarState(props, getScrollAreaRootContext()));
 }
 export function useScrollAreaScrollbarVisible() {
-    return setScrollAreaScrollbarVisibleContext(getScrollAreaScrollbarContext().createScrollbarVisible());
+    return setScrollAreaScrollbarVisibleContext(new ScrollAreaScrollbarVisibleState(getScrollAreaScrollbarContext()));
 }
 export function useScrollAreaScrollbarAuto() {
-    return getScrollAreaScrollbarContext().createScrollbarAuto();
+    return new ScrollAreaScrollbarAutoState(getScrollAreaScrollbarContext());
 }
 export function useScrollAreaScrollbarScroll() {
-    return getScrollAreaScrollbarContext().createScrollbarScroll();
+    return new ScrollAreaScrollbarScrollState(getScrollAreaScrollbarContext());
 }
 export function useScrollAreaScrollbarHover() {
-    return getScrollAreaScrollbarContext().createScrollbarHover();
+    return new ScrollAreaScrollbarHoverState(getScrollAreaScrollbarContext());
 }
 export function useScrollAreaScrollbarX(props) {
-    return setScrollAreaScrollbarAxisContext(getScrollAreaScrollbarVisibleContext().createScrollbarX(props));
+    return setScrollAreaScrollbarAxisContext(new ScrollAreaScrollbarXState(props, getScrollAreaScrollbarVisibleContext()));
 }
 export function useScrollAreaScrollbarY(props) {
-    return setScrollAreaScrollbarAxisContext(getScrollAreaScrollbarVisibleContext().createScrollbarY(props));
+    return setScrollAreaScrollbarAxisContext(new ScrollAreaScrollbarYState(props, getScrollAreaScrollbarVisibleContext()));
 }
 export function useScrollAreaScrollbarShared() {
-    return setScrollAreaScrollbarSharedContext(getScrollAreaScrollbarAxisContext().createShared());
+    return setScrollAreaScrollbarSharedContext(new ScrollAreaScrollbarSharedState(getScrollAreaScrollbarAxisContext()));
 }
 export function useScrollAreaThumb(props) {
-    return getScrollAreaScrollbarSharedContext().createThumb(props);
+    return new ScrollAreaThumbImplState(props, getScrollAreaScrollbarSharedContext());
 }
 export function useScrollAreaCorner(props) {
-    return getScrollAreaRootContext().createCorner(props);
+    return new ScrollAreaCornerImplState(props, getScrollAreaRootContext());
 }
 function toInt(value) {
     return value ? Number.parseInt(value, 10) : 0;

package/dist/bits/scroll-area/types.d.ts

@@ -1,4 +1,4 @@
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { Direction, Orientation, WithChild, Without } from "../../shared/index.js";
 export type ScrollAreaType = "hover" | "scroll" | "auto" | "always";
 export type ScrollAreaRootPropsWithoutHTML = WithChild<{
@@ -20,9 +20,9 @@ export type ScrollAreaRootPropsWithoutHTML = WithChild<{
      */
     scrollHideDelay?: number;
 }>;
-export type ScrollAreaRootProps = ScrollAreaRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaRootPropsWithoutHTML>;
+export type ScrollAreaRootProps = ScrollAreaRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaRootPropsWithoutHTML>;
 export type ScrollAreaViewportPropsWithoutHTML = Omit<WithChild, "child">;
-export type ScrollAreaViewportProps = ScrollAreaViewportPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaViewportPropsWithoutHTML>;
+export type ScrollAreaViewportProps = ScrollAreaViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaViewportPropsWithoutHTML>;
 export type ScrollAreaScrollbarPropsWithoutHTML = WithChild<{
     orientation: Orientation;
     /**
@@ -31,7 +31,7 @@ export type ScrollAreaScrollbarPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type ScrollAreaScrollbarProps = ScrollAreaScrollbarPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaScrollbarPropsWithoutHTML>;
+export type ScrollAreaScrollbarProps = ScrollAreaScrollbarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaScrollbarPropsWithoutHTML>;
 export type ScrollAreaThumbPropsWithoutHTML = WithChild<{
     /**
      * Whether to forcefully mount the component. Useful when working with
@@ -39,9 +39,9 @@ export type ScrollAreaThumbPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type ScrollAreaThumbProps = ScrollAreaThumbPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaThumbPropsWithoutHTML>;
+export type ScrollAreaThumbProps = ScrollAreaThumbPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaThumbPropsWithoutHTML>;
 export type ScrollAreaCornerPropsWithoutHTML = WithChild;
-export type ScrollAreaCornerProps = ScrollAreaCornerPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaCornerPropsWithoutHTML>;
+export type ScrollAreaCornerProps = ScrollAreaCornerPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaCornerPropsWithoutHTML>;
 export type _ScrollbarStubProps = Omit<ScrollAreaScrollbarProps, "orientation" | "ref" | "id"> & {
     id: string;
 };