elbe-ui 0.2.41 → 0.2.46

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

@@ -1,12 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = Header;
-exports.Scaffold = Scaffold;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const hooks_1 = require("preact/hooks");
-const __1 = require("../../..");
-const icon_button_1 = require("../button/icon_button");
-const flex_1 = require("./flex");
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { classString, Icons, Text } from "../../..";
+import { IconButton } from "../button/icon_button";
+import { Column, Row } from "./flex";
 /**
  * Header is a layout component that provides a header for a page.
  * It is used to create a consistent header for pages.
@@ -14,31 +21,42 @@ const flex_1 = require("./flex");
  * @param title - The title of the page.
  * @param actions - The actions to show on the right side of the header.
  */
-function Header({ back, title, actions, limitedHeight }) {
-    if (history.length == 0)
+export function Header({ back, title, actions, _absolute }) {
+    // if the icon is a type of back, we have to hide it if there is no history
+    if (typeof back === "string" &&
+        ["back", "close"].includes(back) &&
+        history.length == 0) {
         back = null;
+    }
     const goBack = () => history.go(-1);
-    const [isScrolledTop, setIsScrolled] = (0, hooks_1.useState)(false);
-    (0, hooks_1.useEffect)(() => {
+    const [isScrolled, setIsScrolled] = useState(false);
+    useEffect(() => {
         const _handle = () => setIsScrolled(window.scrollY > 0);
         window.addEventListener("scroll", _handle);
         return () => {
             window.removeEventListener("scroll", _handle);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: "height: 4.5rem" }), (0, jsx_runtime_1.jsxs)("div", { class: "header", style: {
-                    borderColor: isScrolledTop ? "" : "transparent",
-                    position: limitedHeight ? "absolute" : "fixed",
-                }, children: [(0, jsx_runtime_1.jsx)("div", { class: "flex-1", children: back ? ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton.plain, { icon: back === "back" ? __1.Icons.ArrowLeft : __1.Icons.X, onTap: goBack })) : null }), (0, jsx_runtime_1.jsx)(__1.Text.h4, { v: title }), (0, jsx_runtime_1.jsx)(flex_1.Row, { class: "flex-1", gap: 0.5, main: "end", children: actions })] })] }));
+    return (_jsxs("div", { children: [_jsx("div", { style: "height: 4.5rem" }), _jsxs("div", { class: "header", style: {
+                    borderColor: isScrolled
+                        ? "color-mix(in srgb, var(--c-context-border) 40%, transparent)"
+                        : "transparent",
+                    position: _absolute ? "absolute" : "fixed",
+                }, children: [_jsx("div", { class: "flex-1", children: back ? (typeof back !== "string" ? (back) : (_jsx(IconButton.plain, { icon: back === "back" ? Icons.ArrowLeft : Icons.X, onTap: goBack }))) : null }), _jsx(Text.h4, { v: title }), _jsx(Row, { class: "flex-1", gap: 0.5, main: "end", children: actions })] })] }));
 }
 /**
  * Scaffold is a layout component that provides a header and a content area.
  * It is used to create a consistent layout for pages.
  */
-function Scaffold({ children, limited = false, gap = 1, padded = true, scheme, ...header }) {
-    return ((0, jsx_runtime_1.jsxs)(flex_1.Column, { cross: "stretch", gap: 0, class: `${scheme ?? "primary"}`, style: {
-            overflowY: header.limitedHeight ? "scroll" : null,
-            maxHeight: header.limitedHeight ? `${header.limitedHeight}rem` : null,
+export function Scaffold(_a) {
+    var { children, baseLimited = false, gap = 1, padded = true, scheme, scroll = false, height } = _a, header = __rest(_a, ["children", "baseLimited", "gap", "padded", "scheme", "scroll", "height"]);
+    return (_jsxs(Column, { cross: "stretch", gap: 0, typeLabel: "Scaffold", class: `${scheme !== null && scheme !== void 0 ? scheme : "primary"}`, style: {
+            overflowY: height ? "scroll" : null,
+            height: height ? `${height}rem` : scroll ? null : "100vh",
             //height: header.limitToParent ? "100px" : null,
-        }, children: [(0, jsx_runtime_1.jsx)(Header, { ...header }), (0, jsx_runtime_1.jsx)("div", { class: `${padded ? "padded" : ""} ${limited ? "base-limited" : ""}`, children: (0, jsx_runtime_1.jsx)(flex_1.Column, { cross: "stretch", gap: gap ?? 1, children: children }) })] }));
+        }, children: [_jsx(Header, Object.assign({}, header, { _absolute: height ? true : false })), _jsx("div", { class: classString([
+                    !scroll && "flex-1",
+                    padded && "padded",
+                    baseLimited && "base-limited",
+                ]), children: _jsx(Column, { cross: "stretch", style: { height: scroll ? null : "100%" }, gap: gap !== null && gap !== void 0 ? gap : 1, children: children }) })] }));
 }

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

@@ -1,20 +1,16 @@
-"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 {
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Component } from "preact";
+import { applyProps } from "../base/box";
+export class Scroll extends 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 }) }));
+        return (_jsx("div", Object.assign({}, applyProps(this.props, null, {
+            overflowY: this.props.axis === "vertical" ? "scroll" : "hidden",
+            overflowX: this.props.axis === "horizontal" ? "scroll" : "hidden",
+        }), { children: _jsx("div", { class: this.props.innerClass, style: this.props.axis === "horizontal" ? "min-width: min-content;" : "", children: this.props.children }) })));
     }
 }
-exports.Scroll = Scroll;
+Scroll.vertical = (p) => new Scroll(Object.assign(Object.assign({}, p), { axis: "vertical" })).render();
+Scroll.horizontal = (p) => new Scroll(Object.assign(Object.assign({}, p), { axis: "horizontal" })).render();

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

