@rvx/ui 0.1.6

package/dist/components/dropdown.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { extract, For, get, map, memo, optionalString, render, sig, uniqueId, watch } from "rvx";
+import { createPassiveActionEvent, handleActionEvent, keyFor, startDelayedHoverOnMouseenter } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+import { LAYER } from "./layer.js";
+import { Popout } from "./popout.js";
+export function createDropdown(props) {
+    return new Popout({
+        placement: map(props.placement, v => v ?? "block-end"),
+        alignment: map(props.alignment, v => v ?? "start"),
+        foreignEvents: props.foreignEvents,
+        content: ({ popout, placement }) => {
+            const theme = extract(THEME);
+            const layer = extract(LAYER);
+            const activeItem = sig(undefined);
+            const instances = new WeakMap();
+            const items = memo(props.items);
+            watch(items, items => {
+                const current = activeItem.value;
+                if (current !== undefined && !items.includes(current)) {
+                    activeItem.value = undefined;
+                }
+            });
+            const scrollToActive = () => {
+                const active = activeItem.value;
+                if (active) {
+                    instances.get(active)?.root.scrollIntoView({ block: "nearest", inline: "nearest" });
+                }
+            };
+            layer.useEvent("keydown", event => {
+                const currentItems = items();
+                const current = activeItem.value;
+                switch (keyFor(event)) {
+                    case "escape": {
+                        popout.hide();
+                        break;
+                    }
+                    case "arrowleft": {
+                        if (props.expansion) {
+                            popout.hide();
+                            break;
+                        }
+                        return;
+                    }
+                    case "arrowdown": {
+                        activeItem.value = currentItems[(current === undefined ? 0 : (currentItems.indexOf(current) + 1)) % currentItems.length];
+                        scrollToActive();
+                        break;
+                    }
+                    case "arrowup": {
+                        const index = current === undefined ? -1 : (currentItems.indexOf(current) - 1);
+                        activeItem.value = currentItems[index < 0 ? currentItems.length - 1 : index];
+                        scrollToActive();
+                        break;
+                    }
+                    case "arrowright": {
+                        if (current) {
+                            const instance = instances.get(current);
+                            if (instance?.children) {
+                                instance.children.show(instance.view, event);
+                                event.stopImmediatePropagation();
+                                event.preventDefault();
+                            }
+                        }
+                        break;
+                    }
+                    case "enter": {
+                        if (current?.action && handleActionEvent(event, current.action)) {
+                            popout.hide();
+                        }
+                        else if (current) {
+                            const instance = instances.get(current);
+                            if (instance?.children) {
+                                instance.children.show(instance.view, event);
+                                event.stopImmediatePropagation();
+                                event.preventDefault();
+                            }
+                        }
+                        break;
+                    }
+                    default: return;
+                }
+                event.stopImmediatePropagation();
+                event.preventDefault();
+            });
+            const content = _jsx("div", { class: [
+                    theme?.dropdown_content,
+                ], children: _jsx(For, { each: items, children: item => {
+                        const id = uniqueId();
+                        let childrenId;
+                        let children;
+                        if (item.children) {
+                            childrenId = uniqueId();
+                            children = createDropdown({
+                                placement: () => {
+                                    const parentPlacement = get(placement)?.placement;
+                                    if (parentPlacement === "block-end" || parentPlacement === "block-start") {
+                                        return "inline-end";
+                                    }
+                                    return parentPlacement ?? "inline-end";
+                                },
+                                alignment: props.alignment,
+                                items: item.children,
+                                expansion: true,
+                                foreignEvents: props.foreignEvents,
+                                class: props.class,
+                                style: props.style,
+                            });
+                        }
+                        const root = _jsx("div", { id: id, class: [
+                                theme?.dropdown_item,
+                                () => activeItem.value === item && theme?.dropdown_item_active,
+                            ], role: "option", "aria-selected": item.selected, "aria-haspopup": children ? "listbox" : undefined, "aria-controls": () => children?.visible ? childrenId : undefined, "aria-expanded": optionalString(() => children?.visible), "on:click": event => {
+                                activeItem.value = item;
+                                if (item.action && handleActionEvent(event, item.action)) {
+                                    popout.hide();
+                                }
+                                else if (children) {
+                                    children.show(view, event);
+                                    event.stopImmediatePropagation();
+                                    event.preventDefault();
+                                }
+                            }, "on:mouseenter": event => {
+                                activeItem.value = item;
+                                startDelayedHoverOnMouseenter(event, () => {
+                                    event.target?.dispatchEvent(createPassiveActionEvent());
+                                    if (activeItem.value === item) {
+                                        children?.show(view, event);
+                                    }
+                                });
+                            }, children: item.label });
+                        const view = render(root);
+                        instances.set(item, { id, children, root, view });
+                        return view;
+                    } }) });
+            const root = _jsx("div", { id: props.id, style: props.style, class: [
+                    props.class,
+                    theme?.dropdown,
+                    map(props.expansion, v => v && theme?.dropdown_expansion),
+                ], role: "listbox", tabindex: "0", "aria-activedescendant": () => {
+                    const item = activeItem.value;
+                    return item === undefined ? undefined : instances.get(item)?.id;
+                }, "on:focus": () => {
+                    if (!activeItem.value) {
+                        const currentItems = items();
+                        activeItem.value = currentItems.find(v => get(v.selected)) ?? currentItems[0];
+                    }
+                }, children: _jsx("div", { class: theme?.dropdown_scroll_area, children: content }) });
+            layer.useAutoFocusFallback(root);
+            return root;
+        },
+    });
+}
+export function Dropdown(props) {
+    const defaultId = uniqueId();
+    const id = map(props.id, v => v ?? defaultId);
+    const dropdown = createDropdown({
+        items: props.items,
+        id,
+        style: props.style,
+        class: props.class,
+        placement: props.placement,
+        alignment: props.alignment,
+        foreignEvents: props.foreignEvents,
+    });
+    const anchor = render(props.anchor({
+        action: event => {
+            dropdown.toggle(anchor, event);
+        },
+        "aria-haspopup": "listbox",
+        "aria-controls": () => dropdown.visible ? get(id) : undefined,
+        "aria-expanded": () => dropdown.visible,
+    }));
+    return anchor;
+}
+//# sourceMappingURL=dropdown.js.map

