@johly/bits-ui 2.18.1

package/dist/internal/safe-polygon.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type Getter } from "svelte-toolbelt";
+export interface SafePolygonOptions {
+    enabled: Getter<boolean>;
+    triggerNode: Getter<HTMLElement | null>;
+    contentNode: Getter<HTMLElement | null>;
+    onPointerExit: () => void;
+    buffer?: number;
+    transitIntentTimeout?: number;
+    /** nodes that should not trigger a close when they become the relatedTarget on trigger leave (e.g. sibling triggers in singleton mode) */
+    ignoredTargets?: Getter<HTMLElement[]>;
+}
+/**
+ * Creates a safe polygon area that allows users to move their cursor between
+ * the trigger and floating content without closing it.
+ */
+export declare class SafePolygon {
+    #private;
+    constructor(opts: SafePolygonOptions);
+}

package/dist/internal/safe-polygon.svelte.js

@@ -0,0 +1,315 @@
+import { getDocument } from "svelte-toolbelt";
+import { on } from "svelte/events";
+import { watch } from "runed";
+import { isElement } from "./is.js";
+function isPointInPolygon(point, polygon) {
+    const [x, y] = point;
+    let isInside = false;
+    const length = polygon.length;
+    for (let i = 0, j = length - 1; i < length; j = i++) {
+        const [xi, yi] = polygon[i] ?? [0, 0];
+        const [xj, yj] = polygon[j] ?? [0, 0];
+        const intersect = yi >= y !== yj >= y && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+        if (intersect) {
+            isInside = !isInside;
+        }
+    }
+    return isInside;
+}
+function isInsideRect(point, rect) {
+    return (point[0] >= rect.left &&
+        point[0] <= rect.right &&
+        point[1] >= rect.top &&
+        point[1] <= rect.bottom);
+}
+function getSide(triggerRect, contentRect) {
+    // determine which side the content is on relative to trigger
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+    const contentCenterX = contentRect.left + contentRect.width / 2;
+    const contentCenterY = contentRect.top + contentRect.height / 2;
+    const deltaX = contentCenterX - triggerCenterX;
+    const deltaY = contentCenterY - triggerCenterY;
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        return deltaX > 0 ? "right" : "left";
+    }
+    return deltaY > 0 ? "bottom" : "top";
+}
+/**
+ * Creates a safe polygon area that allows users to move their cursor between
+ * the trigger and floating content without closing it.
+ */
+export class SafePolygon {
+    #opts;
+    #buffer;
+    #transitIntentTimeout;
+    // tracks the cursor position when leaving trigger or content
+    #exitPoint = null;
+    // tracks what we're moving toward: "content" when leaving trigger, "trigger" when leaving content
+    #exitTarget = null;
+    #transitTargets = [];
+    #trackedTriggerNode = null;
+    #leaveFallbackRafId = null;
+    #transitIntentTimeoutId = null;
+    #cancelLeaveFallback() {
+        if (this.#leaveFallbackRafId !== null) {
+            cancelAnimationFrame(this.#leaveFallbackRafId);
+            this.#leaveFallbackRafId = null;
+        }
+    }
+    #scheduleLeaveFallback() {
+        this.#cancelLeaveFallback();
+        this.#leaveFallbackRafId = requestAnimationFrame(() => {
+            this.#leaveFallbackRafId = null;
+            if (!this.#exitPoint || !this.#exitTarget)
+                return;
+            this.#clearTracking();
+            this.#opts.onPointerExit();
+        });
+    }
+    #cancelTransitIntentTimeout() {
+        if (this.#transitIntentTimeoutId !== null) {
+            clearTimeout(this.#transitIntentTimeoutId);
+            this.#transitIntentTimeoutId = null;
+        }
+    }
+    #scheduleTransitIntentTimeout() {
+        if (this.#transitIntentTimeout === null)
+            return;
+        this.#cancelTransitIntentTimeout();
+        this.#transitIntentTimeoutId = window.setTimeout(() => {
+            this.#transitIntentTimeoutId = null;
+            if (!this.#exitPoint || !this.#exitTarget)
+                return;
+            this.#clearTracking();
+            this.#opts.onPointerExit();
+        }, this.#transitIntentTimeout);
+    }
+    constructor(opts) {
+        this.#opts = opts;
+        this.#buffer = opts.buffer ?? 1;
+        const transitIntentTimeout = opts.transitIntentTimeout;
+        this.#transitIntentTimeout =
+            typeof transitIntentTimeout === "number" && transitIntentTimeout > 0
+                ? transitIntentTimeout
+                : null;
+        watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
+            if (!triggerNode || !contentNode || !enabled) {
+                this.#trackedTriggerNode = null;
+                this.#clearTracking();
+                return;
+            }
+            if (this.#trackedTriggerNode && this.#trackedTriggerNode !== triggerNode) {
+                this.#clearTracking();
+            }
+            this.#trackedTriggerNode = triggerNode;
+            const doc = getDocument(triggerNode);
+            const handlePointerMove = (e) => {
+                this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
+            };
+            const handleTriggerLeave = (e) => {
+                // when leaving trigger toward content, record exit point
+                const target = e.relatedTarget;
+                // if going directly to content, no need for polygon tracking
+                if (isElement(target) && contentNode.contains(target)) {
+                    return;
+                }
+                // if moving to an ignored target (e.g. a sibling trigger), don't close —
+                // the sibling's enter handler will take over
+                const ignoredTargets = this.#opts.ignoredTargets?.() ?? [];
+                if (isElement(target) &&
+                    ignoredTargets.some((n) => n === target || n.contains(target))) {
+                    return;
+                }
+                this.#transitTargets =
+                    isElement(target) && ignoredTargets.length > 0
+                        ? ignoredTargets.filter((n) => target.contains(n))
+                        : [];
+                // for unrelated elements, defer close decisions to pointer geometry checks.
+                // this allows the cursor to pass through intermediate elements on the way
+                // to content without immediately closing.
+                this.#exitPoint = [e.clientX, e.clientY];
+                this.#exitTarget = "content";
+                this.#scheduleLeaveFallback();
+            };
+            const handleTriggerEnter = () => {
+                // reached trigger, clear tracking
+                this.#clearTracking();
+            };
+            const handleContentEnter = () => {
+                // reached content, clear tracking
+                this.#clearTracking();
+            };
+            const handleContentLeave = (e) => {
+                // when leaving content, check if going directly back to trigger
+                const target = e.relatedTarget;
+                if (isElement(target) && triggerNode.contains(target)) {
+                    // going directly to trigger, no polygon tracking needed
+                    return;
+                }
+                // set up polygon tracking toward trigger — pointermove decides whether to close
+                this.#exitPoint = [e.clientX, e.clientY];
+                this.#exitTarget = "trigger";
+                this.#scheduleLeaveFallback();
+            };
+            return [
+                on(doc, "pointermove", handlePointerMove),
+                on(triggerNode, "pointerleave", handleTriggerLeave),
+                on(triggerNode, "pointerenter", handleTriggerEnter),
+                on(contentNode, "pointerenter", handleContentEnter),
+                on(contentNode, "pointerleave", handleContentLeave),
+            ].reduce((acc, cleanup) => () => {
+                acc();
+                cleanup();
+            }, () => { });
+        });
+    }
+    #onPointerMove(clientPoint, triggerNode, contentNode) {
+        // if no exit point recorded, nothing to check
+        if (!this.#exitPoint || !this.#exitTarget)
+            return;
+        this.#cancelLeaveFallback();
+        this.#scheduleTransitIntentTimeout();
+        const triggerRect = triggerNode.getBoundingClientRect();
+        const contentRect = contentNode.getBoundingClientRect();
+        // check if pointer reached the target
+        if (this.#exitTarget === "content" && isInsideRect(clientPoint, contentRect)) {
+            this.#clearTracking();
+            return;
+        }
+        if (this.#exitTarget === "trigger" && isInsideRect(clientPoint, triggerRect)) {
+            this.#clearTracking();
+            return;
+        }
+        if (this.#exitTarget === "content" && this.#transitTargets.length > 0) {
+            for (const transitTarget of this.#transitTargets) {
+                const transitRect = transitTarget.getBoundingClientRect();
+                if (isInsideRect(clientPoint, transitRect))
+                    return;
+                const transitSide = getSide(triggerRect, transitRect);
+                const transitCorridor = this.#getCorridorPolygon(triggerRect, transitRect, transitSide);
+                if (transitCorridor && isPointInPolygon(clientPoint, transitCorridor))
+                    return;
+            }
+        }
+        // check if pointer is in the rectangular corridor between trigger and content
+        const side = getSide(triggerRect, contentRect);
+        const corridorPoly = this.#getCorridorPolygon(triggerRect, contentRect, side);
+        if (corridorPoly && isPointInPolygon(clientPoint, corridorPoly)) {
+            return;
+        }
+        // check if pointer is within the safe polygon from exit point to target
+        const targetRect = this.#exitTarget === "content" ? contentRect : triggerRect;
+        const safePoly = this.#getSafePolygon(this.#exitPoint, targetRect, side, this.#exitTarget);
+        if (isPointInPolygon(clientPoint, safePoly)) {
+            return;
+        }
+        // pointer is outside all safe zones - close
+        this.#clearTracking();
+        this.#opts.onPointerExit();
+    }
+    #clearTracking() {
+        this.#exitPoint = null;
+        this.#exitTarget = null;
+        this.#transitTargets = [];
+        this.#cancelLeaveFallback();
+        this.#cancelTransitIntentTimeout();
+    }
+    /**
+     * Creates a rectangular corridor between trigger and content
+     * This prevents closing when cursor is in the gap between them
+     */
+    #getCorridorPolygon(triggerRect, contentRect, side) {
+        const buffer = this.#buffer;
+        switch (side) {
+            case "top":
+                return [
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, triggerRect.top],
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, contentRect.bottom],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, contentRect.bottom],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, triggerRect.top],
+                ];
+            case "bottom":
+                return [
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, triggerRect.bottom],
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, contentRect.top],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, contentRect.top],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, triggerRect.bottom],
+                ];
+            case "left":
+                return [
+                    [triggerRect.left, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.right, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.right, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                    [triggerRect.left, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                ];
+            case "right":
+                return [
+                    [triggerRect.right, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.left, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.left, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                    [triggerRect.right, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                ];
+        }
+    }
+    /**
+     * Creates a triangular/trapezoidal safe zone from the exit point to the target
+     */
+    #getSafePolygon(exitPoint, targetRect, side, exitTarget) {
+        const buffer = this.#buffer * 4;
+        const [x, y] = exitPoint;
+        // when going back to trigger, we need to flip the side
+        const effectiveSide = exitTarget === "trigger" ? this.#flipSide(side) : side;
+        // create polygon points from cursor to target edges
+        switch (effectiveSide) {
+            case "top":
+                return [
+                    [x - buffer, y + buffer],
+                    [x + buffer, y + buffer],
+                    [targetRect.right + buffer, targetRect.bottom],
+                    [targetRect.right + buffer, targetRect.top],
+                    [targetRect.left - buffer, targetRect.top],
+                    [targetRect.left - buffer, targetRect.bottom],
+                ];
+            case "bottom":
+                return [
+                    [x - buffer, y - buffer],
+                    [x + buffer, y - buffer],
+                    [targetRect.right + buffer, targetRect.top],
+                    [targetRect.right + buffer, targetRect.bottom],
+                    [targetRect.left - buffer, targetRect.bottom],
+                    [targetRect.left - buffer, targetRect.top],
+                ];
+            case "left":
+                return [
+                    [x + buffer, y - buffer],
+                    [x + buffer, y + buffer],
+                    [targetRect.right, targetRect.bottom + buffer],
+                    [targetRect.left, targetRect.bottom + buffer],
+                    [targetRect.left, targetRect.top - buffer],
+                    [targetRect.right, targetRect.top - buffer],
+                ];
+            case "right":
+                return [
+                    [x - buffer, y - buffer],
+                    [x - buffer, y + buffer],
+                    [targetRect.left, targetRect.bottom + buffer],
+                    [targetRect.right, targetRect.bottom + buffer],
+                    [targetRect.right, targetRect.top - buffer],
+                    [targetRect.left, targetRect.top - buffer],
+                ];
+        }
+    }
+    #flipSide(side) {
+        switch (side) {
+            case "top":
+                return "bottom";
+            case "bottom":
+                return "top";
+            case "left":
+                return "right";
+            case "right":
+                return "left";
+        }
+    }
+}

