elbe-ui 0.3.1 → 0.4.1

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

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { applyProps } from "./box";
+import { applyProps, } from "../../..";
+export const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
 export function Card(_a) {
-    var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, sharp, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "sharp", "children"]);
+    var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, elevated, sharp, disabled, overflow, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "elevated", "sharp", "disabled", "overflow", "children"]);
     return (_jsx("div", Object.assign({}, applyProps("card", elbe, [
         "card",
         mode,
@@ -22,8 +23,11 @@ export function Card(_a) {
         frosted && "frosted",
         bordered && "bordered",
         sharp && "sharp",
+        disabled && "disabled",
     ], {
         padding: `${padding}rem`,
         margin: `${margin}rem`,
+        overflow: overflow,
+        boxShadow: elevated ? elevatedShadow : undefined,
     }), { onClick: onTap, onContextMenu: onLongTap, children: children })));
 }

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

@@ -0,0 +1 @@
+export type AriaRoles = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";

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

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/button/button.d.ts

@@ -5,6 +5,7 @@ import type { IconChild } from "./icon_button";
 export type ButtonProps = ActionElbeProps & {
     kind?: ElbeColorKinds;
     transparent?: boolean;
+    contentAlign?: "start" | "center" | "end";
     onTap?: (e: Event) => void;
 } & {
     icon?: IconChild;

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

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from "preact";
+import { useToolbar } from "../../util/ctx_toolbar";
 import { _ElbeErr } from "../../util/error_view";
 import { applyProps } from "../base/box";
 export class Button extends Component {
@@ -23,15 +24,22 @@ 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("button", elbe, [
+    var _b;
+    var { kind, onTap, icon, label, children, contentAlign } = _a, elbe = __rest(_a, ["kind", "onTap", "icon", "label", "children", "contentAlign"]);
+    const toolbarCtx = useToolbar();
+    return label || icon || children ? (_jsxs("button", Object.assign({}, applyProps("button", Object.assign(Object.assign({ role: "button" }, elbe), { flex: (toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? 1 : elbe.flex }), [
         "row",
         "gap-half",
-        "main-center",
         kind !== null && kind !== void 0 ? kind : (manner != "plain" && "accent"),
         manner,
         !onTap && "disabled",
     ], {
+        overflow: "hidden",
+        justifyContent: contentAlign !== null && contentAlign !== void 0 ? contentAlign : ((toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? "start" : "center"),
         backgroundColor: elbe.transparent ? "transparent" : null,
-    }), { 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"));
+    }), { title: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx("div", { style: {
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                }, 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,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { Card } from "../base/card";
 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; overflow: hidden", children: items.map((e) => {
+    return (_jsx(Card, { kind: "accent", manner: "major", padding: 0, overflow: "hidden", role: "radiogroup", disabled: !onChange, class: `${column ? "column" : "row"} gap-none`, children: items.map((e) => {
             var _a, _b;
-            return (_jsxs(Button, { ariaLabel: (_b = (_a = e.ariaLabel) !== null && _a !== void 0 ? _a : e.label) !== null && _b !== void 0 ? _b : null, 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 &&
+            return (_jsxs(Button, { ariaLabel: (_b = (_a = e.ariaLabel) !== null && _a !== void 0 ? _a : e.label) !== null && _b !== void 0 ? _b : null, manner: e.value === value ? "major" : "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 }))] }));
         }) }));
 }

package/dist/ui/components/button/icon_button.d.ts

@@ -16,3 +16,6 @@ export declare class IconButton extends Component<IconButtonProps & {
     static plain: (p: IconButtonProps) => import("preact").JSX.Element;
     render(): import("preact").JSX.Element;
 }
+export declare function _IconChild(p: {
+    icon: IconChild | null;
+}): any;

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

@@ -22,7 +22,7 @@ IconButton.minor = (p) => _btn(p, "minor");
 IconButton.flat = (p) => _btn(p, "flat");
 IconButton.plain = (p) => _btn(p, "plain");
 function _btn(_a, manner) {
-    var _b;
+    var _b, _c;
     var { icon, onTap } = _a, elbe = __rest(_a, ["icon", "onTap"]);
     if (manner === void 0) { manner = "major"; }
     return (_jsx("button", Object.assign({}, applyProps("icon_button", elbe, [
@@ -38,5 +38,12 @@ function _btn(_a, manner) {
         borderRadius: "3rem",
         height: "3rem",
         width: "3rem",
-    }), { onClick: (e) => onTap && onTap(e), children: typeof icon === "function" ? icon({}) : icon })));
+    }), { title: (_c = elbe.ariaLabel) !== null && _c !== void 0 ? _c : undefined, onClick: (e) => onTap && onTap(e), children: _jsx(_IconChild, { icon: icon }) })));
+}
+export function _IconChild(p) {
+    if (!p.icon)
+        return null;
+    if (typeof p.icon === "function")
+        return p.icon({});
+    return p.icon;
 }

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

@@ -11,10 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { useThemeConfig } from "../../theme/theme_context";
 import { applyProps } from "../base/box";
+import { Padded } from "../base/padded";
 import { Spaced } from "../layout/spaced";
 import { Button } from "./button";
 export function ToggleButton(_a) {
     var { value, onChange, label, icon, kind } = _a, elbe = __rest(_a, ["value", "onChange", "label", "icon", "kind"]);
-    return (_jsxs(Button, Object.assign({ manner: value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)) }, applyProps("toggle_button", elbe, "main-between", { gap: "1.5rem" }), { children: [_jsxs("div", { class: "row gap-half", children: [typeof icon === "function" ? icon({}) : icon, label && _jsx("span", { children: label })] }), value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 })] })));
+    const tConfig = useThemeConfig();
+    return (_jsxs(Button, Object.assign({ manner: value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)) }, applyProps("toggle_button", elbe, "main-between"), { children: [_jsxs("div", { class: "row gap-none", children: [typeof icon === "function" ? icon({}) : icon, icon && _jsx(Spaced, { width: 0.5 }), label && _jsx("span", { children: label })] }), _jsx("div", { style: {
+                    transition: tConfig.reducedMotion ? null : "width 0.2s ease-in-out",
+                    width: value ? "2.5rem" : "0rem",
+                }, children: value && (_jsx(Padded, { class: "centered", left: 1, children: _jsx(CheckIcon, {}) })) })] })));
 }

package/dist/ui/components/dialog.d.ts

@@ -1,4 +1,4 @@
-import type { ElbeChildren } from "../util/util";
+import type { ElbeChildren } from "../util/types";
 export declare function ElbeDialog({ title, open, onClose, children, _style, }: {
     _style?: string;
     title: string;

package/dist/ui/components/footer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { HeartIcon } from "lucide-react";
 import { Card, Column, FlexSpace, Link, Row } from "../..";
 export function Footer({ left, right, copyright, version, legal, }) {
-    return (_jsx(Card, { scheme: "secondary", sharp: true, style: {
+    return (_jsx(Card, { scheme: "secondary", sharp: true, role: "contentinfo", ariaLabel: "footer", style: {
             borderLeft: "none",
             borderRight: "none",
             borderBottom: "none",

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/types";
+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;