@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.10

package/dist/utils/ref.svelte.d.ts

@@ -0,0 +1,4 @@
+export type MutableRefObject<T> = {
+    current: T;
+};
+export declare const useRef: <T>(current: T) => MutableRefObject<T>;

package/dist/utils/ref.svelte.js

@@ -0,0 +1,4 @@
+export const useRef = (current) => {
+    const ref = $state({ current });
+    return ref;
+};

package/dist/utils/render.d.ts

@@ -0,0 +1,34 @@
+import type { Props } from "./types.js";
+export declare enum RenderFeatures {
+    /** No features at all */
+    None = 0,
+    /**
+     * When used, this will allow us to use one of the render strategies.
+     *
+     * **The render strategies are:**
+     *    - **Unmount**   _(Will unmount the component.)_
+     *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
+     */
+    RenderStrategy = 1,
+    /**
+     * When used, this will allow the user of our component to be in control. This can be used when
+     * you want to transition based on some state.
+     */
+    Static = 2
+}
+export declare enum RenderStrategy {
+    Unmount = 0,
+    Hidden = 1
+}
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+type PropsForFeature<TPassedInFeatures extends RenderFeatures, TForFeature extends RenderFeatures, TProps> = TPassedInFeatures extends TForFeature ? TProps : {};
+export type PropsForFeatures<T extends RenderFeatures> = Expand<UnionToIntersection<PropsForFeature<T, RenderFeatures.Static, {
+    static?: boolean;
+}> | PropsForFeature<T, RenderFeatures.RenderStrategy, {
+    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

@@ -0,0 +1,119 @@
+export var RenderFeatures;
+(function (RenderFeatures) {
+    /** No features at all */
+    RenderFeatures[RenderFeatures["None"] = 0] = "None";
+    /**
+     * When used, this will allow us to use one of the render strategies.
+     *
+     * **The render strategies are:**
+     *    - **Unmount**   _(Will unmount the component.)_
+     *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
+     */
+    RenderFeatures[RenderFeatures["RenderStrategy"] = 1] = "RenderStrategy";
+    /**
+     * When used, this will allow the user of our component to be in control. This can be used when
+     * you want to transition based on some state.
+     */
+    RenderFeatures[RenderFeatures["Static"] = 2] = "Static";
+})(RenderFeatures || (RenderFeatures = {}));
+export var RenderStrategy;
+(function (RenderStrategy) {
+    RenderStrategy[RenderStrategy["Unmount"] = 0] = "Unmount";
+    RenderStrategy[RenderStrategy["Hidden"] = 1] = "Hidden";
+})(RenderStrategy || (RenderStrategy = {}));
+export function mergeProps(...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) {
+            // Merge event listeners
+            if (prop.startsWith("on") && typeof props[prop] === "function") {
+                eventHandlers[prop] ??= [];
+                eventHandlers[prop].push(props[prop]);
+            }
+            else {
+                // Override incoming prop
+                target[prop] = props[prop];
+            }
+        }
+    }
+    // Merge event handlers
+    for (let eventName in eventHandlers) {
+        Object.assign(target, {
+            [eventName](...args) {
+                let handlers = eventHandlers[eventName];
+                for (let handler of handlers) {
+                    handler?.(...args);
+                }
+            },
+        });
+    }
+    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/store.d.ts

@@ -0,0 +1,11 @@
+type ChangeFn = () => void;
+type UnsubscribeFn = () => void;
+type ActionFn<T> = (this: T, ...args: any[]) => T | void;
+type StoreActions<Key extends string, T> = Record<Key, ActionFn<T>>;
+export interface Store<T, ActionKey extends string> {
+    getSnapshot(): T;
+    subscribe(onChange: ChangeFn): UnsubscribeFn;
+    dispatch(action: ActionKey, ...args: any[]): void;
+}
+export declare function createStore<T, ActionKey extends string>(initial: () => T, actions: StoreActions<ActionKey, T>): Store<T, ActionKey>;
+export {};

package/dist/utils/store.js

@@ -0,0 +1,20 @@
+export function createStore(initial, actions) {
+    let state = initial();
+    let listeners = new Set();
+    return {
+        getSnapshot() {
+            return state;
+        },
+        subscribe(onChange) {
+            listeners.add(onChange);
+            return () => listeners.delete(onChange);
+        },
+        dispatch(key, ...args) {
+            let newState = actions[key].call(state, ...args);
+            if (newState) {
+                state = newState;
+                listeners.forEach((listener) => listener());
+            }
+        },
+    };
+}