@@ -1,7 +1,4 @@
-"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" } });
+import { jsx as _jsx } from "preact/jsx-runtime";
+export function Spaced({ amount = 1 }) {
+    return _jsx("div", { style: { width: amount + "rem", height: amount + "rem" } });
 }

package/dist/ui/components/spinner.js

@@ -1,10 +1,7 @@
-"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");
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useComputed, useSignal } from "@preact/signals";
+import { Component } from "preact";
+import { useEffect } from "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])
@@ -14,19 +11,18 @@ function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
         (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();
+export class Spinner extends Component {
     render() {
-        const flat = (this.props.manner ?? "flat") === "flat";
-        const xSig = (0, signals_1.useSignal)(0);
-        (0, hooks_1.useEffect)(() => {
+        var _a, _b;
+        const flat = ((_a = this.props.manner) !== null && _a !== void 0 ? _a : "flat") === "flat";
+        const xSig = useSignal(0);
+        useEffect(() => {
             const interval = setInterval(() => {
                 xSig.value = (xSig.value + 2) % 100;
             }, 16);
             return () => clearInterval(interval);
         });
-        const path = (0, signals_1.useComputed)(() => {
+        const path = useComputed(() => {
             const x = xSig.value;
             const path = [];
             for (let i = 0; i <= 1; i += 0.01) {
@@ -36,13 +32,14 @@ class Spinner extends preact_1.Component {
             }
             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: [
+        return (_jsx("div", { class: `${flat ? "accent flat" : "plain"}`, style: {
+                padding: `${(_b = this.props.padding) !== null && _b !== void 0 ? _b : 1}rem`,
+            }, children: _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" }))) }) }));
+                ].map((p) => (_jsx("path", { d: p, fill: "none", stroke: "currentcolor", "stroke-width": "10", "stroke-linecap": "round" }))) }) }));
     }
 }
-exports.Spinner = Spinner;
+Spinner.flat = (p) => new Spinner(Object.assign({ manner: "flat" }, p)).render();
+Spinner.plain = (p) => new Spinner(Object.assign({ manner: "plain" }, p)).render();

package/dist/ui/components/text.js

@@ -1,42 +1,47 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-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 });
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import React from "preact/compat";
+import { applyProps } from "./base/box";
+export class Text extends React.Component {
+    constructor(_a) {
+        var { variant = "body-m" } = _a, props = __rest(_a, ["variant"]);
+        super(Object.assign(Object.assign({}, 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] }));
+        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(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;
+Text.h1 = (p) => _jsx(Text, Object.assign({}, p, { variant: "h1" }));
+Text.h2 = (p) => _jsx(Text, Object.assign({}, p, { variant: "h2" }));
+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.code = (p) => _jsx(Text, Object.assign({}, p, { variant: "code" }));

package/dist/ui/theme/color_theme.js

@@ -1,31 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorThemePreset = colorThemePreset;
-const colors_1 = require("./colors");
-function colorThemePreset(merge) {
+import { colors, LayerColor, } from "./colors";
+export function colorThemePreset(merge) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     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);
+        return s.inter(LayerColor.fromBack(bL > 0.5 ? colors.black : colors.white), 0.1);
     };
-    const seed = merge ?? {};
+    const seed = merge !== null && merge !== void 0 ? 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),
+        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),
         mode: {
-            light: seed.mode?.light ?? ((_, b) => b),
-            dark: seed.mode?.dark ?? ((_, b) => b.mirrorBrightness()),
+            light: (_h = (_g = seed.mode) === null || _g === void 0 ? void 0 : _g.light) !== null && _h !== void 0 ? _h : ((_, b) => b),
+            dark: (_k = (_j = seed.mode) === null || _j === void 0 ? void 0 : _j.dark) !== null && _k !== void 0 ? _k : ((_, 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()),
+            primary: (_m = (_l = seed.scheme) === null || _l === void 0 ? void 0 : _l.primary) !== null && _m !== void 0 ? _m : ((_, b) => b),
+            secondary: (_p = (_o = seed.scheme) === null || _o === void 0 ? void 0 : _o.secondary) !== null && _p !== void 0 ? _p : ((c, b) => new LayerColor(b.back.inter(c.accent.back, 0.1).desaturated(0.5), b.front, b.border)),
+            inverse: (_r = (_q = seed.scheme) === null || _q === void 0 ? void 0 : _q.inverse) !== null && _r !== void 0 ? _r : ((_, b) => b.mirrorBrightness()),
         },
         style: {
             accent: styleSel,
@@ -35,29 +32,26 @@ function colorThemePreset(merge) {
             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);
-                }),
+            major: (_t = (_s = seed.variant) === null || _s === void 0 ? void 0 : _s.major) !== null && _t !== void 0 ? _t : ((_, __, s) => LayerColor.fromBack(s.back, { border: s.back })),
+            minor: (_v = (_u = seed.variant) === null || _u === void 0 ? void 0 : _u.minor) !== null && _v !== void 0 ? _v : ((_, 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 LayerColor(s.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));
+            }),
+            flat: (_x = (_w = seed.variant) === null || _w === void 0 ? void 0 : _w.flat) !== null && _x !== void 0 ? _x : ((_, 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 === null || s === void 0 ? void 0 : s.back)
+                        ? s === null || s === void 0 ? void 0 : s.back
+                        : s === null || s === void 0 ? void 0 : s.back.inter(b.front, 0.6);
+                return new LayerColor(b.back, //.withAlpha(0),
+                front, null, !s ? b.front.withAlpha(0.3) : b.front);
+            }),
         },
     };
 }

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());