package/dist/components/dropdown.js.map

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

package/dist/components/flex-space.d.ts

@@ -0,0 +1,4 @@
+import { Expression } from "rvx";
+export declare function FlexSpace(props: {
+    grow?: Expression<number | undefined>;
+}): unknown;

package/dist/components/flex-space.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { extract, get } from "rvx";
+import { THEME } from "../common/theme.js";
+export function FlexSpace(props) {
+    const theme = extract(THEME);
+    return _jsx("div", { class: theme?.flex_space, style: {
+            "flex-grow": () => String(get(props.grow) ?? 1),
+        } });
+}
+//# sourceMappingURL=flex-space.js.map

package/dist/components/flex-space.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-space.js","sourceRoot":"","sources":["../../src/components/flex-space.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,SAAS,CAAC,KAEzB;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,cACN,KAAK,EAAE,KAAK,EAAE,UAAU,EACxB,KAAK,EAAE;YACN,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/C,GACA,CAAC;AACJ,CAAC"}

package/dist/components/heading.d.ts

@@ -0,0 +1,9 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+export type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
+export declare function Heading(props: {
+    level: HeadingLevel;
+    class?: ClassValue;
+    style?: StyleValue;
+    id?: Expression<string | undefined>;
+    children?: unknown;
+}): unknown;

package/dist/components/heading.js

