elbe-ui 1.0.8 → 2.0.1

package/dist/index.js

@@ -4,14 +4,17 @@ import "./elbe.css";
 export * as Wouter from "wouter";
 export * as wouter_hash from "wouter/use-hash-location";
 // exports
+export * from "./ui/util/root";
 export * from "./api/api_worker";
 export * from "./api/error";
 export * from "./api/errors";
 export * from "./bit/bit";
-export * from "./ui/util/confirm_dialog";
+export * from "./ui/components/dialog/dialog";
+export * from "./ui/components/dialog/dialog_ctx";
 export * from "./ui/util/ctx_toolbar";
 export * from "./ui/util/l10n/l10n";
-export * from "./ui/util/toast";
+export * from "./ui/util/toast/toast_ctx";
+export * from "./ui/util/toast/toast_legacy";
 export * from "./ui/util/types";
 export * from "./ui/util/util";
 export * from "./ui/components/base/box";
@@ -23,8 +26,6 @@ export * from "./ui/components/button/choose_button";
 export * from "./ui/components/button/icon_button";
 export * from "./ui/components/button/toggle_button";
 export * from "./ui/components/layout/alignment";
-export * from "./ui/components/layout/app_base";
-export * from "./ui/components/layout/ctx_app_base";
 export * from "./ui/components/layout/flex";
 export * from "./ui/components/layout/header";
 export * from "./ui/components/layout/page";
@@ -37,15 +38,16 @@ export * from "./ui/components/input/switch";
 export * from "./ui/components/input/text/input_field";
 export * from "./ui/components/badge";
 export * from "./ui/components/banner";
-export * from "./ui/components/dialog";
+export * from "./ui/components/dialog/dialog";
 export * from "./ui/components/error_view";
 export * from "./ui/components/footer";
 export * from "./ui/components/link";
 export * from "./ui/components/progress_bar";
 export * from "./ui/components/spinner";
 export * from "./ui/components/text";
+export * from "./ui/app/app";
 export * from "./ui/components/dev/todo";
