xmlui 0.9.46 → 0.9.47

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -15,21 +15,17 @@ const IconNative_1 = require("../Icon/IconNative");
 const NavLinkNative_1 = require("../NavLink/NavLinkNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
+const react_2 = require("@remix-run/react");
+const classnames_1 = __importDefault(require("classnames"));
+const NavGroupContext_1 = require("./NavGroupContext");
 exports.defaultProps = {
     iconHorizontalExpanded: "chevronright",
     iconHorizontalCollapsed: "chevronright",
     iconVerticalExpanded: "chevrondown",
     iconVerticalCollapsed: "chevronright",
 };
-const NavGroupContext = (0, react_1.createContext)({
-    level: -1,
-    iconHorizontalCollapsed: exports.defaultProps.iconHorizontalCollapsed,
-    iconHorizontalExpanded: exports.defaultProps.iconHorizontalExpanded,
-    iconVerticalCollapsed: exports.defaultProps.iconVerticalCollapsed,
-    iconVerticalExpanded: exports.defaultProps.iconVerticalExpanded,
-});
 exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, }, ref) {
-    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
     let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
@@ -53,29 +49,26 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
         iconVerticalExpanded,
         level,
     ]);
-    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled })) }));
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext_1.NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled })) }));
 });
 const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, disabled = false, }, ref) {
-    const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext);
+    const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
-    const toggleStyle = Object.assign(Object.assign({}, style), { paddingLeft: level >= 1 ? level * 2 + "em" : undefined });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), expanded &&
-                renderChild(node.children, {
-                    wrapChild: ({ node }, renderedChild) => {
-                        if (node.type === "NavLink") {
-                            const element = renderedChild;
-                            return (0, react_1.cloneElement)(element, Object.assign({}, (0, mergeProps_1.mergeProps)(renderedChild.props, {
-                                style: {
-                                    paddingLeft: (level + 1) * 2 + "em",
-                                },
-                            })));
-                        }
-                        return renderedChild;
-                    },
-                })] }));
+    const groupContentInnerRef = (0, react_1.useRef)(null);
+    const { pathname } = (0, react_2.useLocation)();
+    (0, react_1.useEffect)(() => {
+        const hasActiveNavLink = groupContentInnerRef.current.querySelector(".xmlui-navlink-active") !== null;
+        if (hasActiveNavLink) {
+            setExpanded(true);
+        }
+    }, [pathname]);
+    const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": level });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
+                    [NavGroup_module_scss_1.default.expanded]: expanded,
+                }), children: (0, jsx_runtime_1.jsx)("div", { className: NavGroup_module_scss_1.default.groupContentInner, ref: groupContentInnerRef, children: renderChild(node.children) }) })] }));
 });
 const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, disabled = false, }, ref) {
-    const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext);
+    const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const { root } = (0, ThemeContext_1.useTheme)();
     let Wrapper = react_dropdown_menu_1.DropdownMenu;
     let Trigger = react_dropdown_menu_1.DropdownMenuTrigger;

package/dist/scripts/src/components/NavLink/NavLinkNative.js

@@ -24,12 +24,14 @@ const component_utils_1 = require("../component-utils");
 const AppNative_1 = require("../App/AppNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
+const NavGroupContext_1 = require("../NavGroup/NavGroupContext");
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */
-    uid, children, disabled, to, sx = {}, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
+    uid, children, disabled, to, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     let safeVertical = vertical;
     if (appLayoutContext && safeVertical === undefined) {
         safeVertical =
@@ -40,22 +42,26 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
             return (0, component_utils_1.createUrlWithQueryParams)(to);
         }
     }, [to]);
-    const styleObj = Object.assign(Object.assign({}, sx), style);
+    const styleObj = (0, react_1.useMemo)(() => {
+        return Object.assign({ "--nav-link-level": level + 1 }, style);
+    }, [level, style]);
     const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
         [NavLink_module_scss_1.default.disabled]: disabled,
         [NavLink_module_scss_1.default.vertical]: safeVertical,
         [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
         [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
     });
+    let innerContent = (0, jsx_runtime_1.jsxs)("div", { className: NavLink_module_scss_1.default.innerContent, children: [icon, children] });
     let content;
     if (disabled || !smartTo) {
-        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: [icon, children] })));
+        content = ((0, jsx_runtime_1.jsx)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: innerContent })));
     }
     else {
-        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
+        content = ((0, jsx_runtime_1.jsx)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
                 [NavLink_module_scss_1.default.displayActive]: displayActive,
                 [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
-            }), children: [icon, children] })));
+                'xmlui-navlink-active': isActive || forceActive
+            }), children: innerContent })));
     }
     return content;
 });

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -126,7 +126,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         if (!contentRootRef.current && shadowRef.current) {
             contentRootRef.current = client_1.default.createRoot(shadowRef.current);
         }
