@rvx/ui 0.1.6

package/dist/components/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/components/page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAc,MAAM,KAAK,CAAC;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,UAAU,IAAI,CAAC,KAOpB;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,eACN,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX,KAAK,EAAE,IAAI;SACX,EACD,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX;gBACC,oBAAoB,EAAE,KAAK,CAAC,UAAU;aACtC;SACD,aAED,cAAK,KAAK,EAAE,KAAK,EAAE,mBAAmB,GAAI,EAC1C,cAAK,KAAK,EAAE,KAAK,EAAE,gBAAgB,YAClC,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,YAChC,KAAK,CAAC,QAAQ,GACP,GACJ,IACD,CAAC;AACR,CAAC"}

package/dist/components/popout.d.ts

@@ -0,0 +1,134 @@
+import { Event as RvxEvent, Expression, View } from "rvx";
+import { Direction } from "../common/writing-mode.js";
+/**
+ * Defines the direction in which the popout is placed in relation to it's anchor.
+ *
+ * + `"block"` coresponds to the block flow direction.
+ * + `"inline"` coresponds to the inline flow direction.
+ * + If `"-start"` or `"-end"` is present, that direction is used unless there isn't enough space for the current content and the opposite side has more available space.
+ */
+export type PopoutPlacement = "block" | "inline" | EffectivePopoutPlacement;
+export type EffectivePopoutPlacement = "block-start" | "block-end" | "inline-start" | "inline-end";
+/**
+ * Defines which side of the anchor and content are aligned orthogonally to the placement axis.
+ *
+ * + `"center"` aligns the popout center to the anchor center.
+ * + `"start"` aligns the popout start to the anchor start.
+ * + `"end"` aligns the popout end to the anchor end.
+ */
+export type PopoutAlignment = "center" | "start" | "end";
+export interface PopoutPlacementArgs {
+    /**
+     * When set during the `onPlacement` event, this defines the gap between the anchor and the content in `px`.
+     *
+     * @default 0
+     */
+    gap: number;
+}
+export interface PopoutPlacementInfo {
+    /**
+     * The rect of the anchor at the time of placement.
+     */
+    anchorRect: DOMRect;
+    /**
+     * The content root element.
+     */
+    content: HTMLElement;
+    /**
+     * The effective placement.
+     */
+    placement: EffectivePopoutPlacement;
+    /**
+     * The effective placement direction.
+     */
+    placementDir: Direction;
+    /**
+     * The block start or inline start direction orthogonal to the effective placement axis.
+     */
+    alignStart: Direction;
+}
+export interface PopoutContent {
+    (props: {
+        /**
+         * The popout itself.
+         */
+        popout: Popout;
+        /**
+         * Called after the popout content is attached to the document, but before calculating the placement.
+         */
+        onPlacement: RvxEvent<[event: PopoutPlacementArgs]>;
+        /**
+         * Set the size reference element.
+         *
+         * If never called or if the last target was undefined, the popout root is used as reference.
+         */
+        setSizeReference: (target: Element | undefined) => void;
+        /**
+         * Reactively get information on the effective placement.
+         */
+        placement: () => PopoutPlacementInfo | undefined;
+    }): unknown;
+}
+export interface PopoutOptions {
+    /**
+     * Defines the direction in which the popout is placed in relation to it's anchor.
+     *
+     * See {@link PopoutPlacement}
+     */
+    placement: Expression<PopoutPlacement>;
+    /**
+     * Defines which side of the anchor and content are aligned orthogonally to the placement axis.
+     *
+     * See {@link PopoutAlignment}
+     */
+    alignment: Expression<PopoutAlignment>;
+    /**
+     * The content component to render while the popout is visible.
+     */
+    content: PopoutContent;
+    /**
+     * An array of event names that cause the popout to hide automatically when dispatched outside of the current layer stack or the latest anchor.
+     *
+     * @default ["resize", "scroll", "mousedown", "touchstart", "focusin", "rvx-ui:passive-action"]
+     */
+    foreignEvents?: string[];
+}
+/**
+ * Utility to create automatically placed floating content like popovers or dropdowns.
+ */
+export declare class Popout {
+    #private;
+    /**
+     * Create a new popout.
+     *
+     * The popout hides automatically when the current context is disposed.
+     */
+    constructor(options: PopoutOptions);
+    /**
+     * Reactively check if the popout is currently visible.
+     */
+    get visible(): boolean;
+    /**
+     * Show the popout or recalculate placement if already visible.
+     *
+     * @param anchor The anchor view to use. This doesn't affect the view in any way.
+     * @param pointerEvent An optional event to determine which anchor rect to use if the anchor has multiple client rects like wrapping texts or just multiple distinct root nodes.
+     */
+    show(anchor: View, pointerEvent?: Event): void;
+    /**
+     * Recalculate placement using the most recent anchor and pointer event if currently visible.
+     *
+     * Placement is recalculated automatically when the content is resized.
+     *
+     * Resizing or moving anchors don't trigger recalculation as it is expected, that content behind the popout doesn't change significantly while the popout is open.
+     */
+    update(): void;
+    /**
+     * The same as {@link show}, but the popout is hidden instead if currently visible.
+     */
+    toggle(anchor: View, pointerEvent?: Event): void;
+    /**
+     * Hide the popout if currently visible.
+     */
+    hide(): void;
+}

