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

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

@@ -3,7 +3,7 @@
 	import type { ActionProps } from "../index.js";
 	import { mergeProps } from "../../../internal/mergeProps.js";
 	import { useId } from "../../../internal/useId.js";
-	import { useDialogClose } from "../../dialog/dialog.svelte.js";
+	import { useAlertDialogAction } from "../../dialog/dialog.svelte.js";
 
 	let {
 		children,
@@ -13,8 +13,7 @@
 		...restProps
 	}: ActionProps = $props();
 
-	const closeState = useDialogClose({
-		variant: box.with(() => "action"),
+	const actionState = useAlertDialogAction({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -22,7 +21,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, closeState.props));
+	const mergedProps = $derived(mergeProps(restProps, actionState.props));
 </script>
 
 {#if child}

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

@@ -1,7 +1,10 @@
 import type { ReadableBox, 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,7 +18,7 @@ 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": "";
@@ -29,11 +32,11 @@ declare class AvatarRootState {
  */
 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 +46,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 +56,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

@@ -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)
+            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);
         };
@@ -51,39 +55,47 @@ class AvatarRootState {
 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 +105,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]: "",
     }));
 }

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

@@ -5,7 +5,15 @@
 	import { mergeProps } from "../../../internal/mergeProps.js";
 	import { useId } from "../../../internal/useId.js";
 
-	let { src, child, id = useId(), ref = $bindable(null), ...restProps }: ImageProps = $props();
+	let {
+		src,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		crossorigin = "",
+		referrerpolicy = undefined,
+		...restProps
+	}: ImageProps = $props();
 
 	const imageState = useAvatarImage({
 		src: box.with(() => src),
@@ -14,6 +22,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		crossOrigin: box.with(() => crossorigin),
+		referrerPolicy: box.with(() => referrerpolicy),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, imageState.props));

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

