elbe-ui 0.4.27 → 1.0.2

package/dist/ui/components/base/box.js

@@ -9,18 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Component, h } from "preact";
+import { Component, createElement } from "react";
 export function applyProps(typeLabel, p, classes, style) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (Array.isArray(classes)) {
         classes = classes.filter((c) => c).join(" ");
     }
-    return Object.assign(Object.assign({ id: p.id, class: `${classes || ""} ${p.class || ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_a = p.style) !== null && _a !== void 0 ? _a : {})), (p.flex ? { flex: p.flex === true ? 1 : p.flex } : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {})), { ["aria-label"]: (_b = p.ariaLabel) !== null && _b !== void 0 ? _b : undefined, ariaLabel: (_c = p.ariaLabel) !== null && _c !== void 0 ? _c : null, ["data-type"]: (_d = p.typeLabel) !== null && _d !== void 0 ? _d : (!!typeLabel ? `elbe_${typeLabel}` : undefined) });
+    return Object.assign(Object.assign({ id: p.id, className: `${classes || ""} ${p.className || ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_a = p.style) !== null && _a !== void 0 ? _a : {})), (p.flex ? { flex: p.flex === true ? 1 : p.flex } : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {})), { ["aria-label"]: (_b = p.ariaLabel) !== null && _b !== void 0 ? _b : undefined, ["data-type"]: (_c = p.typeLabel) !== null && _c !== void 0 ? _c : (!!typeLabel ? `elbe_${typeLabel}` : undefined) });
 }
 export class Box extends Component {
     render() {
         const _a = this.props, { scheme, mode, padding, margin, children } = _a, elbe = __rest(_a, ["scheme", "mode", "padding", "margin", "children"]);
-        return h("div", applyProps("box", elbe, [scheme, mode], Object.assign({ padding: `${padding}rem`, margin: `${margin}rem` }, elbe.style)), children);
+        return createElement("div", applyProps("box", elbe, [scheme, mode], Object.assign({ padding: `${padding}rem`, margin: `${margin}rem` }, elbe.style)), children);
     }
 }
 Box.primary = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "primary" })).render();

package/dist/ui/components/base/card.d.ts

