elbe-ui 0.2.41 → 0.2.46

package/dist/ui/components/badge.js

@@ -1,53 +1,32 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = void 0;
-exports.TestBadge = TestBadge;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const compat_1 = __importDefault(require("preact/compat"));
-function TestBadge(p) {
-    return new Badge({ ...p, kind: "accent" });
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import React from "preact/compat";
+export function TestBadge(p) {
+    return new Badge(Object.assign(Object.assign({}, p), { kind: "accent" }));
 }
-class Badge extends compat_1.default.Component {
+export class Badge extends React.Component {
     constructor(props) {
         super(props);
     }
     static accent(p) {
-        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "accent" });
+        return _jsx(Badge, Object.assign({}, p, { kind: "accent" }));
     }
     static error(p) {
-        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "error" });
+        return _jsx(Badge, Object.assign({}, p, { kind: "error" }));
     }
     static warning(p) {
-        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "warning" });
+        return _jsx(Badge, Object.assign({}, p, { kind: "warning" }));
     }
     static success(p) {
-        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "success" });
+        return _jsx(Badge, Object.assign({}, p, { kind: "success" }));
     }
     static info(p) {
-        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "info" });
+        return _jsx(Badge, Object.assign({}, p, { kind: "info" }));
     }
     render() {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+        var _a, _b;
+        return (_jsxs("div", { style: {
                 position: "relative",
                 display: "inline-block",
-            }, children: [this.props.child, this.props.children, (0, jsx_runtime_1.jsx)("div", { class: `b ${this.props.kind} major ${this.props.class ?? ""}`, style: {
-                        position: "absolute",
-                        top: "-0.25rem",
-                        right: "-0.25rem",
-                        minWidth: "1.5rem",
-                        minHeight: "1.5rem",
-                        padding: "0rem .4rem",
-                        borderRadius: "3rem",
-                        fontWeight: "bold",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        visibility: this.props.hidden ? "hidden" : "visible",
-                        ...this.props.style,
-                    }, children: this.props.label ?? this.props.count })] }));
+            }, children: [this.props.child, this.props.children, _jsx("div", { class: `b ${this.props.kind} major ${(_a = this.props.class) !== null && _a !== void 0 ? _a : ""}`, style: Object.assign({ position: "absolute", top: "-0.25rem", right: "-0.25rem", minWidth: "1.5rem", minHeight: "1.5rem", padding: "0rem .4rem", borderRadius: "3rem", fontWeight: "bold", display: "flex", justifyContent: "center", alignItems: "center", visibility: this.props.hidden ? "hidden" : "visible" }, this.props.style), children: (_b = this.props.label) !== null && _b !== void 0 ? _b : this.props.count })] }));
     }
 }
-exports.Badge = Badge;

package/dist/ui/components/base/box.d.ts

