xmlui 0.7.13 → 0.7.15

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.carouselComponentRenderer = exports.CarouselMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const CarouselNative_1 = require("./CarouselNative");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const Carousel_module_scss_1 = __importDefault(require("@components/Carousel/Carousel.module.scss"));
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Carousel";
+exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: `This component displays a slideshow by cycling through elements (images, text, or ` +
+        `custom slides) like a carousel.`,
+    props: {
+        orientation: (0, ComponentDefs_1.d)("This property indicates the orientation of the carousel. The `horizontal` value indicates that the carousel moves horizontally, and the `vertical` value indicates that the carousel moves vertically.", ["horizontal", "vertical"], null, "horizontal"),
+        indicators: (0, ComponentDefs_1.d)("This property indicates whether the carousel displays the indicators.", null, null, "true"),
+        controls: (0, ComponentDefs_1.d)("This property indicates whether the carousel displays the controls.", null, null, "true"),
+        autoplay: (0, ComponentDefs_1.d)("This property indicates whether the carousel automatically scrolls.", null, null, "false"),
+        loop: (0, ComponentDefs_1.d)("This property indicates whether the carousel loops.", null, null, "false"),
+        startIndex: (0, ComponentDefs_1.d)("This property indicates the index of the first slide to display.", null, null, "0"),
+        prevIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the previous control."),
+        nextIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the next control."),
+        keyboard: (0, ComponentDefs_1.d)("This property indicates whether the carousel responds to keyboard events."),
+    },
+    events: {
+        displayDidChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        canScrollPrev: (0, ComponentDefs_1.d)("This method returns `true` if the carousel can scroll to the previous slide."),
+        canScrollNext: (0, ComponentDefs_1.d)("This method returns `true` if the carousel can scroll to the next slide."),
+        scrollTo: (0, ComponentDefs_1.d)("This method scrolls the carousel to the specified slide index."),
+        scrollPrev: (0, ComponentDefs_1.d)("This method scrolls the carousel to the previous slide."),
+        scrollNext: (0, ComponentDefs_1.d)("This method scrolls the carousel to the next slide."),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Carousel_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-control-${COMP}`]: "$color-primary",
+        [`color-text-control-${COMP}`]: "$color-primary",
+        [`color-bg-control-hover-${COMP}`]: "$color-primary",
+        [`color-text-control-hover-${COMP}`]: "$color-primary",
+        [`color-bg-control-active-${COMP}`]: "$color-primary",
+        [`color-bg-control-disabled-${COMP}`]: "$color-surface-200",
+        [`color-text-control-disabled-${COMP}`]: "$color-text-disabled",
+        [`color-text-control-active-${COMP}`]: "$color-primary",
+        [`color-bg-indicator-${COMP}`]: "$color-surface-200",
+        [`color-bg-indicator-active-${COMP}`]: "$color-primary",
+        [`color-text-indicator-${COMP}`]: "$color-primary",
+        [`color-text-indicator-active-${COMP}`]: "$color-primary",
+        [`color-bg-indicator-hover-${COMP}`]: "$color-surface-200",
+        [`color-text-indicator-hover-${COMP}`]: "$color-primary",
+        [`width-indicator-${COMP}`]: "25px",
+        [`height-indicator-${COMP}`]: "6px",
+        [`height-control-${COMP}`]: "36px",
+        [`width-control-${COMP}`]: "36px",
+        [`radius-control-${COMP}`]: "50%",
+        [`height-${COMP}`]: "100%",
+        [`width-${COMP}`]: "100%",
+    },
+});
+exports.carouselComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselMd, ({ node, renderChild, layoutCss, extractValue, lookupEventHandler, registerComponentApi }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ((0, jsx_runtime_1.jsx)(CarouselNative_1.CarouselComponent, { style: layoutCss, indicators: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.indicators), controls: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.controls), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), onDisplayDidChange: lookupEventHandler("displayDidChange"), autoplay: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoplay), registerComponentApi: registerComponentApi, loop: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.loop), startIndex: extractValue.asOptionalNumber((_f = node.props) === null || _f === void 0 ? void 0 : _f.startIndex), prevIcon: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.prevIcon), nextIcon: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.nextIcon), keyboard: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.keyboard), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/Carousel/CarouselItem.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.carouselItemComponentRenderer = exports.CarouselItemMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const CarouselItemNative_1 = require("@components/Carousel/CarouselItemNative");
+const COMP = "CarouselItem";
+exports.CarouselItemMd = (0, ComponentDefs_1.createMetadata)({});
+exports.carouselItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselItemMd, (rendererContext) => {
+    const { node, renderChild } = rendererContext;
+    return (0, jsx_runtime_1.jsx)(CarouselItemNative_1.CarouselItemComponent, { content: renderChild(node.children, {
+            type: "Stack",
+            orientation: "vertical",
+        }) });
+});

package/dist/scripts/src/components/Carousel/CarouselItemNative.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselItemComponent = 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 Carousel_module_scss_1 = __importDefault(require("@components/Carousel/Carousel.module.scss"));
+exports.CarouselItemComponent = (0, react_1.forwardRef)(function CarouselItemComponent({ content, style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, ref: forwardedRef, role: "group", "aria-roledescription": "slide", className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselItem), children: (0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.innerWrapper, children: content }) }));
+});

package/dist/scripts/src/components/Carousel/CarouselNative.js

@@ -0,0 +1,163 @@
+"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.CarouselComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const embla_carousel_react_1 = __importDefault(require("embla-carousel-react"));
+const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss"));
+const react_1 = require("react");
+const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
+const constants_1 = require("@components-core/constants");
+const embla_carousel_autoplay_1 = __importDefault(require("embla-carousel-autoplay"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = "horizontal", children, style, indicators = true, onDisplayDidChange = constants_1.noop, autoplay = false, controls = true, loop = false, startIndex = 0, prevIcon, nextIcon, registerComponentApi, }, forwardedRef) {
+    const referenceElement = (0, react_1.useRef)(null);
+    const [activeSlide, setActiveSlide] = (0, react_1.useState)(0);
+    const [plugins, setPlugins] = (0, react_1.useState)([]);
+    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
+    const [carouselRef, api] = (0, embla_carousel_react_1.default)({
+        axis: orientation === "horizontal" ? "x" : "y",
+        loop,
+        startIndex,
+    }, plugins);
+    const prevIconName = prevIcon || orientation === "horizontal" ? "arrowleft" : "arrowup";
+    const nextIconName = nextIcon || orientation === "horizontal" ? "arrowright" : "arrowdown";
+    (0, react_1.useEffect)(() => {
+        if (autoplay) {
+            setPlugins([(0, embla_carousel_autoplay_1.default)()]);
+        }
+    }, [autoplay]);
+    const toggleAutoplay = (0, react_1.useCallback)(() => {
+        var _a;
+        const autoplay = (_a = api === null || api === void 0 ? void 0 : api.plugins()) === null || _a === void 0 ? void 0 : _a.autoplay;
+        if (!autoplay)
+            return;
+        const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
+        playOrStop();
+    }, [api]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const autoplay = (_a = api === null || api === void 0 ? void 0 : api.plugins()) === null || _a === void 0 ? void 0 : _a.autoplay;
+        if (!autoplay)
+            return;
+        setIsPlaying(autoplay.isPlaying());
+        api
+            .on("autoplay:play", () => setIsPlaying(true))
+            .on("autoplay:stop", () => setIsPlaying(false))
+            .on("reInit", () => setIsPlaying(autoplay.isPlaying()));
+    }, [api]);
+    const scrollTo = (0, react_1.useCallback)((index) => {
+        api === null || api === void 0 ? void 0 : api.scrollTo(index);
+    }, [api]);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api) => {
+        if (!api) {
+            return;
+        }
+        const activeIndex = api.selectedScrollSnap();
+        onDisplayDidChange(activeIndex);
+        setActiveSlide(activeIndex);
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+    const scrollPrev = (0, react_1.useCallback)(() => {
+        if (api) {
+            api === null || api === void 0 ? void 0 : api.scrollPrev();
+        }
+    }, [api]);
+    const scrollNext = (0, react_1.useCallback)(() => {
+        api === null || api === void 0 ? void 0 : api.scrollNext();
+    }, [api]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (orientation === "horizontal") {
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                scrollPrev();
+            }
+            else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                scrollNext();
+            }
+        }
+        else {
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                scrollPrev();
+            }
+            else if (event.key === "ArrowDown") {
+                event.preventDefault();
+                scrollNext();
+            }
+        }
+    }, [scrollPrev, scrollNext]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            scrollTo,
+            scrollPrev,
+            scrollNext,
+            canScrollPrev: () => canScrollPrev,
+            canScrollNext: () => canScrollNext,
+        });
+    }, [registerComponentApi, scrollTo, scrollPrev, scrollNext, canScrollPrev, canScrollNext]);
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+        onSelect(api);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
+        return () => {
+            api === null || api === void 0 ? void 0 : api.off("select", onSelect);
+        };
+    }, [api, onSelect]);
+    (0, react_1.useEffect)(() => {
+        if (referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current) {
+            referenceElement.current.addEventListener("keydown", handleKeyDown);
+        }
+    }, [ref, handleKeyDown]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, ref: ref, className: (0, classnames_1.default)(Carousel_module_scss_1.default.carousel), role: "region", tabIndex: -1, "aria-roledescription": "carousel", children: [(0, jsx_runtime_1.jsx)("div", { ref: carouselRef, className: Carousel_module_scss_1.default.carouselContentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselContent, {
+                        [Carousel_module_scss_1.default.horizontal]: orientation === "horizontal",
+                        [Carousel_module_scss_1.default.vertical]: orientation === "vertical",
+                    }), children: children }) }), controls && ((0, jsx_runtime_1.jsxs)("div", { className: Carousel_module_scss_1.default.controls, children: [autoplay && ((0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: toggleAutoplay, children: isPlaying ? (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "pause" }) : (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "play" }) })), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, disabled: !canScrollPrev, onClick: scrollPrev, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: prevIconName }) }), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: scrollNext, disabled: !canScrollNext, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: nextIconName }) })] })), indicators && ((0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.indicators, children: React.Children.map(children, (_, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => scrollTo(index), className: (0, classnames_1.default)(Carousel_module_scss_1.default.indicator, {
+                        [Carousel_module_scss_1.default.active]: index === activeSlide,
+                    }), "aria-current": index === activeSlide }, index))) }))] }));
+});

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changeListenerComponentRenderer = exports.ChangeListenerMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const ChangeListenerNative_1 = require("./ChangeListenerNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "ChangeListener";
+exports.ChangeListenerMd = (0, ComponentDefs_1.createMetadata)({
+    description: `\`${COMP}\` is a functional component (it renders no UI) to trigger an action when a ` +
+        `particular value (component property, state, etc.) changes.`,
+    props: {
+        listenTo: (0, ComponentDefs_1.d)(`Value to the changes of which this component listens.`),
+        throttleWaitInMs: (0, ComponentDefs_1.d)(`This variable sets a throttling time (in milliseconds) to apply when executing the \`didChange\` ` +
+            `event handler. All changes within that throttling time will only fire the \`didChange\` event once.`),
+    },
+    events: {
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+});
+exports.changeListenerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ChangeListenerMd, ({ node, lookupEventHandler, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(ChangeListenerNative_1.ChangeListener, { listenTo: extractValue(node.props.listenTo), throttleWaitInMs: extractValue(node.props.throttleWaitInMs), onChange: lookupEventHandler("didChange") }));
+});

package/dist/scripts/src/components/ChangeListener/ChangeListenerNative.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeListener = ChangeListener;
+const react_1 = require("react");
+const lodash_es_1 = require("lodash-es");
+const hooks_1 = require("@components-core/utils/hooks");
+function ChangeListener({ listenTo, onChange, throttleWaitInMs = 0 }) {
+    const prevValue = (0, hooks_1.usePrevious)(listenTo);
+    const throttledOnChange = (0, react_1.useMemo)(() => {
+        if (throttleWaitInMs !== 0 && onChange) {
+            return (0, lodash_es_1.throttle)(onChange, throttleWaitInMs, {
+                leading: true,
+            });
+        }
+        return onChange;
+    }, [onChange, throttleWaitInMs]);
+    (0, react_1.useEffect)(() => {
+        if (throttledOnChange && !(0, lodash_es_1.isEqual)(prevValue, listenTo)) {
+            throttledOnChange === null || throttledOnChange === void 0 ? void 0 : throttledOnChange({
+                prevValue,
+                newValue: listenTo,
+            });
+        }
+    }, [listenTo, throttledOnChange, prevValue]);
+    return null;
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chartRenderer = exports.ChartMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const ChartNative_1 = require("./ChartNative");
+const COMP = "Chart";
+exports.ChartMd = (0, ComponentDefs_1.createMetadata)({
+    status: "deprecated",
+    description: "(**OBSOLETE**) A chart component",
+    props: {
+        type: (0, ComponentDefs_1.d)("(**OBSOLETE**)"),
+        labels: (0, ComponentDefs_1.d)("(**OBSOLETE**)"),
+        series: (0, ComponentDefs_1.d)("(**OBSOLETE**)"),
+        stacked: (0, ComponentDefs_1.d)("(**OBSOLETE**)"),
+        showAxisLabels: (0, ComponentDefs_1.d)("(**OBSOLETE**)"),
+        tooltipEnabled: (0, ComponentDefs_1.d)("(**OBSOLETE**)"),
+        showLegend: (0, ComponentDefs_1.d)("(**OBSOLETE**)"),
+    }
+});
+exports.chartRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ChartMd, ({ node, extractValue, lookupAction, layoutCss, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(ChartNative_1.Chart, { type: extractValue.asString(node.props.type), labels: extractValue(node.props.labels), series: extractValue(node.props.series), style: layoutCss, showLegend: extractValue.asOptionalBoolean(node.props.showLegend), stacked: extractValue.asOptionalBoolean(node.props.stacked), showAxisLabels: extractValue.asOptionalBoolean(node.props.showAxisLabels), tooltipEnabled: extractValue.asOptionalBoolean(node.props.tooltipEnabled) }));
+});