@@ -16,4 +16,4 @@ export declare function Card({ mode, scheme, kind, manner, padding, margin, onTa
     disabled?: boolean;
     overflow?: "hidden" | "scroll" | "auto";
     children?: ElbeChildren;
-} & ElbeProps): import("preact").JSX.Element;
+} & ElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/base/card.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { applyProps, } from "../../..";
 export const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
 export function Card(_a) {

package/dist/ui/components/base/padded.d.ts

@@ -1,4 +1,4 @@
-import React from "preact/compat";
+import React from "react";
 import { ElbeProps } from "./box";
 export type PaddedProps = ElbeProps & {
     children: any;
@@ -17,10 +17,10 @@ export declare class Padded extends React.Component<PaddedProps & {
     });
     static all: ({ amount, ...p }: PaddedProps & {
         amount: number;
-    }) => React.JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     static symmetric: ({ vertical, horizontal, ...p }: PaddedProps & {
         vertical: number;
         horizontal: number;
-    }) => React.JSX.Element;
-    render(): React.JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/ui/components/base/padded.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
-import React from "preact/compat";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { applyProps } from "./box";
 export class Padded extends React.Component {
     constructor(props) {

package/dist/ui/components/button/button.d.ts

@@ -1,23 +1,24 @@
-import { Component } from "preact";
+import React, { Component } from "react";
 import type { ElbeColorKinds, ElbeColorManners } from "../../theme/colors";
+import { ElbeChildren } from "../../util/types";
 import { ActionElbeProps } from "../base/box";
-import type { IconChild } from "./icon_button";
+import { type IconChild } from "./icon_button";
 export type ButtonProps = ActionElbeProps & {
     kind?: ElbeColorKinds;
     transparent?: boolean;
     contentAlign?: "start" | "center" | "end";
-    onTap?: (e: Event) => void;
+    onTap?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 } & {
     icon?: IconChild;
     label?: string;
-    children?: any;
+    children?: ElbeChildren;
 };
 export declare class Button extends Component<ButtonProps & {
     manner: ElbeColorManners;
 }> {
-    static major: (p: ButtonProps) => import("preact").JSX.Element;
-    static minor: (p: ButtonProps) => import("preact").JSX.Element;
-    static flat: (p: ButtonProps) => import("preact").JSX.Element;
-    static plain: (p: ButtonProps) => import("preact").JSX.Element;
-    render(): import("preact").JSX.Element;
+    static major: (p: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    static minor: (p: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    static flat: (p: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    static plain: (p: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/ui/components/button/button.js

@@ -9,23 +9,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { Component } from "preact";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
 import { useToolbar } from "../../util/ctx_toolbar";
-import { _ElbeErr } from "../../util/error_view";
 import { applyProps } from "../base/box";
+import { Icon } from "./icon_button";
 export class Button extends Component {
     render() {
-        return _btn(this.props, this.props.manner);
+        return _jsx(_Btn, Object.assign({}, this.props, { manner: this.props.manner }));
     }
 }
-Button.major = (p) => _btn(p, "major");
-Button.minor = (p) => _btn(p, "minor");
-Button.flat = (p) => _btn(p, "flat");
-Button.plain = (p) => _btn(p, "plain");
-function _btn(_a, manner) {
+Button.major = (p) => _jsx(_Btn, Object.assign({}, p, { manner: "major" }));
+Button.minor = (p) => _jsx(_Btn, Object.assign({}, p, { manner: "minor" }));
+Button.flat = (p) => _jsx(_Btn, Object.assign({}, p, { manner: "flat" }));
+Button.plain = (p) => _jsx(_Btn, Object.assign({}, p, { manner: "plain" }));
+function _Btn(_a) {
     var _b;
-    var { kind, onTap, icon, label, children, contentAlign } = _a, elbe = __rest(_a, ["kind", "onTap", "icon", "label", "children", "contentAlign"]);
+    var { manner, kind, onTap, icon, label, children, contentAlign } = _a, elbe = __rest(_a, ["manner", "kind", "onTap", "icon", "label", "children", "contentAlign"]);
     const toolbarCtx = useToolbar();
     return label || icon || children ? (_jsxs("button", Object.assign({}, applyProps("button", Object.assign(Object.assign({ role: "button" }, elbe), { flex: (toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? 1 : elbe.flex }), [
         "row",
@@ -36,10 +36,12 @@ function _btn(_a, manner) {
     ], {
         overflow: "hidden",
         justifyContent: contentAlign !== null && contentAlign !== void 0 ? contentAlign : ((toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? "start" : "center"),
-        backgroundColor: elbe.transparent ? "transparent" : null,
-    }), { title: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx("div", { style: {
+        backgroundColor: elbe.transparent ? "transparent" : undefined,
+    }), { title: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [_jsx(Icon, { icon: icon }), !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx("div", { style: {
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
-                }, children: label })), children] }))) : (_ElbeErr("Button requires either an icon and or a label, or a child"));
+                }, children: label })), children] }))) : (_jsx("div", {})
+    //_ElbeErr("Button requires either an icon and or a label, or a child")
+    );
 }

package/dist/ui/components/button/choose_button.d.ts

@@ -1,5 +1,5 @@
 import type { ElbeColorKinds } from "../../theme/colors";
-import type { IconChild } from "./icon_button";
+import { type IconChild } from "./icon_button";
 export interface ChooseItem<T> {
     value: T;
     label?: string;
@@ -12,4 +12,4 @@ export declare function ChooseButton<T>({ items, value, onChange, kind, column,
     onChange?: (v: T) => void;
     kind?: ElbeColorKinds;
     column?: boolean;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/button/choose_button.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
 import { Card } from "../base/card";
 import { Spaced } from "../layout/spaced";
 import { Button } from "./button";
+import { Icon } from "./icon_button";
 export function ChooseButton({ items, value, onChange, kind, column = false, }) {
-    return (_jsx(Card, { kind: "accent", manner: "major", padding: 0, overflow: "hidden", role: "radiogroup", disabled: !onChange, class: `${column ? "column" : "row"} gap-none`, children: items.map((e) => {
+    return (_jsx(Card, { kind: "accent", manner: "major", padding: 0, overflow: "hidden", role: "radiogroup", disabled: !onChange, className: `${column ? "column" : "row"} gap-none`, children: items.map((e, i) => {
             var _a, _b;
-            return (_jsxs(Button, { ariaLabel: (_b = (_a = e.ariaLabel) !== null && _a !== void 0 ? _a : e.label) !== null && _b !== void 0 ? _b : null, manner: e.value === value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), class: `sharp ${column ? "main-between gap-double" : ""}`, children: [_jsxs("div", { class: "row gap-half", children: [typeof e.icon === "function" ? e.icon({}) : e.icon, e.label && _jsx("span", { children: e.label })] }), column &&
-                        (e.value === value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 }))] }));
+            return (_jsxs(Button, { ariaLabel: (_b = (_a = e.ariaLabel) !== null && _a !== void 0 ? _a : e.label) !== null && _b !== void 0 ? _b : null, manner: e.value === value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), className: `sharp ${column ? "main-between gap-double" : ""}`, children: [_jsxs("div", { className: "row gap-half", children: [_jsx(Icon, { icon: Icon }), e.label && _jsx("span", { children: e.label })] }), column &&
+                        (e.value === value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 }))] }, i));
         }) }));
 }

package/dist/ui/components/button/icon_button.d.ts

@@ -1,21 +1,22 @@
-import { Component } from "preact";
+import React, { Component } from "react";
 import { ActionElbeProps, ElbeProps, type ElbeChild, type ElbeColorKinds, type ElbeColorManners } from "../../..";
 export type IconChild = ElbeChild | ((_: any) => ElbeChild);
 export type IconButtonProps = {
     icon?: IconChild;
     kind?: ElbeColorKinds;
     transparent?: boolean;
-    onTap?: (e: Event) => void;
+    onTap?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 } & ActionElbeProps;
 export declare class IconButton extends Component<IconButtonProps & {
     manner?: ElbeColorManners;
 }> {
-    static major: (p: IconButtonProps) => import("preact").JSX.Element;
-    static minor: (p: IconButtonProps) => import("preact").JSX.Element;
-    static flat: (p: IconButtonProps) => import("preact").JSX.Element;
-    static plain: (p: IconButtonProps) => import("preact").JSX.Element;
-    render(): import("preact").JSX.Element;
+    static major: (p: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    static minor: (p: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    static flat: (p: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    static plain: (p: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export declare function Icon(p: {
     icon: IconChild;
-} & ElbeProps): import("preact").JSX.Element | null;
+} & ElbeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function _renderIcon(icon: IconChild | undefined): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/ui/components/button/icon_button.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { Component } from "preact";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Component } from "react";
 import { applyProps, } from "../../..";
 export class IconButton extends Component {
     render() {
@@ -33,7 +33,7 @@ function _btn(_a, manner) {
         manner,
         !onTap && "disabled",
     ], {
-        backgroundColor: elbe.transparent ? "transparent" : null,
+        backgroundColor: elbe.transparent ? "transparent" : undefined,
         border: "none",
         borderRadius: "3rem",
         height: "3rem",
@@ -47,5 +47,17 @@ export function Icon(p) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-    }), { children: typeof p.icon === "function" ? p.icon({}) : p.icon })));
+    }), { children: _renderIcon(p.icon) })));
+}
+export function _renderIcon(icon) {
+    if (!icon)
+        return null;
+    if (typeof icon === "function")
+        return icon({});
+    // check if it's a valid React element
+    if (React.isValidElement(icon))
+        return icon;
+    // return it as a component
+    const Icon = icon;
+    return _jsx(Icon, {});
 }

package/dist/ui/components/button/toggle_button.d.ts

@@ -1,10 +1,10 @@
 import type { ElbeColorKinds } from "../../theme/colors";
 import { ActionElbeProps } from "../base/box";
-import type { IconChild } from "./icon_button";
+import { type IconChild } from "./icon_button";
 export declare function ToggleButton({ value, onChange, label, icon, kind, ...elbe }: {
     value: boolean;
     onChange?: (v: boolean) => void;
     kind?: ElbeColorKinds;
     label: string;
     icon?: IconChild;
-} & ActionElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/button/toggle_button.js

@@ -9,18 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
 import { useThemeConfig } from "../../theme/theme_context";
 import { applyProps } from "../base/box";
 import { Padded } from "../base/padded";
 import { Spaced } from "../layout/spaced";
 import { Button } from "./button";
+import { Icon } from "./icon_button";
 export function ToggleButton(_a) {
+    var _b;
     var { value, onChange, label, icon, kind } = _a, elbe = __rest(_a, ["value", "onChange", "label", "icon", "kind"]);
     const tConfig = useThemeConfig();
-    return (_jsxs(Button, Object.assign({ manner: value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)) }, applyProps("toggle_button", elbe, "main-between"), { children: [_jsxs("div", { class: "row gap-none", children: [typeof icon === "function" ? icon({}) : icon, icon && _jsx(Spaced, { width: 0.5 }), label && _jsx("span", { children: label })] }), _jsx("div", { style: {
-                    transition: tConfig.reducedMotion ? null : "width 0.2s ease-in-out",
+    return (_jsxs(Button, Object.assign({ manner: value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)), ariaLabel: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label }, applyProps("toggle_button", elbe, "main-between"), { children: [_jsxs("div", { className: "row gap-none", children: [_jsx(Icon, { icon: icon }), icon && _jsx(Spaced, { width: 0.5 }), label && _jsx("span", { children: label })] }), _jsx("div", { style: {
+                    transition: tConfig.reducedMotion
+                        ? undefined
+                        : "width 0.2s ease-in-out",
                     width: value ? "2.5rem" : "0rem",
-                }, children: value && (_jsx(Padded, { class: "centered", left: 1, children: _jsx(CheckIcon, {}) })) })] })));
+                }, children: value && (_jsx(Padded, { className: "centered", left: 1, children: _jsx(CheckIcon, {}) })) })] })));
 }

