@rvx/ui 0.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Max J. Polster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/common/events.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Get an identifier for the pressed key including any modifiers.
+ *
+ * The identifier is constructed by concatenating the modifies and lower cased key. In addition, the space key is represented as `space` for better readability.
+ *
+ * Modifiers in order:
+ * + `ctrl+`
+ * + `shift+`
+ * + `alt+`
+ * + `meta+`
+ *
+ * Examples:
+ * + `shift+a`
+ * + `ctrl+shift+space`
+ *
+ * @returns The identifier.
+ *
+ * @example
+ * ```tsx
+ * switch (keyFor(event)) {
+ *   case "enter": ...
+ *   case "ctrl+a": ...
+ * }
+ * ```
+ */
+export declare function keyFor(event: KeyboardEvent): string;
+/**
+ * A function to run an optionally async user action.
+ *
+ * Returning false indicates, that no action has been performed and that another action or the browser default behavior can be run.
+ */
+export type Action<T extends unknown[] = []> = (event: Event, ...args: T) => void | boolean | Promise<void>;
+/**
+ * Call an action that was triggered by the specified event.
+ */
+export declare function handleActionEvent<T extends unknown[]>(event: Event, action: Action<T>, ...args: T): boolean;
+/**
+ * Run an action of the event target is hovered for a minimum duration.
+ *
+ * @param event The "mouseenter" event.
+ * @param action The action to run.
+ * @param delay The delay to wait for.
+ *
+ * @example
+ * ```tsx
+ * <button on:mouseenter={event => {
+ *   startDelayedHoverOnMouseenter(event, () => {
+ *     // Close things like popovers or dropdowns in the same context
+ *     // when this button was hovered for some time:
+ *     event.target.dispatchEvent(createPassiveActionEvent());
+ *   });
+ * }}>Hover me!</button>
+ * ```
+ */
+export declare function startDelayedHoverOnMouseenter(event: MouseEvent, action: () => void, delay?: number): void;
+/**
+ * Rvx-ui's passive action event name.
+ *
+ * + This can be dispatched from an element to indicate that the user is likely no longer interested in interacting with other elements in the same context.
+ * + This is currently used to close nested dropdowns when the user hovers another dropdown item in the parent for some time.
+ */
+export declare const PASSIVE_ACTION_EVENT = "rvx-ui:passive-action";
+/**
+ * Create a {@link PASSIVE_ACTION_EVENT} custom event.
+ *
+ * This event does not bubble.
+ */
+export declare function createPassiveActionEvent(): Event;
+/**
+ * Debounce an event handler.
+ */
+export declare function debounceEvent<T>(delayMs: number, handler: (event: T) => void): (event: T) => void;

package/dist/common/events.js

@@ -0,0 +1,58 @@
+import { waitFor } from "rvx/async";
+export function keyFor(event) {
+    let key = event.key.toLowerCase();
+    if (key === " ") {
+        key = "space";
+    }
+    if (event.metaKey) {
+        key = "meta+" + key;
+    }
+    if (event.altKey) {
+        key = "alt+" + key;
+    }
+    if (event.shiftKey) {
+        key = "shift+" + key;
+    }
+    if (event.ctrlKey) {
+        key = "ctrl+" + key;
+    }
+    return key;
+}
+export function handleActionEvent(event, action, ...args) {
+    const result = action(event, ...args);
+    if (result === false) {
+        return false;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    if (result instanceof Promise) {
+        waitFor(result);
+    }
+    return true;
+}
+export function startDelayedHoverOnMouseenter(event, action, delay = 300) {
+    const timer = setTimeout(action, delay);
+    const cancel = () => {
+        event.target?.removeEventListener("mouseleave", cancel);
+        event.target?.removeEventListener("mousedown", cancel, { capture: true });
+        event.target?.removeEventListener("touchstart", cancel, { capture: true });
+        clearTimeout(timer);
+    };
+    event.target?.addEventListener("mouseleave", cancel);
+    event.target?.addEventListener("mousedown", cancel, { capture: true });
+    event.target?.addEventListener("touchstart", cancel, { capture: true });
+}
+export const PASSIVE_ACTION_EVENT = "rvx-ui:passive-action";
+export function createPassiveActionEvent() {
+    return new CustomEvent(PASSIVE_ACTION_EVENT);
+}
+export function debounceEvent(delayMs, handler) {
+    let timer;
+    return event => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(() => handler(event), delayMs);
+    };
+}
+//# sourceMappingURL=events.js.map

