bits-ui 2.7.0 → 2.8.0

package/dist/bits/radio-group/radio-group.svelte.d.ts

@@ -1,22 +1,24 @@
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
-import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
-type RadioGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+interface RadioGroupRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
     loop: boolean;
     orientation: Orientation;
     name: string | undefined;
     readonly: boolean;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: string;
-}>>;
-declare class RadioGroupRootState {
-    readonly opts: RadioGroupRootStateProps;
+}> {
+}
+export declare class RadioGroupRootState {
+    static create(opts: RadioGroupRootStateOpts): RadioGroupRootState;
+    readonly opts: RadioGroupRootStateOpts;
     readonly hasValue: boolean;
-    rovingFocusGroup: UseRovingFocusReturn;
-    constructor(opts: RadioGroupRootStateProps);
+    readonly rovingFocusGroup: RovingFocusGroup;
+    constructor(opts: RadioGroupRootStateOpts);
     isChecked(value: string): boolean;
     setValue(value: string): void;
     readonly props: {
@@ -30,16 +32,18 @@ declare class RadioGroupRootState {
         readonly "data-orientation": Orientation;
     };
 }
-type RadioGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
+interface RadioGroupItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     value: string;
-}>>;
-declare class RadioGroupItemState {
+}> {
+}
+export declare class RadioGroupItemState {
     #private;
-    readonly opts: RadioGroupItemStateProps;
+    static create(opts: RadioGroupItemStateOpts): RadioGroupItemState;
+    readonly opts: RadioGroupItemStateOpts;
     readonly root: RadioGroupRootState;
     readonly checked: boolean;
-    constructor(opts: RadioGroupItemStateProps, root: RadioGroupRootState);
+    constructor(opts: RadioGroupItemStateOpts, root: RadioGroupRootState);
     onclick(_: BitsMouseEvent): void;
     onfocus(_: BitsFocusEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -63,7 +67,8 @@ declare class RadioGroupItemState {
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
-declare class RadioGroupInputState {
+export declare class RadioGroupInputState {
+    static create(): RadioGroupInputState;
     readonly root: RadioGroupRootState;
     readonly shouldRender: boolean;
     readonly props: {
@@ -74,7 +79,4 @@ declare class RadioGroupInputState {
     };
     constructor(root: RadioGroupRootState);
 }
-export declare function useRadioGroupRoot(props: RadioGroupRootStateProps): RadioGroupRootState;
-export declare function useRadioGroupItem(props: RadioGroupItemStateProps): RadioGroupItemState;
-export declare function useRadioGroupInput(): RadioGroupInputState;
 export {};

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

@@ -1,19 +1,23 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaChecked, getAriaRequired, getDataDisabled, getDataReadonly, getAriaDisabled, } from "../../internal/attrs.js";
-import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 const radioGroupAttrs = createBitsAttrs({
     component: "radio-group",
     parts: ["root", "item"],
 });
-class RadioGroupRootState {
+const RadioGroupRootContext = new Context("RadioGroup.Root");
+export class RadioGroupRootState {
+    static create(opts) {
+        return RadioGroupRootContext.set(new RadioGroupRootState(opts));
+    }
     opts;
     hasValue = $derived.by(() => this.opts.value.current !== "");
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: this.opts.ref,
             candidateAttr: radioGroupAttrs.item,
             loop: this.opts.loop,
@@ -39,7 +43,10 @@ class RadioGroupRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class RadioGroupItemState {
+export class RadioGroupItemState {
+    static create(opts) {
+        return new RadioGroupItemState(opts, RadioGroupRootContext.get());
+    }
     opts;
     root;
     checked = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
@@ -113,7 +120,10 @@ class RadioGroupItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-class RadioGroupInputState {
+export class RadioGroupInputState {
+    static create() {
+        return new RadioGroupInputState(RadioGroupRootContext.get());
+    }
     root;
     shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
     props = $derived.by(() => ({
@@ -126,13 +136,3 @@ class RadioGroupInputState {
         this.root = root;
     }
 }
-const RadioGroupRootContext = new Context("RadioGroup.Root");
-export function useRadioGroupRoot(props) {
-    return RadioGroupRootContext.set(new RadioGroupRootState(props));
-}
-export function useRadioGroupItem(props) {
-    return new RadioGroupItemState(props, RadioGroupRootContext.get());
-}
-export function useRadioGroupInput() {
-    return new RadioGroupInputState(RadioGroupRootContext.get());
-}

package/dist/bits/range-calendar/components/range-calendar-cell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RangeCalendarCellProps } from "../types.js";
-	import { useRangeCalendarCell } from "../range-calendar.svelte.js";
+	import { RangeCalendarCellState } from "../range-calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: RangeCalendarCellProps = $props();
 
-	const cellState = useRangeCalendarCell({
+	const cellState = RangeCalendarCellState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/range-calendar/components/range-calendar-day.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RangeCalendarDayProps } from "../types.js";
-	import { useRangeCalendarDay } from "../range-calendar.svelte.js";
+	import { RangeCalendarDayState } from "../range-calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -14,7 +14,7 @@
 		...restProps
 	}: RangeCalendarDayProps = $props();
 
-	const dayState = useRangeCalendarDay({
+	const dayState = RangeCalendarDayState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -3,7 +3,7 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { type DateValue } from "@internationalized/date";
 	import type { RangeCalendarRootProps } from "../types.js";
-	import { useRangeCalendarRoot } from "../range-calendar.svelte.js";
+	import { RangeCalendarRootState } from "../range-calendar.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
@@ -82,7 +82,7 @@
 		}
 	);
 
-	const rootState = useRangeCalendarRoot({
+	const rootState = RangeCalendarRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/range-calendar/range-calendar.svelte.d.ts

@@ -1,18 +1,17 @@
 import { type DateValue } from "@internationalized/date";
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { DateRange, Month } from "../../shared/index.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { calendarAttrs } from "../../internal/date-time/calendar-helpers.svelte.js";
 import type { WeekStartsOn } from "../../shared/date/types.js";
-type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
+interface RangeCalendarRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: DateRange;
     placeholder: DateValue;
     startValue: DateValue | undefined;
     endValue: DateValue | undefined;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     preventDeselect: boolean;
     minValue: DateValue | undefined;
     maxValue: DateValue | undefined;
@@ -38,12 +37,13 @@ type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     onRangeSelect?: () => void;
     monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
     yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
-}> & {
+}> {
     defaultPlaceholder: DateValue;
-}>;
+}
 export declare class RangeCalendarRootState {
     #private;
-    readonly opts: RangeCalendarRootStateProps;
+    static create(opts: RangeCalendarRootStateOpts): RangeCalendarRootState | import("../calendar/calendar.svelte.js").CalendarRootState;
+    readonly opts: RangeCalendarRootStateOpts;
     readonly visibleMonths: DateValue[];
     months: Month<DateValue>[];
     announcer: Announcer;
@@ -73,7 +73,7 @@ export declare class RangeCalendarRootState {
     } | null;
     readonly initialPlaceholderYear: number;
     readonly defaultYears: number[];
-    constructor(opts: RangeCalendarRootStateProps);
+    constructor(opts: RangeCalendarRootStateOpts);
     setMonths: (months: Month<DateValue>[]) => void;
     isOutsideVisibleMonths(date: DateValue): boolean;
     isDateDisabled(date: DateValue): boolean;
@@ -111,12 +111,14 @@ export declare class RangeCalendarRootState {
         readonly "data-readonly": "" | undefined;
     };
 }
-type RangeCalendarCellStateProps = WithRefProps<ReadableBoxedValues<{
+interface RangeCalendarCellStateOpts extends WithRefOpts, ReadableBoxedValues<{
     date: DateValue;
     month: DateValue;
-}>>;
+}> {
+}
 export declare class RangeCalendarCellState {
-    readonly opts: RangeCalendarCellStateProps;
+    static create(opts: RangeCalendarCellStateOpts): RangeCalendarCellState;
+    readonly opts: RangeCalendarCellStateOpts;
     readonly root: RangeCalendarRootState;
     readonly cellDate: Date;
     readonly isDisabled: boolean;
@@ -134,7 +136,7 @@ export declare class RangeCalendarCellState {
     readonly isSelectionEnd: boolean;
     readonly isHighlighted: boolean;
     readonly labelText: string;
-    constructor(opts: RangeCalendarCellStateProps, root: RangeCalendarRootState);
+    constructor(opts: RangeCalendarCellStateOpts, root: RangeCalendarRootState);
     readonly snippetProps: {
         disabled: boolean;
         unavailable: boolean;
@@ -180,12 +182,14 @@ export declare class RangeCalendarCellState {
         readonly "aria-disabled": "true" | "false";
     };
 }
-type RangeCalendarDayStateProps = WithRefProps;
-declare class RangeCalendarDayState {
+interface RangeCalendarDayStateOpts extends WithRefOpts {
+}
+export declare class RangeCalendarDayState {
     #private;
-    readonly opts: RangeCalendarDayStateProps;
+    static create(opts: RangeCalendarDayStateOpts): RangeCalendarDayState;
+    readonly opts: RangeCalendarDayStateOpts;
     readonly cell: RangeCalendarCellState;
-    constructor(opts: RangeCalendarDayStateProps, cell: RangeCalendarCellState);
+    constructor(opts: RangeCalendarDayStateOpts, cell: RangeCalendarCellState);
     onclick(e: BitsMouseEvent): void;
     onmouseenter(_: BitsMouseEvent): void;
     onfocusin(_: BitsFocusEvent): void;
@@ -222,7 +226,4 @@ declare class RangeCalendarDayState {
         readonly "aria-disabled": "true" | "false";
     };
 }
-export declare function useRangeCalendarRoot(props: RangeCalendarRootStateProps): RangeCalendarRootState | import("../calendar/calendar.svelte.js").CalendarRootState;
-export declare function useRangeCalendarCell(props: RangeCalendarCellStateProps): RangeCalendarCellState;
-export declare function useRangeCalendarDay(props: RangeCalendarDayStateProps): RangeCalendarDayState;
 export {};

package/dist/bits/range-calendar/range-calendar.svelte.js

@@ -1,5 +1,5 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
-import { attachRef, DOMContext } from "svelte-toolbelt";
+import { attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { CalendarRootContext } from "../calendar/calendar.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -9,7 +9,11 @@ import { createFormatter } from "../../internal/date-time/formatter.js";
 import { calendarAttrs, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDefaultYears, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { areAllDaysBetweenValid, getDateValueType, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
 import { onMount, untrack } from "svelte";
+const RangeCalendarCellContext = new Context("RangeCalendar.Cell");
 export class RangeCalendarRootState {
+    static create(opts) {
+        return CalendarRootContext.set(new RangeCalendarRootState(opts));
+    }
     opts;
     visibleMonths = $derived.by(() => this.months.map((month) => month.value));
     months = $state([]);
@@ -526,6 +530,9 @@ export class RangeCalendarRootState {
     }
 }
 export class RangeCalendarCellState {
+    static create(opts) {
+        return RangeCalendarCellContext.set(new RangeCalendarCellState(opts, CalendarRootContext.get()));
+    }
     opts;
     root;
     cellDate = $derived.by(() => toDate(this.opts.date.current));
@@ -599,7 +606,10 @@ export class RangeCalendarCellState {
         ...attachRef(this.opts.ref),
     }));
 }
-class RangeCalendarDayState {
+export class RangeCalendarDayState {
+    static create(opts) {
+        return new RangeCalendarDayState(opts, RangeCalendarCellContext.get());
+    }
     opts;
     cell;
     constructor(opts, cell) {
@@ -653,13 +663,3 @@ class RangeCalendarDayState {
         ...attachRef(this.opts.ref),
     }));
 }
-const RangeCalendarCellContext = new Context("RangeCalendar.Cell");
-export function useRangeCalendarRoot(props) {
-    return CalendarRootContext.set(new RangeCalendarRootState(props));
-}
-export function useRangeCalendarCell(props) {
-    return RangeCalendarCellContext.set(new RangeCalendarCellState(props, CalendarRootContext.get()));
-}
-export function useRangeCalendarDay(props) {
-    return new RangeCalendarDayState(props, RangeCalendarCellContext.get());
-}

package/dist/bits/rating-group/components/rating-group-input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { useRatingGroupHiddenInput } from "../rating-group.svelte.js";
+	import { RatingGroupHiddenInputState } from "../rating-group.svelte.js";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
 
-	const inputState = useRatingGroupHiddenInput();
+	const inputState = RatingGroupHiddenInputState.create();
 </script>
 
 {#if inputState.shouldRender}

package/dist/bits/rating-group/components/rating-group-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RatingGroupItemProps } from "../types.js";
-	import { useRatingGroupItem } from "../rating-group.svelte.js";
+	import { RatingGroupItemState } from "../rating-group.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: RatingGroupItemProps = $props();
 
-	const itemState = useRatingGroupItem({
+	const itemState = RatingGroupItemState.create({
 		disabled: box.with(() => Boolean(disabled)),
 		index: box.with(() => index),
 		id: box.with(() => id),

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RatingGroupRootProps } from "../types.js";
-	import { useRatingGroupRoot } from "../rating-group.svelte.js";
+	import { RatingGroupRootState } from "../rating-group.svelte.js";
 	import RatingGroupInput from "./rating-group-input.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -38,7 +38,7 @@
 		return (value: number, max: number) => `${value} out of ${max}`;
 	});
 
-	const rootState = useRatingGroupRoot({
+	const rootState = RatingGroupRootState.create({
 		orientation: box.with(() => orientation),
 		disabled: box.with(() => disabled),
 		name: box.with(() => name),

package/dist/bits/rating-group/rating-group.svelte.d.ts

@@ -1,9 +1,8 @@
-import { DOMContext } from "svelte-toolbelt";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
 import type { RatingGroupAriaValuetext, RatingGroupItemState as RatingGroupItemStateType } from "./types.js";
 import type { Orientation } from "../../shared/index.js";
-type RatingGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
+interface RatingGroupRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
     orientation: Orientation;
@@ -14,12 +13,14 @@ type RatingGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
     readonly: boolean;
     hoverPreview: boolean;
     ariaValuetext: NonNullable<RatingGroupAriaValuetext>;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: number;
-}>>;
-declare class RatingGroupRootState {
+}> {
+}
+export declare class RatingGroupRootState {
     #private;
-    readonly opts: RatingGroupRootStateProps;
+    static create(opts: RatingGroupRootStateOpts): RatingGroupRootState;
+    readonly opts: RatingGroupRootStateOpts;
     domContext: DOMContext;
     readonly hasValue: boolean;
     readonly valueToUse: number;
@@ -29,7 +30,7 @@ declare class RatingGroupRootState {
         index: number;
         state: RatingGroupItemStateType;
     }[];
-    constructor(opts: RatingGroupRootStateProps);
+    constructor(opts: RatingGroupRootStateOpts);
     isActive(itemIndex: number): boolean;
     isPartial(itemIndex: number): boolean;
     setHoverValue(value: number | null): void;
@@ -69,15 +70,17 @@ declare class RatingGroupRootState {
         readonly onpointerleave: () => void;
     };
 }
-type RatingGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
+interface RatingGroupItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     index: number;
-}>>;
-declare class RatingGroupItemState {
+}> {
+}
+export declare class RatingGroupItemState {
     #private;
-    readonly opts: RatingGroupItemStateProps;
+    static create(opts: RatingGroupItemStateOpts): RatingGroupItemState;
+    readonly opts: RatingGroupItemStateOpts;
     readonly root: RatingGroupRootState;
-    constructor(opts: RatingGroupItemStateProps, root: RatingGroupRootState);
+    constructor(opts: RatingGroupItemStateOpts, root: RatingGroupRootState);
     onclick(e: BitsMouseEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     readonly snippetProps: {
@@ -95,7 +98,8 @@ declare class RatingGroupItemState {
         readonly onpointermove: (e: BitsPointerEvent) => void;
     };
 }
-declare class RatingGroupHiddenInputState {
+export declare class RatingGroupHiddenInputState {
+    static create(): RatingGroupHiddenInputState;
     readonly root: RatingGroupRootState;
     readonly shouldRender: boolean;
     readonly props: {
@@ -106,7 +110,4 @@ declare class RatingGroupHiddenInputState {
     };
     constructor(root: RatingGroupRootState);
 }
-export declare function useRatingGroupRoot(props: RatingGroupRootStateProps): RatingGroupRootState;
-export declare function useRatingGroupItem(props: RatingGroupItemStateProps): RatingGroupItemState;
-export declare function useRatingGroupHiddenInput(): RatingGroupHiddenInputState;
 export {};

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()}