xmlui 0.7.21 → 0.7.23

package/dist/scripts/src/components/Select/SelectNative.js

@@ -39,28 +39,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboboxOption = exports.Select = void 0;
 exports.HiddenOption = HiddenOption;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importStar(require("react"));
-const constants_1 = require("@components-core/constants");
+const react_1 = __importStar(require("react"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const react_select_1 = require("@radix-ui/react-select");
-const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
-const SelectContext_1 = require("@components/Select/SelectContext");
-const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const OptionTypeProvider_1 = __importDefault(require("@components/Option/OptionTypeProvider"));
-const cmdk_1 = require("cmdk");
 const react_popover_1 = require("@radix-ui/react-popover");
-const misc_1 = require("@components-core/utils/misc");
-const OptionContext_1 = require("@components/Select/OptionContext");
-const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const cmdk_1 = require("cmdk");
+const classnames_1 = __importDefault(require("classnames"));
+const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
+const constants_1 = require("../../components-core/constants");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const misc_1 = require("../../components-core/utils/misc");
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+const SelectContext_1 = require("../Select/SelectContext");
+const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
+const OptionContext_1 = require("../Select/OptionContext");
+const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const { enabled, onBlur, autoFocus, onValueChange, validationStatus, children, value, height, style, placeholder, id, triggerRef, onFocus, options, } = props;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
     const stringValue = value + "";
-    const onValChange = (0, react_2.useCallback)((val) => {
+    const onValChange = (0, react_1.useCallback)((val) => {
         var _a;
         const valueWithMatchingType = (_a = Array.from(options.values()).find((o) => o.value + "" === val)) === null || _a === void 0 ? void 0 : _a.value;
         onValueChange(valueWithMatchingType);
@@ -73,20 +72,20 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
 });
 exports.Select = (0, react_1.forwardRef)(function Select({ 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, emptyListTemplate, optionLabelRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, }, ref) {
     var _a;
-    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
-    const [open, setOpen] = (0, react_2.useState)(false);
-    const [width, setWidth] = (0, react_2.useState)(0);
-    const observer = (0, react_2.useRef)();
+    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const observer = (0, react_1.useRef)();
     const { root } = (0, ThemeContext_1.useTheme)();
-    const [options, setOptions] = (0, react_2.useState)(new Set());
+    const [options, setOptions] = (0, react_1.useState)(new Set());
     // Set initial state based on the initialValue prop
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
             updateState({ value: initialValue }, { initial: true });
         }
     }, [initialValue, updateState]);
     // Observe the size of the reference element
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         var _a;
         const current = referenceElement;
         (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -100,7 +99,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
         };
     }, [referenceElement]);
     // Handle option selection
-    const toggleOption = (0, react_2.useCallback)((selectedValue) => {
+    const toggleOption = (0, react_1.useCallback)((selectedValue) => {
         const newSelectedValue = multiSelect
             ? Array.isArray(value)
                 ? value.includes(selectedValue)
@@ -115,41 +114,41 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
         setOpen(false);
     }, [multiSelect, value, updateState, onDidChange]);
     // Clear selected value
-    const clearValue = (0, react_2.useCallback)(() => {
+    const clearValue = (0, react_1.useCallback)(() => {
         const newValue = multiSelect ? [] : "";
         updateState({ value: newValue });
         onDidChange(newValue);
     }, [multiSelect, updateState, onDidChange]);
     // Register component API for external interactions
-    const focus = (0, react_2.useCallback)(() => {
+    const focus = (0, react_1.useCallback)(() => {
         referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
     }, [referenceElement]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         toggleOption(newValue);
     });
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
     // Render the "empty list" message
-    const emptyListNode = (0, react_2.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
-    const onOptionAdd = (0, react_2.useCallback)((option) => {
+    const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
+    const onOptionAdd = (0, react_1.useCallback)((option) => {
         setOptions((prev) => new Set(prev).add(option));
     }, []);
-    const onOptionRemove = (0, react_2.useCallback)((option) => {
+    const onOptionRemove = (0, react_1.useCallback)((option) => {
         setOptions((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
             return optionsSet;
         });
     }, []);
-    const optionContextValue = (0, react_2.useMemo)(() => ({
+    const optionContextValue = (0, react_1.useMemo)(() => ({
         onOptionAdd,
         onOptionRemove,
     }), [onOptionAdd, onOptionRemove]);
-    const selectContextValue = (0, react_2.useMemo)(() => ({
+    const selectContextValue = (0, react_1.useMemo)(() => ({
         multiSelect,
         value,
         optionLabelRenderer,
@@ -179,7 +178,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) })] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
-    const id = (0, react_2.useId)();
+    const id = (0, react_1.useId)();
     const { label, value, enabled = true, keywords } = option;
     const { value: selectedValue, onChange, multi, optionLabelRenderer } = (0, SelectContext_1.useSelect)();
     const selected = Array.isArray(selectedValue) && multi ? selectedValue.includes(value) : selectedValue === value;
@@ -189,22 +188,22 @@ exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwa
 });
 function HiddenOption(option) {
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
-    const [node, setNode] = (0, react_2.useState)(null);
-    const opt = (0, react_2.useMemo)(() => {
+    const [node, setNode] = (0, react_1.useState)(null);
+    const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
         return Object.assign(Object.assign({}, option), { labelText: (_a = node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
     }, [option, node]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         onOptionAdd(opt);
         return () => onOptionRemove(opt);
     }, [opt, onOptionAdd, onOptionRemove]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.label }));
 }
-const SelectOption = react_2.default.forwardRef((option, ref) => {
+const SelectOption = react_1.default.forwardRef((option, ref) => {
     const { value, label, enabled = true } = option;
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
     const { optionLabelRenderer } = (0, SelectContext_1.useSelect)();
-    (0, react_2.useLayoutEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         onOptionAdd(option);
         return () => onOptionRemove(option);
     }, [option, onOptionAdd, onOptionRemove]);

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectionStoreComponentRenderer = exports.SelectionStoreMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
 const SelectionStoreNative_1 = require("./SelectionStoreNative");
 const COMP = "SelectionStore";
 exports.SelectionStoreMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/SelectionStore/SelectionStoreNative.js

@@ -38,8 +38,8 @@ exports.useSelectionContext = useSelectionContext;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const lodash_es_1 = require("lodash-es");
-const misc_1 = require("@components-core/utils/misc");
-const constants_1 = require("@components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+const constants_1 = require("../../components-core/constants");
 const EMPTY_SELECTION_STATE = {
     value: constants_1.EMPTY_ARRAY
 };

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

@@ -5,38 +5,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sliderComponentRenderer = exports.SliderMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
 const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
 const SliderNative_1 = require("./SliderNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "Slider";
-// This component must be focusable and keyboard accessible.
-// Add this component to the form infrastructure.
 exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
-    status: "in progress",
-    description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component allows you to select a numeric value ` +
+    status: "experimental",
+    description: `The \`${COMP}\` component allows you to select a numeric value ` +
         `between a range specified by minimum and maximum values.`,
     props: {
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        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),
         minValue: (0, ComponentDefs_1.d)(`This property specifies the minimum value of the allowed input range.`, null, "number", 0),
         maxValue: (0, ComponentDefs_1.d)(`This property specifies the maximum value of the allowed input range.`, null, "number", 10),
-        rangeHighlight: (0, ComponentDefs_1.d)(`This property indicates if you want to highlight a specific part of the input range.`, [
-            { value: "none", description: "No highlight (default)" },
-            {
-                value: "lower",
-                description: "Highlight the lower part of the range (from the minimum to the current slider value)",
-            },
-            {
-                value: "upper",
-                description: "Highlight the upper part of the range (from the current slider value to the maximum)",
-            },
-        ], "string", "none"),
+        step: (0, ComponentDefs_1.d)(`This property defines the increment value for the slider, determining the allowed intervals between selectable values.`),
+        minStepsBetweenThumbs: (0, ComponentDefs_1.d)(`This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.`),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        rangeStyle: (0, ComponentDefs_1.d)(`This property allows you to apply custom styles to the range element of the slider.`),
+        thumbStyle: (0, ComponentDefs_1.d)(`This property allows yout top apply custom styles to the thumb elements of the slider.`)
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-        getFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
-        dostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
     },
     apis: {
         focus: (0, metadata_helpers_1.dFocus)(COMP),
@@ -45,10 +46,24 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Slider_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        light: {},
-        dark: {},
+        [`color-bg-track-${COMP}`]: "$color-surface-200",
+        [`color-bg-range-${COMP}`]: "$color-primary",
+        [`thickness-border-thumb-${COMP}`]: "2px",
+        [`style-border-thumb-${COMP}`]: "solid",
+        [`color-border-thumb-${COMP}`]: "$color-surface-50",
+        [`color-bg-thumb-${COMP}`]: "$color-primary",
+        [`shadow-thumb-${COMP}`]: "$shadow-md",
+        light: {
+            [`color-bg-track-${COMP}--disabled`]: "$color-surface-300",
+            [`color-bg-range-${COMP}--disabled`]: "$color-surface-400",
+        },
+        dark: {
+            [`color-bg-track-${COMP}--disabled`]: "$color-surface-600",
+            [`color-bg-range-${COMP}--disabled`]: "$color-surface-800",
+        },
     },
 });
-exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, layoutCss }) => {
-    return (0, jsx_runtime_1.jsx)(SliderNative_1.Slider, { style: layoutCss });
+exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, layoutCss, updateState, state, registerComponentApi, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ((0, jsx_runtime_1.jsx)(SliderNative_1.Slider, { validationStatus: extractValue(node.props.validationStatus), minStepsBetweenThumbs: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.minStepsBetweenThumbs), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, style: layoutCss, step: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.step), min: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.minValue), max: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.maxValue), enabled: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), rangeStyle: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.rangeStyle), thumbStyle: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.thumbStyle) }));
 });

package/dist/scripts/src/components/Slider/SliderNative.js

@@ -1,8 +1,103 @@
 "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.Slider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.Slider = (0, react_1.forwardRef)(function Slider({ style }, forwardedRef) {
-    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, style: Object.assign({ backgroundColor: "orangered", color: "white", padding: 2 }, style), children: "Slider component is not implemented yet" }));
+const react_1 = __importStar(require("react"));
+const react_2 = require("react");
+const react_slider_1 = require("@radix-ui/react-slider");
+const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
+const classnames_1 = __importDefault(require("classnames"));
+exports.Slider = (0, react_2.forwardRef)(({ style, step = 1, min, max, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = true, value, autoFocus, readOnly, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = "none", initialValue, minStepsBetweenThumbs, rangeStyle, thumbStyle, }, forwardedRef) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [localValue, setLocalValue] = react_1.default.useState([]);
+    (0, react_1.useEffect)(() => {
+        if (typeof value === "object") {
+            setLocalValue(value);
+        }
+        else if (typeof value === "number") {
+            setLocalValue([value]);
+        }
+    }, [value]);
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    const updateValue = (0, react_1.useCallback)((value) => {
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_1.useCallback)((value) => {
+        if (value.length > 1) {
+            updateValue(value);
+        }
+        else if (value.length === 1) {
+            updateValue(value[0]);
+        }
+    }, [updateValue]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const focus = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateValue(newValue);
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    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, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRoot), style: style, max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, "aria-required": required, value: localValue, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
+                        [Slider_module_scss_1.default.disabled]: !enabled,
+                        [Slider_module_scss_1.default.readOnly]: readOnly,
+                        [Slider_module_scss_1.default.error]: validationStatus === "error",
+                        [Slider_module_scss_1.default.warning]: validationStatus === "warning",
+                        [Slider_module_scss_1.default.valid]: validationStatus === "valid",
+                    }), children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { className: Slider_module_scss_1.default.sliderRange, style: rangeStyle }) }), localValue === null || localValue === void 0 ? void 0 : localValue.map((_, index) => ((0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { className: Slider_module_scss_1.default.sliderThumb, style: thumbStyle }, index)))] }) }));
 });