package/dist/common/events.js.map

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

package/dist/common/parsers.d.ts

@@ -0,0 +1,88 @@
+import { Signal } from "rvx";
+export interface ValidParseResult<S> {
+    type: "valid";
+    /**
+     * The parsed value.
+     */
+    value: S;
+}
+export interface InvalidParseResult<M> {
+    type: "invalid";
+    /**
+     * The validation message key.
+     */
+    value: M;
+}
+export type ParseResult<S, M> = ValidParseResult<S> | InvalidParseResult<M>;
+export declare class ParserFormatError extends TypeError {
+}
+export interface Parser<S, I, M extends string> {
+    /**
+     * Parse the specified input.
+     */
+    parse(input: I): ParseResult<S, M>;
+    /**
+     * Format the specified source.
+     *
+     * @throws A {@link ParserFormatError} if the source isn't currently formattable.
+     */
+    format(source: S): I;
+    /**
+     * An object with validation message keys and content to display.
+     */
+    messages: Record<M, unknown>;
+}
+/**
+ * Utility to get the source type from a parser.
+ */
+export type ParserSource<P extends Parser<any, any, any>> = P extends Parser<infer S, any, any> ? S : never;
+/**
+ * Utility to get the input type from a parser.
+ */
+export type ParserInput<P extends Parser<any, any, any>> = P extends Parser<any, infer I, any> ? I : never;
+/**
+ * Utility to get the message keys type from a parser.
+ */
+export type ParserMessages<P extends Parser<any, any, any>> = P extends Parser<any, any, infer M> ? M : never;
+/**
+ * Create a bi-directional input signal with validation.
+ *
+ * @param source The source signal.
+ * @param parser The parser to use.
+ * @param input The initial input signal to use. If not specified, the parser is used to format the current source value.
+ *
+ * @example
+ * ```tsx
+ * const value = sig(0);
+ *
+ * // Format the current value as initial value:
+ * <TextInput value={
+ *   value
+ *     .pipe(parse, intParser({ format: "Enter a valid number." }))
+ *     .pipe(trim)
+ * } />
+ * ```
+ */
+export declare function parse<S, P extends Parser<S, any, any>>(source: Signal<S>, parser: P, input?: Signal<ParserInput<P>>): Signal<ParserInput<P>>;
+export interface IntParserOptions {
+    /**
+     * A function to check if the parsed value is in a valid range.
+     *
+     * By default, the value must be a safe integer.
+     */
+    testRange?: (value: number) => boolean;
+    /**
+     * A validation message if the format is invalid.
+     */
+    format: unknown;
+    /**
+     * A validation message if the parsed value is out of range.
+     *
+     * By default, the format validation message is used.
+     */
+    range?: unknown;
+}
+/**
+ * Create a parser for integers for use with {@link parse}.
+ */
+export declare function intParser(options: IntParserOptions): Parser<number, string, "format" | "range">;

package/dist/common/parsers.js