@@ -6,16 +6,23 @@ export type ElbeProps = {
     class?: string;
     style?: React.CSSProperties;
     tooltip?: string;
+    flex?: boolean | number;
+    typeLabel?: string;
 };
 export declare function applyProps(p: ElbeProps, classes?: string | null | (string | false | null | undefined)[], style?: React.CSSProperties): {
+    "data-type": string | undefined;
     "data-tooltip"?: string | undefined;
     id: string | undefined;
     class: string;
     style: {
-        [x: string]: string | number | null | undefined;
-        [x: number]: string | number | null | undefined;
+        flex?: string | number | null | undefined;
         cssText?: string | null;
         [Symbol.iterator]?: string | number | null | undefined;
+        clipPath?: string | number | null | undefined;
+        filter?: string | number | null | undefined;
+        marker?: string | number | null | undefined;
+        mask?: string | number | null | undefined;
+        font?: string | number | null | undefined;
         border?: string | number | null | undefined;
         accentColor?: string | number | null | undefined;
         alignContent?: string | number | null | undefined;
@@ -122,7 +129,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         caretColor?: string | number | null | undefined;
         clear?: string | number | null | undefined;
         clip?: string | number | null | undefined;
-        clipPath?: string | number | null | undefined;
         clipRule?: string | number | null | undefined;
         color?: string | number | null | undefined;
         colorInterpolation?: string | number | null | undefined;
@@ -164,8 +170,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         fill?: string | number | null | undefined;
         fillOpacity?: string | number | null | undefined;
         fillRule?: string | number | null | undefined;
-        filter?: string | number | null | undefined;
-        flex?: string | number | null | undefined;
         flexBasis?: string | number | null | undefined;
         flexDirection?: string | number | null | undefined;
         flexFlow?: string | number | null | undefined;
@@ -175,7 +179,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         float?: string | number | null | undefined;
         floodColor?: string | number | null | undefined;
         floodOpacity?: string | number | null | undefined;
-        font?: string | number | null | undefined;
         fontFamily?: string | number | null | undefined;
         fontFeatureSettings?: string | number | null | undefined;
         fontKerning?: string | number | null | undefined;
@@ -256,11 +259,9 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         marginLeft?: string | number | null | undefined;
         marginRight?: string | number | null | undefined;
         marginTop?: string | number | null | undefined;
-        marker?: string | number | null | undefined;
         markerEnd?: string | number | null | undefined;
         markerMid?: string | number | null | undefined;
         markerStart?: string | number | null | undefined;
-        mask?: string | number | null | undefined;
         maskClip?: string | number | null | undefined;
         maskComposite?: string | number | null | undefined;
         maskImage?: string | number | null | undefined;
@@ -526,14 +527,19 @@ export declare class Box extends Component<ElbeBoxProps & {
     scheme: ElbeColorSchemes;
 }> {
     static primary: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;
         class: string;
         style: {
-            [x: string]: string | number | null | undefined;
-            [x: number]: string | number | null | undefined;
+            flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -640,7 +646,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -682,8 +687,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            flex?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -693,7 +696,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -774,11 +776,9 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -1035,14 +1035,19 @@ export declare class Box extends Component<ElbeBoxProps & {
         };
     }>;
     static secondary: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;
         class: string;
         style: {
-            [x: string]: string | number | null | undefined;
-            [x: number]: string | number | null | undefined;
+            flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1149,7 +1154,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -1191,8 +1195,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            flex?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -1202,7 +1204,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -1283,11 +1284,9 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -1544,14 +1543,19 @@ export declare class Box extends Component<ElbeBoxProps & {
         };
     }>;
     static inverse: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;
         class: string;
         style: {
-            [x: string]: string | number | null | undefined;
-            [x: number]: string | number | null | undefined;
+            flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1658,7 +1662,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -1700,8 +1703,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            flex?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -1711,7 +1712,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -1792,11 +1792,9 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -2053,14 +2051,19 @@ export declare class Box extends Component<ElbeBoxProps & {
         };
     }>;
     render(): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;
         class: string;
         style: {
-            [x: string]: string | number | null | undefined;
-            [x: number]: string | number | null | undefined;
+            flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -2167,7 +2170,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -2209,8 +2211,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            flex?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -2220,7 +2220,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -2301,11 +2300,9 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;

package/dist/ui/components/base/box.js

@@ -1,30 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Box = void 0;
-exports.applyProps = applyProps;
-const preact_1 = require("preact");
-function applyProps(p, classes, 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 { Component, h } from "preact";
+export function applyProps(p, classes, style) {
+    var _a;
     if (Array.isArray(classes)) {
         classes = classes.filter((c) => c).join(" ");
     }
-    return {
-        id: p.id,
-        class: `${classes || ""} ${p.class || ""}`,
-        style: { ...(style ?? {}), ...(p.style ?? {}) },
-        ...(p.tooltip ? { ["data-tooltip"]: p.tooltip } : {}),
-    };
+    return Object.assign(Object.assign({ id: p.id, class: `${classes || ""} ${p.class || ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_a = p.style) !== null && _a !== void 0 ? _a : {})), (p.flex ? { flex: p.flex === true ? 1 : p.flex } : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {})), { ["data-type"]: p.typeLabel });
 }
-class Box extends preact_1.Component {
-    static primary = (p) => new Box({ ...p, scheme: "primary" }).render();
-    static secondary = (p) => new Box({ ...p, scheme: "secondary" }).render();
-    static inverse = (p) => new Box({ ...p, scheme: "inverse" }).render();
+export class Box extends Component {
     render() {
-        const { scheme, mode, padding, margin, children, ...elbe } = this.props;
-        return (0, preact_1.h)("div", applyProps(elbe, [scheme, mode], {
-            padding: `${padding}rem`,
-            margin: `${margin}rem`,
-            ...elbe.style,
-        }), children);
+        const _a = this.props, { scheme, mode, padding, margin, children } = _a, elbe = __rest(_a, ["scheme", "mode", "padding", "margin", "children"]);
+        return h("div", applyProps(elbe, [scheme, mode], Object.assign({ padding: `${padding}rem`, margin: `${margin}rem` }, elbe.style)), children);
     }
 }
-exports.Box = Box;
+Box.primary = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "primary" })).render();
+Box.secondary = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "secondary" })).render();
+Box.inverse = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "inverse" })).render();

package/dist/ui/components/base/card.js

@@ -1,11 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = Card;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("./box");
-function Card({ mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, children, ...elbe }) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...(0, box_1.applyProps)(elbe, ["card", mode, scheme, kind, manner], {
-            padding: `${padding}rem`,
-            margin: `${margin}rem`,
-        }), onClick: onTap, onContextMenu: onLongTap, children: children }));
+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 "./box";
+export function Card(_a) {
+    var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "children"]);
+    return (_jsx("div", Object.assign({}, applyProps(elbe, ["card", mode, scheme, kind, manner], {
+        padding: `${padding}rem`,
+        margin: `${margin}rem`,
+    }), { onClick: onTap, onContextMenu: onLongTap, children: children })));
 }

package/dist/ui/components/base/padded.d.ts

@@ -1,18 +1,19 @@
 import React from "preact/compat";
-export type PaddedProps = {
+import { ElbeProps } from "./box";
+export type PaddedProps = ElbeProps & {
     children: any;
 };
 export declare class Padded extends React.Component<PaddedProps & {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
 }> {
     constructor(props: PaddedProps & {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
     });
     static all: ({ amount, ...p }: PaddedProps & {
         amount: number;

package/dist/ui/components/base/padded.js

@@ -1,28 +1,38 @@
-"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.Padded = void 0;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const compat_1 = __importDefault(require("preact/compat"));
-class Padded extends compat_1.default.Component {
+import { jsx as _jsx } from "preact/jsx-runtime";
+import React from "preact/compat";
+import { applyProps } from "./box";
+export class Padded extends React.Component {
     constructor(props) {
         super(props);
     }
-    static all = ({ amount = 1, ...p }) => ((0, jsx_runtime_1.jsx)(Padded, { ...p, top: amount, right: amount, bottom: amount, left: amount }));
-    static symmetric = ({ vertical = 0, horizontal = 0, ...p }) => ((0, jsx_runtime_1.jsx)(Padded, { ...p,
-        top: vertical,
-        bottom: vertical,
-        left: horizontal,
-        right: horizontal }));
     render() {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                paddingTop: `${this.props.top}rem`,
-                paddingRight: `${this.props.right}rem`,
-                paddingBottom: `${this.props.bottom}rem`,
-                paddingLeft: `${this.props.left}rem`,
-            }, children: this.props.children }));
+        return (_jsx("div", Object.assign({}, applyProps(this.props, [], {
+            paddingTop: `${this.props.top || 0}rem`,
+            paddingRight: `${this.props.right || 0}rem`,
+            paddingBottom: `${this.props.bottom || 0}rem`,
+            paddingLeft: `${this.props.left || 0}rem`,
+        }), { children: this.props.children })));
     }
 }
-exports.Padded = Padded;
+Padded.all = (_a) => {
+    var { amount = 1 } = _a, p = __rest(_a, ["amount"]);
+    return (_jsx(Padded, Object.assign({}, p, { top: amount, right: amount, bottom: amount, left: amount })));
+};
+Padded.symmetric = (_a) => {
+    var { vertical = 0, horizontal = 0 } = _a, p = __rest(_a, ["vertical", "horizontal"]);
+    return (_jsx(Padded, Object.assign({}, p, { top: vertical,
+        bottom: vertical,
+        left: horizontal,
+        right: horizontal })));
+};

package/dist/ui/components/button/button.js

@@ -1,27 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const preact_1 = require("preact");
-const error_view_1 = require("../../util/error_view");
-const box_1 = require("../base/box");
-class Button extends preact_1.Component {
-    static major = (p) => _btn(p, "major");
-    static minor = (p) => _btn(p, "minor");
-    static flat = (p) => _btn(p, "flat");
-    static plain = (p) => _btn(p, "plain");
+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 { Component } from "preact";
+import { _ElbeErr } from "../../util/error_view";
+import { applyProps } from "../base/box";
+export class Button extends Component {
     render() {
         return _btn(this.props, this.props.manner);
     }
 }
-exports.Button = Button;
-function _btn({ kind, onTap, icon, label, children, ...elbe }, manner) {
-    return label || icon || children ? ((0, jsx_runtime_1.jsxs)("button", { ...(0, box_1.applyProps)(elbe, [
-            "row",
-            "gap-half",
-            "main-center",
-            kind ?? (manner != "plain" && "accent"),
-            manner,
-            !onTap && "disabled",
-        ]), disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, label && (0, jsx_runtime_1.jsx)("span", { children: label }), children] })) : ((0, error_view_1._ElbeErr)("Button requires either an icon and or a label, or a child"));
+Button.major = (p) => _btn(p, "major");
+Button.minor = (p) => _btn(p, "minor");
+Button.flat = (p) => _btn(p, "flat");
+Button.plain = (p) => _btn(p, "plain");
+function _btn(_a, manner) {
+    var { kind, onTap, icon, label, children } = _a, elbe = __rest(_a, ["kind", "onTap", "icon", "label", "children"]);
+    return label || icon || children ? (_jsxs("button", Object.assign({}, applyProps(elbe, [
+        "row",
+        "gap-half",
+        "main-center",
+        kind !== null && kind !== void 0 ? kind : (manner != "plain" && "accent"),
+        manner,
+        !onTap && "disabled",
+    ]), { disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, label && _jsx("span", { children: label }), children] }))) : (_ElbeErr("Button requires either an icon and or a label, or a child"));
 }

package/dist/ui/components/button/choose_button.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChooseButton = ChooseButton;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const spaced_1 = require("../layout/spaced");
-const button_1 = require("./button");
-function ChooseButton({ items, value, onChange, kind, column = false, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { class: `${column ? "column" : "row"} gap-none rounded accent minor card padding-none cross-stretch ${!onChange ? "disabled" : ""}`, style: "background: transparent", children: items.map((e) => ((0, jsx_runtime_1.jsxs)(button_1.Button, { manner: e.value === value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), class: `sharp ${column ? "main-between gap-double" : ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { class: "row gap-half", children: [typeof e.icon === "function" ? e.icon({}) : e.icon, e.label && (0, jsx_runtime_1.jsx)("span", { children: e.label })] }), column &&
-                    (e.value === value ? (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(spaced_1.Spaced, { amount: 1.5 }))] }))) }));
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { Spaced } from "../layout/spaced";
+import { Button } from "./button";
+export function ChooseButton({ items, value, onChange, kind, column = false, }) {
+    return (_jsx("div", { class: `${column ? "column" : "row"} gap-none rounded accent minor card padding-none cross-stretch ${!onChange ? "disabled" : ""}`, style: "background: transparent", children: items.map((e) => (_jsxs(Button, { manner: e.value === value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), class: `sharp ${column ? "main-between gap-double" : ""}`, children: [_jsxs("div", { class: "row gap-half", children: [typeof e.icon === "function" ? e.icon({}) : e.icon, e.label && _jsx("span", { children: e.label })] }), column &&
+                    (e.value === value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 }))] }))) }));
 }