-        let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(`<Fragment xmlns:XMLUIExtensions="component-ns">${app}</Fragment>`);
+        let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(app);
         if (errors.length > 0) {
             component = (0, xmlui_parser_1.errReportComponent)(errors, "Main.xmlui", erroneousCompoundComponentName);
         }

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

@@ -104,6 +104,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`marginTop-${COMP}-tableheading`]: "$space-1",
         [`marginBottom-${COMP}-tableheading`]: "$space-4",
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
+        [`fontSize-${COMP}-tableheading`]: "$fontSize-H6",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
         [`marginTop-${COMP}-markdown`]: "$space-3",
         [`marginBottom-${COMP}-markdown`]: "$space-6",

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeDisplayComponentRenderer = exports.TreeDisplayMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TreeDisplay_module_scss_1 = __importDefault(require("./TreeDisplay.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const TreeDisplayNative_1 = require("./TreeDisplayNative");
+const COMP = "TreeDisplay";
+exports.TreeDisplayMd = (0, ComponentDefs_1.createMetadata)({
+    status: "stable",
+    description: `The \`${COMP}\` component displays hierarchical data in a tree structure. ` +
+        `It accepts an indented text format where each line is an entry in the tree, and ` +
+        `the number of leading spaces determines the nesting level. The component renders ` +
+        `the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
+    props: {
+        content: {
+            description: "The indented text content to display as a tree structure. Each level of indentation (using spaces) represents one level in the tree hierarchy.",
+            valueType: "string",
+            defaultValue: TreeDisplayNative_1.defaultProps.content,
+        },
+        itemHeight: {
+            description: "The height of each tree item in pixels.",
+            valueType: "number",
+            defaultValue: 24,
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(TreeDisplay_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`backgroundColor-${COMP}`]: "$color-primary-50",
+        [`borderRadius-${COMP}`]: "8px",
+        [`padding-${COMP}`]: "$space-4",
+        [`paddingLeft-${COMP}`]: "$space-2",
+        [`fontSize-${COMP}`]: "$fontSize-default",
+        [`fontWeight-${COMP}`]: "$fontWeight-normal",
+        [`fontFamily-${COMP}`]: "$fontFamily-monospace",
+        [`color-${COMP}`]: "$textColor-primary",
+        [`color-connect-${COMP}`]: "$color-surface-200",
+    },
+});
+exports.treeDisplayComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TreeDisplayMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(TreeDisplayNative_1.TreeDisplay, { style: layoutCss, content: extractValue.asOptionalString(node.props.content), itemHeight: extractValue.asOptionalNumber(node.props.itemHeight), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/TreeDisplay/TreeDisplayNative.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeDisplay = exports.defaultProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TreeDisplay_module_scss_1 = __importDefault(require("./TreeDisplay.module.scss"));
+exports.defaultProps = {
+    content: "",
+};
+// Parse the indented text into a tree structure
+const parseTreeContent = (content) => {
+    if (!content)
+        return [];
+    const lines = content.split("\n").filter((line) => line.trim());
+    if (lines.length === 0)
+        return [];
+    const rootNodes = [];
+    const levelMap = {};
+    lines.forEach((line) => {
+        // Count leading spaces to determine level
+        const leadingSpaces = line.length - line.trimLeft().length;
+        const currentLevel = leadingSpaces;
+        const label = line.trim();
+        const node = { label, level: currentLevel, children: [] };
+        // If we're at level 0, this is a root node
+        if (currentLevel === 0) {
+            rootNodes.push(node);
+            levelMap[0] = rootNodes;
+            return;
+        }
+        // Find the nearest parent level
+        let parentLevel = currentLevel - 1;
+        while (parentLevel >= 0) {
+            if (levelMap[parentLevel] && levelMap[parentLevel].length > 0) {
+                // Get the last node at the parent level
+                const parent = levelMap[parentLevel][levelMap[parentLevel].length - 1];
+                parent.children.push(node);
+                // Initialize or update this level's map entry
+                if (!levelMap[currentLevel]) {
+                    levelMap[currentLevel] = [];
+                }
+                levelMap[currentLevel].push(node);
+                return;
+            }
+            parentLevel--;
+        }
+        // If we get here, something is wrong with the tree structure
+        // Add to root as fallback
+        rootNodes.push(node);
+    });
+    // Mark last children at each level for correct connector rendering
+    const markLastChildren = (nodes) => {
+        if (nodes.length > 0) {
+            nodes[nodes.length - 1].isLast = true;
+            nodes.forEach((node) => {
+                if (node.children.length > 0) {
+                    markLastChildren(node.children);
+                }
+            });
+        }
+    };
+    markLastChildren(rootNodes);
+    return rootNodes;
+};
+// Calculate the total height of a node and its descendants
+const calculateNodeHeight = (node, itemHeight) => {
+    if (node.children.length === 0) {
+        return itemHeight; // Single node height
+    }
+    return (itemHeight +
+        node.children.reduce((acc, child) => acc + calculateNodeHeight(child, itemHeight), 0));
+};
+// Render a node and its children with SVG line connectors
+const renderTreeNode = (node, index, itemHeight, level = 0, ancestorLines = []) => {
+    const isLast = node.isLast;
+    const isRoot = level === 0;
+    const hasChildren = node.children.length > 0;
+    const nodeHeight = hasChildren ? calculateNodeHeight(node, itemHeight) : itemHeight;
+    const halfHeight = itemHeight / 2;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: TreeDisplay_module_scss_1.default.treeNode, children: [(0, jsx_runtime_1.jsxs)("div", { className: TreeDisplay_module_scss_1.default.treeNodeRow, style: { height: `${itemHeight}px` }, children: [(0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.connectorArea, style: {
+                            marginLeft: `${level * itemHeight}px`,
+                            width: `${itemHeight}px`,
+                            height: `${itemHeight}px`,
+                        }, children: (0, jsx_runtime_1.jsxs)("svg", { className: TreeDisplay_module_scss_1.default.connector, width: itemHeight, height: hasChildren ? nodeHeight : itemHeight, viewBox: `0 0 ${itemHeight} ${hasChildren ? nodeHeight : itemHeight}`, style: { position: "absolute", top: 0, left: 0 }, children: [isRoot && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: halfHeight, x2: itemHeight, y2: halfHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine }) })), !isRoot && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: 0, x2: halfHeight, y2: isLast ? halfHeight : itemHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine }), (0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: halfHeight, x2: itemHeight, y2: halfHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine })] })), !isLast && hasChildren && ((0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: halfHeight, x2: halfHeight, y2: nodeHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine })), ancestorLines.map((shouldDraw, i) => shouldDraw && ((0, jsx_runtime_1.jsx)("line", { x1: halfHeight - (level - i) * itemHeight, y1: 0, x2: halfHeight - (level - i) * itemHeight, y2: nodeHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine }, `ancestor-${i}`)))] }) }), (0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.treeNodeContent, style: { lineHeight: `${itemHeight}px` }, children: node.label })] }), hasChildren && ((0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.childrenContainer, children: node.children.map((child, i) => {
+                    // Create new ancestor lines array for child nodes
+                    const newAncestorLines = [...ancestorLines];
+                    while (newAncestorLines.length <= level) {
+                        newAncestorLines.push(false);
+                    }
+                    // Set current level's line status: draw if this child is not the last child
+                    newAncestorLines[level] = i !== node.children.length - 1;
+                    return renderTreeNode(child, i, itemHeight, level + 1, newAncestorLines);
+                }) }))] }, `${node.label}-${index}`));
+};
+exports.TreeDisplay = (0, react_1.forwardRef)(function TreeDisplay({ style, children, content = "", itemHeight = 24 }, forwardedRef) {
+    const contentString = (content || (children === null || children === void 0 ? void 0 : children.toString()) || "").toString();
+    const treeNodes = (0, react_1.useMemo)(() => parseTreeContent(contentString), [contentString]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.treeDisplay, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.content, children: treeNodes.map((node, index) => renderTreeNode(node, index, itemHeight, 0, [])) }) }));
+});

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

@@ -198,6 +198,7 @@ const TextVariantKeys = [
     "code", // use <code>
     "codefence", // use uniquely styled <![CDATA[
     "deleted", // use <del>
+    "inherit",
     "inserted", // use <ins>
     "keyboard", // use <kbd>,
     "marked", // use <mark>
@@ -224,6 +225,7 @@ exports.TextVariantElement = {
     code: "code",
     codefence: "pre",
     deleted: "del",
+    inherit: "span",
     inserted: "ins",
     keyboard: "kbd",
     marked: "mark",
@@ -255,6 +257,10 @@ exports.variantOptionsMd = [
     },
     { value: "deleted", description: "Represents text that has been deleted" },
     { value: "em", description: "Marks text to stress emphasis" },
+    {
+        value: "inherit",
+        description: "Represents text that inherits the style from its parent element",
+    },
     {
         value: "inserted",
         description: "Represents a range of text that has been added to a document",

package/dist/scripts/src/components-core/theming/ThemeProvider.js

@@ -122,7 +122,7 @@ function useCompiledTheme(activeTheme, activeTone, themes = constants_1.EMPTY_AR
             })
                 .slice(0, themeDefChain.length - 1),
             Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, transformThemeVars_1.generateBaseSpacings)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseFontSizes)(mergedThemeVars)), (0, transformThemeVars_1.generatePaddingSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBorderSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseTones)(mergedThemeVars)), (0, transformThemeVars_1.generateButtonTones)(mergedThemeVars)),
-            Object.assign(Object.assign(Object.assign({}, themeDefChain[themeDefChain.length - 1].themeVars), (_a = themeDefChain[themeDefChain.length - 1].themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDefChain[themeDefChain.length - 1].tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars),
+            Object.assign(Object.assign(Object.assign(Object.assign({}, themeDefChain[themeDefChain.length - 1].themeVars), (0, transformThemeVars_1.generateTextFontSizes)(mergedThemeVars)), (_a = themeDefChain[themeDefChain.length - 1].themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDefChain[themeDefChain.length - 1].tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars),
         ];
         return resultedTheme;
     }, [activeTone, themeDefChain]);

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -8,12 +8,14 @@ exports.resolveThemeVar = resolveThemeVar;
 exports.generateBaseTones = generateBaseTones;
 exports.generateBaseSpacings = generateBaseSpacings;
 exports.generateBaseFontSizes = generateBaseFontSizes;
+exports.generateTextFontSizes = generateTextFontSizes;
 exports.generateButtonTones = generateButtonTones;
 exports.generatePaddingSegments = generatePaddingSegments;
 exports.generateBorderSegments = generateBorderSegments;
 const color_1 = __importDefault(require("color"));
 const hvar_1 = require("../theming/hvar");
 const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
+const layout_resolver_1 = require("./layout-resolver");
 function isThemeVarName(varName) {
     return typeof varName === "string" && (varName === null || varName === void 0 ? void 0 : varName.startsWith("$"));
 }
@@ -95,6 +97,31 @@ function generateBaseFontSizes(theme) {
     ret[`fontSize-tiny`] = `${0.625 * baseNum}${baseUnit}`;
     return ret;
 }
+function generateTextFontSizes(theme) {
+    if (!theme) {
+        return {};
+    }
+    const resolvedTheme = resolveThemeVars(theme);
+    const base = resolvedTheme["fontSize-Text"];
+    if (!base || typeof base !== "string") {
+        return {};
+    }
+    // --- Get the CSS variable name of fontSize-Text-keyboard
+    const ret = {};
+    ret[`fontSize-Text-keyboard`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-sample`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-sup`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-sub`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-title`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 1.5)`;
+    ret[`fontSize-Text-subtitle`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 1.25)`;
+    ret[`fontSize-Text-small`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-placeholder`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-paragraph`] = (0, layout_resolver_1.toCssVar)("$fontSize-Text");
+    ret[`fontSize-Text-subheading`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-tableheading`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-secondary`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    return ret;
+}
 function generateButtonTones(theme) {
     if (!theme) {
         return {};

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -960,7 +960,7 @@ declare const _default: {
         [variantSpecificProps: string]: any;
         uid?: string;
         children?: default_2.ReactNode;
-        variant?: "small" | "sub" | "sup" | "abbr" | "caption" | "cite" | "code" | "em" | "strong" | "title" | "var" | "mono" | "secondary" | "codefence" | "deleted" | "inserted" | "keyboard" | "marked" | "sample" | "subtitle" | "placeholder" | "paragraph" | "subheading" | "tableheading";
+        variant?: "small" | "sub" | "sup" | "abbr" | "caption" | "cite" | "code" | "em" | "strong" | "title" | "var" | "inherit" | "mono" | "secondary" | "codefence" | "deleted" | "inserted" | "keyboard" | "marked" | "sample" | "subtitle" | "placeholder" | "paragraph" | "subheading" | "tableheading";
         maxLines?: number;
         preserveLinebreaks?: boolean;
         ellipses?: boolean;
@@ -2063,7 +2063,7 @@ declare type TextProps = {
 
 declare type TextVariant = (typeof TextVariantKeys)[number];
 
-declare const TextVariantKeys: readonly ["abbr", "cite", "code", "codefence", "deleted", "inserted", "keyboard", "marked", "sample", "sub", "sup", "var", "strong", "em", "mono", "title", "subtitle", "small", "caption", "placeholder", "paragraph", "subheading", "tableheading", "secondary"];
+declare const TextVariantKeys: readonly ["abbr", "cite", "code", "codefence", "deleted", "inherit", "inserted", "keyboard", "marked", "sample", "sub", "sup", "var", "strong", "em", "mono", "title", "subtitle", "small", "caption", "placeholder", "paragraph", "subheading", "tableheading", "secondary"];
 
 /**
  * This type represents a theme definition object. Theme files can use this object's JSON-serialized