xmlui 0.10.10 → 0.10.12

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.10",
+    "version": "0.10.12",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -44,6 +44,7 @@
         "@radix-ui/react-tabs": "1.1.0",
         "@radix-ui/react-tooltip": "^1.2.4",
         "@radix-ui/react-visually-hidden": "1.0.3",
+        "@react-spring/web": "^10.0.2",
         "@remix-run/react": "2.12.1",
         "@tanstack/react-query": "^4.36.1",
         "@tanstack/react-query-devtools": "^4.36.1",
@@ -148,6 +149,7 @@
         "rollup-plugin-copy": "^3.5.0",
         "rollup-plugin-visualizer": "5.8.3",
         "serve": "14.2.0",
+        "terser": "^5.44.0",
         "typescript": "5.7.3",
         "vite": "5.4.19",
         "vite-plugin-dts": "4.5.0",

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

@@ -107,10 +107,10 @@ exports.APICallMd = (0, metadata_helpers_1.createMetadata)({
                 "`$params[0]`, `$params[1]`, etc.)",
         },
         $result: {
-            description: "Response data (available in `completedNotificationMessage` and `success` event)",
+            description: "Response data (available in `completedNotificationMessage`)",
         },
         $error: {
-            description: "Error details (available in `errorNotificationMessage` and `error` event)",
+            description: "Error details (available in `errorNotificationMessage`)",
         },
     },
     apis: {
@@ -125,6 +125,6 @@ exports.APICallMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-exports.apiCallRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.APICallMd, ({ node, registerComponentApi, uid, extractValue }) => {
-    return (0, jsx_runtime_1.jsx)(APICallNative_1.APICallNative, { registerComponentApi: registerComponentApi, node: node, uid: uid });
+exports.apiCallRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.APICallMd, ({ node, registerComponentApi, uid }) => {
+    return ((0, jsx_runtime_1.jsx)(APICallNative_1.APICallNative, { registerComponentApi: registerComponentApi, node: node, uid: uid }));
 });

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

@@ -77,7 +77,7 @@ exports.AccordionMd = (0, metadata_helpers_1.createMetadata)({
         [`paddingHorizontal-header-${COMP}`]: "$space-3",
         [`paddingVertical-header-${COMP}`]: "$space-3",
         [`verticalAlignment-header-${COMP}`]: "center",
-        [`fontSize-header-${COMP}`]: "$fontSize-normal",
+        [`fontSize-header-${COMP}`]: "$fontSize-base",
         [`fontWeight-header-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-header-${COMP}`]: "$fontFamily",
         [`border-${COMP}`]: "0px solid $borderColor",

package/dist/scripts/src/components/Animation/AnimationNative.js

@@ -0,0 +1,259 @@
+"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 __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.Animation = exports.parseAnimation = exports.defaultProps = void 0;
+exports.parseAnimationOptions = parseAnimationOptions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const web_1 = require("@react-spring/web");
+const react_1 = __importStar(require("react"));
+const react_2 = require("react");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const lodash_es_1 = require("lodash-es");
+const AnimatedComponent = (0, web_1.animated)((0, react_1.forwardRef)(function InlineComponentDef(props, ref) {
+    const { children } = props, rest = __rest(props, ["children"]);
+    if (!react_1.default.isValidElement(children)) {
+        return children;
+    }
+    return react_1.default.cloneElement(children, Object.assign(Object.assign({}, rest), { ref }));
+}));
+exports.defaultProps = {
+    delay: 0,
+    animateWhenInView: false,
+    reverse: false,
+    loop: false,
+    once: false
+};
+const parseAnimation = (animation) => {
+    if (typeof animation === 'object') {
+        return animation;
+    }
+    const presetAnimations = {
+        fadein: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        fadeout: {
+            from: { opacity: 1 },
+            to: { opacity: 0 }
+        },
+        slidein: {
+            from: { transform: 'translateX(-100%)' },
+            to: { transform: 'translateX(0%)' }
+        },
+        slideout: {
+            from: { transform: 'translateX(0%)' },
+            to: { transform: 'translateX(100%)' }
+        },
+        popin: {
+            from: { transform: 'scale(0.8)', opacity: 0 },
+            to: { transform: 'scale(1)', opacity: 1 }
+        },
+        popout: {
+            from: { transform: 'scale(1)', opacity: 1 },
+            to: { transform: 'scale(0.8)', opacity: 0 }
+        },
+        flipin: {
+            from: { transform: 'rotateY(90deg)', opacity: 0 },
+            to: { transform: 'rotateY(0deg)', opacity: 1 }
+        },
+        flipout: {
+            from: { transform: 'rotateY(0deg)', opacity: 1 },
+            to: { transform: 'rotateY(90deg)', opacity: 0 }
+        },
+        rotatein: {
+            from: { transform: 'rotate(-180deg)', opacity: 0 },
+            to: { transform: 'rotate(0deg)', opacity: 1 }
+        },
+        rotateout: {
+            from: { transform: 'rotate(0deg)', opacity: 1 },
+            to: { transform: 'rotate(180deg)', opacity: 0 }
+        },
+        zoomin: {
+            from: { transform: 'scale(0)', opacity: 0 },
+            to: { transform: 'scale(1)', opacity: 1 }
+        },
+        zoomout: {
+            from: { transform: 'scale(1)', opacity: 1 },
+            to: { transform: 'scale(0)', opacity: 0 }
+        }
+    };
+    return presetAnimations[animation] || { from: {}, to: {} };
+};
+exports.parseAnimation = parseAnimation;
+/**
+ * Helper function to parse a single animation-specific option value.
+ */
+function parseAnimationOptionValue(name, value) {
+    switch (name) {
+        case "duration":
+        case "delay":
+            const num = parseInt(value, 10);
+            return isNaN(num) ? undefined : num;
+        case "animateWhenInView":
+        case "reverse":
+        case "loop":
+        case "once":
+            const lowerVal = value.toLowerCase();
+            if (lowerVal === "true" || lowerVal === "1" || lowerVal === "yes")
+                return true;
+            if (lowerVal === "false" || lowerVal === "0" || lowerVal === "no")
+                return false;
+            return undefined;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Parses animation options from a string or object.
+ */
+function parseAnimationOptions(input) {
+    if ((0, lodash_es_1.isPlainObject)(input)) {
+        return input;
+    }
+    if (typeof input === "string") {
+        const options = {};
+        const values = input
+            .split(";")
+            .map((value) => value.trim())
+            .filter((value) => value.length > 0);
+        for (const value of values) {
+            if (value.includes(":")) {
+                const [name, val] = value.split(":").map((part) => part.trim());
+                if (name && val) {
+                    const parsedValue = parseAnimationOptionValue(name, val);
+                    if (parsedValue !== undefined) {
+                        options[name] = parsedValue;
+                    }
+                }
+            }
+            else {
+                const booleanOptions = ["animateWhenInView", "reverse", "loop", "once"];
+                if (booleanOptions.includes(value)) {
+                    options[value] = true;
+                }
+                else if (value.startsWith("!") && value.length > 1) {
+                    const optionName = value.substring(1);
+                    if (booleanOptions.includes(optionName)) {
+                        options[optionName] = false;
+                    }
+                }
+            }
+        }
+        return options;
+    }
+    return {};
+}
+exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef) {
+    var { children, registerComponentApi, animation, duration, onStop, onStart, delay = exports.defaultProps.delay, animateWhenInView = exports.defaultProps.animateWhenInView, reverse = exports.defaultProps.reverse, loop = exports.defaultProps.loop, once = exports.defaultProps.once } = _a, rest = __rest(_a, ["children", "registerComponentApi", "animation", "duration", "onStop", "onStart", "delay", "animateWhenInView", "reverse", "loop", "once"]);
+    const [_animation] = (0, react_1.useState)(animation);
+    const [toggle, setToggle] = (0, react_1.useState)(false);
+    const [reset, setReset] = (0, react_1.useState)(false);
+    const [count, setCount] = (0, react_1.useState)(0);
+    const times = 1;
+    const animationSettings = (0, react_1.useMemo)(() => ({
+        from: _animation.from,
+        to: _animation.to,
+        config: Object.assign(Object.assign({}, _animation.config), { duration }),
+        delay,
+        loop,
+        reset,
+        reverse: toggle,
+        onRest: () => {
+            onStop === null || onStop === void 0 ? void 0 : onStop();
+            if (loop) {
+                if (reverse) {
+                    setCount(count + 1);
+                    setToggle(!toggle);
+                }
+                setReset(true);
+            }
+            else {
+                if (reverse && count < times) {
+                    setCount(count + 1);
+                    setToggle(!toggle);
+                }
+            }
+        },
+        onStart: () => onStart === null || onStart === void 0 ? void 0 : onStart(),
+    }), [
+        _animation.config,
+        _animation.from,
+        _animation.to,
+        count,
+        delay,
+        duration,
+        loop,
+        onStart,
+        onStop,
+        reset,
+        reverse,
+        toggle,
+    ]);
+    const [springs, api] = (0, web_1.useSpring)(() => (Object.assign({}, animationSettings)), [animationSettings]);
+    const [ref, animationStyles] = (0, web_1.useInView)(() => animationSettings, {
+        once,
+    });
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, forwardedRef) : forwardedRef;
+    const startAnimation = (0, react_2.useCallback)(() => {
+        api.start(_animation);
+        return () => {
+            api.stop();
+        };
+    }, [_animation, api]);
+    const stopAnimation = (0, react_2.useCallback)(() => {
+        api.stop();
+    }, [api]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            start: startAnimation,
+            stop: stopAnimation,
+        });
+    }, [registerComponentApi, startAnimation, stopAnimation]);
+    const content = (0, react_1.useMemo)(() => {
+        return react_1.Children.map(children, (child, index) => animateWhenInView ? ((0, jsx_runtime_1.jsx)(AnimatedComponent, Object.assign({}, rest, { style: animationStyles, ref: composedRef, children: child }), index)) : ((0, jsx_runtime_1.jsx)(AnimatedComponent, Object.assign({}, rest, { style: springs, ref: forwardedRef, children: child }), index)));
+    }, [animateWhenInView, animationStyles, children, springs, rest]);
+    return content;
+});

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

