elbe-ui 1.0.8 → 2.0.0

package/dist/ui/components/tooltip.js

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useApp } from "../app/app_ctxt";
+import { getRootElement } from "../util/root";
+export function WithTooltip(p) {
+    const rootDOM = useMemo(() => getRootElement("elbe_tooltip"), []);
+    const timeoutRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState({ x: 0, y: 0, top: false, left: false });
+    const { _appThemeContext } = useApp();
+    const { theme } = _appThemeContext.useTheme().useWith((c) => ({
+        color: Object.assign(Object.assign({}, c.color), { selection: Object.assign(Object.assign({}, c.color.selection), { scheme: "inverse", kind: "accent", manner: "plain", state: "neutral" }) }),
+    }), []);
+    if (!p.tooltip)
+        return _jsx(_Fragment, { children: p.children });
+    return (_jsxs("span", { onMouseEnter: () => {
+            timeoutRef.current = window.setTimeout(() => setVisible(true), 1000);
+        }, onMouseLeave: () => {
+            console.log("leave");
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+            setVisible(false);
+        }, onMouseMove: (e) => {
+            setCoords({
+                x: e.clientX,
+                y: e.clientY,
+                top: e.clientY > window.innerHeight / 2,
+                left: e.clientX > window.innerWidth / 2,
+            });
+        }, style: { display: "contents" }, children: [p.children, visible &&
+                createPortal(_jsx("div", { role: "tooltip", className: "elbe_tooltip", style: {
+                        position: "fixed",
+                        pointerEvents: "none",
+                        zIndex: 1001,
+                        top: coords.y + (coords.top ? -12 : 12), // offset below cursor
+                        left: coords.x + (coords.left ? -12 : 12), // offset right of cursor
+                        background: theme.color.currentColor.back
+                            .inter(theme.color.currentColor.front, 0.2)
+                            .asCss(),
+                        color: theme.color.currentColor.front.asCss(),
+                        padding: ".125rem .3rem",
+                        borderRadius: ".25rem",
+                        transform: `translate(${coords.left ? "-100%" : "0"}, ${coords.top ? "-100%" : "0"})`,
+                    }, children: p.tooltip }), rootDOM)] }));
+}

package/dist/ui/theme/subthemes/_theme_geometry.d.ts

@@ -0,0 +1,9 @@
+import { ElbeSubThemeData } from "../theme";
+declare const _data: {
+    size: number;
+    radius: number;
+    padding: number;
+    borderWidth: number;
+};
+export declare const geometryThemeData: ElbeSubThemeData<typeof _data>;
+export {};

package/dist/ui/theme/subthemes/_theme_geometry.js

@@ -0,0 +1,22 @@
+const _data = {
+    size: 16,
+    radius: 0.75,
+    padding: 1,
+    borderWidth: 0.125,
+};
+export const geometryThemeData = {
+    seed: _data,
+    _configType: _data,
+    compute: (c) => c,
+    asCss: (c) => ({}),
+    asCssContext(c) {
+        document.documentElement.style.fontSize = `${c.size}px`;
+        return {
+            size: `${c.size}px`,
+            padding: `${c.padding}rem`,
+            "border-radius": `${c.radius}rem`,
+            "border-width": `${c.borderWidth}rem`,
+        };
+    },
+    fromSeed: (seed) => seed,
+};

package/dist/ui/theme/subthemes/_theme_menu.d.ts

@@ -0,0 +1,9 @@
+import { ElbeSubThemeData } from "../theme";
+import { ColorSelection } from "./color/colors/colors";
+declare const _theme: {
+    scheme: ColorSelection.Schemes;
+    elevated: boolean;
+    sharp: boolean;
+};
+export declare const menuThemeData: ElbeSubThemeData<typeof _theme, typeof _theme>;
+export {};

package/dist/ui/theme/subthemes/_theme_menu.js

@@ -0,0 +1,12 @@
+const _theme = {
+    scheme: "secondary",
+    elevated: false,
+    sharp: false,
+};
+export const menuThemeData = {
+    seed: _theme,
+    _configType: _theme,
+    compute: (c) => c,
+    asCss: (c) => ({}),
+    fromSeed: (seed) => seed,
+};

package/dist/ui/theme/subthemes/_theme_motion.d.ts

@@ -0,0 +1,9 @@
+import { ElbeSubThemeData } from "../theme";
+declare const _seed: {
+    reduced: boolean;
+};
+declare const _theme: {
+    reduced: boolean;
+};
+export declare const motionThemeData: ElbeSubThemeData<typeof _theme, typeof _seed>;
+export {};

