@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.11

package/dist/utils/id.js

@@ -2,5 +2,5 @@ import { nanoid, customAlphabet } from "nanoid";
 import { getContext, setContext } from "svelte";
 export const alphaid = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz");
 export const htmlid = (size = 10) => alphaid(1) + nanoid(size - 1);
-export const getIdContext = () => getContext("Id");
+export const useProvidedId = () => getContext("Id");
 export const createIdContext = (id) => setContext("Id", id);

package/dist/utils/on-document-ready.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentReady(cb: () => void): void;

package/dist/utils/on-document-ready.js

@@ -0,0 +1,12 @@
+export function onDocumentReady(cb) {
+    function check() {
+        if (document.readyState === "loading")
+            return;
+        cb();
+        document.removeEventListener("DOMContentLoaded", check);
+    }
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+        document.addEventListener("DOMContentLoaded", check);
+        check();
+    }
+}

package/dist/utils/render.d.ts

@@ -28,4 +28,7 @@ export type PropsForFeatures<T extends RenderFeatures> = Expand<UnionToIntersect
     unmount?: boolean;
 }>>>;
 export declare function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>;
+export declare function mergePropsAdvanced(...listOfProps: Props<any, any>[]): Props<any, any>;
+export declare function compact<T extends Record<any, any>>(object: T): {} & T;
+export declare function omit<T extends Record<any, any>>(object: T, keysToOmit?: string[]): T;
 export {};

package/dist/utils/render.js

@@ -54,3 +54,66 @@ export function mergeProps(...listOfProps) {
     }
     return target;
 }
+// A more complex example fo the `mergeProps` function, this one also cancels subsequent event
+// listeners if the event has already been `preventDefault`ed.
+export function mergePropsAdvanced(...listOfProps) {
+    if (listOfProps.length === 0)
+        return {};
+    if (listOfProps.length === 1)
+        return listOfProps[0];
+    let target = {};
+    let eventHandlers = {};
+    for (let props of listOfProps) {
+        for (let prop in props) {
+            // Collect event handlers
+            if (prop.startsWith("on") && typeof props[prop] === "function") {
+                eventHandlers[prop] ??= [];
+                eventHandlers[prop].push(props[prop]);
+            }
+            else {
+                // Override incoming prop
+                target[prop] = props[prop];
+            }
+        }
+    }
+    // Ensure event listeners are not called if `disabled` or `aria-disabled` is true
+    if (target.disabled || target["aria-disabled"]) {
+        for (let eventName in eventHandlers) {
+            // Prevent default events for `onclick`, `onmousedown`, `onkeydown`, etc.
+            if (/^(on(?:click|pointer|mouse|key)(?:down|up|press)?)$/.test(eventName)) {
+                eventHandlers[eventName] = [(e) => e?.preventDefault?.()];
+            }
+        }
+    }
+    // Merge event handlers
+    for (let eventName in eventHandlers) {
+        Object.assign(target, {
+            [eventName](event, ...args) {
+                let handlers = eventHandlers[eventName];
+                for (let handler of handlers) {
+                    if ((event instanceof Event || event?.nativeEvent instanceof Event) && event.defaultPrevented) {
+                        return;
+                    }
+                    handler(event, ...args);
+                }
+            },
+        });
+    }
+    return target;
+}
+export function compact(object) {
+    let clone = Object.assign({}, object);
+    for (let key in clone) {
+        if (clone[key] === undefined)
+            delete clone[key];
+    }
+    return clone;
+}
+export function omit(object, keysToOmit = []) {
+    let clone = Object.assign({}, object);
+    for (let key of keysToOmit) {
+        if (key in clone)
+            delete clone[key];
+    }
+    return clone;
+}

package/dist/utils/state.d.ts

@@ -1 +1,7 @@
-export declare const stateFromSlot: <TSlot extends Record<string, any>>(slot?: TSlot) => Record<string, string>;
+export type SlotStateProps<TSlot> = {
+    [Property in keyof TSlot as TSlot[Property] extends boolean ? `data-${string & Property}` : never]?: string;
+};
+export type StateProps<TSlot> = SlotStateProps<TSlot> & {
+    "data-headlessui-state"?: string;
+};
+export declare const stateFromSlot: <TSlot>(slot?: TSlot) => StateProps<TSlot>;

package/dist/utils/state.js