package/dist/scripts/src/components/Chart/ChartNative.js

@@ -0,0 +1,165 @@
+"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 __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.Chart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = __importStar(require("react"));
+const Chart_module_scss_1 = __importDefault(require("./Chart.module.scss"));
+const hooks_1 = require("@components-core/utils/hooks");
+const ApexChart = react_2.default.lazy(() => Promise.resolve().then(() => __importStar(require("react-apexcharts"))));
+const defaultOptions = {
+    chart: {
+        fontFamily: "inherit",
+        sparkline: {
+            enabled: false,
+        },
+        toolbar: {
+            show: false,
+        },
+        animations: {
+            enabled: false,
+            dynamicAnimation: {
+                enabled: true,
+            },
+            animateGradually: {
+                enabled: true,
+            },
+            speed: 300,
+        },
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    fill: {
+        //--> area
+        opacity: 0.16,
+        type: "solid",
+    },
+    stroke: {
+        // width: [2, 1],
+        // dashArray: [0, 3],
+        width: 2,
+        lineCap: "round",
+        curve: "smooth",
+    },
+    tooltip: {
+        // --> should come from themes
+        theme: "dark",
+    },
+    grid: {
+        strokeDashArray: 4,
+        padding: {
+            // top: -20,
+            right: 0,
+            left: -4,
+            bottom: -4,
+        },
+        xaxis: {
+            lines: {
+                show: true,
+            },
+        },
+    },
+    plotOptions: {
+        bar: {
+            columnWidth: "50%",
+        },
+    },
+    xaxis: {
+        labels: {
+        // padding: 0,
+        },
+        tooltip: {
+            enabled: false,
+        },
+        axisBorder: {
+            show: false,
+        },
+        type: "datetime",
+    },
+    yaxis: {
+        labels: {
+            padding: 4,
+        },
+    },
+    legend: {
+        show: false,
+    },
+};
+exports.Chart = (0, react_1.forwardRef)(function Chart({ type, labels, series, style, stacked, showAxisLabels = true, tooltipEnabled = true, showLegend = false, }, ref) {
+    const colors = (0, hooks_1.useColors)({
+        name: "color-primary-500",
+        format: "hex",
+    }, {
+        name: "color-primary-400",
+        format: "hex",
+    }, {
+        name: "color-primary-300",
+        format: "hex",
+    }, {
+        name: "color-primary-200",
+        format: "hex",
+    });
+    const { fill } = defaultOptions, restOptions = __rest(defaultOptions, ["fill"]);
+    const options = (0, react_2.useMemo)(() => {
+        let opts = Object.assign(Object.assign({}, restOptions), { chart: Object.assign(Object.assign({}, restOptions.chart), { stacked, sparkline: {
+                    enabled: !showAxisLabels,
+                } }), fill: type === "area" ? fill : {}, tooltip: Object.assign(Object.assign({}, defaultOptions.tooltip), { enabled: tooltipEnabled }), colors: Object.values(colors), labels: labels || [], legend: {
+                show: showLegend,
+            } });
+        if (!labels) {
+            delete opts.xaxis;
+        }
+        return opts;
+    }, [colors, fill, labels, restOptions, showAxisLabels, stacked, tooltipEnabled, type]);
+    return (
+    //   TODO illesg TEMP FLEX 1 STAR SIZING
+    (0, jsx_runtime_1.jsx)("div", { style: Object.assign({}, style), className: Chart_module_scss_1.default.wrapper, ref: ref, children: (0, jsx_runtime_1.jsx)(react_2.Suspense, { children: !!series && (0, jsx_runtime_1.jsx)(ApexChart, { options: options, type: type, series: series, height: "100%", width: "100%" }) }) }));
+});

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxComponentRenderer = exports.CheckboxMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Toggle_module_scss_1 = __importDefault(require("@components/Toggle/Toggle.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const Toggle_1 = require("@components/Toggle/Toggle");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Checkbox";
+exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
+    status: "stable",
+    description: `The \`${COMP}\` component allows users to make binary choices, typically between checked or ` +
+        `unchecked. It consists of a small box that can be toggled on or off by clicking on it.`,
+    props: {
+        indeterminate: (0, metadata_helpers_1.dIndeterminate)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        required: (0, metadata_helpers_1.dRequired)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(false),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        description: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
+            `of the ${COMP} besides its label.`),
+    },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        value: (0, metadata_helpers_1.dValueApi)(),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-border-checked-${COMP}-error`]: `$color-border-${COMP}-error`,
+        [`color-bg-checked-${COMP}-error`]: `$color-border-${COMP}-error`,
+        [`color-border-checked-${COMP}-warning`]: `$color-border-${COMP}-warning`,
+        [`color-bg-checked-${COMP}-warning`]: `$color-border-${COMP}-warning`,
+        [`color-border-checked-${COMP}-success`]: `$color-border-${COMP}-success`,
+        [`color-bg-checked-${COMP}-success`]: `$color-border-${COMP}-success`,
+        light: {
+            [`color-bg-indicator-${COMP}`]: "$color-bg-primary",
+            [`color-border-checked-${COMP}`]: "$color-primary-500",
+            [`color-bg-checked-${COMP}`]: "$color-primary-500",
+            [`color-bg-${COMP}--disabled`]: "$color-surface-200",
+        },
+        dark: {
+            [`color-bg-indicator-${COMP}`]: "$color-bg-primary",
+            [`color-border-checked-${COMP}`]: "$color-primary-400",
+            [`color-bg-checked-${COMP}`]: "$color-primary-400",
+            [`color-bg-${COMP}--disabled`]: "$color-surface-800",
+        },
+    },
+});
+exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CheckboxMd, ({ node, extractValue, layoutCss, updateState, lookupEventHandler, state, 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), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
+});

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columnComponentRenderer = exports.ColumnMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const ColumnNative_1 = require("./ColumnNative");
+const COMP = "Column";
+exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component can be used within a \`Table\` to define a particular table ` +
+        `column's visual properties and data bindings.`,
+    props: {
+        bindTo: (0, ComponentDefs_1.d)(`Indicates what part of the data to lay out in the column.`),
+        header: (0, ComponentDefs_1.d)(`Adds a label for a particular column.`),
+        width: (0, ComponentDefs_1.d)(`This property defines the width of the column. You can use a numeric value, a pixel ` +
+            `value (such as \`100px\`), or a star size value (such as \`*\`, \`2*\`, etc.). ` +
+            `You will get an error if you use any other unit (or value).`),
+        minWidth: (0, ComponentDefs_1.d)(`Indicates the minimum width a particular column can have.`),
+        maxWidth: (0, ComponentDefs_1.d)(`Indicates the maximum width a particular column can have.`),
+        canSort: (0, ComponentDefs_1.d)(`This property sets whether the user can sort by a column by clicking on its header ` +
+            `(\`true\`) or not (\`false\`).`),
+        pinTo: (0, ComponentDefs_1.d)(`This property allows the column to be pinned to ` +
+            `the \`left\` (left-to-right writing style) or \`right\` (left-to-right writing style) edge ` +
+            `of the table. If the writing style is right-to-left, the locations are switched.`, ["left", "right"], "string"),
+        canResize: (0, ComponentDefs_1.d)(`This property indicates whether the user can resize the column. If set to ` +
+            `\`true\`, the column can be resized by dragging the column border. If set to ` +
+            `\`false\`, the column cannot be resized. Double-clicking the column border ` +
+            `resets to the original size.`),
+    },
+});
+exports.columnComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ColumnMd, (rendererContext) => {
+    const { node, renderChild, extractValue, layoutCss } = rendererContext;
+    return ((0, jsx_runtime_1.jsx)(ColumnNative_1.Column, { style: layoutCss, header: extractValue.asDisplayText(node.props.header), accessorKey: extractValue.asOptionalString(node.props.bindTo), canSort: extractValue.asOptionalBoolean(node.props.canSort), canResize: extractValue.asOptionalBoolean(node.props.canResize), pinTo: extractValue.asOptionalString(node.props.pinTo), width: extractValue(node.props.width), minWidth: extractValue(node.props.minWidth), maxWidth: extractValue(node.props.maxWidth), nodeChildren: node.children, renderChild: renderChild, id: node.uid }));
+});

