xmlui 0.4.0

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

@@ -0,0 +1,205 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.hSplitterComponentRenderer = exports.vSplitterComponentRenderer = exports.splitterComponentRenderer = exports.Splitter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const react_1 = __importStar(require("react"));
+const misc_1 = require("@components-core/utils/misc");
+const EngineError_1 = require("@components-core/EngineError");
+const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const constants_1 = require("@components-core/constants");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const utils_1 = require("@components/Splitter/utils");
+const Splitter = ({ initialPrimarySize = "50%", minPrimarySize = "0%", maxPrimarySize = "100%", orientation = "vertical", children, layout, swapped = false, floating = false, splitterTemplate, resize = constants_1.noop, }) => {
+    const panels = (0, react_1.useMemo)(() => (swapped ? react_1.default.Children.toArray(children).reverse() : react_1.default.Children.toArray(children)), [children, swapped]);
+    const [size, setSize] = (0, react_1.useState)(0);
+    const [splitter, setSplitter] = (0, react_1.useState)(null);
+    const [resizerVisible, setResizerVisible] = (0, react_1.useState)(false);
+    const [resizer, setResizer] = (0, react_1.useState)(null);
+    const [floatingResizer, setFloatingResizer] = (0, react_1.useState)(null);
+    const resizerElement = (0, react_1.useMemo)(() => (floating ? floatingResizer : resizer), [floating, resizer, floatingResizer]);
+    (0, react_1.useEffect)(() => {
+        if (splitter) {
+            const containerSize = orientation === "horizontal" ? splitter.getBoundingClientRect().width : splitter.getBoundingClientRect().height;
+            const initialParsedSize = (0, utils_1.parseSize)(initialPrimarySize, containerSize);
+            setSize(initialParsedSize);
+            if (resize) {
+                resize([
+                    (0, utils_1.toPercentage)(initialParsedSize, containerSize),
+                    (0, utils_1.toPercentage)(containerSize - initialParsedSize, containerSize),
+                ]);
+            }
+        }
+    }, [initialPrimarySize, orientation, resize, splitter]);
+    (0, react_1.useEffect)(() => {
+        const handleMouseMove = (event) => {
+            if (splitter && resizerElement) {
+                const containerSize = orientation === "horizontal"
+                    ? splitter.getBoundingClientRect().width
+                    : splitter.getBoundingClientRect().height;
+                const newSize = orientation === "horizontal"
+                    ? Math.min(Math.max(event.clientX - splitter.getBoundingClientRect().left, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize))
+                    : Math.min(Math.max(event.clientY - splitter.getBoundingClientRect().top, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize));
+                setSize(newSize);
+                if (resize) {
+                    resize([(0, utils_1.toPercentage)(newSize, containerSize), (0, utils_1.toPercentage)(containerSize - newSize, containerSize)]);
+                }
+            }
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+        const handleMouseDown = () => {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+        };
+        if (resizerElement) {
+            resizerElement.addEventListener("mousedown", handleMouseDown);
+        }
+        return () => {
+            if (resizerElement) {
+                resizerElement.removeEventListener("mousedown", handleMouseDown);
+            }
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [minPrimarySize, maxPrimarySize, orientation, resize, floating, resizerElement, splitter]);
+    (0, react_1.useEffect)(() => {
+        const watchResizer = (event) => {
+            const cursorPosition = orientation === "horizontal" ? event.clientX : event.clientY;
+            if (splitter) {
+                const paneStart = orientation === "horizontal" ? splitter.getBoundingClientRect().left : splitter.getBoundingClientRect().top;
+                const resizerPosition = paneStart + size;
+                // Check if the cursor is near the resizer (within 20 pixels)
+                if (cursorPosition > resizerPosition - 20 && cursorPosition < resizerPosition + 20) {
+                    setResizerVisible(true);
+                }
+                else {
+                    setResizerVisible(false);
+                }
+            }
+        };
+        if (splitter) {
+            splitter.addEventListener("mousemove", watchResizer);
+            splitter.addEventListener("mouseleave", () => setResizerVisible(false));
+        }
+        return () => {
+            if (splitter) {
+                splitter.removeEventListener("mouseleave", () => setResizerVisible(false));
+                splitter.removeEventListener("mousemove", watchResizer);
+            }
+        };
+    }, [size, orientation, splitter]);
+    (0, react_1.useEffect)(() => {
+        if (floatingResizer) {
+            floatingResizer.style.opacity = resizerVisible ? "1" : "0";
+        }
+    }, [floatingResizer, resizerVisible]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (s) => setSplitter(s), className: (0, classnames_1.default)(Splitter_module_scss_1.default.splitter, {
+            [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
+            [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
+        }), style: layout, children: panels.length > 1 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { flexBasis: size }, className: Splitter_module_scss_1.default.primaryPanel, children: panels[0] }), !floating && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Splitter_module_scss_1.default.resizer, {
+                        [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
+                        [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
+                    }), ref: (r) => setResizer(r), children: splitterTemplate })), (0, jsx_runtime_1.jsx)("div", { className: Splitter_module_scss_1.default.secondaryPanel, children: panels[1] }), floating && ((0, jsx_runtime_1.jsx)("div", { ref: (fr) => setFloatingResizer(fr), className: (0, classnames_1.default)(Splitter_module_scss_1.default.floatingResizer, {
+                        [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
+                        [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
+                    }), style: {
+                        top: orientation === "horizontal" ? 0 : size,
+                        left: orientation === "horizontal" ? size : 0,
+                    }, children: splitterTemplate }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (panels === null || panels === void 0 ? void 0 : panels[0]) && (0, jsx_runtime_1.jsx)("div", { className: Splitter_module_scss_1.default.panel, children: panels[0] }) })) }));
+};
+exports.Splitter = Splitter;
+const metadata = {
+    displayName: "Splitter",
+    description: "A component displaying its children in a card",
+    props: {
+        orientation: (0, descriptorHelper_1.desc)("The orientation of the splitter"),
+        swapped: (0, descriptorHelper_1.desc)("Whether the primary and secondary panes are swapped"),
+        splitterTemplate: (0, descriptorHelper_1.desc)("The template to display in the splitter"),
+        initialPrimarySize: (0, descriptorHelper_1.desc)("The initial width/height of the primary pane"),
+        minPrimarySize: (0, descriptorHelper_1.desc)("The minimum width/height of the primary pane"),
+        maxPrimarySize: (0, descriptorHelper_1.desc)("The maximum width/height of the primary pane"),
+        floating: (0, descriptorHelper_1.desc)("Whether the splitter is invisible"),
+    },
+    events: {
+        resize: (0, descriptorHelper_1.desc)("Fires when the splitter is resized"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Splitter_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-resizer-Splitter": "$color-bg-Card",
+        "thickness-resizer-Splitter": "5px",
+        "cursor-resizer-horizontal-Splitter": "ew-resize",
+        "cursor-resizer-vertical-Splitter": "ns-resize",
+    },
+};
+const DEFAULT_ORIENTATION = "vertical";
+function renderSplitter(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { node, extractValue, layoutNonCss, layoutCss, renderChild, lookupEventHandler, orientation = (_b = layoutNonCss.orientation) !== null && _b !== void 0 ? _b : DEFAULT_ORIENTATION, } = _a;
+    if (!(0, misc_1.isComponentDefChildren)(node.children)) {
+        throw new EngineError_1.NotAComponentDefError();
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.Splitter, { layout: layoutCss, swapped: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.swapped), orientation: orientation, splitterTemplate: renderChild((_d = node.props) === null || _d === void 0 ? void 0 : _d.splitterTemplate), initialPrimarySize: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.initialPrimarySize), minPrimarySize: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.minPrimarySize), maxPrimarySize: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.maxPrimarySize), floating: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.floating), resize: lookupEventHandler("resize"), children: renderChild(node.children) }));
+}
+exports.splitterComponentRenderer = (0, renderers_1.createComponentRenderer)("Splitter", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderSplitter({
+        node,
+        extractValue,
+        layoutCss,
+        layoutNonCss,
+        renderChild,
+        lookupEventHandler,
+    });
+}, metadata);
+exports.vSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("VSplitter", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderSplitter({
+        node,
+        extractValue,
+        layoutCss,
+        layoutNonCss,
+        renderChild,
+        orientation: "vertical",
+        lookupEventHandler,
+    });
+}, metadata);
+exports.hSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("HSplitter", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderSplitter({
+        node,
+        extractValue,
+        layoutCss,
+        layoutNonCss,
+        renderChild,
+        orientation: "horizontal",
+        lookupEventHandler,
+    });
+}, metadata);

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPercentage = exports.parseSize = void 0;
+const parseSize = (size, containerSize) => {
+    if (size.endsWith('px')) {
+        return parseInt(size, 10);
+    }
+    else if (size.endsWith('%')) {
+        return (parseInt(size, 10) / 100) * containerSize;
+    }
+    throw new Error('Invalid size format. Use px or %.');
+};
+exports.parseSize = parseSize;
+const toPercentage = (size, containerSize) => {
+    return (size / containerSize) * 100;
+};
+exports.toPercentage = toPercentage;

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

