@rvx/ui 0.1.6

package/dist/common/writing-mode.js

@@ -0,0 +1,61 @@
+export const UP = 0;
+export const RIGHT = 1;
+export const DOWN = 2;
+export const LEFT = 3;
+export const INSET = ["top", "right", "bottom", "left"];
+export function flip(dir) {
+    return ((dir + 2) & 3);
+}
+export function axisEquals(a, b) {
+    return (a & 1) === (b & 1);
+}
+export function getWindowSize(dir) {
+    return (dir & 1) ? window.innerWidth : window.innerHeight;
+}
+export function getSize(rect, dir) {
+    return (dir & 1) ? rect.width : rect.height;
+}
+export function getXY(rect, dir) {
+    return (dir & 1) ? rect.x : rect.y;
+}
+export function getBlockStart(writingMode) {
+    switch (writingMode) {
+        case "horizontal-tb":
+            return UP;
+        case "vertical-rl":
+        case "sideways-rl":
+            return RIGHT;
+        case "vertical-lr":
+        case "sideways-lr":
+            return LEFT;
+    }
+}
+export function getInlineStart(writingMode, scriptDir) {
+    let dir;
+    switch (writingMode) {
+        case "horizontal-tb":
+            dir = LEFT;
+            break;
+        case "vertical-rl":
+        case "vertical-lr":
+        case "sideways-rl":
+            dir = UP;
+            break;
+        case "sideways-lr":
+            dir = DOWN;
+            break;
+    }
+    if (scriptDir !== "ltr") {
+        dir = flip(dir);
+    }
+    return dir;
+}
+export function getWindowSpaceAround(rect, dir) {
+    switch (dir) {
+        case UP: return rect.y;
+        case RIGHT: return window.innerWidth - rect.right;
+        case DOWN: return window.innerHeight - rect.bottom;
+        case LEFT: return rect.x;
+    }
+}
+//# sourceMappingURL=writing-mode.js.map

