bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/tabs/tabs.svelte.js

@@ -1,10 +1,9 @@
-import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
+import { useRefById } from "svelte-toolbelt";
+import { Context, watch } from "runed";
 import { getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 const ROOT_ATTR = "data-tabs-root";
 const LIST_ATTR = "data-tabs-list";
 const TRIGGER_ATTR = "data-tabs-trigger";
@@ -42,7 +41,7 @@ class TabsRootState {
             orientation: this.orientation,
         });
     }
-    registerTrigger = (id, value) => {
+    registerTrigger(id, value) {
         this.triggerIds.push(id);
         this.valueToTriggerId.set(value, id);
         // returns the deregister function
@@ -50,25 +49,16 @@ class TabsRootState {
             this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
             this.valueToTriggerId.delete(value);
         };
-    };
-    registerContent = (id, value) => {
+    }
+    registerContent(id, value) {
         this.valueToContentId.set(value, id);
         // returns the deregister function
         return () => {
             this.valueToContentId.delete(value);
         };
-    };
-    setValue = (v) => {
-        this.value.current = v;
-    };
-    createList(props) {
-        return new TabsListState(props, this);
     }
-    createTrigger(props) {
-        return new TabsTriggerState(props, this);
-    }
-    createContent(props) {
-        return new TabsContentState(props, this);
+    setValue(v) {
+        this.value.current = v;
     }
     props = $derived.by(() => ({
         id: this.#id.current,
@@ -119,66 +109,63 @@ class TabsTriggerState {
             id: this.#id,
             ref: this.#ref,
         });
-        $effect(() => {
-            // we want to track the value & id
-            const id = this.#id.current;
-            const value = this.#value.current;
-            untrack(() => {
-                const deregister = this.#root.registerTrigger(id, value);
-                return () => {
-                    deregister();
-                };
-            });
+        watch([() => this.#id.current, () => this.#value.current], ([id, value]) => {
+            return this.#root.registerTrigger(id, value);
         });
         $effect(() => {
-            if (this.#root.triggerIds.length) {
-                this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+            this.#root.triggerIds.length;
+            if (this.#isActive || !this.#root.value.current) {
+                this.#tabIndex = 0;
+            }
+            else {
+                this.#tabIndex = -1;
             }
         });
+        this.onfocus = this.onfocus.bind(this);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    activate = () => {
+    #activate() {
         if (this.#root.value.current === this.#value.current)
             return;
         this.#root.setValue(this.#value.current);
-    };
-    #onfocus = () => {
-        if (this.#root.activationMode.current !== "automatic" || this.#disabled.current)
+    }
+    onfocus(_) {
+        if (this.#root.activationMode.current !== "automatic" || this.#isDisabled)
             return;
-        this.activate();
-    };
-    #onclick = (e) => {
-        if (!this.#ref.current || this.#isDisabled)
+        this.#activate();
+    }
+    onclick(_) {
+        if (this.#isDisabled)
             return;
-        e.preventDefault();
-        this.#ref.current.focus();
-        this.activate();
-    };
-    #onkeydown = (e) => {
+        this.#activate();
+    }
+    onkeydown(e) {
         if (this.#isDisabled)
             return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
             e.preventDefault();
-            this.activate();
+            this.#activate();
             return;
         }
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "tab",
         "data-state": getTabDataState(this.#isActive),
         "data-value": this.#value.current,
         "data-orientation": getDataOrientation(this.#root.orientation.current),
-        "data-disabled": getDataDisabled(this.#disabled.current),
+        "data-disabled": getDataDisabled(this.#isDisabled),
         "aria-selected": getAriaSelected(this.#isActive),
         "aria-controls": this.#ariaControls,
         [TRIGGER_ATTR]: "",
-        disabled: getDisabled(this.#disabled.current),
+        disabled: getDisabled(this.#isDisabled),
         tabindex: this.#tabIndex,
         //
-        onclick: this.#onclick,
-        onfocus: this.#onfocus,
-        onkeydown: this.#onkeydown,
+        onclick: this.onclick,
+        onfocus: this.onfocus,
+        onkeydown: this.onkeydown,
     }));
 }
 class TabsContentState {
@@ -197,16 +184,8 @@ class TabsContentState {
             id: this.#id,
             ref: this.#ref,
         });
-        $effect(() => {
-            // we want to track the value & id
-            const id = this.#id.current;
-            const value = this.#value.current;
-            untrack(() => {
-                const deregister = this.#root.registerContent(id, value);
-                return () => {
-                    deregister();
-                };
-            });
+        watch([() => this.#id.current, () => this.#value.current], ([id, value]) => {
+            return this.#root.registerContent(id, value);
         });
     }
     props = $derived.by(() => ({
@@ -220,25 +199,19 @@ class TabsContentState {
         [CONTENT_ATTR]: "",
     }));
 }
-//
-// CONTEXT METHODS
-//
-const [setTabsRootContext, getTabsRootContext] = createContext("Tabs.Root");
+const TabsRootContext = new Context("Tabs.Root");
 export function useTabsRoot(props) {
-    return setTabsRootContext(new TabsRootState(props));
+    return TabsRootContext.set(new TabsRootState(props));
 }
 export function useTabsTrigger(props) {
-    return getTabsRootContext().createTrigger(props);
+    return new TabsTriggerState(props, TabsRootContext.get());
 }
 export function useTabsList(props) {
-    return getTabsRootContext().createList(props);
+    return new TabsListState(props, TabsRootContext.get());
 }
 export function useTabsContent(props) {
-    return getTabsRootContext().createContent(props);
+    return new TabsContentState(props, TabsRootContext.get());
 }
-//
-// HELPERS
-//
 function getTabDataState(condition) {
     return condition ? "active" : "inactive";
 }

package/dist/bits/tabs/types.d.ts

@@ -1,6 +1,6 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
 import type { Orientation } from "../../index.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type TabsActivationMode = "manual" | "automatic";
 export type TabsRootPropsWithoutHTML = WithChild<{
     /**
@@ -38,18 +38,10 @@ export type TabsRootPropsWithoutHTML = WithChild<{
      * @defaultValue false
      */
     disabled?: boolean;
-    /**
-     * Whether or not the value state is controlled or not. If `true`, the component will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
 }>;
-export type TabsRootProps = TabsRootPropsWithoutHTML & Without<PrimitiveDivAttributes, TabsRootPropsWithoutHTML>;
+export type TabsRootProps = TabsRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsRootPropsWithoutHTML>;
 export type TabsListPropsWithoutHTML = WithChild;
-export type TabsListProps = TabsListPropsWithoutHTML & Without<PrimitiveDivAttributes, TabsListPropsWithoutHTML>;
+export type TabsListProps = TabsListPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsListPropsWithoutHTML>;
 export type TabsTriggerPropsWithoutHTML = WithChild<{
     /**
      * The value of the tab associated with this trigger.
@@ -62,11 +54,11 @@ export type TabsTriggerPropsWithoutHTML = WithChild<{
      */
     disabled?: boolean | null | undefined;
 }>;
-export type TabsTriggerProps = TabsTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, TabsTriggerPropsWithoutHTML>;
+export type TabsTriggerProps = TabsTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, TabsTriggerPropsWithoutHTML>;
 export type TabsContentPropsWithoutHTML = WithChild<{
     /**
      * The value of the tab associated with this content.
      */
     value: string;
 }>;
-export type TabsContentProps = TabsContentPropsWithoutHTML & Without<PrimitiveDivAttributes, TabsContentPropsWithoutHTML>;
+export type TabsContentProps = TabsContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsContentPropsWithoutHTML>;

package/dist/bits/toggle/components/toggle.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ToggleRootProps } from "../types.js";
 	import { useToggleRoot } from "../toggle.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,22 +12,17 @@
 		onPressedChange = noop,
 		disabled = false,
 		type = "button",
-		controlledPressed = false,
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: ToggleRootProps = $props();
 
 	const toggleState = useToggleRoot({
 		pressed: box.with(
 			() => pressed,
 			(v) => {
-				if (controlledPressed) {
-					onPressedChange(v);
-				} else {
-					pressed = v;
-					onPressedChange(v);
-				}
+				pressed = v;
+				onPressedChange(v);
 			}
 		),
 		disabled: box.with(() => disabled ?? false),

package/dist/bits/toggle/components/toggle.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref" | "pressed">;
-type Toggle = InstanceType<typeof Toggle>;
+import type { ToggleRootProps } from "../types.js";
+declare const Toggle: import("svelte").Component<ToggleRootProps, {}, "ref" | "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/bits/toggle/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/toggle.svelte";
+export type { ToggleRootProps as RootProps } from "./types.js";

package/dist/bits/toggle/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/toggle.svelte";

package/dist/bits/toggle/index.d.ts

@@ -1,2 +1 @@
-export { default as Root } from "./components/toggle.svelte";
-export type { ToggleRootProps as RootProps } from "./types.js";
+export * as Toggle from "./exports.js";

package/dist/bits/toggle/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/toggle.svelte";
+export * as Toggle from "./exports.js";

package/dist/bits/toggle/toggle.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
+import type { BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 type ToggleRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
 }> & WritableBoxedValues<{
@@ -9,14 +9,15 @@ declare class ToggleRootState {
     #private;
     pressed: ToggleRootStateProps["pressed"];
     constructor(props: ToggleRootStateProps);
+    onclick(_: BitsMouseEvent): void;
     props: {
         readonly "data-toggle-root": "";
+        readonly id: string;
         readonly "data-disabled": "" | undefined;
-        readonly "aria-pressed": "false" | "true";
-        readonly "data-state": "on" | "off";
+        readonly "aria-pressed": "true" | "false";
+        readonly "data-state": "off" | "on";
         readonly disabled: true | undefined;
-        readonly onclick: () => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
 export declare function useToggleRoot(props: ToggleRootStateProps): ToggleRootState;

package/dist/bits/toggle/toggle.svelte.js

@@ -1,6 +1,5 @@
+import { useRefById } from "svelte-toolbelt";
 import { getAriaPressed, getDataDisabled, getDisabled } from "../../internal/attrs.js";
-import { kbd } from "../../internal/kbd.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 const ROOT_ATTR = "data-toggle-root";
 class ToggleRootState {
     #id;
@@ -16,40 +15,31 @@ class ToggleRootState {
             id: this.#id,
             ref: this.#ref,
         });
+        this.onclick = this.onclick.bind(this);
     }
-    #togglePressed = () => {
+    #togglePressed() {
         if (!this.#disabled.current) {
             this.pressed.current = !this.pressed.current;
         }
-    };
-    #onclick = () => {
-        this.#togglePressed();
-    };
-    #onkeydown = (e) => {
-        if (e.key !== kbd.ENTER || e.key !== kbd.SPACE)
+    }
+    onclick(_) {
+        if (this.#disabled.current)
             return;
-        e.preventDefault();
         this.#togglePressed();
-    };
+    }
     props = $derived.by(() => ({
         [ROOT_ATTR]: "",
+        id: this.#id.current,
         "data-disabled": getDataDisabled(this.#disabled.current),
         "aria-pressed": getAriaPressed(this.pressed.current),
         "data-state": getToggleDataState(this.pressed.current),
         disabled: getDisabled(this.#disabled.current),
-        onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
+        onclick: this.onclick,
     }));
 }
-//
-// METHODS
-//
 export function useToggleRoot(props) {
     return new ToggleRootState(props);
 }
-//
-// HELPERS
-//
 export function getToggleDataState(condition) {
     return condition ? "on" : "off";
 }

package/dist/bits/toggle/types.d.ts

@@ -1,5 +1,5 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes } from "../../shared/attributes.js";
 export type ToggleRootSnippetProps = {
     pressed: boolean;
 };
@@ -20,14 +20,5 @@ export type ToggleRootPropsWithoutHTML = WithChild<{
      * @defaultValue false
      */
     disabled?: boolean | null | undefined;
-    /**
-     * Whether or not the pressed state is controlled or not. If `true`, the component will not
-     * update the pressed state internally, instead it will call `onPressedChange` when it
-     * would have otherwise, and it is up to you to update the `pressed` prop that is passed to
-     * the component.
-     *
-     * @defaultValue false
-     */
-    controlledPressed?: boolean;
 }, ToggleRootSnippetProps>;
-export type ToggleRootProps = ToggleRootPropsWithoutHTML & Without<PrimitiveButtonAttributes, ToggleRootPropsWithoutHTML>;
+export type ToggleRootProps = ToggleRootPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToggleRootPropsWithoutHTML>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ItemProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ToggleGroupItemProps } from "../types.js";
 	import { useToggleGroupItem } from "../toggle-group.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -14,7 +13,7 @@
 		id = useId(),
 		type = "button",
 		...restProps
-	}: ItemProps = $props();
+	}: ToggleGroupItemProps = $props();
 
 	const itemState = useToggleGroupItem({
 		id: box.with(() => id),

package/dist/bits/toggle-group/components/toggle-group-item.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { ItemProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ToggleGroupItem: $$__sveltets_2_IsomorphicComponent<ItemProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type ToggleGroupItem = InstanceType<typeof ToggleGroupItem>;
+import type { ToggleGroupItemProps } from "../types.js";
+declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "ref">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
 export default ToggleGroupItem;

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { type WritableBox, box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { ToggleGroupRootProps } from "../types.js";
 	import { useToggleGroupRoot } from "../toggle-group.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		id = useId(),
@@ -16,19 +16,15 @@
 		loop = true,
 		orientation = "horizontal",
 		rovingFocus = true,
-		controlledValue = false,
 		child,
 		children,
 		...restProps
-	}: RootProps = $props();
+	}: ToggleGroupRootProps = $props();
 
 	if (value === undefined) {
 		const defaultValue = type === "single" ? "" : [];
-		if (controlledValue) {
-			onValueChange(defaultValue as any);
-		} else {
-			value = defaultValue;
-		}
+
+		value = defaultValue;
 	}
 
 	const rootState = useToggleGroupRoot({
@@ -36,12 +32,9 @@
 		value: box.with(
 			() => value!,
 			(v) => {
-				if (controlledValue) {
-					onValueChange(v as any);
-				} else {
-					value = v;
-					onValueChange?.(v as any);
-				}
+				value = v;
+				// @ts-expect-error - we know
+				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
 		disabled: box.with(() => disabled),

package/dist/bits/toggle-group/components/toggle-group.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ToggleGroup: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "ref">;
-type ToggleGroup = InstanceType<typeof ToggleGroup>;
+import type { ToggleGroupRootProps } from "../types.js";
+declare const ToggleGroup: import("svelte").Component<ToggleGroupRootProps, {}, "value" | "ref">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;

package/dist/bits/toggle-group/exports.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/toggle-group.svelte";
+export { default as Item } from "./components/toggle-group-item.svelte";
+export type { ToggleGroupRootProps as RootProps, ToggleGroupItemProps as ItemProps, } from "./types.js";

package/dist/bits/toggle-group/exports.js

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/toggle-group.svelte";
+export { default as Item } from "./components/toggle-group-item.svelte";

package/dist/bits/toggle-group/index.d.ts

@@ -1,3 +1 @@
-export { default as Root } from "./components/toggle-group.svelte";
-export { default as Item } from "./components/toggle-group-item.svelte";
-export type { ToggleGroupRootProps as RootProps, ToggleGroupItemProps as ItemProps, } from "./types.js";
+export * as ToggleGroup from "./exports.js";

package/dist/bits/toggle-group/index.js

@@ -1,2 +1 @@
-export { default as Root } from "./components/toggle-group.svelte";
-export { default as Item } from "./components/toggle-group-item.svelte";
+export * as ToggleGroup from "./exports.js";

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

@@ -1,8 +1,8 @@
-import type { WritableBox } from "svelte-toolbelt";
+import { type WritableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { Orientation } from "../../shared/index.js";
-import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 type ToggleGroupBaseStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     rovingFocus: boolean;
@@ -34,8 +34,8 @@ declare class ToggleGroupSingleState extends ToggleGroupBaseState {
     isMulti: boolean;
     anyPressed: boolean;
     constructor(props: ToggleGroupSingleStateProps);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string, id: string) => void;
+    includesItem(item: string): boolean;
+    toggleItem(item: string, id: string): void;
 }
 type ToggleGroupMultipleStateProps = ToggleGroupBaseStateProps & WritableBoxedValues<{
     value: string[];
@@ -45,8 +45,8 @@ declare class ToggleGroupMultipleState extends ToggleGroupBaseState {
     isMulti: boolean;
     anyPressed: boolean;
     constructor(props: ToggleGroupMultipleStateProps);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string, id: string) => void;
+    includesItem(item: string): boolean;
+    toggleItem(item: string, id: string): void;
 }
 type ToggleGroupState = ToggleGroupSingleState | ToggleGroupMultipleState;
 type ToggleGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
@@ -58,7 +58,8 @@ type ToggleGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
 declare class ToggleGroupItemState {
     #private;
     constructor(props: ToggleGroupItemStateProps);
-    toggleItem: () => void;
+    onclick(_: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
     isPressed: boolean;
     props: {
         readonly id: string;
@@ -66,14 +67,14 @@ declare class ToggleGroupItemState {
         readonly tabindex: number;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
-        readonly "data-state": "on" | "off";
+        readonly "data-state": "off" | "on";
         readonly "data-value": string;
-        readonly "aria-pressed": "false" | "true" | undefined;
-        readonly "aria-checked": "mixed" | "false" | "true" | undefined;
+        readonly "aria-pressed": "true" | "false" | undefined;
+        readonly "aria-checked": "true" | "false" | "mixed" | undefined;
         readonly disabled: true | undefined;
         readonly "data-toggle-group-item": "";
-        readonly onclick: () => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
 type InitToggleGroupProps = WithRefProps<{