bits-ui 2.6.2 → 2.8.0

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

@@ -4,18 +4,14 @@ const aspectRatioAttrs = createBitsAttrs({
     component: "aspect-ratio",
     parts: ["root"],
 });
-class AspectRatioRootState {
+export class AspectRatioRootState {
+    static create(opts) {
+        return new AspectRatioRootState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
     }
-    wrapperProps = $derived.by(() => ({
-        style: {
-            position: "relative",
-            width: "100%",
-            paddingBottom: `${this.opts.ratio.current ? 100 / this.opts.ratio.current : 0}%}`,
-        },
-    }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         style: {
@@ -29,6 +25,3 @@ class AspectRatioRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-export function useAspectRatioRoot(props) {
-    return new AspectRatioRootState(props);
-}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AspectRatioRootProps } from "../types.js";
-	import { useAspectRatioRoot } from "../aspect-ratio.svelte.js";
+	import { AspectRatioRootState } from "../aspect-ratio.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: AspectRatioRootProps = $props();
 
-	const rootState = useAspectRatioRoot({
+	const rootState = AspectRatioRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,41 +1,37 @@
-import { DOMContext, type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import { DOMContext, type ReadableBox, type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { HTMLImgAttributes } from "svelte/elements";
 import type { AvatarImageLoadingStatus } from "./types.js";
-import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
+import type { WithRefOpts } from "../../internal/types.js";
 type CrossOrigin = HTMLImgAttributes["crossorigin"];
 type ReferrerPolicy = HTMLImgAttributes["referrerpolicy"];
-/**
- * ROOT
- */
-type AvatarRootStateProps = WithRefProps<{
+type AvatarImageSrc = string | null | undefined;
+interface AvatarRootStateOpts extends WithRefOpts {
     delayMs: ReadableBox<number>;
     loadingStatus: WritableBox<AvatarImageLoadingStatus>;
-}>;
-type AvatarImageSrc = string | null | undefined;
-declare class AvatarRootState {
-    readonly opts: AvatarRootStateProps;
+}
+export declare class AvatarRootState {
+    static create(opts: AvatarRootStateOpts): AvatarRootState;
+    readonly opts: AvatarRootStateOpts;
     readonly domContext: DOMContext;
-    constructor(opts: AvatarRootStateProps);
+    constructor(opts: AvatarRootStateOpts);
     loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): (() => void) | undefined;
     props: {
         readonly id: string;
         readonly "data-status": AvatarImageLoadingStatus;
     };
 }
-/**
- * IMAGE
- */
-type AvatarImageStateProps = WithRefProps<ReadableBoxedValues<{
+interface AvatarImageStateOpts extends WithRefOpts, ReadableBoxedValues<{
     src: AvatarImageSrc;
     crossOrigin: CrossOrigin;
     referrerPolicy: ReferrerPolicy;
-}>>;
-declare class AvatarImageState {
-    readonly opts: AvatarImageStateProps;
+}> {
+}
+export declare class AvatarImageState {
+    static create(opts: AvatarImageStateOpts): AvatarImageState;
+    readonly opts: AvatarImageStateOpts;
     readonly root: AvatarRootState;
-    constructor(opts: AvatarImageStateProps, root: AvatarRootState);
-    props: {
+    constructor(opts: AvatarImageStateOpts, root: AvatarRootState);
+    readonly props: {
         readonly id: string;
         readonly style: {
             readonly display: "none" | "block";
@@ -46,25 +42,21 @@ declare class AvatarImageState {
         readonly referrerpolicy: globalThis.ReferrerPolicy | null | undefined;
     };
 }
-/**
- * FALLBACK
- */
-type AvatarFallbackStateProps = WithRefProps;
-declare class AvatarFallbackState {
-    readonly opts: AvatarFallbackStateProps;
+interface AvatarFallbackStateOpts extends WithRefOpts {
+}
+export declare class AvatarFallbackState {
+    static create(opts: AvatarFallbackStateOpts): AvatarFallbackState;
+    readonly opts: AvatarFallbackStateOpts;
     readonly root: AvatarRootState;
-    constructor(opts: AvatarFallbackStateProps, root: AvatarRootState);
-    style: {
+    constructor(opts: AvatarFallbackStateOpts, root: AvatarRootState);
+    readonly style: {
         display: string;
     } | undefined;
-    props: {
+    readonly props: {
         readonly style: {
             display: string;
         } | undefined;
         readonly "data-status": AvatarImageLoadingStatus;
     };
 }
-export declare function useAvatarRoot(props: AvatarRootStateProps): AvatarRootState;
-export declare function useAvatarImage(props: AvatarImageStateProps): AvatarImageState;
-export declare function useAvatarFallback(props: AvatarFallbackStateProps): AvatarFallbackState;
 export {};

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

@@ -1,12 +1,15 @@
-import { untrack } from "svelte";
-import { DOMContext, attachRef } from "svelte-toolbelt";
-import { Context } from "runed";
+import { DOMContext, attachRef, } from "svelte-toolbelt";
+import { Context, watch } from "runed";
 import { createBitsAttrs } from "../../internal/attrs.js";
 const avatarAttrs = createBitsAttrs({
     component: "avatar",
     parts: ["root", "image", "fallback"],
 });
-class AvatarRootState {
+const AvatarRootContext = new Context("Avatar.Root");
+export class AvatarRootState {
+    static create(opts) {
+        return AvatarRootContext.set(new AvatarRootState(opts));
+    }
     opts;
     domContext;
     constructor(opts) {
@@ -34,6 +37,8 @@ class AvatarRootState {
             this.opts.loadingStatus.current = "error";
         };
         return () => {
+            if (!imageTimerId)
+                return;
             this.domContext.clearTimeout(imageTimerId);
         };
     }
@@ -44,20 +49,21 @@ class AvatarRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class AvatarImageState {
+export class AvatarImageState {
+    static create(opts) {
+        return new AvatarImageState(opts, AvatarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        $effect.pre(() => {
-            if (!this.opts.src.current) {
+        watch.pre([() => this.opts.src.current, () => this.opts.crossOrigin.current], ([src, crossOrigin]) => {
+            if (!src) {
                 this.root.opts.loadingStatus.current = "error";
                 return;
             }
-            // dependency on crossorigin
-            this.opts.crossOrigin.current;
-            untrack(() => this.root.loadImage(this.opts.src.current ?? "", this.opts.crossOrigin.current, this.opts.referrerPolicy.current));
+            this.root.loadImage(src, crossOrigin, this.opts.referrerPolicy.current);
         });
     }
     props = $derived.by(() => ({
@@ -73,7 +79,10 @@ class AvatarImageState {
         ...attachRef(this.opts.ref),
     }));
 }
-class AvatarFallbackState {
+export class AvatarFallbackState {
+    static create(opts) {
+        return new AvatarFallbackState(opts, AvatarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -88,13 +97,3 @@ class AvatarFallbackState {
         ...attachRef(this.opts.ref),
     }));
 }
-const AvatarRootContext = new Context("Avatar.Root");
-export function useAvatarRoot(props) {
-    return AvatarRootContext.set(new AvatarRootState(props));
-}
-export function useAvatarImage(props) {
-    return new AvatarImageState(props, AvatarRootContext.get());
-}
-export function useAvatarFallback(props) {
-    return new AvatarFallbackState(props, AvatarRootContext.get());
-}

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarImageProps } from "../types.js";
-	import { useAvatarImage } from "../avatar.svelte.js";
+	import { AvatarImageState } from "../avatar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: AvatarImageProps = $props();
 
-	const imageState = useAvatarImage({
+	const imageState = AvatarImageState.create({
 		src: box.with(() => src),
 		id: box.with(() => id),
 		ref: box.with(

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarRootProps } from "../types.js";
-	import { useAvatarRoot } from "../avatar.svelte.js";
+	import { AvatarRootState } from "../avatar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: AvatarRootProps = $props();
 
-	const rootState = useAvatarRoot({
+	const rootState = AvatarRootState.create({
 		delayMs: box.with(() => delayMs),
 		loadingStatus: box.with(
 			() => loadingStatus,