package/dist/ui/theme/subthemes/_theme_motion.js

@@ -0,0 +1,13 @@
+const _seed = {
+    reduced: false,
+};
+const _theme = {
+    reduced: false,
+};
+export const motionThemeData = {
+    seed: _seed,
+    _configType: _theme,
+    compute: (c) => c,
+    asCss: (c) => ({}),
+    fromSeed: (seed) => seed,
+};

package/dist/ui/theme/subthemes/_theme_toast.d.ts

@@ -0,0 +1,8 @@
+import { ElbeSubThemeData } from "../theme";
+type _ToastAlignment = "top_start" | "top_center" | "top_end" | "bottom_start" | "bottom_center" | "bottom_end";
+declare const _theme: {
+    alignment: _ToastAlignment;
+    duration: number;
+};
+export declare const toastThemeData: ElbeSubThemeData<typeof _theme, typeof _theme>;
+export {};

package/dist/ui/theme/subthemes/_theme_toast.js

@@ -0,0 +1,11 @@
+const _theme = {
+    alignment: "bottom_center",
+    duration: 3000,
+};
+export const toastThemeData = {
+    seed: _theme,
+    _configType: _theme,
+    compute: (c) => c,
+    asCss: (c) => ({}),
+    fromSeed: (seed) => seed,
+};

package/dist/ui/theme/subthemes/_theme_type.d.ts

@@ -0,0 +1,49 @@
+import { ElbeSubThemeData } from "../theme";
+export type TypeStyle<T extends Dict<any> = {}> = T & {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    family: string[];
+    size: number;
+};
+export declare function typeStyleAsCss(style: TypeStyle | undefined): React.CSSProperties;
+type _VariantSelector<T> = (style: TypeStyle, variant: T) => TypeStyle;
+declare const _seed: {
+    heading: {
+        bold: boolean;
+        family: string[];
+        size: number;
+    };
+    body: {
+        bold: boolean;
+        family: string[];
+        size: number;
+    };
+    code: {
+        bold: boolean;
+        family: string[];
+        size: number;
+    };
+    headingVariants: _VariantSelector<2 | 1 | 3 | 4 | 5 | 6>;
+    bodyVariants: _VariantSelector<"s" | "l">;
+};
+declare const _data: {
+    h1: TypeStyle;
+    h2: TypeStyle;
+    h3: TypeStyle;
+    h4: TypeStyle;
+    h5: TypeStyle;
+    h6: TypeStyle;
+    bodyL: TypeStyle;
+    bodyM: TypeStyle;
+    bodyS: TypeStyle;
+    code: TypeStyle;
+};
+type _Computed = {
+    [key in keyof typeof _data]: TypeStyle<{
+        asCss: (override?: Partial<TypeStyle>) => React.CSSProperties;
+    }>;
+};
+export type ElbeTypeVariants = keyof typeof _data;
+export declare const typeThemeData: ElbeSubThemeData<_Computed, typeof _seed, typeof _data>;
+export {};

package/dist/ui/theme/subthemes/_theme_type.js

@@ -0,0 +1,73 @@
+import { dictMap, dictWithoutUndefined } from "../../util/util";
+export function typeStyleAsCss(style) {
+    var _a, _b;
+    if (!style)
+        return {};
+    return {
+        fontFamily: (_a = style.family.join(", ")) !== null && _a !== void 0 ? _a : "sans-serif",
+        fontWeight: style.bold ? "bold" : "normal",
+        fontSize: `${(_b = style.size) !== null && _b !== void 0 ? _b : 1}rem`,
+        fontStyle: style.italic ? "italic" : "normal",
+        textDecoration: style.underline ? "underline" : "none",
+    };
+}
+const _headingVariants = (style, variant) => {
+    const reg = 1;
+    const diff = style.size - reg;
+    const varFac = (4 - (variant - 2)) / 6;
+    const size = reg + diff * Math.pow(varFac, 1.5);
+    return Object.assign(Object.assign({}, style), { size });
+};
+const _bodyVariants = (style, variant) => {
+    const size = style.size * (variant === "s" ? 0.8 : 1.2);
+    return Object.assign(Object.assign({}, style), { size });
+};
+const _seed = {
+    heading: {
+        bold: true,
+        family: ["Calistoga", "Arial", "sans-serif"],
+        size: 2,
+    },
+    body: {
+        bold: false,
+        family: ["Helvetica", "Arial", "sans-serif"],
+        size: 1,
+    },
+    code: {
+        bold: false,
+        family: ["Courier", "monospace"],
+        size: 1,
+    },
+    headingVariants: _headingVariants,
+    bodyVariants: _bodyVariants,
+};
+const _data = {
+    h1: {},
+    h2: {},
+    h3: {},
+    h4: {},
+    h5: {},
+    h6: {},
+    bodyL: {},
+    bodyM: {},
+    bodyS: {},
+    code: {},
+};
+export const typeThemeData = {
+    seed: _seed,
+    _configType: _data,
+    compute: (c) => dictMap(c, (v) => (Object.assign(Object.assign({}, v), { asCss: (override) => typeStyleAsCss(Object.assign(Object.assign({}, v), dictWithoutUndefined(override))) }))),
+    asCss: (c) => typeStyleAsCss(c.bodyM),
+    fromSeed: (seed) => ({
+        h1: seed.heading,
+        h2: seed.headingVariants(seed.heading, 2),
+        h3: seed.headingVariants(seed.heading, 3),
+        h4: seed.headingVariants(seed.heading, 4),
+        h5: seed.headingVariants(seed.heading, 5),
+        h6: seed.headingVariants(seed.heading, 6),
+        bodyL: seed.bodyVariants(seed.body, "l"),
+        bodyM: seed.body,
+        bodyS: seed.bodyVariants(seed.body, "s"),
+        code: seed.code,
+    }),
+};

