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

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { CancelProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AlertDialogCancelProps } from "../types.js";
 	import { useAlertDialogCancel } from "../../dialog/dialog.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
 		ref = $bindable(null),
 		children,
 		child,
+		disabled = false,
 		...restProps
-	}: CancelProps = $props();
+	}: AlertDialogCancelProps = $props();
 
 	const cancelState = useAlertDialogCancel({
 		id: box.with(() => id),
@@ -19,6 +19,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		disabled: box.with(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, cancelState.props));

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte.d.ts

@@ -1,18 +1,3 @@
-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 AlertDialogCancel: $$__sveltets_2_IsomorphicComponent<import("../index.js").TriggerProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type AlertDialogCancel = InstanceType<typeof AlertDialogCancel>;
+declare const AlertDialogCancel: import("svelte").Component<import("../types.js").AlertDialogTriggerProps, {}, "ref">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
 export default AlertDialogCancel;

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
-	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";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { useDialogContent } from "../../dialog/dialog.svelte.js";
+	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
 	let {
 		id = useId(),
@@ -25,8 +25,9 @@
 		onInteractOutside = noop,
 		preventScroll = true,
 		trapFocus = true,
+		restoreScrollDelay = null,
 		...restProps
-	}: ContentProps = $props();
+	}: AlertDialogContentProps = $props();
 
 	const contentState = useDialogContent({
 		id: box.with(() => id),
@@ -39,12 +40,16 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer {...mergedProps} present={contentState.root.open.current || forceMount}>
+<PresenceLayer {...mergedProps} {forceMount} present={contentState.root.open.current || forceMount}>
 	{#snippet presence({ present })}
-		<ScrollLock {preventScroll} />
 		<FocusScope
 			loop
-			trapFocus={present.current && trapFocus}
+			trapFocus={shouldTrapFocus({
+				forceMount,
+				present: present.current,
+				trapFocus,
+				open: contentState.root.open.current,
+			})}
 			{...mergedProps}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
@@ -80,19 +85,17 @@
 					>
 						<TextSelectionLayer {...mergedProps} enabled={present.current}>
 							{#if child}
+								{#if contentState.root.open.current}
+									<ScrollLock {preventScroll} {restoreScrollDelay} />
+								{/if}
 								{@render child({
 									props: mergeProps(mergedProps, focusScopeProps),
 									...contentState.snippetProps,
 								})}
 							{:else}
-								<div
-									{...mergeProps(mergedProps, focusScopeProps, {
-										style: {
-											pointerEvents: "auto",
-										},
-									})}
-								>
-									{@render children?.(contentState.snippetProps)}
+								<ScrollLock {preventScroll} />
+								<div {...mergeProps(mergedProps, focusScopeProps)}>
+									{@render children?.()}
 								</div>
 							{/if}
 						</TextSelectionLayer>

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte.d.ts

@@ -1,18 +1,3 @@
-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 AlertDialogContent: $$__sveltets_2_IsomorphicComponent<import("../../dialog/types.js").DialogContentProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type AlertDialogContent = InstanceType<typeof AlertDialogContent>;
+declare const AlertDialogContent: import("svelte").Component<import("../../dialog/types.js").DialogContentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
 export default AlertDialogContent;

package/dist/bits/alert-dialog/components/alert-dialog.svelte

@@ -1,27 +1,18 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import type { AlertDialogRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
 	import { useDialogRoot } from "../../dialog/dialog.svelte.js";
 
-	let {
-		open = $bindable(false),
-		onOpenChange = noop,
-		controlledOpen = false,
-		children,
-	}: RootProps = $props();
+	let { open = $bindable(false), onOpenChange = noop, children }: AlertDialogRootProps = $props();
 
 	useDialogRoot({
 		variant: box.with(() => "alert-dialog"),
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 	});

package/dist/bits/alert-dialog/components/alert-dialog.svelte.d.ts

@@ -1,18 +1,3 @@
-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 AlertDialog: $$__sveltets_2_IsomorphicComponent<import("../types.js").AlertDialogRootPropsWithoutHTML, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "open">;
-type AlertDialog = InstanceType<typeof AlertDialog>;
+declare const AlertDialog: import("svelte").Component<import("../types.js").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
 export default AlertDialog;

package/dist/bits/alert-dialog/exports.d.ts

@@ -0,0 +1,10 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";
+export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";

package/dist/bits/alert-dialog/exports.js

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";

package/dist/bits/alert-dialog/index.d.ts

@@ -1,10 +1 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "../dialog/components/dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
-export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
-export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
-export { default as Description } from "../dialog/components/dialog-description.svelte";
-export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";
+export * as AlertDialog from "./exports.js";

package/dist/bits/alert-dialog/index.js

@@ -1,9 +1 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "../dialog/components/dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
-export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
-export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
-export { default as Description } from "../dialog/components/dialog-description.svelte";
+export * as AlertDialog from "./exports.js";

package/dist/bits/alert-dialog/types.d.ts

@@ -1,4 +1,4 @@
 import type { DialogContentProps, DialogContentPropsWithoutHTML } from "../../types.js";
-export type { DialogRootPropsWithoutHTML as AlertDialogRootPropsWithoutHTML, DialogRootProps as AlertDialogRootProps, DialogClosePropsWithoutHTML as AlertDialogActionPropsWithoutHTML, DialogCloseProps as AlertDialogActionProps, DialogClosePropsWithoutHTML as AlertDialogCancelPropsWithoutHTML, DialogCloseProps as AlertDialogCancelProps, DialogPortalPropsWithoutHTML as AlertDialogPortalPropsWithoutHTML, DialogPortalProps as AlertDialogPortalProps, DialogOverlayPropsWithoutHTML as AlertDialogOverlayPropsWithoutHTML, DialogOverlayProps as AlertDialogOverlayProps, DialogTitlePropsWithoutHTML as AlertDialogTitlePropsWithoutHTML, DialogTitleProps as AlertDialogTitleProps, DialogDescriptionPropsWithoutHTML as AlertDialogDescriptionPropsWithoutHTML, DialogDescriptionProps as AlertDialogDescriptionProps, DialogTriggerPropsWithoutHTML as AlertDialogTriggerPropsWithoutHTML, DialogTriggerProps as AlertDialogTriggerProps, } from "../../types.js";
+export type { DialogRootPropsWithoutHTML as AlertDialogRootPropsWithoutHTML, DialogRootProps as AlertDialogRootProps, DialogClosePropsWithoutHTML as AlertDialogActionPropsWithoutHTML, DialogCloseProps as AlertDialogActionProps, DialogClosePropsWithoutHTML as AlertDialogCancelPropsWithoutHTML, DialogCloseProps as AlertDialogCancelProps, DialogPortalPropsWithoutHTML as AlertDialogPortalPropsWithoutHTML, DialogPortalProps as AlertDialogPortalProps, DialogOverlayPropsWithoutHTML as AlertDialogOverlayPropsWithoutHTML, DialogOverlayProps as AlertDialogOverlayProps, DialogTitlePropsWithoutHTML as AlertDialogTitlePropsWithoutHTML, DialogTitleProps as AlertDialogTitleProps, DialogDescriptionPropsWithoutHTML as AlertDialogDescriptionPropsWithoutHTML, DialogDescriptionProps as AlertDialogDescriptionProps, DialogTriggerPropsWithoutHTML as AlertDialogTriggerPropsWithoutHTML, DialogTriggerProps as AlertDialogTriggerProps, } from "../dialog/types.js";
 export type AlertDialogContentPropsWithoutHTML = Omit<DialogContentPropsWithoutHTML, "onInteractOutside">;
 export type AlertDialogContentProps = DialogContentProps;

package/dist/bits/aspect-ratio/aspect-ratio.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "svelte-toolbelt";
 const ASPECT_RATIO_ROOT_ATTR = "data-aspect-ratio-root";
 export class AspectRatioRootState {
     #ref;

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AspectRatioRootProps } from "../types.js";
 	import { useAspectRatioRoot } from "../aspect-ratio.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +11,7 @@
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: AspectRatioRootProps = $props();
 
 	const rootState = useAspectRatioRoot({
 		id: box.with(() => id),

package/dist/bits/aspect-ratio/components/aspect-ratio.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 AspectRatio: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type AspectRatio = InstanceType<typeof AspectRatio>;
+import type { AspectRatioRootProps } from "../types.js";
+declare const AspectRatio: import("svelte").Component<AspectRatioRootProps, {}, "ref">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
 export default AspectRatio;

package/dist/bits/aspect-ratio/exports.d.ts

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

package/dist/bits/aspect-ratio/exports.js

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

package/dist/bits/aspect-ratio/index.d.ts

@@ -1,2 +1 @@
-export { default as Root } from "./components/aspect-ratio.svelte";
-export type { AspectRatioProps as RootProps } from "./types.js";
+export * as AspectRatio from "./exports.js";

package/dist/bits/aspect-ratio/index.js

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

package/dist/bits/aspect-ratio/types.d.ts

@@ -1,6 +1,6 @@
 import type { WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
-export type AspectRatioPropsWithoutHTML = WithChild<{
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type AspectRatioRootPropsWithoutHTML = WithChild<{
     /**
      * The aspect ratio of the image.
      *
@@ -8,4 +8,4 @@ export type AspectRatioPropsWithoutHTML = WithChild<{
      */
     ratio?: number;
 }>;
-export type AspectRatioProps = AspectRatioPropsWithoutHTML & Without<PrimitiveDivAttributes, AspectRatioPropsWithoutHTML>;
+export type AspectRatioRootProps = AspectRatioRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AspectRatioRootPropsWithoutHTML>;

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

@@ -1,4 +1,4 @@
-import type { ReadableBox, WritableBox } from "svelte-toolbelt";
+import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type { HTMLImgAttributes } from "svelte/elements";
 import type { AvatarImageLoadingStatus } from "./types.js";
 import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
@@ -24,8 +24,6 @@ declare class AvatarRootState {
         readonly "data-avatar-root": "";
         readonly "data-status": AvatarImageLoadingStatus;
     };
-    createImage(props: AvatarImageStateProps): AvatarImageState;
-    createFallback(props: AvatarFallbackStateProps): AvatarFallbackState;
 }
 /**
  * IMAGE

package/dist/bits/avatar/avatar.svelte.js

@@ -1,6 +1,6 @@
 import { untrack } from "svelte";
-import { createContext } from "../../internal/createContext.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "svelte-toolbelt";
+import { Context } from "runed";
 const AVATAR_ROOT_ATTR = "data-avatar-root";
 const AVATAR_IMAGE_ATTR = "data-avatar-image";
 const AVATAR_FALLBACK_ATTR = "data-avatar-fallback";
@@ -14,6 +14,7 @@ class AvatarRootState {
         this.loadingStatus = props.loadingStatus;
         this.#ref = props.ref;
         this.#id = props.id;
+        this.loadImage = this.loadImage.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -37,7 +38,7 @@ class AvatarRootState {
             this.loadingStatus.current = "error";
         };
         return () => {
-            clearTimeout(imageTimerId);
+            window.clearTimeout(imageTimerId);
         };
     }
     props = $derived.by(() => ({
@@ -45,12 +46,6 @@ class AvatarRootState {
         [AVATAR_ROOT_ATTR]: "",
         "data-status": this.loadingStatus.current,
     }));
-    createImage(props) {
-        return new AvatarImageState(props, this);
-    }
-    createFallback(props) {
-        return new AvatarFallbackState(props, this);
-    }
 }
 class AvatarImageState {
     #id;
@@ -71,8 +66,10 @@ class AvatarImageState {
             ref: this.#ref,
         });
         $effect.pre(() => {
-            if (!this.#src.current)
+            if (!this.#src.current) {
+                this.#root.loadingStatus.current = "error";
                 return;
+            }
             // dependency on crossorigin
             this.#crossOrigin.current;
             untrack(() => this.#root.loadImage(this.#src.current ?? "", this.#crossOrigin.current, this.#referrerPolicy.current));
@@ -111,16 +108,13 @@ class AvatarFallbackState {
         [AVATAR_FALLBACK_ATTR]: "",
     }));
 }
-/**
- * CONTEXT METHODS
- */
-const [setAvatarRootContext, getAvatarRootContext] = createContext("Avatar.Root");
+const AvatarRootContext = new Context("Avatar.Root");
 export function useAvatarRoot(props) {
-    return setAvatarRootContext(new AvatarRootState(props));
+    return AvatarRootContext.set(new AvatarRootState(props));
 }
 export function useAvatarImage(props) {
-    return getAvatarRootContext().createImage(props);
+    return new AvatarImageState(props, AvatarRootContext.get());
 }
 export function useAvatarFallback(props) {
-    return getAvatarRootContext().createFallback(props);
+    return new AvatarFallbackState(props, AvatarRootContext.get());
 }

package/dist/bits/avatar/components/avatar-fallback.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { FallbackProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AvatarFallbackProps } from "../types.js";
 	import { useAvatarFallback } from "../avatar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -11,7 +10,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: FallbackProps = $props();
+	}: AvatarFallbackProps = $props();
 
 	const fallbackState = useAvatarFallback({
 		id: box.with(() => id),

package/dist/bits/avatar/components/avatar-fallback.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { FallbackProps } 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 AvatarFallback: $$__sveltets_2_IsomorphicComponent<FallbackProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type AvatarFallback = InstanceType<typeof AvatarFallback>;
+import type { AvatarFallbackProps } from "../types.js";
+declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "ref">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
 export default AvatarFallback;

package/dist/bits/avatar/components/avatar-image.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ImageProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AvatarImageProps } from "../types.js";
 	import { useAvatarImage } from "../avatar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		src,
@@ -13,7 +12,7 @@
 		crossorigin = undefined,
 		referrerpolicy = undefined,
 		...restProps
-	}: ImageProps = $props();
+	}: AvatarImageProps = $props();
 
 	const imageState = useAvatarImage({
 		src: box.with(() => src),

package/dist/bits/avatar/components/avatar-image.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { ImageProps } 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 AvatarImage: $$__sveltets_2_IsomorphicComponent<ImageProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type AvatarImage = InstanceType<typeof AvatarImage>;
+import type { AvatarImageProps } from "../types.js";
+declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "ref">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
 export default AvatarImage;

package/dist/bits/avatar/components/avatar.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AvatarRootProps } from "../types.js";
 	import { useAvatarRoot } from "../avatar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		delayMs = 0,
@@ -14,7 +13,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: RootProps = $props();
+	}: AvatarRootProps = $props();
 
 	const rootState = useAvatarRoot({
 		delayMs: box.with(() => delayMs),

package/dist/bits/avatar/components/avatar.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 Avatar: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref" | "loadingStatus">;
-type Avatar = InstanceType<typeof Avatar>;
+import type { AvatarRootProps } from "../types.js";
+declare const Avatar: import("svelte").Component<AvatarRootProps, {}, "ref" | "loadingStatus">;
+type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

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

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/avatar.svelte";
+export { default as Image } from "./components/avatar-image.svelte";
+export { default as Fallback } from "./components/avatar-fallback.svelte";
+export type { AvatarRootProps as RootProps, AvatarImageProps as ImageProps, AvatarFallbackProps as FallbackProps, } from "./types.js";

package/dist/bits/avatar/exports.js

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/avatar.svelte";
+export { default as Image } from "./components/avatar-image.svelte";
+export { default as Fallback } from "./components/avatar-fallback.svelte";

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

@@ -1,4 +1 @@
-export { default as Root } from "./components/avatar.svelte";
-export { default as Image } from "./components/avatar-image.svelte";
-export { default as Fallback } from "./components/avatar-fallback.svelte";
-export type { AvatarRootProps as RootProps, AvatarImageProps as ImageProps, AvatarFallbackProps as FallbackProps, } from "./types.js";
+export * as Avatar from "./exports.js";

package/dist/bits/avatar/index.js

@@ -1,3 +1 @@
-export { default as Root } from "./components/avatar.svelte";
-export { default as Image } from "./components/avatar-image.svelte";
-export { default as Fallback } from "./components/avatar-fallback.svelte";
+export * as Avatar from "./exports.js";

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

@@ -1,5 +1,5 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveDivAttributes, PrimitiveImgAttributes, PrimitiveSpanAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveImgAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
 export type AvatarImageLoadingStatus = "loading" | "loaded" | "error";
 export type AvatarRootPropsWithoutHTML = WithChild<{
     /**
@@ -19,8 +19,8 @@ export type AvatarRootPropsWithoutHTML = WithChild<{
      */
     onLoadingStatusChange?: OnChangeFn<AvatarImageLoadingStatus>;
 }>;
-export type AvatarRootProps = AvatarRootPropsWithoutHTML & Without<PrimitiveDivAttributes, AvatarRootPropsWithoutHTML>;
+export type AvatarRootProps = AvatarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AvatarRootPropsWithoutHTML>;
 export type AvatarImagePropsWithoutHTML = WithChild;
-export type AvatarImageProps = AvatarImagePropsWithoutHTML & Without<PrimitiveImgAttributes, AvatarImagePropsWithoutHTML>;
+export type AvatarImageProps = AvatarImagePropsWithoutHTML & Without<BitsPrimitiveImgAttributes, AvatarImagePropsWithoutHTML>;
 export type AvatarFallbackPropsWithoutHTML = WithChild;
-export type AvatarFallbackProps = AvatarFallbackPropsWithoutHTML & Without<PrimitiveSpanAttributes, AvatarFallbackPropsWithoutHTML>;
+export type AvatarFallbackProps = AvatarFallbackPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, AvatarFallbackPropsWithoutHTML>;