elbe-ui 0.2.30 → 0.2.37

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scroll = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const preact_1 = require("preact");
+const box_1 = require("../base/box");
+class Scroll extends preact_1.Component {
+    constructor(props) {
+        super(props);
+    }
+    static vertical = (p) => new Scroll({ ...p, axis: "vertical" }).render();
+    static horizontal = (p) => new Scroll({ ...p, axis: "horizontal" }).render();
+    render() {
+        return ((0, jsx_runtime_1.jsx)("div", { ...(0, box_1.applyProps)(this.props, null, {
+                overflowY: this.props.axis === "vertical" ? "scroll" : "hidden",
+                overflowX: this.props.axis === "horizontal" ? "scroll" : "hidden",
+            }), children: (0, jsx_runtime_1.jsx)("div", { class: this.props.innerClass, style: this.props.axis === "horizontal" ? "min-width: min-content;" : "", children: this.props.children }) }));
+    }
+}
+exports.Scroll = Scroll;

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

@@ -0,0 +1,3 @@
+export declare function Spaced({ amount }: {
+    amount?: number | undefined;
+}): import("preact").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spaced = Spaced;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+function Spaced({ amount = 1 }) {
+    return (0, jsx_runtime_1.jsx)("div", { style: { width: amount + "rem", height: amount + "rem" } });
+}

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

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

package/dist/ui/components/spinner.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const signals_1 = require("@preact/signals");
+const preact_1 = require("preact");
+const hooks_1 = require("preact/hooks");
+function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
+    return c
+        .filter((p) => p[0] >= clamp[0] && p[0] <= clamp[1])
+        .map((p, i) => (i === 0 ? "M" : "L") +
+        (((p[0] - 0.5) * xFac + 0.5) * 100).toFixed(2) +
+        "," +
+        (p[1] * yFac + yOffset).toFixed(2))
+        .join(" ");
+}
+class Spinner extends preact_1.Component {
+    static flat = (p) => new Spinner({ manner: "flat", ...p }).render();
+    static plain = (p) => new Spinner({ manner: "plain", ...p }).render();
+    render() {
+        const flat = (this.props.manner ?? "flat") === "flat";
+        const xSig = (0, signals_1.useSignal)(0);
+        (0, hooks_1.useEffect)(() => {
+            const interval = setInterval(() => {
+                xSig.value = (xSig.value + 2) % 100;
+            }, 16);
+            return () => clearInterval(interval);
+        });
+        const path = (0, signals_1.useComputed)(() => {
+            const x = xSig.value;
+            const path = [];
+            for (let i = 0; i <= 1; i += 0.01) {
+                const pos = (i * 1 + x * 0.01) * Math.PI * 2; // angle = 0 -> 2π
+                const y = Math.sin(pos);
+                path.push([i, y]);
+            }
+            return path;
+        });
+        return ((0, jsx_runtime_1.jsx)("div", { class: `${flat ? "accent flat" : "plain"}`, style: {
+                padding: `${this.props.padding ?? 1}rem`,
+            }, children: (0, jsx_runtime_1.jsx)("svg", { style: "width: 40px; height: 40px", viewBox: `-10 -10 120 120`, children: [
+                    _toPath(path.value, 13, 20, [0.4, 0.8], 1),
+                    _toPath(path.value, 10, 50),
+                    _toPath(path.value, 11, 80, [0.2, 0.6], 1),
+                ].map((p) => ((0, jsx_runtime_1.jsx)("path", { d: p, fill: "none", stroke: "currentcolor", "stroke-width": "10", "stroke-linecap": "round" }))) }) }));
+    }
+}
+exports.Spinner = Spinner;

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