-export * from "./ui/theme/seed";
+export * from "./ui/theme/subthemes/color/colors/colors";
 export * from "./ui/theme/theme";
 export * from "./ui/theme/theme_context";
 function None({}) {

package/dist/ui/app/app.d.ts

@@ -0,0 +1,13 @@
+import { ElbeRoute, ElbeThemeConfig, ElbeThemeContext, ElbeThemeData } from "../..";
+import { AppConfig } from "./app_ctxt";
+type _AppThemeConfig = {
+    themeContext: ElbeThemeContext;
+    themeSeed?: Partial<Parameters<_AppThemeConfig["themeContext"]["WithTheme"]>[0]["seed"]>;
+    themeSelector?: (config: ElbeThemeConfig<ElbeThemeData>) => Partial<ElbeThemeConfig<ElbeThemeData>>;
+};
+type _AppProps = AppConfig & _AppThemeConfig;
+type AppProps = _AppProps & {
+    children?: ElbeRoute | ElbeRoute[];
+};
+export declare function ElbeApp(p: AppProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/app/app.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, DialogsProvider, isMenuRoute, omit, ToastProvider, Wouter, } from "../..";
+import { Menu } from "../components/layout/menu";
+import { AppContext } from "./app_ctxt";
+export function ElbeApp(p) {
+    var _a;
+    useMemo(() => {
+        if (p.title)
+            document.title = p.title;
+    }, [p.title]);
+    const trueBase = useMemo(() => {
+        var _a, _b;
+        const path = (_b = (_a = p.routerConfig) === null || _a === void 0 ? void 0 : _a.basePath) !== null && _b !== void 0 ? _b : "/";
+        return path === "/" ? undefined : path;
+    }, [(_a = p.routerConfig) === null || _a === void 0 ? void 0 : _a.basePath]);
+    return (_jsx(p.themeContext.WithTheme, { seed: p.themeSeed, children: _jsx(Wouter.Router, { base: trueBase, children: _jsx(_App, { config: omit(p, "children", "themeContext", "themeSeed", "themeSelector"), themeContext: p.themeContext, themeSelector: p.themeSelector, children: p.children }) }) }));
+}
+function _initialLocation() {
+    return (window.location.pathname + window.location.search + window.location.hash);
+}
+function _App(p) {
+    const menuItems = useMemo(() => {
+        return _extractMenuItems(p.children);
+    }, [p.children]);
+    const [location, navigate] = Wouter.useLocation();
+    const [history, setHistory] = useState([_initialLocation()]);
+    const [menuOpen, setMenuOpen] = useState(false);
+    /*const themeSelected = p.themeContext
+      .useTheme()
+      .useWith(p.themeSelector ?? (() => ({})), [p.config, p.themeSelector]);*/
+    return (_jsx(AppContext.Provider, { value: {
+            appConfig: p.config,
+            _appThemeContext: p.themeContext,
+            router: {
+                goBack: (steps = 1) => {
+                    if (history.length === 0)
+                        return;
+                    const targetIndex = Math.max(0, history.length - 1 - steps);
+                    const target = history[targetIndex];
+                    setHistory((h) => h.slice(0, targetIndex + 1));
+                    navigate(target, { replace: true });
+                },
+                go: (p, replace) => {
+                    setHistory((h) => {
+                        if (replace === "all")
+                            return [p];
+                        const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
+                        if (repl === 0)
+                            return [...h, p];
+                        return [...h.slice(0, -repl), p];
+                    });
+                    navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
+                },
+                history: history,
+                location: location,
+            },
+            menu: menuItems.length === 0
+                ? undefined
+                : {
+                    isOpen: menuOpen,
+                    setOpen: (s) => setMenuOpen(s),
+                },
+        }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
+                        display: "flex",
+                        width: "100%",
+                        minHeight: "100vh",
+                    }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: p.children }) })] }) }) }) }));
+}
+function _extractMenuItems(children) {
+    if (!children)
+        return [];
+    const childs = Array.isArray(children) ? children : [children];
+    const items = [];
+    for (const child of childs) {
+        if (!isMenuRoute(child))
+            continue;
+        items.push(child.props);
+    }
+    return items;
+}

package/dist/ui/app/app_ctxt.d.ts

@@ -0,0 +1,35 @@
+import { HeaderLogos } from "../components/layout/header";
+import { ElbeThemeContext } from "../theme/theme_context";
+import { ElbeChild, ElbeChildren, int } from "../util/types";
+export type AppConfig = {
+    title?: string;
+    icons?: HeaderLogos;
+    globalActions?: ElbeChild[];
+    footer?: ElbeChildren | null;
+    routerConfig?: {
+        basePath?: string;
+    };
+};
+type _MenuState = {
+    isOpen: boolean;
+    setOpen: (s: boolean) => void;
+};
+type _RouterState = {
+    go: (path: string, replace?: int | "all") => void;
+    goBack: (steps?: number) => void;
+    history: string[];
+    location: string;
+};
+export interface AppState {
+    appConfig: AppConfig;
+    router: _RouterState;
+    menu?: _MenuState;
+    /**
+     * @private this field is only to be used within elbe components.
+     */
+    _appThemeContext: ElbeThemeContext;
+}
+export declare const AppContext: import("react").Context<AppState | null>;
+export declare function useApp(): AppState;
+export declare function useMaybeApp(): AppState | null;
+export {};