package/dist/components/popout.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { captureSelf, Emitter, extract, get, getContext, render, runInContext, sig, teardown, untrack, viewNodes } from "rvx";
+import { PASSIVE_ACTION_EVENT } from "../common/events.js";
+import { axisEquals, DOWN, flip, getBlockStart, getInlineStart, getSize, getWindowSize, getWindowSpaceAround, INSET, LEFT, RIGHT, UP } from "../common/writing-mode.js";
+import { LAYER, Layer } from "./layer.js";
+export class Popout {
+    #context;
+    #placement;
+    #alignment;
+    #content;
+    #foreignEvents;
+    #instance;
+    #instanceArgs;
+    #visible = sig(false);
+    #onPlacement = new Emitter();
+    #placementState = sig(undefined);
+    constructor(options) {
+        this.#context = getContext();
+        this.#placement = options.placement;
+        this.#alignment = options.alignment;
+        this.#content = options.content;
+        this.#foreignEvents = options.foreignEvents ?? ["resize", "scroll", "mousedown", "touchstart", "focusin", PASSIVE_ACTION_EVENT];
+        teardown(() => {
+            this.hide();
+        });
+    }
+    get visible() {
+        return this.#visible.value;
+    }
+    show(anchor, pointerEvent) {
+        this.#instanceArgs = undefined;
+        this.#placementState.value = undefined;
+        let pointer;
+        if (globalThis.MouseEvent && pointerEvent instanceof MouseEvent) {
+            pointer = pointerEvent;
+        }
+        else if (globalThis.TouchEvent && pointerEvent instanceof TouchEvent) {
+            pointer = pointerEvent.touches.item(0) ?? undefined;
+        }
+        let anchorRect;
+        let writingMode;
+        let scriptDir;
+        if (pointer !== undefined) {
+            const { clientX, clientY } = pointer;
+            nodes: for (const node of viewNodes(anchor)) {
+                if (node instanceof Element) {
+                    for (const rect of node.getClientRects()) {
+                        if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
+                            const styles = getComputedStyle(node);
+                            writingMode ??= styles.writingMode || "horizontal-tb";
+                            scriptDir ??= styles.direction || "ltr";
+                            anchorRect = rect;
+                            break nodes;
+                        }
+                    }
+                }
+            }
+        }
+        if (anchorRect === undefined) {
+            for (const node of viewNodes(anchor)) {
+                if (node instanceof Element) {
+                    anchorRect = node.getBoundingClientRect();
+                    const styles = getComputedStyle(node);
+                    writingMode ??= styles.writingMode || "horizontal-tb";
+                    scriptDir ??= styles.direction || "ltr";
+                    break;
+                }
+            }
+            if (anchorRect === undefined) {
+                throw new Error("anchor must contain at least one element.");
+            }
+        }
+        let instance = this.#instance;
+        if (instance === undefined) {
+            runInContext(this.#context, () => {
+                captureSelf(dispose => {
+                    instance = this.#instance = {
+                        dispose,
+                        content: undefined,
+                        view: undefined,
+                        observer: undefined,
+                        sizeReference: undefined,
+                    };
+                    instance.view = render(_jsx(Layer, { children: () => {
+                            const layer = extract(LAYER);
+                            const onForeignEvent = (event) => {
+                                if (event.target instanceof Node) {
+                                    if (layer.stackContains(event.target)) {
+                                        return;
+                                    }
+                                    const args = this.#instanceArgs;
+                                    if (args !== undefined) {
+                                        for (const node of viewNodes(args.anchor)) {
+                                            if (node === event.target || node.contains(event.target)) {
+                                                return;
+                                            }
+                                        }
+                                    }
+                                }
+                                this.hide();
+                            };
+                            this.#foreignEvents.forEach(t => window.addEventListener(t, onForeignEvent, { passive: true, capture: true }));
+                            teardown(() => {
+                                this.#foreignEvents.forEach(t => window.removeEventListener(t, onForeignEvent, { capture: true }));
+                            });
+                            instance.content = _jsx("div", { style: {
+                                    "position": "fixed",
+                                    "writing-mode": writingMode,
+                                }, dir: scriptDir, children: this.#content({
+                                    popout: this,
+                                    onPlacement: this.#onPlacement.event,
+                                    placement: () => this.#placementState.value,
+                                    setSizeReference: target => {
+                                        instance.sizeReference = target;
+                                    },
+                                }) });
+                            return instance.content;
+                        } }));
+                    document.body.appendChild(instance.view.take());
+                    instance.observer = new ResizeObserver(entries => {
+                        const args = this.#instanceArgs;
+                        const size = entries[entries.length - 1]?.borderBoxSize[0];
+                        if (args !== undefined && size !== undefined && (size.blockSize !== args.contentBlockSize || size.inlineSize !== args.contentInlineSize)) {
+                            this.show(args.anchor, args.pointerEvent);
+                        }
+                    });
+                    instance.observer.observe(instance.content, { box: "border-box" });
+                });
+            });
+        }
+        const placementArgs = { gap: 0 };
+        this.#onPlacement.emit(placementArgs);
+        const { gap } = placementArgs;
+        const { content, sizeReference } = instance;
+        const inlineStart = getInlineStart(writingMode, scriptDir);
+        const blockStart = getBlockStart(writingMode);
+        content.style.setProperty("--popout-anchor-inline-size", `${anchorRect.width}px`);
+        content.style.left = "0px";
+        content.style.top = "0px";
+        content.style.right = "";
+        content.style.bottom = "";
+        const place = untrack(() => get(this.#placement));
+        switch (place) {
+            case "block":
+            case "block-start":
+            case "block-end":
+                content.style.maxInlineSize = `${getWindowSize(inlineStart)}px`;
+                content.style.maxBlockSize = `${Math.max(getWindowSpaceAround(anchorRect, blockStart), getWindowSpaceAround(anchorRect, flip(blockStart))) - gap}px`;
+                break;
+            case "inline":
+            case "inline-start":
+            case "inline-end":
+                content.style.maxBlockSize = `${getWindowSize(blockStart)}px`;
+                content.style.maxInlineSize = `${Math.max(getWindowSpaceAround(anchorRect, inlineStart), getWindowSpaceAround(anchorRect, flip(inlineStart))) - gap}px`;
+                break;
+        }
+        content.style.setProperty("--popout-max-block-size", content.style.maxBlockSize);
+        content.style.setProperty("--popout-max-inline-size", content.style.maxInlineSize);
+        const contentRect = (sizeReference ?? content).getBoundingClientRect();
+        let placement;
+        let placementDir;
+        let alignStart;
+        if (place === "inline" || place === "block") {
+            const start = place === "inline" ? inlineStart : blockStart;
+            const startSpace = getWindowSpaceAround(anchorRect, start);
+            const endSpace = getWindowSpaceAround(anchorRect, flip(start));
+            if (startSpace > endSpace) {
+                placementDir = start;
+                placement = place === "inline" ? "inline-start" : "block-start";
+            }
+            else {
+                placementDir = flip(start);
+                placement = place === "inline" ? "inline-end" : "block-end";
+            }
+            alignStart = place === "inline" ? blockStart : inlineStart;
+        }
+        else {
+            placement = place;
+            placementDir = place === "block-start" ? blockStart : (place === "block-end" ? flip(blockStart) : (place === "inline-start" ? inlineStart : flip(inlineStart)));
+            alignStart = axisEquals(placementDir, blockStart) ? inlineStart : blockStart;
+            const space = getWindowSpaceAround(anchorRect, placementDir);
+            if (getSize(contentRect, placementDir) > space) {
+                if (getWindowSpaceAround(anchorRect, flip(placementDir)) > space) {
+                    placementDir = flip(placementDir);
+                }
+            }
+        }
+        content.style[INSET[flip(placementDir)]] = `${getAnchorRectInset(anchorRect, placementDir) + gap}px`;
+        content.style[INSET[placementDir]] = "";
+        const align = untrack(() => get(this.#alignment));
+        const alignContentSize = getSize(contentRect, alignStart);
+        let alignInset;
+        let alignEnd = false;
+        switch (align) {
+            case "center":
+                alignInset = getWindowSpaceAround(anchorRect, alignStart) + ((getSize(anchorRect, alignStart) - alignContentSize) / 2);
+                break;
+            case "start":
+                alignInset = getWindowSpaceAround(anchorRect, alignStart);
+                break;
+            case "end":
+                alignInset = getWindowSpaceAround(anchorRect, flip(alignStart));
+                alignEnd = true;
+                break;
+        }
+        const alignSpace = getWindowSize(alignStart);
+        alignInset = Math.max(0, Math.min(alignInset, alignSpace - alignContentSize));
+        content.style[INSET[alignStart]] = alignEnd ? "" : `${alignInset}px`;
+        content.style[INSET[flip(alignStart)]] = alignEnd ? `${alignInset}px` : "";
+        this.#instanceArgs = {
+            anchor,
+            pointerEvent,
+            contentBlockSize: getSize(contentRect, blockStart),
+            contentInlineSize: getSize(contentRect, inlineStart),
+        };
+        this.#placementState.value = {
+            anchorRect,
+            content,
+            placement,
+            placementDir,
+            alignStart,
+        };
+        this.#visible.value = true;
+    }
+    update() {
+        const args = this.#instanceArgs;
+        if (args !== undefined) {
+            this.show(args.anchor, args.pointerEvent);
+        }
+    }
+    toggle(anchor, pointerEvent) {
+        if (this.visible) {
+            this.hide();
+        }
+        else {
+            this.show(anchor, pointerEvent);
+        }
+    }
+    hide() {
+        const instance = this.#instance;
+        if (instance !== undefined) {
+            this.#instanceArgs = undefined;
+            this.#instance = undefined;
+            instance.observer.disconnect();
+            instance.dispose();
+            instance.view.detach();
+            this.#visible.value = false;
+        }
+    }
+}
+function getAnchorRectInset(rect, dir) {
+    switch (dir) {
+        case UP: return window.innerHeight - rect.top;
+        case RIGHT: return rect.right;
+        case DOWN: return rect.bottom;
+        case LEFT: return window.innerWidth - rect.left;
+    }
+}
+//# sourceMappingURL=popout.js.map

