xmlui 0.7.14 → 0.7.15

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -0,0 +1,337 @@
+"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.NumberBox = 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 NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
+const constants_1 = require("@components-core/constants");
+const IconNative_1 = require("@components/Icon/IconNative");
+const InputAdornment_1 = require("@components/Input/InputAdornment");
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const misc_1 = require("@components-core/utils/misc");
+const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+const numberbox_abstractions_1 = require("./numberbox-abstractions");
+const NumberBox = ({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }) => {
+    var _a;
+    // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
+    min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);
+    // Step must be an integer since floating point arithmetic needs a deeper dive.
+    const _step = (_a = (0, numberbox_abstractions_1.toUsableNumber)(step, true)) !== null && _a !== void 0 ? _a : numberbox_abstractions_1.DEFAULT_STEP;
+    const inputRef = (0, react_1.useRef)(null);
+    const upButton = (0, react_1.useRef)(null);
+    const downButton = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
+    // --- Convert to representable string value (from number | null | undefined)
+    const [valueStrRep, setValueStrRep] = react_1.default.useState((0, numberbox_abstractions_1.mapToRepresentation)(value));
+    (0, react_1.useEffect)(() => {
+        setValueStrRep((0, numberbox_abstractions_1.mapToRepresentation)(value));
+    }, [value]);
+    // --- 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)((newValue, rep) => {
+        setValueStrRep(rep);
+        updateState({ value: newValue });
+        onDidChange(newValue);
+    }, [onDidChange, updateState]);
+    // --- Keypress
+    const onInputChange = (0, react_1.useCallback)((event) => {
+        // const newValue = sanitizeInput(event.target.value.trim(), value, integersOnly, zeroOrPositive, min, max);
+        // if (!newValue) return;
+        // updateValue(newValue[0], newValue[1]);
+        const value = event.target.value;
+        const repr = value;
+        updateValue(value, repr);
+    }, [updateValue]);
+    // --- Stepper logic
+    const handleIncStep = (0, react_1.useCallback)(() => {
+        if (readOnly)
+            return;
+        const newValue = applyStep(valueStrRep, _step, min, max, integersOnly);
+        if (newValue === undefined)
+            return;
+        updateValue(newValue, newValue.toString());
+    }, [valueStrRep, _step, min, max, integersOnly, updateValue, readOnly]);
+    const handleDecStep = (0, react_1.useCallback)(() => {
+        if (readOnly)
+            return;
+        const newValue = applyStep(valueStrRep, -_step, min, max, integersOnly);
+        if (newValue === undefined)
+            return;
+        updateValue(newValue, newValue.toString());
+    }, [valueStrRep, _step, min, max, integersOnly, updateValue, readOnly]);
+    // --- Register stepper logic to buttons
+    useLongPress(upButton.current, handleIncStep);
+    useLongPress(downButton.current, handleDecStep);
+    // --- This logic prevenst the user from typing invalid characters (in the current typing context)
+    const handleOnBeforeInput = (event) => {
+        var _a, _b;
+        // --- Prevent the default behavior for some characters
+        let shouldPreventDefault = false;
+        const currentValue = (_a = event.target.value) !== null && _a !== void 0 ? _a : "";
+        const currentPos = event.target.selectionStart;
+        // --- Are the caret after the exponential separator?
+        const beforeCaret = currentValue.substring(0, event.target.selectionStart);
+        // --- If "expPos" is -1, the caret is not after the exponential separator
+        const expPos = beforeCaret.indexOf(numberbox_abstractions_1.EXPONENTIAL_SEPARATOR);
+        switch (event.data) {
+            case "-":
+                shouldPreventDefault = true;
+                if (expPos === -1) {
+                    // --- Change the first char to "-" if we are before the exponential separator and it's not already there
+                    if (!currentValue.startsWith("-")) {
+                        setNewValue("-" + currentValue, currentPos + 1);
+                    }
+                }
+                else {
+                    // --- Change the char after the exponential separator to "-" if it's not already there
+                    if (currentValue[expPos + 1] !== "-") {
+                        setNewValue(currentValue.substring(0, expPos + 1) + "-" + currentValue.substring(expPos + 1), currentPos + 1);
+                    }
+                }
+                break;
+            case "+":
+                shouldPreventDefault = true;
+                if (expPos === -1) {
+                    // --- Remove the first char if it's "-" and we are before the exponential separator
+                    if (currentValue.startsWith("-")) {
+                        setNewValue(currentValue.substring(1), currentPos - 1);
+                    }
+                }
+                else {
+                    // --- Remove the char after the exponential separator if it's "-"
+                    if (currentValue[expPos + 1] === "-") {
+                        setNewValue(currentValue.substring(0, expPos + 1) + currentValue.substring(expPos + 2), currentPos - 1);
+                    }
+                }
+                break;
+            case numberbox_abstractions_1.DECIMAL_SEPARATOR:
+                // --- Prevent multiple decimal separators (integers only),
+                // --- or decimal separator after the exponential separator
+                if (integersOnly || currentValue.includes(numberbox_abstractions_1.DECIMAL_SEPARATOR) || expPos !== -1) {
+                    shouldPreventDefault = true;
+                }
+                break;
+            case numberbox_abstractions_1.EXPONENTIAL_SEPARATOR:
+                // --- Prevent exponential notation for integers
+                if (integersOnly) {
+                    shouldPreventDefault = true;
+                    break;
+                }
+                // --- Prevent multiple exponential separators (and too many digits after it)
+                if (currentValue.includes(numberbox_abstractions_1.EXPONENTIAL_SEPARATOR) ||
+                    tooManyDigitsAfterExponentialSeparator(currentPos, 2)) {
+                    shouldPreventDefault = true;
+                }
+                break;
+            default:
+                let newInput = event.data;
+                const selectionStart = event.target.selectionStart;
+                // --- Test for multi-character input (perhaps paste)
+                if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    // --- Decide whether to accept the optional sign character
+                    if (newInput.startsWith("-")) {
+                        if (selectionStart > 0) {
+                            shouldPreventDefault = true;
+                            break;
+                        }
+                    }
+                    else if (newInput.startsWith("+")) {
+                        shouldPreventDefault = true;
+                        break;
+                    }
+                    // --- Replace the selection with the new input
+                    const newValue = currentValue.substring(0, selectionStart) +
+                        newInput +
+                        currentValue.substring(event.target.selectionEnd);
+                    // --- Check for integers
+                    if (integersOnly && !numberbox_abstractions_1.INT_REGEXP.test(newValue)) {
+                        // --- The result is not an integer, drop the pasted input
+                        shouldPreventDefault = true;
+                    }
+                    else if (!numberbox_abstractions_1.FLOAT_REGEXP.test(newValue)) {
+                        // --- The result is not a loat, drop the pasted input
+                        shouldPreventDefault = true;
+                    }
+                    break;
+                }
+                // --- Single character input
+                // --- Prevent non-digit characters
+                if (event.data < "0" || event.data > "9") {
+                    shouldPreventDefault = true;
+                    break;
+                }
+                // --- Prevent digits before minus sign
+                if (currentValue.startsWith("-") && selectionStart === 0) {
+                    shouldPreventDefault = true;
+                    break;
+                }
+                // --- Prevent too many digits after the exponential separator
+                if (expPos !== -1 && tooManyDigitsAfterExponentialSeparator(expPos + 1, 1)) {
+                    // --- Caret after the exponential separator
+                    // --- Prevent typing a digi if more than 2 digits after the exponential separator
+                    shouldPreventDefault = true;
+                }
+                break;
+        }
+        // --- Done.
+        if (shouldPreventDefault) {
+            event.preventDefault();
+        }
+        return;
+        // --- Helpers
+        function tooManyDigitsAfterExponentialSeparator(pos, maxDigits) {
+            let numDigitsAfter = 0;
+            while (pos < currentValue.length) {
+                if (/\d/.test(currentValue[pos++])) {
+                    numDigitsAfter++;
+                }
+                else {
+                    numDigitsAfter = maxDigits + 1;
+                    break;
+                }
+            }
+            return numDigitsAfter > maxDigits;
+        }
+        function setNewValue(newValue, pos) {
+            var _a;
+            event.target.value = newValue;
+            updateValue(newValue, newValue);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(pos, pos);
+        }
+    };
+    // --- Setting steppers with keyboard
+    const handleOnKey = (0, react_1.useCallback)((event) => {
+        if (event.code === "ArrowUp") {
+            event.preventDefault();
+            handleIncStep();
+        }
+        if (event.code === "ArrowDown") {
+            event.preventDefault();
+            handleDecStep();
+        }
+    }, [handleIncStep, handleDecStep]);
+    // --- Manage obtaining and losing focus & blur
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        setValueStrRep((0, numberbox_abstractions_1.mapToRepresentation)(value));
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [value, 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, numberbox_abstractions_1.isEmptyLike)(newValue) ? "" : String(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, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(NumberBox_module_scss_1.default.inputRoot, {
+                [NumberBox_module_scss_1.default.readOnly]: readOnly,
+                [NumberBox_module_scss_1.default.disabled]: !enabled,
+                [NumberBox_module_scss_1.default.noSpinBox]: !hasSpinBox,
+                [NumberBox_module_scss_1.default.error]: validationStatus === "error",
+                [NumberBox_module_scss_1.default.warning]: validationStatus === "warning",
+                [NumberBox_module_scss_1.default.valid]: validationStatus === "valid",
+            }), tabIndex: -1, onFocus: () => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required, "aria-required": required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
+};
+exports.NumberBox = NumberBox;
+function applyStep(valueStrRep, step, min, max, integersOnly) {
+    const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);
+    if ((0, numberbox_abstractions_1.isEmptyLike)(currentValue)) {
+        return;
+    }
+    return (0, numberbox_abstractions_1.clamp)(currentValue + step, min, max);
+}
+function useLongPress(elementRef, action, delay = 500) {
+    const timeoutId = (0, react_1.useRef)(0);
+    const intervalId = (0, react_1.useRef)(0);
+    const savedAction = (0, react_1.useRef)(action);
+    // Remember the latest action callback, since it is different every render
+    (0, react_1.useEffect)(() => {
+        savedAction.current = action;
+    }, [action]);
+    (0, react_1.useEffect)(() => {
+        const onMouseDown = () => {
+            var _a;
+            (_a = savedAction.current) === null || _a === void 0 ? void 0 : _a.call(savedAction);
+            timeoutId.current = window.setTimeout(() => {
+                intervalId.current = window.setInterval(() => {
+                    var _a;
+                    (_a = savedAction.current) === null || _a === void 0 ? void 0 : _a.call(savedAction);
+                }, 100);
+            }, delay);
+        };
+        const onMouseUp = () => {
+            clearTimeout(timeoutId.current);
+            clearInterval(intervalId.current);
+        };
+        const onMouseOut = () => {
+            clearTimeout(timeoutId.current);
+            clearInterval(intervalId.current);
+        };
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mousedown", onMouseDown);
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mouseup", onMouseUp);
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mouseout", onMouseOut);
+        return () => {
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mousedown", onMouseDown);
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mouseup", onMouseUp);
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mouseout", onMouseOut);
+        };
+    }, [elementRef, action, delay]);
+}

