bits-ui 2.6.2 → 2.8.0

package/dist/bits/rating-group/rating-group.svelte.js

@@ -1,4 +1,4 @@
-import { attachRef, DOMContext } from "svelte-toolbelt";
+import { attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context } from "runed";
 import { createBitsAttrs, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -6,7 +6,11 @@ const ratingGroupAttrs = createBitsAttrs({
     component: "rating-group",
     parts: ["root", "item"],
 });
-class RatingGroupRootState {
+const RatingGroupRootContext = new Context("RatingGroup.Root");
+export class RatingGroupRootState {
+    static create(opts) {
+        return RatingGroupRootContext.set(new RatingGroupRootState(opts));
+    }
     opts;
     #hoverValue = $state(null);
     #keySequence = $state("");
@@ -27,14 +31,13 @@ class RatingGroupRootState {
             : this.opts.ariaValuetext.current;
     });
     items = $derived.by(() => {
-        const { max, allowHalf } = this.opts;
         const value = this.valueToUse;
-        return Array.from({ length: max.current }, (_, i) => {
+        return Array.from({ length: this.opts.max.current }, (_, i) => {
             const itemValue = i + 1;
             const halfValue = itemValue - 0.5;
             const state = value >= itemValue
                 ? "active"
-                : allowHalf.current && value >= halfValue
+                : this.opts.allowHalf.current && value >= halfValue
                     ? "partial"
                     : "inactive";
             return { index: i, state };
@@ -217,7 +220,10 @@ class RatingGroupRootState {
         };
     });
 }
-class RatingGroupItemState {
+export class RatingGroupItemState {
+    static create(opts) {
+        return new RatingGroupItemState(opts, RatingGroupRootContext.get());
+    }
     opts;
     root;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
@@ -292,7 +298,10 @@ class RatingGroupItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-class RatingGroupHiddenInputState {
+export class RatingGroupHiddenInputState {
+    static create() {
+        return new RatingGroupHiddenInputState(RatingGroupRootContext.get());
+    }
     root;
     shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
     props = $derived.by(() => ({
@@ -305,13 +314,3 @@ class RatingGroupHiddenInputState {
         this.root = root;
     }
 }
-const RatingGroupRootContext = new Context("RatingGroup.Root");
-export function useRatingGroupRoot(props) {
-    return RatingGroupRootContext.set(new RatingGroupRootState(props));
-}
-export function useRatingGroupItem(props) {
-    return new RatingGroupItemState(props, RatingGroupRootContext.get());
-}
-export function useRatingGroupHiddenInput() {
-    return new RatingGroupHiddenInputState(RatingGroupRootContext.get());
-}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaCornerProps } from "../types.js";
-	import { useScrollAreaCorner } from "../scroll-area.svelte.js";
+	import { ScrollAreaCornerImplState } from "../scroll-area.svelte.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 		id: string;
 	} = $props();
 
-	const cornerState = useScrollAreaCorner({
+	const cornerState = ScrollAreaCornerImplState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { mergeProps } from "svelte-toolbelt";
-	import { useScrollAreaScrollbarAuto } from "../scroll-area.svelte.js";
+	import { ScrollAreaScrollbarAutoState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
 	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
 
-	const scrollbarAutoState = useScrollAreaScrollbarAuto();
+	const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
 	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props));
 </script>
 
 <PresenceLayer
-	present={forceMount || scrollbarAutoState.isVisible}
+	open={forceMount || scrollbarAutoState.isVisible}
 	ref={scrollbarAutoState.scrollbar.opts.ref}
 >
 	{#snippet presence()}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { mergeProps } from "svelte-toolbelt";
 	import {
-		useScrollAreaScrollbarAuto,
-		useScrollAreaScrollbarHover,
+		ScrollAreaScrollbarAutoState,
+		ScrollAreaScrollbarHoverState,
 	} from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
@@ -10,20 +10,20 @@
 
 	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
 
-	const scrollbarHoverState = useScrollAreaScrollbarHover();
-	const scrollbarAutoState = useScrollAreaScrollbarAuto();
+	const scrollbarHoverState = ScrollAreaScrollbarHoverState.create();
+	const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
 	const mergedProps = $derived(
 		mergeProps(restProps, scrollbarHoverState.props, scrollbarAutoState.props, {
 			"data-state": scrollbarHoverState.isVisible ? "visible" : "hidden",
 		})
 	);
 
-	const present = $derived(
+	const open = $derived(
 		forceMount || (scrollbarHoverState.isVisible && scrollbarAutoState.isVisible)
 	);
 </script>
 
-<PresenceLayer {present} ref={scrollbarAutoState.scrollbar.opts.ref}>
+<PresenceLayer {open} ref={scrollbarAutoState.scrollbar.opts.ref}>
 	{#snippet presence()}
 		<ScrollAreaScrollbarVisible {...mergedProps} />
 	{/snippet}

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

@@ -1,20 +1,20 @@
 <script lang="ts">
 	import { mergeProps } from "svelte-toolbelt";
-	import { useScrollAreaScrollbarScroll } from "../scroll-area.svelte.js";
+	import { ScrollAreaScrollbarScrollState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
 	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
 
-	const scrollbarScrollState = useScrollAreaScrollbarScroll();
+	const scrollbarScrollState = ScrollAreaScrollbarScrollState.create();
 
 	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props));
 </script>
 
 <PresenceLayer
 	{...mergedProps}
-	present={forceMount || !scrollbarScrollState.isHidden}
+	open={forceMount || !scrollbarScrollState.isHidden}
 	ref={scrollbarScrollState.scrollbar.opts.ref}
 >
 	{#snippet presence()}

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

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { mergeProps } from "svelte-toolbelt";
-	import { useScrollAreaScrollbarShared } from "../scroll-area.svelte.js";
+	import { ScrollAreaScrollbarSharedState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 
 	let { child, children, ...restProps }: _ScrollbarStubProps = $props();
 
-	const scrollbarSharedState = useScrollAreaScrollbarShared();
+	const scrollbarSharedState = ScrollAreaScrollbarSharedState.create();
 
 	const mergedProps = $derived(mergeProps(restProps, scrollbarSharedState.props));
 </script>

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { useScrollAreaScrollbarVisible } from "../scroll-area.svelte.js";
+	import { ScrollAreaScrollbarVisibleState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarX from "./scroll-area-scrollbar-x.svelte";
 	import ScrollAreaScrollbarY from "./scroll-area-scrollbar-y.svelte";
 
 	let { ...restProps }: Omit<_ScrollbarStubProps, "forceMount"> = $props();
 
-	const scrollbarVisibleState = useScrollAreaScrollbarVisible();
+	const scrollbarVisibleState = ScrollAreaScrollbarVisibleState.create();
 </script>
 
 {#if scrollbarVisibleState.scrollbar.opts.orientation.current === "horizontal"}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { IsMounted } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useScrollAreaScrollbarX } from "../scroll-area.svelte.js";
+	import { ScrollAreaScrollbarXState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
 
@@ -9,7 +9,7 @@
 
 	const isMounted = new IsMounted();
 
-	const scrollbarXState = useScrollAreaScrollbarX({
+	const scrollbarXState = ScrollAreaScrollbarXState.create({
 		mounted: box.with(() => isMounted.current),
 	});
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { IsMounted } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useScrollAreaScrollbarY } from "../scroll-area.svelte.js";
+	import { ScrollAreaScrollbarYState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
 
@@ -9,7 +9,7 @@
 
 	const isMounted = new IsMounted();
 
-	const scrollbarYState = useScrollAreaScrollbarY({
+	const scrollbarYState = ScrollAreaScrollbarYState.create({
 		mounted: box.with(() => isMounted.current),
 	});
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { ScrollAreaScrollbarProps } from "../types.js";
-	import { useScrollAreaScrollbar } from "../scroll-area.svelte.js";
+	import { ScrollAreaScrollbarState } from "../scroll-area.svelte.js";
 	import ScrollAreaScrollbarAuto from "./scroll-area-scrollbar-auto.svelte";
 	import ScrollAreaScrollbarScroll from "./scroll-area-scrollbar-scroll.svelte";
 	import ScrollAreaScrollbarHover from "./scroll-area-scrollbar-hover.svelte";
@@ -17,7 +17,7 @@
 		...restProps
 	}: ScrollAreaScrollbarProps = $props();
 
-	const scrollbarState = useScrollAreaScrollbar({
+	const scrollbarState = ScrollAreaScrollbarState.create({
 		orientation: box.with(() => orientation),
 		id: box.with(() => id),
 		ref: box.with(

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

@@ -2,7 +2,7 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { IsMounted } from "runed";
 	import type { ScrollAreaThumbProps } from "../types.js";
-	import { useScrollAreaThumb } from "../scroll-area.svelte.js";
+	import { ScrollAreaThumbImplState } from "../scroll-area.svelte.js";
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +18,7 @@
 
 	const isMounted = new IsMounted();
 
-	const thumbState = useScrollAreaThumb({
+	const thumbState = ScrollAreaThumbImplState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -17,11 +17,8 @@
 	const scrollbarState = ScrollAreaScrollbarVisibleContext.get();
 </script>
 
-<PresenceLayer
-	present={forceMount || scrollbarState.hasThumb}
-	ref={scrollbarState.scrollbar.opts.ref}
->
+<PresenceLayer open={forceMount || scrollbarState.hasThumb} ref={scrollbarState.scrollbar.opts.ref}>
 	{#snippet presence({ present })}
-		<ScrollAreaThumbImpl {...restProps} {id} bind:ref present={present.current} />
+		<ScrollAreaThumbImpl {...restProps} {id} bind:ref {present} />
 	{/snippet}
 </PresenceLayer>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaViewportProps } from "../types.js";
-	import { useScrollAreaViewport } from "../scroll-area.svelte.js";
+	import { ScrollAreaViewportState } from "../scroll-area.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -13,7 +13,7 @@
 		...restProps
 	}: ScrollAreaViewportProps = $props();
 
-	const viewportState = useScrollAreaViewport({
+	const viewportState = ScrollAreaViewportState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaRootProps } from "../types.js";
-	import { useScrollAreaRoot } from "../scroll-area.svelte.js";
+	import { ScrollAreaRootState } from "../scroll-area.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: ScrollAreaRootProps = $props();
 
-	const rootState = useScrollAreaRoot({
+	const rootState = ScrollAreaRootState.create({
 		type: box.with(() => type),
 		dir: box.with(() => dir),
 		scrollHideDelay: box.with(() => scrollHideDelay),

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

@@ -5,12 +5,17 @@
  * Incredible thought must have went into solving all the intricacies of this component.
  */
 import { Context } from "runed";
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { ScrollAreaType } from "./types.js";
-import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
 import { type Direction, type Orientation } from "../../shared/index.js";
-type Sizes = {
+import { StateMachine } from "../../internal/state-machine.js";
+export declare const ScrollAreaRootContext: Context<ScrollAreaRootState>;
+export declare const ScrollAreaScrollbarContext: Context<ScrollAreaScrollbarState>;
+export declare const ScrollAreaScrollbarVisibleContext: Context<ScrollAreaScrollbarVisibleState>;
+export declare const ScrollAreaScrollbarAxisContext: Context<ScrollbarAxis>;
+export declare const ScrollAreaScrollbarSharedContext: Context<ScrollAreaScrollbarSharedState>;
+interface Sizes {
     content: number;
     viewport: number;
     scrollbar: {
@@ -18,14 +23,16 @@ type Sizes = {
         paddingStart: number;
         paddingEnd: number;
     };
-};
-type ScrollAreaRootStateProps = WithRefProps<ReadableBoxedValues<{
+}
+interface ScrollAreaRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     dir: Direction;
     type: ScrollAreaType;
     scrollHideDelay: number;
-}>>;
-declare class ScrollAreaRootState {
-    readonly opts: ScrollAreaRootStateProps;
+}> {
+}
+export declare class ScrollAreaRootState {
+    static create(opts: ScrollAreaRootStateOpts): ScrollAreaRootState;
+    readonly opts: ScrollAreaRootStateOpts;
     scrollAreaNode: HTMLElement | null;
     viewportNode: HTMLElement | null;
     contentNode: HTMLElement | null;
@@ -36,8 +43,8 @@ declare class ScrollAreaRootState {
     scrollbarXEnabled: boolean;
     scrollbarYEnabled: boolean;
     domContext: DOMContext;
-    constructor(opts: ScrollAreaRootStateProps);
-    props: {
+    constructor(opts: ScrollAreaRootStateOpts);
+    readonly props: {
         readonly id: string;
         readonly dir: Direction;
         readonly style: {
@@ -47,20 +54,22 @@ declare class ScrollAreaRootState {
         };
     };
 }
-type ScrollAreaViewportStateProps = WithRefProps;
-declare class ScrollAreaViewportState {
+interface ScrollAreaViewportStateOpts extends WithRefOpts {
+}
+export declare class ScrollAreaViewportState {
     #private;
-    readonly opts: ScrollAreaViewportStateProps;
+    static create(opts: ScrollAreaViewportStateOpts): ScrollAreaViewportState;
+    readonly opts: ScrollAreaViewportStateOpts;
     readonly root: ScrollAreaRootState;
-    constructor(opts: ScrollAreaViewportStateProps, root: ScrollAreaRootState);
-    props: {
+    constructor(opts: ScrollAreaViewportStateOpts, root: ScrollAreaRootState);
+    readonly props: {
         readonly id: string;
         readonly style: {
             readonly overflowX: "hidden" | "scroll";
             readonly overflowY: "hidden" | "scroll";
         };
     };
-    contentProps: {
+    readonly contentProps: {
         readonly id: string;
         readonly "data-scroll-area-content": "";
         /**
@@ -75,17 +84,20 @@ declare class ScrollAreaViewportState {
         };
     };
 }
-type ScrollAreaScrollbarStateProps = WithRefProps<ReadableBoxedValues<{
+interface ScrollAreaScrollbarStateOpts extends WithRefOpts, ReadableBoxedValues<{
     orientation: Orientation;
-}>>;
-declare class ScrollAreaScrollbarState {
-    readonly opts: ScrollAreaScrollbarStateProps;
+}> {
+}
+export declare class ScrollAreaScrollbarState {
+    static create(opts: ScrollAreaScrollbarStateOpts): ScrollAreaScrollbarState;
+    readonly opts: ScrollAreaScrollbarStateOpts;
     readonly root: ScrollAreaRootState;
     readonly isHorizontal: boolean;
     hasThumb: boolean;
-    constructor(opts: ScrollAreaScrollbarStateProps, root: ScrollAreaRootState);
+    constructor(opts: ScrollAreaScrollbarStateOpts, root: ScrollAreaRootState);
 }
-declare class ScrollAreaScrollbarHoverState {
+export declare class ScrollAreaScrollbarHoverState {
+    static create(): ScrollAreaScrollbarHoverState;
     readonly scrollbar: ScrollAreaScrollbarState;
     root: ScrollAreaRootState;
     isVisible: boolean;
@@ -94,13 +106,28 @@ declare class ScrollAreaScrollbarHoverState {
         readonly "data-state": "hidden" | "visible";
     };
 }
-declare class ScrollAreaScrollbarScrollState {
+export declare class ScrollAreaScrollbarScrollState {
+    static create(): ScrollAreaScrollbarScrollState;
     readonly scrollbar: ScrollAreaScrollbarState;
-    root: ScrollAreaRootState;
-    machine: {
-        state: import("svelte-toolbelt").WritableBox<"hidden" | "scrolling" | "idle" | "interacting">;
-        dispatch: (event: string | number | symbol) => void;
-    };
+    readonly root: ScrollAreaRootState;
+    readonly machine: StateMachine<{
+        hidden: {
+            SCROLL: "scrolling";
+        };
+        scrolling: {
+            SCROLL_END: "idle";
+            POINTER_ENTER: "interacting";
+        };
+        interacting: {
+            SCROLL: "interacting";
+            POINTER_LEAVE: "idle";
+        };
+        idle: {
+            HIDE: "hidden";
+            SCROLL: "scrolling";
+            POINTER_ENTER: "interacting";
+        };
+    }>;
     readonly isHidden: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
     onpointerenter(_: BitsPointerEvent): void;
@@ -111,18 +138,20 @@ declare class ScrollAreaScrollbarScrollState {
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
-declare class ScrollAreaScrollbarAutoState {
+export declare class ScrollAreaScrollbarAutoState {
+    static create(): ScrollAreaScrollbarAutoState;
     readonly scrollbar: ScrollAreaScrollbarState;
-    root: ScrollAreaRootState;
+    readonly root: ScrollAreaRootState;
     isVisible: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
     readonly props: {
         readonly "data-state": "hidden" | "visible";
     };
 }
-declare class ScrollAreaScrollbarVisibleState {
+export declare class ScrollAreaScrollbarVisibleState {
+    static create(): ScrollAreaScrollbarVisibleState;
     readonly scrollbar: ScrollAreaScrollbarState;
-    root: ScrollAreaRootState;
+    readonly root: ScrollAreaRootState;
     thumbNode: HTMLElement | null;
     pointerOffset: number;
     sizes: Sizes;
@@ -141,10 +170,11 @@ declare class ScrollAreaScrollbarVisibleState {
     yOnWheelScroll(scrollPos: number): void;
     yOnDragScroll(pointerPos: number): void;
 }
-type ScrollbarAxisStateProps = ReadableBoxedValues<{
+interface ScrollbarAxisStateOpts extends ReadableBoxedValues<{
     mounted: boolean;
-}>;
-type ScrollbarAxisState = {
+}> {
+}
+interface ScrollbarAxisState {
     onThumbPointerDown: (pointerPos: {
         x: number;
         y: number;
@@ -162,14 +192,15 @@ type ScrollbarAxisState = {
         "data-orientation": "horizontal" | "vertical";
         style: Record<string, string | number | undefined>;
     };
-};
-declare class ScrollAreaScrollbarXState implements ScrollbarAxisState {
-    readonly opts: ScrollbarAxisStateProps;
+}
+export declare class ScrollAreaScrollbarXState implements ScrollbarAxisState {
+    static create(opts: ScrollbarAxisStateOpts): ScrollbarAxis;
+    readonly opts: ScrollbarAxisStateOpts;
     readonly scrollbarVis: ScrollAreaScrollbarVisibleState;
-    root: ScrollAreaRootState;
+    readonly root: ScrollAreaRootState;
+    readonly scrollbar: ScrollAreaScrollbarState;
     computedStyle: CSSStyleDeclaration | undefined;
-    scrollbar: ScrollAreaScrollbarState;
-    constructor(opts: ScrollbarAxisStateProps, scrollbarVis: ScrollAreaScrollbarVisibleState);
+    constructor(opts: ScrollbarAxisStateOpts, scrollbarVis: ScrollAreaScrollbarVisibleState);
     onThumbPointerDown: (pointerPos: {
         x: number;
         y: number;
@@ -194,13 +225,14 @@ declare class ScrollAreaScrollbarXState implements ScrollbarAxisState {
         };
     };
 }
-declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
-    readonly opts: ScrollbarAxisStateProps;
+export declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
+    static create(opts: ScrollbarAxisStateOpts): ScrollbarAxis;
+    readonly opts: ScrollbarAxisStateOpts;
     readonly scrollbarVis: ScrollAreaScrollbarVisibleState;
-    root: ScrollAreaRootState;
-    scrollbar: ScrollAreaScrollbarState;
+    readonly root: ScrollAreaRootState;
+    readonly scrollbar: ScrollAreaScrollbarState;
     computedStyle: CSSStyleDeclaration | undefined;
-    constructor(opts: ScrollbarAxisStateProps, scrollbarVis: ScrollAreaScrollbarVisibleState);
+    constructor(opts: ScrollbarAxisStateOpts, scrollbarVis: ScrollAreaScrollbarVisibleState);
     onThumbPointerDown(pointerPos: {
         x: number;
         y: number;
@@ -227,11 +259,12 @@ declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
     };
 }
 type ScrollbarAxis = ScrollAreaScrollbarXState | ScrollAreaScrollbarYState;
-declare class ScrollAreaScrollbarSharedState {
+export declare class ScrollAreaScrollbarSharedState {
+    static create(): ScrollAreaScrollbarSharedState;
     readonly scrollbarState: ScrollbarAxis;
-    root: ScrollAreaRootState;
-    scrollbarVis: ScrollAreaScrollbarVisibleState;
-    scrollbar: ScrollAreaScrollbarState;
+    readonly root: ScrollAreaRootState;
+    readonly scrollbarVis: ScrollAreaScrollbarVisibleState;
+    readonly scrollbar: ScrollAreaScrollbarState;
     rect: DOMRect | null;
     prevWebkitUserSelect: string;
     handleResize: () => void;
@@ -248,16 +281,18 @@ declare class ScrollAreaScrollbarSharedState {
     onpointerdown(e: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
-    props: never;
+    readonly props: never;
 }
-type ScrollAreaThumbImplStateProps = WithRefProps & ReadableBoxedValues<{
+interface ScrollAreaThumbImplStateOpts extends WithRefOpts, ReadableBoxedValues<{
     mounted: boolean;
-}>;
-declare class ScrollAreaThumbImplState {
+}> {
+}
+export declare class ScrollAreaThumbImplState {
     #private;
-    readonly opts: ScrollAreaThumbImplStateProps;
+    static create(opts: ScrollAreaThumbImplStateOpts): ScrollAreaThumbImplState;
+    readonly opts: ScrollAreaThumbImplStateOpts;
     readonly scrollbarState: ScrollAreaScrollbarSharedState;
-    constructor(opts: ScrollAreaThumbImplStateProps, scrollbarState: ScrollAreaScrollbarSharedState);
+    constructor(opts: ScrollAreaThumbImplStateOpts, scrollbarState: ScrollAreaScrollbarSharedState);
     onpointerdowncapture(e: BitsPointerEvent): void;
     onpointerup(_: BitsPointerEvent): void;
     readonly props: {
@@ -272,13 +307,15 @@ declare class ScrollAreaThumbImplState {
         readonly onpointerup: (_: BitsPointerEvent) => void;
     };
 }
-type ScrollAreaCornerImplStateProps = WithRefProps;
-declare class ScrollAreaCornerImplState {
+interface ScrollAreaCornerImplStateOpts extends WithRefOpts {
+}
+export declare class ScrollAreaCornerImplState {
     #private;
-    readonly opts: ScrollAreaCornerImplStateProps;
+    static create(opts: ScrollAreaCornerImplStateOpts): ScrollAreaCornerImplState;
+    readonly opts: ScrollAreaCornerImplStateOpts;
     readonly root: ScrollAreaRootState;
     readonly hasSize: boolean;
-    constructor(opts: ScrollAreaCornerImplStateProps, root: ScrollAreaRootState);
+    constructor(opts: ScrollAreaCornerImplStateOpts, root: ScrollAreaRootState);
     readonly props: {
         id: string;
         style: {
@@ -291,21 +328,4 @@ declare class ScrollAreaCornerImplState {
         };
     };
 }
-export declare const ScrollAreaRootContext: Context<ScrollAreaRootState>;
-export declare const ScrollAreaScrollbarContext: Context<ScrollAreaScrollbarState>;
-export declare const ScrollAreaScrollbarVisibleContext: Context<ScrollAreaScrollbarVisibleState>;
-export declare const ScrollAreaScrollbarAxisContext: Context<ScrollbarAxis>;
-export declare const ScrollAreaScrollbarSharedContext: Context<ScrollAreaScrollbarSharedState>;
-export declare function useScrollAreaRoot(props: ScrollAreaRootStateProps): ScrollAreaRootState;
-export declare function useScrollAreaViewport(props: ScrollAreaViewportStateProps): ScrollAreaViewportState;
-export declare function useScrollAreaScrollbar(props: ScrollAreaScrollbarStateProps): ScrollAreaScrollbarState;
-export declare function useScrollAreaScrollbarVisible(): ScrollAreaScrollbarVisibleState;
-export declare function useScrollAreaScrollbarAuto(): ScrollAreaScrollbarAutoState;
-export declare function useScrollAreaScrollbarScroll(): ScrollAreaScrollbarScrollState;
-export declare function useScrollAreaScrollbarHover(): ScrollAreaScrollbarHoverState;
-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;
 export {};