elbe-ui 0.2.41 → 0.2.44

package/dist/ui/theme/colors.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorTheme = exports.ModeColor = exports.SchemeColor = exports.KindColor = exports.MannerColor = exports.StateColor = exports.LayerColor = exports.colors = exports.RGBAColor = exports.cLayers = exports.cStates = exports.cManners = exports.cKinds = exports.cSchemes = exports.cModes = void 0;
-const colors_convert_1 = require("colors-convert");
-const util_1 = require("../util/util");
-const color_theme_1 = require("./color_theme");
-exports.cModes = ["light", "dark"];
-exports.cSchemes = ["primary", "secondary", "inverse"];
-exports.cKinds = [
+import { hslToRgb, rgbToHsl } from "colors-convert";
+import { clamp } from "../util/util";
+import { colorThemePreset } from "./color_theme";
+export const cModes = ["light", "dark"];
+export const cSchemes = ["primary", "secondary", "inverse"];
+export const cKinds = [
     "plain",
     "accent",
     "info",
@@ -14,14 +11,10 @@ exports.cKinds = [
     "warning",
     "error",
 ];
-exports.cManners = ["major", "minor", "flat", "plain"];
-exports.cStates = ["neutral", "hover", "active", "disabled"];
-exports.cLayers = ["back", "front", "border"];
-class RGBAColor {
-    r;
-    g;
-    b;
-    a;
+export const cManners = ["major", "minor", "flat", "plain"];
+export const cStates = ["neutral", "hover", "active", "disabled"];
+export const cLayers = ["back", "front", "border"];
+export class RGBAColor {
     constructor(r, g, b, a) {
         this.r = r;
         this.g = g;
@@ -66,14 +59,9 @@ class RGBAColor {
         return new RGBAColor(this.r + (other.r - this.r) * factor, this.g + (other.g - this.g) * factor, this.b + (other.b - this.b) * factor, this.a + (other.a - this.a) * factor);
     }
     mirrorBrightness(factor = 1) {
-        const hsl = (0, colors_convert_1.rgbToHsl)({ r: this.r, g: this.g, b: this.b });
+        const hsl = rgbToHsl({ r: this.r, g: this.g, b: this.b });
         const newL = (50 - hsl.l) * (factor * 2 - 1) + 50;
-        const rgb = (0, colors_convert_1.hslToRgb)({
-            ...hsl,
-            l: (0, util_1.clamp)(newL, 0, 100),
-            s: (0, util_1.clamp)(hsl.s, 0, 100),
-            //s: -Math.abs(2 * newL - 100) + 100,
-        });
+        const rgb = hslToRgb(Object.assign(Object.assign({}, hsl), { l: clamp(newL, 0, 100), s: clamp(hsl.s, 0, 100) }));
         return new RGBAColor(rgb.r, rgb.g, rgb.b, this.a);
     }
     get values() {
@@ -88,8 +76,7 @@ class RGBAColor {
         return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
     }
 }
-exports.RGBAColor = RGBAColor;
-exports.colors = {
+export const colors = {
     transparent: new RGBAColor(0, 0, 0, 0),
     white: new RGBAColor(255, 255, 255, 1),
     black: new RGBAColor(0, 0, 0, 1),
@@ -99,56 +86,53 @@ exports.colors = {
     yellow: new RGBAColor(240, 221, 21, 1),
     red: new RGBAColor(243, 67, 67, 1),
 };
-class LayerColor extends RGBAColor {
-    back;
-    border;
-    borderContext;
-    front;
+export class LayerColor extends RGBAColor {
     constructor(back, front, border, borderContext) {
         super(back.r, back.g, back.b, back.a);
         this.back = back;
         this.border = border;
         this.borderContext = borderContext;
-        this.front = front ?? (back.isDark ? exports.colors.white : exports.colors.black);
+        this.front = front !== null && front !== void 0 ? front : (back.isDark ? colors.white : colors.black);
     }
     asCss() {
+        var _a, _b;
         return (`background-color: ${this.back.asCss()};\n` +
             `color: ${this.front.asCss()};\n` +
-            `border-color: ${this.border?.asCss() ?? "transparent"};\n` +
+            `border-color: ${(_b = (_a = this.border) === null || _a === void 0 ? void 0 : _a.asCss()) !== null && _b !== void 0 ? _b : "transparent"};\n` +
             //`border-color: ${this.border?.asCss() ?? "transparent"};\n` +
             this.contextCss());
     }
     inter(other, factor) {
-        return new LayerColor(this.back.inter(other.back, factor), this.front.inter(other.front, factor), this.border?.inter(other.border ?? exports.colors.transparent, factor), this.borderContext?.inter(other.borderContext ?? exports.colors.transparent, factor));
+        var _a, _b, _c, _d;
+        return new LayerColor(this.back.inter(other.back, factor), this.front.inter(other.front, factor), (_a = this.border) === null || _a === void 0 ? void 0 : _a.inter((_b = other.border) !== null && _b !== void 0 ? _b : colors.transparent, factor), (_c = this.borderContext) === null || _c === void 0 ? void 0 : _c.inter((_d = other.borderContext) !== null && _d !== void 0 ? _d : colors.transparent, factor));
     }
     mirrorBrightness(factor) {
-        return new LayerColor(this.back.mirrorBrightness(factor), this.front.mirrorBrightness(factor), this.border?.mirrorBrightness(factor), this.borderContext?.mirrorBrightness(factor));
+        var _a, _b;
+        return new LayerColor(this.back.mirrorBrightness(factor), this.front.mirrorBrightness(factor), (_a = this.border) === null || _a === void 0 ? void 0 : _a.mirrorBrightness(factor), (_b = this.borderContext) === null || _b === void 0 ? void 0 : _b.mirrorBrightness(factor));
     }
     desaturated() {
-        return new LayerColor(this.back.desaturated(), this.front.desaturated(), this.border?.desaturated(), this.borderContext?.desaturated());
+        var _a, _b;
+        return new LayerColor(this.back.desaturated(), this.front.desaturated(), (_a = this.border) === null || _a === void 0 ? void 0 : _a.desaturated(), (_b = this.borderContext) === null || _b === void 0 ? void 0 : _b.desaturated());
     }
     static fromHex(back, front, border) {
         if (front === undefined && border === undefined) {
             return LayerColor.fromBack(RGBAColor.fromHex(back));
         }
-        return new LayerColor(RGBAColor.fromHex(back), RGBAColor.fromHex(front ?? null), RGBAColor.fromHex(border ?? null));
+        return new LayerColor(RGBAColor.fromHex(back), RGBAColor.fromHex(front !== null && front !== void 0 ? front : null), RGBAColor.fromHex(border !== null && border !== void 0 ? border : null));
     }
     static fromBack(back, c) {
-        const front = back.isDark ? exports.colors.white : exports.colors.black;
-        return new LayerColor(back, c?.front ?? front, c?.border ?? front);
+        var _a, _b;
+        const front = back.isDark ? colors.white : colors.black;
+        return new LayerColor(back, (_a = c === null || c === void 0 ? void 0 : c.front) !== null && _a !== void 0 ? _a : front, (_b = c === null || c === void 0 ? void 0 : c.border) !== null && _b !== void 0 ? _b : front);
     }
     contextCss() {
+        var _a, _b, _c;
         return (`--c-context-back: ${this.back.asCss()};\n` +
             `--c-context-front: ${this.front.asCss()};` +
-            `--c-context-border: ${(this.borderContext ?? this.border)?.asCss() ?? "transparent"};`);
+            `--c-context-border: ${(_c = (_b = ((_a = this.borderContext) !== null && _a !== void 0 ? _a : this.border)) === null || _b === void 0 ? void 0 : _b.asCss()) !== null && _c !== void 0 ? _c : "transparent"};`);
     }
 }
-exports.LayerColor = LayerColor;
-class StateColor extends LayerColor {
-    neutral;
-    hover;
-    active;
-    disabled;
+export class StateColor extends LayerColor {
     constructor(neutral, hover, active, disabled) {
         super(neutral.back, neutral.front, neutral.border);
         this.neutral = neutral;
@@ -182,21 +166,18 @@ class StateColor extends LayerColor {
         return new StateColor(style, _make(0.075), _make(0.25), style.desaturated());
     }
 }
-exports.StateColor = StateColor;
-class MannerColor extends StateColor {
-    major;
-    minor;
-    flat;
+export class MannerColor extends StateColor {
     constructor(major, minor, flat) {
-        const m = major ?? flat;
+        const m = major !== null && major !== void 0 ? major : flat;
         super(m.neutral, m.hover, m.active, m.disabled);
         this.major = major;
         this.minor = minor;
         this.flat = flat;
     }
     asCss(fallback) {
-        const maj = this.major ?? fallback?.major;
-        const min = this.minor ?? fallback?.minor;
+        var _a, _b;
+        const maj = (_a = this.major) !== null && _a !== void 0 ? _a : fallback === null || fallback === void 0 ? void 0 : fallback.major;
+        const min = (_b = this.minor) !== null && _b !== void 0 ? _b : fallback === null || fallback === void 0 ? void 0 : fallback.minor;
         return (`${this.flat.asCss()}\n` +
             (maj ? `&.major { ${maj.asCss()} } \n` : "") +
             (min ? `&.minor { ${min.asCss()} } \n` : "") +
@@ -222,14 +203,7 @@ class MannerColor extends StateColor {
         */
     }
 }
-exports.MannerColor = MannerColor;
-class KindColor extends MannerColor {
-    plain;
-    accent;
-    info;
-    success;
-    warning;
-    error;
+export class KindColor extends MannerColor {
     constructor(plain, accent, info, success, warning, error) {
         super(plain.major, plain.minor, plain.flat);
         this.plain = plain;
@@ -253,11 +227,7 @@ class KindColor extends MannerColor {
         return new KindColor(MannerColor.generate(s, c), MannerColor.generate(s, c, s.style.accent(s, c, s.accent)), MannerColor.generate(s, c, s.style.info(s, c, s.info)), MannerColor.generate(s, c, s.style.success(s, c, s.success)), MannerColor.generate(s, c, s.style.warning(s, c, s.warning)), MannerColor.generate(s, c, s.style.error(s, c, s.error)));
     }
 }
-exports.KindColor = KindColor;
-class SchemeColor extends KindColor {
-    primary;
-    secondary;
-    inverse;
+export class SchemeColor extends KindColor {
     constructor(primary, secondary, inverse) {
         super(primary.plain, primary.accent, primary.info, primary.success, primary.warning, primary.error);
         this.primary = primary;
@@ -275,10 +245,7 @@ class SchemeColor extends KindColor {
         return new SchemeColor(KindColor.generate(seed, m.primary(seed, c)), KindColor.generate(seed, m.secondary(seed, c)), KindColor.generate(seed, m.inverse(seed, c)));
     }
 }
-exports.SchemeColor = SchemeColor;
-class ModeColor extends SchemeColor {
-    light;
-    dark;
+export class ModeColor extends SchemeColor {
     constructor(light, dark) {
         super(light.primary, light.secondary, light.inverse);
         this.light = light;
@@ -291,10 +258,7 @@ class ModeColor extends SchemeColor {
         return new ModeColor(SchemeColor.generate(seed, seed.base), SchemeColor.generate(seed, seed.mode.dark(seed, seed.base)));
     }
 }
-exports.ModeColor = ModeColor;
-class ColorTheme {
-    colors;
-    color;
+export class ColorTheme {
     constructor(colors, color) {
         this.colors = colors;
         this.color = color;
@@ -310,9 +274,8 @@ class ColorTheme {
             this.color.asCss());
     }
     static generate(seed) {
-        const s = (0, color_theme_1.colorThemePreset)(seed);
+        const s = colorThemePreset(seed);
         return new ColorTheme(s, ModeColor.generate(s));
     }
 }
-exports.ColorTheme = ColorTheme;
 //Bun.write("./example.css", ColorTheme.generate().asCss());

package/dist/ui/theme/geometry_theme.js

@@ -1,12 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GeometryTheme = void 0;
-exports.geometryThemePreset = geometryThemePreset;
-class GeometryTheme {
-    size;
-    radius;
-    padding;
-    borderWidth;
+export class GeometryTheme {
     constructor(size, radius, padding, borderWidth) {
         this.size = size;
         this.radius = radius;
@@ -26,13 +18,13 @@ class GeometryTheme {
         return new GeometryTheme(s.size, s.radius, s.padding, s.borderWidth);
     }
 }
-exports.GeometryTheme = GeometryTheme;
-function geometryThemePreset(merge) {
-    const seed = merge ?? {};
+export function geometryThemePreset(merge) {
+    var _a, _b, _c, _d;
+    const seed = merge !== null && merge !== void 0 ? merge : {};
     return {
-        size: seed.size ?? 16,
-        radius: seed.radius ?? 0.75,
-        padding: seed.padding ?? 1,
-        borderWidth: seed.borderWidth ?? 0.125,
+        size: (_a = seed.size) !== null && _a !== void 0 ? _a : 16,
+        radius: (_b = seed.radius) !== null && _b !== void 0 ? _b : 0.75,
+        padding: (_c = seed.padding) !== null && _c !== void 0 ? _c : 1,
+        borderWidth: (_d = seed.borderWidth) !== null && _d !== void 0 ? _d : 0.125,
     };
 }

package/dist/ui/theme/theme.js

@@ -1,33 +1,12 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ElbeThemeData = void 0;
-exports.ElbeTheme = ElbeTheme;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const colors_1 = require("./colors");
-const geometry_theme_1 = require("./geometry_theme");
-const type_theme_1 = require("./type_theme");
-__exportStar(require("./color_theme"), exports);
-__exportStar(require("./colors"), exports);
-__exportStar(require("./geometry_theme"), exports);
-__exportStar(require("./type_theme"), exports);
-class ElbeThemeData {
-    color;
-    type;
-    geometry;
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { ColorTheme } from "./colors";
+import { GeometryTheme } from "./geometry_theme";
+import { TypeTheme } from "./type_theme";
+export * from "./color_theme";
+export * from "./colors";
+export * from "./geometry_theme";
+export * from "./type_theme";
+export class ElbeThemeData {
     constructor(color, type, geometry) {
         this.color = color;
         this.type = type;
@@ -39,11 +18,10 @@ class ElbeThemeData {
             .join("\n");
     }
     static fromSeed(seed) {
-        return new ElbeThemeData(colors_1.ColorTheme.generate(seed.color), type_theme_1.TypeTheme.generate(seed.type), geometry_theme_1.GeometryTheme.generate(seed.geometry));
+        return new ElbeThemeData(ColorTheme.generate(seed.color), TypeTheme.generate(seed.type), GeometryTheme.generate(seed.geometry));
     }
 }
-exports.ElbeThemeData = ElbeThemeData;
-function ElbeTheme(p) {
+export function ElbeTheme(p) {
     const theme = "seed" in p ? ElbeThemeData.fromSeed(p.seed) : p.theme;
-    return ((0, jsx_runtime_1.jsxs)("div", { class: `elbe ${p.dark ? "dark" : ""}`, children: [(0, jsx_runtime_1.jsx)("style", { children: theme.asCss() }), p.children] }));
+    return (_jsxs("div", { class: `elbe ${p.dark ? "dark" : ""}`, children: [_jsx("style", { children: theme.asCss() }), p.children] }));
 }

package/dist/ui/theme/type_theme.js

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypeTheme = exports.tVariants = void 0;
-exports.typeThemePreset = typeThemePreset;
-exports.tVariants = [
+export const tVariants = [
     "h1",
     "h2",
     "h3",
@@ -21,17 +17,7 @@ function _typeStyleAsCss(t) {
         `font-style: ${t.italic ? "italic" : "normal"};\n` +
         `text-decoration: ${t.underline ? "underline" : "none"};\n`);
 }
-class TypeTheme {
-    h1;
-    h2;
-    h3;
-    h4;
-    h5;
-    h6;
-    bodyL;
-    body;
-    bodyS;
-    code;
+export class TypeTheme {
     constructor(h1, h2, h3, h4, h5, h6, bodyL, body, bodyS, code) {
         this.h1 = h1;
         this.h2 = h2;
@@ -61,38 +47,24 @@ class TypeTheme {
         return new TypeTheme(s.heading, s.headingVariants(s.heading, 2), s.headingVariants(s.heading, 3), s.headingVariants(s.heading, 4), s.headingVariants(s.heading, 5), s.headingVariants(s.heading, 6), s.bodyVariants(s.body, "l"), s.body, s.bodyVariants(s.body, "s"), s.code);
     }
 }
-exports.TypeTheme = TypeTheme;
-function typeThemePreset(merge) {
-    return {
-        heading: {
+export function typeThemePreset(merge) {
+    return Object.assign({ heading: {
             bold: true,
             family: ["Calistoga", "Arial", "sans-serif"],
             size: 2.2,
-        },
-        body: {
+        }, body: {
             bold: false,
             family: ["Helvetica", "Arial", "sans-serif"],
             size: 1,
-        },
-        code: {
+        }, code: {
             bold: false,
             family: ["Courier", "monospace"],
             size: 1,
-        },
-        headingVariants: (style, variant) => {
+        }, headingVariants: (style, variant) => {
             const size = style.size * (1 - (variant - 1) * 0.1);
-            return {
-                ...style,
-                size,
-            };
-        },
-        bodyVariants: (style, variant) => {
+            return Object.assign(Object.assign({}, style), { size });
+        }, bodyVariants: (style, variant) => {
             const size = style.size * (variant === "s" ? 0.8 : 1.2);
-            return {
-                ...style,
-                size,
-            };
-        },
-        ...merge,
-    };
+            return Object.assign(Object.assign({}, style), { size });
+        } }, merge);
 }

package/dist/ui/util/confirm_dialog.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showConfirmDialog = showConfirmDialog;
 /**
  * show a simple confirm dialog
  * @param param0 the title and message of the dialog
  * @returns a promise that resolves to true if the user clicks "yes" or "okay" and false if the user clicks "no"
  */
-function showConfirmDialog({ title, message, okay = false, }) {
+export function showConfirmDialog({ title, message, okay = false, }) {
     return new Promise((resolve, reject) => {
         const dialog = document.createElement("div");
         dialog.classList.add("dialog");

package/dist/ui/util/error_view.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._ElbeErr = _ElbeErr;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const __1 = require("../..");
-function _ElbeErr(msg) {
-    return ((0, jsx_runtime_1.jsxs)("div", { class: "row text-s gap-half", style: "background: #ee0044; color: white; border-radius: 4px; text-align: left; padding: .5rem", children: [(0, jsx_runtime_1.jsx)(__1.Icons.CircleX, {}), (0, jsx_runtime_1.jsxs)("div", { class: "column gap-none cross-stretch", children: [(0, jsx_runtime_1.jsx)("b", { class: "text-s", children: "elbe error" }), (0, jsx_runtime_1.jsx)("span", { style: "margin-top: -.125rem", children: msg })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Icons } from "../..";
+export function _ElbeErr(msg) {
+    return (_jsxs("div", { class: "row text-s gap-half", style: "background: #ee0044; color: white; border-radius: 4px; text-align: left; padding: .5rem", children: [_jsx(Icons.CircleX, {}), _jsxs("div", { class: "column gap-none cross-stretch", children: [_jsx("b", { class: "text-s", children: "elbe error" }), _jsx("span", { style: "margin-top: -.125rem", children: msg })] })] }));
 }

package/dist/ui/util/toast.js

@@ -1,11 +1,8 @@
-"use strict";
 /**
  * show a toast message at the bottom of the screen
  * @param message the message to show
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showToast = showToast;
-function showToast(message) {
+export function showToast(message) {
     const toast = document.createElement("div");
     toast.classList.add("toast");
     toast.classList.add("inverse");

package/dist/ui/util/util.js

@@ -1,11 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.clamp = clamp;
-exports.share = share;
-exports.copyToClipboard = copyToClipboard;
-exports.scrollToId = scrollToId;
-const toast_1 = require("./toast");
-function clamp(value, min, max) {
+import { showToast } from "./toast";
+export function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }
 /**
@@ -13,8 +7,9 @@ function clamp(value, min, max) {
  * @param data the data you want to share
  * @param toastMsg the message to show in the toast if the share api is not available
  */
-function share(data, toastMsg = "copied to clipboard. Share it with others.") {
-    const msg = `${data.title}\n${data.text ?? ""}\n\n${data.url}`;
+export function share(data, toastMsg = "copied to clipboard. Share it with others.") {
+    var _a;
+    const msg = `${data.title}\n${(_a = data.text) !== null && _a !== void 0 ? _a : ""}\n\n${data.url}`;
     if (navigator.share) {
         navigator.share(data).catch(() => copyToClipboard(msg, toastMsg));
     }
@@ -27,12 +22,12 @@ function share(data, toastMsg = "copied to clipboard. Share it with others.") {
  * @param text the text to copy to the clipboard
  * @param toastMsg the message to show in the toast
  */
-function copyToClipboard(text, toastMsg = "copied to clipboard") {
+export function copyToClipboard(text, toastMsg = "copied to clipboard") {
     navigator.clipboard.writeText(text);
     if (toastMsg)
-        (0, toast_1.showToast)(toastMsg);
+        showToast(toastMsg);
 }
-function scrollToId(id) {
+export function scrollToId(id) {
     const el = document.getElementById(id);
     if (el)
         el.scrollIntoView({ behavior: "smooth" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "0.2.41",
+  "version": "0.2.44",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -21,7 +21,8 @@
     "build:ts": "tsc",
     "build:dts": "tsc --declaration",
     "build:css": "sass -q style/elbe.scss dist/elbe.css",
-    "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css"
+    "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css",
+    "pub": "bun run build && npm publish"
   },
   "devDependencies": {
     "@types/bun": "latest",