elbe-ui 0.3.1 → 0.4.0

package/dist/ui/components/input/checkbox.d.ts

@@ -1,6 +1,3 @@
+import { BooleanInputProps } from "../../..";
 import { ActionElbeProps } from "../base/box";
-export declare function Checkbox({ value, label, onChange, ...elbe }: {
-    value: boolean;
-    label?: string;
-    onChange?: ((checked: boolean) => void) | null;
-} & ActionElbeProps): import("preact").JSX.Element;
+export declare function Checkbox(p: BooleanInputProps & ActionElbeProps): import("preact").JSX.Element;

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

@@ -1,23 +1,14 @@
-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 { _InputSpacer, useThemeConfig } from "../../..";
 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: {
+export function Checkbox(p) {
+    const tConfig = useThemeConfig();
+    return _InputSpacer(p, _jsxs("div", { class: `row ${p.onChange ? "" : "disabled"}`, style: {
             gap: ".75rem",
-            filter: onChange ? "" : "grayscale(1)",
-            opacity: onChange ? "" : "0.5",
-        }, children: [_jsx("input", Object.assign({ type: "checkbox" }, applyProps("checkbox", elbe, value ? ["accent major"] : "accent minor", {
-                background: value ? null : "transparent",
-            }), { 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 })] }));
+            filter: p.onChange ? "" : "grayscale(1)",
+            opacity: p.onChange ? "" : "0.5",
+        }, children: [_jsx("input", Object.assign({ type: "checkbox" }, applyProps("checkbox", Object.assign({ role: "checkbox" }, p), p.value ? ["accent major"] : "accent minor", {
+                background: p.value ? null : "transparent",
+                transition: tConfig.reducedMotion ? "none" : null,
+            }), { disabled: !p.onChange, checked: p.value, onClick: (e) => e.stopPropagation(), onChange: (e) => { var _a; return (_a = p.onChange) === null || _a === void 0 ? void 0 : _a.call(p, e.currentTarget.checked); } })), p.label && _jsx("div", { style: "margin-top: -.25rem", children: p.label })] }));
 }

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

@@ -10,11 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "preact/jsx-runtime";
+import { useTheme } from "../../theme/theme_context";
 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"]);