package/dist/ui/components/dev/todo.d.ts

@@ -1,18 +1,18 @@
 import { ElbeProps } from "../base/box";
 export declare namespace ToDo {
-    function Overlay({}: {}): import("preact").JSX.Element | null;
+    function Overlay({}: {}): import("react/jsx-runtime").JSX.Element | null;
     function Inline({ msg, ...elbe }: {
         msg: string;
         width?: number;
         height?: number;
-    } & ElbeProps): import("preact").JSX.Element;
+    } & ElbeProps): import("react/jsx-runtime").JSX.Element;
     function Block({ msg, width, height, ...elbe }: {
         msg: string;
         width?: number;
         height?: number;
-    } & ElbeProps): import("preact").JSX.Element;
+    } & ElbeProps): import("react/jsx-runtime").JSX.Element;
     function Placeholder({ width, height, ...elbe }: {
         width?: number;
         height?: number;
-    } & ElbeProps): import("preact").JSX.Element;
+    } & ElbeProps): import("react/jsx-runtime").JSX.Element;
 }

package/dist/ui/components/dev/todo.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "react";
 import { applyProps } from "../base/box";
 const _toDoStyle = {
     padding: ".3rem .5rem",

package/dist/ui/components/dialog.d.ts

@@ -1,8 +1,9 @@
 import type { ElbeChildren } from "../util/types";
-export declare function ElbeDialog({ title, open, onClose, children, _style, }: {
-    _style?: string;
+export declare function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, }: {
+    _style?: React.CSSProperties;
     title: string;
     open: boolean;
     onClose: () => void;
     children: ElbeChildren;
-}): import("preact").JSX.Element;
+    barrierDismissible?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/dialog.js

@@ -1,11 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
+import { useEffect } from "react";
 import { IconButton } from "./button/icon_button";
 import { Spaced } from "./layout/spaced";
-export function ElbeDialog({ title, open, onClose, children, _style, }) {
-    return (_jsx("dialog", { onClick: (e) => e.stopPropagation(), open: open, style: "text-align: start" + (_style !== null && _style !== void 0 ? _style : ""), children: _jsxs("div", { class: "primary card plain-opaque padding-none", style: "max-width: 40rem; min-width: 10rem", children: [_jsxs("div", { class: "row cross-center padded main-between", children: [_jsx("div", { class: "body-l b", children: title }), _jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
+export function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, }) {
+    useEffect(() => {
+        if (open) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [open]);
+    return (_jsx("dialog", { onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (barrierDismissible)
+                onClose();
+        }, open: open, style: Object.assign({ textAlign: "start" }, (_style !== null && _style !== void 0 ? _style : {})), children: _jsxs("div", { className: "elbe_dialog_base primary card plain-opaque padding-none", style: { maxWidth: "40rem", minWidth: "10rem" }, children: [_jsxs("div", { className: "row cross-center padded main-between", children: [_jsx("div", { className: "body-l b", children: title }), _jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 onClose();
-                            } })] }), _jsx(Spaced, { amount: 0.5 }), _jsx("div", { class: "padded", style: "max-height: 80vh; overflow: auto", children: children })] }) }));
+                            } })] }), _jsx(Spaced, { amount: 0.5 }), _jsx("div", { className: "padded", style: { maxHeight: "80vh", overflow: "auto" }, children: children })] }) }));
 }