@@ -0,0 +1,62 @@
+import { sig, watchUpdates } from "rvx";
+import { Validator } from "../components/validation.js";
+export class ParserFormatError extends TypeError {
+}
+export function parse(source, parser, input) {
+    if (input === undefined) {
+        input = sig(parser.format(source.value));
+    }
+    const invalid = sig(undefined);
+    watchUpdates(source, value => {
+        try {
+            input.value = parser.format(value);
+        }
+        catch (error) {
+            if (!(error instanceof ParserFormatError)) {
+                throw error;
+            }
+        }
+    });
+    watchUpdates(input, value => {
+        const result = parser.parse(value);
+        if (result.type === "valid") {
+            source.value = result.value;
+            invalid.value = undefined;
+        }
+        else {
+            invalid.value = result.value;
+        }
+    });
+    const validator = Validator.attach(source);
+    validator.attach(input);
+    for (const key in parser.messages) {
+        validator.prependRule({
+            validate: () => invalid.value !== key,
+            message: parser.messages[key],
+        });
+    }
+    return input;
+}
+export function intParser(options) {
+    const range = options.testRange ?? Number.isSafeInteger;
+    return {
+        parse(input) {
+            if (!/^-?\d+$/.test(input)) {
+                return { type: "invalid", value: "format" };
+            }
+            const value = Number(input);
+            if (!range(value)) {
+                return { type: "invalid", value: "range" };
+            }
+            return { type: "valid", value };
+        },
+        format(source) {
+            return String(source);
+        },
+        messages: {
+            format: options.format,
+            range: options.range ?? options.format,
+        },
+    };
+}
+//# sourceMappingURL=parsers.js.map

package/dist/common/parsers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parsers.js","sourceRoot":"","sources":["../../src/common/parsers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAU,YAAY,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAsBxD,MAAM,OAAO,iBAAkB,SAAQ,SAAS;CAAG;AAuDnD,MAAM,UAAU,KAAK,CAAmC,MAAiB,EAAE,MAAS,EAAE,KAA8B;IACnH,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACzB,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,OAAO,GAAG,GAAG,CAAgC,SAAS,CAAC,CAAC;IAE9D,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE;QAC5B,IAAI,CAAC;YACJ,KAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAmB,CAAC;QACvD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,CAAC,KAAK,YAAY,iBAAiB,CAAC,EAAE,CAAC;gBAC3C,MAAM,KAAK,CAAC;YACb,CAAC;QACF,CAAC;IACF,CAAC,CAAC,CAAC;IAEH,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE;QAC3B,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC7B,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC5B,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC;QAC3B,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC,KAA0B,CAAC;QACnD,CAAC;IACF,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC3C,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAExB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;QACnC,SAAS,CAAC,WAAW,CAAC;YACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,KAAK,GAAG;YACrC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;SAC7B,CAAC,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC;AACd,CAAC;AA0BD,MAAM,UAAU,SAAS,CAAC,OAAyB;IAClD,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,IAAI,MAAM,CAAC,aAAa,CAAC;IACxD,OAAO;QACN,KAAK,CAAC,KAAK;YACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;YAC7C,CAAC;YACD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gBACnB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;YAC5C,CAAC;YACD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;QAED,MAAM,CAAC,MAAM;YACZ,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;QAED,QAAQ,EAAE;YACT,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,MAAM;SACtC;KACD,CAAC;AACH,CAAC"}

package/dist/common/theme-test.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from "./theme.js";
+/**
+ * Get a class name from the current theme.
+ *
+ * @throws An error if the current theme doesn't support the specified key.
+ */
+export declare function themeClass(key: keyof Theme): string;

package/dist/common/theme-test.js

@@ -0,0 +1,14 @@
+import { extract } from "rvx";
+import { THEME } from "./theme.js";
+export function themeClass(key) {
+    const theme = extract(THEME);
+    if (!theme) {
+        throw new Error("theme is not available in the current context");
+    }
+    const value = theme[key];
+    if (value === undefined) {
+        throw new Error(`${key} is not supported by the current theme`);
+    }
+    return value;
+}
+//# sourceMappingURL=theme-test.js.map