package/dist/ui/app/app_ctxt.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import { throwError, tryOrNull } from "../util/util";
+export const AppContext = createContext(null);
+export function useApp() {
+    var _a;
+    return ((_a = tryOrNull(() => useContext(AppContext))) !== null && _a !== void 0 ? _a : throwError("useApp must be used within an ElbeApp context. try using useMaybeApp()"));
+}
+export function useMaybeApp() {
+    return tryOrNull(() => useContext(AppContext));
+}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ElbeColorKinds } from "../theme/colors";
+import { ColorSelection } from "../theme/subthemes/color/colors/colors";
 import type { ElbeChild, ElbeChildren } from "../util/types";
 import type { ElbeProps } from "./base/box";
 export type BadgeProps = {
@@ -11,10 +11,10 @@ export type BadgeProps = {
 } & ElbeProps;
 export declare function TestBadge(p: BadgeProps): Badge;
 export declare class Badge extends React.Component<BadgeProps & {
-    kind: ElbeColorKinds;
+    kind: ColorSelection.Kinds;
 }> {
     constructor(props: BadgeProps & {
-        kind: ElbeColorKinds;
+        kind: ColorSelection.Kinds;
     });
     static accent(p: BadgeProps): import("react/jsx-runtime").JSX.Element;
     static error(p: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/badge.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { useApp } from "../app/app_ctxt";
 export function TestBadge(p) {
     return new Badge(Object.assign(Object.assign({}, p), { kind: "accent" }));
 }
@@ -23,10 +24,20 @@ export class Badge extends React.Component {
         return _jsx(Badge, Object.assign({}, p, { kind: "info" }));
     }
     render() {
-        var _a, _b;
-        return (_jsxs("div", { style: {
-                position: "relative",
-                display: "inline-block",
-            }, children: [this.props.child, this.props.children, _jsx("div", { className: `b ${this.props.kind} major ${(_a = this.props.className) !== null && _a !== void 0 ? _a : ""}`, style: Object.assign({ position: "absolute", top: "-0.25rem", right: "-0.25rem", minWidth: "1.5rem", minHeight: "1.5rem", padding: "0rem .4rem", borderRadius: "3rem", fontWeight: "bold", display: "flex", justifyContent: "center", alignItems: "center", visibility: this.props.hidden ? "hidden" : "visible" }, this.props.style), children: (_b = this.props.label) !== null && _b !== void 0 ? _b : this.props.count })] }));
+        return _jsx(_Badge, Object.assign({}, this.props));
     }
 }
+function _Badge(p) {
+    var _a;
+    const { _appThemeContext } = useApp();
+    const theme = _appThemeContext.useTheme().useWith(({ color }) => {
+        var _a;
+        return ({
+            color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { kind: (_a = p.kind) !== null && _a !== void 0 ? _a : "accent", manner: "major" }) }),
+        });
+    }, [p.kind]);
+    return (_jsxs("div", { style: {
+            position: "relative",
+            display: "inline-block",
+        }, children: [p.child, p.children, _jsx("div", { style: Object.assign({ position: "absolute", top: "-0.25rem", right: "-0.25rem", minWidth: "1.5rem", minHeight: "1.5rem", padding: "0rem .4rem", borderRadius: "3rem", fontWeight: "bold", display: "flex", justifyContent: "center", alignItems: "center", visibility: p.hidden ? "hidden" : "visible", backgroundColor: theme.theme.color.currentColor.back.asCss(), color: theme.theme.color.currentColor.front.asCss() }, p.style), children: (_a = p.label) !== null && _a !== void 0 ? _a : p.count })] }));
+}

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