package/dist/utils/types.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+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 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 ElementType, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
+    class?: PropsOf<TTag>["class"] | ((bag: TSlot) => string);
+} : {};
+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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.0.0-next.1",
+  "version": "2.1.2-next.10",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,41 +13,48 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.1"
+    "svelte": "^5.0.0-next.244"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.5",
+    "@changesets/cli": "^2.27.8",
     "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.44.1",
-    "@sveltejs/adapter-auto": "^3.2.1",
-    "@sveltejs/kit": "^2.5.10",
-    "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.2",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9.4.0",
+    "@playwright/test": "^1.47.0",
+    "@pzerelles/heroicons-svelte": "^2.1.5",
+    "@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.39.0",
-    "globals": "^15.3.0",
+    "eslint-plugin-svelte": "^2.43.0",
+    "globals": "^15.9.0",
+    "jsdom": "^24.1.3",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.38",
-    "prettier": "^3.3.1",
-    "prettier-plugin-svelte": "^3.2.3",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "publint": "^0.1.16",
-    "svelte": "5.0.0-next.150",
-    "svelte-check": "^3.8.0",
-    "tailwindcss": "^3.4.4",
-    "tslib": "^2.6.3",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "8.0.0-alpha.28",
-    "vite": "^5.2.12",
-    "vitest": "^1.6.0"
+    "postcss": "^8.4.45",
+    "prettier": "^3.3.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.10",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.5.0",
+    "vite": "^5.4.4",
+    "vitest": "^2.0.5"
   },
   "dependencies": {
-    "nanoid": "^5.0.7",
-    "svelte-interactions": "^0.2.0"
+    "@floating-ui/core": "^1.6.7",
+    "@floating-ui/dom": "^1.6.10",
+    "clsx": "^2.1.1",
+    "esm-env": "^1.0.0",
+    "nanoid": "^5.0.7"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -57,6 +64,7 @@
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-package --watch",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

package/dist/actions/activePress.svelte.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="svelte" />
-import type { Action } from "svelte/action";
-export declare const createActivePress: ({ disabled }: {
-    disabled?: boolean;
-}) => {
-    activePressAction: Action<HTMLElement, undefined, Record<never, any>>;
-    readonly pressed: boolean;
-};

package/dist/actions/focusRing.svelte.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="svelte" />
-import type { Action } from "svelte/action";
-export declare const createFocusRing: ({ autoFocus, within }?: {
-    autoFocus?: boolean;
-    within?: boolean;
-}) => {
-    focusRingAction: Action<HTMLElement, undefined, Record<never, any>>;
-    readonly focusVisible: boolean;
-};

package/dist/actions/focusRing.svelte.js

@@ -1,34 +0,0 @@
-import { isFocusVisible, useFocusVisibleListener } from "../utils/focusVisible.svelte.js";
-export const createFocusRing = ({ autoFocus = false, within } = {}) => {
-    let focused = $state(false);
-    let focusVisible = $state(autoFocus || isFocusVisible());
-    useFocusVisibleListener((isFocusVisible) => {
-        focusVisible = isFocusVisible;
-    });
-    const focusRingAction = (node) => {
-        const handleFocus = (e) => {
-            focused = true;
-        };
-        const handleBlur = (e) => {
-            focused = false;
-        };
-        if (!within) {
-            node.addEventListener("focus", handleFocus);
-            node.addEventListener("blur", handleBlur);
-        }
-        return {
-            destroy: () => {
-                if (!within) {
-                    node.removeEventListener("focus", handleFocus);
-                    node.removeEventListener("blur", handleBlur);
-                }
-            },
-        };
-    };
-    return {
-        focusRingAction,
-        get focusVisible() {
-            return focusVisible && focused;
-        },
-    };
-};

package/dist/utils/disabled.d.ts

@@ -1,3 +0,0 @@
-export declare const getDisabledContext: () => {
-    readonly disabled: boolean;
-} | undefined;

package/dist/utils/disabled.js

@@ -1,2 +0,0 @@
-import { getContext } from "svelte";
-export const getDisabledContext = () => getContext("Disabled");