package/dist/common/theme-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-test.js","sourceRoot":"","sources":["../../src/common/theme-test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAS,MAAM,YAAY,CAAC;AAO1C,MAAM,UAAU,UAAU,CAAC,GAAgB;IAC1C,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;IAClE,CAAC;IACD,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACzB,MAAM,IAAI,KAAK,CAAC,GAAG,GAAG,wCAAwC,CAAC,CAAC;IACjE,CAAC;IACD,OAAO,KAAK,CAAC;AACd,CAAC"}

package/dist/common/theme.d.ts

@@ -0,0 +1,144 @@
+import { ContextKey } from "rvx";
+export declare const THEME: ContextKey<Theme>;
+/**
+ * A collection of class names that is used as the theme.
+ *
+ * @example
+ * ```tsx
+ * import { mount, Inject } from "rvx";
+ * import { THEME, Button } from "@rvx/ui";
+ *
+ * import theme from "./theme.module.css";
+ *
+ * mount(
+ *   document.body,
+ *   <Inject key={THEME} value={theme}>
+ *     {() => <>
+ *       <Button>Click me!</Button>
+ *     </>}
+ *   </Inject>
+ * );
+ * ```
+ */
+export interface Theme {
+    /** Class for all buttons */
+    button?: string;
+    /** Additional class for buttons with the "default" variant */
+    button_default?: string;
+    /** Additional class for buttons with the "primary" variant */
+    button_primary?: string;
+    /** Additional class for buttons with the "success" variant */
+    button_success?: string;
+    /** Additional class for buttons with the "danger" variant */
+    button_danger?: string;
+    /** Additional class for buttons with the "warning" variant */
+    button_warning?: string;
+    /** Additional class for buttons with the "input" variant */
+    button_input?: string;
+    /** Class for all checkbox containing labels */
+    checkbox_label?: string;
+    /** Class for all checkbox inputs */
+    checkbox_input?: string;
+    /** Class for checkbox text content. This element may also be a text block. */
+    checkbox_content?: string;
+    /** Class for collapses */
+    collapse?: string;
+    /** Class for collapses that is when it's size has been measured. */
+    collapse_sized?: string;
+    /** Class for an additional element between the collapse container and the content. If this is undefined, the element is omitted. */
+    collapse_view?: string;
+    /** Class that is added to collapses to play an alert animation. */
+    collapse_alert?: string;
+    /** Additional class for visible collapses */
+    collapse_visible?: string;
+    /** Class for collapse content */
+    collapse_content?: string;
+    /** Class for all columns */
+    column?: string;
+    /** Additional class for columns of content */
+    column_content?: string;
+    /** Additional class for columns of controls */
+    column_control?: string;
+    /** Class for all inline control groups */
+    control_group?: string;
+    /** Class for all dialog containers */
+    dialog_container?: string;
+    /** Class for all dialog bodies */
+    dialog_body?: string;
+    /** Class for all dialog footers */
+    dialog_footer?: string;
+    /** Class for all dropdown roots. */
+    dropdown?: string;
+    /** Additional class for nested dropdowns. */
+    dropdown_expansion?: string;
+    /** Class for the dropdown scroll area. */
+    dropdown_scroll_area?: string;
+    /** Class for the dropdown content. */
+    dropdown_content?: string;
+    /** Class for all dropdown items. */
+    dropdown_item?: string;
+    /** Class for the currently active dropdown item. */
+    dropdown_item_active?: string;
+    /** Class for growing flex space */
+    flex_space?: string;
+    /** Class for all headings which are also semantic elements like h1, h2 etc. */
+    heading?: string;
+    /** Class for all labels */
+    label?: string;
+    /** Class for all links */
+    link?: string;
+    /** Class for all page roots. */
+    page?: string;
+    /** Class for page scrollbar size compensation elements. */
+    page_scrollbar_comp?: string;
+    /** Class for the page content column besides the scrollbar size compensation element. */
+    page_content_col?: string;
+    /** Class for page content roots. */
+    page_content?: string;
+    /** Class for all popover roots. */
+    popover?: string;
+    /** Class for the spike container area. */
+    popover_spike_area?: string;
+    /** Class for the popover scrollable area. */
+    popover_scroll_area?: string;
+    /** Class for the spike root. */
+    popover_spike?: string;
+    /** Class for the popover content. */
+    popover_content?: string;
+    /** Class for all radio button columns */
+    radio_buttons?: string;
+    /** Class for all radio button containing labels */
+    radio_button_label?: string;
+    /** Class for all radio button inputs */
+    radio_button_input?: string;
+    /** Class for radio button text content. This element may also be a text block. */
+    radio_button_content?: string;
+    /** Class for all rows */
+    row?: string;
+    /** Additional class for rows of content */
+    row_content?: string;
+    /** Additional class for rows of controls */
+    row_control?: string;
+    /** Class for all scroll view roots */
+    scroll_view?: string;
+    /** Class for the scrolling area. */
+    scroll_view_area?: string;
+    /** Class for scroll view content root. */
+    scroll_view_content?: string;
+    /** Class for scroll view start overflow indicators. */
+    scroll_view_indicator_start?: string;
+    /** Class for scroll view end overflow indicators. */
+    scroll_view_indicator_end?: string;
+    /** Class for visible overflow indicators. */
+    scroll_view_indicator_visible?: string;
+    /** Class for all text inputs */
+    text_input?: string;
+    /** Class for all text blocks */
+    text?: string;
+    /** Class for all validation messages */
+    validation_message?: string;
+    /** Class for all validation message containers. */
+    validation_message_container?: string;
+    /** Class for all text values */
+    value?: string;
+}

