@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.51

package/dist/utils/floating-ui/svelte-dom/types.d.ts

@@ -0,0 +1,80 @@
+import type { MutableRefObject } from "../../ref.svelte.js";
+import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from "@floating-ui/dom";
+export type { ArrowOptions } from "./arrow.js";
+export { arrow } from "./arrow.js";
+export { useFloating } from "./useFloating.svelte.js";
+export type { AlignedPlacement, Alignment, AutoPlacementOptions, AutoUpdateOptions, Axis, Boundary, ClientRectObject, ComputePositionConfig, ComputePositionReturn, Coords, Derivable, DetectOverflowOptions, Dimensions, ElementContext, ElementRects, Elements, FlipOptions, FloatingElement, HideOptions, InlineOptions, Length, Middleware, MiddlewareArguments, MiddlewareData, MiddlewareReturn, MiddlewareState, NodeScroll, OffsetOptions, Padding, Placement, Platform, Rect, ReferenceElement, RootBoundary, ShiftOptions, Side, SideObject, SizeOptions, Strategy, VirtualElement, } from "@floating-ui/dom";
+export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "@floating-ui/dom";
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type UseFloatingData = Prettify<ComputePositionReturn & {
+    isPositioned: boolean;
+}>;
+export type ReferenceType = Element | VirtualElement;
+export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Prettify<UseFloatingData & {
+    /**
+     * Update the position of the floating element, re-rendering the component
+     * if required.
+     */
+    update: () => void;
+    /**
+     * Pre-configured positioning styles to apply to the floating element.
+     */
+    floatingStyles: string;
+    /**
+     * Object containing the reference and floating refs and reactive setters.
+     */
+    refs: {
+        /**
+         * A React ref to the reference element.
+         */
+        reference: MutableRefObject<RT | null>;
+        /**
+         * A React ref to the floating element.
+         */
+        floating: MutableRefObject<HTMLElement | null>;
+        /**
+         * A callback to set the reference element (reactive).
+         */
+        setReference: (node: RT | null | undefined) => void;
+        /**
+         * A callback to set the floating element (reactive).
+         */
+        setFloating: (node: HTMLElement | null | undefined) => void;
+    };
+    /**
+     * Object containing the reference and floating elements.
+     */
+    elements: {
+        reference: RT | null;
+        floating: HTMLElement | null;
+    };
+}>;
+export type UseFloatingOptions<RT extends ReferenceType = ReferenceType> = Prettify<Partial<ComputePositionConfig> & {
+    /**
+     * A callback invoked when both the reference and floating elements are
+     * mounted, and cleaned up when either is unmounted. This is useful for
+     * setting up event listeners (e.g. pass `autoUpdate`).
+     */
+    whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => () => void;
+    /**
+     * Object containing the reference and floating elements.
+     */
+    elements?: {
+        reference?: RT | null;
+        floating?: HTMLElement | null;
+    };
+    /**
+     * The `open` state of the floating element to synchronize with the
+     * `isPositioned` value.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether to use `transform` for positioning instead of `top` and `left`
+     * (layout) in the `floatingStyles` object.
+     * @default false
+     */
+    transform?: boolean;
+}>;

package/dist/utils/floating-ui/svelte-dom/types.js