package/dist/common/writing-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"writing-mode.js","sourceRoot":"","sources":["../../src/common/writing-mode.tsx"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEpB,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC;AAEtB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC;AAUtB,MAAM,CAAC,MAAM,KAAK,GAA2D,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAKhH,MAAM,UAAU,IAAI,CAAC,GAAc;IAClC,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAc,CAAC;AACrC,CAAC;AAYD,MAAM,UAAU,UAAU,CAAC,CAAY,EAAE,CAAY;IACpD,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5B,CAAC;AAWD,MAAM,UAAU,aAAa,CAAC,GAAc;IAC3C,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC;AAC3D,CAAC;AAeD,MAAM,UAAU,OAAO,CAAC,IAAiB,EAAE,GAAc;IACxD,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;AAC7C,CAAC;AAUD,MAAM,UAAU,KAAK,CAAC,IAAe,EAAE,GAAc;IACpD,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACpC,CAAC;AAKD,MAAM,UAAU,aAAa,CAAC,WAAwB;IACrD,QAAQ,WAAW,EAAE,CAAC;QACrB,KAAK,eAAe;YACnB,OAAO,EAAE,CAAC;QAEX,KAAK,aAAa,CAAC;QACnB,KAAK,aAAa;YACjB,OAAO,KAAK,CAAC;QAEd,KAAK,aAAa,CAAC;QACnB,KAAK,aAAa;YACjB,OAAO,IAAI,CAAC;IACd,CAAC;AACF,CAAC;AAKD,MAAM,UAAU,cAAc,CAAC,WAAwB,EAAE,SAA0B;IAClF,IAAI,GAAc,CAAC;IACnB,QAAQ,WAAW,EAAE,CAAC;QACrB,KAAK,eAAe;YACnB,GAAG,GAAG,IAAI,CAAC;YACX,MAAM;QAEP,KAAK,aAAa,CAAC;QACnB,KAAK,aAAa,CAAC;QACnB,KAAK,aAAa;YACjB,GAAG,GAAG,EAAE,CAAC;YACT,MAAM;QAEP,KAAK,aAAa;YACjB,GAAG,GAAG,IAAI,CAAC;YACX,MAAM;IACR,CAAC;IAED,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QACzB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IACjB,CAAC;IAED,OAAO,GAAG,CAAC;AACZ,CAAC;AAKD,MAAM,UAAU,oBAAoB,CAAC,IAAa,EAAE,GAAc;IACjE,QAAQ,GAAG,EAAE,CAAC;QACb,KAAK,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;QACvB,KAAK,KAAK,CAAC,CAAC,OAAO,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAClD,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;QACnD,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC1B,CAAC;AACF,CAAC"}

package/dist/components/button.d.ts

@@ -0,0 +1,42 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+import { Validator } from "./validation.js";
+export type ButtonType = "button" | "submit" | "reset" | "menu";
+export type ButtonVariant = "default" | "primary" | "success" | "danger" | "warning" | "input";
+export declare function Button(props: {
+    /**
+     * The button type.
+     *
+     * @default "button"
+     */
+    type?: Expression<ButtonType | undefined>;
+    /**
+     * The theme variant.
+     *
+     * @default "default"
+     */
+    variant?: Expression<ButtonVariant | undefined>;
+    /**
+     * Set when the button is disabled.
+     *
+     * The button is automatically disabled when there are any pending tasks.
+     */
+    disabled?: Expression<boolean | undefined>;
+    /**
+     * The action to run when the button is clicked.
+     */
+    action?: Action;
+    class?: ClassValue;
+    style?: StyleValue;
+    id?: Expression<string | undefined>;
+    autofocus?: Expression<boolean | undefined>;
+    title?: Expression<string | undefined>;
+    role?: Expression<string | undefined>;
+    "aria-label"?: Expression<string | undefined>;
+    "aria-labelledby"?: Expression<string | undefined>;
+    "aria-expanded"?: Expression<boolean | undefined>;
+    "aria-haspopup"?: Expression<string | undefined>;
+    "aria-controls"?: Expression<string | undefined>;
+    validator?: Validator;
+    children?: unknown;
+}): unknown;

package/dist/components/button.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { extract, get, optionalString } from "rvx";
+import { isPending } from "rvx/async";
+import { handleActionEvent, keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+export function Button(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("button", { type: () => get(props.type) ?? "button", disabled: disabled, class: [
+            theme?.button,
+            () => theme?.[`button_${get(props.variant) ?? "default"}`],
+            props.class,
+        ], style: props.style, id: props.id, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-expanded": optionalString(props["aria-expanded"]), "aria-haspopup": props["aria-haspopup"], "aria-controls": props["aria-controls"], "aria-invalid": props.validator ? optionalString(props.validator.invalid) : undefined, "aria-errormessage": props.validator ? props.validator.errorMessageIds : undefined, autofocus: props.autofocus, "on:click": action, "on:keydown": event => {
+            const key = keyFor(event);
+            if (key === "enter" || key === "space") {
+                action(event);
+            }
+        }, children: props.children });
+}
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAE,GAAG,EAAE,cAAc,EAAc,MAAM,KAAK,CAAC;AACvF,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;AAM3C,MAAM,UAAU,MAAM,CAAC,KAyCtB;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,iBACN,IAAI,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,EACvC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACN,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE,CAAC;YAC1D,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,gBACJ,KAAK,CAAC,YAAY,CAAC,qBACd,KAAK,CAAC,iBAAiB,CAAC,mBAC1B,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,mBACtC,KAAK,CAAC,eAAe,CAAC,mBACtB,KAAK,CAAC,eAAe,CAAC,kBACvB,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,uBAChE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAChF,SAAS,EAAE,KAAK,CAAC,SAAS,cAEhB,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,GACP,CAAC;AACX,CAAC"}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,9 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+export declare function Checkbox(props: {
+    checked?: Expression<boolean | undefined>;
+    disabled?: Expression<boolean | undefined>;
+    class?: ClassValue;
+    style?: StyleValue;
+    autofocus?: Expression<boolean | undefined>;
+    children?: unknown;
+}): unknown;