@@ -76,6 +76,14 @@ exports.AppMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "string",
             defaultValue: AppNative_1.defaultProps.defaultTheme,
         },
+        autoDetectTone: {
+            description: 'This boolean property enables automatic detection of the system theme preference. ' +
+                'When set to true and no defaultTone is specified, the app will automatically use ' +
+                '"light" or "dark" tone based on the user\'s system theme setting. The app will ' +
+                'also respond to changes in the system theme preference.',
+            valueType: "boolean",
+            defaultValue: AppNative_1.defaultProps.autoDetectTone,
+        },
     },
     events: {
         ready: {
@@ -298,6 +306,7 @@ function AppNode({ node, extractValue, renderChild, className, lookupEventHandle
         logoLight: extractValue(node.props["logo-light"]),
         defaultTone: extractValue(node.props.defaultTone),
         defaultTheme: extractValue(node.props.defaultTheme),
+        autoDetectTone: extractValue.asOptionalBoolean(node.props.autoDetectTone, false),
         applyDefaultContentPadding
     }), [
         extractValue,
@@ -312,6 +321,7 @@ function AppNode({ node, extractValue, renderChild, className, lookupEventHandle
         node.props["logo-light"],
         node.props.defaultTone,
         node.props.defaultTheme,
+        node.props.autoDetectTone,
         className,
         applyDefaultContentPadding
     ]);

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

@@ -39,11 +39,12 @@ exports.defaultProps = {
     noScrollbarGutters: false,
     defaultTone: undefined,
     defaultTheme: undefined,
+    autoDetectTone: false,
     onReady: lodash_es_1.noop,
     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, 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", "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 } = _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"]);
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);
@@ -62,13 +63,19 @@ function App(_a) {
         if (defaultTone === "dark" || defaultTone === "light") {
             setActiveThemeTone(defaultTone);
         }
+        else if (autoDetectTone) {
+            // Auto-detect system theme preference when no defaultTone is set
+            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const detectedTone = systemPrefersDark ? "dark" : "light";
+            setActiveThemeTone(detectedTone);
+        }
         if (defaultTheme) {
             setActiveThemeId(defaultTheme);
         }
         return () => {
             mounted.current = false;
         };
-    }, [defaultTone, defaultTheme, setActiveThemeTone, setActiveThemeId, themes]);
+    }, [defaultTone, defaultTheme, autoDetectTone, setActiveThemeTone, setActiveThemeId, themes]);
     (0, react_1.useEffect)(() => {
         onReady();
     }, [onReady]);
