elbe-ui 0.2.52 → 0.4.0

package/dist/ui/theme/colors.js

@@ -1,6 +1,8 @@
 import { hslToRgb, rgbToHsl } from "colors-convert";
 import { clamp } from "../util/util";
 import { colorThemePreset } from "./color_theme";
+import { lColor, } from "./seed";
+export const cContrasts = ["normal", "highvis"];
 export const cModes = ["light", "dark"];
 export const cSchemes = ["primary", "secondary", "inverse"];
 export const cKinds = [
@@ -159,7 +161,7 @@ export class StateColor extends LayerColor {
             `${activeS} { ${this.active.asCss()} }\n` +
             `${disS} { ${this.disabled.asCss()} }`);
     }
-    static generate(_, context, style, fromFront) {
+    static generate(p, _, context, style, fromFront) {
         function _make(factor) {
             const front = style.front;
             return new LayerColor((fromFront
@@ -192,8 +194,12 @@ export class MannerColor extends StateColor {
         return ((maj ? ` .major { ${maj.asCss()} } \n` : "") +
             (min ? ` .minor { ${min.asCss()} } \n` : ""));
     }
-    static generate(s, c, style) {
-        return new MannerColor(style ? StateColor.generate(s, c, s.variant.major(s, c, style)) : null, style ? StateColor.generate(s, c, s.variant.minor(s, c, style)) : null, StateColor.generate(s, c, s.variant.flat(s, c, style), true));
+    static generate(path, seed, base, style) {
+        return new MannerColor(style
+            ? StateColor.generate([...path, "major"], seed, base, seed.variant.major({ path, seed, base, style }))
+            : null, style
+            ? StateColor.generate([...path, "minor"], seed, base, seed.variant.minor({ path, seed, base, style }))
+            : null, StateColor.generate([...path, "flat"], seed, base, seed.variant.flat({ path, seed, base, style }), true));
         /*
         if (!style) {
           return new MannerColor(null, null, StateColor.generate(s, c, c, true));
@@ -226,8 +232,8 @@ export class KindColor extends MannerColor {
             `.warning { ${this.warning.asCss()} }\n` +
             `.error { ${this.error.asCss()} }`);
     }
-    static generate(s, c) {
-        return new KindColor(MannerColor.generate(s, c), MannerColor.generate(s, c, s.style.accent(s, c, s.accent)), MannerColor.generate(s, c, s.style.info(s, c, s.info)), MannerColor.generate(s, c, s.style.success(s, c, s.success)), MannerColor.generate(s, c, s.style.warning(s, c, s.warning)), MannerColor.generate(s, c, s.style.error(s, c, s.error)));
+    static generate(path, seed, base) {
+        return new KindColor(MannerColor.generate([...path, "plain"], seed, base), MannerColor.generate([...path, "accent"], seed, base, seed.style.accent({ path, seed, base, style: lColor(seed.accent) })), MannerColor.generate([...path, "info"], seed, base, seed.style.info({ path, seed, base, style: lColor(seed.info) })), MannerColor.generate([...path, "success"], seed, base, seed.style.success({ path, seed, base, style: lColor(seed.success) })), MannerColor.generate([...path, "warning"], seed, base, seed.style.warning({ path, seed, base, style: lColor(seed.warning) })), MannerColor.generate([...path, "error"], seed, base, seed.style.error({ path, seed, base, style: lColor(seed.error) })));
     }
 }
 export class SchemeColor extends KindColor {
@@ -243,9 +249,9 @@ export class SchemeColor extends KindColor {
             `.secondary { ${this.secondary.asCss()} }\n` +
             `.inverse { ${this.inverse.asCss()} }`);
     }
-    static generate(seed, c) {
+    static generate(path, seed, base) {
         const m = seed.scheme;
-        return new SchemeColor(KindColor.generate(seed, m.primary(seed, c)), KindColor.generate(seed, m.secondary(seed, c)), KindColor.generate(seed, m.inverse(seed, c)));
+        return new SchemeColor(KindColor.generate([...path, "primary"], seed, m.primary({ path, seed, base })), KindColor.generate([...path, "secondary"], seed, m.secondary({ path, seed, base })), KindColor.generate([...path, "inverse"], seed, m.inverse({ path, seed, base })));
     }
 }
 export class ModeColor extends SchemeColor {
@@ -255,10 +261,24 @@ export class ModeColor extends SchemeColor {
         this.dark = dark;
     }
     asCss() {
-        return (`.elbe { ${this.light.asCss()}}` + `.elbe.dark { ${this.dark.asCss()}}`);
+        return `&{ ${this.light.asCss()}}` + `&.dark { ${this.dark.asCss()}}`;
     }
-    static generate(seed) {
-        return new ModeColor(SchemeColor.generate(seed, seed.base), SchemeColor.generate(seed, seed.mode.dark(seed, seed.base)));
+    static generate(path, seed) {
+        return new ModeColor(SchemeColor.generate(path, seed, lColor(seed.base)), SchemeColor.generate([...path, "dark"], seed, seed.mode.dark({ path, seed, base: lColor(seed.base) })));
+    }
+}
+export class ContrastColor extends ModeColor {
+    constructor(normal, highvis) {
+        super(normal.light, normal.dark);
+        this.normal = normal;
+        this.highvis = highvis;
+    }
+    asCss() {
+        return (`& { ${this.normal.asCss()}}` + `&.highvis { ${this.highvis.asCss()}}`);
+    }
+    static generate(path, seed) {
+        const p = { path, base: lColor(seed.base), seed };
+        return new ContrastColor(ModeColor.generate(path, seed.contrast.normal(p)), ModeColor.generate([...path, "highvis"], seed.contrast.highvis(p)));
     }
 }
 export class ColorTheme {
@@ -267,17 +287,24 @@ export class ColorTheme {
         this.color = color;
     }
     asCss() {
-        return (`:root {
+        return `
   --c-accent: ${this.colors.accent.back.asCss()};
   --c-info: ${this.colors.info.back.asCss()};
   --c-success: ${this.colors.success.back.asCss()};
   --c-warning: ${this.colors.warning.back.asCss()};
   --c-error: ${this.colors.error.back.asCss()};
-}` + this.color.asCss());
+  ${this.color.asCss()}`;
     }
-    static generate(seed, highVis) {
-        const s = colorThemePreset(seed, highVis !== null && highVis !== void 0 ? highVis : false);
-        return new ColorTheme(s, ModeColor.generate(s));
+    static generate(seed) {
+        const s = colorThemePreset(seed);
+        return new ColorTheme({
+            base: lColor(s.base),
+            accent: lColor(s.accent),
+            info: lColor(s.info),
+            success: lColor(s.success),
+            warning: lColor(s.warning),
+            error: lColor(s.error),
+        }, ContrastColor.generate([], s));
     }
 }
 //Bun.write("./example.css", ColorTheme.generate().asCss());

package/dist/ui/theme/geometry_theme.js

@@ -6,12 +6,10 @@ export class GeometryTheme {
         this.borderWidth = borderWidth;
     }
     asCss() {
-        return (`:root{` +
-            `--g-size: ${this.size}px;` +
+        return (`--g-size: ${this.size}px;` +
             `--g-radius: ${this.radius}rem;` +
             `--g-padding: ${this.padding}rem;` +
-            `--g-border-width: ${this.borderWidth}rem;` +
-            "}");
+            `--g-border-width: ${this.borderWidth}rem;`);
     }
     static generate(seed) {
         const s = geometryThemePreset(seed);

package/dist/ui/theme/seed.d.ts

@@ -1,11 +1,18 @@
-import { LayerColor, SeedFlatSelector, SeedSelector, SeedStyleSelector } from "../..";
-export type ColorSeedColors = {
-    base: LayerColor;
-    accent: LayerColor;
-    info: LayerColor;
-    success: LayerColor;
-    warning: LayerColor;
-    error: LayerColor;
+import { LayerColor, SeedFlatSelector, SeedModifier, SeedSelector, SeedStyleSelector } from "../..";
+export type HexColor = `#${string}`;
+export type ColorSeedColors = _Colors<LayerColor | HexColor>;
+export type ThemeColors = _Colors<LayerColor>;
+type _Colors<T> = {
+    base: T;
+    accent: T;
+    info: T;
+    success: T;
+    warning: T;
+    error: T;
+};
+type _ContrastSeed = {
+    highvis: SeedModifier;
+    normal: SeedModifier;
 };
 type _ModeSeed = {
     light: SeedSelector;
@@ -29,15 +36,18 @@ type _VariantSeed = {
     flat: SeedFlatSelector;
 };
 export type ColorThemeSeed = ColorSeedColors & {
+    contrast: _ContrastSeed;
     mode: _ModeSeed;
     scheme: _SchemeSeed;
     style: _StyleSeed;
     variant: _VariantSeed;
 };
 export type PartialColorThemeSeed = Partial<ColorSeedColors> & {
+    contrast?: Partial<_ContrastSeed>;
     mode?: Partial<_ModeSeed>;
     scheme?: Partial<_SchemeSeed>;
     style?: Partial<_StyleSeed>;
     variant?: Partial<_VariantSeed>;
 };
+export declare function lColor(color: LayerColor | HexColor): LayerColor;
 export {};

package/dist/ui/theme/seed.js

@@ -1 +1,4 @@
-export {};
+import { LayerColor, } from "../..";
+export function lColor(color) {
+    return typeof color === "string" ? LayerColor.fromHex(color) : color;
+}

package/dist/ui/theme/theme.d.ts

@@ -2,6 +2,7 @@ import "../../elbe.css";
 import { ColorTheme } from "./colors";
 import { GeometryTheme, type GeometryThemeSeed } from "./geometry_theme";
 import { PartialColorThemeSeed } from "./seed";
+import { ElbeThemeConfig } from "./theme_context";
 import { TypeTheme, type TypeThemeSeed } from "./type_theme";
 export * from "./color_theme";
 export * from "./colors";
@@ -18,15 +19,12 @@ export declare class ElbeThemeData {
     readonly geometry: GeometryTheme;
     constructor(color: ColorTheme, type: TypeTheme, geometry: GeometryTheme);
     asCss(): string;
-    _pageBackground(dark?: boolean): string;
-    static fromSeed(seed: ElbeThemeSeed, highVis: boolean): ElbeThemeData;
+    static fromSeed(seed: ElbeThemeSeed): ElbeThemeData;
 }
 export declare function ElbeTheme(p: {
     children: any;
-    dark?: boolean;
     todoOverlay?: boolean;
-    highVis?: boolean;
-} & ({
+} & Partial<ElbeThemeConfig> & ({
     theme: ElbeThemeData;
 } | {
     seed?: ElbeThemeSeed;

package/dist/ui/theme/theme.js

@@ -3,6 +3,7 @@ import "../../elbe.css";
 import { ToDo } from "../components/dev/todo";
 import { ColorTheme } from "./colors";
 import { GeometryTheme } from "./geometry_theme";
+import { _configCss, makeThemeConfig, ThemeConfigContext, ThemeContext, } from "./theme_context";
 import { TypeTheme } from "./type_theme";
 export * from "./color_theme";
 export * from "./colors";
@@ -15,22 +16,18 @@ export class ElbeThemeData {
         this.geometry = geometry;
     }
     asCss() {
-        return [this.color, this.type, this.geometry]
+        const inner = [this.color, this.type, this.geometry]
             .map((s) => s.asCss())
             .join("\n");
+        return `.elbe {${inner}}`;
     }
-    _pageBackground(dark) {
-        const c = this.color.color;
-        return `html,:root {${(!!dark ? c.dark : c.light).asCss()};`;
-    }
-    static fromSeed(seed, highVis) {
-        return new ElbeThemeData(ColorTheme.generate(seed.color, highVis), TypeTheme.generate(seed.type), GeometryTheme.generate(seed.geometry));
+    static fromSeed(seed) {
+        return new ElbeThemeData(ColorTheme.generate(seed.color), TypeTheme.generate(seed.type), GeometryTheme.generate(seed.geometry));
     }
 }
 export function ElbeTheme(p) {
-    var _a, _b;
-    const theme = "theme" in p
-        ? p.theme
-        : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {}, (_b = p.highVis) !== null && _b !== void 0 ? _b : false);
-    return (_jsxs("div", { class: `elbe ${p.dark ? "dark" : ""} ${p.highVis ? "high_vis" : ""}`, children: [p.todoOverlay && _jsx(ToDo.Overlay, {}), _jsx("style", { children: theme.asCss() }), _jsx("style", { children: theme._pageBackground(p.dark) }), p.children] }));
+    var _a;
+    const theme = "theme" in p ? p.theme : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {});
+    const config = makeThemeConfig(p);
+    return (_jsxs("div", { class: `elbe ${config.dark ? "dark" : ""} ${config.highVis ? "highvis" : ""} ${config.reducedMotion ? "reduced_motion" : ""}`, children: [p.todoOverlay && _jsx(ToDo.Overlay, {}), _jsx("style", { children: theme.asCss() }), _jsx("style", { children: _configCss(theme, config) }), _jsx(ThemeConfigContext.Provider, { value: config, children: _jsx(ThemeContext.Provider, { value: theme, children: p.children }) })] }));
 }

package/dist/ui/theme/theme_context.d.ts

@@ -0,0 +1,18 @@
+import { ElbeThemeData } from "./theme";
+export interface ElbeThemeConfig {
+    highVis: boolean;
+    dark: boolean;
+    reducedMotion: boolean;
+    scale: number;
+}
+export declare function makeThemeConfig(p: Partial<ElbeThemeConfig>): {
+    highVis: boolean;
+    dark: boolean;
+    reducedMotion: boolean;
+    scale: number;
+};
+export declare const ThemeConfigContext: import("preact").Context<ElbeThemeConfig>;
+export declare function _configCss(t: ElbeThemeData, c: ElbeThemeConfig): string;
+export declare const ThemeContext: import("preact").Context<ElbeThemeData>;
+export declare function useThemeConfig(): ElbeThemeConfig;
+export declare function useTheme(): ElbeThemeData;

package/dist/ui/theme/theme_context.js

@@ -0,0 +1,26 @@
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+import { ElbeThemeData } from "./theme";
+export function makeThemeConfig(p) {
+    var _a, _b, _c, _d;
+    return {
+        highVis: (_a = p.highVis) !== null && _a !== void 0 ? _a : false,
+        dark: (_b = p.dark) !== null && _b !== void 0 ? _b : false,
+        reducedMotion: (_c = p.reducedMotion) !== null && _c !== void 0 ? _c : false,
+        scale: (_d = p.scale) !== null && _d !== void 0 ? _d : 1,
+    };
+}
+export const ThemeConfigContext = createContext(makeThemeConfig({}));
+export function _configCss(t, c) {
+    const cBack = c.dark ? t.color.color.dark : t.color.color.light;
+    return `html,:root {
+  font-size: ${c.scale * 16}px;
+  ${cBack.asCss()};}`;
+}
+export const ThemeContext = createContext(ElbeThemeData.fromSeed({}));
+export function useThemeConfig() {
+    return useContext(ThemeConfigContext);
+}
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/dist/ui/theme/type_theme.js

@@ -51,7 +51,7 @@ export function typeThemePreset(merge) {
     return Object.assign({ heading: {
             bold: true,
             family: ["Calistoga", "Arial", "sans-serif"],
-            size: 2.2,
+            size: 2,
         }, body: {
             bold: false,
             family: ["Helvetica", "Arial", "sans-serif"],
@@ -61,7 +61,10 @@ export function typeThemePreset(merge) {
             family: ["Courier", "monospace"],
             size: 1,
         }, headingVariants: (style, variant) => {
-            const size = style.size * (1 - (variant - 1) * 0.1);
+            const reg = 1;
+            const diff = style.size - reg;
+            const varFac = (4 - (variant - 2)) / 6;
+            const size = reg + diff * Math.pow(varFac, 1.5);
             return Object.assign(Object.assign({}, style), { size });
         }, bodyVariants: (style, variant) => {
             const size = style.size * (variant === "s" ? 0.8 : 1.2);

package/dist/ui/util/ctx_toolbar.d.ts

@@ -0,0 +1,8 @@
+import React from "preact/compat";
+type _ToolbarState = "toolbar" | "overflow" | null;
+export declare const ToolbarContext: React.Context<_ToolbarState>;
+export declare function useToolbar(): {
+    isInToolbar: boolean;
+    isInOverflow: boolean;
+};
+export {};

package/dist/ui/util/ctx_toolbar.js

@@ -0,0 +1,9 @@
+import React, { useContext } from "preact/compat";
+export const ToolbarContext = React.createContext(null);
+export function useToolbar() {
+    const ctx = useContext(ToolbarContext);
+    return {
+        isInToolbar: ctx === "toolbar",
+        isInOverflow: ctx === "overflow",
+    };
+}

package/dist/ui/util/util.d.ts

@@ -1,4 +1,6 @@
 import type React from "preact/compat";
+export type int = number;
+export type float = number;
 export type ElbeChild = React.ReactNode;
 export type ElbeChildren = ElbeChild[] | ElbeChild;
 export declare function clamp(value: number, min: number, max: number): number;
@@ -20,3 +22,7 @@ export declare function share(data: {
  */
 export declare function copyToClipboard(text: string, toastMsg?: string): void;
 export declare function scrollToId(id: string): void;
+export declare function randomAlphaNum(length: int, prefix?: string): string;
+export type LayoutModes = "mobile" | "narrow" | "wide";
+export declare function useLayoutMode(): LayoutModes;
+export declare function useSiteScroll(): number;

package/dist/ui/util/util.js

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "preact/compat";
 import { showToast } from "./toast";
 export function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
@@ -36,3 +37,37 @@ export function scrollToId(id) {
     if (el)
         el.scrollIntoView({ behavior: "smooth" });
 }
+export function randomAlphaNum(length, prefix = "") {
+    const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+    let result = prefix;
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+function _layoutMode() {
+    const w = window.innerWidth;
+    if (w < 700)
+        return "mobile";
+    if (w < 1100)
+        return "narrow";
+    return "wide";
+}
+export function useLayoutMode() {
+    const [mode, setMode] = useState(_layoutMode());
+    useEffect(() => {
+        const onResize = () => setMode(_layoutMode());
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    });
+    return mode;
+}
+export function useSiteScroll() {
+    const [scroll, setScroll] = useState(0);
+    useEffect(() => {
+        const onScroll = () => setScroll(window.scrollY);
+        window.addEventListener("scroll", onScroll);
+        return () => window.removeEventListener("scroll", onScroll);
+    }, []);
+    return scroll;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "0.2.52",
+  "version": "0.4.0",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {

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

@@ -1,22 +0,0 @@
-import React from "preact/compat";
-import { ActionElbeProps } from "../base/box";
-import { _TextArea } from "./text_area";
-export type InputFieldProps = {
-    label?: string;
-    hint: string;
-    readonly?: boolean;
-    value: string | number;
-    onInput?: (value: string) => void;
-} & ActionElbeProps;
-export declare class Field extends React.Component<InputFieldProps & {
-    type?: "text" | "number" | "password" | "date" | "time" | "email";
-}> {
-    static text: (p: InputFieldProps) => React.JSX.Element;
-    static number: (p: InputFieldProps) => React.JSX.Element;
-    static password: (p: InputFieldProps) => React.JSX.Element;
-    static date: (p: InputFieldProps) => React.JSX.Element;
-    static time: (p: InputFieldProps) => React.JSX.Element;
-    static email: (p: InputFieldProps) => React.JSX.Element;
-    static multiLine: typeof _TextArea;
-    render(): React.JSX.Element;
-}

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

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

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

@@ -1,10 +0,0 @@
-import { ActionElbeProps } from "../base/box";
-export declare function _TextArea({ label, hint, readonly, rows, maxLength, value, onInput, ...elbe }: {
-    label?: string;
-    hint: string;
-    rows?: number;
-    maxLength?: number;
-    readonly?: boolean;
-    value: string | number;
-    onInput?: (value: string) => void;
-} & ActionElbeProps): import("preact").JSX.Element;

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

@@ -1,22 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { applyProps } from "../base/box";
-export function _TextArea(_a) {
-    var { label, hint, readonly, rows = 4, maxLength, value, onInput } = _a, elbe = __rest(_a, ["label", "hint", "readonly", "rows", "maxLength", "value", "onInput"]);
-    return (_jsx("div", { style: {
-            width: "12rem !important",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-        }, "data-tooltip": elbe.tooltip, children: _jsx("textarea", Object.assign({}, applyProps("text_area", elbe, null, { width: "100%" }), { label: label, size: 5, cols: 5, placeholder: hint, rows: rows, maxLength: maxLength, value: value, onInput: (e) => onInput && onInput(e.currentTarget.value), readonly: readonly })) }));
-}

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

@@ -1,15 +0,0 @@
-import { type ElbeColorSchemes } from "../../..";
-import { HeaderParams } from "./header";
-/**
- * Scaffold is a layout component that provides a header and a content area.
- * It is used to create a consistent layout for pages.
- */
-export declare function Scaffold({ children, baseLimited, gap, padded, scheme, scroll, height, ...header }: {
-    baseLimited?: boolean;
-    children: any;
-    gap?: number;
-    padded?: boolean;
-    scheme?: ElbeColorSchemes;
-    scroll?: boolean;
-    height?: number;
-} & HeaderParams): import("preact").JSX.Element;

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

@@ -1,31 +0,0 @@
-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 { classString } from "../../..";
-import { Column } from "./flex";
-import { Header } from "./header";
-/**
- * Scaffold is a layout component that provides a header and a content area.
- * It is used to create a consistent layout for pages.
- */
-export function Scaffold(_a) {
-    var { children, baseLimited = false, gap = 1, padded = true, scheme, scroll = false, height } = _a, header = __rest(_a, ["children", "baseLimited", "gap", "padded", "scheme", "scroll", "height"]);
-    return (_jsxs(Column, { cross: "stretch", gap: 0, typeLabel: "Scaffold", class: `${scheme !== null && scheme !== void 0 ? scheme : "primary"}`, style: {
-            overflowY: height ? "scroll" : null,
-            height: height ? `${height}rem` : scroll ? null : "100vh",
-            //height: header.limitToParent ? "100px" : null,
-        }, children: [_jsx(Header, Object.assign({}, header, { _absolute: height ? true : false })), _jsx("div", { class: classString([
-                    !scroll && "flex-1",
-                    padded && "padded",
-                    baseLimited && "base-limited",
-                ]), children: _jsx(Column, { cross: "stretch", style: { height: scroll ? null : "100%" }, gap: gap !== null && gap !== void 0 ? gap : 1, children: children }) })] }));
-}