@@ -1,4 +1,6 @@
 export const stateFromSlot = (slot = {}) => {
+    if (typeof slot !== "object")
+        return {};
     let dataAttributes = {};
     let exposeState = false;
     let states = [];
@@ -10,11 +12,13 @@ export const stateFromSlot = (slot = {}) => {
             states.push(k.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`));
         }
     }
-    if (exposeState) {
-        dataAttributes["data-headlessui-state"] = states.join(" ");
-        for (let s of states) {
-            dataAttributes[`data-${s}`] = "";
-        }
+    if (!exposeState)
+        return {};
+    for (let s of states) {
+        dataAttributes[`data-${s}`] = "";
     }
-    return dataAttributes;
+    return {
+        "data-headlessui-state": states.join(" "),
+        ...dataAttributes,
+    };
 };

package/dist/utils/style.d.ts

@@ -0,0 +1,2 @@
+export declare const camelToKebab: (s: string) => string;
+export declare const stylePropsToString: (props: Record<string, unknown>) => string;

package/dist/utils/style.js

@@ -0,0 +1,6 @@
+export const camelToKebab = (s) => s.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+export const stylePropsToString = (props) => {
+    return Object.entries(props)
+        .map(([key, value]) => `${camelToKebab(key)}: ${typeof value === "number" ? `${value}px` : value}`)
+        .join(";");
+};

package/dist/utils/types.d.ts

@@ -1,27 +1,24 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes, SvelteHTMLElements } from "svelte/elements";
-declare const __: "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
-export type __ = typeof __;
-export type ElementType = keyof SvelteHTMLElements;
-export type HTMLElementType<T extends keyof SvelteHTMLElements> = SvelteHTMLElements[T] extends HTMLAttributes<infer U> ? (U extends HTMLElement ? U : never) : never;
+import type { SvelteHTMLElements } from "svelte/elements";
+export interface SvelteHTMLProps extends SvelteHTMLElements {
+    "svelte:fragment": {};
+}
+export type ElementType = keyof SvelteHTMLProps;
 export type Expand<T> = T extends infer O ? {
     [K in keyof O]: O[K];
 } : never;
-export type PropsOf<TTag extends keyof SvelteHTMLElements> = TTag extends keyof SvelteHTMLElements ? SvelteHTMLElements[TTag] : never;
-type PropsWeControl = "as" | "children" | "class";
-type CleanProps<TTag extends keyof SvelteHTMLElements, TOmittableProps extends PropertyKey = never> = Omit<SvelteHTMLElements[TTag], TOmittableProps | PropsWeControl>;
-type OurProps<TTag extends keyof SvelteHTMLElements, TSlot> = {
-    as?: TTag;
-    children?: Snippet<[TSlot]>;
+export type PropsOf<TTag extends ElementType> = SvelteHTMLProps[TTag];
+export type Children<TSlot> = Snippet | Snippet<[TSlot, Record<string, any>]>;
+type PropsWeControl = "as" | "children" | "refName" | "class";
+type CleanProps<TTag extends ElementType, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>;
+type OurProps<TSlot> = {
+    children?: Children<TSlot>;
+    ref?: HTMLElement;
 };
 type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never;
-type ClassNameOverride<TTag extends keyof SvelteHTMLElements, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
+type ClassNameOverride<TTag extends ElementType, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
     class?: PropsOf<TTag>["class"] | ((bag: TSlot) => string);
 } : {};
-export type Props<TTag extends keyof SvelteHTMLElements, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
-type Without<T, U> = {
-    [P in Exclude<keyof T, keyof U>]?: never;
-};
-export type XOR<T, U> = T | U extends __ ? never : T extends __ ? U : U extends __ ? T : T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type Props<TTag extends ElementType, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
 export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
 export {};

package/dist/utils/types.js

@@ -1,6 +1 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-// A unique placeholder we can use as a default. This is nice because we can use this instead of
-// defaulting to null / never / ... and possibly collide with actual data.
-// Ideally we use a unique symbol here.
-const __ = "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.1-next.1",
+  "version": "2.1.2-next.11",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,45 +13,47 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.1"
+    "svelte": "^5.0.0-next.244"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.8",
     "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.45.2",
+    "@playwright/test": "^1.47.0",
     "@pzerelles/heroicons-svelte": "^2.1.5",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/svelte": "^5.2.0",
-    "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.10",
-    "autoprefixer": "^10.4.19",
-    "clsx": "^2.1.1",
-    "eslint": "^9.7.0",
+    "@sveltejs/adapter-auto": "^3.2.4",
+    "@sveltejs/kit": "^2.5.26",
+    "@sveltejs/package": "^2.3.4",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/svelte": "^5.2.1",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^20.16.5",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.42.0",
-    "globals": "^15.8.0",
-    "jsdom": "^24.1.0",
+    "eslint-plugin-svelte": "^2.43.0",
+    "globals": "^15.9.0",
+    "jsdom": "^24.1.3",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.45",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "publint": "^0.1.16",
-    "svelte": "5.0.0-next.184",
-    "svelte-check": "^3.8.4",
-    "tailwindcss": "^3.4.5",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "8.0.0-alpha.28",
-    "vite": "^5.3.4",
-    "vitest": "^2.0.3"
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "publint": "^0.2.10",
+    "svelte": "^5.0.0-next.244",
+    "svelte-check": "^3.8.6",
+    "tailwindcss": "^3.4.11",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.5.0",
+    "vite": "^5.4.4",
+    "vitest": "^2.0.5"
   },
   "dependencies": {
-    "@skeletonlabs/floating-ui-svelte": "^0.3.1",
+    "@floating-ui/core": "^1.6.7",
+    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/utils": "^0.2.7",
+    "clsx": "^2.1.1",
     "esm-env": "^1.0.0",
     "nanoid": "^5.0.7"
   },

package/dist/internal/id.d.ts

@@ -1,8 +0,0 @@
-type IdContext = {
-    value?: string;
-};
-export declare function useProvidedId(): IdContext;
-export declare function useIdContext(options: {
-    id?: string;
-}): void;
-export {};

package/dist/internal/id.js

@@ -1,11 +0,0 @@
-import { getContext, setContext } from "svelte";
-export function useProvidedId() {
-    return getContext("IdContext");
-}
-export function useIdContext(options) {
-    setContext("IdContext", {
-        get value() {
-            return options.id;
-        },
-    });
-}

package/dist/tabs/Button.svelte

@@ -1,65 +0,0 @@
-<script lang="ts" context="module">const DEFAULT_BUTTON_TAG = "button";
-</script>
-
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { stateFromSlot } from "../utils/state.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { mergeProps } from "../utils/render.js";
-const providedDisabled = useDisabled();
-let {
-  as,
-  disabled: ownDisabled = false,
-  autofocus = false,
-  type = "button",
-  children,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const slot = $derived({
-  disabled,
-  hover,
-  focus,
-  active,
-  autofocus
-});
-const ownProps = $derived(
-  mergeProps(
-    {
-      type,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps,
-    pressProps,
-    stateFromSlot(slot)
-  )
-);
-</script>
-
-<svelte:element this={as ?? DEFAULT_BUTTON_TAG} {...ownProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>

package/dist/tabs/Button.svelte.d.ts

@@ -1,39 +0,0 @@
-import type { SvelteHTMLElements } from "svelte/elements";
-export type ButtonProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_BUTTON_TAG> = SvelteHTMLElements[TTag] & {
-    as?: TTag;
-    disabled?: boolean;
-    autofocus?: boolean;
-    type?: "button" | "submit" | "reset";
-    children?: Snippet<[
-        {
-            disabled: boolean;
-            hover: boolean;
-            focus: boolean;
-            active: boolean;
-            autofocus: boolean;
-        }
-    ]>;
-};
-declare const DEFAULT_BUTTON_TAG: "button";
-import type { Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
-    props(): ButtonProps<TTag>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends keyof SvelteHTMLElements, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-declare const Button: $$IsomorphicComponent;
-type Button<TTag extends keyof SvelteHTMLElements, TType> = InstanceType<typeof Button<TTag, TType>>;
-export default Button;

package/dist/utils/close.d.ts

@@ -1,2 +0,0 @@
-export declare const createCloseContext: (close: () => void) => () => void;
-export declare const getCloseContext: () => (() => void) | undefined;

package/dist/utils/close.js

@@ -1,3 +0,0 @@
-import { getContext, setContext } from "svelte";
-export const createCloseContext = (close) => setContext("Close", close);
-export const getCloseContext = () => getContext("Close");