xmlui 0.7.14 → 0.7.15

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

@@ -0,0 +1,225 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoComplete = void 0;
+exports.useDebounce = useDebounce;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const react_3 = require("react");
+const constants_1 = require("@components-core/constants");
+const cmdk_1 = require("cmdk");
+const AutoComplete_module_scss_1 = __importDefault(require("@components/AutoComplete/AutoComplete.module.scss"));
+const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
+const SelectNative_1 = require("@components/Select/SelectNative");
+const OptionTypeProvider_1 = __importDefault(require("@components/Option/OptionTypeProvider"));
+const AutoCompleteContext_1 = require("@components/AutoComplete/AutoCompleteContext");
+const OptionContext_1 = require("@components/Select/OptionContext");
+const classnames_1 = __importDefault(require("classnames"));
+const misc_1 = require("@components-core/utils/misc");
+function defaultRenderer(item) {
+    return (0, jsx_runtime_1.jsx)("div", { children: item.label });
+}
+function isOptionsExist(options, newOptions) {
+    return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
+}
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = (0, react_3.useState)(value);
+    (0, react_3.useEffect)(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, optionRenderer = defaultRenderer, emptyListTemplate, style, children, autoFocus = false, dropdownHeight, multi = false, }, forwardedRef) {
+    const inputRef = (0, react_3.useRef)(null);
+    const [open, setOpen] = (0, react_3.useState)(false);
+    const dropdownRef = (0, react_3.useRef)(null); // Added this
+    const [options, setOptions] = (0, react_3.useState)(new Set());
+    const [inputValue, setInputValue] = (0, react_3.useState)("");
+    // Set initial state based on the initialValue prop
+    (0, react_3.useEffect)(() => {
+        if (initialValue !== undefined) {
+            updateState({ value: initialValue || [] }, { initial: true });
+        }
+    }, [initialValue, updateState]);
+    const toggleOption = (0, react_3.useCallback)((selectedValue) => {
+        if (multi) {
+            setInputValue("");
+        }
+        else {
+            setOpen(true);
+        }
+        if (selectedValue === "")
+            return;
+        const newSelectedValue = multi
+            ? Array.isArray(value)
+                ? value.includes(selectedValue)
+                    ? value.filter((v) => v !== selectedValue)
+                    : [...value, selectedValue]
+                : [selectedValue]
+            : selectedValue === value
+                ? null
+                : selectedValue;
+        updateState({ value: newSelectedValue });
+        onDidChange(newSelectedValue);
+    }, [multi, value, updateState, onDidChange]);
+    (0, react_3.useEffect)(() => {
+        var _a;
+        if (!multi) {
+            setInputValue(((_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.labelText) || "");
+        }
+    }, [multi, options, value]);
+    // Clear selected value
+    const clearValue = (0, react_3.useCallback)(() => {
+        const newValue = multi ? [] : "";
+        setInputValue("");
+        updateState({ value: newValue });
+        onDidChange(newValue);
+    }, [multi, updateState, onDidChange]);
+    const onOptionAdd = (0, react_3.useCallback)((option) => {
+        setOptions((prev) => new Set(prev).add(option));
+    }, []);
+    const onOptionRemove = (0, react_3.useCallback)((option) => {
+        setOptions((prev) => {
+            const optionsSet = new Set(prev);
+            optionsSet.delete(option);
+            return optionsSet;
+        });
+    }, []);
+    const handleClickOutside = (event) => {
+        if (dropdownRef.current &&
+            !dropdownRef.current.contains(event.target) &&
+            inputRef.current &&
+            !inputRef.current.contains(event.target)) {
+            setOpen(false);
+            inputRef.current.blur();
+        }
+    };
+    (0, react_3.useEffect)(() => {
+        if (open) {
+            document.addEventListener("mousedown", handleClickOutside);
+            document.addEventListener("touchend", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("touchend", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("touchend", handleClickOutside);
+        };
+    }, [open]);
+    // Render the "empty list" message
+    const emptyListNode = (0, react_3.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.autoCompleteEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
+    // Register component API for external interactions
+    const focus = (0, react_3.useCallback)(() => {
+        var _a;
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [inputRef]);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateState({ value: Array.isArray(newValue) ? newValue : [newValue] });
+    });
+    (0, react_3.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    const optionContextValue = (0, react_3.useMemo)(() => ({
+        onOptionAdd,
+        onOptionRemove,
+    }), [onOptionAdd, onOptionRemove]);
+    const autoCompleteContextValue = (0, react_3.useMemo)(() => {
+        return {
+            multi,
+            value,
+            onChange: toggleOption,
+            optionRenderer,
+            options,
+            inputValue,
+        };
+    }, [inputValue, multi, optionRenderer, options, toggleOption, value]);
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectNative_1.HiddenOption, children: (0, jsx_runtime_1.jsxs)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: [children, (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { ref: dropdownRef, className: AutoComplete_module_scss_1.default.command, filter: (value, search, keywords) => {
+                            const extendedValue = value + " " + keywords.join(" ");
+                            if (extendedValue.toLowerCase().includes(search.toLowerCase()))
+                                return 1;
+                            return 0;
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, onClick: () => {
+                                    var _a;
+                                    if (!enabled)
+                                        return;
+                                    (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }, style: style, className: (0, classnames_1.default)(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]: document.activeElement === inputRef.current,
+                                }), children: [multi ? ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: [Array.isArray(value) &&
+                                                value.map((v) => {
+                                                    var _a;
+                                                    return ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    toggleOption(v);
+                                                                } })] }, v));
+                                                }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { id: id, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
+                                                    setOpen(true);
+                                                    setInputValue(value);
+                                                }, onFocus: (event) => {
+                                                    setOpen(true);
+                                                    onFocus();
+                                                }, onBlur: (event) => {
+                                                    setOpen(false);
+                                                    onBlur();
+                                                }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })] })) : ((0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { id: id, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
+                                            setOpen(true);
+                                            setInputValue(value);
+                                        }, onFocus: (event) => {
+                                            setOpen(true);
+                                            onFocus();
+                                        }, onBlur: (event) => {
+                                            setOpen(false);
+                                            onBlur();
+                                        }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && ((0, jsx_runtime_1.jsx)("button", { onClick: (event) => {
+                                                    event.stopPropagation();
+                                                    clearValue();
+                                                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: "relative" }, children: open && ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: AutoComplete_module_scss_1.default.commandList, onMouseUp: () => {
+                                        var _a;
+                                        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                    }, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), (0, jsx_runtime_1.jsx)(CreatableItem, {}), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords, labelText }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, labelText: labelText }, value))) })] })) })] })] }) }) }));
+});
+function CreatableItem() {
+    const { value, options, inputValue, onChange } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const { onOptionAdd } = (0, OptionContext_1.useOption)();
+    if (isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
+        (Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.find((s) => s === inputValue))) ||
+        inputValue === value) {
+        return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
+    }
+    const Item = ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { value: inputValue, className: AutoComplete_module_scss_1.default.autoCompleteOption, onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, onSelect: (value) => {
+            const newOption = { value, label: value, enabled: true, labelText: value };
+            onOptionAdd(newOption);
+            onChange(value);
+        }, children: `Create "${inputValue}"` }));
+    // For normal creatable
+    if (inputValue.length > 0) {
+        return Item;
+    }
+    return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
+}
+function AutoCompleteOption({ value, label, enabled = true, keywords }) {
+    const id = (0, react_2.useId)();
+    const { value: selectedValue, onChange, optionRenderer, multi } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
+    return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, disabled: !enabled, value: `${value}`, className: AutoComplete_module_scss_1.default.autoCompleteOption, onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, onSelect: () => {
+            onChange(value);
+        }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: [optionRenderer({ label, value }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] }, id));
+}

