xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/TextBox/TextBox.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.passwordInputComponentRenderer = exports.PasswordMd = exports.textBoxComponentRenderer = exports.TextBoxMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const TextBox_module_scss_1 = __importDefault(require("./TextBox.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const TextBoxNative_1 = require("./TextBoxNative");
+const COMP = "TextBox";
+exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` is an input component that allows users to input and edit textual data.`,
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        maxLength: (0, metadata_helpers_1.dMaxLength)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        startText: (0, metadata_helpers_1.dStartText)(),
+        startIcon: (0, metadata_helpers_1.dStartIcon)(),
+        endText: (0, metadata_helpers_1.dEndText)(),
+        endIcon: (0, metadata_helpers_1.dEndIcon)(),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, ComponentDefs_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(TextBox_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        // TODO: When FormItem is themed, move these defaults there
+        "radius-Input": "$radius",
+        "color-text-Input": "$color-text-primary",
+        "color-bg-Input--disabled": "$color-bg--disabled",
+        "thickness-border-Input": "1px",
+        "min-height-Input": "39px",
+        "padding-Input": "$space-2",
+        "style-border-Input": "solid",
+        "color-border-Input--disabled": "$color-border--disabled",
+        "color-text-Input--disabled": "$color-text--disabled",
+        "color-border-Input-error": "$color-border-Input-default--error",
+        "color-border-Input-warning": "$color-border-Input-default--warning",
+        "color-border-Input-success": "$color-border-Input-default--success",
+        "color-placeholder-Input": "$color-text-subtitle",
+        "color-adornment-Input": "$color-text-subtitle",
+        "color-outline-Input--focus": "$color-outline--focus",
+        "thickness-outline-Input--focus": "$thickness-outline--focus",
+        "style-outline-Input--focus": "$style-outline--focus",
+        "offset-outline-Input--focus": "$offset-outline--focus",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+});
+function renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, type = "text") {
+    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+}
+exports.textBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
+    return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi);
+});
+exports.PasswordMd = (0, ComponentDefs_1.createMetadata)(Object.assign(Object.assign({}, exports.TextBoxMd), { description: "The \`Password\` component is a specialized version of the \`TextBox\` component that " +
+        "allows users to input and edit passwords." }));
+exports.passwordInputComponentRenderer = (0, renderers_1.createComponentRenderer)("PasswordInput", exports.PasswordMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
+    return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, "password");
+});

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -0,0 +1,109 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const TextBox_module_scss_1 = __importDefault(require("./TextBox.module.scss"));
+const constants_1 = require("@components-core/constants");
+const InputAdornment_1 = require("@components/Input/InputAdornment");
+const misc_1 = require("@components-core/utils/misc");
+const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
+    const inputRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
+    // --- NOTE: This is a workaround for the jumping caret issue.
+    // --- Local state can sync up values that can get set asynchronously outside the component.
+    const [localValue, setLocalValue] = react_2.default.useState(value);
+    (0, react_2.useEffect)(() => {
+        setLocalValue(value);
+    }, [value]);
+    // --- End NOTE
+    // --- Initialize the related field with the input's initial value
+    (0, react_2.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    const updateValue = (0, react_2.useCallback)((value) => {
+        setLocalValue(value);
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    // --- Handle the value change events for this input
+    const onInputChange = (0, react_2.useCallback)((event) => {
+        updateValue(event.target.value);
+    }, [updateValue]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_2.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_2.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const focus = (0, react_2.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateValue(newValue);
+    });
+    (0, react_2.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TextBox_module_scss_1.default.inputRoot, {
+                [TextBox_module_scss_1.default.disabled]: !enabled,
+                [TextBox_module_scss_1.default.readOnly]: readOnly,
+                [TextBox_module_scss_1.default.error]: validationStatus === "error",
+                [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
+                [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
+            }), tabIndex: -1, onFocus: () => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
+});

package/dist/scripts/src/components/Theme/NotificationToast.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationToast = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hot_toast_1 = __importStar(require("react-hot-toast"));
+const TOASTER_CONTAINER_STYLE = {
+    top: 40,
+    right: 40,
+    bottom: 40,
+    left: 40,
+    position: "absolute",
+    overflowY: "hidden",
+};
+const NotificationToast = ({ toastDuration }) => {
+    return ((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }));
+};
+exports.NotificationToast = NotificationToast;

package/dist/scripts/src/components/Theme/Theme.js

@@ -0,0 +1,43 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeComponentRenderer = exports.ThemeMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ThemeNative_1 = require("./ThemeNative");
+const COMP = "Theme";
+exports.ThemeMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component provides a way to define a particular theming context for ` +
+        `its nested components. The XMLUI framework uses \`${COMP}\` to define the default ` +
+        `theming context for all of its child components. Theme variables and theme settings ` +
+        `only work in this context.`,
+    allowArbitraryProps: true,
+    props: {
+        themeId: (0, ComponentDefs_1.d)(`This property specifies which theme to use by setting the theme's id.`),
+        tone: (0, ComponentDefs_1.d)(`This property allows the setting of the current theme's tone. Tone is either ` +
+            `\`light\` or \`dark\`.`),
+        root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`),
+    },
+    opaque: true,
+});
+exports.themeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ThemeMd, ({ node, extractValue, renderChild, layoutContext, appContext }) => {
+    var _a, _b;
+    const _c = node.props, { tone } = _c, restProps = __rest(_c, ["tone"]);
+    const toastDuration = (_b = (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.notifications) === null || _b === void 0 ? void 0 : _b.duration;
+    let themeTone = extractValue.asOptionalString(tone);
+    if (themeTone && themeTone !== "dark") {
+        themeTone = "light";
+    }
+    return ((0, jsx_runtime_1.jsx)(ThemeNative_1.Theme, { id: extractValue.asOptionalString(node.props.themeId), isRoot: extractValue.asOptionalBoolean(node.props.root), layoutContext: layoutContext, renderChild: renderChild, tone: themeTone, toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
+});

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -0,0 +1,126 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = Theme;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Theme_module_scss_1 = __importDefault(require("./Theme.module.scss"));
+const ThemeProvider_1 = require("@components-core/theming/ThemeProvider");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const react_helmet_async_1 = require("react-helmet-async");
+const react_dom_1 = require("react-dom");
+const constants_1 = require("@components-core/constants");
+const ErrorBoundary_1 = require("@components-core/ErrorBoundary");
+const NotificationToast_1 = require("./NotificationToast");
+const themeVars_1 = require("@components-core/theming/themeVars");
+function getClassName(css) {
+    return `theme-${calculateHash(css)}`;
+}
+function calculateHash(str) {
+    let hash = 0, i, chr;
+    if (str.length === 0)
+        return hash;
+    for (i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+}
+function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, }) {
+    const generatedId = (0, react_1.useId)();
+    const { themes, resources, resourceMap, activeThemeId, setRoot, root } = (0, ThemeContext_1.useThemes)();
+    const { activeTheme, activeThemeTone } = (0, ThemeContext_1.useTheme)();
+    const themeTone = tone || activeThemeTone;
+    const currentTheme = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        const themeToExtend = id ? themes.find((theme) => theme.id === id) : activeTheme;
+        if (!themeToExtend) {
+            throw new Error("Theme not found");
+        }
+        const foundTheme = Object.assign(Object.assign({}, themeToExtend), { id: generatedId, tones: Object.assign(Object.assign({}, themeToExtend.tones), { [themeTone]: Object.assign(Object.assign({}, (_a = themeToExtend.tones) === null || _a === void 0 ? void 0 : _a[themeTone]), { themeVars: Object.assign(Object.assign({}, (_c = (_b = themeToExtend.tones) === null || _b === void 0 ? void 0 : _b[themeTone]) === null || _c === void 0 ? void 0 : _c.themeVars), themeVars) }) }) });
+        return foundTheme;
+    }, [activeTheme, generatedId, id, themeTone, themeVars, themes]);
+    const { themeCssVars, getResourceUrl, fontLinks, allThemeVarsWithResolvedHierarchicalVars, getThemeVar } = (0, ThemeProvider_1.useCompiledTheme)(currentTheme, themeTone, themes, resources, resourceMap);
+    const { css, className, rangeClassName, fromClass, toClass } = (0, react_1.useMemo)(() => {
+        const vars = Object.assign(Object.assign({}, themeCssVars), { "color-scheme": themeTone });
+        // const vars = themeCssVars;
+        let css = Object.entries(vars)
+            .map(([key, value]) => {
+            return key + ":" + value + ";";
+        })
+            .join(" ");
+        css += `font-family: var(${(0, themeVars_1.getVarKey)("font-family")});`;
+        const className = getClassName(css);
+        const fromClass = `${className}-from`;
+        const toClass = `${className}-to`;
+        let rangeClassName;
+        if (!isRoot) {
+            rangeClassName = `${fromClass} ~ *:has(~ .${toClass})`;
+        }
+        return {
+            className,
+            rangeClassName,
+            fromClass,
+            toClass,
+            css,
+        };
+    }, [isRoot, themeCssVars, themeTone]);
+    // useInsertionEffect(() => {
+    //   //PERF OPT IDEA: don't inject the css content that we already have
+    //   // (e.g. in Items component we inject and generate classes for all items if we use a theme for an item, but they have the same content.
+    //   // We could inject one class, and use that instead. The harder part is keeping track of them, and remove when nobody uses them)
+    //   injectCSS(`.${className} {${css}}`, className);
+    //   if (rangeClassName) {
+    //     injectCSS(`.${rangeClassName} {${css}}`, rangeClassName);
+    //   }
+    //   let injectedClassNames = [className, rangeClassName];
+    //   return () => {
+    //     injectedClassNames.forEach(injectedClassName => {
+    //       if (injectedClassName) {
+    //         cleanupCss(injectedClassName);
+    //       }
+    //     });
+    //   };
+    // }, [className, css]);
+    const [themeRoot, setThemeRoot] = (0, react_1.useState)(root);
+    const currentThemeContextValue = (0, react_1.useMemo)(() => {
+        const themeVal = {
+            root: themeRoot,
+            activeThemeId,
+            activeThemeTone: themeTone,
+            activeTheme: currentTheme,
+            themeStyles: themeCssVars,
+            themeVars: allThemeVarsWithResolvedHierarchicalVars,
+            getResourceUrl,
+            getThemeVar,
+        };
+        return themeVal;
+    }, [
+        themeRoot,
+        activeThemeId,
+        themeTone,
+        currentTheme,
+        themeCssVars,
+        allThemeVarsWithResolvedHierarchicalVars,
+        getResourceUrl,
+        getThemeVar,
+    ]);
+    if (isRoot) {
+        const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => ((0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink)))] }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
+                        if (el) {
+                            setRoot(el);
+                        }
+                    }, children: [(0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${rangeClassName} {${css}}` }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.from, fromClass) }), renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.to, toClass) }), root &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {
+                        if (el) {
+                            setThemeRoot(el);
+                        }
+                    } }), root)] }));
+}

package/dist/scripts/src/components/ThemeChanger/ThemeChanger.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeChangerButtonComponentRenderer = exports.ThemeChangerButtonMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const DropdownMenuNative_1 = require("@components/DropdownMenu/DropdownMenuNative");
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const ContentSeparatorNative_1 = require("@components/ContentSeparator/ContentSeparatorNative");
+const ModalDialogNative_1 = require("@components/ModalDialog/ModalDialogNative");
+const RadioGroupNative_1 = require("@components/RadioGroup/RadioGroupNative");
+const react_1 = require("react");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const renderers_1 = require("@components-core/renderers");
+const StackNative_1 = require("@components/Stack/StackNative");
+const TextNative_1 = require("@components/Text/TextNative");
+const IconNative_1 = require("@components/Icon/IconNative");
+const COMP = "ThemeChangerButton";
+exports.ThemeChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    docFolder: "ThemeChanger",
+    description: `The \`${COMP}\` component is a component that allows the user to change the theme of the app.`,
+    props: {
+        showSettings: (0, ComponentDefs_1.d)("This property indicates if the Settings function of this component is displayed.", null, "boolean", true),
+    },
+});
+/**
+ * Define the renderer for the Button component
+ */
+exports.themeChangerButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ThemeChangerButtonMd, ({ renderChild, node, extractValue }) => {
+    const [isThemeSettingsOpen, setThemeSettingsOpen] = (0, react_1.useState)(false);
+    const { activeThemeId, activeThemeTone, setActiveThemeId, setActiveThemeTone, availableThemeIds, } = (0, ThemeContext_1.useThemes)();
+    const renderPreview = (id) => {
+        return renderChild({
+            type: "Theme",
+            props: {
+                themeId: id,
+                width: "100%",
+                isRoot: "true",
+                tone: "{activeThemeTone}",
+            },
+            children: [
+                {
+                    type: "Card",
+                    props: {
+                        width: "100%",
+                    },
+                    children: [
+                        {
+                            type: "App",
+                            props: {
+                                width: "100%",
+                                height: "10rem",
+                                layout: "horizontal",
+                            },
+                            children: [
+                                {
+                                    type: "NavPanel",
+                                    props: {},
+                                    children: [
+                                        {
+                                            type: "NavLink",
+                                            props: {
+                                                active: "true",
+                                                url: "/",
+                                                label: "Home",
+                                            },
+                                        },
+                                        {
+                                            type: "NavLink",
+                                            props: {
+                                                url: "/about",
+                                                label: "About",
+                                            },
+                                        },
+                                        {
+                                            type: "NavLink",
+                                            props: {
+                                                url: "/contact",
+                                                label: "Contact",
+                                            },
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: "Pages",
+                                    props: {
+                                        defaultRoute: "/",
+                                    },
+                                    children: [
+                                        {
+                                            type: "CVStack",
+                                            props: {
+                                                height: "100%",
+                                            },
+                                            children: [
+                                                {
+                                                    type: "Text",
+                                                    props: {
+                                                        value: "Hello",
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        });
+    };
+    const showSettings = extractValue.asOptionalBoolean(node.props.showSettings, true);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(DropdownMenuNative_1.DropdownMenu, { triggerTemplate: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "palette" }) }), children: [(0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { iconPosition: "end", icon: activeThemeTone === "light" ? (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "checkmark" }) : "", label: "Light", onClick: () => setActiveThemeTone("light") }), (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { iconPosition: "end", icon: activeThemeTone === "dark" ? (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "checkmark" }) : "", label: "Dark", onClick: () => setActiveThemeTone("dark") }), showSettings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ContentSeparatorNative_1.ContentSeparator, {}), (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { label: "Theme Settings", onClick: () => setThemeSettingsOpen(true) })] }))] }), isThemeSettingsOpen && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { isInitiallyOpen: true, onClose: () => setThemeSettingsOpen(false), children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "strong", layout: { marginBottom: "1rem" }, children: "Set theme" }), (0, jsx_runtime_1.jsx)(StackNative_1.Stack, { orientation: "vertical", layout: { width: "100%", overflow: "scroll" }, children: (0, jsx_runtime_1.jsx)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", layout: { gap: ".5rem", flexWrap: "wrap" }, children: availableThemeIds.map((themeUid) => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 0, width: "calc(50% - 0.5rem)" }, variant: activeThemeId === themeUid ? "solid" : "ghost", themeColor: "primary", onClick: () => setActiveThemeId(themeUid), children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { layout: { width: "100%" }, children: [renderPreview(themeUid), (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: themeUid })] }) }, themeUid))) }) }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", layout: { minHeight: "fit-content" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "strong", layout: { marginBottom: "1rem" }, children: "Set tone" }), (0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { id: "toneSelector", value: activeThemeTone, onDidChange: (value) => setActiveThemeTone(value), children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { layout: { gap: "1rem" }, orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroupOption, { label: "Light", value: "light" }), (0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroupOption, { label: "Dark", value: "dark" })] }) })] })] }) }))] }));
+});

package/dist/scripts/src/components/ThemeChanger/ToneChangerButton.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toneChangerButtonComponentRenderer = exports.ToneChangerButtonMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const renderers_1 = require("@components-core/renderers");
+const IconNative_1 = require("@components/Icon/IconNative");
+const COMP = "ToneChangerButton";
+exports.ToneChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    docFolder: "ThemeChanger",
+    description: `The \`${COMP}\` component is a component that allows the user to change the tone of the app.`,
+    props: {},
+});
+function ToneChangerButton() {
+    const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "moon" : "sun" }), onClick: () => {
+            activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light");
+        } }));
+}
+/**
+ * Define the renderer for the Button component
+ */
+exports.toneChangerButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ToneChangerButtonMd, () => {
+    return (0, jsx_runtime_1.jsx)(ToneChangerButton, {});
+});