package/dist/scripts/src/components/Column/ColumnNative.js

@@ -0,0 +1,38 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = Column;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TableContext_1 = require("./TableContext");
+const react_1 = require("react");
+const container_helpers_1 = require("@components/container-helpers");
+function Column(_a) {
+    var { nodeChildren, renderChild } = _a, columnMetadata = __rest(_a, ["nodeChildren", "renderChild"]);
+    const id = (0, react_1.useId)();
+    const { registerColumn, unRegisterColumn } = (0, TableContext_1.useTableContext)();
+    const cellRenderer = (0, react_1.useCallback)((row) => {
+        return (0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: nodeChildren, item: row, renderChild: renderChild });
+    }, [nodeChildren, renderChild]);
+    const safeCellRenderer = (0, react_1.useMemo)(() => {
+        return nodeChildren ? cellRenderer : undefined;
+    }, [cellRenderer, nodeChildren]);
+    (0, react_1.useLayoutEffect)(() => {
+        registerColumn(Object.assign(Object.assign({}, columnMetadata), { cellRenderer: safeCellRenderer }), id);
+    }, [columnMetadata, id, registerColumn, safeCellRenderer]);
+    (0, react_1.useLayoutEffect)(() => {
+        return () => {
+            unRegisterColumn(id);
+        };
+    }, [id, unRegisterColumn]);
+    return null;
+}