xmlui 0.7.13 → 0.7.15

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

@@ -0,0 +1,99 @@
+"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.Toggle = 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 Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
+const constants_1 = require("@components-core/constants");
+const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+const misc_1 = require("@components-core/utils/misc");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+exports.Toggle = (0, react_1.forwardRef)(function Toggle({ id, initialValue = false, value = false, enabled = true, style, readOnly, validationStatus = "none", updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = false, className, label, labelPosition = "start", labelWidth, labelBreak, required, registerComponentApi }, forwardedRef) {
+    const innerRef = react_1.default.useRef(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(innerRef, forwardedRef) : innerRef;
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    const updateValue = (0, react_1.useCallback)((value) => {
+        var _a;
+        if (((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.checked) === value)
+            return;
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_1.useCallback)((event) => {
+        if (readOnly) {
+            return;
+        }
+        updateState({ value: event.target.checked });
+        onDidChange(event.target.checked);
+    }, [onDidChange, readOnly, updateState]);
+    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]);
+    (0, react_1.useEffect)(() => {
+        if (typeof indeterminate === "boolean" && innerRef.current) {
+            innerRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    const focus = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = innerRef.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, { id: id, label: label, style: style, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, shrinkToLabel: true, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "checkbox", role: variant, checked: value, disabled: !enabled, readOnly: readOnly, "aria-readonly": readOnly, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
+                [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
+                [Toggle_module_scss_1.default.switch]: variant === "switch",
+                [Toggle_module_scss_1.default.error]: validationStatus === "error",
+                [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
+                [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
+            }), "aria-checked": value }) }));
+});

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toolbarRenderer = exports.ToolbarMd = 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 "./Toolbar.xmlui?raw";
+const COMP = "Toolbar";
+exports.ToolbarMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component is a container for a toolbar.",
+    props: {
+        alignment: (0, ComponentDefs_1.d)("The alignment of the toolbar."),
+    },
+    defaultThemeVars: {
+        "gap-Toolbar": "$space-2",
+    },
+});
+const componentSource = `
+<Component name="Toolbar">
+  <HStack 
+    gap="$gap-Toolbar" 
+    verticalAlignment="center"
+    horizontalAlignment="{$props.alignment ?? 'end' }">
+    <Slot />
+  </HStack>
+</Component>
+`;
+exports.toolbarRenderer = {
+    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
+    metadata: exports.ToolbarMd,
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toolbarButtonRenderer = exports.ToolbarButtonMd = 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 "./ToolbarButton.xmlui?raw";
+const COMP = "ToolbarButton";
+exports.ToolbarButtonMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component is a button that is used in a toolbar.",
+    props: {
+        label: (0, ComponentDefs_1.d)("The label to display on the button."),
+        icon: (0, ComponentDefs_1.d)("The icon to display on the button."),
+    },
+    defaultThemeVars: {
+        "padding-horizontal-ToolbarButton": "$space-1",
+        "padding-vertical-ToolbarButton": "$space-1",
+    },
+});
+const componentSource = `
+<Component name="ToolbarButton">
+  <Button
+    variant="ghost"
+    themeColor="secondary"
+    horizontalPadding="$padding-horizontal-ToolbarButton"
+    verticalPadding="$padding-vertical-ToolbarButton"
+    icon="{$props.icon}"
+    label="{$props.label}"
+    onClick="e => emitEvent('click', e)">
+    <Slot />
+  </Button>
+</Component>
+`;
+exports.toolbarButtonRenderer = {
+    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
+    metadata: exports.ToolbarButtonMd,
+};

package/dist/scripts/src/components/Tree/TreeComponent.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeComponentRenderer = exports.TreeMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const container_helpers_1 = require("@components/container-helpers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const TreeNative_1 = require("./TreeNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Tree";
+exports.TreeMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: `The \`${COMP}\` component is a virtualized tree component that displays hierarchical data.`,
+    props: {
+        data: {
+            description: `The data source of the tree.`,
+            required: true,
+        },
+        selectedUid: {
+            description: `The ID (optional) of the selected tree row.`,
+        },
+        itemTemplate: (0, metadata_helpers_1.dComponent)("The template for each item in the tree."),
+    },
+});
+/**
+ * This function defines the renderer for the Tree component.
+ */
+exports.treeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TreeMd, ({ node, extractValue, renderChild }) => {
+    return ((0, jsx_runtime_1.jsx)(TreeNative_1.TreeComponent, { data: extractValue(node.props.data), selectedUid: extractValue(node.props.selectedUid), itemRenderer: (item) => {
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.itemTemplate, item: item, renderChild: renderChild }));
+        } }));
+});

