xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/Queue/QueueNative.js

@@ -0,0 +1,278 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Queue = Queue;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const lodash_es_1 = require("lodash-es");
+const misc_1 = require("@components-core/utils/misc");
+const AppContext_1 = require("@components-core/AppContext");
+const immer_1 = __importDefault(require("immer"));
+const queueActions_1 = require("@components/Queue/queueActions");
+const hooks_1 = require("@components-core/utils/hooks");
+const queueReducer = (0, immer_1.default)((state, action) => {
+    switch (action.type) {
+        case queueActions_1.QueueActionKind.ACTION_QUEUE_INITIALIZED: {
+            const queueState = {};
+            const itemsById = {};
+            action.payload.queue.forEach((item, index) => {
+                itemsById[action.payload.actionItemIds[index]] = item;
+            });
+            const queue = Object.keys(itemsById);
+            Object.entries(itemsById).forEach(([actionItemId, item]) => {
+                queueState[actionItemId] = {
+                    batchId: action.payload.batchId,
+                    actionItemId,
+                    status: "pending",
+                    item,
+                };
+            });
+            return {
+                queue: [...(state.queue || []), ...queue],
+                queueState: Object.assign(Object.assign({}, state.queueState), queueState),
+            };
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_STARTED: {
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "started";
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_PROGRESS: {
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "in-progress";
+                state.queueState[action.payload.actionItemId].progress = action.payload.progressEvent;
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_COMPLETED: {
+            state.queue = state.queue.filter((aiId) => aiId !== action.payload.actionItemId);
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "completed";
+                state.queueState[action.payload.actionItemId].result = action.payload.result;
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_REMOVED: {
+            state.queue = state.queue.filter((aiId) => aiId !== action.payload.actionItemId);
+            delete state.queueState[action.payload.actionItemId];
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_ERROR: {
+            state.queue = state.queue.filter((aiId) => aiId !== action.payload.actionItemId);
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "error";
+                state.queueState[action.payload.actionItemId].error = action.payload.error;
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.CLEAR_COMPLETED_ACTION_ITEMS: {
+            if (state.queueState) {
+                Object.entries(state.queueState).forEach(([key, value]) => {
+                    if (value.status === "completed" || value.status === "error") {
+                        delete state.queueState[key];
+                    }
+                });
+            }
+            break;
+        }
+        default:
+            throw new Error();
+    }
+    // console.log("queue action arrived", action);
+    // console.log("queue state", cloneDeep(state));
+});
+const INITIAL_STATE = {
+    queue: [],
+    queueState: {},
+};
+function Queue({ registerComponentApi, willProcessItem, processItem, didProcessItem, processItemError, onComplete, 
+//progressFeedback,
+renderProgressFeedback, renderResultFeedback, clearAfterFinish = true, }) {
+    const runningActionItemRef = (0, react_1.useRef)(new Set());
+    const [queueState, dispatch] = (0, react_1.useReducer)(queueReducer, INITIAL_STATE);
+    let appContext = (0, AppContext_1.useAppContext)();
+    // --- This Queue API adds a single item to the queue
+    const enqueueItem = (0, misc_1.useEvent)((item) => {
+        const itemId = (0, misc_1.generatedId)();
+        dispatch((0, queueActions_1.actionQueueInitialized)([item], (0, misc_1.generatedId)(), [itemId]));
+        return itemId;
+    });
+    // --- This Queue API adds a list of items to the queue
+    const enqueueItems = (0, misc_1.useEvent)((items) => {
+        const itemIds = items.map(() => (0, misc_1.generatedId)());
+        dispatch((0, queueActions_1.actionQueueInitialized)(items, (0, misc_1.generatedId)(), itemIds));
+        return itemIds;
+    });
+    const clearCompleted = (0, react_1.useCallback)(() => {
+        dispatch((0, queueActions_1.clearCompletedActionItems)());
+    }, []);
+    const remove = (0, react_1.useCallback)((actionItemId) => {
+        if (actionItemId) {
+            dispatch((0, queueActions_1.removeActionItem)(actionItemId));
+        }
+    }, []);
+    const getQueueLength = (0, react_1.useCallback)(() => {
+        return queueState.queue.length;
+    }, [queueState.queue.length]);
+    const getQueuedItems = (0, react_1.useCallback)(() => {
+        // console.log("GET QUEUED ITEMS", Object.values(queueState.queueState));
+        return Object.values(queueState.queueState);
+    }, [queueState.queueState]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi({
+            enqueueItem,
+            enqueueItems,
+            clearCompleted,
+            remove,
+            getQueueLength,
+            getQueuedItems,
+        });
+    }, [
+        registerComponentApi,
+        enqueueItem,
+        enqueueItems,
+        clearCompleted,
+        remove,
+        getQueueLength,
+        getQueuedItems,
+    ]);
+    const doSingle = (0, react_1.useCallback)((actionItemId) => __awaiter(this, void 0, void 0, function* () {
+        const queueItem = queueState.queueState[actionItemId];
+        if ((queueItem === null || queueItem === void 0 ? void 0 : queueItem.status) !== "pending") {
+            return;
+        }
+        if (runningActionItemRef.current.has(actionItemId)) {
+            return;
+        }
+        runningActionItemRef.current.add(actionItemId);
+        const item = queueItem.item;
+        let processItemContext = {};
+        try {
+            const willProcessResult = yield (willProcessItem === null || willProcessItem === void 0 ? void 0 : willProcessItem({
+                item,
+                actionItemId,
+                processItemContext,
+            }));
+            processItemContext = Object.assign(Object.assign({}, processItemContext), { willProcessResult: willProcessResult });
+            if (willProcessResult === false) {
+                dispatch((0, queueActions_1.removeActionItem)(actionItemId));
+                return;
+            }
+            dispatch((0, queueActions_1.actionItemStarted)(actionItemId));
+            const result = yield (processItem === null || processItem === void 0 ? void 0 : processItem({
+                item: item,
+                actionItemId,
+                processItemContext,
+                onProgress: (progressEvent) => {
+                    dispatch((0, queueActions_1.actionItemProgress)(actionItemId, progressEvent));
+                },
+            }));
+            processItemContext = Object.assign(Object.assign({}, processItemContext), { processResult: result });
+            yield (didProcessItem === null || didProcessItem === void 0 ? void 0 : didProcessItem({
+                item,
+                actionItemId,
+                processItemContext,
+            }));
+            dispatch((0, queueActions_1.actionItemCompleted)(actionItemId, result));
+        }
+        catch (error) {
+            let result = yield (processItemError === null || processItemError === void 0 ? void 0 : processItemError(error, {
+                item,
+                actionItemId,
+                processItemContext,
+            }));
+            dispatch((0, queueActions_1.actionItemError)(actionItemId, error));
+            if (result !== false) {
+                appContext.signError(error);
+            }
+        }
+        finally {
+            runningActionItemRef.current.delete(actionItemId);
+        }
+    }), [
+        appContext,
+        didProcessItem,
+        dispatch,
+        processItem,
+        processItemError,
+        queueState.queueState,
+        willProcessItem,
+    ]);
+    const toastId = (0, react_1.useRef)();
+    const queue = queueState.queue;
+    const prevQueue = (0, hooks_1.usePrevious)(queue);
+    const doComplete = (0, react_1.useCallback)(() => {
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        const queuedItems = getQueuedItems();
+        const completedItems = getQueuedItems().filter((item) => item.status === "completed");
+        const resultFeedback = renderResultFeedback === null || renderResultFeedback === void 0 ? void 0 : renderResultFeedback(completedItems, queuedItems);
+        if (resultFeedback && completedItems.length) {
+            let currentToast = toastId.current;
+            react_hot_toast_1.default.success((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: resultFeedback }), {
+                id: currentToast,
+            });
+        }
+        else {
+            if (toastId.current) {
+                let currentToast = toastId.current;
+                react_hot_toast_1.default.dismiss(currentToast);
+            }
+        }
+        // toastId.current = undefined;
+        if (clearAfterFinish) {
+            clearCompleted();
+        }
+    }, [clearAfterFinish, clearCompleted, getQueuedItems, onComplete, renderResultFeedback]);
+    //with useEffect, it's showing the previous state for some reason, review!
+    (0, react_1.useLayoutEffect)(() => {
+        if (!queue.length) {
+            return;
+        }
+        if (renderProgressFeedback) {
+            const queuedItems = getQueuedItems();
+            const completedItems = getQueuedItems().filter((item) => item.status === "completed");
+            const progressFeedback = renderProgressFeedback === null || renderProgressFeedback === void 0 ? void 0 : renderProgressFeedback(completedItems, queuedItems);
+            if (progressFeedback && toastId.current) {
+                react_hot_toast_1.default.loading((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progressFeedback }), {
+                    id: toastId.current,
+                });
+            }
+            else {
+                toastId.current = react_hot_toast_1.default.loading((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progressFeedback }));
+            }
+        }
+    }, [renderProgressFeedback, queue === null || queue === void 0 ? void 0 : queue.length]);
+    (0, react_1.useEffect)(() => {
+        if (!queue) {
+            return;
+        }
+        if (prevQueue === queue) {
+            return;
+        }
+        if ((0, lodash_es_1.isEqual)(prevQueue, queue)) {
+            return;
+        }
+        if ((prevQueue === null || prevQueue === void 0 ? void 0 : prevQueue.length) && !queue.length) {
+            doComplete();
+            return;
+        }
+        let queueItem = queue[0];
+        (() => __awaiter(this, void 0, void 0, function* () {
+            yield doSingle(queueItem);
+        }))();
+    }, [doComplete, doSingle, prevQueue, queue]);
+    return null;
+}

package/dist/scripts/src/components/Queue/queueActions.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueueActionKind = void 0;
+exports.actionItemStarted = actionItemStarted;
+exports.actionItemProgress = actionItemProgress;
+exports.actionItemCompleted = actionItemCompleted;
+exports.removeActionItem = removeActionItem;
+exports.clearCompletedActionItems = clearCompletedActionItems;
+exports.actionItemError = actionItemError;
+exports.actionQueueInitialized = actionQueueInitialized;
+var QueueActionKind;
+(function (QueueActionKind) {
+    QueueActionKind["ACTION_ITEM_STARTED"] = "ACTION_ITEM_STARTED";
+    QueueActionKind["ACTION_ITEM_PROGRESS"] = "ACTION_ITEM_PROGRESS";
+    QueueActionKind["ACTION_ITEM_COMPLETED"] = "ACTION_ITEM_COMPLETED";
+    QueueActionKind["CLEAR_COMPLETED_ACTION_ITEMS"] = "CLEAR_COMPLETED_ACTION_ITEMS";
+    QueueActionKind["ACTION_ITEM_ERROR"] = "ACTION_ITEM_ERROR";
+    QueueActionKind["ACTION_QUEUE_INITIALIZED"] = "ACTION_QUEUE_INITIALIZED";
+    QueueActionKind["ACTION_ITEM_REMOVED"] = "ACTION_ITEM_REMOVED";
+})(QueueActionKind || (exports.QueueActionKind = QueueActionKind = {}));
+// Signs that a particular component (`uid`) has started running an action with `actionItemId`.
+function actionItemStarted(actionItemId) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_STARTED,
+        payload: {
+            actionItemId,
+        },
+    };
+}
+// Signs that a particular component (`uid`) reports progress information (`progressEvent`)
+// on an action with `actionItemId`.
+function actionItemProgress(actionItemId, progressEvent) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_PROGRESS,
+        payload: {
+            actionItemId,
+            progressEvent,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has completed an action with `actionItemId` resulting in `result`.
+function actionItemCompleted(actionItemId, result) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_COMPLETED,
+        payload: {
+            actionItemId,
+            result,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has removed an action with `actionItemId` from the execution queue.
+function removeActionItem(actionItemId) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_REMOVED,
+        payload: {
+            actionItemId,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has cleared completed action items from its execution queue.
+function clearCompletedActionItems() {
+    return {
+        type: QueueActionKind.CLEAR_COMPLETED_ACTION_ITEMS,
+        payload: {},
+    };
+}
+// Signs that a particular component (`uid`) received an `error` when running an action with `actionItemId`.
+function actionItemError(actionItemId, error) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_ERROR,
+        payload: {
+            actionItemId,
+            error,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has initialized its execution `queue` with the specified `batchId`.
+function actionQueueInitialized(queue, batchId, actionItemIds) {
+    return {
+        type: QueueActionKind.ACTION_QUEUE_INITIALIZED,
+        payload: {
+            queue,
+            actionItemIds,
+            batchId,
+        },
+    };
+}

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioGroupRenderer = exports.RadioGroupMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const RadioGroupNative_1 = require("./RadioGroupNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "RadioGroup";
+const RGOption = `RadioGroupOption`;
+exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` input component is a group of radio buttons ` +
+        `([\`RadioGroupOption\`](./RadioGroupOption.mdx) components) that allow users to select ` +
+        `only one option from the group at a time.`,
+    props: {
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        orientation: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This property sets the orientation of the ` +
+            `options within the radio group.`),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(RadioGroup_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`gap-${RGOption}`]: "$space-1_5",
+        [`thickness-border-${RGOption}`]: "2px",
+        [`color-bg-checked-${RGOption}--disabled]`]: `$color-border-${RGOption}--disabled`,
+        [`color-bg-checked-${RGOption}-error`]: `$color-border-${RGOption}-error`,
+        [`color-bg-checked-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
+        [`color-bg-checked-${RGOption}-success`]: `$color-border-${RGOption}-success`,
+        [`font-size-${RGOption}`]: "$font-size-small",
+        [`font-weight-${RGOption}`]: "$font-weight-bold",
+        [`color-text-${RGOption}-error`]: `$color-border-${RGOption}-error`,
+        [`color-text-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
+        [`color-text-${RGOption}-success`]: `$color-border-${RGOption}-success`,
+        light: {
+            [`color-bg-checked-${RGOption}-default`]: "$color-primary-500",
+            [`color-border-${RGOption}-default`]: "$color-surface-500",
+            [`color-border-${RGOption}-default--hover`]: "$color-surface-700",
+            [`color-border-${RGOption}-default--active`]: "$color-primary-500",
+        },
+        dark: {
+            [`color-bg-checked-${RGOption}-default`]: "$color-primary-500",
+            [`color-border-${RGOption}-default`]: "$color-surface-500",
+            [`color-border-${RGOption}-default--hover`]: "$color-surface-300",
+            [`color-border-${RGOption}-default--active`]: "$color-primary-400",
+        },
+    },
+});
+exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { enabled: extractValue.asOptionalBoolean(node.props.enabled), layout: layoutCss, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/RadioGroup/RadioGroupNative.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupOption = exports.RadioGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.scss"));
+const constants_1 = require("@components-core/constants");
+const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const misc_1 = require("@components-core/utils/misc");
+const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+const OptionTypeProvider_1 = __importDefault(require("@components/Option/OptionTypeProvider"));
+const RadioGroupValidationStatusContext = (0, react_1.createContext)({
+    status: "none",
+});
+const RadioGroup = ({ id, value = "", initialValue = "", enabled = true, validationStatus = "none", label, labelPosition, labelWidth, labelBreak, required = false, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, }) => {
+    const [focused, setFocused] = react_1.default.useState(false);
+    // --- Initialize the related field with the input's initial value
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    // --- Handle the value change events for this input
+    const updateValue = (0, react_1.useCallback)((value) => {
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_1.useCallback)((value) => {
+        updateValue(value);
+    }, [updateValue]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        setFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        setFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const setValue = (0, misc_1.useEvent)((val) => {
+        updateValue(val);
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            //focus,
+            setValue,
+        });
+    }, [/* focus, */ registerComponentApi, setValue]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return { value, status: validationStatus };
+    }, [value, validationStatus]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupValidationStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
+                        [RadioGroup_module_scss_1.default.focused]: focused,
+                        [RadioGroup_module_scss_1.default.disabled]: !enabled,
+                    }), children: children }) }) }) }));
+};
+exports.RadioGroup = RadioGroup;
+const RadioGroupOption = ({ value, label, enabled = true }) => {
+    const id = (0, react_1.useId)();
+    const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    const statusStyles = {
+        [RadioGroup_module_scss_1.default.disabled]: !enabled,
+        [RadioGroup_module_scss_1.default.error]: value === validationContext.value && validationContext.status === "error",
+        [RadioGroup_module_scss_1.default.warning]: value === validationContext.value && validationContext.status === "warning",
+        [RadioGroup_module_scss_1.default.valid]: value === validationContext.value && validationContext.status === "valid",
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] }, id));
+};
+exports.RadioGroupOption = RadioGroupOption;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rangeComponentRenderer = exports.RangeMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const Range_module_scss_1 = __importDefault(require("./Range.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const RangeNative_1 = require("./RangeNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Range";
+// See "Range input" here: https://tabler.io/admin-template/preview
+// This component must be focusable and keyboard accessible.
+// Add this component to the form infrastructure.
+exports.RangeMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component allows you to select a numeric range (lower ` +
+        `and upper boundary values) between the complete range specified by minimum and maximum values.`,
+    props: {
+        initialValue: (0, ComponentDefs_1.d)(""),
+        minValue: (0, ComponentDefs_1.d)(`This property specifies the minimum value of the entire value domain to select the lower ` +
+            `and upper boundary range values.`, null, "number", 0),
+        maxValue: (0, ComponentDefs_1.d)(`This property specifies the maximum value of the entire value domain to select the lower ` +
+            `and upper boundary range values.`, null, "number", 10),
+        lowerInclusive: (0, ComponentDefs_1.d)(`This boolean property specifies whether the lower boundary value is inclusive (\`true\`) ` +
+            `or exclusive (\`false\`).`, null, "boolean", true),
+        upperInclusive: (0, ComponentDefs_1.d)(`This boolean property specifies whether the upper boundary value is inclusive (\`true\`) ` +
+            `or exclusive (\`false\`).`, null, "boolean", true),
+        complementary: (0, ComponentDefs_1.d)(`This boolean property specifies whether the range is complementary to the selected ` +
+            `set of values (\`true\`) or not (\`false\`). The value of this property is indicated visually.`, null, "boolean", false),
+    },
+    events: {
+        didChange: (0, ComponentDefs_1.d)(`This event is fired when a range boundary has been changed. The event parameters are ` +
+            `the new lower and upper boundary values (in this order).`),
+        getFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        dostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, ComponentDefs_1.d)(`You can query the component's value. The value is a two-item array with the ` +
+            `lower (first) and upper (second) boundary values.`),
+        setValue: (0, ComponentDefs_1.d)(`This method sets the component's lower and upper range values. The value must be a ` +
+            `two-item array with the lower (first) and upper (second) boundary values.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Range_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        light: {},
+        dark: {},
+    },
+});
+exports.rangeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RangeMd, ({ node, extractValue, lookupEventHandler, layoutCss }) => {
+    return (0, jsx_runtime_1.jsx)(RangeNative_1.Range, {});
+});

package/dist/scripts/src/components/Range/RangeNative.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Range = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Range = ({}) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: "orangered", color: "white", padding: 2 }, children: "Range component is not implemented yet" }));
+};
+exports.Range = Range;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.realTimeAdapterComponentRenderer = exports.RealTimeAdapterMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const RealTimeAdapterNative_1 = require("./RealTimeAdapterNative");
+const COMP = "RealTimeAdapter";
+exports.RealTimeAdapterMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `\`${COMP}\` is a non-visual component that listens to real-time events through long-polling.`,
+    props: {
+        url: (0, ComponentDefs_1.d)(`This property specifies the URL to use for long-polling.`),
+    },
+    events: {
+        eventArrived: (0, ComponentDefs_1.d)(`This event is raised when data arrives from the backend using long-polling.`),
+    },
+});
+exports.realTimeAdapterComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RealTimeAdapterMd, ({ node, lookupEventHandler, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(RealTimeAdapterNative_1.RealTimeAdapter, { url: extractValue(node.props.url), onEvent: lookupEventHandler("eventArrived") }));
+});