package/dist/scripts/src/components/Avatar/Avatar.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.avatarComponentRenderer = exports.AvatarMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
+const AvatarNative_1 = require("./AvatarNative");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const abstractions_1 = require("@components/abstractions");
+const COMP = "Avatar";
+exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component represents a user, group (or other entity's) avatar with a small image or initials.`,
+    props: {
+        size: (0, ComponentDefs_1.d)(`This property defines the display size of the ${COMP}.`, abstractions_1.sizeMd, "string", "sm"),
+        name: (0, ComponentDefs_1.d)(`This property sets the name value the ${COMP} uses to display initials.`),
+        url: (0, ComponentDefs_1.d)(`This property specifies the URL of the image to display in the ${COMP}.`),
+    },
+    events: {
+        click: (0, ComponentDefs_1.d)("This event is triggered when the avatar is clicked."),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Avatar_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`radius-${COMP}`]: "4px",
+        [`thickness-border-${COMP}`]: "0px",
+        [`style-border-${COMP}`]: "solid",
+        [`border-${COMP}`]: `$thickness-border-${COMP} $style-border-${COMP} $color-border-${COMP}`,
+        [`shadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
+        [`color-text-${COMP}`]: "$color-text-secondary",
+        [`font-weight-${COMP}`]: "$font-weight-bold",
+        light: {
+            [`color-bg-${COMP}`]: "$color-surface-100",
+            [`color-border-${COMP}`]: "$color-surface-400A80",
+        },
+        dark: {
+            [`color-bg-${COMP}`]: "$color-surface-800",
+            [`color-border-${COMP}`]: "$color-surface-700",
+        },
+    },
+});
+exports.avatarComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AvatarMd, ({ node, extractValue, lookupEventHandler, layoutCss, extractResourceUrl }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { size: (_a = node.props) === null || _a === void 0 ? void 0 : _a.size, url: extractResourceUrl(node.props.url), name: extractValue(node.props.name), style: layoutCss, onClick: lookupEventHandler("click") }));
+});

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

@@ -0,0 +1,40 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
+exports.Avatar = (0, react_1.forwardRef)(function Avatar(_a, ref) {
+    var { size = "sm", url, name, style, onClick } = _a, rest = __rest(_a, ["size", "url", "name", "style", "onClick"]);
+    let abbrev = null;
+    if (!url && !!name) {
+        abbrev = name
+            .trim()
+            .split(" ")
+            .filter((word) => !!word.trim().length)
+            .map((word) => word[0].toUpperCase())
+            .slice(0, 3);
+    }
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(Avatar_module_scss_1.default.container, {
+            [Avatar_module_scss_1.default.xs]: size === "xs",
+            [Avatar_module_scss_1.default.sm]: size === "sm",
+            [Avatar_module_scss_1.default.md]: size === "md",
+            [Avatar_module_scss_1.default.lg]: size === "lg",
+            [Avatar_module_scss_1.default.clickable]: !!onClick,
+        }), style: Object.assign({ backgroundImage: url ? `url(${url})` : "none" }, style), onClick: onClick, children: abbrev })));
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backdropComponentRenderer = exports.BackdropMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const Backdrop_module_scss_1 = __importDefault(require("./Backdrop.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const BackdropNative_1 = require("./BackdropNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Backdrop";
+// See reference implementation here: https://getbootstrap.com/docs/5.3/components/alerts/
+exports.BackdropMd = (0, ComponentDefs_1.createMetadata)({
+    status: "stable",
+    description: `The \`${COMP}\` component is a semi-transparent overlay that appears on ` +
+        `top of its child component to obscure or highlight the content behind it.`,
+    props: {
+        overlayTemplate: (0, metadata_helpers_1.dComponent)("This property defines the component template for an optional overlay to display " +
+            "over the component."),
+        backgroundColor: (0, ComponentDefs_1.d)("The background color of the backdrop.", null, "string", "black"),
+        opacity: (0, ComponentDefs_1.d)("The opacity of the backdrop.", null, "number", 0.1),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Backdrop_module_scss_1.default.themeVars),
+});
+exports.backdropComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BackdropMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(BackdropNative_1.Backdrop, { style: layoutCss, overlayTemplate: renderChild((_a = node.props) === null || _a === void 0 ? void 0 : _a.overlayTemplate), backgroundColor: extractValue.asOptionalString(node.props.backgroundColor), opacity: extractValue.asString(node.props.opacity), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/Backdrop/BackdropNative.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backdrop = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Backdrop_module_scss_1 = __importDefault(require("./Backdrop.module.scss"));
+exports.Backdrop = (0, react_1.forwardRef)(function Backdrop({ style, children, overlayTemplate, backgroundColor = "black", opacity = "0.1" }, forwardedRef) {
+    var _a;
+    const styleWithoutDims = { width: undefined };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: Backdrop_module_scss_1.default.backdropContainer, style: Object.assign({ width: (_a = style.width) !== null && _a !== void 0 ? _a : "fit-content" }, style), ref: forwardedRef, children: [children, (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.backdrop, style: Object.assign(Object.assign({}, styleWithoutDims), { backgroundColor, opacity }) }), overlayTemplate && (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.overlay, children: overlayTemplate })] }));
+});

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

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeComponentRenderer = exports.BadgeMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Badge_module_scss_1 = __importDefault(require("./Badge.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const BadgeNative_1 = require("./BadgeNative");
+const COMP = "Badge";
+exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
+    status: "stable",
+    description: `The \`${COMP}\` is a text label that accepts a color map to define its background color and, optionally, its label color.`,
+    props: {
+        value: (0, ComponentDefs_1.d)("The text that the component displays"),
+        variant: (0, ComponentDefs_1.d)(`Modifies the shape of the component. Comes in the regular \`badge\` variant or the \`pill\` variant ` +
+            `with fully rounded corners.`),
+        colorMap: (0, ComponentDefs_1.d)(`The \`${COMP}\` component supports the mapping of a list of colors using the \`value\` prop as the ` +
+            `key. Provide the component with a list or key-value pairs in two ways:`),
+        themeColor: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
+        indicatorText: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) This property defines the text to display in the indicator. If it is not ` +
+            `defined or empty, no indicator is displayed unless the \`forceIndicator\` property is set.`),
+        forceIndicator: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) This property forces the display of the indicator, even if ` +
+            `the \`indicatorText\` property is not defined or empty.`),
+        indicatorThemeColor: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) The theme color of the indicator.`),
+        indicatorPosition: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) The position of the indicator.`),
+    },
+    events: {},
+    themeVars: (0, themeVars_1.parseScssVar)(Badge_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`padding-horizontal-${COMP}`]: "$space-2",
+        [`padding-vertical-${COMP}`]: "$space-0_5",
+        [`padding-${COMP}`]: `$padding-vertical-${COMP} $padding-horizontal-${COMP}`,
+        [`padding-${COMP}-pill`]: `$padding-vertical-${COMP}-pill $padding-horizontal-${COMP}-pill`,
+        [`radius-${COMP}`]: "4px",
+        [`font-size-${COMP}`]: "0.8em",
+        [`font-size-${COMP}-pill`]: "0.8em",
+        // [`font-weight-${COMP}`]: "$font-weight-bold",
+        // [`font-weight-${COMP}-pill`]: "$font-weight-normal",
+        light: {
+            [`color-bg-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
+            [`color-text-${COMP}`]: "white",
+        },
+        dark: {
+            [`color-bg-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
+            [`color-text-${COMP}`]: "$color-surface-50",
+        },
+    },
+});
+exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BadgeMd, ({ node, extractValue, renderChild }) => {
+    var _a;
+    const value = extractValue.asDisplayText(node.props.value);
+    const colorMap = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.colorMap);
+    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorMap === null || colorMap === void 0 ? void 0 : colorMap[value], children: value || renderChild(node.children) }));
+});