package/dist/scripts/src/components/Tree/TreeNative.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeComponent = TreeComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_window_1 = require("react-window");
+const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
+const TreeComponent_module_scss_1 = __importDefault(require("./TreeComponent.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const treeUtils_1 = require("@components-core/utils/treeUtils");
+const TreeRow = (0, react_1.memo)(function TreeRow({ index, style, data }) {
+    const { nodes, toggleNode, selectedUid, itemRenderer } = data;
+    const treeItem = nodes[index];
+    const onToggleNode = (0, react_1.useCallback)((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        toggleNode(treeItem);
+    }, [toggleNode, treeItem]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({}, style), { width: "auto", minWidth: "100%", display: "flex" }), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.rowWrapper, {
+                [TreeComponent_module_scss_1.default.selected]: selectedUid === treeItem.key,
+            }), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: onToggleNode, className: TreeComponent_module_scss_1.default.gutter, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: treeItem.depth * 10 }, className: TreeComponent_module_scss_1.default.depthPlaceholder }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.toggleWrapper, {
+                                [TreeComponent_module_scss_1.default.expanded]: treeItem.isExpanded,
+                                [TreeComponent_module_scss_1.default.hidden]: !treeItem.hasChildren,
+                            }) })] }), (0, jsx_runtime_1.jsx)("div", { className: TreeComponent_module_scss_1.default.labelWrapper, onClick: treeItem.selectable ? undefined : onToggleNode, style: { cursor: treeItem.selectable ? undefined : "pointer" }, children: itemRenderer(treeItem) })] }) }));
+});
+const emptyTreeData = {
+    treeData: [],
+    treeItemsById: {},
+};
+function TreeComponent({ data = emptyTreeData, selectedUid, itemRenderer, }) {
+    const { treeData, treeItemsById } = data;
+    const [expandedIds, setExpandedIds] = (0, react_1.useState)([]);
+    const flatTreeData = (0, react_1.useMemo)(() => (0, treeUtils_1.toFlatTree)(treeData, expandedIds), [expandedIds, treeData]);
+    /**
+     * ensure the selected item's parents are expanded on route change
+     */
+    (0, react_1.useEffect)(() => {
+        if (selectedUid) {
+            const treeItem = treeItemsById[selectedUid];
+            if (treeItem) {
+                setExpandedIds((prev) => [...prev, ...treeItem.parentIds]);
+            }
+        }
+    }, [selectedUid, treeItemsById]);
+    const toggleNode = (0, react_1.useCallback)((node) => {
+        if (!node.isExpanded) {
+            setExpandedIds((prev) => [...prev, node.key]);
+        }
+        else {
+            setExpandedIds((prev) => prev.filter((id) => id !== node.key));
+        }
+    }, []);
+    const itemData = (0, react_1.useMemo)(() => {
+        return {
+            nodes: flatTreeData,
+            toggleNode,
+            selectedUid,
+            itemRenderer,
+        };
+    }, [flatTreeData, toggleNode, selectedUid, itemRenderer]);
+    const getItemKey = (0, react_1.useCallback)((index, data) => {
+        return data.nodes[index].key;
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { className: TreeComponent_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(react_virtualized_auto_sizer_1.default, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { height: height, itemCount: itemData.nodes.length, itemData: itemData, itemSize: 35, itemKey: getItemKey, width: width, children: TreeRow })) }) }));
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trendLabelRenderer = exports.TrendLabelMd = 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 "./TrendLabel.xmlui?raw";
+const COMP = "TrendLabel";
+exports.TrendLabelMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component displays a trend label.",
+    props: {
+        change: (0, ComponentDefs_1.d)("The change percentage."),
+    },
+});
+const componentSource = `
+<Component name="TrendLabel">
+  <Fragment>
+    <Text when="{$props.change > 0}" marginLeft="$space-tight" color="$color-valid">
+      {Math.floor($props.change * 100)}% 
+      <Icon name="trending-up" />
+    </Text>
+    <Text when="{$props.change === 0}" marginLeft="$space-tight" color="$color-warning">
+      {Math.floor($props.change * 100)}% 
+      <Icon name="trending-level" />
+    </Text>
+    <Text when="{$props.change < 0}" marginLeft="$space-tight" color="$color-error">
+      {Math.floor($props.change * 100)}% 
+      <Icon name="trending-down" />
+    </Text>
+  </Fragment>
+</Component>
+`;
+exports.trendLabelRenderer = {
+    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
+    metadata: exports.TrendLabelMd,
+};

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

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidationSummary = ValidationSummary;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const StackNative_1 = require("@components/Stack/StackNative");
+const IconNative_1 = require("@components/Icon/IconNative");
+const TextNative_1 = require("@components/Text/TextNative");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const ValidationSummary_module_scss_1 = __importDefault(require("./ValidationSummary.module.scss"));
+const SpaceFillerNative_1 = require("@components/SpaceFiller/SpaceFillerNative");
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const constants_1 = require("@components-core/constants");
+const react_2 = require("@formkit/auto-animate/react");
+function ValidationSummary({ fieldValidationResults = constants_1.EMPTY_OBJECT, generalValidationResults = constants_1.EMPTY_ARRAY, }) {
+    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    const groupedInvalidResults = (0, react_1.useMemo)(() => {
+        const ret = {};
+        Object.entries(fieldValidationResults).forEach(([field, validationResult]) => {
+            validationResult.validations.forEach((singleValidationResult) => {
+                if (!singleValidationResult.isValid) {
+                    ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+                    ret[singleValidationResult.severity].push({
+                        field,
+                        message: singleValidationResult.invalidMessage || "",
+                    });
+                }
+            });
+        });
+        generalValidationResults.forEach((singleValidationResult) => {
+            ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+            ret[singleValidationResult.severity].push({
+                message: singleValidationResult.invalidMessage || "",
+            });
+        });
+        return ret;
+    }, [fieldValidationResults, generalValidationResults]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: animateContainerRef, className: ValidationSummary_module_scss_1.default.summaryContainer, children: [(0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.warning, severity: "warning", heading: "Validation warnings" }), (0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.error, severity: "error", heading: "Validation errors" })] }));
+}
+const ValidationDisplay = ({ heading, issues = constants_1.EMPTY_ARRAY, severity = "error", onClose }) => {
+    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    if (issues.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ValidationSummary_module_scss_1.default.validationContainer, {
+            [ValidationSummary_module_scss_1.default.valid]: severity === "valid",
+            [ValidationSummary_module_scss_1.default.info]: severity === "info",
+            [ValidationSummary_module_scss_1.default.warning]: severity === "warning",
+            [ValidationSummary_module_scss_1.default.error]: severity === "error",
+        }), style: { paddingTop: !onClose ? "0.5rem" : undefined }, children: [(0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", layout: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { className: ValidationSummary_module_scss_1.default.heading, name: severity, size: "md" }), (0, jsx_runtime_1.jsx)("div", { className: ValidationSummary_module_scss_1.default.heading, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: heading }) }), !!onClose && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpaceFillerNative_1.SpaceFiller, {}), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: onClose, variant: "ghost", themeColor: "secondary", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" })] }))] }), (0, jsx_runtime_1.jsx)("ul", { ref: animateContainerRef, children: issues.map((issue, i) => ((0, jsx_runtime_1.jsx)(ValidationEntry, { issue: issue }, i))) })] }));
+};
+// --- ValidationEntry
+const ValidationEntry = ({ issue }) => {
+    const { field, message } = issue;
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("span", { style: { display: "inline-flex", gap: field ? "0.25rem" : undefined }, children: [field && (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", fontWeight: "bold", children: `${field}:` }), (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", preserveLinebreaks: true, children: message })] }) }));
+};

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

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.defaultButtonType = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top"];
+exports.LinkTargetMd = [
+    {
+        value: "_self",
+        description: "The link will open in the same frame as it was clicked.",
+    },
+    {
+        value: "_blank",
+        description: "The link will open in a new window or tab.",
+    },
+    {
+        value: "_parent",
+        description: "The link will open in the parent frame. If no parent, behaves as _self.",
+    },
+    {
+        value: "_top",
+        description: "The topmost browsing context. The link will open in the full body of the window. If no ancestors, behaves as _self.",
+    }
+];
+// --- Available view sizes
+exports.viewportSizeMd = [
+    {
+        value: "xs",
+        description: "Extra small devices (e.g., a small smartphone with low screen resolution)",
+    },
+    { value: "sm", description: "Small devices (e.g., a smartphone in landscape view)" },
+    { value: "md", description: "Medium devices (e.g., a tablet)" },
+    { value: "lg", description: "Large devices (e.g., a laptop)" },
+    { value: "xl", description: 'Extra large devices (e.g., a standard 20" monitor)' },
+    { value: "xxl", description: 'Extra extra large devices (e.g., a large 29" monitor)' },
+];
+exports.viewportSizeNames = Object.keys(exports.viewportSizeMd);
+// --- Available button sizes
+exports.sizeMd = [
+    { value: "xs", description: "Extra small button" },
+    { value: "sm", description: "Small button" },
+    { value: "md", description: "Medium button" },
+    { value: "lg", description: "Large button" },
+];
+const sizeValues = Object.keys(exports.sizeMd);
+exports.sizeNames = [...sizeValues];
+// --- Available button themes
+const buttonThemeValues = ["attention", "primary", "secondary"];
+exports.buttonThemeNames = [...buttonThemeValues];
+exports.buttonThemeMd = [
+    { value: "attention", description: "Attention state theme color" },
+    { value: "primary", description: "Primary theme color" },
+    { value: "secondary", description: "Secondary theme color" },
+];
+// --- Available button types
+exports.buttonTypeValues = ["button", "submit", "reset"];
+exports.buttonTypeNames = [...exports.buttonTypeValues];
+exports.buttonTypesMd = [
+    { value: "button", description: "Regular behavior that only executes logic if explicitly determined." },
+    { value: "submit", description: "The button submits the form data to the server. This is the default for buttons in a Form or NativeForm component." },
+    { value: "reset", description: "Resets all the controls to their initial values. Using it is ill advised for UX reasons." },
+];
+exports.defaultButtonType = "button";
+// --- Available button variants
+const buttonVariantValues = ["solid", "outlined", "ghost"];
+exports.buttonVariantNames = [...buttonVariantValues];
+exports.buttonVariantMd = [
+    { value: "solid", description: "A button with a border and a filled background." },
+    { value: "outlined", description: "The button is displayed with a border and a transparent background." },
+    { value: "ghost", description: "A button with no border and fill. Only the label is visible; the background is colored when hovered or clicked." },
+];
+// --- Available button aria attributes
+const buttonAriaValues = ["aria-controls", "aria-expanded", "aria-disabled", "aria-label"];
+exports.buttonAriaNames = [...buttonAriaValues];
+// --- Available alignment options
+exports.alignmentOptionValues = ["start", "center", "end"];
+exports.alignmentOptionNames = [...exports.alignmentOptionValues];
+exports.alignmentOptionMd = [
+    { value: "center", description: "Place the content in the middle" },
+    { value: "start", description: "Justify the content to the left (to the right if in right-to-left)" },
+    { value: "end", description: "Justify the content to the right (to the left if in right-to-left)" },
+];
+// --- Available orientation options
+const orientationOptionValues = ["horizontal", "vertical"];
+exports.orientationOptionNames = [...orientationOptionValues];
+exports.orientationOptionMd = [
+    { value: "horizontal", description: "The component will fill the available space horizontally" },
+    { value: "vertical", description: "The component will fill the available space vertically" },
+];
+// --- Available icon positions
+exports.iconPositionValues = ["start", "end"];
+exports.iconPositionNames = [...exports.iconPositionValues];
+exports.iconPositionMd = [
+    { value: "start", description: "The icon will appear at the start (left side when the left-to-right direction is set)" },
+    { value: "end", description: "The icon will appear at the end (right side when the left-to-right direction is set)" },
+];
+// --- Available status colors
+const statusColorValues = [
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "info",
+    "light",
+    "dark",
+];
+exports.statusColorNames = [...statusColorValues];
+exports.statusColorMd = [
+    { value: "primary", description: "Primary theme color, no default icon" },
+    { value: "secondary", description: "Secondary theme color, no default icon" },
+    { value: "success", description: "Success theme color, \"success\" icon" },
+    { value: "danger", description: "Warning theme color, \"warning\" icon" },
+    { value: "warning", description: "Danger theme color, \"danger\" icon" },
+    { value: "info", description: "Info theme color, \"info\" icon" },
+    { value: "light", description: "Light theme color, no default icon" },
+    { value: "dark", description: "Dark theme color, no default icon" },
+];
+// --- Available placements
+const placementValues = ["start", "end", "top", "bottom"];
+exports.placementNames = [...placementValues];
+exports.placementMd = [
+    { value: "start", description: "The left side of the window (left-to-right) or the right side of the window (right-to-left)" },
+    { value: "end", description: "The right side of the window (left-to-right) or the left side of the window (right-to-left)" },
+    { value: "top", description: "The top of the window" },
+    { value: "bottom", description: "The bottom of the window" },
+];
+// --- Available label positions
+exports.labelPositionValues = ["top", "start", "end", "bottom"];
+exports.labelPositionNames = [...exports.labelPositionValues];
+exports.labelPositionMd = [
+    { value: "start", description: "The left side of the input (left-to-right) or the right side of the input (right-to-left)" },
+    { value: "end", description: "The right side of the input (left-to-right) or the left side of the input (right-to-left)" },
+    { value: "top", description: "The top of the input" },
+    { value: "bottom", description: "The bottom of the input" },
+];
+// --- Available trigger positions
+const triggerPositionValues = ["start", "end"];
+exports.triggerPositionNames = [...triggerPositionValues];
+// --- The state of a validated UI element
+exports.validationStatusValues = ["none", "error", "warning", "valid"];
+exports.validationStatusNames = [...exports.validationStatusValues];
+exports.validationStatusMd = [
+    // { value: "none", description: "No indicator" },
+    { value: "valid", description: "Visual indicator for an input that is accepted" },
+    { value: "warning", description: "Visual indicator for an input that produced a warning" },
+    { value: "error", description: "Visual indicator for an input that produced an error" },
+];
+// --- scroll anchoring
+exports.scrollAnchoringValues = ["top", "bottom"];
+exports.scrollAnchoringNames = [...exports.scrollAnchoringValues];
+// --- ordering
+exports.orderingValues = ["asc", "desc"];