@@ -1,10 +1,10 @@
-import { ElbeAlertKinds, IconChild } from "../..";
+import { ColorSelection, IconChild } from "../..";
 export declare function KindAlertIcon({ kind, size, }: {
-    kind: ElbeAlertKinds;
+    kind: ColorSelection.KindsAlert;
     size?: "body-s" | "body-m" | "body-l";
 }): import("react/jsx-runtime").JSX.Element;
 export declare function Banner({ kind, manner, title, onDismiss, dismissIcon, children, }: {
-    kind: ElbeAlertKinds;
+    kind: ColorSelection.KindsAlert;
     manner?: "major" | "minor";
     title?: string;
     onDismiss?: () => void;

package/dist/ui/components/banner.js

@@ -19,5 +19,5 @@ export function KindAlertIcon({ kind, size = "body-m", }) {
     return _jsx(Icon, { size: `${scale * 1.5}rem` });
 }
 export function Banner({ kind, manner = "major", title, onDismiss, dismissIcon = XIcon, children, }) {
-    return (_jsx(Card, { kind: kind, manner: manner, padding: 0, children: _jsxs(Row, { cross: "start", gap: 0, children: [_jsx(Align, { size: 3, children: _jsx(KindAlertIcon, { kind: kind }) }), _jsxs(Column, { gap: 0.5, className: "flex-1", style: { padding: ".9rem 0", paddingRight: onDismiss ? "0" : "1rem" }, children: [title && _jsx(Text, { bold: true, v: title }), children] }), onDismiss && (_jsx(IconButton, { manner: manner, kind: kind, transparent: manner === "minor", ariaLabel: "close", icon: dismissIcon, onTap: onDismiss }))] }) }));
+    return (_jsx(Card, { kind: kind, manner: manner, padding: 0, children: _jsxs(Row, { cross: "start", gap: 0, children: [_jsx(Align, { size: 3, children: _jsx(KindAlertIcon, { kind: kind }) }), _jsxs(Column, { gap: 0.5, flex: true, style: { padding: ".9rem 0", paddingRight: onDismiss ? "0" : "1rem" }, children: [title && _jsx(Text, { bold: true, v: title }), children] }), onDismiss && (_jsx(IconButton, { manner: manner, kind: kind, transparent: manner === "minor", ariaLabel: "close", icon: dismissIcon, onTap: onDismiss }))] }) }));
 }

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

@@ -1,54 +1,101 @@
 import { Component } from "react";
-import { ElbeChildren, ElbeColorModes, ElbeColorSchemes } from "../../..";
+import { ColorSelection, ElbeChildren } from "../../..";
 import { AriaRoles } from "./roles";
+export declare const styleColorFromContext: React.CSSProperties;
+export declare const styleBorderFromContext: React.CSSProperties;
 export type ElbeProps = {
     id?: string;
-    className?: string;
-    style?: React.CSSProperties;
     tooltip?: string;
     flex?: boolean | number;
     typeLabel?: string;
     ariaLabel?: string | null;
     role?: AriaRoles | null;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    onKeyUp?: (e: React.KeyboardEvent) => void;
-    onClick?: (e: React.MouseEvent) => void;
-    onContextMenu?: (e: React.MouseEvent) => void;
-    onDoubleClick?: (e: React.MouseEvent) => void;
-    onMouseDown?: (e: React.MouseEvent) => void;
-    onMouseUp?: (e: React.MouseEvent) => void;
-    onMouseEnter?: (e: React.MouseEvent) => void;
-    onMouseLeave?: (e: React.MouseEvent) => void;
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    tabIndex?: number;
-    autoFocus?: boolean;
+    style?: React.CSSProperties;
+    className?: string | string[];
+    native?: {
+        onKeyDown?: (e: React.KeyboardEvent) => void;
+        onKeyUp?: (e: React.KeyboardEvent) => void;
+        onClick?: (e: React.MouseEvent) => void;
+        onContextMenu?: (e: React.MouseEvent) => void;
+        onDoubleClick?: (e: React.MouseEvent) => void;
+        onMouseDown?: (e: React.MouseEvent) => void;
+        onMouseUp?: (e: React.MouseEvent) => void;
+        onMouseEnter?: (e: React.MouseEvent) => void;
+        onMouseLeave?: (e: React.MouseEvent) => void;
+        onFocus?: (e: React.FocusEvent) => void;
+        onBlur?: (e: React.FocusEvent) => void;
+        tabIndex?: number;
+        autoFocus?: boolean;
+    };
 };
-export type ActionElbeProps = ElbeProps & {
+export type ElbeActionProps = ElbeProps & {
     ariaLabel: string | null;
 };
+export type ElbeStyleProps = {
+    style?: React.CSSProperties;
+};
+export type ElbeChildrenProps = {
+    children?: ElbeChildren;
+};
 export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: string | null | (string | false | null | undefined)[], style?: React.CSSProperties): {
     [key: string]: any;
 };
-export type ElbeBoxProps = {
-    mode?: ElbeColorModes;
+export type ElbeBoxProps = ElbeProps & ElbeStyleProps & ElbeChildrenProps & {
+    mode?: ColorSelection.Modes;
+    kind?: ColorSelection.Kinds;
+    manner?: ColorSelection.Manners;
+    state?: ColorSelection.States;
     padding?: number;
     margin?: number;
-    children: ElbeChildren;
-} & ElbeProps;
-export declare class Box extends Component<ElbeBoxProps & {
-    scheme: ElbeColorSchemes;
+    frosted?: boolean;
+    elevated?: boolean;
+};
+export declare class Box extends Component<ElbeBoxProps & ElbeStyleProps & {
+    scheme?: ColorSelection.Schemes;
 }> {
-    static primary: (p: ElbeBoxProps) => import("react").DetailedReactHTMLElement<{
-        [key: string]: any;
-    }, HTMLElement>;
-    static secondary: (p: ElbeBoxProps) => import("react").DetailedReactHTMLElement<{
-        [key: string]: any;
-    }, HTMLElement>;
-    static inverse: (p: ElbeBoxProps) => import("react").DetailedReactHTMLElement<{
-        [key: string]: any;
-    }, HTMLElement>;
-    render(): import("react").DetailedReactHTMLElement<{
-        [key: string]: any;
-    }, HTMLElement>;
+    static primary: (p: ElbeBoxProps) => import("react").CElement<ElbeProps & ElbeStyleProps & ElbeChildrenProps & {
+        mode?: ColorSelection.Modes;
+        kind?: ColorSelection.Kinds;
+        manner?: ColorSelection.Manners;
+        state?: ColorSelection.States;
+        padding?: number;
+        margin?: number;
+        frosted?: boolean;
+        elevated?: boolean;
+    } & {
+        scheme?: ColorSelection.Schemes;
+    }, Box>;
+    static secondary: (p: ElbeBoxProps) => import("react").CElement<ElbeProps & ElbeStyleProps & ElbeChildrenProps & {
+        mode?: ColorSelection.Modes;
+        kind?: ColorSelection.Kinds;
+        manner?: ColorSelection.Manners;
+        state?: ColorSelection.States;
+        padding?: number;
+        margin?: number;
+        frosted?: boolean;
+        elevated?: boolean;
+    } & {
+        scheme?: ColorSelection.Schemes;
+    }, Box>;
+    static inverse: (p: ElbeBoxProps) => import("react").CElement<ElbeProps & ElbeStyleProps & ElbeChildrenProps & {
+        mode?: ColorSelection.Modes;
+        kind?: ColorSelection.Kinds;
+        manner?: ColorSelection.Manners;
+        state?: ColorSelection.States;
+        padding?: number;
+        margin?: number;
+        frosted?: boolean;
+        elevated?: boolean;
+    } & {
+        scheme?: ColorSelection.Schemes;
+    }, Box>;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
+/**
+ * @private
+ * @param p
+ * @returns
+ */
+export declare function _Box(p: ElbeBoxProps & {
+    scheme?: ColorSelection.Schemes;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -9,23 +9,71 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component, createElement } from "react";
+import { useApp } from "../../app/app_ctxt";
+import { elevatedShadow } from "../../util/_util";
+export const styleColorFromContext = {
+    backgroundColor: "var(--elbe-context-color-back)",
+    color: "var(--elbe-context-color-front)",
+    borderColor: "var(--elbe-context-color-border)",
+};
+export const styleBorderFromContext = {
+    borderTopColor: "var(--elbe-context-color-border)",
+    borderRightColor: "var(--elbe-context-color-border)",
+    borderBottomColor: "var(--elbe-context-color-border)",
+    borderLeftColor: "var(--elbe-context-color-border)",
+    borderTopStyle: "solid",
+    borderRightStyle: "solid",
+    borderBottomStyle: "solid",
+    borderLeftStyle: "solid",
+    borderTopWidth: "var(--elbe-context-geometry-border-width)",
+    borderRightWidth: "var(--elbe-context-geometry-border-width)",
+    borderBottomWidth: "var(--elbe-context-geometry-border-width)",
+    borderLeftWidth: "var(--elbe-context-geometry-border-width)",
+    borderRadius: "var(--elbe-context-geometry-border-radius)",
+};
 export function applyProps(typeLabel, p, classes, style) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
+    const eNonNative = Object.assign(Object.assign({}, p), { native: undefined });
+    const eNative = (_a = p.native) !== null && _a !== void 0 ? _a : {};
     if (Array.isArray(classes)) {
         classes = classes.filter((c) => c).join(" ");
     }
-    const args = Object.assign(Object.assign({ id: p.id, onKeyDown: p.onKeyDown, onKeyUp: p.onKeyUp, onClick: p.onClick, onContextMenu: p.onContextMenu, onDoubleClick: p.onDoubleClick, onMouseDown: p.onMouseDown, onMouseUp: p.onMouseUp, onMouseEnter: p.onMouseEnter, onMouseLeave: p.onMouseLeave, onFocus: p.onFocus, onBlur: p.onBlur, tabIndex: p.tabIndex, autoFocus: p.autoFocus, role: (_a = p.role) !== null && _a !== void 0 ? _a : undefined, className: `${classes || ""} ${p.className || ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_b = p.style) !== null && _b !== void 0 ? _b : {})), (p.flex ? { flex: p.flex === true ? 1 : p.flex } : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {})), { ["aria-label"]: (_c = p.ariaLabel) !== null && _c !== void 0 ? _c : undefined, 
+    const args = Object.assign(Object.assign(Object.assign(Object.assign({ id: eNonNative.id }, eNative), { role: (_b = eNonNative.role) !== null && _b !== void 0 ? _b : undefined, className: `${classes || ""} ${(_c = eNonNative === null || eNonNative === void 0 ? void 0 : eNonNative.className) !== null && _c !== void 0 ? _c : ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_d = eNonNative === null || eNonNative === void 0 ? void 0 : eNonNative.style) !== null && _d !== void 0 ? _d : {})), (eNonNative.flex
+            ? { flex: eNonNative.flex === true ? 1 : eNonNative.flex }
+            : {})) }), (eNonNative.tooltip ? { ["data-tooltip"]: eNonNative.tooltip } : {})), { ["aria-label"]: (_e = eNonNative.ariaLabel) !== null && _e !== void 0 ? _e : undefined, 
         //@ts-ignore
-        ["data-type"]: (_d = p.typeLabel) !== null && _d !== void 0 ? _d : (!!typeLabel ? `elbe_${typeLabel}` : undefined) });
+        ["data-type"]: (_f = eNonNative.typeLabel) !== null && _f !== void 0 ? _f : (!!typeLabel ? `elbe_${typeLabel}` : undefined) });
     return args;
 }
 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 createElement("div", applyProps("box", elbe, [scheme, mode], Object.assign({ padding: `${padding}rem`, margin: `${margin}rem` }, elbe.style)), children);
