bits-ui 2.6.2 → 2.8.0

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -1,13 +1,12 @@
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { PinInputCell, PinInputRootProps as RootComponentProps } from "./types.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
 export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
 export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
-type PinInputRootStateProps = WithRefProps<WritableBoxedValues<{
+interface PinInputRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: string;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     inputId: string;
     disabled: boolean;
     onComplete: (...args: any[]) => void;
@@ -18,14 +17,16 @@ type PinInputRootStateProps = WithRefProps<WritableBoxedValues<{
     textAlign: RootComponentProps["textalign"];
     autocomplete: RootComponentProps["autocomplete"];
     inputmode: RootComponentProps["inputmode"];
-}>>;
-declare class PinInputRootState {
+}> {
+}
+export declare class PinInputRootState {
     #private;
-    readonly opts: PinInputRootStateProps;
+    static create(opts: PinInputRootStateOpts): PinInputRootState;
+    readonly opts: PinInputRootStateOpts;
     domContext: DOMContext;
-    constructor(opts: PinInputRootStateProps);
+    constructor(opts: PinInputRootStateOpts);
     onkeydown: (e: BitsKeyboardEvent) => void;
-    rootProps: {
+    readonly rootProps: {
         readonly id: string;
         readonly style: {
             position: string;
@@ -35,7 +36,7 @@ declare class PinInputRootState {
             pointerEvents: string;
         };
     };
-    inputWrapperProps: {
+    readonly inputWrapperProps: {
         readonly style: {
             readonly position: "absolute";
             readonly inset: 0;
@@ -48,7 +49,7 @@ declare class PinInputRootState {
     onmouseover: (_: BitsMouseEvent) => void;
     onmouseleave: (_: BitsMouseEvent) => void;
     onblur: (_: BitsFocusEvent) => void;
-    inputProps: {
+    readonly inputProps: {
         id: string;
         style: {
             position: string;
@@ -89,7 +90,7 @@ declare class PinInputRootState {
         onfocus: (_: BitsFocusEvent<HTMLInputElement>) => void;
         onblur: (_: BitsFocusEvent) => void;
     };
-    snippetProps: {
+    readonly snippetProps: {
         cells: {
             char: string | null;
             isActive: boolean;
@@ -99,19 +100,19 @@ declare class PinInputRootState {
         isHovering: boolean;
     };
 }
-type PinInputCellStateProps = WithRefProps & ReadableBoxedValues<{
+interface PinInputCellStateOpts extends WithRefOpts, ReadableBoxedValues<{
     cell: PinInputCell;
-}>;
-declare class PinInputCellState {
-    readonly opts: PinInputCellStateProps;
-    constructor(opts: PinInputCellStateProps);
-    props: {
+}> {
+}
+export declare class PinInputCellState {
+    static create(opts: PinInputCellStateOpts): PinInputCellState;
+    readonly opts: PinInputCellStateOpts;
+    constructor(opts: PinInputCellStateOpts);
+    readonly props: {
         readonly id: string;
         readonly "data-active": "" | undefined;
         readonly "data-inactive": "" | undefined;
     };
 }
 export declare function syncTimeouts(cb: (...args: any[]) => unknown, domContext: DOMContext): number[];
-export declare function usePinInput(props: PinInputRootStateProps): PinInputRootState;
-export declare function usePinInputCell(props: PinInputCellStateProps): PinInputCellState;
 export {};

package/dist/bits/pin-input/pin-input.svelte.js

@@ -1,6 +1,6 @@
 import { Previous, watch } from "runed";
 import { onMount } from "svelte";
-import { box, attachRef, DOMContext } from "svelte-toolbelt";
+import { box, attachRef, DOMContext, } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
 import { createBitsAttrs, getDisabled } from "../../internal/attrs.js";
 import { on } from "svelte/events";
@@ -27,7 +27,10 @@ const KEYS_TO_IGNORE = [
     "Control",
     "Meta",
 ];
-class PinInputRootState {
+export class PinInputRootState {
+    static create(opts) {
+        return new PinInputRootState(opts);
+    }
     opts;
     #inputRef = box(null);
     #isHoveringInput = $state(false);
@@ -389,7 +392,10 @@ class PinInputRootState {
         isHovering: this.#isHoveringInput,
     }));
 }
-class PinInputCellState {
+export class PinInputCellState {
+    static create(opts) {
+        return new PinInputCellState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -417,9 +423,3 @@ function safeInsertRule(sheet, rule) {
         console.error("pin input could not insert CSS rule:", rule);
     }
 }
-export function usePinInput(props) {
-    return new PinInputRootState(props);
-}
-export function usePinInputCell(props) {
-    return new PinInputCellState(props);
-}

package/dist/bits/popover/components/popover-close.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverCloseProps } from "../types.js";
-	import { usePopoverClose } from "../popover.svelte.js";
+	import { PopoverCloseState } from "../popover.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -14,7 +14,7 @@
 		...restProps
 	}: PopoverCloseProps = $props();
 
-	const closeState = usePopoverClose({
+	const closeState = PopoverCloseState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/popover/components/popover-content-static.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverContentStaticProps } from "../types.js";
-	import { usePopoverContent } from "../popover.svelte.js";
+	import { PopoverContentState } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -24,7 +24,7 @@
 		...restProps
 	}: PopoverContentStaticProps = $props();
 
-	const contentState = usePopoverContent({
+	const contentState = PopoverContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -70,7 +70,7 @@
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
 		isStatic
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		{id}
 		{trapFocus}
 		{preventScroll}

package/dist/bits/popover/components/popover-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverContentProps } from "../types.js";
-	import { usePopoverContent } from "../popover.svelte.js";
+	import { PopoverContentState } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -24,7 +24,7 @@
 		...restProps
 	}: PopoverContentProps = $props();
 
-	const contentState = usePopoverContent({
+	const contentState = PopoverContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -70,7 +70,7 @@
 		{...mergedProps}
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		{id}
 		{trapFocus}
 		{preventScroll}

package/dist/bits/popover/components/popover-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverTriggerProps } from "../types.js";
-	import { usePopoverTrigger } from "../popover.svelte.js";
+	import { PopoverTriggerState } from "../popover.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: PopoverTriggerProps = $props();
 
-	const triggerState = usePopoverTrigger({
+	const triggerState = PopoverTriggerState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/popover/components/popover.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { PopoverRootProps } from "../types.js";
-	import { usePopoverRoot } from "../popover.svelte.js";
+	import { PopoverRootState } from "../popover.svelte.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 
-	let { open = $bindable(false), onOpenChange = noop, children }: PopoverRootProps = $props();
+	let {
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		children,
+	}: PopoverRootProps = $props();
 
-	usePopoverRoot({
+	PopoverRootState.create({
 		open: box.with(
 			() => open,
 			(v) => {
@@ -15,6 +20,7 @@
 				onOpenChange(v);
 			}
 		),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 </script>
 

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

@@ -1,28 +1,33 @@
-import { type ReadableBoxedValues } from "svelte-toolbelt";
-import type { WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
-type PopoverRootStateProps = WritableBoxedValues<{
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+interface PopoverRootStateOpts extends WritableBoxedValues<{
     open: boolean;
-}>;
-declare class PopoverRootState {
-    readonly opts: PopoverRootStateProps;
+}>, ReadableBoxedValues<{
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class PopoverRootState {
+    static create(opts: PopoverRootStateOpts): PopoverRootState;
+    readonly opts: PopoverRootStateOpts;
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
-    constructor(opts: PopoverRootStateProps);
+    constructor(opts: PopoverRootStateOpts);
     toggleOpen(): void;
     handleClose(): void;
 }
-type PopoverTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+interface PopoverTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>;
-declare class PopoverTriggerState {
+}> {
+}
+export declare class PopoverTriggerState {
     #private;
-    readonly opts: PopoverTriggerStateProps;
+    static create(opts: PopoverTriggerStateOpts): PopoverTriggerState;
+    readonly opts: PopoverTriggerStateOpts;
     readonly root: PopoverRootState;
-    constructor(opts: PopoverTriggerStateProps, root: PopoverRootState);
+    constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-haspopup": "dialog";
         readonly "aria-expanded": "true" | "false";
@@ -33,22 +38,24 @@ declare class PopoverTriggerState {
         readonly onclick: (e: BitsMouseEvent) => void;
     };
 }
-type PopoverContentStateProps = WithRefProps & ReadableBoxedValues<{
+interface PopoverContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onCloseAutoFocus: (e: Event) => void;
-}>;
-declare class PopoverContentState {
-    readonly opts: PopoverContentStateProps;
+}> {
+}
+export declare class PopoverContentState {
+    static create(opts: PopoverContentStateOpts): PopoverContentState;
+    readonly opts: PopoverContentStateOpts;
     readonly root: PopoverRootState;
-    constructor(opts: PopoverContentStateProps, root: PopoverRootState);
+    constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onCloseAutoFocus: (e: Event) => void;
-    snippetProps: {
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly tabindex: -1;
         readonly "data-state": "open" | "closed";
@@ -56,28 +63,26 @@ declare class PopoverContentState {
             readonly pointerEvents: "auto";
         };
     };
-    popperProps: {
+    readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;
         onEscapeKeydown: (e: KeyboardEvent) => void;
         onCloseAutoFocus: (e: Event) => void;
     };
 }
-type PopoverCloseStateProps = WithRefProps;
-declare class PopoverCloseState {
-    readonly opts: PopoverCloseStateProps;
+interface PopoverCloseStateOpts extends WithRefOpts {
+}
+export declare class PopoverCloseState {
+    static create(opts: PopoverCloseStateOpts): PopoverCloseState;
+    readonly opts: PopoverCloseStateOpts;
     readonly root: PopoverRootState;
-    constructor(opts: PopoverCloseStateProps, root: PopoverRootState);
+    constructor(opts: PopoverCloseStateOpts, root: PopoverRootState);
     onclick(_: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly onclick: (_: BitsPointerEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly type: "button";
     };
 }
-export declare function usePopoverRoot(props: PopoverRootStateProps): PopoverRootState;
-export declare function usePopoverTrigger(props: PopoverTriggerStateProps): PopoverTriggerState;
-export declare function usePopoverContent(props: PopoverContentStateProps): PopoverContentState;
-export declare function usePopoverClose(props: PopoverCloseStateProps): PopoverCloseState;
 export {};

package/dist/bits/popover/popover.svelte.js

@@ -1,18 +1,30 @@
-import { attachRef } from "svelte-toolbelt";
+import { attachRef, box, } from "svelte-toolbelt";
 import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement } from "../../internal/is.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const popoverAttrs = createBitsAttrs({
     component: "popover",
     parts: ["root", "trigger", "content", "close"],
 });
-class PopoverRootState {
+const PopoverRootContext = new Context("Popover.Root");
+export class PopoverRootState {
+    static create(opts) {
+        return PopoverRootContext.set(new PopoverRootState(opts));
+    }
     opts;
     contentNode = $state(null);
     triggerNode = $state(null);
     constructor(opts) {
         this.opts = opts;
+        new OpenChangeComplete({
+            ref: box.with(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
     }
     toggleOpen() {
         this.opts.open.current = !this.opts.open.current;
@@ -23,7 +35,10 @@ class PopoverRootState {
         this.opts.open.current = false;
     }
 }
-class PopoverTriggerState {
+export class PopoverTriggerState {
+    static create(opts) {
+        return new PopoverTriggerState(opts, PopoverRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -67,7 +82,10 @@ class PopoverTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
-class PopoverContentState {
+export class PopoverContentState {
+    static create(opts) {
+        return new PopoverContentState(opts, PopoverRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -115,7 +133,10 @@ class PopoverContentState {
         onCloseAutoFocus: this.onCloseAutoFocus,
     };
 }
-class PopoverCloseState {
+export class PopoverCloseState {
+    static create(opts) {
+        return new PopoverCloseState(opts, PopoverRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -142,19 +163,3 @@ class PopoverCloseState {
         ...attachRef(this.opts.ref),
     }));
 }
-//
-// CONTEXT METHODS
-//
-const PopoverRootContext = new Context("Popover.Root");
-export function usePopoverRoot(props) {
-    return PopoverRootContext.set(new PopoverRootState(props));
-}
-export function usePopoverTrigger(props) {
-    return new PopoverTriggerState(props, PopoverRootContext.get());
-}
-export function usePopoverContent(props) {
-    return new PopoverContentState(props, PopoverRootContext.get());
-}
-export function usePopoverClose(props) {
-    return new PopoverCloseState(props, PopoverRootContext.get());
-}

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

@@ -13,6 +13,10 @@ export type PopoverRootPropsWithoutHTML = WithChildren<{
      * A callback that is called when the popover's open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that is called when the popover's open state changes and the animation is complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
 }>;
 export type PopoverRootProps = PopoverRootPropsWithoutHTML;
 export type PopoverContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "loop">, FloatingContentSnippetProps>;

package/dist/bits/progress/components/progress.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ProgressRootProps } from "../types.js";
-	import { useProgressRootState } from "../progress.svelte.js";
+	import { ProgressRootState } from "../progress.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: ProgressRootProps = $props();
 
-	const rootState = useProgressRootState({
+	const rootState = ProgressRootState.create({
 		value: box.with(() => value),
 		max: box.with(() => max),
 		min: box.with(() => min),

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

@@ -1,14 +1,16 @@
-import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
-type ProgressRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { WithRefOpts } from "../../internal/types.js";
+interface ProgressRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: number | null;
     max: number;
     min: number;
-}>>;
-declare class ProgressRootState {
-    readonly opts: ProgressRootStateProps;
-    constructor(opts: ProgressRootStateProps);
-    props: {
+}> {
+}
+export declare class ProgressRootState {
+    static create(opts: ProgressRootStateOpts): ProgressRootState;
+    readonly opts: ProgressRootStateOpts;
+    constructor(opts: ProgressRootStateOpts);
+    readonly props: {
         readonly role: "progressbar";
         readonly value: number | null;
         readonly "aria-valuemin": number;
@@ -21,5 +23,4 @@ declare class ProgressRootState {
         readonly "data-indeterminate": "" | undefined;
     };
 }
-export declare function useProgressRootState(props: ProgressRootStateProps): ProgressRootState;
 export {};

package/dist/bits/progress/progress.svelte.js

@@ -4,7 +4,10 @@ const progressAttrs = createBitsAttrs({
     component: "progress",
     parts: ["root"],
 });
-class ProgressRootState {
+export class ProgressRootState {
+    static create(opts) {
+        return new ProgressRootState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -29,6 +32,3 @@ function getProgressDataState(value, max) {
         return "indeterminate";
     return value === max ? "loaded" : "loading";
 }
-export function useProgressRootState(props) {
-    return new ProgressRootState(props);
-}

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RadioGroupItemProps } from "../types.js";
-	import { useRadioGroupItem } from "../radio-group.svelte.js";
+	import { RadioGroupItemState } from "../radio-group.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: RadioGroupItemProps = $props();
 
-	const itemState = useRadioGroupItem({
+	const itemState = RadioGroupItemState.create({
 		value: box.with(() => value),
 		disabled: box.with(() => disabled ?? false),
 		id: box.with(() => id),

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RadioGroupRootProps } from "../types.js";
-	import { useRadioGroupRoot } from "../radio-group.svelte.js";
+	import { RadioGroupRootState } from "../radio-group.svelte.js";
 	import RadioGroupInput from "./radio-group-input.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -18,17 +18,19 @@
 		loop = true,
 		name = undefined,
 		required = false,
+		readonly = false,
 		id = createId(uid),
 		onValueChange = noop,
 		...restProps
 	}: RadioGroupRootProps = $props();
 
-	const rootState = useRadioGroupRoot({
+	const rootState = RadioGroupRootState.create({
 		orientation: box.with(() => orientation),
 		disabled: box.with(() => disabled),
 		loop: box.with(() => loop),
 		name: box.with(() => name),
 		required: box.with(() => required),
+		readonly: box.with(() => readonly),
 		id: box.with(() => id),
 		value: box.with(
 			() => value,