@@ -346,10 +346,10 @@ export declare function useCalendarDay(props: CalendarDayStateProps): {
     id: import("svelte-toolbelt").ReadableBox<string>;
     ref: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     readonly cell: RangeCalendarCellState;
-    "__#62@#tabindex": number | undefined;
-    "__#62@#onclick": (e: MouseEvent) => void;
-    "__#62@#onmouseenter": () => void;
-    "__#62@#onfocusin": () => void;
+    "__#63@#tabindex": number | undefined;
+    "__#63@#onclick": (e: MouseEvent) => void;
+    "__#63@#onmouseenter": () => void;
+    "__#63@#onfocusin": () => void;
     snippetProps: {
         disabled: boolean;
         unavailable: boolean;

package/dist/bits/date-range-field/date-range-field.svelte.d.ts

@@ -115,11 +115,11 @@ declare const getDateRangeFieldRootContext: <T extends DateRangeFieldRootState |
 export declare function useDateRangeFieldRoot(props: DateRangeFieldRootStateProps): DateRangeFieldRootState;
 export declare function useDateRangeFieldLabel(props: DateRangeFieldLabelStateProps): DateRangeFieldLabelState;
 export declare function useDateRangeFieldInput(props: Omit<DateRangeFieldInputStateProps, "value">, type: "start" | "end"): {
-    "__#98@#id": import("svelte-toolbelt").ReadableBox<string>;
-    "__#98@#ref": WritableBox<HTMLElement | null>;
-    "__#98@#name": import("svelte-toolbelt").ReadableBox<string>;
+    "__#99@#id": import("svelte-toolbelt").ReadableBox<string>;
+    "__#99@#ref": WritableBox<HTMLElement | null>;
+    "__#99@#name": import("svelte-toolbelt").ReadableBox<string>;
     root: DateFieldRootState;
-    "__#98@#ariaDescribedBy": string | undefined;
+    "__#99@#ariaDescribedBy": string | undefined;
     props: {
         readonly id: string;
         readonly role: "group";

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

@@ -38,6 +38,7 @@ declare class DialogRootState {
     createDescription(props: DialogDescriptionStateProps): DialogDescriptionState;
     createClose(props: DialogCloseStateProps): DialogCloseState;
     createCancel(props: AlertDialogCancelStateProps): AlertDialogCancelState;
+    createAction(props: DialogActionStateProps): DialogActionState;
     sharedProps: {
         readonly "data-state": "open" | "closed";
     };
@@ -67,6 +68,15 @@ declare class DialogCloseState {
         readonly onclick: () => void;
     };
 }
+type DialogActionStateProps = WithRefProps;
+declare class DialogActionState {
+    #private;
+    constructor(props: DialogActionStateProps, root: DialogRootState);
+    props: {
+        readonly "data-state": "open" | "closed";
+        readonly id: string;
+    };
+}
 type DialogTitleStateProps = WithRefProps<ReadableBoxedValues<{
     level: 1 | 2 | 3 | 4 | 5 | 6;
 }>>;
@@ -136,4 +146,5 @@ export declare function useDialogOverlay(props: DialogOverlayStateProps): Dialog
 export declare function useDialogDescription(props: DialogDescriptionStateProps): DialogDescriptionState;
 export declare function useDialogClose(props: DialogCloseStateProps): DialogCloseState;
 export declare function useAlertDialogCancel(props: AlertDialogCancelStateProps): AlertDialogCancelState;
+export declare function useAlertDialogAction(props: DialogActionStateProps): DialogActionState;
 export {};

package/dist/bits/dialog/dialog.svelte.js

@@ -61,6 +61,9 @@ class DialogRootState {
     createCancel(props) {
         return new AlertDialogCancelState(props, this);
     }
+    createAction(props) {
+        return new DialogActionState(props, this);
+    }
     sharedProps = $derived.by(() => ({
         "data-state": getDataOpenClosed(this.open.current),
     }));
@@ -122,6 +125,26 @@ class DialogCloseState {
         ...this.#root.sharedProps,
     }));
 }
+class DialogActionState {
+    #id;
+    #ref;
+    #root;
+    #attr = $derived.by(() => this.#root.attrs.action);
+    constructor(props, root) {
+        this.#id = props.id;
+        this.#ref = props.ref;
+        this.#root = root;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        [this.#attr]: "",
+        ...this.#root.sharedProps,
+    }));
+}
 class DialogTitleState {
     #id;
     #ref;
@@ -275,3 +298,6 @@ export function useDialogClose(props) {
 export function useAlertDialogCancel(props) {
     return getDialogRootContext().createCancel(props);
 }
+export function useAlertDialogAction(props) {
+    return getDialogRootContext().createAction(props);
+}

package/dist/bits/index.d.ts

@@ -36,3 +36,4 @@ export * as Toggle from "./toggle/index.js";
 export * as ToggleGroup from "./toggle-group/index.js";
 export * as Toolbar from "./toolbar/index.js";
 export * as Tooltip from "./tooltip/index.js";
+export { default as Portal } from "./utilities/portal/portal.svelte";

package/dist/bits/index.js

@@ -36,3 +36,4 @@ export * as Toggle from "./toggle/index.js";
 export * as ToggleGroup from "./toggle-group/index.js";
 export * as Toolbar from "./toolbar/index.js";
 export * as Tooltip from "./tooltip/index.js";
+export { default as Portal } from "./utilities/portal/portal.svelte";

package/dist/bits/utilities/portal/portal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getAllContexts, mount, unmount, untrack } from "svelte";
+	import { DEV } from "esm-env";
 	import PortalConsumer from "./portal-consumer.svelte";
 	import type { PortalProps } from "./types.js";
 	import { isBrowser } from "../../../internal/is.js";
@@ -16,16 +17,20 @@
 		if (typeof to === "string") {
 			localTarget = document.querySelector(to);
 			if (localTarget === null) {
-				throw new Error(`Target element "${to}" not found.`);
+				if (DEV) {
+					throw new Error(`Target element "${to}" not found.`);
+				}
 			}
 		} else if (to instanceof HTMLElement || to instanceof DocumentFragment) {
 			localTarget = to;
 		} else {
-			throw new TypeError(
-				`Unknown portal target type: ${
-					to === null ? "null" : typeof to
-				}. Allowed types: string (CSS selector) or HTMLElement.`
-			);
+			if (DEV) {
+				throw new TypeError(
+					`Unknown portal target type: ${
+						to === null ? "null" : typeof to
+					}. Allowed types: string (query selector), HTMLElement, or DocumentFragment.`
+				);
+			}
 		}
 
 		return localTarget;

package/dist/bits/utilities/portal/types.d.ts

@@ -7,10 +7,13 @@ export type PortalProps = {
      */
     to?: HTMLElement | string | DocumentFragment;
     /**
-     * Disable portaling and render the component inline
+     * Disable portalling and render the component inline
      *
      * @defaultValue false
      */
     disabled?: boolean;
+    /**
+     * The children content to render within the portal.
+     */
     children?: Snippet;
 };

package/dist/internal/cssToStyleObj.js

@@ -1,5 +1,5 @@
 import parse from "style-to-object";
-import { camelCase, pascalCase } from "scule";
+import { camelCase, pascalCase } from "./strings.js";
 export function cssToStyleObj(css) {
     if (!css)
         return {};

package/dist/internal/strings.d.ts

@@ -0,0 +1,3 @@
+export declare function pascalCase(str?: string): string;
+export declare function camelCase(str?: string): string;
+export declare function kebabCase(str?: string): string;

package/dist/internal/strings.js

@@ -0,0 +1,70 @@
+const NUMBER_CHAR_RE = /\d/;
+const STR_SPLITTERS = ["-", "_", "/", "."];
+function isUppercase(char = "") {
+    if (NUMBER_CHAR_RE.test(char))
+        return undefined;
+    return char !== char.toLowerCase();
+}
+function splitByCase(str) {
+    const parts = [];
+    let buff = "";
+    let previousUpper;
+    let previousSplitter;
+    for (const char of str) {
+        // Splitter
+        const isSplitter = STR_SPLITTERS.includes(char);
+        if (isSplitter === true) {
+            parts.push(buff);
+            buff = "";
+            previousUpper = undefined;
+            continue;
+        }
+        const isUpper = isUppercase(char);
+        if (previousSplitter === false) {
+            // Case rising edge
+            if (previousUpper === false && isUpper === true) {
+                parts.push(buff);
+                buff = char;
+                previousUpper = isUpper;
+                continue;
+            }
+            // Case falling edge
+            if (previousUpper === true && isUpper === false && buff.length > 1) {
+                const lastChar = buff.at(-1);
+                parts.push(buff.slice(0, Math.max(0, buff.length - 1)));
+                buff = lastChar + char;
+                previousUpper = isUpper;
+                continue;
+            }
+        }
+        // Normal char
+        buff += char;
+        previousUpper = isUpper;
+        previousSplitter = isSplitter;
+    }
+    parts.push(buff);
+    return parts;
+}
+export function pascalCase(str) {
+    if (!str)
+        return "";
+    return splitByCase(str)
+        .map((p) => upperFirst(p))
+        .join("");
+}
+export function camelCase(str) {
+    return lowerFirst(pascalCase(str || ""));
+}
+export function kebabCase(str) {
+    return str
+        ? splitByCase(str)
+            .map((p) => p.toLowerCase())
+            .join("-")
+        : "";
+}
+function upperFirst(str) {
+    return str ? str[0].toUpperCase() + str.slice(1) : "";
+}
+function lowerFirst(str) {
+    return str ? str[0].toLowerCase() + str.slice(1) : "";
+}

package/dist/internal/style.js

@@ -1,4 +1,4 @@
-import styleToCSS from "style-object-to-css-string";
+import { styleToCSS } from "./styleToCSS.js";
 export function styleToString(style = {}) {
     return styleToCSS(style).replace("\n", " ");
 }

package/dist/internal/styleToCSS.d.ts

@@ -0,0 +1 @@
+export declare function styleToCSS(styleObj: object): string;

package/dist/internal/styleToCSS.js

@@ -0,0 +1,23 @@
+function createParser(matcher, replacer) {
+    const regex = RegExp(matcher, "g");
+    return (str) => {
+        // throw an error if not a string
+        if (typeof str !== "string") {
+            throw new TypeError(`expected an argument of type string, but got ${typeof str}`);
+        }
+        // if no match between string and matcher
+        if (!str.match(regex))
+            return str;
+        // executes the replacer function for each match
+        return str.replace(regex, replacer);
+    };
+}
+const camelToKebab = createParser(/[A-Z]/, (match) => `-${match.toLowerCase()}`);
+export function styleToCSS(styleObj) {
+    if (!styleObj || typeof styleObj !== "object" || Array.isArray(styleObj)) {
+        throw new TypeError(`expected an argument of type object, but got ${typeof styleObj}`);
+    }
+    return Object.keys(styleObj)
+        .map((property) => `${camelToKebab(property)}: ${styleObj[property]};`)
+        .join("\n");
+}

package/dist/types.d.ts

@@ -36,3 +36,4 @@ export type * from "./bits/toggle/types.js";
 export type * from "./bits/toggle-group/types.js";
 export type * from "./bits/toolbar/types.js";
 export type * from "./bits/tooltip/types.js";
+export type { PortalProps } from "./bits/utilities/portal/types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.5",
+  "version": "1.0.0-next.7",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -51,10 +51,7 @@
     "@internationalized/date": "^3.5.4",
     "clsx": "^2.1.1",
     "esm-env": "^1.0.0",
-    "nanoid": "^5.0.7",
     "runed": "^0.15.2",
-    "scule": "^1.3.0",
-    "style-object-to-css-string": "^1.1.3",
     "style-to-object": "^1.0.6",
     "svelte-toolbelt": "^0.3.1"
   },

package/dist/shared/style-object-to-css-string.d.ts

@@ -1,10 +0,0 @@
-declare module "style-object-to-css-string" {
-	export default objToString;
-	/**
-	 * Translate a style object into a CSS string
-	 * @param {object} styleObj - The object to run a particular parser against
-	 * @returns {string} - The CSS string
-	 */
-	// eslint-disable-next-line ts/no-explicit-any
-	declare function objToString(styleObj: any): string;
-}