@@ -0,0 +1,33 @@
+import React from "preact/compat";
+import type { ElbeTypeVariants } from "../theme/type_theme";
+import type { ElbeChildren } from "../util/util";
+import { type ElbeProps } from "./base/box";
+export type TextProps = {
+    align?: "start" | "center" | "end";
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    striked?: boolean;
+    color?: string;
+    size?: number;
+    children?: ElbeChildren;
+    v?: string;
+} & ElbeProps;
+export declare class Text extends React.Component<TextProps & {
+    variant?: ElbeTypeVariants;
+}> {
+    static h1: (p: TextProps) => React.JSX.Element;
+    static h2: (p: TextProps) => React.JSX.Element;
+    static h3: (p: TextProps) => React.JSX.Element;
+    static h4: (p: TextProps) => React.JSX.Element;
+    static h5: (p: TextProps) => React.JSX.Element;
+    static h6: (p: TextProps) => React.JSX.Element;
+    static s: (p: TextProps) => React.JSX.Element;
+    static m: (p: TextProps) => React.JSX.Element;
+    static l: (p: TextProps) => React.JSX.Element;
+    static code: (p: TextProps) => React.JSX.Element;
+    constructor({ variant, ...props }: TextProps & {
+        variant?: ElbeTypeVariants;
+    });
+    render(): React.JSX.Element;
+}

package/dist/ui/components/text.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const compat_1 = __importDefault(require("preact/compat"));
+const box_1 = require("./base/box");
+class Text extends compat_1.default.Component {
+    static h1 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h1" });
+    static h2 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h2" });
+    static h3 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h3" });
+    static h4 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h4" });
+    static h5 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h5" });
+    static h6 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h6" });
+    static s = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "body-s" });
+    static m = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "body-m" });
+    static l = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "body-l" });
+    static code = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "code" });
+    constructor({ variant = "body-m", ...props }) {
+        super({ ...props, variant });
+    }
+    render() {
+        const { align, bold, italic, underline, striked, color, size, children, variant, v, ...elbe } = this.props;
+        return ((0, jsx_runtime_1.jsxs)("span", { ...(0, box_1.applyProps)(elbe, [
+                "text",
+                align,
+                bold && "b",
+                italic && "i",
+                underline && "underline",
+                striked && "striked",
+                color,
+                variant,
+            ], {
+                fontSize: size ? `${size}rem` : "",
+                color: color || "",
+                scrollMarginTop: "2rem",
+            }), children: [v, children] }));
+    }
+}
+exports.Text = Text;

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

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

package/dist/ui/theme/color_theme.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorThemePreset = colorThemePreset;
+const colors_1 = require("./colors");
+function colorThemePreset(merge) {
+    const styleSel = (_, b, s) => {
+        const bL = b.luminance;
+        if (bL === 1)
+            return s;
+        return s.inter(colors_1.LayerColor.fromBack(bL > 0.5 ? colors_1.colors.black : colors_1.colors.white), 0.1);
+    };
+    const seed = merge ?? {};
+    return {
+        base: seed.base ?? colors_1.LayerColor.fromBack(colors_1.colors.white),
+        accent: seed.accent ?? colors_1.LayerColor.fromBack(colors_1.colors.blueAccent),
+        info: seed.info ?? colors_1.LayerColor.fromBack(colors_1.colors.blue),
+        success: seed.success ?? colors_1.LayerColor.fromBack(colors_1.colors.green),
+        warning: seed.warning ?? colors_1.LayerColor.fromBack(colors_1.colors.yellow),
+        error: seed.error ?? colors_1.LayerColor.fromBack(colors_1.colors.red),
+        mode: {
+            light: seed.mode?.light ?? ((_, b) => b),
+            dark: seed.mode?.dark ?? ((_, b) => b.mirrorBrightness()),
+        },
+        scheme: {
+            primary: seed.scheme?.primary ?? ((_, b) => b),
+            secondary: seed.scheme?.secondary ??
+                ((c, b) => new colors_1.LayerColor(b.back.inter(c.accent.back, 0.1).desaturated(0.5), b.front, b.border)),
+            inverse: seed.scheme?.inverse ?? ((_, b) => b.mirrorBrightness()),
+        },
+        style: {
+            accent: styleSel,
+            info: styleSel,
+            success: styleSel,
+            warning: styleSel,
+            error: styleSel,
+        },
+        variant: {
+            major: seed.variant?.major ??
+                ((_, b, s) => colors_1.LayerColor.fromBack(s.back, { border: s.back })),
+            minor: seed.variant?.minor ??
+                ((_, b, s) => {
+                    const back = b.back;
+                    const backIn = back.mirrorBrightness();
+                    const major = s.back;
+                    const minor = s.back.inter(back, 0.8);
+                    const minorFront = minor.hasWCAGContrast(major) ? major : null;
+                    return new colors_1.LayerColor(s.back.withAlpha(0.25), minorFront ?? major.inter(backIn, 0.6), minorFront ?? major.inter(backIn, 0.3));
+                }),
+            flat: seed.variant?.flat ??
+                ((_, b, s) => {
+                    //return new LayerColor(b.back, s?.back ?? b.front, b.front);
+                    //calculate front brightness
+                    const front = !s
+                        ? b.front
+                        : b.back.hasWCAGContrast(s?.back)
+                            ? s?.back
+                            : s?.back.inter(b.front, 0.6);
+                    return new colors_1.LayerColor(b.back, //.withAlpha(0),
+                    front, null, !s ? b.front.withAlpha(0.3) : b.front);
+                }),
+        },
+    };
+}

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