package/dist/ui/components/error_view.d.ts

@@ -3,7 +3,7 @@ export declare function ErrorView({ error, retry, debug, }: {
     error: any;
     retry?: () => any;
     debug?: boolean;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function PrettyErrorView({ error, retry, labels, }: {
     error: ElbeError;
     retry?: () => any;
@@ -12,4 +12,4 @@ export declare function PrettyErrorView({ error, retry, labels, }: {
         home?: L10nInlinePlain;
         details: L10nInlinePlain;
     };
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/error_view.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useSignal } from "@preact/signals";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { icons } from "lucide-react";
-import { useLocation } from "wouter";
-import { ElbeDialog, Icon, Icons, toElbeError, } from "../..";
+import { useState } from "react";
+import { ElbeDialog, Icon, Icons, toElbeError, Wouter, } from "../..";
 import { _maybeL10n } from "../util/l10n/_l10n_util";
 export function ErrorView({ error, retry, debug, }) {
+    var _a;
+    const l10n = _maybeL10n();
     const apiError = toElbeError(error);
-    return !debug ? (_jsx(PrettyErrorView, { error: apiError, retry: retry })) : (_jsxs("div", { class: "column padded card inverse cross-stretch", children: [_jsxs("h3", { style: "margin: 0", children: ["ERROR: ", apiError.code] }), _jsx("p", { children: apiError.message }), _jsx("pre", { children: JSON.stringify(apiError, null, 2) })] }));
+    const fallback = typeof apiError.message === "string"
+        ? apiError.message
+        : "An error occurred";
+    return !debug ? (_jsx(PrettyErrorView, { error: apiError, retry: retry })) : (_jsxs("div", { className: "column padded card inverse cross-stretch", children: [_jsxs("h3", { style: { margin: 0 }, children: ["ERROR: ", apiError.code] }), _jsx("p", { children: (_a = l10n === null || l10n === void 0 ? void 0 : l10n.inline(apiError.message)) !== null && _a !== void 0 ? _a : fallback }), _jsx("pre", { children: JSON.stringify(apiError, null, 2) })] }));
 }
 export function PrettyErrorView({ error, retry, labels = {
     retry: {
@@ -36,7 +40,7 @@ export function PrettyErrorView({ error, retry, labels = {
 }, }) {
     var _a, _b, _c, _d, _e, _f;
     const l10n = _maybeL10n();
-    const openSig = useSignal(false);
-    const [loc, navigate] = useLocation();
-    return (_jsxs("div", { class: "column padded cross-center", style: "margin: 1rem 0", children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: "margin: 0", children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { class: "pointer", onClick: () => (openSig.value = true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { class: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { class: "action", onClick: () => navigate("/", { replace: true }), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(ElbeDialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: openSig.value, onClose: () => (openSig.value = false), children: _jsx("pre", { class: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
+    const [open, setOpen] = useState(false);
+    const [loc, navigate] = Wouter.useLocation();
+    return (_jsxs("div", { className: "column padded cross-center", style: { margin: "1rem 0" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: { margin: 0 }, children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { className: "pointer", onClick: () => setOpen(true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { className: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { className: "action", onClick: () => navigate("/", { replace: true }), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(ElbeDialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { className: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
 }

package/dist/ui/components/footer.d.ts

@@ -1,4 +1,4 @@
-import React from "preact/compat";
+import React from "react";
 import { IconChild } from "../..";
 export type FooterLink = {
     label: string;
@@ -12,8 +12,8 @@ export declare function Footer({ left, right, copyright, version, legal, marginT
     version?: string;
     legal?: FooterLink;
     marginTop?: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function _WrittenIn({ city, href, }: {
     city?: string;
     href?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/footer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HeartIcon } from "lucide-react";
 import { Card, Column, FlexSpace, Link, Row, useLayoutMode, } from "../..";
 export function Footer({ left, right, copyright, version, legal, marginTop, }) {
@@ -7,10 +7,10 @@ export function Footer({ left, right, copyright, version, legal, marginTop, }) {
             borderLeft: "none",
             borderRight: "none",
             borderBottom: "none",
-            borderTopLeftRadius: layoutMode.isWide ? "var(--g-radius)" : null,
+            borderTopLeftRadius: layoutMode.isWide ? "var(--g-radius)" : undefined,
             color: "color-mix(in srgb, var(--c-context-front) 60%, transparent)",
             marginTop: `${marginTop !== null && marginTop !== void 0 ? marginTop : 0}rem`,
-        }, children: _jsxs(Column, { gap: 0.5, children: [(left || right) && (_jsxs(Row, { main: "space-between", cross: "start", children: [left && (_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) }))] })), (left || right) && (copyright || version || legal) && (_jsx("hr", { style: { opacity: 0.7 } })), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
+        }, children: _jsxs(Column, { gap: 0.5, children: [(left || right) && (_jsxs(Row, { main: "space-between", cross: "start", children: [left && (_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) }))] })), (left || right) && (copyright || version || legal) && (_jsx("hr", { style: { opacity: 0.7 } })), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
                             (typeof copyright === "string" ? _jsx("b", { children: copyright }) : copyright), version && _jsx(_Version, { version: version }), _jsx(FlexSpace, {}), legal && _jsx(_Link, Object.assign({}, legal))] }))] }) }));
 }
 function _Version({ version }) {

package/dist/ui/components/input/checkbox.d.ts

@@ -1,3 +1,3 @@
 import { BooleanInputProps } from "../../..";
 import { ActionElbeProps } from "../base/box";
-export declare function Checkbox(p: BooleanInputProps & ActionElbeProps): import("preact").JSX.Element;
+export declare function Checkbox(p: BooleanInputProps & ActionElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/input/checkbox.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { _InputSpacer, useThemeConfig } from "../../..";
 import { applyProps } from "../base/box";
 export function Checkbox(p) {
     const tConfig = useThemeConfig();
-    return _InputSpacer(p, _jsxs("div", { class: `row ${p.onChange ? "" : "disabled"}`, style: {
+    return _InputSpacer(p, _jsxs("div", { className: `row ${p.onChange ? "" : "disabled"}`, style: {
             gap: ".75rem",
             filter: p.onChange ? "" : "grayscale(1)",
             opacity: p.onChange ? "" : "0.5",
         }, children: [_jsx("input", Object.assign({ type: "checkbox" }, applyProps("checkbox", Object.assign({ role: "checkbox" }, p), p.value ? ["accent major"] : "accent minor", {
-                background: p.value ? null : "transparent",
-                transition: tConfig.reducedMotion ? "none" : null,
-            }), { disabled: !p.onChange, checked: p.value, onClick: (e) => e.stopPropagation(), onChange: (e) => { var _a; return (_a = p.onChange) === null || _a === void 0 ? void 0 : _a.call(p, e.currentTarget.checked); } })), p.label && _jsx("div", { style: "margin-top: -.25rem", children: p.label })] }));
+                background: p.value ? undefined : "transparent",
+                transition: tConfig.reducedMotion ? "none" : undefined,
+            }), { disabled: !p.onChange, checked: p.value, onClick: (e) => e.stopPropagation(), onChange: (e) => { var _a; return (_a = p.onChange) === null || _a === void 0 ? void 0 : _a.call(p, e.currentTarget.checked); } })), p.label && _jsx("div", { style: { marginTop: "-.25rem" }, children: p.label })] }));
 }

package/dist/ui/components/input/range.d.ts

@@ -5,4 +5,4 @@ export declare function Range({ value, onChange, min, max, step, ...elbe }: {
     step?: number;
     max?: number;
     onChange?: ((value: number) => void) | null;
-} & ActionElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/input/range.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "../../theme/theme_context";
 import { _ElbeErr } from "../../util/error_view";
 import { applyProps } from "../base/box";

package/dist/ui/components/input/select.d.ts

@@ -7,4 +7,4 @@ export declare function Select({ options, value, label, onChange, ...elbe }: {
     value?: string;
     label?: string;
     onChange: (value: string) => any;
-} & ActionElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/input/select.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { applyProps } from "../base/box";
 export function Select(_a) {
     var { options, value, label, onChange } = _a, elbe = __rest(_a, ["options", "value", "label", "onChange"]);
-    return (_jsx("select", Object.assign({}, applyProps("select", elbe), { value: value, label: label, role: "combobox", onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
+    return (_jsx("select", Object.assign({}, applyProps("select", elbe), { value: value, role: "combobox", onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
 }

package/dist/ui/components/input/switch.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "preact/jsx-runtime";
+import { JSX } from "react/jsx-runtime";
 import { ActionElbeProps } from "../../..";
 export type BooleanInputProps = {
     value: boolean;

package/dist/ui/components/input/switch.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckIcon, XIcon } from "lucide-react";
 import { applyProps } from "../../..";
 import { useThemeConfig } from "../../theme/theme_context";

package/dist/ui/components/input/text/input_field.d.ts

@@ -1,4 +1,4 @@
-import React from "preact/compat";
+import React from "react";
 import { ElbeProps } from "../../base/box";
 import { SLInputFieldProps } from "./single_line";
 export type InputFieldProps = {
@@ -17,12 +17,12 @@ export type InputFieldProps = {
 export declare class Field<T extends InputFieldProps> extends React.Component<T & {
     type: "text" | "number" | "password" | "date" | "time" | "email" | "area";
 }> {
-    static text: (p: SLInputFieldProps) => React.JSX.Element;
-    static number: (p: SLInputFieldProps) => React.JSX.Element;
-    static password: (p: SLInputFieldProps) => React.JSX.Element;
-    static date: (p: SLInputFieldProps) => React.JSX.Element;
-    static time: (p: SLInputFieldProps) => React.JSX.Element;
-    static email: (p: SLInputFieldProps) => React.JSX.Element;
-    static multiLine: (p: InputFieldProps) => React.JSX.Element;
-    render(): React.JSX.Element;
+    static text: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    static number: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    static password: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    static date: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    static time: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    static email: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    static multiLine: (p: InputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }