elbe-ui 1.0.8 → 2.0.0

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

@@ -0,0 +1,21 @@
+import { ColorSelection } from "../../theme/subthemes/color/colors/colors";
+import { ElbeChildrenProps, ElbeStyleProps } from "../base/box";
+export type LabeledInputProps = ElbeChildrenProps & ElbeStyleProps & {
+    label: string;
+    hideLabel?: boolean;
+    width?: number;
+    flex?: boolean | number;
+    manner?: Exclude<ColorSelection.Manners, "major" | "minor">;
+    disabled?: boolean;
+    tooltip?: string;
+};
+/**
+ * a wrapper for creating labeled input fields. This is used internally by various input components
+ * such as text fields, number fields, select fields, etc.
+ * @param p labeled input props
+ * @returns a labeled input component
+ */
+export declare function LabeledInput(p: LabeledInputProps & {
+    typeLabel: string;
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApp } from "../../app/app_ctxt";
+import { applyProps } from "../base/box";
+import { WithStateTheme } from "../base/state_builder";
+import { WithTooltip } from "../tooltip";
+/**
+ * a wrapper for creating labeled input fields. This is used internally by various input components
+ * such as text fields, number fields, select fields, etc.
+ * @param p labeled input props
+ * @returns a labeled input component
+ */
+export function LabeledInput(p) {
+    var _a, _b;
+    const { _appThemeContext } = useApp();
+    const baseTheme = _appThemeContext.useTheme();
+    return (_jsx(WithTooltip, { tooltip: p.tooltip, children: _jsx(WithStateTheme, { disabled: (_a = p.disabled) !== null && _a !== void 0 ? _a : false, theme: baseTheme, manner: p.manner, children: _jsxs("div", Object.assign({}, applyProps(p.typeLabel, p, [], Object.assign({ flex: p.flex ? (p.flex === true ? 1 : p.flex) : undefined, width: p.flex ? undefined : ((_b = p.width) !== null && _b !== void 0 ? _b : 12) + "rem", display: "flex", flexDirection: "column", alignItems: "stretch" }, p.style)), { children: [_jsx("label", { htmlFor: p.id, style: {
+                            display: p.hideLabel ? "none" : "block",
+                            fontSize: "0.8rem",
+                            padding: "0.2rem 0.5rem",
+                        }, children: p.label }), p.children] })) }) }));
+}

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

@@ -1,3 +1,5 @@
 import { BooleanInputProps } from "../../..";
-import { ActionElbeProps } from "../base/box";
-export declare function Checkbox(p: BooleanInputProps & ActionElbeProps): import("react/jsx-runtime").JSX.Element;
+import { ElbeActionProps } from "../base/box";
+export declare function Checkbox(p: BooleanInputProps & ElbeActionProps & {
+    manner?: "flat" | "plain";
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { _InputSpacer, useThemeConfig } from "../../..";
-import { applyProps } from "../base/box";
+import { _InputSpacer, Text } from "../../..";
+import { useApp } from "../../app/app_ctxt";
+import { applyProps, styleBorderFromContext, } from "../base/box";
+import { WithStateTheme } from "../base/state_builder";
+import { WithTooltip } from "../tooltip";
 export function Checkbox(p) {
-    const tConfig = useThemeConfig();
-    return _InputSpacer(p, _jsxs("div", { className: `row ${p.onChange ? "" : "disabled"}`, style: {
+    const { _appThemeContext } = useApp();
+    const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
+        var _a;
+        return ({
+            color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { manner: p.value ? "major" : (_a = p.manner) !== null && _a !== void 0 ? _a : "flat" }) }),
+        });
+    }, [p.value, p.manner]);
+    return _InputSpacer(p, _jsx(WithTooltip, { tooltip: p.tooltip, children: _jsxs("div", Object.assign({}, applyProps("checkbox", Object.assign({ role: "checkbox" }, p), [], {
+            display: "flex",
+            alignItems: "center",
             gap: ".75rem",
             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 ? undefined : "transparent",
-                transition: tConfig.reducedMotion ? "none" : undefined,
-            }), { 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: { marginTop: "-.25rem" }, children: p.label })] }));
+        }), { children: [_jsx(WithStateTheme, { theme: baseTheme, disabled: !p.onChange, children: _jsx("input", { type: "checkbox", 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); }, className: "elbe_colored", style: Object.assign({ width: "1.8rem", height: "1.8rem", cursor: "inherit" }, styleBorderFromContext) }) }), p.label && _jsx(Text, { v: p.label })] })) }));
 }

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

@@ -1,8 +1,10 @@
-import { ActionElbeProps } from "../base/box";
-export declare function Range({ value, onChange, min, max, step, ...elbe }: {
+import { ElbeActionProps } from "../base/box";
+type _RangeProps = ElbeActionProps & {
     value: number;
     min?: number;
     step?: number;
     max?: number;
     onChange?: ((value: number) => void) | null;
-} & ActionElbeProps): import("react/jsx-runtime").JSX.Element;
+};
+export declare function Range(p: _RangeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -10,25 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from "../../theme/theme_context";
+import { useApp } from "../../app/app_ctxt";
 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: {
+export function Range(p) {
+    var _a, _b;
+    return ((_a = p.min) !== null && _a !== void 0 ? _a : 0) > ((_b = p.max) !== null && _b !== void 0 ? _b : 100) ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { ariaLabel: null, scheme: "secondary", kind: "accent", manner: "minor", tooltip: p.tooltip, style: {
             overflow: "unset",
             backgroundColor: "transparent",
             padding: "0",
             margin: "0",
-            border: "none",
+            borderStyle: "none",
             width: "100%",
-        }, 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)) })) }));
+        }, children: _jsx(_StyledRange, Object.assign({}, p)) }));
+}
+function _StyledRange(_a) {
+    var _b, _c;
+    var { min = 0, max = 100, step = 1, value, onChange } = _a, elbe = __rest(_a, ["min", "max", "step", "value", "onChange"]);
+    const { _appThemeContext } = useApp();
+    const { theme } = _appThemeContext.useTheme().useWith((c) => ({
+        color: Object.assign(Object.assign({}, c.color), { selection: Object.assign(Object.assign({}, c.color.selection), { manner: "major" }) }),
+    }), []);
+    return (_jsx("input", Object.assign({ type: "range" }, applyProps("range", Object.assign({ role: "slider" }, elbe), null, Object.assign({ filter: onChange ? "" : "grayscale(1)", opacity: onChange ? "" : "0.5", cursor: onChange ? "pointer" : "not-allowed", width: "100%", borderRadius: theme.geometry.radius + "rem" }, {
+        "--elbe-range-dot-back": theme.color.isContrast
+            ? theme.color.currentColor.front.asCss()
+            : theme.color.currentColor.back.asCss(),
+        "--elbe-range-dot-border": (_c = (_b = theme.color.currentColor.border) === null || _b === void 0 ? void 0 : _b.asCss()) !== null && _c !== void 0 ? _c : "transparent",
+    })), { 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.d.ts

@@ -1,5 +1,6 @@
-import { ActionElbeProps } from "../base/box";
-export declare function Select<T>({ options, value, label, hideLabel, width, onChange, ...elbe }: {
+import { ElbeActionProps } from "../base/box";
+import { LabeledInputProps } from "./_labeled_input";
+export declare function Select<T>(p: ElbeActionProps & LabeledInputProps & {
     options: {
         key: T;
         label: string;
@@ -9,4 +10,4 @@ export declare function Select<T>({ options, value, label, hideLabel, width, onC
     hideLabel?: boolean;
     width?: number;
     onChange?: (value: T) => any;
-} & ActionElbeProps): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,49 +1,22 @@
-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 "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { randomAlphaNum } from "../../util/util";
-import { applyProps } from "../base/box";
-export function Select(_a) {
-    var _b;
-    var { options, value, label, hideLabel, width, onChange } = _a, elbe = __rest(_a, ["options", "value", "label", "hideLabel", "width", "onChange"]);
-    const id = (_b = elbe.id) !== null && _b !== void 0 ? _b : randomAlphaNum(8, "input_field_");
-    let valueIndex = options.findIndex((o) => o.key === value);
+import { styleBorderFromContext, styleColorFromContext, } from "../base/box";
+import { LabeledInput } from "./_labeled_input";
+export function Select(p) {
+    var _a;
+    const id = (_a = p.id) !== null && _a !== void 0 ? _a : randomAlphaNum(8, "input_field_");
+    let valueIndex = p.options.findIndex((o) => o.key === p.value);
     // If the value is not found, select the first option without a key (if any) or the first option
     if (valueIndex === -1) {
-        valueIndex = options.findIndex((v) => !v.key);
+        valueIndex = p.options.findIndex((v) => !v.key);
         if (valueIndex === -1) {
             valueIndex = 0;
         }
     }
     let valStr = "-".repeat(valueIndex + 1);
-    return (_jsxs("div", { style: {
-            flex: elbe.flex ? (elbe.flex === true ? 1 : elbe.flex) : undefined,
-            width: elbe.flex ? undefined : (width !== null && width !== void 0 ? width : 12) + "rem",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            filter: onChange ? undefined : "grayscale(1) opacity(0.5)",
-            pointerEvents: onChange ? undefined : "none",
-            cursor: onChange ? undefined : "not-allowed",
-        }, "data-tooltip": elbe.tooltip, children: [_jsx("label", { htmlFor: id, style: {
-                    display: hideLabel ? "none" : "block",
-                    fontSize: "0.8rem",
-                    padding: "0.2rem 0.5rem",
-                }, children: label }), _jsx("select", Object.assign({ id: id }, applyProps("select", elbe, [], {
-                minHeight: "3rem",
-                cursor: onChange ? "pointer" : "not-allowed",
-            }), { value: valStr, disabled: !onChange, role: "combobox", onChange: (e) => {
-                    const index = e.currentTarget.value.length - 1;
-                    const selectedOption = options[index];
-                    selectedOption && onChange ? onChange(selectedOption.key) : null;
-                }, children: options.map(({ key, label }, i) => (_jsx("option", { value: "-".repeat(i + 1), children: label }, JSON.stringify(key)))) }))] }));
+    return (_jsx(LabeledInput, Object.assign({}, p, { id: id, disabled: !p.onChange, typeLabel: "select", children: _jsx("select", { id: id, value: valStr, disabled: !p.onChange, role: "combobox", className: "elbe-focussink", style: Object.assign(Object.assign({ padding: "0 0.75rem", height: "3rem", minWidth: "12rem", width: "100%", cursor: "inherit" }, styleColorFromContext), styleBorderFromContext), onChange: (e) => {
+                const index = e.currentTarget.value.length - 1;
+                const selectedOption = p.options[index];
+                selectedOption && p.onChange ? p.onChange(selectedOption.key) : null;
+            }, children: p.options.map(({ key, label }, i) => (_jsx("option", { value: "-".repeat(i + 1), children: label }, JSON.stringify(key)))) }) })));
 }

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

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

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

@@ -1,45 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon, XIcon } from "lucide-react";
-import { applyProps } from "../../..";
-import { useThemeConfig } from "../../theme/theme_context";
+import { applyProps, styleBorderFromContext } from "../../..";
+import { useApp } from "../../app/app_ctxt";
+import { WithStateTheme } from "../base/state_builder";
+import { WithTooltip } from "../tooltip";
 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: p.onChange ? "" : "grayscale(1)",
-        opacity: p.onChange ? "" : "0.5",
-        height: "1.8rem",
-        width: "2.7rem",
-        position: "relative",
-        padding: 0,
-        borderColor: "var(--c-context-front)",
-        backgroundColor: p.value
-            ? "var(--c-context-front)"
-            : "var(--c-context-back)",
-        display: "flex",
-        alignItems: "center",
-        transition: tConfig.reducedMotion ? "none" : "background-color 0.25s",
-    }), { children: _jsx("div", { style: {
-                position: "absolute",
-                left: p.value ? "1.2rem" : "0.4rem",
-                height: ".8rem",
-                width: ".8rem",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                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)", 
-                //width=".8rem"
-                //height=".8rem"
-                absoluteStrokeWidth: false, strokeWidth: "0.3rem" })) }) })));
+    const { _appThemeContext } = useApp();
+    const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
+        var _a;
+        return ({
+            color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { manner: p.value ? "major" : (_a = p.manner) !== null && _a !== void 0 ? _a : "flat" }) }),
+        });
+    }, [p.value, p.manner]);
+    return _InputSpacer(p, _jsx(WithTooltip, { tooltip: p.tooltip, children: _jsxs(WithStateTheme, { theme: baseTheme, disabled: !p.onChange, children: [_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), ["elbe_colored"], Object.assign(Object.assign({}, styleBorderFromContext), { minHeight: 0, minWidth: 0, filter: p.onChange ? "" : "grayscale(1)", opacity: p.onChange ? "" : "0.5", height: "1.8rem", width: "2.7rem", position: "relative", padding: 0, display: "flex", alignItems: "center", cursor: "inherit", transition: baseTheme.theme.motion.reduced
+                        ? "none"
+                        : "background-color 0.25s" })), { children: _jsx("div", { style: {
+                            position: "absolute",
+                            left: p.value ? "1.2rem" : "0.4rem",
+                            height: ".8rem",
+                            width: ".8rem",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            transition: baseTheme.theme.motion.reduced
+                                ? "none"
+                                : "left 0.25s",
+                        }, children: p.value ? (_jsx(CheckIcon, { color: "var(--elbe-context-color-front)", strokeWidth: "0.25rem" })) : (_jsx(XIcon, { color: "var(--elbe-context-color-front)", strokeWidth: "0.25rem" })) }) })), " "] }) }));
 }
 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: {

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

@@ -1,28 +1,23 @@
-import React from "react";
-import { ElbeProps } from "../../base/box";
+import { ElbeActionProps } from "../../base/box";
+import { LabeledInputProps } from "../_labeled_input";
 import { SLInputFieldProps } from "./single_line";
-export type InputFieldProps = {
-    id?: string;
-    label: string;
-    hideLabel?: boolean;
+export type InputFieldProps = ElbeActionProps & LabeledInputProps & {
     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) => import("react/jsx-runtime").JSX.Element;
-    static number: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
-    static password: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
-    static date: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
-    static time: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
-    static email: (p: SLInputFieldProps) => import("react/jsx-runtime").JSX.Element;
-    static multiLine: (p: InputFieldProps) => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
+};
+type SingleLineInputFieldProps = InputFieldProps & SLInputFieldProps;
+export declare namespace Field {
+    function text(p: SingleLineInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    function number(p: SingleLineInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    function password(p: SingleLineInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    function date(p: SingleLineInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    function time(p: SingleLineInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    function email(p: SingleLineInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    function multiLine(p: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 }
+export {};

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

@@ -1,71 +1,73 @@
-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 "react/jsx-runtime";
-import React from "react";
 import { KindAlertIcon, Text } from "../../../..";
+import { useApp } from "../../../app/app_ctxt";
 import { randomAlphaNum } from "../../../util/util";
-import { applyProps } from "../../base/box";
 import { Card } from "../../base/card";
 import { Row } from "../../layout/flex";
+import { LabeledInput } from "../_labeled_input";
 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 }
+export var Field;
+(function (Field) {
+    function text(p) {
+        return _jsx(_Field, Object.assign({}, p, { inputType: "text" }));
+    }
+    Field.text = text;
+    function number(p) {
+        return _jsx(_Field, Object.assign({}, p, { inputType: "number" }));
+    }
+    Field.number = number;
+    function password(p) {
+        return _jsx(_Field, Object.assign({}, p, { inputType: "password" }));
+    }
+    Field.password = password;
+    function date(p) {
+        return _jsx(_Field, Object.assign({}, p, { inputType: "date" }));
+    }
+    Field.date = date;
+    function time(p) {
+        return _jsx(_Field, Object.assign({}, p, { inputType: "time" }));
+    }
+    Field.time = time;
+    function email(p) {
+        return _jsx(_Field, Object.assign({}, p, { inputType: "email" }));
+    }
+    Field.email = email;
+    function multiLine(p) {
+        return _jsx(_Field, Object.assign({}, p, { inputType: "area" }));
+    }
+    Field.multiLine = multiLine;
+})(Field || (Field = {}));
+function _Field(p) {
+    var _a, _b;
+    {
+        const { _appThemeContext } = useApp();
+        const usedTheme = _appThemeContext.useTheme();
+        const id = (_a = p.id) !== null && _a !== void 0 ? _a : randomAlphaNum(8, "input_field_");
+        const manner = (_b = p.manner) !== null && _b !== void 0 ? _b : "plain";
+        const msg = p.errorMessage
+            ? { kind: "error", msg: p.errorMessage }
+            : p.warningMessage
+                ? { kind: "warning", msg: p.warningMessage }
+                : p.infoMessage
+                    ? { kind: "info", msg: p.infoMessage }
+                    : p.successMessage
+                        ? { kind: "success", msg: p.successMessage }
                         : null;
-        return (_jsxs("div", { style: {
-                flex: this.props.flex
-                    ? this.props.flex === true
-                        ? 1
-                        : this.props.flex
-                    : undefined,
-                width: this.props.flex ? undefined : ((_b = this.props.width) !== null && _b !== void 0 ? _b : 12) + "rem",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "stretch",
-                filter: this.props.onInput ? undefined : "grayscale(1) opacity(0.5)",
-                pointerEvents: this.props.onInput ? undefined : "none",
-                cursor: this.props.onInput ? undefined : "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, Object.assign({ kind: msg === null || msg === void 0 ? void 0 : msg.kind, manner: msg ? "minor" : "plain", overflow: "hidden", padding: 0, bordered: true }, applyProps("text-field", elbe, ["text_field_base"], this.props.style), { 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 })] }))] })] }));
+        return (_jsx(LabeledInput, Object.assign({}, p, { id: id, disabled: !p.onInput, typeLabel: "text-field", manner: manner, children: _jsxs(Card, { className: "elbe-focussink", style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "stretch",
+                    borderStyle: "none",
+                }, kind: msg === null || msg === void 0 ? void 0 : msg.kind, padding: 0, manner: msg ? "major" : undefined, children: [_jsx(Card
+                    // inner card for input only
+                    , { 
+                        // inner card for input only
+                        kind: msg === null || msg === void 0 ? void 0 : msg.kind, manner: msg ? "minor" : undefined, overflow: "hidden", padding: 0, bordered: true, style: {
+                            transition: "none",
+                        }, children: p.inputType === "area" ? (_jsx(_MultiLineField, { props: p, id: id })) : (_jsx(_SingleLineField, { leading: p.leading, trailing: p.trailing, onLeadingTap: p.onLeadingTap, onTrailingTap: p.onTrailingTap, onInput: p.onInput, value: String(p.value), hint: p.hint, inputType: p.inputType, message: msg, manner: manner })) }), msg && (_jsxs(Row, { gap: 0.5, style: {
+                            padding: "0.25rem 0.5rem",
+                            marginBottom: `${usedTheme.theme.geometry.borderWidth}rem`,
+                        }, 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/single_line.d.ts

@@ -1,18 +1,20 @@
-import { ElbeAlertKinds, IconChild, InputFieldProps } from "../../../..";
+import { ColorSelection, IconChild } from "../../../..";
 type _InputMsg = {
-    kind: ElbeAlertKinds;
+    kind: ColorSelection.KindsAlert;
     msg: string;
 };
-export interface SLInputFieldProps extends InputFieldProps {
+export type SLInputFieldProps = {
     leading?: IconChild;
     onLeadingTap?: () => void;
     trailing?: IconChild;
     onTrailingTap?: () => void;
-}
-export declare function _SingleLineField(p: {
-    props: SLInputFieldProps;
-    msg: _InputMsg | null;
-    type: string;
-    id: string;
+    onInput?: (value: string) => void;
+    value: string;
+    hint?: string;
+    manner?: ColorSelection.Manners;
+    message?: _InputMsg | null;
+};
+export declare function _SingleLineField(p: SLInputFieldProps & {
+    inputType: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,28 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { applyProps, Card, IconButton, Row, Spaced, } from "../../../..";
+import { 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, 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 })] }));
+    var _a, _b, _c, _d;
+    return (_jsxs(Row, { gap: 0, children: [_jsx(_Supplement, { kind: (_a = p.message) === null || _a === void 0 ? void 0 : _a.kind, icon: p.leading, onMessage: !!p.message, onEnabled: !!p.onInput, onTap: p.onLeadingTap, manner: (_b = p.manner) !== null && _b !== void 0 ? _b : "plain" }), _jsx("input", { type: p.inputType, style: {
+                    width: "100%",
+                    height: "3rem",
+                    flex: 1,
+                    border: "none",
+                    outline: "none",
+                    background: "none",
+                }, size: 5, placeholder: p.hint, value: p.value, onInput: (e) => p.onInput && p.onInput(e.currentTarget.value), readOnly: p.onInput ? false : true }), _jsx(_Supplement, { kind: (_c = p.message) === null || _c === void 0 ? void 0 : _c.kind, trailing: true, icon: p.trailing, onMessage: !!p.message, onEnabled: !!p.onInput, onTap: p.onTrailingTap, manner: (_d = p.manner) !== null && _d !== void 0 ? _d : "plain" })] }));
 }
 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 ? undefined : "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 ? undefined : "transparent",
-            }, onTap: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = p.onTap) === null || _a === void 0 ? void 0 : _a.call(p);
-            } }) }));
+    return (_jsx(IconButton, { kind: p.kind, manner: p.onMessage ? "minor" : p.manner, ariaLabel: p.trailing ? "trailing icon" : "leading icon", icon: p.icon, style: {
+            borderRadius: 0,
+            transition: "none",
+            backgroundColor: p.onEnabled ? undefined : "transparent",
+        }, onTap: p.onTap && p.onEnabled ? () => { var _a; return (_a = p.onTap) === null || _a === void 0 ? void 0 : _a.call(p); } : undefined }));
 }

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

@@ -6,9 +6,13 @@ export type FlexProps = {
     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("react/jsx-runtime").JSX.Element;
-export declare function Column({ gap, main, cross, children, noScrollbar, scroll, ...p }: FlexProps): import("react/jsx-runtime").JSX.Element;
-export declare function Row({ gap, main, cross, wrap, children, noScrollbar, scroll, ...p }: FlexProps & {
+export declare function Column({ gap, main, cross, children, noScrollbar, scroll, ...p }: FlexProps & ElbeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Row({ gap, main, cross, wrap, children, noScrollbar, scroll, ...p }: FlexProps & ElbeProps & {
+    wrap?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FlexLayout({ gap, main, cross, direction, children, noScrollbar, scroll, wrap, ...p }: FlexProps & ElbeProps & {
+    direction?: "row" | "column";
     wrap?: boolean;
 }): import("react/jsx-runtime").JSX.Element;