elbe-ui 0.2.37 → 0.2.44

package/dist/ui/components/input/checkbox.js

@@ -1,12 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = Checkbox;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function Checkbox({ value, label, onChange, ...elbe }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { class: `row ${onChange ? "" : "disabled"}`, style: {
+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 { applyProps } from "../base/box";
+export function Checkbox(_a) {
+    var { value, label, onChange } = _a, elbe = __rest(_a, ["value", "label", "onChange"]);
+    return (_jsxs("div", { class: `row ${onChange ? "" : "disabled"}`, style: {
             gap: ".75rem",
             filter: onChange ? "" : "grayscale(1)",
             opacity: onChange ? "" : "0.5",
-        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", ...(0, box_1.applyProps)(elbe), disabled: !onChange, checked: value, onChange: (e) => onChange?.(e.currentTarget.checked) }), label && (0, jsx_runtime_1.jsx)("div", { style: "margin-top: -.25rem", children: label })] }));
+        }, children: [_jsx("input", Object.assign({ type: "checkbox" }, applyProps(elbe), { disabled: !onChange, checked: value, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked) })), label && _jsx("div", { style: "margin-top: -.25rem", children: label })] }));
 }

package/dist/ui/components/input/input_field.js

@@ -1,31 +1,36 @@
-"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.Field = void 0;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const compat_1 = __importDefault(require("preact/compat"));
-const box_1 = require("../base/box");
-const text_area_1 = require("./text_area");
-class Field extends compat_1.default.Component {
-    static text = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "text" });
-    static number = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "number" });
-    static password = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "password" });
-    static date = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "date" });
-    static time = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "time" });
-    static email = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "email" });
-    static multiLine = text_area_1._TextArea;
+import { jsx as _jsx } from "preact/jsx-runtime";
+import React from "preact/compat";
+import { applyProps } from "../base/box";
+import { _TextArea } from "./text_area";
+export class Field extends React.Component {
     render() {
-        const { label, hint, readonly, type, value, onInput, ...elbe } = this.props;
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+        var _a;
+        const _b = this.props, { label, hint, readonly, type, value, onInput } = _b, elbe = __rest(_b, ["label", "hint", "readonly", "type", "value", "onInput"]);
+        return (_jsx("div", { style: {
                 width: "12rem !important",
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "stretch",
-            }, "data-tooltip": this.props?.tooltip, children: (0, jsx_runtime_1.jsx)("input", { type: this.props.type, ...(0, box_1.applyProps)(this.props, null, {
-                    width: "100%",
-                }), size: 5, label: this.props.label, placeholder: this.props.hint, value: this.props.value, onInput: (e) => this.props.onInput && this.props.onInput(e.currentTarget.value), readonly: this.props.readonly }) }));
+            }, "data-tooltip": (_a = this.props) === null || _a === void 0 ? void 0 : _a.tooltip, children: _jsx("input", Object.assign({ type: this.props.type }, applyProps(this.props, null, {
+                width: "100%",
+            }), { size: 5, label: this.props.label, placeholder: this.props.hint, value: this.props.value, onInput: (e) => this.props.onInput && this.props.onInput(e.currentTarget.value), readonly: this.props.readonly })) }));
     }
 }
-exports.Field = Field;
+Field.text = (p) => _jsx(Field, Object.assign({}, p, { type: "text" }));
+Field.number = (p) => _jsx(Field, Object.assign({}, p, { type: "number" }));
+Field.password = (p) => _jsx(Field, Object.assign({}, p, { type: "password" }));
+Field.date = (p) => _jsx(Field, Object.assign({}, p, { type: "date" }));
+Field.time = (p) => _jsx(Field, Object.assign({}, p, { type: "time" }));
+Field.email = (p) => _jsx(Field, Object.assign({}, p, { type: "email" }));
+Field.multiLine = _TextArea;

package/dist/ui/components/input/range.js

@@ -1,14 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Range = Range;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const error_view_1 = require("../../util/error_view");
-const box_1 = require("../base/box");
-function Range({ value, onChange, min = 0, max = 100, step = 1, ...elbe }) {
-    return min > max ? ((0, error_view_1._ElbeErr)("Range: max is smaller than min")) : ((0, jsx_runtime_1.jsx)("input", { type: "range", ...(0, box_1.applyProps)(elbe, null, {
+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 } from "preact/jsx-runtime";
+import { _ElbeErr } from "../../util/error_view";
+import { applyProps } from "../base/box";
+import { Card } from "../base/card";
+export function Range(_a) {
+    var { value, onChange, min = 0, max = 100, step = 1 } = _a, elbe = __rest(_a, ["value", "onChange", "min", "max", "step"]);
+    return min > max ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { scheme: "secondary", kind: "accent", manner: "minor", style: {
+            overflow: "unset",
+            backgroundColor: "transparent",
+            padding: "0",
+            margin: "0",
+            border: "none",
+            width: "100%",
+        }, children: _jsx("input", Object.assign({ type: "range" }, applyProps(elbe, null, {
             filter: onChange ? "" : "grayscale(1)",
             opacity: onChange ? "" : "0.5",
             cursor: onChange ? "pointer" : "not-allowed",
             width: "100%",
-        }), min: min, max: max, step: step, disabled: !onChange, value: value, onInput: (e) => onChange?.(Number(e.currentTarget.value)) }));
+        }), { min: min, max: max, step: step, disabled: !onChange, value: value, onInput: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.currentTarget.value)) })) }));
 }

package/dist/ui/components/input/select.js