package/dist/internal/shared-state.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { AnyFn } from "./types.js";
+export declare class SharedState<T extends AnyFn> {
+    #private;
+    constructor(factory: T);
+    get(...args: Parameters<T>): ReturnType<T>;
+}

package/dist/internal/shared-state.svelte.js

@@ -0,0 +1,31 @@
+export class SharedState {
+    #factory;
+    #subscribers = 0;
+    #state = $state();
+    #scope;
+    constructor(factory) {
+        this.#factory = factory;
+    }
+    #dispose() {
+        this.#subscribers -= 1;
+        if (this.#scope && this.#subscribers <= 0) {
+            this.#scope();
+            this.#state = undefined;
+            this.#scope = undefined;
+        }
+    }
+    get(...args) {
+        this.#subscribers += 1;
+        if (this.#state === undefined) {
+            this.#scope = $effect.root(() => {
+                this.#state = this.#factory(...args);
+            });
+        }
+        $effect(() => {
+            return () => {
+                this.#dispose();
+            };
+        });
+        return this.#state;
+    }
+}

package/dist/internal/should-enable-focus-trap.d.ts

@@ -0,0 +1,4 @@
+export declare function shouldEnableFocusTrap({ forceMount, open, }: {
+    forceMount: boolean;
+    open: boolean;
+}): boolean;

