bits-ui 2.6.2 → 2.8.0

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

@@ -1,41 +1,49 @@
-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;
-}> & WritableBoxedValues<{
+    readonly: boolean;
+}>, 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: {
         readonly id: string;
         readonly role: "radiogroup";
         readonly "aria-required": "true" | "false";
+        readonly "aria-disabled": "true" | "false";
+        readonly "aria-readonly": "true" | undefined;
         readonly "data-disabled": "" | undefined;
+        readonly "data-readonly": "" | undefined;
         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;
@@ -48,6 +56,7 @@ declare class RadioGroupItemState {
         readonly "data-value": string;
         readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
+        readonly "data-readonly": "" | undefined;
         readonly "data-state": "checked" | "unchecked";
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly type: "button";
@@ -58,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: {
@@ -69,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, } from "../../internal/attrs.js";
-import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
+import { createBitsAttrs, getAriaChecked, getAriaRequired, getDataDisabled, getDataReadonly, getAriaDisabled, } from "../../internal/attrs.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,
@@ -30,17 +34,24 @@ class RadioGroupRootState {
         id: this.opts.id.current,
         role: "radiogroup",
         "aria-required": getAriaRequired(this.opts.required.current),
+        "aria-disabled": getAriaDisabled(this.opts.disabled.current),
+        "aria-readonly": this.opts.readonly.current ? "true" : undefined,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-readonly": getDataReadonly(this.opts.readonly.current),
         "data-orientation": this.opts.orientation.current,
         [radioGroupAttrs.root]: "",
         ...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);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    #isReadonly = $derived.by(() => this.root.opts.readonly.current);
     #isChecked = $derived.by(() => this.root.isChecked(this.opts.value.current));
     #tabIndex = $state(-1);
     constructor(opts, root) {
@@ -67,12 +78,12 @@ class RadioGroupItemState {
         this.onfocus = this.onfocus.bind(this);
     }
     onclick(_) {
-        if (this.opts.disabled.current)
+        if (this.opts.disabled.current || this.#isReadonly)
             return;
         this.root.setValue(this.opts.value.current);
     }
     onfocus(_) {
-        if (!this.root.hasValue)
+        if (!this.root.hasValue || this.#isReadonly)
             return;
         this.root.setValue(this.opts.value.current);
     }
@@ -81,7 +92,9 @@ class RadioGroupItemState {
             return;
         if (e.key === kbd.SPACE) {
             e.preventDefault();
-            this.root.setValue(this.opts.value.current);
+            if (!this.#isReadonly) {
+                this.root.setValue(this.opts.value.current);
+            }
             return;
         }
         this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e, true);
@@ -93,6 +106,7 @@ class RadioGroupItemState {
         "data-value": this.opts.value.current,
         "data-orientation": this.root.opts.orientation.current,
         "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-readonly": getDataReadonly(this.#isReadonly),
         "data-state": this.#isChecked ? "checked" : "unchecked",
         "aria-checked": getAriaChecked(this.#isChecked, false),
         [radioGroupAttrs.item]: "",
@@ -106,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(() => ({
@@ -119,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/radio-group/types.d.ts

@@ -6,20 +6,20 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{
      * The orientation of the radio group. Used to determine
      * how keyboard navigation should work.
      *
-     * @defaultValue "vertical"
+     * @default "vertical"
      */
     orientation?: Orientation;
     /**
      * Whether to loop around the radio items when navigating
      * with the keyboard.
      *
-     * @defaultValue true
+     * @default true
      */
     loop?: boolean;
     /**
      * The value of the selected radio item.
      *
-     * @defaultValue ""
+     * @default ""
      */
     value?: string;
     /**
@@ -31,13 +31,13 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{
      * form submission. If not provided, a hidden input will not
      * be rendered and the radio group will not be part of a form.
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     name?: string;
     /**
      * Whether the radio group is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -46,6 +46,13 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{
      * input is rendered.
      */
     required?: boolean;
+    /**
+     * Whether the radio group is readonly. When readonly, users can
+     * focus and navigate through items but cannot change the value.
+     *
+     * @default false
+     */
+    readonly?: boolean;
 }>;
 export type RadioGroupRootProps = RadioGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RadioGroupRootPropsWithoutHTML>;
 export type RadioGroupItemSnippetProps = {
@@ -59,7 +66,7 @@ export type RadioGroupItemPropsWithoutHTML = WithChild<{
     /**
      * Whether the radio item is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean | null | undefined;
 }, RadioGroupItemSnippetProps>;

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 {};