@@ -0,0 +1,142 @@
+export type ElbeColorModes = "light" | "dark";
+export type ElbeColorSchemes = "primary" | "secondary" | "inverse";
+export type ElbeColorKinds = "plain" | "accent" | "info" | "success" | "warning" | "error";
+export type ElbeColorManners = "major" | "minor" | "flat" | "plain";
+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[];
+export type SeedSelector = (seed: ColorThemeSeed, base: LayerColor) => LayerColor;
+export type SeedFlatSelector = (seed: ColorThemeSeed, base: LayerColor, style?: LayerColor) => LayerColor;
+export type SeedStyleSelector = (seed: ColorThemeSeed, base: LayerColor, style: LayerColor) => LayerColor;
+export type ColorSeedColors = {
+    base: LayerColor;
+    accent: LayerColor;
+    info: LayerColor;
+    success: LayerColor;
+    warning: LayerColor;
+    error: LayerColor;
+};
+export type ColorThemeSeed = ColorSeedColors & {
+    mode: {
+        light: SeedSelector;
+        dark: SeedSelector;
+    };
+    scheme: {
+        primary: SeedSelector;
+        secondary: SeedSelector;
+        inverse: SeedSelector;
+    };
+    style: {
+        accent: SeedStyleSelector;
+        info: SeedStyleSelector;
+        success: SeedStyleSelector;
+        warning: SeedStyleSelector;
+        error: SeedStyleSelector;
+    };
+    variant: {
+        major: SeedStyleSelector;
+        minor: SeedStyleSelector;
+        flat: SeedFlatSelector;
+    };
+};
+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;
+    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(_: 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(s: ColorThemeSeed, c: 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(s: ColorThemeSeed, c: 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(seed: ColorThemeSeed, c: LayerColor): SchemeColor;
+}
+export declare class ModeColor extends SchemeColor {
+    light: SchemeColor;
+    dark: SchemeColor;
+    constructor(light: SchemeColor, dark: SchemeColor);
+    asCss(): string;
+    static generate(seed: ColorThemeSeed): ModeColor;
+}
+export declare class ColorTheme {
+    colors: ColorSeedColors;
+    color: ModeColor;
+    constructor(colors: ColorSeedColors, color: ModeColor);
+    asCss(): string;
+    static generate(seed?: Partial<ColorThemeSeed>): ColorTheme;
+}
+export {};