package/dist/internal/should-enable-focus-trap.js

@@ -0,0 +1,5 @@
+export function shouldEnableFocusTrap({ forceMount, open, }) {
+    if (forceMount)
+        return open;
+    return open;
+}

package/dist/internal/state-machine.d.ts

@@ -0,0 +1,16 @@
+import { type WritableBox } from "svelte-toolbelt";
+interface Machine<S> {
+    [k: string]: {
+        [k: string]: S;
+    };
+}
+type MachineState<T> = keyof T;
+type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+export declare class StateMachine<M> {
+    #private;
+    readonly state: WritableBox<MachineState<M>>;
+    constructor(initialState: MachineState<M>, machine: M & Machine<MachineState<M>>);
+    dispatch(event: MachineEvent<M>): void;
+}
+export {};

package/dist/internal/state-machine.js

@@ -0,0 +1,18 @@
+import { simpleBox } from "svelte-toolbelt";
+export class StateMachine {
+    state;
+    #machine;
+    constructor(initialState, machine) {
+        this.state = simpleBox(initialState);
+        this.#machine = machine;
+        this.dispatch = this.dispatch.bind(this);
+    }
+    #reducer(event) {
+        // @ts-expect-error  state.current is keyof M
+        const nextState = this.#machine[this.state.current][event];
+        return nextState ?? this.state.current;
+    }
+    dispatch(event) {
+        this.state.current = this.#reducer(event);
+    }
+}