@@ -0,0 +1,3 @@
+export { arrow } from "./arrow.js";
+export { useFloating } from "./useFloating.svelte.js";
+export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "@floating-ui/dom";

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ReferenceType, UseFloatingOptions, UseFloatingReturn } from "./types.js";
+/**
+ * Provides data to position a floating element.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingOptions): UseFloatingReturn<RT>;

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js

@@ -0,0 +1,183 @@
+import { computePosition } from "@floating-ui/dom";
+import { deepEqual } from "./utils/deepEqual.js";
+import { getDPR } from "./utils/getDPR.js";
+import { roundByDPR } from "./utils/roundByDPR.js";
+import { useLatestRef } from "./utils/useLatestRef.js";
+import { tick, untrack } from "svelte";
+import { stylePropsToString } from "../../style.js";
+/**
+ * Provides data to position a floating element.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export function useFloating(options = {}) {
+    const { placement = "bottom", strategy = "absolute", middleware = [], platform, elements: externalElements = {}, transform = true, whileElementsMounted, open, } = $derived(options);
+    const { reference: externalReference, floating: externalFloating } = $derived(externalElements);
+    let data = $state((() => ({
+        x: 0,
+        y: 0,
+        strategy,
+        placement,
+        middlewareData: {},
+        isPositioned: false,
+    }))());
+    const setData = (value) => (data = value);
+    let latestMiddleware = $state((() => middleware)());
+    $effect(() => {
+        if (!deepEqual(latestMiddleware, middleware)) {
+            latestMiddleware = middleware;
+        }
+    });
+    let _reference = $state(null);
+    let _floating = $state(null);
+    const setReference = (node) => {
+        if ((node ?? null) !== referenceRef.current) {
+            referenceRef.current = node ?? null;
+            _reference = node ?? null;
+        }
+    };
+    const setFloating = (node) => {
+        if ((node ?? null) !== floatingRef.current) {
+            floatingRef.current = node ?? null;
+            _floating = node ?? null;
+        }
+    };
+    const referenceEl = $derived((externalReference || _reference));
+    const floatingEl = $derived(externalFloating || _floating);
+    const referenceRef = $state({ current: null });
+    const floatingRef = $state({ current: null });
+    const dataRef = $state((() => ({ current: data }))());
+    const hasWhileElementsMounted = $derived(whileElementsMounted != null);
+    const whileElementsMountedRef = useLatestRef({
+        get value() {
+            return whileElementsMounted;
+        },
+    });
+    const platformRef = useLatestRef({
+        get value() {
+            return platform;
+        },
+    });
+    const openRef = useLatestRef({
+        get value() {
+            return open;
+        },
+    });
+    const update = () => {
+        if (!referenceRef.current || !floatingRef.current) {
+            return;
+        }
+        const config = {
+            placement,
+            strategy,
+            middleware: latestMiddleware,
+        };
+        if (platformRef.current) {
+            config.platform = platformRef.current;
+        }
+        computePosition(referenceRef.current, floatingRef.current, config).then(async (data) => {
+            const fullData = {
+                ...data,
+                // The floating element's position may be recomputed while it's closed
+                // but still mounted (such as when transitioning out). To ensure
+                // `isPositioned` will be `false` initially on the next open, avoid
+                // setting it to `true` when `open === false` (must be specified).
+                isPositioned: openRef.current !== false,
+            };
+            if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+                dataRef.current = fullData;
+                setData(fullData);
+                await tick();
+            }
+        });
+    };
+    $effect(() => {
+        open;
+        untrack(() => {
+            if (open === false && dataRef.current.isPositioned) {
+                dataRef.current.isPositioned = false;
+                data.isPositioned = false;
+            }
+        });
+    });
+    const isMountedRef = $state({ current: false });
+    $effect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    });
+    $effect(() => {
+        hasWhileElementsMounted;
+        if (referenceEl)
+            referenceRef.current = referenceEl;
+        if (floatingEl)
+            floatingRef.current = floatingEl;
+        if (referenceEl && floatingEl) {
+            if (whileElementsMountedRef.current) {
+                return whileElementsMountedRef.current(referenceEl, floatingEl, update);
+            }
+            update();
+        }
+    }); //, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted])
+    const refs = $derived({
+        reference: referenceRef,
+        floating: floatingRef,
+        setReference,
+        setFloating,
+    });
+    const elements = $derived({ reference: referenceEl, floating: floatingEl });
+    const floatingStyles = $derived.by(() => {
+        const initialStyles = {
+            position: strategy,
+            left: 0,
+            top: 0,
+        };
+        if (!elements.floating) {
+            return stylePropsToString(initialStyles);
+        }
+        const x = roundByDPR(elements.floating, data.x);
+        const y = roundByDPR(elements.floating, data.y);
+        if (transform) {
+            return stylePropsToString({
+                ...initialStyles,
+                transform: `translate(${x}px, ${y}px)`,
+                ...(getDPR(elements.floating) >= 1.5 && { "will-change": "transform" }),
+            });
+        }
+        return stylePropsToString({
+            position: strategy,
+            left: x,
+            top: y,
+        });
+    });
+    return {
+        get placement() {
+            return data.placement;
+        },
+        get strategy() {
+            return data.strategy;
+        },
+        get middlewareData() {
+            return data.middlewareData;
+        },
+        get x() {
+            return data.x;
+        },
+        get y() {
+            return data.y;
+        },
+        get isPositioned() {
+            return data.isPositioned;
+        },
+        update,
+        get refs() {
+            return refs;
+        },
+        get elements() {
+            return elements;
+        },
+        get floatingStyles() {
+            return floatingStyles;
+        },
+    };
+}

package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts

@@ -0,0 +1 @@
+export declare function deepEqual(a: any, b: any): boolean;

package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js

@@ -0,0 +1,50 @@
+// Fork of `fast-deep-equal` that only does the comparisons we need and compares
+// functions
+export function deepEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== typeof b) {
+        return false;
+    }
+    if (typeof a === "function" && a.toString() === b.toString()) {
+        return true;
+    }
+    let length;
+    let i;
+    let keys;
+    if (a && b && typeof a === "object") {
+        if (Array.isArray(a)) {
+            length = a.length;
+            if (length !== b.length)
+                return false;
+            for (i = length; i-- !== 0;) {
+                if (!deepEqual(a[i], b[i])) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) {
+            return false;
+        }
+        for (i = length; i-- !== 0;) {
+            if (!{}.hasOwnProperty.call(b, keys[i])) {
+                return false;
+            }
+        }
+        for (i = length; i-- !== 0;) {
+            const key = keys[i];
+            if (key === "_owner" && a.$$typeof) {
+                continue;
+            }
+            if (!deepEqual(a[key], b[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return a !== a && b !== b;
+}

package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts

@@ -0,0 +1 @@
+export declare function getDPR(element: Element): number;

package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js

@@ -0,0 +1,7 @@
+export function getDPR(element) {
+    if (typeof window === "undefined") {
+        return 1;
+    }
+    const win = element.ownerDocument.defaultView || window;
+    return win.devicePixelRatio || 1;
+}

package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts

@@ -0,0 +1 @@
+export declare function roundByDPR(element: Element, value: number): number;

package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js

@@ -0,0 +1,5 @@
+import { getDPR } from "./getDPR.js";
+export function roundByDPR(element, value) {
+    const dpr = getDPR(element);
+    return Math.round(value * dpr) / dpr;
+}

package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts

@@ -0,0 +1,4 @@
+import type { MutableRefObject } from "../../../ref.svelte.js";
+export declare function useLatestRef<T>(options: {
+    value: T;
+}): MutableRefObject<T>;

package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js

@@ -0,0 +1,7 @@
+export function useLatestRef(options) {
+    return {
+        get current() {
+            return options.value;
+        },
+    };
+}

package/dist/utils/id.d.ts

@@ -1,4 +1,4 @@
 export declare const alphaid: (size?: number) => string;
 export declare const htmlid: (size?: number) => string;
-export declare const getIdContext: () => string | undefined;
+export declare const useProvidedId: () => string | undefined;
 export declare const createIdContext: (id: string) => string | undefined;

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/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export { mergeProps } from "./render.js";
+export { default as DisabledProvider } from "./DisabledProvider.svelte";

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export { mergeProps } from "./render.js";
+export { default as DisabledProvider } from "./DisabledProvider.svelte";

package/dist/utils/state.js

@@ -1,10 +1,10 @@
 export const stateFromSlot = (slot = {}) => {
     if (typeof slot !== "object")
         return {};
-    let dataAttributes = {};
+    const dataAttributes = {};
     let exposeState = false;
-    let states = [];
-    for (let [k, v] of Object.entries(slot)) {
+    const states = [];
+    for (const [k, v] of Object.entries(slot)) {
         if (typeof v === "boolean") {
             exposeState = true;
         }
@@ -14,7 +14,7 @@ export const stateFromSlot = (slot = {}) => {
     }
     if (!exposeState)
         return {};
-    for (let s of states) {
+    for (const s of states) {
         dataAttributes[`data-${s}`] = "";
     }
     return {

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,24 +1,18 @@
 import type { Snippet } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
-export interface SvelteHTMLProps extends SvelteHTMLElements {
-    "svelte:fragment": {};
-}
-export type ElementType = keyof SvelteHTMLProps;
+import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
 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 Props<TTag extends string | Record<string, any>, TSlot extends Record<string, any> = {}, Overrides = {}> = Omit<TTag extends string ? SvelteHTMLElements[TTag] : TTag, "asChild" | "children" | "class" | keyof Overrides> & {
+    asChild?: boolean;
+    children?: Snippet<[TSlot & {
+        props?: Record<string, any>;
+    }]>;
+    class?: ClassValue | null | ((bag: TSlot) => string);
+} & Overrides;
+export type PropsAsChild<TSlot extends Record<string, any> = {}, Overrides = {}> = {
+    children?: Snippet<[TSlot & {
+        props?: Record<string, any>;
+    }]>;
+} & Overrides;
 export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
-export {};

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.5",
+  "version": "2.1.2-next.51",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-package --watch",
+    "prepublishOnly": "bun run package",
+    "test": "bun 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",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
+    "release": "bun run package && changeset publish"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,65 +29,50 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.242"
+    "svelte": "^5.16.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
-    "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.46.1",
-    "@pzerelles/heroicons-svelte": "^2.1.5",
-    "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.25",
-    "@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",
+    "@changesets/cli": "^2.28.1",
+    "@changesets/types": "^6.1.0",
+    "@playwright/test": "^1.51.1",
+    "@pzerelles/heroicons-svelte": "^2.2.0",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.20.1",
+    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.7",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^20.16.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "@types/node": "^22.13.10",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.22.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "globals": "^15.9.0",
-    "jsdom": "^24.1.3",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^16.0.0",
+    "jsdom": "^25.0.1",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.41",
-    "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.242",
-    "svelte-check": "^3.8.6",
-    "tailwindcss": "^3.4.10",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.3.0",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5"
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "publint": "^0.3.9",
+    "svelte": "^5.23.2",
+    "svelte-check": "^4.1.5",
+    "tailwindcss": "^3.4.17",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.2.2",
+    "vitest": "^3.0.9"
   },
   "dependencies": {
-    "@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"
+    "@floating-ui/core": "^1.6.9",
+    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/utils": "^0.2.9",
+    "esm-env": "^1.2.2",
+    "nanoid": "^5.1.5"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev",
-    "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",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "test:integration": "playwright test",
-    "test:unit": "vitest",
-    "release": "pnpm package && changeset publish"
-  }
-}
+  "type": "module"
+}

package/dist/combobox/Combobox.svelte

@@ -1,53 +0,0 @@
-<script lang="ts" module>
-  import type { ElementType, EnsureArray, Props } from "../utils/types.js"
-  import type { ByComparator } from "../hooks/use-by-comparator.js"
-
-  const DEFAULT_COMBOBOX_TAG = "svelte:fragment" as const
-  type ComboboxRenderPropArg<TValue, TActive = TValue> = {
-    open: boolean
-    disabled: boolean
-    activeIndex: number | null
-    activeOption: TActive | null
-    value: TValue
-  }
-
-  export type CheckboxProps<
-    TValue,
-    TMultiple extends boolean | undefined,
-    TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG,
-  > = Props<
-    TTag,
-    ComboboxRenderPropArg<NoInfer<TValue>>,
-    "value" | "defaultValue" | "multiple" | "onChange" | "by",
-    {
-      value?: TMultiple extends true ? EnsureArray<TValue> : TValue
-      defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>
-
-      onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void
-      by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>
-
-      /** @deprecated The `<Combobox />` is now nullable default */
-      nullable?: boolean
-
-      multiple?: TMultiple
-      disabled?: boolean
-      form?: string
-      name?: string
-      immediate?: boolean
-      virtual?: {
-        options: NoInfer<TValue>[]
-        disabled?: (value: NoInfer<TValue>) => boolean
-      } | null
-
-      onclose?(): void
-
-      __demoMode?: boolean
-    }
-  >
-</script>
-
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG">
-  import { useDisabled } from "../hooks/use-disabled.js"
-
-  const providedDisabled = useDisabled()
-</script>