package/dist/ui/theme/subthemes/color/_seed.d.ts

@@ -0,0 +1,2 @@
+import { ColorThemeSeed } from "./colors/colors";
+export declare const _seed: ColorThemeSeed;

package/dist/ui/theme/subthemes/color/_seed.js

@@ -0,0 +1,105 @@
+import { LayerColor } from "./colors/_color_layer";
+import { RGBAColor } from "./colors/_color_rgba";
+import { colors, } from "./colors/colors";
+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.mirrorBrightnessLayer();
+    return style.interLayerLayer(LayerColor.fromBack(bL > 0.5 ? colors.black : colors.white), 0.1);
+};
+const _makePrimary = (p) => p.base;
+const _makeSecondary = ({ base, seed }) => LayerColor.new({
+    back: base.back
+        .inter(LayerColor.fromBack(seed.accent).back, base.back.luminance() < 0.3 ? 0.2 : 0.1)
+        .desaturated(0.5),
+    front: base.front,
+    border: base.border,
+});
+const _makeInverse = ({ base }) => base.mirrorBrightnessLayer();
+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 LayerColor.new({
+        back: minor, //.back.withAlpha(0.25),
+        front: minorFront !== null && minorFront !== void 0 ? minorFront : major.inter(backIn, 0.6),
+        border: 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 LayerColor.new({
+        back: base.back, //.withAlpha(0),
+        front,
+        border: front,
+    });
+};
+export const _seed = {
+    base: LayerColor.fromBack(colors.white, {
+        border: RGBAColor.fromHex("#ccc"),
+    }),
+    accent: LayerColor.fromBack(colors.accent.blue),
+    info: LayerColor.fromBack(colors.blue),
+    success: LayerColor.fromBack(colors.green),
+    warning: LayerColor.fromBack(colors.yellow),
+    error: LayerColor.fromBack(colors.red),
+    selection: {
+        contrast: "normal",
+        mode: "light",
+        scheme: "primary",
+        kind: "accent",
+        manner: "plain",
+        state: "neutral",
+    },
+    contrast: {
+        highvis: ({ seed }) => {
+            const base = LayerColor.fromBack(seed.base);
+            return Object.assign(Object.assign({}, seed), { base: base.withBorder(base.front), accent: LayerColor.fromBack(colors.black) });
+        },
+        normal: ({ seed }) => seed,
+    },
+    mode: {
+        light: ({ base }) => base,
+        dark: ({ base }) => base.mirrorBrightnessLayer(),
+    },
+    scheme: {
+        primary: _makePrimary,
+        secondary: (p) => {
+            const highVis = p.path.includes("highvis");
+            return (highVis ? _makePrimary : _makeSecondary)(p);
+        },
+        inverse: _makeInverse,
+    },
+    kind: {
+        accent: _styleSel,
+        info: _styleSel,
+        success: _styleSel,
+        warning: _styleSel,
+        error: _styleSel,
+    },
+    manner: {
+        major: _makeMajor,
+        minor: (p) => {
+            const highVis = p.path.includes("highvis");
+            return highVis ? _makeMajor(p) : _makeMinor(p);
+        },
+        flat: _makeFlat,
+    },
+};