package/dist/internal/svelte-resize-observer.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Getter } from "svelte-toolbelt";
+export declare class SvelteResizeObserver {
+    #private;
+    constructor(node: Getter<HTMLElement | null>, onResize: () => void);
+    handler(): (() => void) | undefined;
+}

package/dist/internal/svelte-resize-observer.svelte.js

@@ -0,0 +1,25 @@
+export class SvelteResizeObserver {
+    #node;
+    #onResize;
+    constructor(node, onResize) {
+        this.#node = node;
+        this.#onResize = onResize;
+        this.handler = this.handler.bind(this);
+        $effect(this.handler);
+    }
+    handler() {
+        let rAF = 0;
+        const _node = this.#node();
+        if (!_node)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            cancelAnimationFrame(rAF);
+            rAF = window.requestAnimationFrame(this.#onResize);
+        });
+        resizeObserver.observe(_node);
+        return () => {
+            window.cancelAnimationFrame(rAF);
+            resizeObserver.unobserve(_node);
+        };
+    }
+}

package/dist/internal/tabbable.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gets all tabbable elements in the body and finds the next/previous tabbable element
+ * from the `currentNode` based on the `direction` provided.
+ * @param currentNode - the node we want to get the next/previous tabbable from
+ */
+export declare function getTabbableFrom(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement | undefined;
+export declare function getTabbableFromFocusable(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement;

package/dist/internal/tabbable.js

@@ -0,0 +1,51 @@
+import { focusable, isFocusable, isTabbable, tabbable } from "tabbable";
+import { getDocument } from "svelte-toolbelt";
+function getTabbableOptions() {
+    return {
+        getShadowRoot: true,
+        displayCheck: 
+        // JSDOM does not support the `tabbable` library. To solve this we can
+        // check if `ResizeObserver` is a real function (not polyfilled), which
+        // determines if the current environment is JSDOM-like.
+        typeof ResizeObserver === "function" &&
+            ResizeObserver.toString().includes("[native code]")
+            ? "full"
+            : "none",
+    };
+}
+/**
+ * Gets all tabbable elements in the body and finds the next/previous tabbable element
+ * from the `currentNode` based on the `direction` provided.
+ * @param currentNode - the node we want to get the next/previous tabbable from
+ */
+export function getTabbableFrom(currentNode, direction) {
+    if (!isTabbable(currentNode, getTabbableOptions())) {
+        return getTabbableFromFocusable(currentNode, direction);
+    }
+    const doc = getDocument(currentNode);
+    const allTabbable = tabbable(doc.body, getTabbableOptions());
+    if (direction === "prev")
+        allTabbable.reverse();
+    const activeIndex = allTabbable.indexOf(currentNode);
+    if (activeIndex === -1)
+        return doc.body;
+    const nextTabbableElements = allTabbable.slice(activeIndex + 1);
+    return nextTabbableElements[0];
+}
+export function getTabbableFromFocusable(currentNode, direction) {
+    const doc = getDocument(currentNode);
+    if (!isFocusable(currentNode, getTabbableOptions()))
+        return doc.body;
+    // find all focusable nodes, since some elements may be focusable but not tabbable
+    // such as context menu triggers
+    const allFocusable = focusable(doc.body, getTabbableOptions());
+    // find index of current node among focusable siblings
+    if (direction === "prev")
+        allFocusable.reverse();
+    const activeIndex = allFocusable.indexOf(currentNode);
+    if (activeIndex === -1)
+        return doc.body;
+    const nextFocusableElements = allFocusable.slice(activeIndex + 1);
+    // find the next focusable node that is also tabbable
+    return nextFocusableElements.find((node) => isTabbable(node, getTabbableOptions())) ?? doc.body;
+}

package/dist/internal/timeout-fn.d.ts

@@ -0,0 +1,7 @@
+import type { AnyFn } from "./types.js";
+export declare class TimeoutFn<T extends AnyFn> {
+    #private;
+    constructor(cb: T, interval: number);
+    stop(): void;
+    start(...args: Parameters<T> | []): void;
+}

package/dist/internal/timeout-fn.js

@@ -0,0 +1,29 @@
+import { onDestroyEffect } from "svelte-toolbelt";
+export class TimeoutFn {
+    #interval;
+    #cb;
+    #timer = null;
+    constructor(cb, interval) {
+        this.#cb = cb;
+        this.#interval = interval;
+        this.stop = this.stop.bind(this);
+        this.start = this.start.bind(this);
+        onDestroyEffect(this.stop);
+    }
+    #clear() {
+        if (this.#timer !== null) {
+            window.clearTimeout(this.#timer);
+            this.#timer = null;
+        }
+    }
+    stop() {
+        this.#clear();
+    }
+    start(...args) {
+        this.#clear();
+        this.#timer = window.setTimeout(() => {
+            this.#timer = null;
+            this.#cb(...args);
+        }, this.#interval);
+    }
+}

package/dist/internal/types.d.ts

@@ -0,0 +1,94 @@
+import type { Snippet } from "svelte";
+import type { attachRef, Box, ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
+import type { StyleProperties } from "../shared/index.js";
+export type OnChangeFn<T> = (value: T) => void;
+export type ElementRef = Box<HTMLElement | null>;
+export type WithChild<
+/**
+ * The props that the component accepts.
+ */
+Props extends Record<PropertyKey, unknown> = {}, 
+/**
+ * The props that are passed to the `child` and `children` snippets. The `ElementProps` are
+ * merged with these props for the `child` snippet.
+ */
+SnippetProps extends Record<PropertyKey, unknown> = {
+    _default: never;
+}, 
+/**
+ * The underlying DOM element being rendered. You can bind to this prop to
+ * programmatically interact with the element.
+ */
+Ref = HTMLElement> = Omit<Props, "child" | "children"> & {
+    child?: SnippetProps extends {
+        _default: never;
+    } ? Snippet<[{
+        props: Record<string, unknown>;
+    }]> : Snippet<[SnippetProps & {
+        props: Record<string, unknown>;
+    }]>;
+    children?: SnippetProps extends {
+        _default: never;
+    } ? Snippet : Snippet<[SnippetProps]>;
+    style?: StyleProperties | string | null | undefined;
+    ref?: Ref | null | undefined;
+};
+export type WithChildNoChildrenSnippetProps<
+/**
+ * The props that the component accepts.
+ */
+Props extends Record<PropertyKey, unknown> = {}, 
+/**
+ * The props that are passed to the `child` and `children` snippets. The `ElementProps` are
+ * merged with these props for the `child` snippet.
+ */
+SnippetProps extends Record<PropertyKey, unknown> = {
+    _default: never;
+}, 
+/**
+ * The underlying DOM element being rendered. You can bind to this prop to
+ * programmatically interact with the element.
+ */
+Ref = HTMLElement> = Omit<Props, "child" | "children"> & {
+    child?: SnippetProps extends {
+        _default: never;
+    } ? Snippet<[{
+        props: Record<string, unknown>;
+    }]> : Snippet<[SnippetProps & {
+        props: Record<string, unknown>;
+    }]>;
+    children?: Snippet;
+    style?: StyleProperties | string | null | undefined;
+    ref?: Ref | null | undefined;
+};
+export type WithChildren<Props = {}> = Props & {
+    children?: Snippet | undefined;
+};
+/**
+ * Constructs a new type by omitting properties from type
+ * 'T' that exist in type 'U'.
+ *
+ * @template T - The base object type from which properties will be omitted.
+ * @template U - The object type whose properties will be omitted from 'T'.
+ * @example
+ * type Result = Without<{ a: number; b: string; }, { b: string; }>;
+ * // Result type will be { a: number; }
+ */
+export type Without<T extends object, U extends object> = Omit<T, keyof U>;
+export type Arrayable<T> = T[] | T;
+export type Fn = () => void;
+export type AnyFn = (...args: any[]) => any;
+export type WithRefOpts<T = {}> = T & ReadableBoxedValues<{
+    id: string;
+}> & WritableBoxedValues<{
+    ref: HTMLElement | null;
+}>;
+export type BitsEvent<T extends Event = Event, U extends HTMLElement = HTMLElement> = T & {
+    currentTarget: U;
+};
+export type BitsPointerEvent<T extends HTMLElement = HTMLElement> = BitsEvent<PointerEvent, T>;
+export type BitsKeyboardEvent<T extends HTMLElement = HTMLElement> = BitsEvent<KeyboardEvent, T>;
+export type BitsMouseEvent<T extends HTMLElement = HTMLElement> = BitsEvent<MouseEvent, T>;
+export type BitsFocusEvent<T extends HTMLElement = HTMLElement> = BitsEvent<FocusEvent, T>;
+export type BitsInputEvent<T extends HTMLElement = HTMLElement> = BitsEvent<InputEvent, T>;
+export type RefAttachment<T extends HTMLElement = HTMLElement> = ReturnType<typeof attachRef<T>>;

package/dist/internal/types.js

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