@@ -81,6 +88,20 @@ function App(_a) {
             window.removeEventListener("message", handleMessage);
         };
     }, [onMessageReceived]);
+    // Listen for system theme changes when autoDetectTone is enabled
+    (0, react_1.useEffect)(() => {
+        if (!autoDetectTone || defaultTone)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleThemeChange = (e) => {
+            const detectedTone = e.matches ? "dark" : "light";
+            setActiveThemeTone(detectedTone);
+        };
+        mediaQuery.addEventListener('change', handleThemeChange);
+        return () => {
+            mediaQuery.removeEventListener('change', handleThemeChange);
+        };
+    }, [autoDetectTone, defaultTone, setActiveThemeTone]);
     // --- We don't hide the nav panel if there's no header; in that case, we don't have a show drawer
     // --- button. The exception is the condensed layout because we render a header in that case (otherwise,
     // --- we couldn't show the NavPanel)

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -53,7 +53,7 @@ const AppHeader = (_a) => {
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, role: "banner", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
                 [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
             }), children: [hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, className: AppHeader_module_scss_1.default.logoLink, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) })));

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

@@ -43,6 +43,10 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+        itemCreated: {
+            description: "This event is triggered when a new item is created by the user " +
+                "(if `creatable` is enabled).",
+        }
     },
     apis: {
         focus: {
@@ -80,7 +84,7 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
         [`minHeight-Input`]: "39px",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
-        [`fontSize-${COMP}-badge`]: "$fontSize-small",
+        [`fontSize-${COMP}-badge`]: "$fontSize-sm",
         [`borderRadius-${COMP}-badge`]: "$borderRadius",
         [`paddingHorizontal-${COMP}-badge`]: "$space-2",
         [`paddingVertical-${COMP}-badge`]: "$space-1",
@@ -93,7 +97,7 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.autoCompleteComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AutoCompleteMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, registerComponentApi, className, }) => {
-    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), className: className, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, creatable: extractValue.asOptionalBoolean(node.props.creatable), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), 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, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), initiallyOpen: extractValue.asOptionalBoolean(node.props.initiallyOpen), optionRenderer: node.props.optionTemplate
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), className: className, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, creatable: extractValue.asOptionalBoolean(node.props.creatable), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), 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"), onItemCreated: lookupEventHandler("itemCreated"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), initiallyOpen: extractValue.asOptionalBoolean(node.props.initiallyOpen), optionRenderer: node.props.optionTemplate
             ? (item, val, inTrigger) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, context: {
                         $selectedValue: val,

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -30,6 +30,8 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const react_popover_1 = require("@radix-ui/react-popover");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const HiddenOption_1 = require("../Select/HiddenOption");
+const parts_1 = require("../../components-core/parts");
+const PART_LIST_WRAPPER = "listWrapper";
 function isOptionsExist(options, newOptions) {
     return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
 }
@@ -45,10 +47,11 @@ exports.defaultProps = {
     onDidChange: constants_1.noop,
     onFocus: constants_1.noop,
     onBlur: constants_1.noop,
+    onItemCreated: constants_1.noop,
     initiallyOpen: false,
 };
 exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forwardedRef) {
-    var { id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, emptyListTemplate, style, className, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, initiallyOpen = exports.defaultProps.initiallyOpen } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "emptyListTemplate", "style", "className", "children", "readOnly", "autoFocus", "dropdownHeight", "multi", "label", "labelPosition", "labelWidth", "labelBreak", "required", "creatable", "optionRenderer", "initiallyOpen"]);
+    var { id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onItemCreated = exports.defaultProps.onItemCreated, registerComponentApi, emptyListTemplate, style, className, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, initiallyOpen = exports.defaultProps.initiallyOpen } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "onItemCreated", "registerComponentApi", "emptyListTemplate", "style", "className", "children", "readOnly", "autoFocus", "dropdownHeight", "multi", "label", "labelPosition", "labelWidth", "labelBreak", "required", "creatable", "optionRenderer", "initiallyOpen"]);
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const inputRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(initiallyOpen);
@@ -114,7 +117,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
         updateState({ value: newSelectedValue });
         onDidChange(newSelectedValue);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [multi, value, updateState, onDidChange, inputRef.current]);
