bits-ui 0.8.3 → 0.8.5

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

@@ -1,4 +1,3 @@
 import Root from "./components/Toggle.svelte";
-import Input from "./components/ToggleInput.svelte";
-export { Root, Input, Root as Toggle, Input as ToggleInput };
+export { Root, Root as Toggle };
 export * from "./types.js";

package/dist/bits/toggle/index.js

@@ -1,6 +1,5 @@
 import Root from "./components/Toggle.svelte";
-import Input from "./components/ToggleInput.svelte";
-export { Root, Input, 
+export { Root, 
 //
-Root as Toggle, Input as ToggleInput };
+Root as Toggle };
 export * from "./types.js";

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

@@ -1,6 +1,6 @@
 import type { CreateToggleProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, OmitPressed, OnChangeFn } from "../../internal/index.js";
-import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "../../index.js";
 type Props = Expand<OmitPressed<CreateToggleProps> & {
     pressed?: boolean;
@@ -10,5 +10,4 @@ type Events<T extends Element = HTMLButtonElement> = {
     click: CustomEventHandler<MouseEvent, T>;
     keydown: CustomEventHandler<KeyboardEvent, T>;
 };
-type InputProps = Omit<HTMLInputAttributes, "value">;
-export type { Props, InputProps, Props as ToggleProps, InputProps as ToggleInputProps, Events, Events as ToggleEvents };
+export type { Props, Props as ToggleProps, Events, Events as ToggleEvents };

package/dist/bits/tooltip/components/Tooltip.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        forceVisible?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
         arrowSize?: number | undefined;
         openDelay?: number | undefined;
         closeDelay?: number | undefined;
+        forceVisible?: boolean | undefined;
         group?: string | boolean | undefined;
         portal?: string | HTMLElement | null | undefined;
         closeOnPointerDown?: boolean | undefined;

package/dist/bits/tooltip/components/TooltipArrow.svelte.d.ts

@@ -62,7 +62,7 @@ declare const __propDef: {
         'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
         'aria-activedescendant'?: string | null | undefined;
         'aria-atomic'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | null | undefined;
+        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;

package/dist/bits/tooltip/components/TooltipContent.svelte.d.ts

@@ -70,7 +70,7 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
         'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
         'aria-activedescendant'?: string | null | undefined;
         'aria-atomic'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | null | undefined;
+        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;

package/dist/bits/tooltip/components/TooltipTrigger.svelte.d.ts

@@ -72,7 +72,7 @@ declare const __propDef: {
         'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
         'aria-activedescendant'?: string | null | undefined;
         'aria-atomic'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | null | undefined;
+        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;

package/dist/internal/attrs.d.ts

@@ -0,0 +1,9 @@
+import type { Bit } from "@/content/api-reference/index.js";
+export declare function createBitAttrs<T extends readonly string[]>(bit: Bit, parts: T): (part: T[number]) => Record<string, string>;
+export declare function disabledAttrs(disabled: boolean): {
+    "aria-disabled": boolean;
+    "data-disabled": string;
+} | {
+    "aria-disabled"?: undefined;
+    "data-disabled"?: undefined;
+};

package/dist/internal/attrs.js

@@ -0,0 +1,12 @@
+export function createBitAttrs(bit, parts) {
+    const attrs = {};
+    parts.forEach((part) => {
+        attrs[part] = {
+            [`data-bits-${bit}-${part}`]: ""
+        };
+    });
+    return (part) => attrs[part];
+}
+export function disabledAttrs(disabled) {
+    return disabled ? { "aria-disabled": true, "data-disabled": "" } : {};
+}

package/dist/internal/id.d.ts

@@ -0,0 +1 @@
+export declare function generateId(): string;

package/dist/internal/id.js

@@ -0,0 +1,4 @@
+import { nanoid } from "nanoid/non-secure";
+export function generateId() {
+    return nanoid(10);
+}

package/dist/internal/index.d.ts

@@ -1,4 +1,11 @@
+export * from "./attrs.js";
+export * from "./events.js";
+export * from "./id.js";
 export * from "./is.js";
-export * from "./helpers.js";
+export * from "./kbd.js";
+export * from "./object.js";
+export * from "./sleep.js";
+export * from "./style.js";
+export * from "./transition.js";
 export * from "./types.js";
-export * from "./events.js";
+export * from "./updater.js";

package/dist/internal/index.js

@@ -1,4 +1,11 @@
+export * from "./attrs.js";
+export * from "./events.js";
+export * from "./id.js";
 export * from "./is.js";
-export * from "./helpers.js";
+export * from "./kbd.js";
+export * from "./object.js";
+export * from "./sleep.js";
+export * from "./style.js";
+export * from "./transition.js";
 export * from "./types.js";
-export * from "./events.js";
+export * from "./updater.js";

package/dist/internal/kbd.d.ts

@@ -0,0 +1,35 @@
+export declare const kbd: {
+    ALT: string;
+    ARROW_DOWN: string;
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+    ARROW_UP: string;
+    BACKSPACE: string;
+    CAPS_LOCK: string;
+    CONTROL: string;
+    DELETE: string;
+    END: string;
+    ENTER: string;
+    ESCAPE: string;
+    F1: string;
+    F10: string;
+    F11: string;
+    F12: string;
+    F2: string;
+    F3: string;
+    F4: string;
+    F5: string;
+    F6: string;
+    F7: string;
+    F8: string;
+    F9: string;
+    HOME: string;
+    META: string;
+    PAGE_DOWN: string;
+    PAGE_UP: string;
+    SHIFT: string;
+    SPACE: string;
+    TAB: string;
+    CTRL: string;
+    ASTERISK: string;
+};

package/dist/internal/kbd.js

@@ -0,0 +1,35 @@
+export const kbd = {
+    ALT: "Alt",
+    ARROW_DOWN: "ArrowDown",
+    ARROW_LEFT: "ArrowLeft",
+    ARROW_RIGHT: "ArrowRight",
+    ARROW_UP: "ArrowUp",
+    BACKSPACE: "Backspace",
+    CAPS_LOCK: "CapsLock",
+    CONTROL: "Control",
+    DELETE: "Delete",
+    END: "End",
+    ENTER: "Enter",
+    ESCAPE: "Escape",
+    F1: "F1",
+    F10: "F10",
+    F11: "F11",
+    F12: "F12",
+    F2: "F2",
+    F3: "F3",
+    F4: "F4",
+    F5: "F5",
+    F6: "F6",
+    F7: "F7",
+    F8: "F8",
+    F9: "F9",
+    HOME: "Home",
+    META: "Meta",
+    PAGE_DOWN: "PageDown",
+    PAGE_UP: "PageUp",
+    SHIFT: "Shift",
+    SPACE: " ",
+    TAB: "Tab",
+    CTRL: "Control",
+    ASTERISK: "*"
+};

package/dist/internal/object.d.ts

@@ -0,0 +1 @@
+export declare function removeUndefined<T extends object>(obj: T): T;

package/dist/internal/object.js

@@ -0,0 +1,10 @@
+export function removeUndefined(obj) {
+    const result = {};
+    for (const key in obj) {
+        const value = obj[key];
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    }
+    return result;
+}

package/dist/internal/sleep.d.ts

@@ -0,0 +1 @@
+export declare function sleep(ms: number): Promise<unknown>;

package/dist/internal/sleep.js

@@ -0,0 +1,3 @@
+export function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/dist/internal/style.d.ts

@@ -0,0 +1,3 @@
+export declare function styleToString(style: Record<string, number | string | undefined>): string;
+export declare const srOnlyStyles: string;
+export declare const hiddenInputStyles: string;

package/dist/internal/style.js

@@ -0,0 +1,27 @@
+export function styleToString(style) {
+    return Object.keys(style).reduce((str, key) => {
+        if (style[key] === undefined)
+            return str;
+        return str + `${key}:${style[key]};`;
+    }, "");
+}
+export const srOnlyStyles = styleToString({
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: "0"
+});
+export const hiddenInputStyles = styleToString({
+    position: "absolute",
+    width: "25px",
+    height: "25px",
+    opacity: "0",
+    margin: "0px",
+    pointerEvents: "none",
+    transform: "translateX(-100%)"
+});

package/dist/internal/transition.d.ts

@@ -0,0 +1,11 @@
+import type { Transition, TransitionParams, TransitionTimesStore } from "./index.js";
+type TransitionsObj<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = {
+    transition?: T;
+    transitionConfig?: TransitionParams<T>;
+    inTransition?: In;
+    inTransitionConfig?: TransitionParams<In>;
+    outTransition?: Out;
+    outTransitionConfig?: TransitionParams<Out>;
+};
+export declare function setTransitionTimes(transitionTimes: TransitionTimesStore, transitionsObj: TransitionsObj): void;
+export {};

package/dist/internal/transition.js

@@ -0,0 +1,55 @@
+import { isBrowser } from "./index.js";
+export function setTransitionTimes(transitionTimes, transitionsObj) {
+    if (!isBrowser)
+        return;
+    const { transition, transitionConfig, inTransition, inTransitionConfig, outTransition, outTransitionConfig } = transitionsObj;
+    if (transition) {
+        if (transitionConfig) {
+            const { delay, duration } = transition(document.body, transitionConfig);
+            const time = calcTime(delay, duration);
+            transitionTimes.set({
+                in: time,
+                out: time
+            });
+            return;
+        }
+        const { delay, duration } = transition(document.body);
+        const time = calcTime(delay, duration);
+        transitionTimes.set({
+            in: time,
+            out: time
+        });
+        return;
+    }
+    let inTime = 0;
+    let outTime = 0;
+    if (inTransition) {
+        if (inTransitionConfig) {
+            const { delay, duration } = inTransition(document.body, inTransitionConfig);
+            inTime = calcTime(delay, duration);
+        }
+        else {
+            const { delay, duration } = inTransition(document.body);
+            inTime = calcTime(delay, duration);
+        }
+    }
+    if (outTransition) {
+        if (outTransitionConfig) {
+            const { delay, duration } = outTransition(document.body, outTransitionConfig);
+            outTime = calcTime(delay, duration);
+        }
+        else {
+            const { delay, duration } = outTransition(document.body);
+            outTime = calcTime(delay, duration);
+        }
+    }
+    transitionTimes.set({
+        in: inTime,
+        out: outTime
+    });
+}
+function calcTime(delay, duration) {
+    const numDelay = delay ?? 0;
+    const numDuration = duration ?? 0;
+    return numDelay + numDuration;
+}

package/dist/internal/updater.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="svelte" />
+import type { Writable } from "svelte/store";
+type Options = Record<string, Writable<unknown>>;
+export declare function getOptionUpdater(options: Options): <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+export {};

package/dist/internal/updater.js

@@ -0,0 +1,10 @@
+export function getOptionUpdater(options) {
+    return function (key, value) {
+        if (value === undefined)
+            return;
+        const store = options[key];
+        if (store) {
+            store.set(value);
+        }
+    };
+}

package/package.json

@@ -1,7 +1,8 @@
 {
 	"name": "bits-ui",
-	"version": "0.8.3",
+	"version": "0.8.5",
 	"license": "MIT",
+	"repository": "github:huntabyte/bits-ui",
 	"scripts": {
 		"dev": "concurrently \"pnpm:dev:content\" \"pnpm:dev:svelte\"",
 		"dev:content": "contentlayer dev",
@@ -12,13 +13,11 @@
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "pnpm run package",
-		"test": "pnpm run test:integration && pnpm run test:unit",
 		"check": "pnpm build:content && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest",
+		"test": "vitest",
 		"release": "changeset publish",
 		"changeset": "changeset"
 	},
@@ -44,6 +43,12 @@
 		"@sveltejs/package": "^2.2.2",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"@tailwindcss/typography": "^0.5.10",
+		"@testing-library/dom": "^9.3.1",
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/svelte": "^4.0.3",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/jest-axe": "^3.5.5",
+		"@types/testing-library__jest-dom": "^5.14.9",
 		"@typescript-eslint/eslint-plugin": "^6.8.0",
 		"@typescript-eslint/parser": "^6.8.0",
 		"autoprefixer": "^10.4.16",
@@ -55,6 +60,8 @@
 		"eslint-plugin-svelte": "^2.34.0",
 		"esm-env": "^1.0.0",
 		"hast-util-to-html": "^9.0.0",
+		"jest-axe": "^8.0.0",
+		"jsdom": "^22.1.0",
 		"lucide-svelte": "^0.268.0",
 		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
@@ -65,8 +72,8 @@
 		"radix-icons-svelte": "^1.2.1",
 		"rehype-pretty-code": "^0.10.0",
 		"remark-gfm": "^4.0.0",
+		"resize-observer-polyfill": "^1.5.1",
 		"shiki": "^0.14.5",
-		"shikiji": "^0.6.10",
 		"svelte": "^4.2.2",
 		"svelte-check": "^3.5.2",
 		"svelte-sequential-preprocessor": "^2.0.1",
@@ -74,19 +81,18 @@
 		"tailwind-merge": "^1.14.0",
 		"tailwind-variants": "^0.1.14",
 		"tailwindcss": "^3.3.3",
-		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
 		"unist-builder": "^4.0.0",
 		"unist-util-visit": "^5.0.0",
 		"vite": "^4.5.0",
-		"vitest": "^0.34.6"
+		"vitest": "0.33.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.57.0",
+		"@melt-ui/svelte": "0.57.2",
 		"nanoid": "^5.0.2"
 	},
 	"peerDependencies": {

package/dist/bits/toggle/components/ToggleInput.svelte

@@ -1,8 +0,0 @@
-<script>import { getCtx, getAttrs } from "../ctx.js";
-const {
-  states: { pressed }
-} = getCtx();
-const attrs = getAttrs("input");
-</script>
-
-<input value={$pressed} hidden {...$$restProps} {...attrs} />

package/dist/internal/helpers.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="svelte" />
-import type { Writable } from "svelte/store";
-import type { Builder, Transition, TransitionParams, TransitionTimesStore } from "./types.js";
-import type { Bit } from "@/content/api-reference/index.js";
-export declare function noop(): void;
-export declare function generateId(): string;
-export declare function removeUndefined<T extends object>(obj: T): T;
-type Options = Record<string, Writable<unknown>>;
-export declare function getOptionUpdater(options: Options): <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
-type BuilderActionsParams = {
-    builders: Builder[];
-};
-type BuilderActionsReturn = {
-    destroy: () => void;
-};
-export declare function builderActions(node: HTMLElement, params: BuilderActionsParams): BuilderActionsReturn;
-export declare function getAttrs(builders: Builder[]): Record<string, unknown>;
-export declare function disabledAttrs(disabled: boolean): {
-    "aria-disabled": boolean;
-    "data-disabled": string;
-} | {
-    "aria-disabled"?: undefined;
-    "data-disabled"?: undefined;
-};
-export declare function sleep(ms: number): Promise<unknown>;
-export declare function styleToString(style: Record<string, number | string | undefined>): string;
-type TransitionsObj<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = {
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-    inTransition?: In;
-    inTransitionConfig?: TransitionParams<In>;
-    outTransition?: Out;
-    outTransitionConfig?: TransitionParams<Out>;
-};
-export declare function setTransitionTimes(transitionTimes: TransitionTimesStore, transitionsObj: TransitionsObj): void;
-export declare function createBitAttrs<T extends readonly string[]>(bit: Bit, parts: T): (part: T[number]) => Record<string, string>;
-export {};

package/dist/internal/helpers.js

@@ -1,132 +0,0 @@
-import { nanoid } from "nanoid/non-secure";
-import { isBrowser } from "./is.js";
-export function noop() {
-    // do nothing
-}
-export function generateId() {
-    return nanoid(10);
-}
-export function removeUndefined(obj) {
-    const result = {};
-    for (const key in obj) {
-        const value = obj[key];
-        if (value !== undefined) {
-            result[key] = value;
-        }
-    }
-    return result;
-}
-export function getOptionUpdater(options) {
-    return function (key, value) {
-        if (value === undefined)
-            return;
-        const store = options[key];
-        store.set(value);
-    };
-}
-export function builderActions(node, params) {
-    const unsubs = [];
-    params.builders.forEach((builder) => {
-        const act = builder.action(node);
-        if (act) {
-            unsubs.push(act);
-        }
-    });
-    return {
-        destroy: () => {
-            unsubs.forEach((unsub) => {
-                if (unsub.destroy) {
-                    unsub.destroy();
-                }
-            });
-        }
-    };
-}
-export function getAttrs(builders) {
-    const attrs = {};
-    builders.forEach((builder) => {
-        Object.keys(builder).forEach((key) => {
-            if (key !== "action") {
-                attrs[key] = builder[key];
-            }
-        });
-    });
-    return attrs;
-}
-export function disabledAttrs(disabled) {
-    return disabled ? { "aria-disabled": true, "data-disabled": "" } : {};
-}
-export function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-export function styleToString(style) {
-    return Object.keys(style).reduce((str, key) => {
-        if (style[key] === undefined)
-            return str;
-        return str + `${key}:${style[key]};`;
-    }, "");
-}
-export function setTransitionTimes(transitionTimes, transitionsObj) {
-    if (!isBrowser)
-        return;
-    const { transition, transitionConfig, inTransition, inTransitionConfig, outTransition, outTransitionConfig } = transitionsObj;
-    if (transition) {
-        if (transitionConfig) {
-            const { delay, duration } = transition(document.body, transitionConfig);
-            const time = calcTime(delay, duration);
-            transitionTimes.set({
-                in: time,
-                out: time
-            });
-            return;
-        }
-        const { delay, duration } = transition(document.body);
-        const time = calcTime(delay, duration);
-        transitionTimes.set({
-            in: time,
-            out: time
-        });
-        return;
-    }
-    let inTime = 0;
-    let outTime = 0;
-    if (inTransition) {
-        if (inTransitionConfig) {
-            const { delay, duration } = inTransition(document.body, inTransitionConfig);
-            inTime = calcTime(delay, duration);
-        }
-        else {
-            const { delay, duration } = inTransition(document.body);
-            inTime = calcTime(delay, duration);
-        }
-    }
-    if (outTransition) {
-        if (outTransitionConfig) {
-            const { delay, duration } = outTransition(document.body, outTransitionConfig);
-            outTime = calcTime(delay, duration);
-        }
-        else {
-            const { delay, duration } = outTransition(document.body);
-            outTime = calcTime(delay, duration);
-        }
-    }
-    transitionTimes.set({
-        in: inTime,
-        out: outTime
-    });
-}
-function calcTime(delay, duration) {
-    const numDelay = delay ?? 0;
-    const numDuration = duration ?? 0;
-    return numDelay + numDuration;
-}
-export function createBitAttrs(bit, parts) {
-    const attrs = {};
-    parts.forEach((part) => {
-        attrs[part] = {
-            [`data-bits-${bit}-${part}`]: ""
-        };
-    });
-    // return a getter that given a part returns the attrs for that part
-    return (part) => attrs[part];
-}