@@ -0,0 +1,117 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = exports.chStackComponentRenderer = exports.cvStackComponentRenderer = exports.hStackComponentRenderer = exports.vStackComponentRenderer = exports.stackComponentRenderer = 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 Stack_module_scss_1 = __importDefault(require("./Stack.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const misc_1 = require("@components-core/utils/misc");
+const component_hooks_1 = require("@components-core/component-hooks");
+const EngineError_1 = require("@components-core/EngineError");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const hooks_1 = require("@components-core/utils/hooks");
+const metadata = {
+    displayName: "Stack",
+    description: "A layout container of horizontally or vertically stacked content",
+    props: {
+        orientation: (0, descriptorHelper_1.desc)("The layout orientation of the component - works similarly to a CSS flexbox"),
+        reverse: (0, descriptorHelper_1.desc)("Should reverse the order of child elements?"),
+    },
+    events: {
+        click: (0, descriptorHelper_1.desc)("The stack is clicked"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Stack_module_scss_1.default.themeVars),
+};
+const DEFAULT_ORIENTATION = "vertical";
+function renderStack({ node, layoutNonCss, extractValue, layoutCss, lookupEventHandler, renderChild, orientation = layoutNonCss.orientation || DEFAULT_ORIENTATION, horizontalAlignment = layoutNonCss.horizontalAlignment, verticalAlignment = layoutNonCss.verticalAlignment, }) {
+    var _a, _b, _c;
+    if (!(0, misc_1.isComponentDefChildren)(node.children)) {
+        throw new EngineError_1.NotAComponentDefError();
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.Stack, { orientation: orientation, horizontalAlignment: horizontalAlignment, verticalAlignment: verticalAlignment, reverse: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.reverse), hoverContainer: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.hoverContainer), visibleOnHover: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.visibleOnHover), layout: layoutCss, onMount: lookupEventHandler("mounted"), children: renderChild(node.children, {
+            type: "Stack",
+            orientation,
+        }) }));
+}
+exports.stackComponentRenderer = (0, renderers_1.createComponentRenderer)("Stack", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({ node, layoutNonCss, extractValue, layoutCss, lookupEventHandler, renderChild });
+}, metadata);
+exports.vStackComponentRenderer = (0, renderers_1.createComponentRenderer)("VStack", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "vertical",
+    });
+}, metadata);
+exports.hStackComponentRenderer = (0, renderers_1.createComponentRenderer)("HStack", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "horizontal",
+    });
+}, metadata);
+exports.cvStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CVStack", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "vertical",
+        horizontalAlignment: "center",
+        verticalAlignment: "center",
+    });
+}, metadata);
+exports.chStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CHStack", ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "horizontal",
+        horizontalAlignment: "center",
+        verticalAlignment: "center",
+    });
+}, metadata);
+// =====================================================================================================================
+// Stack React component
+exports.Stack = (0, react_1.forwardRef)(function Stack(_a, ref) {
+    var { uid, children, orientation = DEFAULT_ORIENTATION, horizontalAlignment, verticalAlignment, layout, reverse, hoverContainer, visibleOnHover, onClick, onMount } = _a, rest = __rest(_a, ["uid", "children", "orientation", "horizontalAlignment", "verticalAlignment", "layout", "reverse", "hoverContainer", "visibleOnHover", "onClick", "onMount"]);
+    (0, hooks_1.useOnMount)(onMount);
+    const { horizontal, vertical } = (0, component_hooks_1.useContentAlignment)(orientation, horizontalAlignment, verticalAlignment);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { onClick: onClick, ref: ref, style: layout, className: (0, classnames_1.default)(Stack_module_scss_1.default.base, {
+            [Stack_module_scss_1.default.vertical]: orientation === "vertical",
+            [Stack_module_scss_1.default.horizontal]: orientation === "horizontal",
+            [Stack_module_scss_1.default.reverse]: reverse,
+            [Stack_module_scss_1.default.hoverContainer]: hoverContainer,
+            "display-on-hover": visibleOnHover,
+            [Stack_module_scss_1.default.handlesClick]: !!onClick,
+        }, horizontal !== null && horizontal !== void 0 ? horizontal : "", vertical !== null && vertical !== void 0 ? vertical : ""), children: children })));
+});

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

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stickyBoxComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+function StickyBox({ children, uid, layout, to }) {
+    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",
+            [StickyBox_module_scss_1.default.bottom]: to === "bottom",
+        }), style: layout, children: children }));
+}
+const metadata = {
+    displayName: "StickyBox",
+    description: "Provides a container that sticks to the top or bottom of the screen.",
+    props: {
+        to: (0, descriptorHelper_1.desc)("Position to anchor the sticky box (top, bottom)"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(StickyBox_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-StickyBox": "$color-bg",
+    },
+};
+exports.stickyBoxComponentRenderer = (0, renderers_1.createComponentRenderer)("StickyBox", ({ node, renderChild, extractValue, layoutCss }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(StickyBox, { uid: node.uid, layout: layoutCss, to: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.to), children: renderChild(node.children) }));
+}, metadata);

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

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const input_abstractions_1 = require("../Input/input-abstractions");
+const renderers_1 = require("@components-core/renderers");
+const Toggle_1 = require("@components/Toggle/Toggle");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const Toggle_module_scss_1 = __importDefault(require("@components/Toggle/Toggle.module.scss"));
+const metadata = {
+    displayName: "Switch",
+    description: "Display a switch that represents a true or false value",
+    props: {
+        initialValue: (0, descriptorHelper_1.desc)("The initial value of the checkbox"),
+        readOnly: (0, descriptorHelper_1.desc)("Is the input field in read only mode"),
+    },
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-border-checked-Switch-error": "$color-border-Switch-error",
+        "color-bg-checked-Switch-error": "$color-border-Switch-error",
+        "color-border-checked-Switch-warning": "$color-border-Switch-warning",
+        "color-bg-checked-Switch-warning": "$color-border-Switch-warning",
+        "color-border-checked-Switch-success": "$color-border-Switch-success",
+        "color-bg-checked-Switch-success": "$color-border-Switch-success",
+        light: {
+            "color-bg-Switch": "$color-surface-400",
+            "color-border-Switch": "$color-surface-400",
+            "color-bg-indicator-Switch": "$color-bg-primary",
+            "color-border-checked-Switch": "$color-primary-500",
+            "color-bg-checked-Switch": "$color-primary-500",
+            "color-bg-Switch--disabled": "$color-surface-200",
+        },
+        dark: {
+            "color-bg-Switch": "$color-surface-500",
+            "color-border-Switch": "$color-surface-500",
+            "color-bg-indicator-Switch": "$color-bg-primary",
+            "color-border-checked-Switch": "$color-primary-400",
+            "color-bg-checked-Switch": "$color-primary-400",
+            "color-bg-Switch--disabled": "$color-surface-800",
+        },
+    },
+};
+exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)("Switch", ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue) || false, value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), variant: "switch", registerComponentApi: registerComponentApi }));
+}, metadata);