+    }, [multi, value, updateState, onDidChange]);
     (0, react_1.useEffect)(() => {
         if (!Array.isArray(selectedValue)) {
             setInputValue((selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label) || "");
@@ -144,7 +147,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
     const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current]);
+    }, [inputRef]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         updateState({ value: newValue });
     });
@@ -183,7 +186,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                 if (extendedValue.toLowerCase().includes(search.toLowerCase()))
                                     return 1;
                                 return 0;
-                            }, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("div", { id: inputId, ref: setReferenceElement, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
+                            }, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("div", { "data-part-id": PART_LIST_WRAPPER, ref: setReferenceElement, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
                                                 [AutoComplete_module_scss_1.default.disabled]: !enabled,
                                                 [AutoComplete_module_scss_1.default.focused]: isFocused,
                                             }), children: [Array.isArray(selectedValue) && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
@@ -215,7 +218,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                                         if (event.key === "Enter") {
                                                             setOpen((prev) => !prev);
                                                         }
-                                                    }, id: id, readOnly: readOnly, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
+                                                    }, id: inputId, "data-part-id": parts_1.PART_INPUT, readOnly: readOnly, autoFocus: autoFocus, "aria-expanded": open, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
                                                         setOpen(true);
                                                         setInputValue(value);
                                                         setSearchTerm(value);