package/dist/common/theme.js

@@ -0,0 +1,2 @@
+export const THEME = Symbol.for("rvx-ui:theme");
+//# sourceMappingURL=theme.js.map

package/dist/common/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/common/theme.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,cAAc,CAAsB,CAAC"}

package/dist/common/trim.d.ts

@@ -0,0 +1,12 @@
+import { Signal } from "rvx";
+/**
+ * Create a signal that trims input.
+ *
+ * This supports validation.
+ *
+ * @example
+ * ```tsx
+ * <TextInput value={someSignal.pipe(trim)} />;
+ * ```
+ */
+export declare function trim(source: Signal<string>): Signal<string>;

package/dist/common/trim.js

@@ -0,0 +1,16 @@
+import { sig, watchUpdates } from "rvx";
+import { validatorFor } from "../components/validation.js";
+export function trim(source) {
+    const input = sig(source.value);
+    watchUpdates(input, value => {
+        source.value = value.trim();
+    });
+    watchUpdates(source, value => {
+        if (value !== input.value.trim()) {
+            input.value = value;
+        }
+    });
+    validatorFor(source)?.attach(input);
+    return input;
+}
+//# sourceMappingURL=trim.js.map

package/dist/common/trim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trim.js","sourceRoot":"","sources":["../../src/common/trim.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAU,YAAY,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAY3D,MAAM,UAAU,IAAI,CAAC,MAAsB;IAC1C,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE;QAC3B,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE;QAC5B,IAAI,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;YAClC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;IACF,CAAC,CAAC,CAAC;IAEH,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,KAAK,CAAC;AACd,CAAC"}

package/dist/common/types.d.ts

@@ -0,0 +1,13 @@
+import { Expression } from "rvx";
+export type SizeContext = "content" | "control";
+export type AriaLive = "off" | "polite" | "assertive";
+export type AriaRelevant = "additions" | "removals" | "text" | "all" | "additions removals" | "additions text" | "removals text";
+/**
+ * Utility to map expressions of strings or string arrays to (e.g. space) separated strings.
+ *
+ * @example
+ * ```tsx
+ * <a rel={separated(["noreferrer", "author"], " ")} />;
+ * ```
+ */
+export declare function separated(input: Expression<string | string[] | undefined>, sep: string): Expression<string | undefined>;

