bits-ui 1.0.0-next.5 → 1.0.0-next.50

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { AspectRatioRootProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AspectRatio: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const AspectRatio: $$__sveltets_2_IsomorphicComponent<AspectRatioRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AspectRatio = InstanceType<typeof 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,7 +1,10 @@
-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";
 import type { WithRefProps } from "../../internal/types.js";
+type CrossOrigin = HTMLImgAttributes["crossorigin"];
+type ReferrerPolicy = HTMLImgAttributes["referrerpolicy"];
 /**
  * ROOT
  */
@@ -15,25 +18,23 @@ declare class AvatarRootState {
     delayMs: AvatarRootStateProps["delayMs"];
     loadingStatus: AvatarRootStateProps["loadingStatus"];
     constructor(props: AvatarRootStateProps);
-    loadImage(src: string): () => void;
+    loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): () => void;
     props: {
         readonly id: string;
         readonly "data-avatar-root": "";
         readonly "data-status": AvatarImageLoadingStatus;
     };
-    createImage(props: AvatarImageStateProps): AvatarImageState;
-    createFallback(props: AvatarFallbackStateProps): AvatarFallbackState;
 }
 /**
  * IMAGE
  */
 type AvatarImageStateProps = WithRefProps<ReadableBoxedValues<{
     src: AvatarImageSrc;
+    crossOrigin: CrossOrigin;
+    referrerPolicy: ReferrerPolicy;
 }>>;
 declare class AvatarImageState {
     #private;
-    src: AvatarImageStateProps["src"];
-    root: AvatarRootState;
     constructor(props: AvatarImageStateProps, root: AvatarRootState);
     props: {
         readonly id: string;
@@ -43,6 +44,8 @@ declare class AvatarImageState {
         readonly "data-status": AvatarImageLoadingStatus;
         readonly "data-avatar-image": "";
         readonly src: AvatarImageSrc;
+        readonly crossorigin: "" | "anonymous" | "use-credentials" | null | undefined;
+        readonly referrerpolicy: globalThis.ReferrerPolicy | null | undefined;
     };
 }
 /**
@@ -51,7 +54,6 @@ declare class AvatarImageState {
 type AvatarFallbackStateProps = WithRefProps;
 declare class AvatarFallbackState {
     #private;
-    root: AvatarRootState;
     constructor(props: AvatarFallbackStateProps, root: AvatarRootState);
     props: {
         readonly style: {

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 { createContext } from "../../internal/create-context.js";
 const AVATAR_ROOT_ATTR = "data-avatar-root";
 const AVATAR_IMAGE_ATTR = "data-avatar-image";
 const AVATAR_FALLBACK_ATTR = "data-avatar-fallback";
@@ -19,13 +19,17 @@ class AvatarRootState {
             ref: this.#ref,
         });
     }
-    loadImage(src) {
+    loadImage(src, crossorigin, referrerPolicy) {
         let imageTimerId;
         const image = new Image();
         image.src = src;
+        if (crossorigin !== undefined)
+            image.crossOrigin = crossorigin;
+        if (referrerPolicy)
+            image.referrerPolicy = referrerPolicy;
         this.loadingStatus.current = "loading";
         image.onload = () => {
-            imageTimerId = setTimeout(() => {
+            imageTimerId = window.setTimeout(() => {
                 this.loadingStatus.current = "loaded";
             }, this.delayMs.current);
         };
@@ -41,49 +45,51 @@ 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;
     #ref;
-    src;
-    root;
+    #crossOrigin;
+    #referrerPolicy;
+    #src;
+    #root;
     constructor(props, root) {
-        this.root = root;
-        this.src = props.src;
+        this.#root = root;
+        this.#src = props.src;
         this.#id = props.id;
         this.#ref = props.ref;
+        this.#crossOrigin = props.crossOrigin;
+        this.#referrerPolicy = props.referrerPolicy;
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
         $effect.pre(() => {
-            if (!this.src.current)
+            if (!this.#src.current)
                 return;
-            untrack(() => this.root.loadImage(this.src.current ?? ""));
+            // dependency on crossorigin
+            this.#crossOrigin.current;
+            untrack(() => this.#root.loadImage(this.#src.current ?? "", this.#crossOrigin.current, this.#referrerPolicy.current));
         });
     }
     props = $derived.by(() => ({
         id: this.#id.current,
         style: {
-            display: this.root.loadingStatus.current === "loaded" ? "block" : "none",
+            display: this.#root.loadingStatus.current === "loaded" ? "block" : "none",
         },
-        "data-status": this.root.loadingStatus.current,
+        "data-status": this.#root.loadingStatus.current,
         [AVATAR_IMAGE_ATTR]: "",
-        src: this.src.current,
+        src: this.#src.current,
+        crossorigin: this.#crossOrigin.current,
+        referrerpolicy: this.#referrerPolicy.current,
     }));
 }
 class AvatarFallbackState {
     #id;
     #ref;
-    root;
+    #root;
     constructor(props, root) {
-        this.root = root;
+        this.#root = root;
         this.#id = props.id;
         this.#ref = props.ref;
         useRefById({
@@ -93,9 +99,9 @@ class AvatarFallbackState {
     }
     props = $derived.by(() => ({
         style: {
-            display: this.root.loadingStatus.current === "loaded" ? "none" : undefined,
+            display: this.#root.loadingStatus.current === "loaded" ? "none" : undefined,
         },
-        "data-status": this.root.loadingStatus.current,
+        "data-status": this.#root.loadingStatus.current,
         [AVATAR_FALLBACK_ATTR]: "",
     }));
 }
@@ -107,8 +113,10 @@ export function useAvatarRoot(props) {
     return setAvatarRootContext(new AvatarRootState(props));
 }
 export function useAvatarImage(props) {
-    return getAvatarRootContext().createImage(props);
+    const root = getAvatarRootContext();
+    return new AvatarImageState(props, root);
 }
 export function useAvatarFallback(props) {
-    return getAvatarRootContext().createFallback(props);
+    const root = getAvatarRootContext();
+    return new AvatarFallbackState(props, root);
 }

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,4 +1,4 @@
-import type { FallbackProps } from "../index.js";
+import type { AvatarFallbackProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AvatarFallback: $$__sveltets_2_IsomorphicComponent<FallbackProps, {
+declare const AvatarFallback: $$__sveltets_2_IsomorphicComponent<AvatarFallbackProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AvatarFallback = InstanceType<typeof AvatarFallback>;

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

@@ -1,11 +1,18 @@
 <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, child, id = useId(), ref = $bindable(null), ...restProps }: ImageProps = $props();
+	let {
+		src,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		crossorigin = undefined,
+		referrerpolicy = undefined,
+		...restProps
+	}: AvatarImageProps = $props();
 
 	const imageState = useAvatarImage({
 		src: box.with(() => src),
@@ -14,6 +21,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		crossOrigin: box.with(() => crossorigin),
+		referrerPolicy: box.with(() => referrerpolicy),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, imageState.props));

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

@@ -1,4 +1,4 @@
-import type { ImageProps } from "../index.js";
+import type { AvatarImageProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AvatarImage: $$__sveltets_2_IsomorphicComponent<ImageProps, {
+declare const AvatarImage: $$__sveltets_2_IsomorphicComponent<AvatarImageProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AvatarImage = InstanceType<typeof 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,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { AvatarRootProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Avatar: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<AvatarRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref" | "loadingStatus">;
 type Avatar = InstanceType<typeof 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>;

package/dist/bits/button/components/button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { RootProps } from "../index.js";
+	import type { ButtonRootProps } from "../types.js";
 
-	let { href, type, children, ref, ...restProps }: RootProps = $props();
+	let { href, type, children, ref = $bindable(), ...restProps }: ButtonRootProps = $props();
 </script>
 
 <svelte:element

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { ButtonRootProps } from "../types.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;
@@ -12,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Button: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Button: $$__sveltets_2_IsomorphicComponent<ButtonRootProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type Button = InstanceType<typeof Button>;
 export default Button;

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

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

package/dist/bits/button/exports.js

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

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

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

package/dist/bits/button/index.js

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

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

@@ -1,16 +1,16 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import type { WithoutChildren } from "svelte-toolbelt";
 import type { WithChildren } from "../../shared/index.js";
-export type ButtonPropsWithoutHTML = WithChildren<{
+export type ButtonRootPropsWithoutHTML = WithChildren<{
     ref?: HTMLElement | null;
 }>;
-type AnchorElement = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
+type AnchorElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
     href: HTMLAnchorAttributes["href"];
     type?: never;
 };
-type ButtonElement = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
+type ButtonElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
     type?: HTMLButtonAttributes["type"];
     href?: never;
 };
-export type ButtonProps = AnchorElement | ButtonElement;
+export type ButtonRootProps = AnchorElement | ButtonElement;
 export {};