@@ -226,9 +229,9 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                                                 if (readOnly)
                                                                     return;
                                                                 setOpen(!open);
-                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }) })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), creatable && (0, jsx_runtime_1.jsx)(CreatableItem, {}), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly }, value))) })] }) }) }))] }) }), children] }) }) }));
+                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }) })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), creatable && (0, jsx_runtime_1.jsx)(CreatableItem, { onNewItem: onItemCreated }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly }, value))) })] }) }) }))] }) }), children] }) }) }));
 });
-function CreatableItem() {
+function CreatableItem({ onNewItem }) {
     const { value, options, inputValue, onChange, setOpen } = (0, AutoCompleteContext_1.useAutoComplete)();
     const { onOptionAdd } = (0, OptionContext_1.useOption)();
     if (isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
@@ -242,6 +245,7 @@ function CreatableItem() {
         }, onSelect: (value) => {
             const newOption = { value, label: value, enabled: true };
             onOptionAdd(newOption);
+            onNewItem === null || onNewItem === void 0 ? void 0 : onNewItem(value);
             onChange(value);
             setOpen(false);
         }, children: `Create "${inputValue}"` }));

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

@@ -51,5 +51,5 @@ exports.AvatarMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.avatarComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AvatarMd, ({ node, extractValue, lookupEventHandler, className, extractResourceUrl }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { className: className, size: (_a = node.props) === null || _a === void 0 ? void 0 : _a.size, url: extractResourceUrl(node.props.url), name: extractValue(node.props.name), onClick: lookupEventHandler("click") }));
+    return ((0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { className: className, size: (_a = node.props) === null || _a === void 0 ? void 0 : _a.size, url: node.props.url ? extractResourceUrl(node.props.url) : undefined, name: extractValue(node.props.name), onClick: lookupEventHandler("click") }));
 });

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