@@ -0,0 +1,14 @@
+import { createElement, extract } from "rvx";
+import { THEME } from "../common/theme.js";
+export function Heading(props) {
+    const theme = extract(THEME);
+    return createElement(`h${props.level}`, {
+        class: [
+            theme?.heading,
+            props.class,
+        ],
+        style: props.style,
+        id: props.id,
+    }, props.children);
+}
+//# sourceMappingURL=heading.js.map

package/dist/components/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../src/components/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,aAAa,EAAc,OAAO,EAAc,MAAM,KAAK,CAAC;AAEjF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAI3C,MAAM,UAAU,OAAO,CAAC,KAMvB;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,aAAa,CAAC,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE;QACvC,KAAK,EAAE;YACN,KAAK,EAAE,OAAO;YACd,KAAK,CAAC,KAAK;SACX;QACD,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,EAAE,EAAE,KAAK,CAAC,EAAE;KACZ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;AACpB,CAAC"}

package/dist/components/label.d.ts

@@ -0,0 +1,14 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+export declare function Label(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    for?: Expression<string | undefined>;
+    id?: Expression<string | undefined>;
+    children?: unknown;
+}): unknown;
+export declare function LabelFor(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    label: unknown;
+    children: (id: string) => unknown;
+}): unknown;

package/dist/components/label.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { extract, uniqueId } from "rvx";
+import { THEME } from "../common/theme.js";
+export function Label(props) {
+    const theme = extract(THEME);
+    return _jsx("label", { class: [
+            theme?.label,
+            props.class,
+        ], style: props.style, for: props.for, id: props.id, children: props.children });
+}
+export function LabelFor(props) {
+    const id = uniqueId();
+    return _jsxs(_Fragment, { children: [_jsx(Label, { class: props.class, style: props.style, for: id, children: props.label }), props.children(id)] });
+}
+//# sourceMappingURL=label.js.map

package/dist/components/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAc,QAAQ,EAAE,MAAM,KAAK,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,KAAK,CAAC,KAMrB;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,gBACN,KAAK,EAAE;YACN,KAAK,EAAE,KAAK;YACZ,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,EAAE,EAAE,KAAK,CAAC,EAAE,YAEX,KAAK,CAAC,QAAQ,GACR,CAAC;AACV,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,KAKxB;IACA,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IACtB,OAAO,8BACN,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,YAAG,KAAK,CAAC,KAAK,GAAS,EAC5E,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,IACjB,CAAC;AACL,CAAC"}

package/dist/components/layer.d.ts