package/dist/common/types.js

@@ -0,0 +1,10 @@
+import { map } from "rvx";
+export function separated(input, sep) {
+    return map(input, v => {
+        if (Array.isArray(v)) {
+            return v.join(sep);
+        }
+        return v;
+    });
+}
+//# sourceMappingURL=types.js.map

package/dist/common/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/common/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,MAAM,KAAK,CAAC;AAetC,MAAM,UAAU,SAAS,CAAC,KAAgD,EAAE,GAAW;IACtF,OAAO,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE;QACrB,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;QACD,OAAO,CAAC,CAAC;IACV,CAAC,CAAC,CAAC;AACJ,CAAC"}

package/dist/common/writing-mode.d.ts

@@ -0,0 +1,82 @@
+/**
+ * A CSS writing mode property value.
+ */
+export type WritingMode = "horizontal-tb" | "vertical-rl" | "vertical-lr" | "sideways-rl" | "sideways-lr";
+/**
+ * A CSS script direction property value.
+ */
+export type ScriptDirection = "ltr" | "rtl";
+/** The up {@link Direction}. */
+export declare const UP = 0;
+/** The right {@link Direction}. */
+export declare const RIGHT = 1;
+/** The down {@link Direction}. */
+export declare const DOWN = 2;
+/** The left {@link Direction}. */
+export declare const LEFT = 3;
+/**
+ * Represents a direction ({@link UP}, {@link RIGHT}, {@link DOWN}, {@link LEFT}).
+ */
+export type Direction = typeof UP | typeof RIGHT | typeof DOWN | typeof LEFT;
+/**
+ * Can be indexed by a {@link Direction} to get the respective css inset property.
+ */
+export declare const INSET: Record<Direction, "top" | "right" | "bottom" | "left">;
+/**
+ * Flip a direction.
+ */
+export declare function flip(dir: Direction): Direction;
+/**
+ * Check if the specified directions are along the same axis.
+ *
+ * @example
+ * ```tsx
+ * axisEquals(UP, UP) // true
+ * axisEquals(UP, DOWN) // true
+ * axisEquals(UP, RIGHT) // false
+ * ```
+ */
+export declare function axisEquals(a: Direction, b: Direction): boolean;
+/**
+ * Get the window size in CSS pixels along the axis of the specified direction.
+ *
+ * @example
+ * ```tsx
+ * getWindowSize(UP) === window.innerHeight // true
+ * getWindowSize(DOWN) === window.innerHeight // true
+ * ```
+ */
+export declare function getWindowSize(dir: Direction): number;
+export interface DOMRectSize {
+    width: number;
+    height: number;
+}
+/**
+ * Get the size in CSS pixels of a DOM rect along the axis of the specified direction.
+ *
+ * @example
+ * ```tsx
+ * getSize(button.getBoundingClientRect(), RIGHT) // 234.5
+ * ```
+ */
+export declare function getSize(rect: DOMRectSize, dir: Direction): number;
+export interface DOMRectXY {
+    x: number;
+    y: number;
+}
+/**
+ * Get the X/Y coordinate start in CSS pixels of the specified DOM rect along the axis of the specified direction.
+ */
+export declare function getXY(rect: DOMRectXY, dir: Direction): number;
+/**
+ * Get the block start direction with respect to the specified writing mode.
+ */
+export declare function getBlockStart(writingMode: WritingMode): Direction;
+/**
+ * Get the inline start direction with respect to the specified writing mode and script direction.
+ */
+export declare function getInlineStart(writingMode: WritingMode, scriptDir: ScriptDirection): Direction;
+/**
+ * Get the space in CSS pixels between a DOM rect and the window in the specified direction.
+ */
+export declare function getWindowSpaceAround(rect: DOMRect, dir: Direction): number;