package/dist/components/popout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popout.js","sourceRoot":"","sources":["../../src/components/popout.tsx"],"names":[],"mappings":"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"}

package/dist/components/popover.d.ts

@@ -0,0 +1,139 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+import { DialogRole } from "./dialog.js";
+import { Popout, PopoutAlignment, PopoutPlacement } from "./popout.js";
+export type PopoverRole = DialogRole | "menu";
+export interface PopoverContent {
+    (props: {
+        popout: Popout;
+    }): unknown;
+}
+/**
+ * Create a popover that is initially hidden.
+ */
+export declare function createPopover(props: {
+    /**
+     * Defines the direction in which the popover is placed in relation to the anchor.
+     *
+     * This expression is only evaluated when calculating the popover placement.
+     *
+     * See {@link PopoutPlacement}
+     *
+     * @default "block"
+     */
+    placement?: Expression<PopoutPlacement | undefined>;
+    /**
+     * Defines which side of the anchor and popover are aligned orthogonally to the placement axis.
+     *
+     * This expression is only evaluated when calculating the popover placement.
+     *
+     * See {@link PopoutAlignment}
+     *
+     * @default "center"
+     */
+    alignment?: Expression<PopoutAlignment | undefined>;
+    /**
+     * The content component.
+     */
+    content: PopoverContent;
+    inlineSize?: Expression<string | undefined>;
+    maxInlineSize?: Expression<string | undefined>;
+    blockSize?: Expression<string | undefined>;
+    maxBlockSize?: Expression<string | undefined>;
+    /**
+     * An array of event names that cause the popover to hide automatically when dispatched outside of the current layer stack or the anchor.
+     *
+     * @default ["resize", "scroll", "mousedown", "touchstart", "focusin", "rvx-ui:passive-action"]
+     */
+    foreignEvents?: string[];
+    /**
+     * The content role.
+     *
+     * @default "dialog"
+     */
+    role?: PopoverRole;
+    id?: string;
+    class?: ClassValue;
+    style?: StyleValue;
+    "aria-label"?: Expression<string | undefined>;
+    "aria-labelledby"?: Expression<string | undefined>;
+    "aria-describedby"?: Expression<string | undefined>;
+}): Popout;
+export interface PopoverAnchorProps {
+    action: Action;
+    id?: Expression<string | undefined>;
+    "aria-label"?: Expression<string | undefined>;
+    "aria-labelledby"?: Expression<string | undefined>;
+}
+export declare function Popover(props: {
+    /**
+     * A function to immediately render the anchor.
+     */
+    anchor: (props: PopoverAnchorProps) => unknown;
+    /**
+     * The anchor id.
+     *
+     * By default, a unique id is generated and linked to the attached popover.
+     */
+    id?: Expression<string | undefined>;
+    /** Class for the popover. */
+    class?: ClassValue;
+    /** Style for the popover. */
+    style?: StyleValue;
+    /** The popover content component. */
+    children: PopoverContent;
+    inlineSize?: Expression<string | undefined>;
+    maxInlineSize?: Expression<string | undefined>;
+    blockSize?: Expression<string | undefined>;
+    maxBlockSize?: Expression<string | undefined>;
+    /**
+     * Defines the direction in which the popover is placed in relation to the anchor.
+     *
+     * This expression is only evaluated when calculating the popover placement.
+     *
+     * See {@link PopoutPlacement}^
+     *
+     * @default "block"
+     */
+    placement?: Expression<PopoutPlacement | undefined>;
+    /**
+     * Defines which side of the anchor and popover are aligned orthogonally to the placement axis.
+     *
+     * This expression is only evaluated when calculating the popover placement.
+     *
+     * See {@link PopoutAlignment}
+     *
+     * @default "center"
+     */
+    alignment?: Expression<PopoutAlignment | undefined>;
+    /**
+     * An array of event names that cause the popover to hide automatically when dispatched outside of the current layer stack or the anchor.
+     *
+     * @default ["resize", "scroll", "mousedown", "touchstart", "focusin", "rvx-ui:passive-action"]
+     */
+    foreignEvents?: string[];
+    /**
+     * The popover role.
+     *
+     * @default "dialog"
+     */
+    role?: PopoverRole;
+    /**
+     * The anchor and popover label.
+     *
+     * By default, the anchor itself is used a label for the popover.
+     */
+    "aria-label"?: Expression<string | undefined>;
+    /**
+     * The anchor and popover label id.
+     *
+     * By default, the anchor itself is used a label for the popover.
+     */
+    "aria-labelledby"?: Expression<string | undefined>;
+    /**
+     * An optional popover description id.
+     *
+     * If the popover contains a description, this should be set to it's id.
+     */
+    "aria-describedby"?: Expression<string | undefined>;
+}): unknown;

