xmlui 0.10.20 → 0.10.21

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.20",
+    "version": "0.10.21",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -54,7 +54,7 @@
         "@types/color": "3.0.6",
         "@vitejs/plugin-react": "4.3.0",
         "adm-zip": "0.5.10",
-        "axios": "1.8.2",
+        "axios": "1.12.0",
         "chroma-js": "^3.1.2",
         "classnames": "2.5.1",
         "cmdk": "^1.0.4",
@@ -95,8 +95,6 @@
         "react-sticky-el": "^2.1.1",
         "react-textarea-autosize": "8.5.3",
         "react-time-picker": "^8.0.2",
-        "react-virtualized-auto-sizer": "1.0.24",
-        "react-window": "1.8.10",
         "recharts": "^2.15.1",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
@@ -106,7 +104,7 @@
         "turndown": "^7.2.0",
         "unist-util-visit": "^5.0.0",
         "use-context-selector": "1.4.1",
-        "virtua": "0.40.0",
+        "virtua": "^0.40.0",
         "vite-plugin-lib-inject-css": "1.3.0",
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
@@ -131,7 +129,6 @@
         "@types/react-datepicker": "4.19.5",
         "@types/react-dom": "18.2.8",
         "@types/react-measure": "^2.0.8",
-        "@types/react-window": "1.8.8",
         "@types/yargs": "17.0.31",
         "@typescript-eslint/eslint-plugin": "8.15.0",
         "@typescript-eslint/parser": "8.15.0",

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

@@ -121,7 +121,7 @@ exports.AppMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-function AppNode({ node, extractValue, renderChild, className, lookupEventHandler }) {
+function AppNode({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) {
     // --- Use ref to track if we've already processed the navigation to avoid duplicates in strict mode
     const processedNavRef = (0, react_1.useRef)(false);
     // --- Memoize the layout type to avoid unnecessary re-extraction
@@ -330,7 +330,7 @@ function AppNode({ node, extractValue, renderChild, className, lookupEventHandle
     const renderedFooter = (0, react_1.useMemo)(() => renderChild(Footer), [Footer, renderChild]);
     const renderedNavPanel = (0, react_1.useMemo)(() => renderChild(NavPanel), [NavPanel, renderChild]);
     const renderedContent = (0, react_1.useMemo)(() => renderChild(restChildren), [restChildren, renderChild]);
-    return ((0, jsx_runtime_1.jsxs)(AppNative_1.App, Object.assign({}, appProps, { header: renderedHeader, footer: renderedFooter, navPanel: renderedNavPanel, navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, children: [renderedContent, (0, jsx_runtime_1.jsx)(SearchIndexCollector, { Pages: Pages, renderChild: renderChild })] })));
+    return ((0, jsx_runtime_1.jsxs)(AppNative_1.App, Object.assign({}, appProps, { header: renderedHeader, footer: renderedFooter, navPanel: renderedNavPanel, navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, registerComponentApi: registerComponentApi, children: [renderedContent, (0, jsx_runtime_1.jsx)(SearchIndexCollector, { Pages: Pages, renderChild: renderChild })] })));
 }
 const HIDDEN_STYLE = {
     position: "absolute",
@@ -457,8 +457,8 @@ function PageIndexer({ Page, renderChild, onIndexed, }) {
     // console.log(`PageIndexer (${pageUrl}): Rendering content for ref population.`);
     return (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: renderChild(Page.children) });
 }
-exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
-    return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, className: className, lookupEventHandler: lookupEventHandler }));
+exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, className: className, lookupEventHandler: lookupEventHandler, registerComponentApi: registerComponentApi }));
 });
 // --- Process the entire navigation tree recursively and build hierarchy
 function processNavItems(items, parentHierarchy, extractValue) {

package/dist/scripts/src/components/App/AppNative.js

@@ -44,7 +44,7 @@ exports.defaultProps = {
     onMessageReceived: lodash_es_1.noop,
 };
 function App(_a) {
-    var { children, style = constants_1.EMPTY_OBJECT, layout, loggedInUser, scrollWholePage = exports.defaultProps.scrollWholePage, noScrollbarGutters = exports.defaultProps.noScrollbarGutters, onReady = exports.defaultProps.onReady, onMessageReceived = exports.defaultProps.onMessageReceived, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, autoDetectTone = exports.defaultProps.autoDetectTone, renderChild, name, className, applyDefaultContentPadding } = _a, rest = __rest(_a, ["children", "style", "layout", "loggedInUser", "scrollWholePage", "noScrollbarGutters", "onReady", "onMessageReceived", "header", "navPanel", "footer", "navPanelDef", "logoContentDef", "logo", "logoDark", "logoLight", "defaultTone", "defaultTheme", "autoDetectTone", "renderChild", "name", "className", "applyDefaultContentPadding"]);
+    var { children, style = constants_1.EMPTY_OBJECT, layout, loggedInUser, scrollWholePage = exports.defaultProps.scrollWholePage, noScrollbarGutters = exports.defaultProps.noScrollbarGutters, onReady = exports.defaultProps.onReady, onMessageReceived = exports.defaultProps.onMessageReceived, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, autoDetectTone = exports.defaultProps.autoDetectTone, renderChild, name, className, applyDefaultContentPadding, registerComponentApi } = _a, rest = __rest(_a, ["children", "style", "layout", "loggedInUser", "scrollWholePage", "noScrollbarGutters", "onReady", "onMessageReceived", "header", "navPanel", "footer", "navPanelDef", "logoContentDef", "logo", "logoDark", "logoLight", "defaultTone", "defaultTheme", "autoDetectTone", "renderChild", "name", "className", "applyDefaultContentPadding", "registerComponentApi"]);
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);

package/dist/scripts/src/components/DateInput/DateInputNative.js

@@ -419,7 +419,6 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
         }
     }, [day, month, year]);
     // Component API registration