package/dist/components/checkbox.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { extract, get, optionalString, Signal, string, uniqueId, watch } from "rvx";
+import { isPending } from "rvx/async";
+import { THEME } from "../common/theme.js";
+import { Text } from "./text.js";
+import { validatorFor } from "./validation.js";
+export function Checkbox(props) {
+    const id = uniqueId();
+    const theme = extract(THEME);
+    const disabled = props.checked instanceof Signal
+        ? () => isPending() || get(props.disabled)
+        : () => true;
+    const validator = props.checked instanceof Signal ? validatorFor(props.checked) : undefined;
+    const input = _jsx("input", { id: id, type: "checkbox", class: theme?.checkbox_input, "on:input": () => {
+            if (props.checked instanceof Signal) {
+                props.checked.value = input.checked;
+            }
+        }, "aria-readonly": string(!(props.checked instanceof Signal)), "aria-invalid": validator ? optionalString(validator.invalid) : undefined, "aria-errormessage": validator ? validator.errorMessageIds : undefined, autofocus: props.autofocus, disabled: disabled });
+    watch(props.checked, checked => {
+        if (checked === undefined) {
+            input.indeterminate = true;
+        }
+        else {
+            input.checked = checked;
+        }
+    });
+    return _jsxs("label", { for: id, class: [
+            theme?.checkbox_label,
+            props.class,
+        ], style: props.style, children: [input, _jsx(Text, { class: theme?.checkbox_content, children: props.children })] });
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAc,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACxH,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,UAAU,QAAQ,CAAC,KASxB;IACA,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IACtB,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAE7B,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,YAAY,MAAM;QAC/C,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC1C,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC;IAEd,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,YAAY,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5F,MAAM,KAAK,GAAG,gBACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EAAE,cAAc,cAClB,GAAG,EAAE;YACd,IAAI,KAAK,CAAC,OAAO,YAAY,MAAM,EAAE,CAAC;gBACrC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;YACrC,CAAC;QACF,CAAC,mBACc,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,MAAM,CAAC,CAAC,kBAC3C,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,uBACpD,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACpE,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,QAAQ,GACG,CAAC;IAEvB,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;QAC9B,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC3B,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;aAAM,CAAC;YACP,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACzB,CAAC;IACF,CAAC,CAAC,CAAC;IAEH,OAAO,iBACN,GAAG,EAAE,EAAE,EACP,KAAK,EAAE;YACN,KAAK,EAAE,cAAc;YACrB,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,aAEjB,KAAK,EACN,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,YAClC,KAAK,CAAC,QAAQ,GACT,IACA,CAAC;AACV,CAAC"}

package/dist/components/collapse-test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Get the content element of a collapse.
+ */
+export declare function getCollapseContent(collapse: Element): HTMLDivElement;
+/**
+ * Check if a collapse is visible.
+ */
+export declare function isCollapseVisible(collapse: Element): boolean;

package/dist/components/collapse-test.js

@@ -0,0 +1,15 @@
+import { themeClass } from "../test.js";
+function assertCollapse(collapse) {
+    if (!collapse.matches(`.${themeClass("collapse")}`)) {
+        throw new Error("collapse must be a collapse root element.");
+    }
+}
+export function getCollapseContent(collapse) {
+    assertCollapse(collapse);
+    return collapse.querySelector(`.${themeClass("collapse_content")}`);
+}
+export function isCollapseVisible(collapse) {
+    assertCollapse(collapse);
+    return !collapse.hasAttribute("inert");
+}
+//# sourceMappingURL=collapse-test.js.map

package/dist/components/collapse-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-test.js","sourceRoot":"","sources":["../../src/components/collapse-test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,SAAS,cAAc,CAAC,QAAiB;IACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC;QACrD,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC9D,CAAC;AACF,CAAC;AAKD,MAAM,UAAU,kBAAkB,CAAC,QAAiB;IACnD,cAAc,CAAC,QAAQ,CAAC,CAAC;IACzB,OAAO,QAAQ,CAAC,aAAa,CAAiB,IAAI,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAE,CAAC;AACtF,CAAC;AAKD,MAAM,UAAU,iBAAiB,CAAC,QAAiB;IAClD,cAAc,CAAC,QAAQ,CAAC,CAAC;IACzB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACxC,CAAC"}

package/dist/components/collapse.d.ts

@@ -0,0 +1,13 @@
+import { ClassValue, Event, Expression, StyleValue } from "rvx";
+import { AriaLive, AriaRelevant } from "../common/types.js";
+export declare function Collapse(props: {
+    visible?: Expression<boolean | undefined>;
+    alert?: Event<[]>;
+    children?: unknown;
+    class?: ClassValue;
+    style?: StyleValue;
+    id?: Expression<string | undefined>;
+    "aria-live"?: Expression<AriaLive | undefined>;
+    "aria-relevant"?: Expression<AriaRelevant | undefined>;
+    "aria-atomic"?: Expression<boolean | undefined>;
+}): unknown;

package/dist/components/collapse.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { extract, get, map, optionalString, sig, teardown } from "rvx";
+import { THEME } from "../common/theme.js";
+export function Collapse(props) {
+    const theme = extract(THEME);
+    const visible = map(props.visible, v => v ?? false);
+    const alert = sig(false);
+    const size = sig(undefined);
+    const content = _jsx("div", { class: theme?.collapse_content, children: props.children });
+    const observer = new ResizeObserver(entries => {
+        const entry = entries[entries.length - 1];
+        const boxSize = entry?.borderBoxSize[entry.borderBoxSize.length - 1];
+        if (boxSize) {
+            size.value = boxSize.blockSize;
+        }
+    });
+    observer.observe(content);
+    teardown(() => {
+        observer.disconnect();
+    });
+    props.alert?.(() => {
+        if (get(visible)) {
+            alert.value = false;
+            void root.offsetWidth;
+            alert.value = true;
+        }
+    });
+    const root = _jsx("div", { inert: map(visible, v => !v), class: [
+            theme?.collapse,
+            () => size.value === undefined ? undefined : theme?.collapse_sized,
+            () => alert.value ? theme?.collapse_alert : undefined,
+            map(visible, v => v ? theme?.collapse_visible : undefined),
+            props.class,
+        ], style: [
+            {
+                "--collapse-size": () => size.value === undefined ? undefined : `${size.value}px`,
+            },
+            props.style,
+        ], id: props.id, "aria-live": map(props["aria-live"], v => v ?? "polite"), "aria-relevant": props["aria-relevant"], "aria-atomic": optionalString(props["aria-atomic"]), children: theme?.collapse_view
+            ? _jsx("div", { class: theme.collapse_view, children: content })
+            : content });
+    return root;
+}
+//# sourceMappingURL=collapse.js.map

package/dist/components/collapse.js.map

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

package/dist/components/column.d.ts

@@ -0,0 +1,12 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { SizeContext } from "../common/types.js";
+/**
+ * A flex column with automatic spacing between it's children.
+ */
+export declare function Column(props: {
+    size?: Expression<SizeContext | undefined>;
+    class?: ClassValue;
+    style?: StyleValue;
+    id?: Expression<string | undefined>;
+    children?: unknown;
+}): unknown;

package/dist/components/column.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { extract, map } from "rvx";
+import { THEME } from "../common/theme.js";
+export function Column(props) {
+    const theme = extract(THEME);
+    return _jsx("div", { class: [
+            theme?.column,
+            map(props.size, size => theme?.[`column_${size ?? "content"}`]),
+            props.class,
+        ], style: props.style, id: props.id, children: props.children });
+}
+//# sourceMappingURL=column.js.map

package/dist/components/column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.js","sourceRoot":"","sources":["../../src/components/column.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAE,GAAG,EAAc,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAM3C,MAAM,UAAU,MAAM,CAAC,KAMtB;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,cACN,KAAK,EAAE;YACN,KAAK,EAAE,MAAM;YACb,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC;YAC/D,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,YAEX,KAAK,CAAC,QAAQ,GACV,CAAC;AACR,CAAC"}

package/dist/components/control-group.d.ts

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

package/dist/components/control-group.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { extract } from "rvx";
+import { THEME } from "../common/theme.js";
+export function ControlGroup(props) {
+    const theme = extract(THEME);
+    return _jsx("div", { class: [
+            theme?.control_group,
+            props.class,
+        ], style: props.style, id: props.id, children: props.children });
+}
+//# sourceMappingURL=control-group.js.map

package/dist/components/control-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-group.js","sourceRoot":"","sources":["../../src/components/control-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,OAAO,EAAc,MAAM,KAAK,CAAC;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,YAAY,CAAC,KAK5B;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,cACN,KAAK,EAAE;YACN,KAAK,EAAE,aAAa;YACpB,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,YAEX,KAAK,CAAC,QAAQ,GACV,CAAC;AACR,CAAC"}

package/dist/components/dialog.d.ts

@@ -0,0 +1,33 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+export declare class DialogAbortError extends Error {
+}
+export interface Dialog<T> {
+    resolve: (value: T) => void;
+    reject: (cause?: unknown) => void;
+}
+export type DialogInit<T> = (dialog: Dialog<T>) => unknown;
+export interface DialogOptions {
+    cancellable?: boolean;
+}
+export declare function showDialog<T = void>(init: DialogInit<T>, options?: DialogOptions): Promise<T>;
+export type DialogRole = "dialog" | "alertdialog";
+export declare function DialogBody(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    children?: unknown;
+    role?: Expression<DialogRole | undefined>;
+    title?: unknown;
+    description?: unknown;
+    inlineSize?: Expression<string | undefined>;
+    maxInlineSize?: Expression<string | undefined>;
+    blockSize?: Expression<string | undefined>;
+    maxBlockSize?: Expression<string | undefined>;
+    "aria-labelledby"?: Expression<string | undefined>;
+    "aria-describedby"?: Expression<string | undefined>;
+}): unknown;
+export declare function DialogFooter(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    links?: unknown;
+    children?: unknown;
+}): unknown;