package/dist/scripts/src/components/Badge/BadgeNative.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = exports.badgeVariantNames = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Badge_module_scss_1 = __importDefault(require("./Badge.module.scss"));
+const react_1 = require("react");
+const badgeVariantValues = ["badge", "pill"];
+exports.badgeVariantNames = [...badgeVariantValues];
+exports.Badge = (0, react_1.forwardRef)(function Badge({ children, color, variant = "badge" }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)({
+            [Badge_module_scss_1.default.badge]: variant === "badge",
+            [Badge_module_scss_1.default.pill]: variant === "pill",
+        }), style: color
+            ? typeof color === "string"
+                ? { backgroundColor: color }
+                : { backgroundColor: color.background, color: color.label }
+            : undefined, children: children }));
+});

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.barChartComponentRenderer = exports.BarChartMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PieChart_module_scss_1 = __importDefault(require("@components/PieChart/PieChart.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const renderers_1 = require("@components-core/renderers");
+const BarChartNative_1 = require("./BarChartNative");
+const COMP = "BarChart";
+exports.BarChartMd = (0, ComponentDefs_1.createMetadata)({
+    status: "deprecated",
+    description: `The \`BarChart\` component represents a bar chart.`,
+    props: {
+        data: (0, ComponentDefs_1.d)(`This property is used to provide the component with data to display. The data itself needs ` +
+            `to be an array of objects.`),
+        keys: (0, ComponentDefs_1.d)(`This property specifies what the label texts are for each bar.`),
+        groupMode: (0, ComponentDefs_1.d)(`This property determines how the bars are layed out. The \`grouped\` variant lays out the ` +
+            `bars next to each other on the primary axis. The \`stacked\` variant stacks the bars on ` +
+            `top of each other.`),
+        layout: (0, ComponentDefs_1.d)(`This property determines the orientation of the bar chart. The \`vertical\` variant ` +
+            `specifies the horizontal axis as the primary and lays out the bars from left to right. ` +
+            `The \`horizontal\` variant specifies the vertical axis as the primary and has the bars ` +
+            `spread from top to bottom.`),
+        indexBy: (0, ComponentDefs_1.d)(`Determines which attribute groups the bars together.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PieChart_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "scheme-BarChart": "pastel1",
+        "color-text-BarChart": "$color-text-secondary",
+        "color-ticks-BarChart": "$color-text-primary",
+        "color-bg-tooltip-BarChart": "$color-bg-primary",
+        "color-text-tooltip-BarChart": "$color-text-primary",
+        "color-axis-BarChart": "$color-text-primary",
+        light: {
+            "scheme-BarChart": "set3",
+        },
+        dark: {
+            "scheme-BarChart": "dark2",
+        },
+    },
+});
+exports.barChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BarChartMd, ({ extractValue, node, layoutCss }) => {
+    var _a, _b, _c, _d, _e;
+    return ((0, jsx_runtime_1.jsx)(BarChartNative_1.BarChart, { style: layoutCss, data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), keys: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.keys), groupMode: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.groupMode), layout: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.layout), indexBy: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.indexBy) }));
+});