-    (0, react_2.useImperativeHandle)(ref, () => dateInputRef.current);
     (0, react_2.useEffect)(() => {
         if (registerComponentApi) {
             registerComponentApi({

package/dist/scripts/src/components/Form/FormNative.js

@@ -205,7 +205,6 @@ function cleanUpSubject(subject) {
 const Form = (0, react_2.forwardRef)(function (_a, ref) {
     var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty"]);
     const formRef = (0, react_2.useRef)(null);
-    (0, react_2.useImperativeHandle)(ref, () => formRef.current);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
     const isEnabled = enabled && !formState.submitInProgress;

package/dist/scripts/src/components/IFrame/IFrameNative.js

@@ -22,8 +22,6 @@ const IFrame_module_scss_1 = __importDefault(require("./IFrame.module.scss"));
 exports.IFrame = (0, react_1.memo)((0, react_1.forwardRef)(function IFrame(_a, ref) {
     var { src, srcdoc, allow, name, referrerPolicy, sandbox, style, className, onLoad, registerComponentApi } = _a, rest = __rest(_a, ["src", "srcdoc", "allow", "name", "referrerPolicy", "sandbox", "style", "className", "onLoad", "registerComponentApi"]);
     const iframeRef = (0, react_1.useRef)(null);
-    // Expose the iframe element to parent via ref
-    (0, react_1.useImperativeHandle)(ref, () => iframeRef.current, []);
     // Register component APIs
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({

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

@@ -33,7 +33,11 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         variant: {
             description: "An optional string value that provides named presets for text variants with a " +
                 "unique combination of font style, weight, size, color, and other parameters. " +
-                "If not defined, the text uses the current style of its context.",
+                "If not defined, the text uses the current style of its context. " +
+                "In addition to predefined variants, you can specify custom variant names and style them " +
+                "using theme variables with the pattern `{cssProperty}-Text-{variantName}` " +
+                "(e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). " +
+                "See the documentation for a complete list of supported CSS properties.",
             availableValues: abstractions_1.variantOptionsMd,
         },
         maxLines: (0, metadata_helpers_1.d)("This property determines the maximum number of lines the component can wrap to. " +

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

@@ -1063,6 +1063,323 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
 });
 // =============================================================================
+// CUSTOM VARIANT TESTS
+// =============================================================================
+fixtures_1.test.describe("Custom Variants", () => {
+    (0, fixtures_1.test)("custom variant textColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 0, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme textColor-Text-customRed="${EXPECTED}">
+          <Text variant="customRed" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("color", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontFamily theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "monospace";
+        yield initTestBed(`
+      <App>
+        <Theme fontFamily-Text-customMono="${EXPECTED}">
+          <Text variant="customMono" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-family", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontSize theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "24px";
+        yield initTestBed(`
+      <App>
+        <Theme fontSize-Text-customLarge="${EXPECTED}">
+          <Text variant="customLarge" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-size", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "italic";
+        yield initTestBed(`
+      <App>
+        <Theme fontStyle-Text-customItalic="${EXPECTED}">
+          <Text variant="customItalic" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-style", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontWeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "700";
+        yield initTestBed(`
+      <App>
+        <Theme fontWeight-Text-customBold="bold">
+          <Text variant="customBold" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-weight", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontStretch theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "125%";
+        yield initTestBed(`
+      <App>
+        <Theme fontStretch-Text-customExpanded="expanded">
+          <Text variant="customExpanded" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-stretch", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationLine theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "underline";
+        yield initTestBed(`
+      <App>
+        <Theme textDecorationLine-Text-customUnderline="${EXPECTED}">
+          <Text variant="customUnderline" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-line", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 0, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customDeco="underline"
+          textDecorationColor-Text-customDeco="${EXPECTED}"
+        >
+          <Text variant="customDeco" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-color", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "wavy";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customWavy="underline"
+          textDecorationStyle-Text-customWavy="${EXPECTED}"
+        >
+          <Text variant="customWavy" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-style", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationThickness theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "3px";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customThick="underline"
+          textDecorationThickness-Text-customThick="${EXPECTED}"
+        >
+          <Text variant="customThick" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-thickness", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textUnderlineOffset theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "5px";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customOffset="underline"
+          textUnderlineOffset-Text-customOffset="${EXPECTED}"
+        >
+          <Text variant="customOffset" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-underline-offset", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant lineHeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "32px";
+        yield initTestBed(`
+      <App>
+        <Theme lineHeight-Text-customLineHeight="${EXPECTED}">
+          <Text variant="customLineHeight" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("line-height", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant backgroundColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 255, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Text-customBg="${EXPECTED}">
+          <Text variant="customBg" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("background-color", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textTransform theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "uppercase";
+        yield initTestBed(`
+      <App>
+        <Theme textTransform-Text-customUpper="${EXPECTED}">
+          <Text variant="customUpper" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-transform", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant letterSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "5px";
+        yield initTestBed(`
+      <App>
+        <Theme letterSpacing-Text-customSpaced="${EXPECTED}">
+          <Text variant="customSpaced" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("letter-spacing", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant wordSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "10px";
+        yield initTestBed(`
+      <App>
+        <Theme wordSpacing-Text-customWordSpace="${EXPECTED}">
+          <Text variant="customWordSpace" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-spacing", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textShadow theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 0, 0) 2px 2px 4px";
+        yield initTestBed(`
+      <App>
+        <Theme textShadow-Text-customShadow="${EXPECTED}">
+          <Text variant="customShadow" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-shadow", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textIndent theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "20px";
+        yield initTestBed(`
+      <App>
+        <Theme textIndent-Text-customIndent="${EXPECTED}">
+          <Text variant="customIndent" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-indent", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textAlign theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "center";
+        yield initTestBed(`
+      <App>
+        <Theme textAlign-Text-customCenter="${EXPECTED}">
+          <Text variant="customCenter" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-align", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textAlignLast theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "right";
+        yield initTestBed(`
+      <App>
+        <Theme textAlignLast-Text-customAlignLast="${EXPECTED}">
+          <Text variant="customAlignLast" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-align-last", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant wordBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "break-all";
+        yield initTestBed(`
+      <App>
+        <Theme wordBreak-Text-customBreak="${EXPECTED}">
+          <Text variant="customBreak" breakMode="'{undefined}'" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-break", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant wordWrap theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "break-word";
+        yield initTestBed(`
+      <App>
+        <Theme wordWrap-Text-customWrap="${EXPECTED}">
+          <Text variant="customWrap" breakMode="'{undefined}'" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-wrap", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant direction theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rtl";
+        yield initTestBed(`
+      <App>
+        <Theme direction-Text-customRtl="${EXPECTED}">
+          <Text variant="customRtl" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("direction", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant writingMode theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "vertical-rl";
+        yield initTestBed(`
+      <App>
+        <Theme writingMode-Text-customVertical="${EXPECTED}">
+          <Text variant="customVertical" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("writing-mode", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant lineBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "strict";
+        yield initTestBed(`
+      <App>
+        <Theme lineBreak-Text-customLineBreak="${EXPECTED}">
+          <Text variant="customLineBreak" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("line-break", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant with multiple theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textColor-Text-pinkElephant="rgb(255, 192, 203)" 
+          fontWeight-Text-pinkElephant="bold"
+          textColor-Text-greenDog="rgb(0, 128, 0)" 
+          fontStyle-Text-greenDog="italic"
+        >
+          <Text variant="pinkElephant" testId="pink">
+            Hello Pink Elephant!
+          </Text>
+          <Text variant="greenDog" testId="green">
+            Hello Green Dog!
+          </Text>
+        </Theme>
+      </App>
+    `);
+        const pinkText = page.getByTestId("pink");
+        const greenText = page.getByTestId("green");
+        yield (0, fixtures_1.expect)(pinkText).toHaveCSS("color", "rgb(255, 192, 203)");
+        yield (0, fixtures_1.expect)(pinkText).toHaveCSS("font-weight", "700");
+        yield (0, fixtures_1.expect)(greenText).toHaveCSS("color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(greenText).toHaveCSS("font-style", "italic");
+    }));
+});
+// =============================================================================
 // SMOKE TESTS (kept for compatibility)
 // =============================================================================
 fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {

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

@@ -15,6 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = exports.defaultProps = void 0;
+exports.getCustomVariantCache = getCustomVariantCache;
+exports.setCustomVariantCache = setCustomVariantCache;
+exports.hasCustomVariantCache = hasCustomVariantCache;
+exports.clearCustomVariantCache = clearCustomVariantCache;
+exports.getCustomVariantCacheStats = getCustomVariantCacheStats;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
@@ -22,6 +27,54 @@ const classnames_1 = __importDefault(require("classnames"));
 const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const abstractions_1 = require("../abstractions");
+const StyleContext_1 = require("../../components-core/theming/StyleContext");
+const constants_1 = require("../../components-core/constants");
+const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
+/**
+ * Global cache that stores custom variant CSS styles.
+ * Key: variant value (string)
+ *
+ * This cache ensures the same variant value always generates the same CSS.
+ */
+const customVariantCache = new Map();
+/**
+ * Retrieves a cached custom variant entry if it exists.
+ */
+function getCustomVariantCache(variant) {
+    return customVariantCache.get(variant);
+}
+/**
+ * Stores a custom variant entry in the cache.
+ */
+function setCustomVariantCache(variant, entry) {
+    customVariantCache.set(variant, Object.assign(Object.assign({}, entry), { createdAt: Date.now() }));
+}
+/**
+ * Checks if a custom variant is already cached.
+ */
+function hasCustomVariantCache(variant) {
+    return customVariantCache.has(variant);
+}
+/**
+ * Clears the entire custom variant cache.
+ * Useful for testing or full app resets.
+ */
+function clearCustomVariantCache() {
+    customVariantCache.clear();
+}
+/**
+ * Gets cache statistics for debugging.
+ */
+function getCustomVariantCacheStats() {
+    return {
+        totalEntries: customVariantCache.size,
+        entries: Array.from(customVariantCache.entries()).map(([key, entry]) => ({
+            key,
+            className: entry.className,
+            createdAt: new Date(entry.createdAt).toISOString(),
+        })),
+    };
+}
 exports.defaultProps = {
     maxLines: 0,
     preserveLinebreaks: false,
@@ -57,6 +110,62 @@ exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
             return "div";
         return abstractions_1.TextVariantElement[variant];
     }, [variant]);
+    // Custom variant CSS generation
+    // Following React hook rules: hooks must be called unconditionally
+    // We always call useComponentStyle, passing empty object for known variants
+    const isCustomVariant = (0, react_1.useMemo)(() => {
+        return variant && !abstractions_1.TextVariantElement[variant];
+    }, [variant]);
+    // Always call useComponentStyle (React hook rule: no conditional hooks)
+    // For now, pass empty object; later this will contain assembled CSS properties
+    const variantSpec = (0, react_1.useMemo)(() => {
+        if (!isCustomVariant)
+            return constants_1.EMPTY_OBJECT;
+        const subject = `-Text-${variant}`;
+        const cssInput = {
+            color: (0, layout_resolver_1.toCssVar)(`$textColor${subject}`),
+            "font-family": (0, layout_resolver_1.toCssVar)(`$fontFamily${subject}`),
+            "font-size": (0, layout_resolver_1.toCssVar)(`$fontSize${subject}`),
+            "font-style": (0, layout_resolver_1.toCssVar)(`$fontStyle${subject}`),
+            "font-weight": (0, layout_resolver_1.toCssVar)(`$fontWeight${subject}`),
+            "font-stretch": (0, layout_resolver_1.toCssVar)(`$fontStretch${subject}`),
+            "text-decoration-line": (0, layout_resolver_1.toCssVar)(`$textDecorationLine${subject}`),
+            "text-decoration-color": (0, layout_resolver_1.toCssVar)(`$textDecorationColor${subject}`),
+            "text-decoration-style": (0, layout_resolver_1.toCssVar)(`$textDecorationStyle${subject}`),
+            "text-decoration-thickness": (0, layout_resolver_1.toCssVar)(`$textDecorationThickness${subject}`),
+            "text-underline-offset": (0, layout_resolver_1.toCssVar)(`$textUnderlineOffset${subject}`),
+            "line-height": (0, layout_resolver_1.toCssVar)(`$lineHeight${subject}`),
+            "background-color": (0, layout_resolver_1.toCssVar)(`$backgroundColor${subject}`),
+            "text-transform": (0, layout_resolver_1.toCssVar)(`$textTransform${subject}`),
+            "letter-spacing": (0, layout_resolver_1.toCssVar)(`$letterSpacing${subject}`),
+            "word-spacing": (0, layout_resolver_1.toCssVar)(`$wordSpacing${subject}`),
+            "text-shadow": (0, layout_resolver_1.toCssVar)(`$textShadow${subject}`),
+            "text-indent": (0, layout_resolver_1.toCssVar)(`$textIndent${subject}`),
+            "text-align": (0, layout_resolver_1.toCssVar)(`$textAlign${subject}`),
+            "text-align-last": (0, layout_resolver_1.toCssVar)(`$textAlignLast${subject}`),
+            "word-break": (0, layout_resolver_1.toCssVar)(`$wordBreak${subject}`),
+            "word-wrap": (0, layout_resolver_1.toCssVar)(`$wordWrap${subject}`),
+            direction: (0, layout_resolver_1.toCssVar)(`$direction${subject}`),
+            "writing-mode": (0, layout_resolver_1.toCssVar)(`$writingMode${subject}`),
+            "line-break": (0, layout_resolver_1.toCssVar)(`$lineBreak${subject}`),
+        };
+        return cssInput;
+    }, [isCustomVariant, variant]);
+    const customVariantClassName = (0, StyleContext_1.useComponentStyle)(variantSpec);
+    // Store custom variant in cache if it's a new custom variant
+    (0, react_1.useEffect)(() => {
+        if (isCustomVariant && variant && customVariantClassName) {
+            // Check if this variant is already cached
+            if (!hasCustomVariantCache(variant)) {
+                // TODO: When CSS generation is implemented, extract the actual CSS text
+                // For now, store placeholder information
+                setCustomVariantCache(variant, {
+                    className: customVariantClassName,
+                    cssText: "", // Will be populated when CSS generation is implemented
+                });
+            }
+        }
+    }, [isCustomVariant, variant, customVariantClassName]);
     // Determine overflow mode classes based on overflowMode and existing props
     const overflowClasses = (0, react_1.useMemo)(() => {
         const classes = {};
@@ -127,7 +236,9 @@ exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
         }
         return classes;
     }, [breakMode]);
-    return ((0, jsx_runtime_1.jsx)(Element, Object.assign({}, restVariantSpecificProps, { ref: ref, className: (0, classnames_1.default)(syntaxHighlightClasses, Text_module_scss_1.default.text, Text_module_scss_1.default[variant || "default"], Object.assign(Object.assign({ [Text_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks }, overflowClasses), breakClasses), className), style: Object.assign(Object.assign({}, style), (overflowMode === "ellipsis" || (!overflowMode && maxLines)
+    return ((0, jsx_runtime_1.jsx)(Element, Object.assign({}, restVariantSpecificProps, { ref: ref, className: (0, classnames_1.default)(syntaxHighlightClasses, Text_module_scss_1.default.text, 
+        // Use custom variant className if it's a custom variant, otherwise use predefined variant style
+        isCustomVariant ? customVariantClassName : Text_module_scss_1.default[variant || "default"], Object.assign(Object.assign({ [Text_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks }, overflowClasses), breakClasses), className), style: Object.assign(Object.assign({}, style), (overflowMode === "ellipsis" || (!overflowMode && maxLines)
             ? (0, css_utils_1.getMaxLinesStyle)(maxLines)
             : {})), children: children })));
 });

package/dist/scripts/src/components/TimeInput/TimeInputNative.js

@@ -357,7 +357,6 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
         return `${h24}:${m24}:${s24}`;
     }, [hour, minute, second, amPm, is12HourFormat]);
     // Component API registration
-    (0, react_1.useImperativeHandle)(ref, () => timeInputRef.current);
     (0, react_1.useEffect)(() => {
         if (registerComponentApi) {
             registerComponentApi({

package/dist/scripts/src/components/Timer/TimerNative.js

@@ -86,7 +86,6 @@ exports.Timer = (0, react_1.forwardRef)(function Timer(_a, forwardedRef) {
         isRunning: () => isRunning && !isPaused,
     }), [pause, resume, isPaused, isRunning]);
     // Register both APIs together
-    (0, react_1.useImperativeHandle)(forwardedRef, () => timerApi, [timerApi]);
     (0, react_1.useEffect)(() => {
         if (registerComponentApi) {
             registerComponentApi(timerApi);