elbe-ui 1.0.7 → 2.0.0

package/dist/ui/components/layout/flex.js

@@ -16,24 +16,27 @@ export function FlexSpace({}) {
 }
 export function Column(_a) {
     var { gap = 1, main = "start", cross = "stretch", children, noScrollbar = false, scroll = false } = _a, p = __rest(_a, ["gap", "main", "cross", "children", "noScrollbar", "scroll"]);
-    return _Flex(false, { gap, main, cross, scroll, noScrollbar, children }, p, false);
+    return _FlexLayout(false, { gap, main, cross, scroll, noScrollbar, children }, p, false);
 }
 export function Row(_a) {
     var { gap = 1, main = "start", cross, wrap = false, children, noScrollbar = false, scroll = false } = _a, p = __rest(_a, ["gap", "main", "cross", "wrap", "children", "noScrollbar", "scroll"]);
-    return _Flex(true, { gap, main, cross, scroll, noScrollbar, children }, p, wrap);
+    return _FlexLayout(true, { gap, main, cross, scroll, noScrollbar, children }, p, wrap);
 }
-function _Flex(row, p, elbe, wraps) {
-    var _a;
-    return (_jsx("div", Object.assign({}, applyProps("flex", elbe, [
-        row ? "row" : "column",
-        wraps && "wrap",
-        p.noScrollbar && "no-scrollbar",
-    ], {
+export function FlexLayout(_a) {
+    var { gap = 1, main = "start", cross = "stretch", direction, children, noScrollbar = false, scroll = false, wrap = false } = _a, p = __rest(_a, ["gap", "main", "cross", "direction", "children", "noScrollbar", "scroll", "wrap"]);
+    return _FlexLayout(direction !== "column", { gap, main, cross, scroll, noScrollbar, children }, p, wrap);
+}
+function _FlexLayout(row, p, elbe, wraps) {
+    var _a, _b, _c;
+    return (_jsx("div", Object.assign({}, applyProps("flex", elbe, [p.noScrollbar && "elbe_no-scrollbar"], {
+        display: "flex",
+        flexDirection: row ? "row" : "column",
+        flexWrap: wraps ? "wrap" : "nowrap",
         justifyContent: p.main,
-        alignItems: p.cross,
-        gap: `${p.gap}rem`,
+        alignItems: (_a = p.cross) !== null && _a !== void 0 ? _a : (row ? "center" : "stretch"),
+        gap: `${(_b = p.gap) !== null && _b !== void 0 ? _b : 1}rem`,
         overflowX: !row ? undefined : p.scroll ? "auto" : undefined,
         overflowY: row ? undefined : p.scroll ? "auto" : undefined,
-        flex: ((_a = p.flex) !== null && _a !== void 0 ? _a : p.scroll) ? 1 : undefined,
+        flex: ((_c = elbe.flex) !== null && _c !== void 0 ? _c : p.scroll) ? 1 : undefined,
     }), { children: p.children })));
 }

package/dist/ui/components/layout/header.d.ts

@@ -1,4 +1,4 @@
-import { ElbeChild, ElbeColorSchemes } from "../../..";
+import { ColorSelection, ElbeChild } from "../../..";
 export type HeaderLogos = {
     logo?: string | ElbeChild;
     logoDark?: string | ElbeChild;
@@ -10,7 +10,7 @@ export type HeaderProps = HeaderLogos & {
     title: string | ElbeChild;
     centerTitle?: boolean;
     actions?: ElbeChild[];
-    scheme?: ElbeColorSchemes;
+    scheme?: ColorSelection.Schemes;
 };
 export declare function Header(p: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare function _Logo(p: {

package/dist/ui/components/layout/header.js

@@ -1,17 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, MenuIcon, XIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { Card, IconButton, Text, useLayoutMode, useSiteScroll, useTheme, useThemeConfig, } from "../../..";
-import { maybeAppBase } from "./ctx_app_base";
+import { Card, IconButton, Text, useLayoutMode, useSiteScroll, } from "../../..";
+import { useApp } from "../../app/app_ctxt";
 import { _Toolbar } from "./toolbar";
 export function Header(p) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const appBase = maybeAppBase();
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const { _appThemeContext, appConfig, menu } = useApp();
+    const { theme, useWith } = _appThemeContext.useTheme();
     const layoutMode = useLayoutMode();
     const scroll = useSiteScroll();
-    const tConfig = useThemeConfig();
-    const theme = useTheme();
-    return (_jsxs(Card, { padding: 0, scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", bordered: true, frosted: !tConfig.highVis, sharp: true, style: {
+    const secTheme = useWith((t) => ({
+        color: Object.assign(Object.assign({}, t.color), { selection: Object.assign(Object.assign({}, t.color.selection), { scheme: "secondary", manner: "plain" }) }),
+    }), [theme]);
+    return (_jsxs(Card, { padding: 0, scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", manner: "plain", frosted: !theme.color.isContrast, 
+        //elevated={!!scroll}
+        bordered: true, sharp: true, style: {
             position: "sticky",
             top: 0,
             left: 0,
@@ -20,22 +24,25 @@ export function Header(p) {
             padding: ".5rem",
             display: "flex",
             alignItems: "center",
-            borderTop: "none",
-            borderLeft: "none",
-            borderRight: "none",
-            borderColor: tConfig.highVis || scroll ? undefined : "transparent",
+            borderTopStyle: "none",
+            borderLeftStyle: "none",
+            borderRightStyle: "none",
+            borderColor: theme.color.isContrast || scroll
+                ? theme.color.currentColor.border.withAlpha(0.25).asCss()
+                : "transparent",
+            borderWidth: theme.geometry.borderWidth + "rem",
             gap: "1rem",
             zIndex: 80,
         }, children: [p.leading && p.leading !== "back" && p.leading !== "close"
                 ? p.leading
-                : appBase &&
-                    !layoutMode.isWide && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _jsx(BackButton, {}), p.leading === "close" && _jsx(BackButton, { close: true }), !layoutMode.isMobile && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_c = p.logoDark) !== null && _c !== void 0 ? _c : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })), (!appBase || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_d = p.centerTitle) !== null && _d !== void 0 ? _d : false }), _jsx(_Toolbar, { actions: [...((_e = p.actions) !== null && _e !== void 0 ? _e : []), ...((_f = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _f !== void 0 ? _f : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_g = p.endLogo) !== null && _g !== void 0 ? _g : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_h = p.endLogoDark) !== null && _h !== void 0 ? _h : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
+                : !layoutMode.isWide && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => menu.setOpen(!menu.isOpen), icon: MenuIcon })), p.leading === "back" && _jsx(BackButton, {}), p.leading === "close" && _jsx(BackButton, { close: true }), !layoutMode.isMobile && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : (_c = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _c === void 0 ? void 0 : _c.logo, logoDark: (_d = p.logoDark) !== null && _d !== void 0 ? _d : (_e = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _e === void 0 ? void 0 : _e.logoDark, lMargin: 0.5 })), (!appConfig || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_f = p.centerTitle) !== null && _f !== void 0 ? _f : false }), _jsx(_Toolbar, { actions: [...((_g = p.actions) !== null && _g !== void 0 ? _g : []), ...((_h = appConfig === null || appConfig === void 0 ? void 0 : appConfig.globalActions) !== null && _h !== void 0 ? _h : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_j = p.endLogo) !== null && _j !== void 0 ? _j : (_k = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _k === void 0 ? void 0 : _k.endLogo, logoDark: (_l = p.endLogoDark) !== null && _l !== void 0 ? _l : (_m = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _m === void 0 ? void 0 : _m.endLogoDark, rMargin: 0.5 }))] }));
 }
 export function _Logo(p) {
     var _a, _b;
-    const tConfig = useThemeConfig();
+    const { _appThemeContext } = useApp();
+    const { theme } = _appThemeContext.useTheme();
     const [logo, setLogo] = useState(p.logo);
-    useMemo(() => { var _a; return setLogo(tConfig.dark ? (_a = p.logoDark) !== null && _a !== void 0 ? _a : p.logo : p.logo); }, [tConfig]);
+    useMemo(() => { var _a; return setLogo(theme.color.isDark ? (_a = p.logoDark) !== null && _a !== void 0 ? _a : p.logo : p.logo); }, [theme]);
     return !logo ? null : (_jsx("div", { style: {
             flex: p.flex ? 1 : undefined,
             display: "flex",
@@ -49,9 +56,9 @@ export function _Logo(p) {
 }
 export function BackButton(p) {
     var _a, _b;
-    const appBase = maybeAppBase();
-    const hidden = ((_b = (_a = appBase === null || appBase === void 0 ? void 0 : appBase.router.history) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) < 2;
-    return hidden ? null : (_jsx(IconButton.plain, { ariaLabel: p.close ? "close" : "go back", onTap: () => appBase === null || appBase === void 0 ? void 0 : appBase.router.goBack(), icon: p.close ? XIcon : ChevronLeft }, "hello-back"));
+    const { router } = useApp();
+    const hidden = ((_b = (_a = router.history) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) < 2;
+    return hidden ? null : (_jsx(IconButton.plain, { ariaLabel: p.close ? "close" : "go back", onTap: () => router.goBack(), icon: p.close ? XIcon : ChevronLeft }, "hello-back"));
 }
 export function _HeaderTitle(p) {
     const layoutMode = useLayoutMode();

package/dist/ui/components/layout/menu.js

@@ -1,62 +1,87 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuIcon } from "lucide-react";
-import { _Logo, useLayoutMode, useTheme, useThemeConfig, } from "../../..";
-import { Card, elevatedShadow } from "../base/card";
+import { useMemo } from "react";
+import { _Logo, elevatedBackdropStyle, useLayoutMode, } from "../../..";
+import { useApp } from "../../app/app_ctxt";
+import { Card } from "../base/card";
 import { Button } from "../button/button";
-import { useAppBase } from "./ctx_app_base";
 import { Column } from "./flex";
 export function Menu(p) {
+    const { _appThemeContext, menu } = useApp();
+    const { theme } = _appThemeContext.useTheme();
     const layoutMode = useLayoutMode();
-    const appBase = useAppBase();
-    const tConfig = useThemeConfig();
-    const theme = useTheme();
-    const topBot = { top: [], bottom: [] };
-    for (let i of p.items) {
-        if (i.bottom)
-            topBot.bottom.push(i);
-        else
-            topBot.top.push(i);
-    }
-    const wideOrOpen = () => appBase.menuOpen || layoutMode.isWide;
-    const menuWidth = () => appBase.menuOpen
+    const isWideOrOpen = useMemo(() => {
+        return (menu === null || menu === void 0 ? void 0 : menu.isOpen) || layoutMode.isWide;
+    }, [menu === null || menu === void 0 ? void 0 : menu.isOpen, layoutMode.isWide]);
+    const menuWidth = useMemo(() => (menu === null || menu === void 0 ? void 0 : menu.isOpen)
         ? layoutMode.isMobile
-            ? "100vw"
-            : `${17 + theme.geometry.borderWidth}rem`
+            ? "100%"
+            : `17rem`
         : layoutMode.isWide
-            ? `${4 + theme.geometry.borderWidth}rem`
-            : "0";
+            ? `${3 + theme.geometry.borderWidth * 2}rem`
+            : "0", [menu === null || menu === void 0 ? void 0 : menu.isOpen, layoutMode.mode, theme.geometry.borderWidth]);
+    const topBot = useMemo(() => {
+        let topBot = { top: [], bottom: [] };
+        for (let i of p.items) {
+            if (i.bottom)
+                topBot.bottom.push(i);
+            else
+                topBot.top.push(i);
+        }
+        return topBot;
+    }, [p.items]);
     return (_jsxs(_Fragment, { children: [layoutMode.isWide && (_jsx("div", { style: {
-                    width: menuWidth(),
-                    minWidth: menuWidth(),
-                } })), _jsx("div", { onClick: () => appBase.setMenuOpen(false), style: Object.assign({ zIndex: 100, position: "fixed", left: 0, top: 0, width: 0, height: 0, backgroundColor: "rgba(0,0,0,0)", transition: "background-color 200ms ease-in-out" }, (layoutMode.isNarrow && appBase.menuOpen
-                    ? {
-                        backdropFilter: "blur(5px)",
-                        backgroundColor: "rgba(0,0,0,.2)",
-                        width: "100vw",
-                        height: "100vh",
-                    }
-                    : {})) }), _jsx(Card, { onTap: () => {
-                    if (layoutMode.isWide)
-                        return;
-                    appBase.setMenuOpen(false);
-                }, sharp: layoutMode.isMobile, bordered: true, scheme: "primary", padding: wideOrOpen() ? 0.5 : 0, style: Object.assign({ zIndex: 101, position: "fixed", left: 0, top: 0, height: "100vh", overflow: "hidden", width: menuWidth(), display: "flex", 
-                    //display: appBase.menuOpen || layoutMode == "wide" ? "flex" : "none",
-                    flexDirection: "column", justifyContent: "start", alignItems: "stretch", borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeft: "none", borderTop: "none", borderBottom: "none", borderColor: tConfig.highVis ? undefined : "transparent", gap: "1rem", transition: tConfig.reducedMotion
-                        ? "none"
-                        : "width 200ms ease-in-out" }, (layoutMode.isNarrow && appBase.menuOpen
-                    ? {
-                        boxShadow: elevatedShadow,
-                    }
-                    : {})), children: wideOrOpen() && (_jsxs(_Fragment, { children: [_jsx(Button.plain, { contentAlign: "start", ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon, style: {
-                                marginBottom: ".5rem",
-                                borderRadius: "3rem",
-                            }, children: !layoutMode.isWide && (_jsx(_Logo, { logo: appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })) }), _jsx(Column, { flex: 1, scroll: true, noScrollbar: true, children: topBot.top.map((i, index) => (_jsx(_MenuItemView, { item: i }, index))) }), topBot.bottom.map((i, index) => (_jsx(_MenuItemView, { item: i }, index)))] })) })] }));
+                    width: menuWidth,
+                    minWidth: menuWidth,
+                    marginRight: ".5rem",
+                } }, "menu_wide_spaceholder")), _jsx("div", { onClick: () => menu.setOpen(false), style: Object.assign({ zIndex: 100, position: "fixed", left: 0, top: 0, width: 0, height: 0 }, elevatedBackdropStyle(layoutMode.isNarrow && (menu === null || menu === void 0 ? void 0 : menu.isOpen), theme, {
+                    width: "100%",
+                    height: "100%",
+                })) }), _jsx(_Menu, { topBot: topBot, wideOrOpen: isWideOrOpen, menuWidth: menuWidth })] }));
+}
+function _Menu(p) {
+    var _a, _b;
+    const { _appThemeContext, menu, appConfig } = useApp();
+    const { theme } = _appThemeContext.useTheme();
+    const layoutMode = useLayoutMode();
+    return (_jsx(Card, { onTap: () => {
+            if (layoutMode.isWide)
+                return;
+            menu.setOpen(false);
+        }, sharp: theme.menu.sharp || !layoutMode.isWide, bordered: true, scheme: theme.menu.scheme, padding: 0, elevated: theme.menu.elevated || (layoutMode.isNarrow && (menu === null || menu === void 0 ? void 0 : menu.isOpen)), overflow: "hidden", style: {
+            zIndex: 101,
+            position: "fixed",
+            left: 0,
+            top: 0,
+            height: layoutMode.isWide ? "calc(100vh - 1rem)" : "100vh",
+            margin: layoutMode.isWide ? ".5rem" : 0,
+            padding: layoutMode.isWide || !menu.isOpen ? 0 : ".5rem",
+            borderWidth: !layoutMode.isWide && !menu.isOpen
+                ? 0
+                : theme.geometry.borderWidth + "rem",
+            borderColor: theme.color.isContrast ? undefined : "transparent",
+            width: p.menuWidth,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "start",
+            alignItems: "stretch",
+            gap: "1rem",
+            transition: theme.motion.reduced ? "none" : "width 200ms ease-in-out",
+        }, children: p.wideOrOpen && (_jsxs(_Fragment, { children: [_jsx(Button.plain, { sharp: layoutMode.isWide, contentAlign: "start", ariaLabel: "open/close menu", onTap: () => menu.setOpen(!menu.isOpen), icon: MenuIcon, style: {
+                        marginBottom: ".5rem",
+                    }, children: !layoutMode.isWide && (_jsx(_Logo, { logo: (_a = appConfig.icons) === null || _a === void 0 ? void 0 : _a.logo, logoDark: (_b = appConfig.icons) === null || _b === void 0 ? void 0 : _b.logoDark, lMargin: 0.5 })) }), _jsx(Column, { flex: 1, scroll: true, noScrollbar: true, children: p.topBot.top.map((i, index) => (_jsx(_MenuItemView, { item: i }, index))) }), p.topBot.bottom.map((i, index) => (_jsx(_MenuItemView, { item: i }, index)))] })) }));
 }
 function _MenuItemView({ item }) {
-    const appBase = useAppBase();
-    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: (item.path === "/"
-            ? appBase.router.location === "/"
-            : appBase.router.location.startsWith(item.path))
+    const { menu, router } = useApp();
+    return (_jsx(Button
+    //sharp
+    , { 
+        //sharp
+        ariaLabel: item.label, contentAlign: "start", manner: (item.path === "/"
+            ? router.location === "/"
+            : router.location.startsWith(item.path))
             ? "major"
-            : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => appBase.router.go(item.path, "all") }));
+            : "plain", style: {
+            transition: "background-color 200ms ease-in-out",
+        }, label: menu.isOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => router.go(item.path, "all") }));
 }

package/dist/ui/components/layout/scroll.d.ts

@@ -5,6 +5,7 @@ export type ScrollProps = ElbeProps & {
     height?: number;
     width?: number;
     children?: any;
+    noScrollbars?: boolean;
 };
 type _ScrollProps = ScrollProps & {
     axis: "vertical" | "horizontal";

package/dist/ui/components/layout/scroll.js

@@ -6,7 +6,9 @@ export class Scroll extends Component {
         super(props);
     }
     render() {
-        return (_jsx("div", Object.assign({}, applyProps("scroll", this.props, null, {
+        return (_jsx("div", Object.assign({}, applyProps("scroll", this.props, [this.props.noScrollbars ? "elbe_scrollbars-hidden" : undefined], {
+            height: this.props.height ? this.props.height + "rem" : undefined,
+            width: this.props.width ? this.props.width + "rem" : undefined,
             overflowY: this.props.axis === "vertical" ? "scroll" : "hidden",
             overflowX: this.props.axis === "horizontal" ? "scroll" : "hidden",
         }), { children: _jsx("div", { className: this.props.innerClass, style: this.props.axis === "horizontal" ? { minWidth: "min-content" } : {}, children: this.props.children }) })));

package/dist/ui/components/layout/toolbar.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoreVertical } from "lucide-react";
 import { useMemo, useState } from "react";
-import { Card, elevatedShadow, IconButton, ToolbarContext, useLayoutMode, useThemeConfig, } from "../../..";
+import { Card, IconButton, ToolbarContext, useLayoutMode, } from "../../..";
+import { useApp } from "../../app/app_ctxt";
+import { elevatedShadow } from "../../util/_util";
 export function _Toolbar(p) {
     const [sections, setSections] = useState([
         [],
@@ -30,8 +32,9 @@ export function _Toolbar(p) {
 }
 export function OverflowMenu(p) {
     var _a;
+    const { _appThemeContext } = useApp();
+    const { theme } = _appThemeContext.useTheme();
     const [open, setOpen] = useState(false);
-    const tConfig = useThemeConfig();
     return !((_a = p.items) === null || _a === void 0 ? void 0 : _a.length) ? null : (_jsxs("div", { style: {
             position: "relative",
             zIndex: 21,
@@ -39,10 +42,10 @@ export function OverflowMenu(p) {
                     position: "fixed",
                     top: 0,
                     right: 0,
-                    width: "100vw",
-                    height: "100vh",
+                    width: "100%",
+                    height: "100%",
                     backgroundColor: "transparent",
-                    boxShadow: elevatedShadow,
+                    boxShadow: elevatedShadow(theme.color.isDark),
                     zIndex: 20,
                 } })), _jsx(IconButton.plain, { ariaLabel: "open/close menu", icon: MoreVertical, onTap: () => setOpen(!open) }), _jsx("div", { style: {
                     zIndex: 21,
@@ -51,7 +54,7 @@ export function OverflowMenu(p) {
                     right: 0,
                     transform: open ? "scale(1)" : "scale(.6)",
                     opacity: open ? 1 : 0,
-                    transition: tConfig.reducedMotion
+                    transition: theme.motion.reduced
                         ? undefined
                         : "transform 200ms ease-in-out, opacity 200ms ease-in-out",
                 }, children: open && (_jsx(ToolbarContext.Provider, { value: "overflow", children: _jsx(Card, { onTap: () => setOpen(false), scheme: "primary", elevated: true, style: {

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

@@ -1,10 +1,12 @@
+import { ColorSelection } from "../theme/subthemes/color/colors/colors";
 export declare function Link(p: {
     label: string;
-    href: string;
+    href?: string;
     external?: boolean;
-    plain?: boolean;
+    manner?: ColorSelection.Manners;
     bold?: boolean;
     noIcon?: boolean;
     underline?: boolean;
     color?: string;
+    tooltip?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/link.js

@@ -1,15 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalLinkIcon } from "lucide-react";
+import { useApp } from "../app/app_ctxt";
+import { WithStateTheme } from "./base/state_builder";
+import { WithTooltip } from "./tooltip";
 export function Link(p) {
-    return (_jsxs("a", { className: p.plain ? "plain" : "accent action", href: p.href, target: p.external ? "_blank" : undefined, rel: p.external ? "noopener noreferrer" : undefined, style: {
-            color: p.color,
-            display: "inline-flex",
-            textDecoration: p.underline ? "underline" : "none",
-            alignItems: "center",
-            fontWeight: p.bold ? "bold" : "normal",
-            padding: ".125rem .3rem",
-            borderRadius: ".5rem",
-            margin: "-.125rem -.3rem",
-            transition: "background .2s",
-        }, children: [p.label, p.external && !p.noIcon && (_jsx(ExternalLinkIcon, { size: 15, style: { marginLeft: ".25rem", marginBottom: ".25rem" } }))] }));
+    var _a;
+    const { _appThemeContext } = useApp();
+    const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
+        var _a;
+        return ({
+            color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { manner: (_a = p.manner) !== null && _a !== void 0 ? _a : "flat" }) }),
+        });
+    }, [p.manner]);
+    return (_jsx(WithStateTheme, { theme: baseTheme, disabled: p.href === undefined, children: _jsx(WithTooltip, { tooltip: p.tooltip, children: _jsxs("a", { href: p.href, target: p.external ? "_blank" : undefined, rel: p.external ? "noopener noreferrer" : undefined, className: "elbe_colored", style: {
+                    display: "inline-flex",
+                    textDecoration: p.underline ? "underline" : "none",
+                    alignItems: "center",
+                    fontWeight: p.bold ? "bold" : "normal",
+                    padding: ".125rem .3rem",
+                    borderRadius: ".5rem",
+                    cursor: "inherit",
+                    margin: ["major", "minor"].includes((_a = p.manner) !== null && _a !== void 0 ? _a : "flat")
+                        ? "-.125rem 0rem"
+                        : "-.125rem -.3rem",
+                    transition: "background .2s",
+                }, children: [p.label, p.external && !p.noIcon && (_jsx(ExternalLinkIcon, { size: 15, style: { marginLeft: ".25rem", marginBottom: ".05rem" } }))] }) }) }));
 }

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

@@ -1,6 +1,6 @@
 import { ElbeProps } from "../..";
-export declare function ProgressBar({ value, max, plain, ...elbe }: {
+export declare function ProgressBar({ value, max, manner, ...elbe }: {
     value: number;
     max?: number;
-    plain?: boolean;
+    manner: "flat" | "plain";
 } & ElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/progress_bar.js

@@ -10,21 +10,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { applyProps, clamp, useTheme, useThemeConfig } from "../..";
+import { applyProps, clamp } from "../..";
+import { useApp } from "../app/app_ctxt";
 export function ProgressBar(_a) {
-    var { value, max = 100, plain } = _a, elbe = __rest(_a, ["value", "max", "plain"]);
-    const tConfig = useThemeConfig();
-    const theme = useTheme();
-    return (_jsx("div", Object.assign({}, applyProps("progress_bar", Object.assign({ role: "progressbar" }, elbe), [plain ? "plain" : "accent minor"], {
+    var { value, max = 100, manner = "flat" } = _a, elbe = __rest(_a, ["value", "max", "manner"]);
+    const { _appThemeContext } = useApp();
+    const theme = _appThemeContext.useTheme().useWith(({ color }) => ({
+        color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { manner: manner }) }),
+    }), [manner]);
+    return (_jsx("div", Object.assign({}, applyProps("progress_bar", Object.assign({ role: "progressbar" }, elbe), [], {
         width: "100%",
         height: "0.5rem",
-        borderRadius: theme.geometry.radius + "rem",
+        borderRadius: theme.theme.geometry.radius + "rem",
         border: "none",
     }), { children: _jsx("div", { style: {
                 width: `${clamp((value / max) * 100, 0, 100)}%`,
                 height: "100%",
-                backgroundColor: "var(--c-context-front)",
-                transition: tConfig.reducedMotion ? "none" : "width 0.25s",
-                borderRadius: theme.geometry.radius + "rem",
+                backgroundColor: theme.theme.color.currentColor.front.asCss(),
+                transition: theme.theme.motion.reduced ? "none" : "width 0.25s",
+                borderRadius: theme.theme.geometry.radius + "rem",
             } }) })));
 }

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

@@ -1,11 +1,6 @@
-import { Component } from "react";
 export type SpinnerProps = {
     padding?: number;
 };
-export declare class Spinner extends Component<{
+export declare function Spinner(p: {
     manner?: "flat" | "plain";
-} & SpinnerProps> {
-    static flat: (p: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
-    static plain: (p: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+} & SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/spinner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Component, useEffect, useMemo, useState } from "react";
-import { useThemeConfig } from "../theme/theme_context";
+import { useEffect, useMemo, useState } from "react";
+import { useApp } from "../app/app_ctxt";
 function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
     return c
         .filter((p) => p[0] >= clamp[0] && p[0] <= clamp[1])
@@ -10,20 +10,18 @@ function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
         (p[1] * yFac + yOffset).toFixed(2))
         .join(" ");
 }
-export class Spinner extends Component {
-    render() {
-        return _jsx(_Spinner, Object.assign({ manner: this.props.manner }, this.props));
-    }
-}
-Spinner.flat = (p) => new Spinner(Object.assign({ manner: "flat" }, p)).render();
-Spinner.plain = (p) => new Spinner(Object.assign({ manner: "plain" }, p)).render();
-function _Spinner(p) {
-    var _a, _b;
-    const tConfig = useThemeConfig();
-    const flat = ((_a = p.manner) !== null && _a !== void 0 ? _a : "flat") === "flat";
+export function Spinner(p) {
+    var _a;
     const [x, setX] = useState(0);
+    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), { manner: (_a = p.manner) !== null && _a !== void 0 ? _a : "plain" }) }),
+        });
+    }, [p.manner]);
     useEffect(() => {
-        if (tConfig.reducedMotion)
+        if (theme.theme.motion.reduced)
             return () => { };
         const interval = setInterval(() => {
             setX((prev) => (prev + 2) % 100);
@@ -39,8 +37,9 @@ function _Spinner(p) {
         }
         return path;
     }, [x]);
-    return (_jsx("div", { className: `${flat ? "accent flat" : "plain"}`, style: {
-            padding: `${(_b = p.padding) !== null && _b !== void 0 ? _b : 1}rem`,
+    return (_jsx("div", { style: {
+            padding: `${(_a = p.padding) !== null && _a !== void 0 ? _a : 1}rem`,
+            color: theme.theme.color.currentColor.front.asCss(),
         }, children: _jsx("svg", { style: { width: "40px", height: "40px" }, viewBox: `-10 -10 120 120`, children: [
                 _toPath(path, 13, 20, [0.4, 0.8], 1),
                 _toPath(path, 10, 50),

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

@@ -1,8 +1,8 @@
 import React from "react";
-import type { ElbeTypeVariants } from "../theme/type_theme";
-import type { ElbeChildren } from "../util/types";
-import { type ElbeProps } from "./base/box";
-export type TextProps = {
+import { ElbeTypeVariants } from "../theme/subthemes/_theme_type";
+import { ElbeChildrenProps, type ElbeProps } from "./base/box";
+export declare const elbeThemeVariants: ElbeTypeVariants[];
+export type TextProps = ElbeProps & ElbeChildrenProps & {
     align?: "start" | "center" | "end";
     bold?: boolean;
     italic?: boolean;
@@ -10,9 +10,8 @@ export type TextProps = {
     striked?: boolean;
     color?: string;
     size?: number;
-    children?: ElbeChildren;
     v?: string;
-} & ElbeProps;
+};
 export declare class Text extends React.Component<TextProps & {
     variant?: ElbeTypeVariants;
 }> {

package/dist/ui/components/text.js

@@ -10,26 +10,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useMemo } from "react";
+import { useApp } from "../app/app_ctxt";
 import { applyProps } from "./base/box";
+export const elbeThemeVariants = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "bodyL",
+    "bodyM",
+    "bodyS",
+    "code",
+];
 export class Text extends React.Component {
     render() {
-        const _a = this.props, { align, bold, italic, underline, striked, color, size, children, variant, v } = _a, elbe = __rest(_a, ["align", "bold", "italic", "underline", "striked", "color", "size", "children", "variant", "v"]);
-        return (_jsxs("span", Object.assign({}, applyProps("text", elbe, [
-            "text",
-            //align,
-            color,
-            variant,
-        ], {
-            fontSize: size ? `${size}rem` : "",
-            color: color || "",
-            scrollMarginTop: "2rem",
-            textAlign: align,
-            fontWeight: bold ? "bold" : "",
-            fontStyle: italic ? "italic" : "",
-            textDecoration: underline ? "underline" : "",
-            textDecorationLine: striked ? "line-through" : "",
-        }), { children: [v, children] })));
+        return _jsx(_Text, Object.assign({}, this.props));
     }
 }
 Text.h1 = (p) => _jsx(Text, Object.assign({}, p, { variant: "h1" }));
@@ -38,11 +36,26 @@ Text.h3 = (p) => _jsx(Text, Object.assign({}, p, { variant: "h3" }));
 Text.h4 = (p) => _jsx(Text, Object.assign({}, p, { variant: "h4" }));
 Text.h5 = (p) => _jsx(Text, Object.assign({}, p, { variant: "h5" }));
 Text.h6 = (p) => _jsx(Text, Object.assign({}, p, { variant: "h6" }));
-Text.s = (p) => _jsx(Text, Object.assign({}, p, { variant: "body-s" }));
-Text.m = (p) => _jsx(Text, Object.assign({}, p, { variant: "body-m" }));
-Text.l = (p) => _jsx(Text, Object.assign({}, p, { variant: "body-l" }));
+Text.s = (p) => _jsx(Text, Object.assign({}, p, { variant: "bodyS" }));
+Text.m = (p) => _jsx(Text, Object.assign({}, p, { variant: "bodyM" }));
+Text.l = (p) => _jsx(Text, Object.assign({}, p, { variant: "bodyL" }));
 Text.code = (p) => _jsx(Text, Object.assign({}, p, { variant: "code" }));
 // replace the constructor with defaultProps so React receives the same props object
 Text.defaultProps = {
-    variant: "body-m",
+    variant: "bodyM",
 };
+function _Text(p) {
+    const { _appThemeContext } = useApp();
+    const usedTheme = _appThemeContext.useTheme();
+    const tVariant = useMemo(() => {
+        var _a;
+        const v = usedTheme.theme.type[(_a = p.variant) !== null && _a !== void 0 ? _a : "bodyM"];
+        if (!v)
+            throw new Error(`Unknown text variant: ${p.variant}`);
+        return v;
+    }, [usedTheme, p.variant]);
+    const { align, bold, italic, underline, striked, color, size, children, variant, v } = p, elbe = __rest(p, ["align", "bold", "italic", "underline", "striked", "color", "size", "children", "variant", "v"]);
+    return (_jsxs("span", Object.assign({}, applyProps("text", elbe, [], Object.assign({ color: color !== null && color !== void 0 ? color : "", scrollMarginTop: "2rem", textAlign: align, textDecorationLine: striked ? "line-through" : "", 
+        // disable auto wrap for code blocks
+        whiteSpace: "pre-wrap", fontSize: size ? size + "rem" : undefined }, tVariant.asCss({ bold, italic, underline, size }))), { children: [v, children] })));
+}

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

@@ -0,0 +1,5 @@
+import { ElbeChildren } from "../util/types";
+export declare function WithTooltip(p: {
+    tooltip?: string;
+    children?: ElbeChildren;
+}): import("react/jsx-runtime").JSX.Element;