package/dist/components/dialog.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { captureSelf, extract, map, mount, uniqueId } from "rvx";
+import { TASKS, Tasks } from "rvx/async";
+import { FlexSpace, Heading, Row, Text, THEME } from "../index.js";
+import { LAYER, Layer } from "./layer.js";
+export class DialogAbortError extends Error {
+}
+export function showDialog(init, options) {
+    return new Promise((resolve, reject) => {
+        captureSelf(dispose => {
+            mount(document.body, _jsx(Layer, { modal: true, children: ctx => {
+                    ctx.set(TASKS, new Tasks());
+                    const dialog = {
+                        resolve(value) {
+                            dispose();
+                            resolve(value);
+                        },
+                        reject(reason) {
+                            dispose();
+                            reject(reason);
+                        },
+                    };
+                    if (options?.cancellable ?? true) {
+                        extract(LAYER)?.useHotkey("escape", () => {
+                            dialog.reject(new DialogAbortError());
+                        });
+                    }
+                    return init(dialog);
+                } }));
+        });
+    });
+}
+export function DialogBody(props) {
+    const theme = extract(THEME);
+    let titleId;
+    let descriptionId;
+    const head = [];
+    if (props.title !== undefined) {
+        titleId = uniqueId();
+        head.push(_jsx(Heading, { level: "2", id: titleId, children: props.title }));
+    }
+    if (props.description !== undefined) {
+        descriptionId = uniqueId();
+        head.push(_jsx(Text, { id: descriptionId, children: props.description }));
+    }
+    return _jsx("div", { class: [
+            theme?.dialog_container,
+            props.class,
+        ], style: props.style, role: map(props.role, v => v ?? "dialog"), "aria-labelledby": map(props["aria-labelledby"], v => v ?? titleId), "aria-describedby": map(props["aria-describedby"], v => v ?? descriptionId), children: _jsxs("div", { class: [
+                theme?.column,
+                theme?.column_content,
+                theme?.dialog_body,
+            ], style: {
+                "inline-size": props.inlineSize,
+                "max-inline-size": props.maxInlineSize,
+                "block-size": props.blockSize,
+                "max-block-size": props.maxBlockSize,
+            }, children: [head, props.children] }) });
+}
+export function DialogFooter(props) {
+    const theme = extract(THEME);
+    return _jsxs(Row, { size: "control", class: [
+            theme?.dialog_footer,
+            props.class,
+        ], style: props.style, align: "center", children: [_jsx(Row, { size: "control", children: props.links }), _jsx(FlexSpace, {}), _jsx(Row, { size: "control", children: props.children })] });
+}
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

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