@@ -0,0 +1,81 @@
+import { Context, ContextKey, Expression } from "rvx";
+import { Action } from "../common/events.js";
+export declare const LAYER: ContextKey<LayerHandle>;
+/**
+ * Render content inside the root layer.
+ */
+export declare function RootLayer(props: {
+    children: (ctx: Context) => unknown;
+}): unknown;
+/**
+ * An input layer that is inert while there are other modal layers on top of it.
+ *
+ * After creation, the first element with the "autofocus" attribute inside this layer is focused.
+ *
+ * When disposed, focus is moved back to the previously focused element.
+ */
+export declare function Layer(props: {
+    children: (ctx: Context) => unknown;
+    /**
+     * If true, all layers below this one are marked as inert until the current context is disposed.
+     */
+    modal?: boolean;
+    /**
+     * If false, the layer doesn't affect other layers but is marked as inert. Default is true.
+     */
+    enabled?: Expression<boolean | undefined>;
+}): unknown;
+export interface LayerHandle {
+    /**
+     * Reactively check if this layer is inert.
+     */
+    get inert(): boolean;
+    /**
+     * Reactively check if this is the top layer.
+     */
+    get top(): boolean;
+    /**
+     * Add a global event listener that is only called when this is the top layer.
+     *
+     * The current context is available in the event listener.
+     *
+     * The event listener is removed when the current context is disposed.
+     *
+     * @param type The event type.
+     * @param listener The event listener.
+     * @param options Event listener options. See {@link window.addEventListener}.
+     */
+    useEvent<K extends keyof WindowEventMap>(type: K, listener: (event: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    useEvent(type: string, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Shorthand for adding a global "keydown" event listener using {@link useEvent} and {@link keyFor}.
+     */
+    useHotkey(key: string, action: Action): void;
+    /**
+     * Check if this layer contains the specified node.
+     *
+     * @param node The node to check.
+     */
+    contains(node: Node): boolean;
+    /**
+     * Check if this layer or any layers in top contain the specified node.
+     *
+     * @param node The node to check.
+     * @param includeModals If false (default), any modal layers on top or layers above that are ignored.
+     */
+    stackContains(node: Node, includeModals?: boolean): boolean;
+    /**
+     * Try focusing the specified element after the layer is created (in the next microtask), if no element with the `autofocus` attribute has been found or successfully focused.
+     *
+     * @param element The element to use as fallback.
+     */
+    useAutoFocusFallback(element: Element): void;
+}
+/**
+ * Reactively check if the layer in the current context (or the root layer if there is none) is inert.
+ */
+export declare function isInertLayer(): boolean;
+/**
+ * Reactively check if the layer in the current context (or the root layer if there is none) is the top layer.
+ */
+export declare function isTopLayer(): boolean;

package/dist/components/layer.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { DeriveContext, extract, get, memo, sig, teardown, uncapture, untrack, watch, wrapContext } from "rvx";
+import { handleActionEvent, keyFor } from "../common/events.js";
+export const LAYER = Symbol.for("rvx-ui:layer-handle");
+const LAYERS = sig([
+    {
+        roots: [],
+        modal: false,
+        inert: sig(false),
+        autoFocusFallback: undefined,
+    },
+]);
+uncapture(() => watch(LAYERS, layers => {
+    const modal = layers.findLastIndex(l => l.modal);
+    for (let i = 0; i < layers.length; i++) {
+        layers[i].inert.value = i < modal;
+    }
+}));
+export function RootLayer(props) {
+    const layer = LAYERS.value[0];
+    const root = _jsx("div", { style: { display: "contents" }, inert: layer.inert, children: _jsx(DeriveContext, { children: ctx => {
+                ctx.set(LAYER, new Handle(layer));
+                return props.children(ctx);
+            } }) });
+    layer.roots.push(root);
+    teardown(() => {
+        const index = layer.roots.indexOf(root);
+        if (index >= 0) {
+            layer.roots.splice(index, 1);
+        }
+    });
+    return root;
+}
+export function Layer(props) {
+    const layer = {
+        roots: [],
+        modal: props.modal ?? false,
+        inert: sig(false),
+        autoFocusFallback: undefined,
+    };
+    const enabled = memo(() => Boolean(get(props.enabled) ?? true));
+    watch(enabled, enable => {
+        if (!enable) {
+            return;
+        }
+        LAYERS.update(layers => {
+            layers.push(layer);
+        });
+        const previous = document.activeElement;
+        if (previous && previous !== document.body) {
+            previous.blur?.();
+        }
+        queueMicrotask(() => {
+            const layers = LAYERS.value;
+            if (layer === layers[layers.length - 1] && root.isConnected) {
+                let active = document.activeElement;
+                if (active && (root === active || root.contains(active))) {
+                    return;
+                }
+                const autoFocus = root.querySelector("[autofocus]");
+                if (autoFocus) {
+                    autoFocus.focus?.();
+                    active = document.activeElement;
+                    if (active === autoFocus) {
+                        return;
+                    }
+                }
+                layer.autoFocusFallback?.focus?.();
+            }
+        });
+        teardown(() => {
+            let next = undefined;
+            LAYERS.update(layers => {
+                const index = layers.lastIndexOf(layer);
+                if (index >= 0) {
+                    layers.splice(index, 1);
+                    next = layers[index - 1];
+                }
+            });
+            queueMicrotask(() => {
+                const layers = LAYERS.value;
+                if (next === layers[layers.length - 1] && previous?.isConnected && previous !== document.body) {
+                    previous.focus?.();
+                }
+            });
+        });
+    });
+    const root = _jsx("div", { style: { display: "contents" }, inert: () => layer.inert.value || !enabled(), children: _jsx(DeriveContext, { children: ctx => {
+                ctx.set(LAYER, new Handle(layer));
+                return props.children(ctx);
+            } }) });
+    layer.roots.push(root);
+    return root;
+}
+export function isInertLayer() {
+    return extract(LAYER)?.inert ?? untrack(() => LAYERS.value[0]).inert.value;
+}
+export function isTopLayer() {
+    return extract(LAYER)?.top ?? LAYERS.value.length === 1;
+}
+function instanceContains(instance, node) {
+    const roots = instance.roots;
+    for (let i = 0; i < roots.length; i++) {
+        const root = roots[i];
+        if (root === node || root.contains(node)) {
+            return true;
+        }
+    }
+    return false;
+}
+class Handle {
+    #instance;
+    constructor(instance) {
+        this.#instance = instance;
+    }
+    get inert() {
+        return this.#instance.inert.value;
+    }
+    get top() {
+        const layers = LAYERS.value;
+        return layers[layers.length - 1] === this.#instance;
+    }
+    useEvent(type, listener, options) {
+        const wrapper = wrapContext((event) => {
+            if (this.top) {
+                listener(event);
+            }
+        });
+        window.addEventListener(type, wrapper, options);
+        teardown(() => {
+            window.removeEventListener(type, wrapper, options);
+        });
+    }
+    useHotkey(key, action) {
+        this.useEvent("keydown", event => {
+            if (keyFor(event) === key) {
+                handleActionEvent(event, action);
+            }
+        });
+    }
+    contains(node) {
+        return instanceContains(this.#instance, node);
+    }
+    stackContains(node, includeModals = false) {
+        const layers = untrack(() => LAYERS.value);
+        let i = layers.indexOf(this.#instance);
+        if (i < 0) {
+            return this.contains(node);
+        }
+        for (;;) {
+            if (instanceContains(layers[i], node)) {
+                return true;
+            }
+            i++;
+            if (i >= layers.length || (!includeModals && layers[i].modal)) {
+                return false;
+            }
+        }
+    }
+    useAutoFocusFallback(element) {
+        this.#instance.autoFocusFallback = element;
+    }
+}
+//# sourceMappingURL=layer.js.map

package/dist/components/layer.js.map

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

package/dist/components/link.d.ts

@@ -0,0 +1,57 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+export type LinkReferrerPolicy = "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
+/**
+ * Possible values of the `"rel"` attribute that are applicable to `<a>` elements.
+ */
+export type LinkAnchorRel = "alternate" | "author" | "bookmark" | "external" | "help" | "license" | "me" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "prev" | "privacy-policy" | "search" | "tag" | "terms-of-service";
+export type LinkAnchorTarget = "_self" | "_blank" | "_parent" | "_top" | "_unfencedTop";
+export declare function Link(props: {
+    /**
+     * Set when the link is disabled.
+     *
+     * The link is automatically disabled when there are any pending tasks.
+     */
+    disabled?: Expression<boolean | undefined>;
+    /**
+     * The action to run when the link is clicked.
+     */
+    action?: Action;
+    /**
+     * Causes the browser to treat the linked url as a download when true or a filename.
+     */
+    download?: Expression<string | boolean | undefined>;
+    /**
+     * The url this link points to.
+     */
+    href?: Expression<string | undefined>;
+    /**
+     * Hints the human language of the linked url.
+     */
+    hreflang?: Expression<string | undefined>;
+    /**
+     * The link target.
+     */
+    target?: Expression<LinkAnchorTarget | string | undefined>;
+    /**
+     * How much of the referrer to send when following the link.
+     *
+     * @default "no-referrer"
+     */
+    referrerpolicy?: Expression<LinkReferrerPolicy | undefined>;
+    /**
+     * The link type.
+     *
+     * @default "noreferrer"
+     */
+    rel?: Expression<LinkAnchorRel | LinkAnchorRel[] | undefined>;
+    class?: ClassValue;
+    style?: StyleValue;
+    id?: Expression<string | undefined>;
+    title?: Expression<string | undefined>;
+    autofocus?: Expression<boolean | undefined>;
+    "aria-expanded"?: Expression<boolean | undefined>;
+    "aria-label"?: Expression<string | undefined>;
+    "aria-labelledby"?: Expression<string | undefined>;
+    children?: unknown;
+}): unknown;

package/dist/components/link.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { extract, get, map, optionalString } from "rvx";
+import { isPending } from "rvx/async";
+import { handleActionEvent, keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+import { separated } from "../common/types.js";
+export function Link(props) {
+    const theme = extract(THEME);
+    const disabled = () => isPending() || get(props.disabled);
+    function action(event) {
+        if (disabled() || !props.action) {
+            return;
+        }
+        handleActionEvent(event, props.action);
+    }
+    return _jsx("a", { disabled: disabled, class: [
+            theme?.link,
+            props.class,
+        ], style: props.style, id: props.id, "aria-expanded": optionalString(props["aria-expanded"]), "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], title: props.title, autofocus: props.autofocus, role: props.action === undefined ? undefined : "button", tabindex: "0", download: props.download, href: props.href, hreflang: props.hreflang, target: props.target, referrerpolicy: map(props.referrerpolicy, v => v ?? "no-referrer"), rel: separated(map(props.rel, v => v ?? "noreferrer"), " "), "on:click": action, "on:keydown": event => {
+            const key = keyFor(event);
+            if (key === "enter" || key === "space") {
+                action(event);
+            }
+        }, children: props.children });
+}
+//# sourceMappingURL=link.js.map

package/dist/components/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../src/components/link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,EAAc,MAAM,KAAK,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAU,iBAAiB,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAW/C,MAAM,UAAU,IAAI,CAAC,KAyDpB;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE1D,SAAS,MAAM,CAAC,KAAY;QAC3B,IAAI,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACjC,OAAO;QACR,CAAC;QACD,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,YACN,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACN,KAAK,EAAE,IAAI;YACX,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,mBACG,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,gBACzC,KAAK,CAAC,YAAY,CAAC,qBACd,KAAK,CAAC,iBAAiB,CAAC,EACzC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACvD,QAAQ,EAAC,GAAG,EAEZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,cAAc,EAAE,GAAG,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,aAAa,CAAC,EAClE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,YAAY,CAAC,EAAE,GAAG,CAAC,cAEjD,MAAM,gBACJ,KAAK,CAAC,EAAE;YACnB,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAC1B,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;gBACxC,MAAM,CAAC,KAAK,CAAC,CAAC;YACf,CAAC;QACF,CAAC,YAEA,KAAK,CAAC,QAAQ,GACZ,CAAC;AACN,CAAC"}

package/dist/components/page.d.ts

@@ -0,0 +1,9 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+export declare function Page(props: {
+    inlineSize?: Expression<string | undefined>;
+    role?: Expression<string | undefined>;
+    id?: Expression<string | undefined>;
+    class?: ClassValue;
+    style?: StyleValue;
+    children?: unknown;
+}): unknown;

package/dist/components/page.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { extract } from "rvx";
+import { THEME } from "../common/theme.js";
+import { Column } from "./column.js";
+export function Page(props) {
+    const theme = extract(THEME);
+    return _jsxs("div", { role: props.role, id: props.id, class: [
+            props.class,
+            theme?.page,
+        ], style: [
+            props.style,
+            {
+                "--page-inline-size": props.inlineSize,
+            },
+        ], children: [_jsx("div", { class: theme?.page_scrollbar_comp }), _jsx("div", { class: theme?.page_content_col, children: _jsx(Column, { class: theme?.page_content, children: props.children }) })] });
+}
+//# sourceMappingURL=page.js.map