+        return _jsx(_Box, Object.assign({}, this.props));
     }
 }
-Box.primary = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "primary" })).render();
-Box.secondary = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "secondary" })).render();
-Box.inverse = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "inverse" })).render();
+Box.primary = (p) => createElement(Box, Object.assign(Object.assign({}, p), { scheme: "primary" }));
+Box.secondary = (p) => createElement(Box, Object.assign(Object.assign({}, p), { scheme: "secondary" }));
+Box.inverse = (p) => createElement(Box, Object.assign(Object.assign({}, p), { scheme: "inverse" }));
+/**
+ * @private
+ * @param p
+ * @returns
+ */
+export function _Box(p) {
+    const { _appThemeContext } = useApp();
+    const usedTheme = _appThemeContext.useTheme().useWith(({ color }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return {
+            color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { scheme: (_b = (_a = p.scheme) !== null && _a !== void 0 ? _a : color.selection.scheme) !== null && _b !== void 0 ? _b : "primary", mode: (_d = (_c = p.mode) !== null && _c !== void 0 ? _c : color.selection.mode) !== null && _d !== void 0 ? _d : "light", kind: (_f = (_e = p.kind) !== null && _e !== void 0 ? _e : color.selection.kind) !== null && _f !== void 0 ? _f : "plain", manner: (_h = (_g = p.manner) !== null && _g !== void 0 ? _g : color.selection.manner) !== null && _h !== void 0 ? _h : "plain", state: (_k = (_j = p.state) !== null && _j !== void 0 ? _j : color.selection.state) !== null && _k !== void 0 ? _k : "neutral" }) }),
+        };
+    }, [p.scheme, p.mode, p.kind, p.manner, p.state]);
+    const { scheme, mode, padding, margin, frosted, elevated, children } = p, elbe = __rest(p, ["scheme", "mode", "padding", "margin", "frosted", "elevated", "children"]);
+    return (_jsx(_appThemeContext.WithTheme, { theme: usedTheme, children: _jsx("div", Object.assign({}, applyProps("box", elbe, [], Object.assign({ padding: `${padding}rem`, margin: `${margin}rem`, backgroundColor: frosted
+                ? usedTheme.theme.color.currentColor.back.withAlpha(0.4).asCss()
+                : usedTheme.theme.color.currentColor.back.asCss(), boxShadow: elevated
+                ? elevatedShadow(usedTheme.theme.color.isDark)
+                : undefined, backdropFilter: frosted ? "blur(.5rem)" : undefined, transition: usedTheme.theme.motion.reduced
+                ? undefined
+                : "background 0.3s ease" }, elbe.style)), { children: children })) }));
+}

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