@@ -101,7 +101,7 @@ exports.ButtonMd = (0, metadata_helpers_1.createMetadata)({
         [`width-${COMP}`]: "fit-content",
         [`height-${COMP}`]: "fit-content",
         [`borderRadius-${COMP}`]: "$borderRadius",
-        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontSize-${COMP}`]: "$fontSize-sm",
         [`fontWeight-${COMP}`]: "$fontWeight-medium",
         [`backgroundColor-${COMP}-primary`]: "$color-primary-500",
         [`backgroundColor-${COMP}-attention`]: "$backgroundColor-attention",

package/dist/scripts/src/components/Charts/AreaChart/AreaChart.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areaChartComponentRenderer = exports.AreaChartMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AreaChartNative_1 = require("./AreaChartNative");
+const renderers_1 = require("../../../components-core/renderers");
+const metadata_helpers_1 = require("../../metadata-helpers");
+const container_helpers_1 = require("../../container-helpers");
+const COMP = "AreaChart";
+exports.AreaChartMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
+    description: "Interactive area chart for showing data trends over time with filled areas under the curve",
+    docFolder: "Charts/AreaChart",
+    props: {
+        data: {
+            description: "This property is used to provide the component with data to display. " +
+                "The data needs to be an array of objects.",
+        },
+        dataKeys: {
+            description: "This property specifies the keys in the data objects that should be used for rendering the chart elements. " +
+                "E.g. 'value' or 'amount'.",
+            valueType: "string",
+        },
+        nameKey: {
+            description: "Specifies the key in the data objects that will be used to label the different data series.",
+            valueType: "string",
+        },
+        hideX: {
+            description: "Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.hideX,
+        },
+        hideY: {
+            description: "Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.hideY,
+        },
+        hideTickX: {
+            description: "Determines whether the X-axis tick labels should be hidden. If set to `true`, the tick labels will not be rendered.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.hideTickX,
+        },
+        hideTickY: {
+            description: "Determines whether the Y-axis tick labels should be hidden. If set to `true`, the tick labels will not be rendered.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.hideTickY,
+        },
+        hideTooltip: {
+            description: "Determines whether the tooltip should be hidden. If set to `true`, the tooltip will not be rendered.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.hideTooltip,
+        },
+        showLegend: {
+            description: "Determines whether the legend should be shown. If set to `true`, the legend will be rendered.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.showLegend,
+        },
+        stacked: {
+            description: "Determines whether multiple areas should be stacked on top of each other. If set to `true`, areas will be stacked.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.stacked,
+        },
+        curved: {
+            description: "Determines whether the area lines should be curved (smooth) or straight. If set to `true`, lines will be curved.",
+            valueType: "boolean",
+            defaultValue: AreaChartNative_1.defaultProps.curved,
+        },
+        tooltipTemplate: {
+            description: "This property allows replacing the default template to display a tooltip.",
+        },
+    },
+    events: {
+    // Standard chart events - customize based on chart type
+    },
+    apis: {
+    // Chart-specific APIs if needed
+    },
+    contextVars: {
+    // Add context variables if needed
+    },
+});
+// Component renderer
+exports.areaChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AreaChartMd, ({ extractValue, node, className, lookupSyncCallback, renderChild }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    return ((0, jsx_runtime_1.jsx)(AreaChartNative_1.AreaChart, { className: className, tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), nameKey: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.nameKey), dataKeys: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.dataKeys), hideX: extractValue.asOptionalBoolean((_f = node.props) === null || _f === void 0 ? void 0 : _f.hideX), hideY: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.hideY), hideTickX: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideTickX), hideTickY: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideTickY), hideTooltip: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), stacked: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.stacked), curved: extractValue.asOptionalBoolean((_o = node.props) === null || _o === void 0 ? void 0 : _o.curved), tooltipRenderer: node.props.tooltipTemplate
+            ? (tooltipData) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
+                        $tooltip: tooltipData,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, children: renderChild(node.children) }));
+});