+exports.Slider.displayName = react_slider_1.Root.displayName;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SlotItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const constants_1 = require("@components-core/constants");
-const hooks_1 = require("@components-core/utils/hooks");
+const hooks_1 = require("../components-core/utils/hooks");
+const constants_1 = require("../components-core/constants");
 /**
  * This React component wraps the slot content defined in a parent component into a container.
  * This container may contain context values pushed from a compound component back to

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

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.spaceFillerComponentRenderer = exports.SpaceFillerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
 const SpaceFiller_module_scss_1 = __importDefault(require("./SpaceFiller.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const SpaceFillerNative_1 = require("./SpaceFillerNative");
 const COMP = "SpaceFiller";
 exports.SpaceFillerMd = (0, ComponentDefs_1.createMetadata)({

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.spinnerComponentRenderer = exports.SpinnerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
-const renderers_1 = require("@components-core/renderers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const SpinnerNative_1 = require("./SpinnerNative");
 const COMP = "Spinner";
 exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/Spinner/SpinnerNative.js

@@ -5,13 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
 const react_1 = require("react");
-const react_2 = require("react");
+const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
 // source https://loading.io/css/
 exports.Spinner = (0, react_1.forwardRef)(function Spinner({ delay = 400, fullScreen = false, style }, forwardedRef) {
-    const [pastDelay, setPastDelay] = (0, react_2.useState)(delay === 0);
-    (0, react_2.useEffect)(() => {
+    const [pastDelay, setPastDelay] = (0, react_1.useState)(delay === 0);
+    (0, react_1.useEffect)(() => {
         const timeout = setTimeout(() => {
             setPastDelay(true);
         }, delay);

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

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hSplitterComponentRenderer = exports.vSplitterComponentRenderer = exports.splitterComponentRenderer = exports.VSplitterMd = exports.HSplitterMd = exports.SplitterMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("@components-core/renderers");
-const misc_1 = require("@components-core/utils/misc");
-const EngineError_1 = require("@components-core/EngineError");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
 const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const misc_1 = require("../../components-core/utils/misc");
+const EngineError_1 = require("../../components-core/EngineError");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
 const SplitterNative_1 = require("./SplitterNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "Splitter";
 const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component divides a container (such as a window, panel, pane, etc.) ` +

package/dist/scripts/src/components/Splitter/SplitterNative.js

@@ -39,10 +39,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Splitter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const constants_1 = require("@components-core/constants");
-const utils_1 = require("@components/Splitter/utils");
+const constants_1 = require("../../components-core/constants");
+const utils_1 = require("../Splitter/utils");
 const Splitter = ({ initialPrimarySize = "50%", minPrimarySize = "0%", maxPrimarySize = "100%", orientation = "vertical", children, style, swapped = false, floating = false, splitterTemplate, resize = constants_1.noop, }) => {
     var _a;
     const [size, setSize] = (0, react_1.useState)(0);

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.chStackComponentRenderer = exports.cvStackComponentRenderer = exports.hStackComponentRenderer = exports.vStackComponentRenderer = exports.stackComponentRenderer = exports.CHStackMd = exports.CVStackMd = exports.HStackMd = exports.VStackMd = exports.StackMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Stack_module_scss_1 = __importDefault(require("./Stack.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const misc_1 = require("@components-core/utils/misc");
-const EngineError_1 = require("@components-core/EngineError");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const metadata_helpers_1 = require("@components/metadata-helpers");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const misc_1 = require("../../components-core/utils/misc");
+const EngineError_1 = require("../../components-core/EngineError");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
 const StackNative_1 = require("./StackNative");
 const COMP = "Stack";
 const HORIZONTAL_ALIGNMENT = (0, ComponentDefs_1.d)(`Manages the horizontal content alignment for each child element in the Stack.`);

package/dist/scripts/src/components/Stack/StackNative.js

@@ -17,10 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = exports.DEFAULT_ORIENTATION = 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 classnames_1 = __importDefault(require("classnames"));
 const Stack_module_scss_1 = __importDefault(require("./Stack.module.scss"));
-const component_hooks_1 = require("@components-core/component-hooks");
-const hooks_1 = require("@components-core/utils/hooks");
+const component_hooks_1 = require("../../components-core/component-hooks");
+const hooks_1 = require("../../components-core/utils/hooks");
 exports.DEFAULT_ORIENTATION = "vertical";
 // =====================================================================================================================
 // Stack React component

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.stickyBoxComponentRenderer = exports.StickyBoxMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const StickyBoxNative_1 = require("./StickyBoxNative");
 const COMP = "StickyBox";
 exports.StickyBoxMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/StickyBox/StickyBoxNative.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StickyBox = StickyBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 function StickyBox({ children, uid, layout, to = "top" }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper, {
             [StickyBox_module_scss_1.default.top]: to === "top",

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

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.switchComponentRenderer = exports.SwitchMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("@components-core/renderers");
-const Toggle_1 = require("@components/Toggle/Toggle");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const Toggle_module_scss_1 = __importDefault(require("@components/Toggle/Toggle.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const metadata_helpers_1 = require("@components/metadata-helpers");
+const Toggle_module_scss_1 = __importDefault(require("../Toggle/Toggle.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
+const Toggle_1 = require("../Toggle/Toggle");
 const COMP = "Switch";
 exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component is a user interface element that allows users to toggle between two states: ` +

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

@@ -5,18 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableComponentRenderer = exports.TableMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const immer_1 = __importDefault(require("immer"));
 const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
 require("./react-table-config.d.ts");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const constants_1 = require("../../components-core/constants");
+const metadata_helpers_1 = require("../metadata-helpers");
+const TableContext_1 = require("../Column/TableContext");
+const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative");
 const TableNative_1 = require("./TableNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
-const react_1 = require("react");
-const TableContext_1 = require("@components/Column/TableContext");
-const immer_1 = __importDefault(require("immer"));
-const constants_1 = require("@components-core/constants");
-const SelectionStoreNative_1 = require("@components/SelectionStore/SelectionStoreNative");
 const COMP = "Table";
 exports.TableMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a component that displays cells organized into rows and columns. The \`${COMP}\` ` +