package/dist/components/dropdown-input.d.ts

@@ -0,0 +1,27 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { ButtonVariant } from "./button.js";
+import { PopoutAlignment, PopoutPlacement } from "./popout.js";
+export interface DropdownValue<T> {
+    value: T;
+    label: unknown;
+}
+export declare function DropdownInput<T>(props: {
+    children?: unknown;
+    value: Expression<T>;
+    values: Expression<DropdownValue<T>[]>;
+    variant?: ButtonVariant;
+    disabled?: Expression<boolean | undefined>;
+    class?: ClassValue;
+    style?: StyleValue;
+    id?: Expression<string | undefined>;
+    autofocus?: Expression<boolean | undefined>;
+    title?: Expression<string | undefined>;
+    "aria-label"?: Expression<string | undefined>;
+    "aria-labelledby"?: Expression<string | undefined>;
+    dropdownId?: string;
+    dropdownClass?: ClassValue;
+    dropdownStyle?: StyleValue;
+    placement?: Expression<PopoutPlacement | undefined>;
+    alignment?: Expression<PopoutAlignment | undefined>;
+    foreignEvents?: string[];
+}): unknown;

package/dist/components/dropdown-input.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { get, map, Signal } from "rvx";
+import { Button } from "./button.js";
+import { Dropdown } from "./dropdown.js";
+import { validatorFor } from "./validation.js";
+export function DropdownInput(props) {
+    const items = new WeakMap();
+    return _jsx(Dropdown, { anchor: a => _jsx(Button, { ...a, variant: map(props.variant, v => v ?? "input"), disabled: props.value instanceof Signal ? props.disabled : true, class: props.class, style: props.style, id: props.id, autofocus: props.autofocus, title: props.title, role: "combobox", "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], validator: props.value instanceof Signal ? validatorFor(props.value) : undefined, children: props.children ?? (() => {
+                const value = get(props.value);
+                return get(props.values).find(v => v.value === value)?.label;
+            }) }), items: () => get(props.values).map(value => {
+            let item = items.get(value);
+            if (item === undefined) {
+                item = {
+                    label: value.label,
+                    selected: () => value.value === get(props.value),
+                    action: () => {
+                        if (props.value instanceof Signal) {
+                            props.value.value = value.value;
+                        }
+                        else {
+                            return false;
+                        }
+                    },
+                };
+                items.set(value, item);
+            }
+            return item;
+        }), id: props.dropdownId, style: props.dropdownStyle, class: props.dropdownClass, placement: props.placement, alignment: props.alignment, foreignEvents: props.foreignEvents });
+}
+//# sourceMappingURL=dropdown-input.js.map