package/dist/components/popover.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { extract, get, Inject, map, render, sig, SVG, uniqueId, watch, XMLNS } from "rvx";
+import { THEME } from "../common/theme.js";
+import { DOWN, getSize, getXY, LEFT, RIGHT, UP } from "../common/writing-mode.js";
+import { LAYER } from "./layer.js";
+import { Popout } from "./popout.js";
+export function createPopover(props) {
+    return new Popout({
+        placement: map(props.placement, v => v ?? "block"),
+        alignment: map(props.alignment, v => v ?? "center"),
+        content: ({ popout, onPlacement, placement, setSizeReference }) => {
+            const theme = extract(THEME);
+            const layer = extract(LAYER);
+            const spikeTransform = sig("");
+            layer.useHotkey("escape", () => {
+                popout.hide();
+            });
+            onPlacement(args => {
+                args.gap = Math.abs(spikeArea.getBoundingClientRect().x - root.getBoundingClientRect().x);
+            });
+            watch(placement, placement => {
+                if (placement) {
+                    const { anchorRect, placementDir, alignStart } = placement;
+                    const contentRect = placement.content.getBoundingClientRect();
+                    const rawOffset = getXY(anchorRect, alignStart) + (getSize(anchorRect, alignStart) / 2) - getXY(contentRect, alignStart);
+                    const offset = `max(var(--popover-spike-min-offset), min(${rawOffset}px, ${getSize(contentRect, alignStart)}px - var(--popover-spike-min-offset)))`;
+                    switch (placementDir) {
+                        case DOWN:
+                            spikeTransform.value = `translate(${offset}, 0px)`;
+                            break;
+                        case UP:
+                            spikeTransform.value = `translate(${offset}, ${contentRect.height}px) rotate(180deg)`;
+                            break;
+                        case RIGHT:
+                            spikeTransform.value = `translate(0px, ${offset}) rotate(270deg)`;
+                            break;
+                        case LEFT:
+                            spikeTransform.value = `translate(${contentRect.width}px, ${offset}) rotate(90deg)`;
+                            break;
+                    }
+                }
+            });
+            const spikeArea = _jsx("div", { class: theme?.popover_spike_area, children: _jsx("div", { class: theme?.popover_spike, style: { transform: spikeTransform }, children: _jsx(Inject, { value: SVG, children: () => {
+                            return _jsx("svg", { viewBox: "0 0 16 16", preserveAspectRatio: "none", children: _jsx("path", { d: "M0,16 L8,0 L16,16 Z" }) });
+                        } }, XMLNS) }) });
+            const content = _jsx("div", { class: [
+                    theme?.column,
+                    theme?.column_content,
+                    theme?.popover_content,
+                ], children: props.content({ popout }) });
+            setSizeReference(content);
+            const root = _jsxs("div", { tabindex: "-1", role: map(props.role, v => v ?? "dialog"), id: props.id, class: [
+                    theme?.popover,
+                    props.class,
+                ], style: [
+                    props.style,
+                    {
+                        "inline-size": props.inlineSize,
+                        "max-inline-size": props.maxInlineSize,
+                        "block-size": props.blockSize,
+                        "max-block-size": props.maxBlockSize,
+                    },
+                ], "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": props["aria-describedby"], children: [spikeArea, _jsx("div", { class: theme?.popover_scroll_area, children: content })] });
+            layer.useAutoFocusFallback(root);
+            return root;
+        },
+        foreignEvents: props.foreignEvents,
+    });
+}
+export function Popover(props) {
+    const defaultId = uniqueId();
+    const id = map(props.id, v => v ?? defaultId);
+    const popover = createPopover({
+        content: props.children,
+        inlineSize: props.inlineSize,
+        maxInlineSize: props.maxInlineSize,
+        blockSize: props.blockSize,
+        maxBlockSize: props.maxBlockSize,
+        placement: props.placement,
+        alignment: props.alignment,
+        foreignEvents: props.foreignEvents,
+        role: props.role,
+        class: props.class,
+        style: props.style,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": () => (get(props["aria-label"]) === undefined
+            ? (get(props["aria-labelledby"]) ?? get(id))
+            : undefined),
+        "aria-describedby": props["aria-describedby"],
+    });
+    const anchor = render(props.anchor({
+        action: event => {
+            popover.toggle(anchor, event);
+        },
+        id,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+    }));
+    return anchor;
+}
+//# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAc,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAG9H,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,2BAA2B,CAAC;AAElF,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAoC,MAAM,aAAa,CAAC;AAavE,MAAM,UAAU,aAAa,CAAC,KAqD7B;IACA,OAAO,IAAI,MAAM,CAAC;QACjB,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC;QAClD,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,QAAQ,CAAC;QACnD,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE;YACjE,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;YAC7B,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAE,CAAC;YAC9B,MAAM,cAAc,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;YAE/B,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,EAAE;gBAC9B,MAAM,CAAC,IAAI,EAAE,CAAC;YACf,CAAC,CAAC,CAAC;YAEH,WAAW,CAAC,IAAI,CAAC,EAAE;gBAClB,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,CAAC;YAC3F,CAAC,CAAC,CAAC;YAEH,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE;gBAC5B,IAAI,SAAS,EAAE,CAAC;oBACf,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC;oBAC3D,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;oBAC9D,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;oBACzH,MAAM,MAAM,GAAG,4CAA4C,SAAS,OAAO,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC,wCAAwC,CAAC;oBACpJ,QAAQ,YAAY,EAAE,CAAC;wBACtB,KAAK,IAAI;4BACR,cAAc,CAAC,KAAK,GAAG,aAAa,MAAM,QAAQ,CAAC;4BACnD,MAAM;wBACP,KAAK,EAAE;4BACN,cAAc,CAAC,KAAK,GAAG,aAAa,MAAM,KAAK,WAAW,CAAC,MAAM,oBAAoB,CAAC;4BACtF,MAAM;wBACP,KAAK,KAAK;4BACT,cAAc,CAAC,KAAK,GAAG,kBAAkB,MAAM,kBAAkB,CAAC;4BAClE,MAAM;wBACP,KAAK,IAAI;4BACR,cAAc,CAAC,KAAK,GAAG,aAAa,WAAW,CAAC,KAAK,OAAO,MAAM,iBAAiB,CAAC;4BACpF,MAAM;oBACR,CAAC;gBACF,CAAC;YACF,CAAC,CAAC,CAAC;YAEH,MAAM,SAAS,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,kBAAkB,YACtD,cAAK,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YACrE,KAAC,MAAM,IAAa,KAAK,EAAE,GAAG,YAC5B,GAAG,EAAE;4BACL,OAAO,cAAK,OAAO,EAAC,WAAW,EAAC,mBAAmB,EAAC,MAAM,YACzD,eAAM,CAAC,EAAC,qBAAqB,GAAG,GAC3B,CAAC;wBACR,CAAC,IALW,KAAK,CAMT,GACJ,GACc,CAAC;YAEtB,MAAM,OAAO,GAAG,cAAK,KAAK,EAAE;oBAC3B,KAAK,EAAE,MAAM;oBACb,KAAK,EAAE,cAAc;oBACrB,KAAK,EAAE,eAAe;iBACtB,YACC,KAAK,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GACN,CAAC;YACtB,gBAAgB,CAAC,OAAO,CAAC,CAAC;YAE1B,MAAM,IAAI,GAAG,eACZ,QAAQ,EAAC,IAAI,EACb,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,QAAQ,CAAC,EACzC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE;oBACN,KAAK,EAAE,OAAO;oBACd,KAAK,CAAC,KAAK;iBACX,EACD,KAAK,EAAE;oBACN,KAAK,CAAC,KAAK;oBACX;wBACC,aAAa,EAAE,KAAK,CAAC,UAAU;wBAC/B,iBAAiB,EAAE,KAAK,CAAC,aAAa;wBACtC,YAAY,EAAE,KAAK,CAAC,SAAS;wBAC7B,gBAAgB,EAAE,KAAK,CAAC,YAAY;qBACpC;iBACD,gBACW,KAAK,CAAC,YAAY,CAAC,qBACd,KAAK,CAAC,iBAAiB,CAAC,sBACvB,KAAK,CAAC,kBAAkB,CAAC,aAE1C,SAAS,EACV,cAAK,KAAK,EAAE,KAAK,EAAE,mBAAmB,YACpC,OAAO,GACH,IACc,CAAC;YACtB,KAAK,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;YACjC,OAAO,IAAI,CAAC;QACb,CAAC;QACD,aAAa,EAAE,KAAK,CAAC,aAAa;KAClC,CAAC,CAAC;AACJ,CAAC;AASD,MAAM,UAAU,OAAO,CAAC,KAmFvB;IACA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG,aAAa,CAAC;QAC7B,OAAO,EAAE,KAAK,CAAC,QAAQ;QACvB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,KAAK,EAAE,KAAK,CAAC,KAAK;QAElB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;QACjC,iBAAiB,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,SAAS;YAC/D,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC;YAC5C,CAAC,CAAC,SAAS,CAAC;QACb,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC;KAC7C,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAClC,MAAM,EAAE,KAAK,CAAC,EAAE;YACf,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,EAAE;QACF,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;QACjC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC;KAC3C,CAAC,CAAC,CAAC;IAEJ,OAAO,MAAM,CAAC;AACf,CAAC"}