package/dist/scripts/src/components/chart-color-schemes.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const colorSchemes = {
+    "set3": "set3",
+    "tableau10": "tableau10",
+    "brown_blueGreen": "brown_blueGreen",
+    "purpleRed_green": "purpleRed_green",
+    "pink_yellowGreen": "pink_yellowGreen",
+    "purple_orange": "purple_orange",
+    "red_blue": "red_blue",
+    "red_grey": "red_grey",
+    "red_yellow_blue": "red_yellow_blue",
+    "red_yellow_green": "red_yellow_green",
+    "spectral": "spectral",
+    "blues": "blues",
+    "greens": "greens",
+    "greys": "greys",
+    "oranges": "oranges",
+    "purples": "purples",
+    "reds": "reds",
+    "blue_green": "blue_green",
+    "blue_purple": "blue_purple",
+    "green_blue": "green_blue",
+    "orange_red": "orange_red",
+    "purple_blue_green": "purple_blue_green",
+    "purple_blue": "purple_blue",
+    "purple_red": "purple_red",
+    "red_purple": "red_purple",
+    "yellow_green_blue": "yellow_green_blue",
+    "yellow_green": "yellow_green",
+    "yellow_orange_brown": "yellow_orange_brown",
+    "yellow_orange_red": "yellow_orange_red",
+    "nivo": "nivo",
+    "category10": "category10",
+    "accent": "accent",
+    "dark2": "dark2",
+    "paired": "paired",
+    "pastel1": "pastel1",
+    "pastel2": "pastel2",
+    "set1": "set1",
+    "set2": "set2"
+};
+exports.default = colorSchemes;