@@ -1,19 +1,18 @@
-import { ElbeChildren, ElbeColorKinds, ElbeColorManners, ElbeColorModes, ElbeColorSchemes, ElbeProps } from "../../..";
-export declare const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
-export declare function Card({ mode, scheme, kind, manner, padding, margin, onTap, onLongTap, frosted, bordered, elevated, sharp, disabled, overflow, children, ...elbe }: {
-    mode?: ElbeColorModes;
-    scheme?: ElbeColorSchemes;
-    kind?: ElbeColorKinds;
-    manner?: ElbeColorManners;
+import { ColorSelection, ElbeChildren, ElbeChildrenProps, ElbeProps, ElbeStyleProps } from "../../..";
+export declare function Card({ mode, scheme, kind, manner, state, padding, margin, onTap, onLongTap, frosted, bordered, elevated, sharp, overflow, children, ...elbe }: {
+    mode?: ColorSelection.Modes;
+    scheme?: ColorSelection.Schemes;
+    kind?: ColorSelection.Kinds;
+    manner?: ColorSelection.Manners;
+    state?: ColorSelection.States;
     padding?: number;
     margin?: number;
-    onTap?: () => void;
-    onLongTap?: () => void;
+    onTap?: (() => void) | null;
+    onLongTap?: (() => void) | null;
     frosted?: boolean;
     elevated?: boolean;
     bordered?: boolean;
     sharp?: boolean;
-    disabled?: boolean;
-    overflow?: "hidden" | "scroll" | "auto";
+    overflow?: "auto" | "hidden" | "scroll";
     children?: ElbeChildren;
-} & ElbeProps): import("react/jsx-runtime").JSX.Element;
+} & ElbeProps & ElbeStyleProps & ElbeChildrenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,24 +10,46 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { applyProps, } from "../../..";
-export const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
+import { useMemo } from "react";
+import { _Box, } from "../../..";
+import { useApp } from "../../app/app_ctxt";
+import { css } from "../../util/_util";
+import { WithTooltip } from "../tooltip";
 export function Card(_a) {
-    var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, elevated, sharp, disabled, overflow, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "elevated", "sharp", "disabled", "overflow", "children"]);
-    return (_jsx("div", Object.assign({}, applyProps("card", elbe, [
-        "card",
-        mode,
-        scheme,
-        kind,
-        manner,
-        frosted && "frosted",
-        bordered && "bordered",
-        sharp && "sharp",
-        disabled && "disabled",
-    ], {
-        padding: `${padding}rem`,
-        margin: `${margin}rem`,
-        overflow: overflow,
-        boxShadow: elevated ? elevatedShadow : undefined,
-    }), { onClick: onTap, onContextMenu: onLongTap, children: children })));
+    var _b, _c;
+    var { mode, scheme, kind, manner, state, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, elevated, sharp, overflow, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "state", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "elevated", "sharp", "overflow", "children"]);
+    const { _appThemeContext } = useApp();
+    const { theme } = _appThemeContext.useTheme();
+    const isBordered = useMemo(() => {
+        return (bordered !== null && bordered !== void 0 ? bordered : false) || theme.color.isContrast;
+    }, [bordered, theme.color.isContrast]);
+    const styles = {
+        radius: sharp ? 0 : `${theme.geometry.radius}rem`,
+        borderStyle: isBordered ? "solid" : undefined,
+        borderWidth: isBordered ? `${theme.geometry.borderWidth}rem` : undefined,
+        borderColor: isBordered
+            ? "var(--elbe-context-color-border, transparent)"
+            : undefined,
+    };
+    return (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(_Box, { mode: mode, scheme: scheme, kind: kind, manner: manner, padding: padding, margin: margin, state: state, className: elbe.className, flex: elbe.flex, elevated: elevated, frosted: frosted, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ overflow: overflow }, css.borderRadius(styles.radius)), css.borderStyle(styles.borderStyle)), css.borderWidth(styles.borderWidth)), css.borderColor(styles.borderColor)), { opacity: onTap === null ? 0.5 : 1 }), ((_b = elbe.style) !== null && _b !== void 0 ? _b : {})), native: Object.assign(Object.assign(Object.assign({}, (onTap !== undefined
+                ? {
+                    onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (onTap === null)
+                            return;
+                        onTap === null || onTap === void 0 ? void 0 : onTap();
+                    },
+                }
+                : {})), (onLongTap !== undefined
+                ? {
+                    onContextMenu: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (onLongTap === null)
+                            return;
+                        onLongTap === null || onLongTap === void 0 ? void 0 : onLongTap();
+                    },
+                }
+                : {})), ((_c = elbe.native) !== null && _c !== void 0 ? _c : {})), children: children }) }));
 }

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

@@ -1,8 +1,6 @@
 import React from "react";
-import { ElbeProps } from "./box";
-export type PaddedProps = ElbeProps & {
-    children: any;
-};
+import { ElbeChildrenProps, ElbeProps } from "./box";
+export type PaddedProps = ElbeProps & ElbeChildrenProps;
 export declare class Padded extends React.Component<PaddedProps & {
     top?: number;
     right?: number;

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

@@ -0,0 +1,9 @@
+import { ColorSelection } from "../../theme/subthemes/color/colors/colors";
+import { ElbeThemeContextData } from "../../theme/theme";
+import { ElbeChildren } from "../../util/types";
+export declare function WithStateTheme(p: {
+    theme: ElbeThemeContextData<{}>;
+    manner?: Exclude<ColorSelection.Manners, "major" | "minor">;
+    disabled?: boolean;
+    children: ElbeChildren;
+}): import("react/jsx-runtime").JSX.Element;