package/dist/components/dropdown-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-input.js","sourceRoot":"","sources":["../../src/components/dropdown-input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,GAAG,EAAE,GAAG,EAAE,MAAM,EAAc,MAAM,KAAK,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAiB,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAgB,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAO/C,MAAM,UAAU,aAAa,CAAI,KAsBhC;IACA,MAAM,KAAK,GAAG,IAAI,OAAO,EAAkC,CAAC;IAC5D,OAAO,KAAC,QAAQ,IACf,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,OACf,CAAC,EACL,OAAO,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,EAC9C,QAAQ,EAAE,KAAK,CAAC,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC/D,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,UAAU,gBACH,KAAK,CAAC,YAAY,CAAC,qBACd,KAAK,CAAC,iBAAiB,CAAC,EACzC,SAAS,EAAE,KAAK,CAAC,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,YAE/E,KAAK,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE;gBACxB,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC/B,OAAO,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK,CAAC;YAC9D,CAAC,CAAC,GACM,EACT,KAAK,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAe,KAAK,CAAC,EAAE;YACxD,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACxB,IAAI,GAAG;oBACN,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;oBAChD,MAAM,EAAE,GAAG,EAAE;wBACZ,IAAI,KAAK,CAAC,KAAK,YAAY,MAAM,EAAE,CAAC;4BACnC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;wBACjC,CAAC;6BAAM,CAAC;4BACP,OAAO,KAAK,CAAC;wBACd,CAAC;oBACF,CAAC;iBACD,CAAC;gBACF,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACxB,CAAC;YACD,OAAO,IAAI,CAAC;QACb,CAAC,CAAC,EACF,EAAE,EAAE,KAAK,CAAC,UAAU,EACpB,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,aAAa,EAAE,KAAK,CAAC,aAAa,GACjC,CAAC;AACJ,CAAC"}