@@ -1,8 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = Select;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function Select({ options, value, label, onChange, ...elbe }) {
-    return ((0, jsx_runtime_1.jsx)("select", { ...(0, box_1.applyProps)(elbe), value: value, label: label, onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: label }, key))) }));
+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 } from "preact/jsx-runtime";
+import { applyProps } from "../base/box";
+export function Select(_a) {
+    var { options, value, label, onChange } = _a, elbe = __rest(_a, ["options", "value", "label", "onChange"]);
+    return (_jsx("select", Object.assign({}, applyProps(elbe), { value: value, label: label, onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
 }

package/dist/ui/components/input/text_area.js

@@ -1,13 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._TextArea = _TextArea;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function _TextArea({ label, hint, readonly, rows = 4, maxLength, value, onInput, ...elbe }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+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 } from "preact/jsx-runtime";
+import { applyProps } from "../base/box";
+export function _TextArea(_a) {
+    var { label, hint, readonly, rows = 4, maxLength, value, onInput } = _a, elbe = __rest(_a, ["label", "hint", "readonly", "rows", "maxLength", "value", "onInput"]);
+    return (_jsx("div", { style: {
             width: "12rem !important",
             display: "flex",
             flexDirection: "column",
             alignItems: "stretch",
-        }, "data-tooltip": elbe.tooltip, children: (0, jsx_runtime_1.jsx)("textarea", { ...(0, box_1.applyProps)(elbe, null, { width: "100%" }), label: label, size: 5, cols: 5, placeholder: hint, rows: rows, maxLength: maxLength, value: value, onInput: (e) => onInput && onInput(e.currentTarget.value), readonly: readonly }) }));
+        }, "data-tooltip": elbe.tooltip, children: _jsx("textarea", Object.assign({}, applyProps(elbe, null, { width: "100%" }), { label: label, size: 5, cols: 5, placeholder: hint, rows: rows, maxLength: maxLength, value: value, onInput: (e) => onInput && onInput(e.currentTarget.value), readonly: readonly })) }));
 }

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

@@ -1,23 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexSpace = FlexSpace;
-exports.Column = Column;
-exports.Row = Row;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function FlexSpace({}) {
-    return (0, jsx_runtime_1.jsx)("div", { style: "flex:1" });
+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 } from "preact/jsx-runtime";
+import { applyProps } from "../base/box";
+export function FlexSpace({}) {
+    return _jsx("div", { style: "flex:1" });
 }
-function Column({ gap = 1, main = "start", cross = "stretch", stretch = false, children, ...p }) {
+export function Column(_a) {
+    var { gap = 1, main = "start", cross = "stretch", stretch = false, children } = _a, p = __rest(_a, ["gap", "main", "cross", "stretch", "children"]);
     return _Flex(false, { gap, main, cross, stretch, children }, p);
 }
-function Row({ gap = 1, main = "start", cross, stretch = false, children, ...p }) {
+export function Row(_a) {
+    var { gap = 1, main = "start", cross, stretch = false, children } = _a, p = __rest(_a, ["gap", "main", "cross", "stretch", "children"]);
     return _Flex(true, { gap, main, cross, stretch, children }, p);
 }
 function _Flex(row, p, elbe) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...(0, box_1.applyProps)(elbe, row ? "row" : "column", {
-            justifyContent: p.main,
-            alignItems: p.cross || (p.stretch ? "stretch" : "center"),
-            gap: `${p.gap}rem`,
-        }), children: p.children }));
+    return (_jsx("div", Object.assign({}, applyProps(elbe, row ? "row" : "column", {
+        justifyContent: p.main,
+        alignItems: p.cross || (p.stretch ? "stretch" : "center"),
+        gap: `${p.gap}rem`,
+    }), { children: p.children })));
 }

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

@@ -1,7 +1,8 @@
+import { JSX } from "preact/jsx-runtime";
 import { type ElbeColorSchemes } from "../../..";
 type HeaderParams = {
     title?: string;
-    back: null | "close" | "back";
+    back: null | "close" | "back" | JSX.Element;
     actions?: any;
     limitedHeight?: number;
 };
@@ -12,7 +13,7 @@ type HeaderParams = {
  * @param title - The title of the page.
  * @param actions - The actions to show on the right side of the header.
  */
-export declare function Header({ back, title, actions, limitedHeight }: HeaderParams): import("preact").JSX.Element;
+export declare function Header({ back, title, actions, limitedHeight }: HeaderParams): JSX.Element;
 /**
  * Scaffold is a layout component that provides a header and a content area.
  * It is used to create a consistent layout for pages.
@@ -23,5 +24,5 @@ export declare function Scaffold({ children, limited, gap, padded, scheme, ...he
     gap?: number;
     padded?: boolean;
     scheme?: ElbeColorSchemes;
-} & HeaderParams): import("preact").JSX.Element;
+} & HeaderParams): JSX.Element;
 export {};

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 { 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,34 @@ 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 }) {
+export function Header({ back, title, actions, limitedHeight }) {
     if (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",
+    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: 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 })] })] }));
+                }, 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: {
+export function Scaffold(_a) {
+    var { children, limited = false, gap = 1, padded = true, scheme } = _a, header = __rest(_a, ["children", "limited", "gap", "padded", "scheme"]);
+    return (_jsxs(Column, { cross: "stretch", gap: 0, class: `${scheme !== null && scheme !== void 0 ? scheme : "primary"}`, style: {
             overflowY: header.limitedHeight ? "scroll" : null,
             maxHeight: header.limitedHeight ? `${header.limitedHeight}rem` : null,
             //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)), _jsx("div", { class: `${padded ? "padded" : ""} ${limited ? "base-limited" : ""}`, children: _jsx(Column, { cross: "stretch", 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" }));