elbe-ui 1.0.8 → 2.0.1

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

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

package/dist/ui/components/dialog.js

@@ -1,35 +0,0 @@
-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, barrierDismissible, maxWidth, }) {
-    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: `min(${maxWidth !== null && maxWidth !== void 0 ? maxWidth : 40}rem, 100%)`,
-                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", { className: "padded", style: {
-                        paddingTop: 0,
-                        maxHeight: "80vh",
-                        overflow: "auto",
-                    }, children: children })] }) }));
-}

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

@@ -1,15 +0,0 @@
-import { ElbeChild, ElbeRoute, HeaderLogos } from "../../..";
-export type AppBaseProps = HeaderLogos & {
-    globalActions?: ElbeChild[];
-    children: ElbeRoute | ElbeRoute[];
-    hashBasedRouting?: boolean;
-};
-/**
- * app base is a layout component that provides an optional side menu and a content area.
- * it is designed to be used as a base for other components and is
- * used to create a consistent layout for pages. You can also pass global actions
- * that will be displayed in the header of all pages.
- *
- * Provide `wouter.Route` or `MenuRoute` components as children to define the routes and menu items.
- */
-export declare function AppBase(p: AppBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,76 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { Box, isMenuRoute, Wouter, } from "../../..";
-import { AppBaseContext } from "./ctx_app_base";
-import { Menu } from "./menu";
-/**
- * app base is a layout component that provides an optional side menu and a content area.
- * it is designed to be used as a base for other components and is
- * used to create a consistent layout for pages. You can also pass global actions
- * that will be displayed in the header of all pages.
- *
- * Provide `wouter.Route` or `MenuRoute` components as children to define the routes and menu items.
- */
-export function AppBase(p) {
-    return _jsx(Wouter.Router, { children: _jsx(_AppBase, Object.assign({}, p)) });
-}
-function _initialLocation() {
-    return (window.location.pathname + window.location.search + window.location.hash);
-}
-function _AppBase(p) {
-    var _a;
-    const [menuOpen, setMenuOpen] = useState(false);
-    const menuItems = useMemo(() => {
-        return _extractMenuItems(p.children);
-    }, [p.children]);
-    const [location, navigate] = Wouter.useLocation();
-    const [history, setHistory] = useState([_initialLocation()]);
-    return (_jsx(AppBaseContext.Provider, { value: {
-            menuOpen: menuOpen,
-            icons: {
-                logo: p.logo,
-                logoDark: p.logoDark,
-                endLogo: p.endLogo,
-                endLogoDark: p.endLogoDark,
-            },
-            globalActions: (_a = p.globalActions) !== null && _a !== void 0 ? _a : [],
-            setMenuOpen: (b) => setMenuOpen(b),
-            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,
-            },
-        }, 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) {
-    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/components/layout/ctx_app_base.d.ts

@@ -1,19 +0,0 @@
-import { ElbeChild, int } from "../../util/types";
-import { HeaderLogos } from "./header";
-export interface _AppBaseState {
-    menuOpen: boolean;
-    icons: HeaderLogos;
-    globalActions: ElbeChild[];
-    router: {
-        go: (path: string, replace?: int | "all") => void;
-        goBack: (steps?: number) => void;
-        history: string[];
-        location: string;
-    };
-}
-export interface _AppBaseControl extends _AppBaseState {
-    setMenuOpen: (open: boolean) => void;
-}
-export declare const AppBaseContext: import("react").Context<_AppBaseControl | null>;
-export declare function useAppBase(): _AppBaseControl;
-export declare function maybeAppBase(): _AppBaseControl | null;

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

@@ -1,12 +0,0 @@
-import { createContext, useContext } from "react";
-export const AppBaseContext = createContext(null);
-export function useAppBase() {
-    const ctx = useContext(AppBaseContext);
-    if (ctx)
-        return ctx;
-    throw new Error("useAppBase must be used within an AppBase. try using maybeAppBase()");
-}
-export function maybeAppBase() {
-    var _a;
-    return (_a = useContext(AppBaseContext)) !== null && _a !== void 0 ? _a : null;
-}

package/dist/ui/theme/color_theme.d.ts

@@ -1,2 +0,0 @@
-import { ColorThemeSeed, PartialColorThemeSeed } from "./seed";
-export declare function colorThemePreset(merge?: Partial<PartialColorThemeSeed>): ColorThemeSeed;

package/dist/ui/theme/color_theme.js

@@ -1,92 +0,0 @@
-import { colors, LayerColor, } from "./colors";
-import { lColor } from "./seed";
-export function colorThemePreset(merge
-//highVis: boolean = false
-) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-    const seed = merge !== null && merge !== void 0 ? merge : {};
-    return {
-        base: (_a = seed.base) !== null && _a !== void 0 ? _a : LayerColor.fromBack(colors.white),
-        accent: (_b = seed.accent) !== null && _b !== void 0 ? _b : LayerColor.fromBack(colors.blueAccent),
-        info: (_c = seed.info) !== null && _c !== void 0 ? _c : LayerColor.fromBack(colors.blue),
-        success: (_d = seed.success) !== null && _d !== void 0 ? _d : LayerColor.fromBack(colors.green),
-        warning: (_e = seed.warning) !== null && _e !== void 0 ? _e : LayerColor.fromBack(colors.yellow),
-        error: (_f = seed.error) !== null && _f !== void 0 ? _f : LayerColor.fromBack(colors.red),
-        contrast: {
-            highvis: (_h = (_g = seed.contrast) === null || _g === void 0 ? void 0 : _g.highvis) !== null && _h !== void 0 ? _h : (({ seed }) => (Object.assign(Object.assign({}, seed), { accent: LayerColor.fromBack(colors.black) }))),
-            normal: (_k = (_j = seed.contrast) === null || _j === void 0 ? void 0 : _j.normal) !== null && _k !== void 0 ? _k : (({ seed }) => seed),
-        },
-        mode: {
-            light: (_m = (_l = seed.mode) === null || _l === void 0 ? void 0 : _l.light) !== null && _m !== void 0 ? _m : (({ base }) => base),
-            dark: (_p = (_o = seed.mode) === null || _o === void 0 ? void 0 : _o.dark) !== null && _p !== void 0 ? _p : (({ base }) => base.mirrorBrightness()),
-        },
-        scheme: {
-            primary: (_r = (_q = seed.scheme) === null || _q === void 0 ? void 0 : _q.primary) !== null && _r !== void 0 ? _r : _makePrimary,
-            secondary: (p) => {
-                var _a, _b, _c, _d;
-                const highVis = p.path.includes("highvis");
-                return (highVis
-                    ? (_b = (_a = seed.scheme) === null || _a === void 0 ? void 0 : _a.primary) !== null && _b !== void 0 ? _b : _makePrimary
-                    : (_d = (_c = seed.scheme) === null || _c === void 0 ? void 0 : _c.secondary) !== null && _d !== void 0 ? _d : _makeSecondary)(p);
-            },
-            inverse: (_t = (_s = seed.scheme) === null || _s === void 0 ? void 0 : _s.inverse) !== null && _t !== void 0 ? _t : _makeInverse,
-        },
-        style: {
-            accent: _styleSel,
-            info: _styleSel,
-            success: _styleSel,
-            warning: _styleSel,
-            error: _styleSel,
-        },
-        variant: {
-            major: (_v = (_u = seed.variant) === null || _u === void 0 ? void 0 : _u.major) !== null && _v !== void 0 ? _v : _makeMajor,
-            minor: (p) => {
-                var _a, _b;
-                if ((_a = seed.variant) === null || _a === void 0 ? void 0 : _a.minor)
-                    return (_b = seed.variant) === null || _b === void 0 ? void 0 : _b.minor(p);
-                const highVis = p.path.includes("highvis");
-                return highVis ? _makeMajor(p) : _makeMinor(p);
-            },
-            flat: (_x = (_w = seed.variant) === null || _w === void 0 ? void 0 : _w.flat) !== null && _x !== void 0 ? _x : _makeFlat,
-        },
-    };
-}
-const _styleSel = ({ base, style }) => {
-    const bL = base.luminance;
-    if (bL === 1)
-        return style;
-    //if (bL === 0) return s.mirrorBrightness();
-    if (style.luminance == 0)
-        return style.mirrorBrightness();
-    return style.inter(LayerColor.fromBack(bL > 0.5 ? colors.black : colors.white), 0.1);
-};
-const _makePrimary = (p) => p.base;
-const _makeSecondary = ({ base, seed }) => new LayerColor(base.back
-    .inter(lColor(seed.accent).back, base.back.luminance < 0.3 ? 0.2 : 0.1)
-    .desaturated(0.5), base.front, base.border);
-const _makeInverse = ({ base }) => base.mirrorBrightness();
-const _makeMajor = ({ style, path }) => {
-    return LayerColor.fromBack(style.back, { border: style.back });
-};
-const _makeMinor = ({ base, style }) => {
-    const b = base.back;
-    const backIn = b.mirrorBrightness();
-    const major = style.back;
-    const minor = style.back.inter(b, 0.8);
-    const minorFront = minor.hasWCAGContrast(major) ? major : null;
-    return new LayerColor(style.back.withAlpha(0.25), minorFront !== null && minorFront !== void 0 ? minorFront : major.inter(backIn, 0.6), minorFront !== null && minorFront !== void 0 ? minorFront : major.inter(backIn, 0.3));
-};
-const _makeFlat = ({ path, style, base }) => {
-    const highVis = path.includes("highvis");
-    const front = !style
-        ? base.front
-        : base.back.hasWCAGContrast(style === null || style === void 0 ? void 0 : style.back)
-            ? style === null || style === void 0 ? void 0 : style.back
-            : style === null || style === void 0 ? void 0 : style.back.inter(base.front, 0.6);
-    const isDark = base.back.luminance < 0.3;
-    const border = !highVis && !style
-        ? base.front.inter(base.back, isDark ? 0.75 : 0.9)
-        : base.front;
-    return new LayerColor(base.back, //.withAlpha(0),
-    front, highVis ? border : null, border);
-};

package/dist/ui/theme/colors.d.ts

@@ -1,133 +0,0 @@
-import { ColorThemeSeed, PartialColorThemeSeed, ThemeColors } from "./seed";
-export type ElbeColorContrasts = "normal" | "highvis";
-export type ElbeColorModes = "light" | "dark";
-export type ElbeColorSchemes = "primary" | "secondary" | "inverse";
-export type ElbeAlertKinds = "success" | "warning" | "error" | "info";
-export type ElbeColorKinds = ElbeAlertKinds | "plain" | "accent";
-export type ElbeColorManners = "major" | "minor" | "flat" | "plain";
-export declare const cContrasts: ElbeColorContrasts[];
-export declare const cModes: ElbeColorModes[];
-export declare const cSchemes: ElbeColorSchemes[];
-export declare const cKinds: ElbeColorKinds[];
-export declare const cManners: ElbeColorManners[];
-export declare const cStates: string[];
-export declare const cLayers: string[];
-type _SeedSelInput = {
-    path: string[];
-    seed: ColorThemeSeed;
-    base: LayerColor;
-};
-export type SeedSelector = (p: _SeedSelInput) => LayerColor;
-export type SeedModifier = (p: _SeedSelInput) => ColorThemeSeed;
-export type SeedFlatSelector = (p: _SeedSelInput & {
-    style?: LayerColor;
-}) => LayerColor;
-export type SeedStyleSelector = (p: _SeedSelInput & {
-    style: LayerColor;
-}) => LayerColor;
-export declare class RGBAColor {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-    constructor(r: number, g: number, b: number, a: number);
-    asCss(): string;
-    get isDark(): boolean;
-    get luminance(): number;
-    get hex(): string;
-    static fromHex(hex: string | null): RGBAColor;
-    desaturated(f?: number): RGBAColor;
-    withAlpha(a: number): RGBAColor;
-    inter(other: RGBAColor, factor: number): RGBAColor;
-    mirrorBrightness(factor?: number): RGBAColor;
-    get values(): [number, number, number, number];
-    hasWCAGContrast(color: RGBAColor): boolean;
-    contrastRatio(color: RGBAColor): number;
-}
-export declare const colors: {
-    transparent: RGBAColor;
-    white: RGBAColor;
-    black: RGBAColor;
-    blueAccent: RGBAColor;
-    blue: RGBAColor;
-    green: RGBAColor;
-    yellow: RGBAColor;
-    red: RGBAColor;
-};
-export declare class LayerColor extends RGBAColor {
-    back: RGBAColor;
-    border?: (RGBAColor | null) | undefined;
-    borderContext?: (RGBAColor | null) | undefined;
-    front: RGBAColor;
-    constructor(back: RGBAColor, front: RGBAColor | null, border?: (RGBAColor | null) | undefined, borderContext?: (RGBAColor | null) | undefined);
-    asCss(): string;
-    inter(other: LayerColor, factor: number): LayerColor;
-    mirrorBrightness(factor?: number): LayerColor;
-    desaturated(): LayerColor;
-    static fromHex(back: string, front?: string | null, border?: string | null): LayerColor;
-    withBorder(border: RGBAColor): LayerColor;
-    static fromBack(back: RGBAColor, c?: {
-        front?: RGBAColor;
-        border?: RGBAColor;
-    }): LayerColor;
-    contextCss(): string;
-}
-export declare class StateColor extends LayerColor {
-    neutral: LayerColor;
-    hover: LayerColor;
-    active: LayerColor;
-    disabled: LayerColor;
-    constructor(neutral: LayerColor, hover: LayerColor, active: LayerColor, disabled: LayerColor);
-    asCss(): string;
-    static generate(p: string[], _: ColorThemeSeed, context: LayerColor, style: LayerColor, fromFront?: boolean): StateColor;
-}
-export declare class MannerColor extends StateColor {
-    major: StateColor | null;
-    minor: StateColor | null;
-    flat: StateColor;
-    constructor(major: StateColor | null, minor: StateColor | null, flat: StateColor);
-    asCss(fallback?: MannerColor): string;
-    raisedCss(): string;
-    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor, style?: LayerColor): MannerColor;
-}
-export declare class KindColor extends MannerColor {
-    plain: MannerColor;
-    accent: MannerColor;
-    info: MannerColor;
-    success: MannerColor;
-    warning: MannerColor;
-    error: MannerColor;
-    constructor(plain: MannerColor, accent: MannerColor, info: MannerColor, success: MannerColor, warning: MannerColor, error: MannerColor);
-    asCss(): string;
-    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor): KindColor;
-}
-export declare class SchemeColor extends KindColor {
-    primary: KindColor;
-    secondary: KindColor;
-    inverse: KindColor;
-    constructor(primary: KindColor, secondary: KindColor, inverse: KindColor);
-    asCss(): string;
-    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor): SchemeColor;
-}
-export declare class ModeColor extends SchemeColor {
-    light: SchemeColor;
-    dark: SchemeColor;
-    constructor(light: SchemeColor, dark: SchemeColor);
-    asCss(): string;
-    static generate(path: string[], seed: ColorThemeSeed): ModeColor;
-}
-export declare class ContrastColor extends ModeColor {
-    normal: ModeColor;
-    highvis: ModeColor;
-    constructor(normal: ModeColor, highvis: ModeColor);
-    asCss(): string;
-    static generate(path: string[], seed: ColorThemeSeed): ContrastColor;
-}
-export declare class ColorTheme {
-    colors: ThemeColors;
-    color: ContrastColor;
-    constructor(colors: ThemeColors, color: ContrastColor);
-    asCss(): string;
-    static generate(seed?: Partial<PartialColorThemeSeed>): ColorTheme;
-}
-export {};