package/dist/components/dropdown.d.ts

@@ -0,0 +1,123 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+import { Popout, PopoutAlignment, PopoutPlacement } from "./popout.js";
+export interface DropdownItem {
+    /**
+     * The item label.
+     */
+    label: unknown;
+    /**
+     * The action to run when this item is selected.
+     */
+    action?: Action;
+    /**
+     * Optional child items.
+     *
+     * + If an action is also specified and runs when the item is selected, this is only accessible by hovering or pressing `ArrowRight`.
+     * + This expression is memoized and only evaluated while the dropdown is open.
+     */
+    children?: Expression<DropdownItem[]>;
+    /**
+     * True if this item is currently selected.
+     */
+    selected?: Expression<boolean>;
+}
+/**
+ * Create a dropdown that is initially hidden.
+ */
+export declare function createDropdown(props: {
+    /**
+     * The items contained in this dropdown.
+     *
+     * This expression is memoized and only evaluated while the dropdown is open.
+     */
+    items: Expression<DropdownItem[]>;
+    /**
+     * True to indicate, that this is a nested dropdown.
+     *
+     * Currently, this allows the dropdown to be closed by pressing "ArrowRight".
+     */
+    expansion?: boolean;
+    /** An id for the dropdown root. */
+    id?: Expression<string | undefined>;
+    /** Styles for the dropdown root. */
+    style?: StyleValue;
+    /** Classes for the dropdown root. */
+    class?: ClassValue;
+    /**
+     * Defines the direction in which the dropdown is placed in relation to the anchor.
+     *
+     * This expression is only evaluated when calculating the dropdown placement.
+     *
+     * See {@link PopoutPlacement}
+     *
+     * @default "block-end"
+     */
+    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 "start"
+     */
+    alignment?: Expression<PopoutAlignment | undefined>;
+    /**
+     * An array of event names that cause the dropdown 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[];
+}): Popout;
+export interface DropdownAnchorProps {
+    action: Action;
+    "aria-haspopup": Expression<string | undefined>;
+    "aria-controls": Expression<string | undefined>;
+    "aria-expanded": Expression<boolean>;
+}
+export declare function Dropdown(props: {
+    /**
+     * A function to immediately render the anchor.
+     */
+    anchor: (props: DropdownAnchorProps) => unknown;
+    /**
+     * The items contained in this dropdown.
+     *
+     * This expression is memoized and only evaluated while the dropdown is open.
+     */
+    items: Expression<DropdownItem[]>;
+    /** An id for the dropdown root. */
+    id?: Expression<string | undefined>;
+    /** Styles for the dropdown root. */
+    style?: StyleValue;
+    /** Classes for the dropdown root. */
+    class?: ClassValue;
+    /**
+     * Defines the direction in which the dropdown is placed in relation to the anchor.
+     *
+     * This expression is only evaluated when calculating the dropdown placement.
+     *
+     * See {@link PopoutPlacement}
+     *
+     * @default "block-end"
+     */
+    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 "start"
+     */
+    alignment?: Expression<PopoutAlignment | undefined>;
+    /**
+     * An array of event names that cause the dropdown 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[];
+}): unknown;