+    const theme = useTheme();
     return min > max ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { ariaLabel: null, scheme: "secondary", kind: "accent", manner: "minor", style: {
             overflow: "unset",
             backgroundColor: "transparent",
@@ -22,10 +24,11 @@ export function Range(_a) {
             margin: "0",
             border: "none",
             width: "100%",
-        }, children: _jsx("input", Object.assign({ type: "range" }, applyProps("range", elbe, null, {
+        }, children: _jsx("input", Object.assign({ type: "range" }, applyProps("range", Object.assign({ role: "slider" }, elbe), null, {
             filter: onChange ? "" : "grayscale(1)",
             opacity: onChange ? "" : "0.5",
             cursor: onChange ? "pointer" : "not-allowed",
             width: "100%",
+            borderRadius: theme.geometry.radius + "rem",
         }), { 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

@@ -13,5 +13,5 @@ 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("select", elbe), { value: value, label: label, onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
+    return (_jsx("select", Object.assign({}, applyProps("select", elbe), { value: value, label: label, role: "combobox", onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
 }

package/dist/ui/components/input/switch.d.ts

@@ -1,6 +1,10 @@
+import { JSX } from "preact/jsx-runtime";
 import { ActionElbeProps } from "../../..";
-export declare function Switch({ value, label, onChange, ...elbe }: {
+export type BooleanInputProps = {
     value: boolean;
     label?: string;
+    compact?: boolean;
     onChange?: ((checked: boolean) => void) | null;
-} & ActionElbeProps): import("preact").JSX.Element;
+};
+export declare function Switch(p: BooleanInputProps & ActionElbeProps): JSX.Element;
+export declare function _InputSpacer(p: BooleanInputProps, children: JSX.Element): JSX.Element;

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

@@ -1,45 +1,39 @@
-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 { CheckIcon, XIcon } from "lucide-react";
 import { applyProps } from "../../..";
-export function Switch(_a) {
-    var { value, label, onChange } = _a, elbe = __rest(_a, ["value", "label", "onChange"]);
-    return (_jsx("button", Object.assign({ onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value) }, applyProps("switch", elbe, ["bordered card accent"], {
+import { useThemeConfig } from "../../theme/theme_context";
+export function Switch(p) {
+    const tConfig = useThemeConfig();
+    return _InputSpacer(p, _jsx("button", Object.assign({ onClick: (e) => {
+            var _a;
+            (_a = p.onChange) === null || _a === void 0 ? void 0 : _a.call(p, !p.value);
+            e.stopPropagation();
+        } }, applyProps("switch", Object.assign({ role: "switch" }, p), ["bordered card accent"], {
         minHeight: 0,
         minWidth: 0,
-        filter: onChange ? "" : "grayscale(1)",
-        opacity: onChange ? "" : "0.5",
+        filter: p.onChange ? "" : "grayscale(1)",
+        opacity: p.onChange ? "" : "0.5",
         height: "1.8rem",
         width: "2.7rem",
         position: "relative",
-        padding: "0rem",
+        padding: 0,
         borderColor: "var(--c-context-front)",
-        backgroundColor: value
+        backgroundColor: p.value
             ? "var(--c-context-front)"
             : "var(--c-context-back)",
         display: "flex",
         alignItems: "center",
-        transition: "border-color 0.25s, border-width 0.25s",
+        transition: tConfig.reducedMotion ? "none" : "background-color 0.25s",
     }), { children: _jsx("div", { style: {
                 position: "absolute",
-                left: value ? "1.2rem" : "0.4rem",
+                left: p.value ? "1.2rem" : "0.4rem",
                 height: ".8rem",
                 width: ".8rem",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                transition: "left 0.25s",
-            }, children: value ? (_jsx(CheckIcon, { color: "var(--c-context-back)", 
+                transition: tConfig.reducedMotion ? "none" : "left 0.25s",
+            }, children: p.value ? (_jsx(CheckIcon, { color: "var(--c-context-back)", 
                 //width=".8rem"
                 //height=".8rem"
                 absoluteStrokeWidth: false, strokeWidth: "0.3rem" })) : (_jsx(XIcon, { color: "var(--c-context-front)", 
@@ -47,3 +41,12 @@ export function Switch(_a) {
                 //height=".8rem"
                 absoluteStrokeWidth: false, strokeWidth: "0.3rem" })) }) })));
 }
+export function _InputSpacer(p, children) {
+    return (_jsx("div", { onClick: () => { var _a; return (_a = p.onChange) === null || _a === void 0 ? void 0 : _a.call(p, !p.value); }, style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: p.compact ? "0rem" : "3rem",
+            minWidth: p.compact ? "0rem" : "3rem",
+        }, children: children }));
+}

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

@@ -0,0 +1,28 @@
+import React from "preact/compat";
+import { ElbeProps } from "../../base/box";
+import { SLInputFieldProps } from "./single_line";
+export type InputFieldProps = {
+    id?: string;
+    label: string;
+    hideLabel?: boolean;
+    hint?: string;
+    value: string | number;
+    onInput?: (value: string) => void;
+    width?: number;
+    infoMessage?: string;
+    warningMessage?: string;
+    errorMessage?: string;
+    successMessage?: string;
+} & ElbeProps;
+export declare class Field<T extends InputFieldProps> extends React.Component<T & {
+    type: "text" | "number" | "password" | "date" | "time" | "email" | "area";
+}> {
+    static text: (p: SLInputFieldProps) => React.JSX.Element;
+    static number: (p: SLInputFieldProps) => React.JSX.Element;
+    static password: (p: SLInputFieldProps) => React.JSX.Element;
+    static date: (p: SLInputFieldProps) => React.JSX.Element;
+    static time: (p: SLInputFieldProps) => React.JSX.Element;
+    static email: (p: SLInputFieldProps) => React.JSX.Element;
+    static multiLine: (p: InputFieldProps) => React.JSX.Element;
+    render(): React.JSX.Element;
+}

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

@@ -0,0 +1,70 @@
+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 React from "preact/compat";
+import { KindAlertIcon, Text } from "../../../..";
+import { randomAlphaNum } from "../../../util/util";
+import { Card } from "../../base/card";
+import { Row } from "../../layout/flex";
+import { _MultiLineField } from "./multi_line";
+import { _SingleLineField } from "./single_line";
+export class Field extends React.Component {
+    render() {
+        var _a, _b, _c;
+        const _d = this.props, { label, hint, type, value, onInput } = _d, elbe = __rest(_d, ["label", "hint", "type", "value", "onInput"]);
+        const id = (_a = this.props.id) !== null && _a !== void 0 ? _a : randomAlphaNum(8, "input_field_");
+        const msg = this.props
+            .errorMessage
+            ? { kind: "error", msg: this.props.errorMessage }
+            : this.props.warningMessage
+                ? { kind: "warning", msg: this.props.warningMessage }
+                : this.props.infoMessage
+                    ? { kind: "info", msg: this.props.infoMessage }
+                    : this.props.successMessage
+                        ? { kind: "success", msg: this.props.successMessage }
+                        : null;
+        return (_jsxs("div", { style: {
+                flex: this.props.flex
+                    ? this.props.flex === true
+                        ? 1
+                        : this.props.flex
+                    : null,
+                width: this.props.flex ? null : ((_b = this.props.width) !== null && _b !== void 0 ? _b : 12) + "rem",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "stretch",
+                filter: this.props.onInput ? null : "grayscale(1) opacity(0.5)",
+                pointerEvents: this.props.onInput ? null : "none",
+                cursor: this.props.onInput ? null : "not-allowed",
+            }, "data-tooltip": (_c = this.props) === null || _c === void 0 ? void 0 : _c.tooltip, children: [_jsx("label", { htmlFor: id, style: {
+                        display: this.props.hideLabel ? "none" : "block",
+                        fontSize: "0.8rem",
+                        padding: "0.2rem 0.5rem",
+                    }, children: label }), _jsxs(Card, { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "stretch",
+                        border: "none",
+                    }, kind: msg === null || msg === void 0 ? void 0 : msg.kind, padding: 0, manner: msg ? "major" : "plain", children: [_jsx(Card, { padding: 0, style: {
+                                border: "none",
+                            }, kind: "plain", children: _jsx(Card, { kind: msg === null || msg === void 0 ? void 0 : msg.kind, manner: msg ? "minor" : "plain", class: "text_field_base", overflow: "hidden", padding: 0, bordered: true, children: type === "area" ? (_jsx(_MultiLineField, { props: this.props, id: id })) : (_jsx(_SingleLineField, { props: this.props, msg: msg, type: type !== null && type !== void 0 ? type : "text", id: id })) }) }), msg && (_jsxs(Row, { gap: 0.5, style: {
+                                padding: "0.25rem 0.5rem",
+                            }, children: [_jsx(KindAlertIcon, { kind: msg.kind, size: "body-s" }), _jsx(Text.s, { bold: true, v: msg.msg, flex: true })] }))] })] }));
+    }
+}
+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 = (p) => _jsx(Field, Object.assign({}, p, { type: "area" }));

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

@@ -0,0 +1,10 @@
+import { InputFieldProps } from "./input_field";
+export interface MLInputFieldProps extends InputFieldProps {
+    rows?: number;
+    maxLength?: number;
+    notResizable?: boolean;
+}
+export declare function _MultiLineField(p: {
+    props: MLInputFieldProps;
+    id: string;
+}): import("preact").JSX.Element;

package/dist/ui/components/input/text/multi_line.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { applyProps } from "../../base/box";
+export function _MultiLineField(p) {
+    var _a, _b;
+    return (_jsx("textarea", Object.assign({ "data-tooltip": p.props.tooltip }, applyProps("text_area", Object.assign(Object.assign({}, p.props), { id: p.id, ariaLabel: (_a = p.props.ariaLabel) !== null && _a !== void 0 ? _a : p.props.label }), null, {
+        width: "100%",
+        background: "none",
+        border: "none",
+        outline: "none",
+        padding: "1rem",
+        margin: "0 0",
+        resize: p.props.notResizable ? "none" : "vertical",
+    }), { size: 5, cols: 5, placeholder: p.props.hint, rows: (_b = p.props.rows) !== null && _b !== void 0 ? _b : 5, maxLength: p.props.maxLength, value: p.props.value, onInput: (e) => {
+            var _a, _b;
+            e.stopPropagation();
+            e.preventDefault();
+            (_b = (_a = p.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, e.currentTarget.value);
+        }, readonly: p.props.onInput ? false : true })));
+}

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

@@ -0,0 +1,18 @@
+import { ElbeAlertKinds, IconChild, InputFieldProps } from "../../../..";
+type _InputMsg = {
+    kind: ElbeAlertKinds;
+    msg: string;
+};
+export interface SLInputFieldProps extends InputFieldProps {
+    leading?: IconChild;
+    onLeadingTap?: () => void;
+    trailing?: IconChild;
+    onTrailingTap?: () => void;
+}
+export declare function _SingleLineField(p: {
+    props: SLInputFieldProps;
+    msg: _InputMsg | null;
+    type: string;
+    id: string;
+}): import("preact").JSX.Element;
+export {};

package/dist/ui/components/input/text/single_line.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { applyProps, Card, IconButton, Row, Spaced, } from "../../../..";
+export function _SingleLineField(p) {
+    var _a, _b, _c;
+    return (_jsxs(Row, { gap: 0, children: [_jsx(_Supplement, { kind: (_a = p.msg) === null || _a === void 0 ? void 0 : _a.kind, icon: p.props.leading, onTap: p.props.onLeadingTap }), _jsx("input", Object.assign({ type: p.type }, applyProps("text_field", Object.assign(Object.assign({}, p.props), { id: p.id, ariaLabel: (_b = p.props.ariaLabel) !== null && _b !== void 0 ? _b : p.props.label }), null, {
+                width: "100%",
+                height: "3rem",
+                flex: 1,
+                border: "none",
+                outline: "none",
+                background: "none",
+            }), { size: 5, label: p.props.label, placeholder: p.props.hint, value: p.props.value, onInput: (e) => p.props.onInput && p.props.onInput(e.currentTarget.value), readonly: p.props.onInput ? false : true })), _jsx(_Supplement, { kind: (_c = p.msg) === null || _c === void 0 ? void 0 : _c.kind, trailing: true, icon: p.props.trailing, onTap: p.props.onTrailingTap })] }));
+}
+function _Supplement(p) {
+    if (!p.icon)
+        return _jsx(Spaced, { width: 0.75 });
+    return (_jsx(Card, { sharp: true, padding: 0, style: {
+            border: "none",
+            background: p.onTap ? null : "transparent",
+        }, children: _jsx(IconButton, { kind: p.kind, manner: p.kind ? "minor" : "plain", ariaLabel: p.trailing ? "trailing icon" : "leading icon", icon: p.icon, style: {
+                borderRadius: 0,
+                background: p.onTap ? null : "transparent",
+            }, onTap: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = p.onTap) === null || _a === void 0 ? void 0 : _a.call(p);
+            } }) }));
+}

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

@@ -0,0 +1,14 @@
+import { ElbeChild, HeaderLogos } from "../../..";
+import { MenuItem } from "./menu";
+export type AppBaseProps = HeaderLogos & {
+    initial?: string;
+    menu: MenuItem[];
+    globalActions?: ElbeChild[];
+};
+/**
+ * app base is a layout component that provides a side menu and a content area.
+ * it is designed to be used as a base for other components and is
+ * used to create a consistent layout for pages. You can also pass global actions
+ * that will be displayed in the header of all pages.
+ */
+export declare function AppBase(p: AppBaseProps): import("preact/compat").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useState } from "preact/compat";
+import { Box } from "../../..";
+import { AppBaseContext } from "./ctx_app_base";
+import { Menu } from "./menu";
+/**
+ * app base is a layout component that provides a side menu and a content area.
+ * it is designed to be used as a base for other components and is
+ * used to create a consistent layout for pages. You can also pass global actions
+ * that will be displayed in the header of all pages.
+ */
+export function AppBase(p) {
+    var _a, _b, _c, _d, _e, _f;
+    const [state, setState] = useState({
+        menuSelected: (_c = (_a = p.initial) !== null && _a !== void 0 ? _a : (_b = p.menu[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null,
+        menuOpen: false,
+        icons: {
+            logo: p.logo,
+            logoDark: p.logoDark,
+            endLogo: p.endLogo,
+            endLogoDark: p.endLogoDark,
+        },
+        globalActions: (_d = p.globalActions) !== null && _d !== void 0 ? _d : [],
+    });
+    return (_jsx(AppBaseContext.Provider, { value: Object.assign(Object.assign({}, state), { setMenuOpen: (b) => setState(Object.assign(Object.assign({}, state), { menuOpen: b })), setMenuSelected: (s) => setState(Object.assign(Object.assign({}, state), { menuSelected: s })) }), children: _jsxs(Box, { scheme: "primary", style: {
+                display: "flex",
+                width: "100%",
+                minHeight: "100vh",
+            }, children: [_jsx(Menu, { items: p.menu }), _jsx("div", { style: { flex: 1 }, children: (_f = (_e = p.menu.find((i) => i.id == state.menuSelected)) === null || _e === void 0 ? void 0 : _e.component) !== null && _f !== void 0 ? _f : _jsx("div", {}) })] }) }));
+}

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

@@ -0,0 +1,16 @@
+import { ElbeChild } from "../../util/util";
+import { HeaderLogos } from "./header";
+export interface _AppBaseState {
+    menuSelected: string | null;
+    menuOpen: boolean;
+    icons: HeaderLogos;
+    globalActions: ElbeChild[];
+}
+interface _AppBaseControl extends _AppBaseState {
+    setMenuOpen: (open: boolean) => void;
+    setMenuSelected: (selected: string) => void;
+}
+export declare const AppBaseContext: import("preact").Context<_AppBaseControl | null>;
+export declare function useAppBase(): _AppBaseControl;
+export declare function maybeAppBase(): _AppBaseControl | null;
+export {};

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

@@ -0,0 +1,13 @@
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+export const AppBaseContext = createContext(null);
+export function useAppBase() {
+    const ctx = useContext(AppBaseContext);
+    if (ctx)
+        return ctx;
+    throw new Error("useAppBase must be used within an AppBase. try using maybeAppBase()");
+}
+export function maybeAppBase() {
+    var _a;
+    return (_a = useContext(AppBaseContext)) !== null && _a !== void 0 ? _a : null;
+}

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

@@ -2,11 +2,13 @@ import { type ElbeProps } from "../base/box";
 export type FlexProps = {
     children: any;
     gap?: number;
+    scroll?: boolean;
+    noScrollbar?: boolean;
     main?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
     cross?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
 } & ElbeProps;
 export declare function FlexSpace({}: {}): import("preact").JSX.Element;
-export declare function Column({ gap, main, cross, children, ...p }: FlexProps): import("preact").JSX.Element;
-export declare function Row({ gap, main, cross, wrap, children, ...p }: FlexProps & {
+export declare function Column({ gap, main, cross, children, noScrollbar, scroll, ...p }: FlexProps): import("preact").JSX.Element;
+export declare function Row({ gap, main, cross, wrap, children, noScrollbar, scroll, ...p }: FlexProps & {
     wrap?: boolean;
 }): import("preact").JSX.Element;

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

@@ -15,17 +15,25 @@ export function FlexSpace({}) {
     return _jsx("div", { style: "flex:1" });
 }
 export function Column(_a) {
-    var { gap = 1, main = "start", cross = "stretch", children } = _a, p = __rest(_a, ["gap", "main", "cross", "children"]);
-    return _Flex(false, { gap, main, cross, children }, p, false);
+    var { gap = 1, main = "start", cross = "stretch", children, noScrollbar = false, scroll = false } = _a, p = __rest(_a, ["gap", "main", "cross", "children", "noScrollbar", "scroll"]);
+    return _Flex(false, { gap, main, cross, scroll, noScrollbar, children }, p, false);
 }
 export function Row(_a) {
-    var { gap = 1, main = "start", cross, wrap = false, children } = _a, p = __rest(_a, ["gap", "main", "cross", "wrap", "children"]);
-    return _Flex(true, { gap, main, cross, children }, p, wrap);
+    var { gap = 1, main = "start", cross, wrap = false, children, noScrollbar = false, scroll = false } = _a, p = __rest(_a, ["gap", "main", "cross", "wrap", "children", "noScrollbar", "scroll"]);
+    return _Flex(true, { gap, main, cross, scroll, noScrollbar, children }, p, wrap);
 }
 function _Flex(row, p, elbe, wraps) {
-    return (_jsx("div", Object.assign({}, applyProps("flex", elbe, [row ? "row" : "column", wraps && "wrap"], {
+    var _a;
+    return (_jsx("div", Object.assign({}, applyProps("flex", elbe, [
+        row ? "row" : "column",
+        wraps && "wrap",
+        p.noScrollbar && "no-scrollbar",
+    ], {
         justifyContent: p.main,
         alignItems: p.cross,
         gap: `${p.gap}rem`,
+        overflowX: !row ? null : p.scroll ? "auto" : null,
+        overflowY: row ? null : p.scroll ? "auto" : null,
+        flex: ((_a = p.flex) !== null && _a !== void 0 ? _a : p.scroll) ? 1 : null,
     }), { children: p.children })));
 }

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

@@ -1,19 +1,19 @@
-import { JSX } from "preact/jsx-runtime";
-export type HeaderParams = {
-    title?: string;
-    back?: null | "close" | "back" | JSX.Element;
-    actions?: any;
-    _absolute?: boolean;
+import { ElbeChild } from "../../..";
+export type HeaderLogos = {
+    logo?: string | ElbeChild;
+    logoDark?: string | ElbeChild;
+    endLogo?: string | ElbeChild;
+    endLogoDark?: string | ElbeChild;
 };
-/**
- * Header is a layout component that provides a header for a page.
- * It is used to create a consistent header for pages.
- * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
- * @param title - The title of the page.
- * @param actions - The actions to show on the right side of the header.
- * @param children - The children to show in the header. If children are provided, the title is ignored.
- */
-export declare function Header({ back, title, actions, _absolute, children, height, }: HeaderParams & {
-    children?: any;
-    height?: number;
-}): JSX.Element;
+export declare function Header(p: HeaderLogos & {
+    leading?: ElbeChild | "back" | "close";
+    title: string | ElbeChild;
+    centerTitle?: boolean;
+    actions?: ElbeChild[];
+}): import("preact").JSX.Element;
+export declare function BackButton(p: {
+    onTap: () => void;
+}): import("preact").JSX.Element;
+export declare function CloseButton(p: {
+    onTap: () => void;
+}): import("preact").JSX.Element;