package/dist/scripts/src/components/NumberBox/numberbox-abstractions.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_STEP = exports.FLOAT_REGEXP = exports.INT_REGEXP = exports.EXPONENTIAL_SEPARATOR = exports.DECIMAL_SEPARATOR = exports.NUMBERBOX_MAX_VALUE = void 0;
+exports.isEmptyLike = isEmptyLike;
+exports.mapToRepresentation = mapToRepresentation;
+exports.clamp = clamp;
+exports.toUsableNumber = toUsableNumber;
+exports.NUMBERBOX_MAX_VALUE = 999999999999999;
+exports.DECIMAL_SEPARATOR = ".";
+exports.EXPONENTIAL_SEPARATOR = "e";
+exports.INT_REGEXP = /^-?\d+$/;
+exports.FLOAT_REGEXP = /^-?\d+(\.\d+)?([eE][+-]?\d+)?$/;
+exports.DEFAULT_STEP = 1;
+function isEmptyLike(value) {
+    return typeof value === "undefined" || value === null || value === "";
+}
+function mapToRepresentation(value) {
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number")
+        return value.toString();
+    return "";
+}
+function clamp(value, min, max) {
+    let clamped = value;
+    if (value < min)
+        clamped = min;
+    if (value > max)
+        clamped = max;
+    return clamped;
+}
+function toUsableNumber(value, isInteger = false) {
+    const isUsable = isInteger ? isUsableInteger : isUsableFloat;
+    if (!isUsable(value))
+        return null;
+    if (typeof value === "string") {
+        value = isInteger ? Number.parseInt(value) : +value;
+    }
+    return value;
+}
+/**
+ * Check whether the input value is a usable number for operations.
+ * Passes if it's of type number or a non-empty string that evaluates to a number.
+ */
+function isUsableFloat(value) {
+    if (typeof value === "string" && value.length > 0) {
+        return !Number.isNaN(+value) && naiveFloatBounding(value);
+    }
+    return typeof value === "number";
+}
+// TEMP
+// Rounding and arithmetic with large floats is a hassle if loss of precision is apparent.
+// Just bound the incoming floating point value to the max value available.
+// This is an edge case but makes it so that we stay consistent and can do arithmetic with the spinner box.
+function naiveFloatBounding(value) {
+    const integerPart = value.split(".")[0];
+    return Math.abs(Number.parseInt(integerPart)) <= exports.NUMBERBOX_MAX_VALUE;
+}
+/**
+ * Check whether the input value is a usable integer for operations.
+ * Passes if it's of type number and is an integer
+ * or a non-empty string that evaluates to an integer.
+ */
+function isUsableInteger(value) {
+    if (typeof value === "string" &&
+        value.length > 0 &&
+        ![exports.EXPONENTIAL_SEPARATOR, exports.DECIMAL_SEPARATOR].some((item) => value.includes(item))) {
+        return Number.isSafeInteger(+value);
+    }
+    else if (typeof value === "number") {
+        return Number.isSafeInteger(value);
+    }
+    return false;
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.offCanvasComponentRenderer = exports.OffCanvasMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const OffCanvas_module_scss_1 = __importDefault(require("./OffCanvas.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const OffCanvasNative_1 = require("./OffCanvasNative");
+const abstractions_1 = require("@components/abstractions");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "OffCanvas";
+// See reference implementation here: https://getbootstrap.com/docs/5.3/components/alerts/
+exports.OffCanvasMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: `(**NOT IMPLEMENTED YET**) The \`OffCanvas\` component is a hidden panel that slides into view ` +
+        `from the side of the screen. It helps display additional content or navigation without disrupting ` +
+        `the main interface.`,
+    props: {
+        title: (0, ComponentDefs_1.d)("This property sets the title of the component.", null, "string"),
+        isInitiallyOpen: (0, ComponentDefs_1.d)("This property indicates if the component is initially open.", null, "boolean", false),
+        enableBackdrop: (0, ComponentDefs_1.d)(`This property indicates if the backdrop is enabled when the component is displayed. When the ` +
+            `backdrop is not enabled, clicking outside \`OffCanvas\` will not close it.`, null, "boolean", true),
+        enableBodyScroll: (0, ComponentDefs_1.d)(`This property indicates if the body scroll is enabled when the component is displayed.`, null, "boolean", false),
+        noCloseOnBackdropClick: (0, ComponentDefs_1.d)(`When this property is set to \`true\`, the ${COMP} does not close when the user clicks on its backdrop.`, null, "boolean", false),
+        placement: (0, ComponentDefs_1.d)(`This property indicates the position where the ${COMP} should be docked to.`, abstractions_1.placementMd),
+        autoCloseInMs: (0, ComponentDefs_1.d)(`This property sets a timeout. When the timeout expires, the component gets hidden.`),
+    },
+    events: {
+        didOpen: (0, metadata_helpers_1.dDidOpen)(COMP),
+        didClose: (0, metadata_helpers_1.dDidClose)(COMP),
+    },
+    apis: {
+        open: (0, ComponentDefs_1.d)(`This method opens the component. It triggers the \`didOpen\` event  with the argument ` +
+            `set to \`false\`.`),
+        close: (0, ComponentDefs_1.d)(`This method closes the component. It triggers the \`didClose\` event with the argument ` +
+            `set to \`false\`.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(OffCanvas_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "width-OffCanvas": "600px",
+        "padding-OffCanvas": "$padding-tight",
+        "padding-vertical-OffCanvas": "$padding-tight",
+        "padding-horizontal-OffCanvas": "$padding-normal",
+        "color-bg-OffCanvas": "$color-bg",
+        "shadow-horizontal-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
+        "shadow-vertical-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
+        light: {},
+        dark: {},
+    },
+});
+exports.offCanvasComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OffCanvasMd, ({ node, extractValue, lookupEventHandler, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(OffCanvasNative_1.OffCanvas, { style: layoutCss, title: extractValue(node.props.title), isInitiallyOpen: extractValue.asOptionalBoolean(node.props.isInitiallyOpen, false), placement: extractValue(node.props.placement), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/OffCanvas/OffCanvasNative.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OffCanvas = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const OffCanvas_module_scss_1 = __importDefault(require("./OffCanvas.module.scss"));
+const react_1 = require("react");
+const OffCanvas = ({ title, isInitiallyOpen, onClose, placement = "right", showCloseButton = true, children, allowScroll = true, showBackdrop = false, style, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(isInitiallyOpen);
+    const [place, setPlace] = (0, react_1.useState)(placement);
+    // Control body scrolling
+    (0, react_1.useEffect)(() => {
+        if (isOpen && !allowScroll) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        // Cleanup when unmounted or isOpen changes
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen, allowScroll]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showBackdrop && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(OffCanvas_module_scss_1.default.overlay, {
+                    [OffCanvas_module_scss_1.default.overlayVisible]: isOpen,
+                }), onClick: onClose })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(OffCanvas_module_scss_1.default.offCanvas, {
+                    [OffCanvas_module_scss_1.default.open]: isOpen,
+                    [OffCanvas_module_scss_1.default.left]: place === "left",
+                    [OffCanvas_module_scss_1.default.right]: place === "right",
+                    [OffCanvas_module_scss_1.default.top]: place === "top",
+                    [OffCanvas_module_scss_1.default.bottom]: place === "bottom",
+                }), style: style, children: [(0, jsx_runtime_1.jsxs)("header", { className: OffCanvas_module_scss_1.default.offCanvasHeader, children: [!!title && (0, jsx_runtime_1.jsx)("span", { className: OffCanvas_module_scss_1.default.offCanvasTitle, children: title }), (0, jsx_runtime_1.jsx)("div", { className: OffCanvas_module_scss_1.default.spacer }), showCloseButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [place !== "left" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
+                                            setPlace("left");
+                                        }, children: "\u2190" })), place !== "right" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
+                                            setPlace("right");
+                                        }, children: "\u2192" })), place !== "top" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
+                                            setPlace("top");
+                                        }, children: "\u2191" })), place !== "bottom" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
+                                            setPlace("bottom");
+                                        }, children: "\u2193" })), (0, jsx_runtime_1.jsx)("div", { className: OffCanvas_module_scss_1.default.offCanvasButtonSpace }), (0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
+                                            setIsOpen(false);
+                                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                                        }, children: "\u00D7" })] }))] }), children] })] }));
+};
+exports.OffCanvas = OffCanvas;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionComponentRenderer = exports.OptionMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const OptionTypeProvider_1 = require("@components/Option/OptionTypeProvider");
+const react_1 = require("react");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Option";
+exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
+    description: `\`${COMP}\` is a non-visual component describing a selection option. Other components ` +
+        `(such as \`Select\`, \`Combobox\`, and others) may use nested \`Option\` instances ` +
+        `from which the user can select.`,
+    props: {
+        label: (0, ComponentDefs_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +
+            `\`Option\` will use the \`value\` as the label.`),
+        value: (0, ComponentDefs_1.d)(`This property defines the value of the option. If \`value\` is not defined, ` +
+            `\`Option\` will use the \`label\` as the value.`),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+    },
+});
+const OptionNative = (0, react_1.memo)((props) => {
+    const OptionType = (0, OptionTypeProvider_1.useOptionType)();
+    if (!OptionType) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(OptionType, Object.assign({}, props));
+});
+OptionNative.displayName = "OptionNative";
+exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild }) => {
+    return ((0, jsx_runtime_1.jsx)(OptionNative, { value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || renderChild(node.children), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
+});

package/dist/scripts/src/components/Option/OptionTypeProvider.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOptionType = useOptionType;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const OptionTypeContext = react_1.default.createContext(null);
+function useOptionType() {
+    return react_1.default.useContext(OptionTypeContext);
+}
+function OptionTypeProvider({ children, Component, }) {
+    return (0, jsx_runtime_1.jsx)(OptionTypeContext.Provider, { value: Component, children: children });
+}
+exports.default = OptionTypeProvider;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageHeaderRenderer = exports.PageHeaderMd = void 0;
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const compound_utils_1 = require("@components-core/utils/compound-utils");
+// --- We cannot use this with nextra
+// import componentSource from "./PageHeader.xmlui?raw";
+const COMP = "PageHeader";
+exports.PageHeaderMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` component is a component that displays a title and an ` +
+        `optional pre-title. The pre-title is displayed above the title.`,
+    props: {
+        preTitle: (0, ComponentDefs_1.d)("The pre-title to display above the title."),
+        title: (0, ComponentDefs_1.d)("The title to display."),
+    },
+    defaultThemeVars: {
+        "gap-PageHeader": "$space-2",
+    },
+});
+const componentSource = `
+<Component name="PageHeader">
+  <HStack gap="$gap-PageHeader" verticalAlignment="center">
+    <VStack gap="$space-tight">
+      <Text when="{$props.preTitle !== undefined}" variant="subheading" value="{$props.preTitle}" />
+      <H2 value="{$props.title}" />
+    </VStack>
+    <SpaceFiller />
+    <Slot />
+  </HStack>
+</Component>
+`;
+exports.pageHeaderRenderer = {
+    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
+    metadata: exports.PageHeaderMd,
+};

package/dist/scripts/src/components/PageMetaTitle/PageMetaTilteNative.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageMetaTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_helmet_async_1 = require("react-helmet-async");
+const PageMetaTitle = ({ title }) => {
+    return (0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { title: title });
+};
+exports.PageMetaTitle = PageMetaTitle;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageMetaTitleComponentRenderer = exports.PageMetaTitleMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const PageMetaTilteNative_1 = require("./PageMetaTilteNative");
+const COMP = "PageMetaTitle";
+exports.PageMetaTitleMd = (0, ComponentDefs_1.createMetadata)({
+    description: `A PageMetaTitle component allows setting up (or changing) the app title to display with the ` +
+        `current browser tab.`,
+    props: {
+        value: (0, ComponentDefs_1.d)(`This property sets the page's title to display in the browser tab.`),
+    },
+});
+exports.pageMetaTitleComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PageMetaTitleMd, ({ node, extractValue, renderChild }) => {
+    return (0, jsx_runtime_1.jsx)(PageMetaTilteNative_1.PageMetaTitle, { title: extractValue(node.props.value) || renderChild(node.children) });
+});