package/dist/scripts/src/components/component-utils.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUrlWithQueryParams = createUrlWithQueryParams;
+const lodash_es_1 = require("lodash-es");
+/**
+ * Maps a record of query params to a usable local URL path with the params appended at the end
+ * @param to Either a simple URL endpoint or a URL path with query params (corresponds to a href)
+ */
+function createUrlWithQueryParams(to) {
+    if (!to || typeof to === "string" || typeof to === "number") {
+        return to;
+    }
+    if (to.queryParams !== undefined) {
+        return Object.assign(Object.assign({}, to), { search: new URLSearchParams((0, lodash_es_1.omitBy)(to.queryParams, lodash_es_1.isUndefined)).toString() });
+    }
+    return to;
+}

package/dist/scripts/src/components/container-helpers.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MemoizedItem = 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");
+exports.MemoizedItem = (0, react_1.memo)(({ node, item, context, renderChild, layoutContext, contextVars = constants_1.EMPTY_OBJECT, itemKey = "$item", contextKey = "$context", }) => {
+    const shallowMemoedContextVars = (0, hooks_1.useShallowCompareMemoize)(contextVars);
+    const nodeWithItem = (0, react_1.useMemo)(() => {
+        if (itemKey === contextKey) {
+            return {
+                type: "Container",
+                contextVars: Object.assign({ [itemKey]: Object.assign(Object.assign({}, item), context) }, shallowMemoedContextVars),
+                children: Array.isArray(node) ? node : [node],
+            };
+        }
+        return {
+            type: "Container",
+            contextVars: Object.assign({ [itemKey]: item, [contextKey]: context }, shallowMemoedContextVars),
+            children: Array.isArray(node) ? node : [node],
+        };
+    }, [context, item, node, shallowMemoedContextVars]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(nodeWithItem, layoutContext) });
+});