elbe-ui 0.4.26 → 1.0.2

package/dist/ui/components/routing/route.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { wouter } from "../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Wouter } from "../../..";
 /**
  * a route that also renders a menu item in the <AppBase> component.
  * place it as a child of <AppBase> to have it rendered in the menu.
@@ -12,9 +12,9 @@ export function MenuRoute(p) {
     return (_jsx(Route, { nest: true, path: p.path, children: p.children }));
 }
 /**
- * a helper function to create a <wouter.Route> with a path.
+ * a helper function to create a <Wouter.Route> with a path.
  */
-export const Route = wouter.Route;
+export const Route = Wouter.Route;
 export function isMenuRoute(r) {
     return "path" in r.props && "label" in r.props && "icon" in r.props;
 }

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

@@ -1,11 +1,11 @@
-import { Component } from "preact";
+import { Component } from "react";
 export type SpinnerProps = {
     padding?: number;
 };
 export declare class Spinner extends Component<{
     manner?: "flat" | "plain";
 } & SpinnerProps> {
-    static flat: (p: SpinnerProps) => import("preact").JSX.Element;
-    static plain: (p: SpinnerProps) => import("preact").JSX.Element;
-    render(): import("preact").JSX.Element;
+    static flat: (p: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+    static plain: (p: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/ui/components/spinner.js

@@ -1,7 +1,5 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { useComputed, useSignal } from "@preact/signals";
-import { Component } from "preact";
-import { useEffect } from "preact/hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component, useEffect, useMemo, useState } from "react";
 import { useThemeConfig } from "../theme/theme_context";
 function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
     return c
@@ -14,36 +12,38 @@ function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
 }
 export class Spinner extends Component {
     render() {
-        var _a, _b;
-        const tConfig = useThemeConfig();
-        const flat = ((_a = this.props.manner) !== null && _a !== void 0 ? _a : "flat") === "flat";
-        const xSig = useSignal(0);
-        useEffect(() => {
-            if (tConfig.reducedMotion)
-                return;
-            const interval = setInterval(() => {
-                xSig.value = (xSig.value + 2) % 100;
-            }, 16);
-            return () => clearInterval(interval);
-        });
-        const path = useComputed(() => {
-            const x = xSig.value;
-            const path = [];
-            for (let i = 0; i <= 1; i += 0.01) {
-                const pos = (i * 1 + x * 0.01) * Math.PI * 2; // angle = 0 -> 2π
-                const y = Math.sin(pos);
-                path.push([i, y]);
-            }
-            return path;
-        });
-        return (_jsx("div", { class: `${flat ? "accent flat" : "plain"}`, style: {
-                padding: `${(_b = this.props.padding) !== null && _b !== void 0 ? _b : 1}rem`,
-            }, children: _jsx("svg", { style: "width: 40px; height: 40px", viewBox: `-10 -10 120 120`, children: [
-                    _toPath(path.value, 13, 20, [0.4, 0.8], 1),
-                    _toPath(path.value, 10, 50),
-                    _toPath(path.value, 11, 80, [0.2, 0.6], 1),
-                ].map((p) => (_jsx("path", { d: p, fill: "none", stroke: "currentcolor", "stroke-width": "10", "stroke-linecap": "round" }))) }) }));
+        return _jsx(_Spinner, Object.assign({ manner: this.props.manner }, this.props));
     }
 }
 Spinner.flat = (p) => new Spinner(Object.assign({ manner: "flat" }, p)).render();
 Spinner.plain = (p) => new Spinner(Object.assign({ manner: "plain" }, p)).render();
+function _Spinner(p) {
+    var _a, _b;
+    const tConfig = useThemeConfig();
+    const flat = ((_a = p.manner) !== null && _a !== void 0 ? _a : "flat") === "flat";
+    const [x, setX] = useState(0);
+    useEffect(() => {
+        if (tConfig.reducedMotion)
+            return () => { };
+        const interval = setInterval(() => {
+            setX((prev) => (prev + 2) % 100);
+        }, 16);
+        return () => clearInterval(interval);
+    });
+    const path = useMemo(() => {
+        const path = [];
+        for (let i = 0; i <= 1; i += 0.01) {
+            const pos = (i * 1 + x * 0.01) * Math.PI * 2; // angle = 0 -> 2π
+            const y = Math.sin(pos);
+            path.push([i, y]);
+        }
+        return path;
+    }, [x]);
+    return (_jsx("div", { className: `${flat ? "accent flat" : "plain"}`, style: {
+            padding: `${(_b = p.padding) !== null && _b !== void 0 ? _b : 1}rem`,
+        }, children: _jsx("svg", { style: { width: "40px", height: "40px" }, viewBox: `-10 -10 120 120`, children: [
+                _toPath(path, 13, 20, [0.4, 0.8], 1),
+                _toPath(path, 10, 50),
+                _toPath(path, 11, 80, [0.2, 0.6], 1),
+            ].map((p, i) => (_jsx("path", { d: p, fill: "none", stroke: "currentcolor", strokeWidth: "10", strokeLinecap: "round" }, i))) }) }));
+}

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

@@ -1,4 +1,4 @@
-import React from "preact/compat";
+import React from "react";
 import type { ElbeTypeVariants } from "../theme/type_theme";
 import type { ElbeChildren } from "../util/types";
 import { type ElbeProps } from "./base/box";
@@ -16,18 +16,18 @@ export type TextProps = {
 export declare class Text extends React.Component<TextProps & {
     variant?: ElbeTypeVariants;
 }> {
-    static h1: (p: TextProps) => React.JSX.Element;
-    static h2: (p: TextProps) => React.JSX.Element;
-    static h3: (p: TextProps) => React.JSX.Element;
-    static h4: (p: TextProps) => React.JSX.Element;
-    static h5: (p: TextProps) => React.JSX.Element;
-    static h6: (p: TextProps) => React.JSX.Element;
-    static s: (p: TextProps) => React.JSX.Element;
-    static m: (p: TextProps) => React.JSX.Element;
-    static l: (p: TextProps) => React.JSX.Element;
-    static code: (p: TextProps) => React.JSX.Element;
-    constructor({ variant, ...props }: TextProps & {
-        variant?: ElbeTypeVariants;
-    });
-    render(): React.JSX.Element;
+    static h1: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static h2: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static h3: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static h4: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static h5: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static h6: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static s: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static m: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static l: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static code: (p: TextProps) => import("react/jsx-runtime").JSX.Element;
+    static defaultProps: {
+        variant: string;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/ui/components/text.js

@@ -9,14 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import React from "preact/compat";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { applyProps } from "./base/box";
 export class Text extends React.Component {
-    constructor(_a) {
-        var { variant = "body-m" } = _a, props = __rest(_a, ["variant"]);
-        super(Object.assign(Object.assign({}, props), { variant }));
-    }
     render() {
         const _a = this.props, { align, bold, italic, underline, striked, color, size, children, variant, v } = _a, elbe = __rest(_a, ["align", "bold", "italic", "underline", "striked", "color", "size", "children", "variant", "v"]);
         return (_jsxs("span", Object.assign({}, applyProps("text", elbe, [
@@ -46,3 +42,7 @@ Text.s = (p) => _jsx(Text, Object.assign({}, p, { variant: "body-s" }));
 Text.m = (p) => _jsx(Text, Object.assign({}, p, { variant: "body-m" }));
 Text.l = (p) => _jsx(Text, Object.assign({}, p, { variant: "body-l" }));
 Text.code = (p) => _jsx(Text, Object.assign({}, p, { variant: "code" }));
+// replace the constructor with defaultProps so React receives the same props object
+Text.defaultProps = {
+    variant: "body-m",
+};

package/dist/ui/theme/colors.js

@@ -47,7 +47,6 @@ export class RGBAColor {
         if (!hex)
             return new RGBAColor(0, 0, 0, 0);
         const c = hex.replace("#", "").padEnd(6, "0").padEnd(8, "f").toLowerCase();
-        console.log(c);
         return new RGBAColor(parseInt(c.substring(0, 2), 16), parseInt(c.substring(2, 4), 16), parseInt(c.substring(4, 6), 16), parseInt(c.substring(6, 8), 16) / 255);
     }
     desaturated(f = 1) {

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

@@ -28,4 +28,4 @@ export declare function ElbeTheme(p: {
     theme: ElbeThemeData;
 } | {
     seed?: ElbeThemeSeed;
-})): import("preact").JSX.Element;
+})): import("react/jsx-runtime").JSX.Element;

package/dist/ui/theme/theme.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect } from "preact/hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import "../../elbe.css";
 import { ToDo } from "../components/dev/todo";
 import { ColorTheme } from "./colors";
@@ -31,7 +31,7 @@ export function ElbeTheme(p) {
     const theme = "theme" in p ? p.theme : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {});
     const config = makeThemeConfig(p);
     _addTooltip();
-    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 }) })] }));
+    return (_jsxs("div", { className: `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 }) })] }));
 }
 function _addTooltip() {
     return useEffect(() => {

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

@@ -11,8 +11,8 @@ export declare function makeThemeConfig(p: Partial<ElbeThemeConfig>): {
     reducedMotion: boolean;
     scale: number;
 };
-export declare const ThemeConfigContext: import("preact").Context<ElbeThemeConfig>;
+export declare const ThemeConfigContext: import("react").Context<ElbeThemeConfig>;
 export declare function _configCss(t: ElbeThemeData, c: ElbeThemeConfig): string;
-export declare const ThemeContext: import("preact").Context<ElbeThemeData>;
+export declare const ThemeContext: import("react").Context<ElbeThemeData>;
 export declare function useThemeConfig(): ElbeThemeConfig;
 export declare function useTheme(): ElbeThemeData;

package/dist/ui/theme/theme_context.js

@@ -1,5 +1,4 @@
-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
+import { createContext, useContext } from "react";
 import { ElbeThemeData } from "./theme";
 export function makeThemeConfig(p) {
     var _a, _b, _c, _d;

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

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

package/dist/ui/util/ctx_toolbar.js

@@ -1,5 +1,5 @@
-import React, { useContext } from "preact/compat";
-export const ToolbarContext = React.createContext(null);
+import { createContext, useContext } from "react";
+export const ToolbarContext = createContext(null);
 export function useToolbar() {
     const ctx = useContext(ToolbarContext);
     return {

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

@@ -1 +1 @@
-export declare function _ElbeErr(msg: string): import("preact").JSX.Element;
+export declare function _ElbeErr(msg: string): import("react/jsx-runtime").JSX.Element;

package/dist/ui/util/error_view.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icons } from "../..";
 export function _ElbeErr(msg) {
-    return (_jsxs("div", { class: "row text-s gap-half", style: "background: #ee0044; color: white; border-radius: 4px; text-align: left; padding: .5rem", children: [_jsx(Icons.CircleX, {}), _jsxs("div", { class: "column gap-none cross-stretch", children: [_jsx("b", { class: "text-s", children: "elbe error" }), _jsx("span", { style: "margin-top: -.125rem", children: msg })] })] }));
+    return (_jsxs("div", { className: "row text-s gap-half", style: {
+            background: "#ee0044",
+            color: "white",
+            borderRadius: "4px",
+            textAlign: "left",
+            padding: ".5rem",
+        }, children: [_jsx(Icons.CircleX, {}), _jsxs("div", { className: "column gap-none cross-stretch", children: [_jsx("b", { className: "text-s", children: "elbe error" }), _jsx("span", { style: { marginTop: "-.125rem" }, children: msg })] })] }));
 }

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

@@ -24,7 +24,7 @@ export interface _L10nState<T extends _L10nData> extends _L10nSelection {
     setEasyLang: (easyLang: boolean) => void;
     inline: (value: Maybe<L10nInlinePlain | string>) => string;
 }
-export declare const _L10nContext: import("preact").Context<_L10nState<any> | null>;
+export declare const _L10nContext: import("react").Context<_L10nState<any> | null>;
 export declare function _maybeL10n<T extends _L10nData>(): _L10nState<T> | null;
 export declare function _useL10n<T extends _L10nData>(): _L10nState<T>;
 export {};

package/dist/ui/util/l10n/_l10n_util.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "preact/compat";
+import { createContext, useContext } from "react";
 export function _bestMatch(selection, locales) {
     if (locales.length === 0)
         return null;

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

@@ -1,4 +1,4 @@
-import React from "preact/compat";
+import React from "react";
 import { ElbeChildren } from "../types";
 import { _L10nData, _L10nState, _LocaleID, _LocaleIDEasy } from "./_l10n_util";
 export type L10nInlinePlain = {

package/dist/ui/util/l10n/l10n.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { _bestMatch, _L10nContext, _useL10n, } from "./_l10n_util";
 /**
  * L10nBase is a function that creates a localization context provider and a hook to use the localization context.

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

@@ -1,9 +1,10 @@
+import { ReactNode } from "react";
 export type int = number;
 export type float = number;
 /** a unix epoch timestamp in milliseconds */
 export type UnixMS = int;
-export type ElbeChild = React.ReactNode;
-export type ElbeChildren = ElbeChild[] | ElbeChild;
+export type ElbeChild = ReactNode;
+export type ElbeChildren = ReactNode;
 export type s = string;
 export type n = number;
 export type b = boolean;

package/dist/ui/util/util.js

@@ -1,10 +1,9 @@
-import { useEffect, useState } from "preact/compat";
+import { useEffect, useState } from "react";
 import { showToast } from "../..";
 export function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }
 export function classString(classes) {
-    console.log(classes);
     return classes.filter((c) => c).join(" ");
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "0.4.26",
+  "version": "1.0.2",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -10,7 +10,8 @@
   "keywords": [
     "ui",
     "ui-framework",
-    "flutter"
+    "flutter",
+    "react"
   ],
   "files": [
     "dist"
@@ -21,24 +22,21 @@
     "build:ts": "tsc",
     "build:dts": "tsc --declaration",
     "build:css": "sass -q style/elbe.scss dist/elbe.css",
-    "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css && (cd example && npm run prep)",
+    "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css ",
     "dev": "bun run build && (cd example && bun run dev)",
     "pub": "bun run build && npm publish"
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "sass": "^1.80.6"
+    "sass": "^1.93.2"
   },
   "peerDependencies": {
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@preact/preset-vite": "^2.9.1",
-    "@preact/signals": "^1.3.0",
     "colors-convert": "^1.4.1",
     "lucide-react": "^0.438.0",
-    "preact": "^10.24.2",
-    "vite": "^5.4.10",
+    "react": "^19.2.0",
     "wouter": "^3.7.1"
   }
 }