xmlui 0.7.14 → 0.7.16

package/dist/scripts/src/components/BarChart/BarChartNative.js

@@ -0,0 +1,176 @@
+"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.BarChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const chart_color_schemes_1 = __importDefault(require("@components/chart-color-schemes"));
+const hooks_1 = require("@components-core/utils/hooks");
+const ResponsiveBar = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("@nivo/bar"))).then((module) => ({ default: module.ResponsiveBar })));
+const BarChart = ({ data, keys = [], groupMode = "grouped", layout = "vertical", indexBy = "id", style, }) => {
+    console.log(keys, data);
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
+    const colors = (0, hooks_1.useColors)({
+        name: "color-text-BarChart",
+        format: "hex",
+    }, {
+        name: "color-ticks-BarChart",
+        format: "hex",
+    }, {
+        name: "color-bg-tooltip-BarChart",
+        format: "hex",
+    }, {
+        name: "color-text-tooltip-BarChart",
+        format: "hex",
+    }, {
+        name: "color-axis-BarChart",
+        format: "hex",
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ResponsiveBar, { data: data, keys: keys, layout: layout, groupMode: groupMode, theme: {
+                    background: "transparent",
+                    text: {
+                        fontSize: 11,
+                        fill: colors["color-text-BarChart"],
+                        outlineWidth: 0,
+                        outlineColor: "transparent",
+                    },
+                    axis: {
+                        domain: {
+                            line: {
+                                stroke: colors["color-axis-BarChart"],
+                                strokeWidth: 1,
+                            },
+                        },
+                        legend: {
+                            text: {
+                                fontSize: 12,
+                                fill: colors["border-color-BarChart"],
+                                outlineWidth: 0,
+                                outlineColor: "transparent",
+                            },
+                        },
+                        ticks: {
+                            line: {
+                                stroke: "#777777",
+                                strokeWidth: 1,
+                            },
+                            text: {
+                                fontSize: 11,
+                                fill: colors["color-ticks-BarChart"],
+                                outlineWidth: 0,
+                                outlineColor: "transparent",
+                            },
+                        },
+                    },
+                    grid: {
+                        line: {
+                            stroke: "#dddddd",
+                            strokeWidth: 1,
+                        },
+                    },
+                    legends: {
+                        title: {
+                            text: {
+                                fontSize: 11,
+                                fill: "#333333",
+                                outlineWidth: 0,
+                                outlineColor: "transparent",
+                            },
+                        },
+                        text: {
+                            fontSize: 11,
+                            fill: "#333333",
+                            outlineWidth: 0,
+                            outlineColor: "transparent",
+                        },
+                        ticks: {
+                            line: {},
+                            text: {
+                                fontSize: 10,
+                                fill: "#333333",
+                                outlineWidth: 0,
+                                outlineColor: "transparent",
+                            },
+                        },
+                    },
+                    annotations: {
+                        text: {
+                            fontSize: 13,
+                            fill: "#333333",
+                            outlineWidth: 2,
+                            outlineColor: "#ffffff",
+                            outlineOpacity: 1,
+                        },
+                        link: {
+                            stroke: "#000000",
+                            strokeWidth: 1,
+                            outlineWidth: 2,
+                            outlineColor: "#ffffff",
+                            outlineOpacity: 1,
+                        },
+                        outline: {
+                            stroke: "#000000",
+                            strokeWidth: 2,
+                            outlineWidth: 2,
+                            outlineColor: "#ffffff",
+                            outlineOpacity: 1,
+                        },
+                        symbol: {
+                            fill: "#000000",
+                            outlineWidth: 2,
+                            outlineColor: "#ffffff",
+                            outlineOpacity: 1,
+                        },
+                    },
+                    tooltip: {
+                        wrapper: {},
+                        container: {
+                            background: colors["color-bg-tooltip-BarChart"],
+                            color: colors["color-text-tooltip-BarChart"],
+                            fontSize: 12,
+                        },
+                        basic: {},
+                        chip: {},
+                        table: {},
+                        tableCell: {},
+                        tableCellValue: {},
+                    },
+                }, borderWidth: 1, borderColor: { from: "color", modifiers: [["darker", 0.2]] }, indexBy: indexBy, margin: { top: 10, bottom: 40, left: 60 }, padding: 0.3, valueScale: { type: "linear" }, indexScale: { type: "band", round: true }, colors: { scheme: chart_color_schemes_1.default[getThemeVar("scheme-BarChart") || "nivo"] }, axisTop: null, axisRight: null, labelSkipWidth: 12, labelSkipHeight: 12, role: "application" }) }) }));
+};
+exports.BarChart = BarChart;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bookmarkComponentRenderer = exports.BookmarkMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const BookmarkNative_1 = require("./BookmarkNative");
+const COMP = "Bookmark";
+exports.BookmarkMd = (0, ComponentDefs_1.createMetadata)({
+    description: `As its name suggests, this component places a bookmark into its parent component's view. The ` +
+        `component has an \`id\` that you can use in links to navigate (scroll to) the bookmark's location.`,
+    opaque: true,
+    props: {
+        id: (0, ComponentDefs_1.d)(`The unique identifier of the bookmark. You can use this identifier in links to navigate ` +
+            `to this component's location.`),
+        level: (0, ComponentDefs_1.d)(`The level of the bookmark. The level is used to determine the bookmark's ` +
+            `position in the table of contents.`),
+    },
+});
+exports.bookmarkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BookmarkMd, (rendererContext) => {
+    const { node, renderChild, extractValue, layoutContext } = rendererContext;
+    return ((0, jsx_runtime_1.jsx)(BookmarkNative_1.Bookmark, { uid: extractValue(node.uid), level: extractValue(node.props.level), children: renderChild(node.children, layoutContext) }));
+});

package/dist/scripts/src/components/Bookmark/BookmarkNative.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bookmark = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TableOfContentsContext_1 = require("@components-core/TableOfContentsContext");
+const Bookmark = ({ uid, level, children }) => {
+    const elementRef = (0, react_1.useRef)(null);
+    const tableOfContentsContext = (0, react_1.useContext)(TableOfContentsContext_1.TableOfContentsContext);
+    const registerHeading = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.registerHeading;
+    const observeIntersection = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.observeIntersection;
+    (0, react_1.useEffect)(() => {
+        if (observeIntersection && elementRef.current && uid) {
+            return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
+                id: uid,
+                level,
+                text: uid,
+                anchor: elementRef.current,
+            });
+        }
+    }, [uid, observeIntersection, registerHeading, level]);
+    return ((0, jsx_runtime_1.jsx)("span", { ref: elementRef, id: uid, children: children }));
+};
+exports.Bookmark = Bookmark;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breakoutComponentRenderer = exports.BreakoutMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BreakoutNative_1 = require("./BreakoutNative");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const COMP = "Breakout";
+exports.BreakoutMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component creates a breakout section. It allows its child to ` +
+        `occupy the entire width of the UI even if the app or the parent container constrains ` +
+        `the maximum content width.`,
+});
+exports.breakoutComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BreakoutMd, ({ node, renderChild }) => {
+    return (0, jsx_runtime_1.jsx)(BreakoutNative_1.Breakout, { children: renderChild(node.children) });
+});

package/dist/scripts/src/components/Breakout/BreakoutNative.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breakout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Breakout_module_scss_1 = __importDefault(require("./Breakout.module.scss"));
+const Breakout = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { className: Breakout_module_scss_1.default.breakout, children: children });
+};
+exports.Breakout = Breakout;

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

@@ -0,0 +1,142 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonComponentRenderer = exports.ButtonMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const abstractions_1 = require("@components/abstractions");
+const IconNative_1 = require("@components/Icon/IconNative");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ButtonNative_1 = require("./ButtonNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Button";
+exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
+    description: `Button is an interactive element that triggers an action when clicked.`,
+    status: "stable",
+    props: {
+        autoFocus: (0, ComponentDefs_1.d)("Indicates if the button should receive focus when the page loads.", null, "boolean", false),
+        variant: (0, ComponentDefs_1.d)("The button variant determines the level of emphasis the button should possess.", abstractions_1.buttonVariantMd, "string", "solid"),
+        themeColor: (0, ComponentDefs_1.d)("Sets the button color scheme defined in the application theme.", abstractions_1.buttonThemeMd, "string", "primary"),
+        size: (0, ComponentDefs_1.d)("The size of the button.", abstractions_1.sizeMd, "string", "sm"),
+        label: (0, ComponentDefs_1.d)(`This property is an optional string to set a label for the ${COMP}. If no label is ` +
+            `specified and an icon is set, the ${COMP} will modify its styling to look like a ` +
+            `small icon button. When the ${COMP} has nested children, it will display them and ` +
+            `ignore the value of the \`label\` prop.`),
+        type: (0, ComponentDefs_1.d)(`This optional string describes how the ${COMP} appears in an HTML context. You ` +
+            `rarely need to set this property explicitly.`, abstractions_1.buttonTypesMd, "string", abstractions_1.defaultButtonType),
+        enabled: (0, ComponentDefs_1.d)(`The value of this property indicates whether the button accepts actions (\`true\`) ` +
+            `or does not react to them (\`false\`).`, null, null, true),
+        icon: (0, ComponentDefs_1.d)(`This string value denotes an icon name. The framework will render an icon if XMLUI ` +
+            `recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP} ` +
+            `displays only that icon.`),
+        iconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the icon in the ${COMP}.`, abstractions_1.iconPositionMd, "string", "start"),
+        contentPosition: (0, ComponentDefs_1.d)(`This optional value determines how the label and icon (or nested children) should be placed` +
+            `inside the ${COMP} component.`, abstractions_1.alignmentOptionMd, "string", "center"),
+    },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Button_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`width-${COMP}`]: "fit-content",
+        [`height-${COMP}`]: "fit-content",
+        [`radius-${COMP}`]: "$radius",
+        [`font-size-${COMP}`]: "$font-size-small",
+        [`font-weight-${COMP}`]: "$font-weight-medium",
+        [`color-bg-${COMP}-primary`]: "$color-primary-500",
+        [`color-bg-${COMP}-attention`]: "$color-bg-attention",
+        [`color-border-${COMP}-attention`]: "$color-attention",
+        [`color-bg-${COMP}--disabled`]: "$color-bg--disabled",
+        [`color-border-${COMP}--disabled`]: "$color-border--disabled",
+        [`style-border-${COMP}`]: "solid",
+        [`color-text-${COMP}--disabled`]: "$color-text--disabled",
+        [`color-outline-${COMP}--focus`]: "$color-outline--focus",
+        [`thickness-border-${COMP}`]: "1px",
+        [`thickness-outline-${COMP}--focus`]: "$thickness-outline--focus",
+        [`style-outline-${COMP}--focus`]: "$style-outline--focus",
+        [`offset-outline-${COMP}--focus`]: "$offset-outline--focus",
+        [`padding-horizontal-${COMP}-xs`]: "$space-1",
+        [`padding-vertical-${COMP}-xs`]: "$space-0_5",
+        [`padding-horizontal-${COMP}-sm`]: "$space-4",
+        [`padding-vertical-${COMP}-sm`]: "$space-2",
+        [`padding-horizontal-${COMP}-md`]: "$space-4",
+        [`padding-vertical-${COMP}-md`]: "$space-3",
+        [`padding-horizontal-${COMP}-lg`]: "$space-5",
+        [`padding-vertical-${COMP}-lg`]: "$space-4",
+        light: {
+            [`color-text-${COMP}`]: "$color-surface-950",
+            [`color-text-${COMP}-solid`]: "$color-surface-50",
+            [`color-border-${COMP}-primary`]: "$color-primary-500",
+            [`color-bg-${COMP}-primary--hover`]: "$color-primary-400",
+            [`color-bg-${COMP}-primary--active`]: "$color-primary-500",
+            [`color-bg-${COMP}-primary-outlined--hover`]: "$color-primary-50",
+            [`color-bg-${COMP}-primary-outlined--active`]: "$color-primary-100",
+            [`color-border-${COMP}-primary-outlined`]: "$color-primary-600",
+            [`color-border-${COMP}-primary-outlined--hover`]: "$color-primary-500",
+            [`color-text-${COMP}-primary-outlined`]: "$color-primary-900",
+            [`color-text-${COMP}-primary-outlined--hover`]: "$color-primary-950",
+            [`color-text-${COMP}-primary-outlined--active`]: "$color-primary-900",
+            [`color-bg-${COMP}-primary-ghost--hover`]: "$color-primary-50",
+            [`color-bg-${COMP}-primary-ghost--active`]: "$color-primary-100",
+            [`color-border-${COMP}-secondary`]: "$color-secondary-100",
+            [`color-bg-${COMP}-secondary`]: "$color-secondary-500",
+            [`color-bg-${COMP}-secondary--hover`]: "$color-secondary-400",
+            [`color-bg-${COMP}-secondary--active`]: "$color-secondary-500",
+            [`color-bg-${COMP}-secondary-outlined--hover`]: "$color-secondary-50",
+            [`color-bg-${COMP}-secondary-outlined--active`]: "$color-secondary-100",
+            [`color-bg-${COMP}-secondary-ghost--hover`]: "$color-secondary-100",
+            [`color-bg-${COMP}-secondary-ghost--active`]: "$color-secondary-100",
+            [`color-bg-${COMP}-attention--hover`]: "$color-danger-400",
+            [`color-bg-${COMP}-attention--active`]: "$color-danger-500",
+            [`color-bg-${COMP}-attention-outlined--hover`]: "$color-danger-50",
+            [`color-bg-${COMP}-attention-outlined--active`]: "$color-danger-100",
+            [`color-bg-${COMP}-attention-ghost--hover`]: "$color-danger-50",
+            [`color-bg-${COMP}-attention-ghost--active`]: "$color-danger-100",
+        },
+        dark: {
+            [`color-text-${COMP}`]: "$color-surface-50",
+            [`color-text-${COMP}-solid`]: "$color-surface-50",
+            [`color-border-${COMP}-primary`]: "$color-primary-500",
+            [`color-bg-${COMP}-primary--hover`]: "$color-primary-600",
+            [`color-bg-${COMP}-primary--active`]: "$color-primary-500",
+            [`color-bg-${COMP}-primary-outlined--hover`]: "$color-primary-900",
+            [`color-bg-${COMP}-primary-outlined--active`]: "$color-primary-950",
+            [`color-border-${COMP}-primary-outlined`]: "$color-primary-600",
+            [`color-border-${COMP}-primary-outlined--hover`]: "$color-primary-500",
+            [`color-text-${COMP}-primary-outlined`]: "$color-primary-100",
+            [`color-text-${COMP}-primary-outlined--hover`]: "$color-primary-50",
+            [`color-text-${COMP}-primary-outlined--active`]: "$color-primary-100",
+            [`color-bg-${COMP}-primary-ghost--hover`]: "$color-primary-900",
+            [`color-bg-${COMP}-primary-ghost--active`]: "$color-primary-950",
+            [`color-border-${COMP}-secondary`]: "$color-secondary-500",
+            [`color-bg-${COMP}-secondary`]: "$color-secondary-500",
+            [`color-bg-${COMP}-secondary--hover`]: "$color-secondary-400",
+            [`color-bg-${COMP}-secondary--active`]: "$color-secondary-500",
+            [`color-bg-${COMP}-secondary-outlined--hover`]: "$color-secondary-600",
+            [`color-bg-${COMP}-secondary-outlined--active`]: "$color-secondary-500",
+            [`color-bg-${COMP}-secondary-ghost--hover`]: "$color-secondary-900",
+            [`color-bg-${COMP}-secondary-ghost--active`]: "$color-secondary-950",
+            [`color-bg-${COMP}-attention--hover`]: "$color-danger-400",
+            [`color-bg-${COMP}-attention--active`]: "$color-danger-500",
+            [`color-bg-${COMP}-attention-outlined--hover`]: "$color-danger-900",
+            [`color-bg-${COMP}-attention-outlined--active`]: "$color-danger-950",
+            [`color-bg-${COMP}-attention-ghost--hover`]: "$color-danger-900",
+            [`color-bg-${COMP}-attention-ghost--active`]: "$color-danger-950",
+        },
+    },
+});
+exports.buttonComponentRenderer = (0, renderers_1.createComponentRenderer)("Button", exports.ButtonMd, ({ node, extractValue, renderChild, lookupEventHandler, layoutCss }) => {
+    var _a;
+    const iconName = extractValue.asString(node.props.icon);
+    const label = extractValue.asDisplayText(node.props.label);
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: node.props.type, variant: extractValue(node.props.variant), themeColor: extractValue(node.props.themeColor), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), size: extractValue(node.props.size), icon: iconName && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName }), iconPosition: extractValue(node.props.iconPosition), contentPosition: extractValue(node.props.contentPosition), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), onClick: lookupEventHandler("click"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), style: layoutCss, children: renderChild(node.children, {
+            type: "Stack",
+            orientation: "horizontal"
+        }) || label }));
+});

package/dist/scripts/src/components/Button/ButtonNative.js

@@ -0,0 +1,88 @@
+"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.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const abstractions_1 = require("@components/abstractions");
+const react_1 = __importStar(require("react"));
+exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
+    var { id, type = abstractions_1.defaultButtonType, icon, iconPosition = "start", contentPosition = "center", orientation = "horizontal", variant = "solid", themeColor = "primary", size = "sm", disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus"]);
+    const innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => innerRef.current);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
+    const iconToLeft = iconPosition === "start";
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: innerRef, className: (0, classnames_1.default)(className, Button_module_scss_1.default.button, {
+            [Button_module_scss_1.default.buttonHorizontal]: orientation === "horizontal",
+            [Button_module_scss_1.default.buttonVertical]: orientation === "vertical",
+            [Button_module_scss_1.default.xs]: size === "xs",
+            [Button_module_scss_1.default.sm]: size === "sm",
+            [Button_module_scss_1.default.md]: size === "md",
+            [Button_module_scss_1.default.lg]: size === "lg",
+            [Button_module_scss_1.default.solidPrimary]: variant === "solid" && themeColor === "primary",
+            [Button_module_scss_1.default.solidSecondary]: variant === "solid" && themeColor === "secondary",
+            [Button_module_scss_1.default.solidAttention]: variant === "solid" && themeColor === "attention",
+            [Button_module_scss_1.default.outlinedPrimary]: variant === "outlined" && themeColor === "primary",
+            [Button_module_scss_1.default.outlinedSecondary]: variant === "outlined" && themeColor === "secondary",
+            [Button_module_scss_1.default.outlinedAttention]: variant === "outlined" && themeColor === "attention",
+            [Button_module_scss_1.default.ghostPrimary]: variant === "ghost" && themeColor === "primary",
+            [Button_module_scss_1.default.ghostSecondary]: variant === "ghost" && themeColor === "secondary",
+            [Button_module_scss_1.default.ghostAttention]: variant === "ghost" && themeColor === "attention",
+            [Button_module_scss_1.default.alignStart]: contentPosition === "start",
+            [Button_module_scss_1.default.alignEnd]: contentPosition === "end",
+        }), autoFocus: autoFocus, disabled: disabled, form: formId, style: style, onClick: onClick, onFocus: onFocus, onBlur: onBlur, children: [iconToLeft && icon, children, !iconToLeft && icon] })));
+});

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

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonGroupComponentRenderer = exports.ButtonGroupMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ButtonGroup_module_scss_1 = __importDefault(require("./ButtonGroup.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ButtonGroupNative_1 = require("./ButtonGroupNative");
+const abstractions_1 = require("@components/abstractions");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "ButtonGroup";
+// See reference implementation here: https://getbootstrap.com/docs/5.3/components/button-group/
+// Use the same techinque for borders and radius as the Accordion component.
+exports.ButtonGroupMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component is a container that embeds buttons used ` +
+        `together for a particular reason. It provides a view that emphasizes this coherency.`,
+    props: {
+        themeColor: (0, ComponentDefs_1.d)(`This optional property specifies the default theme color for the buttons in the group. ` +
+            `Individual buttons may override this setting with their \`themeColor\` property.`, abstractions_1.buttonThemeMd, "string", "primary"),
+        variant: (0, ComponentDefs_1.d)(`This optional property specifies the default variant for the buttons in the group. ` +
+            `Individual buttons may override this setting with their \`variant\` property.`, abstractions_1.buttonVariantMd, "string", "solid"),
+        orientation: (0, metadata_helpers_1.dOrientation)("horizontal"),
+        buttonWidth: (0, ComponentDefs_1.d)(`When this optional property is set, all buttons within the group will have the ` +
+            `specified width. If it is empty, each button's width accommodates its content.`),
+        gap: (0, ComponentDefs_1.d)(`When this optional property is set, adjacent buttons will have the specified gap ` +
+            `between them. If this property is not set, the buttons will be merged into one group.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ButtonGroup_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        light: {},
+        dark: {},
+    },
+});
+exports.buttonGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ButtonGroupMd, ({}) => {
+    return (0, jsx_runtime_1.jsx)(ButtonGroupNative_1.ButtonGroup, {});
+});

package/dist/scripts/src/components/ButtonGroup/ButtonGroupNative.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup({}, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, style: { backgroundColor: "orangered", color: "white", padding: 2 }, children: "ButtonGroup component is not implemented yet" }));
+});

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

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardComponentRenderer = exports.CardMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const CardNative_1 = require("./CardNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const abstractions_1 = require("@components/abstractions");
+const COMP = "Card";
+exports.CardMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component is a container for cohesive elements, often rendered visually as a card.`,
+    props: {
+        avatarUrl: (0, ComponentDefs_1.d)(`Show the avatar (\`true\`) or not (\`false\`). If not specified, the ${COMP} will show the ` +
+            `first letters of the [\`title\`](#title).`),
+        showAvatar: (0, ComponentDefs_1.d)(`Indicates whether the ${COMP} should be displayed`, null, "boolean"),
+        title: (0, ComponentDefs_1.d)(`This prop sets the prestyled title.`),
+        subtitle: (0, ComponentDefs_1.d)(`This prop sets the prestyled subtitle.`),
+        linkTo: (0, ComponentDefs_1.d)(`This property wraps the title in a \`Link\` component that is clickable to navigate.`),
+        orientation: (0, ComponentDefs_1.d)(`An optional property that governs the ${COMP}'s orientation ` +
+            `(whether the ${COMP} lays out its children in a row or a column). ` +
+            `If the orientation is set to \`horizontal\`, the ${COMP} will display ` +
+            `its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`, abstractions_1.orientationOptionMd, "string", CardNative_1.DEFAULT_ORIENTATION),
+    },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Card_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`padding-horizontal-${COMP}`]: "$space-4",
+        [`padding-vertical-${COMP}`]: "$space-4",
+        [`padding-${COMP}`]: `$padding-vertical-${COMP} $padding-horizontal-${COMP}`,
+        [`color-border-${COMP}`]: "$color-border",
+        [`thickness-border-${COMP}`]: "1px",
+        [`style-border-${COMP}`]: "solid",
+        [`border-${COMP}`]: `$thickness-border-${COMP} $style-border-${COMP} $color-border-${COMP}`,
+        [`radius-${COMP}`]: "$radius",
+        [`shadow-${COMP}`]: "none",
+        light: {
+            [`color-bg-${COMP}`]: "white",
+        },
+        dark: {
+            [`color-bg-${COMP}`]: "$color-surface-900",
+        },
+    },
+});
+exports.cardComponentRenderer = (0, renderers_1.createComponentRenderer)("Card", exports.CardMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(CardNative_1.Card, { style: layoutCss, title: extractValue.asOptionalString(node.props.title), linkTo: extractValue.asOptionalString(node.props.linkTo), subtitle: extractValue.asOptionalString(node.props.subtitle), avatarUrl: extractValue.asOptionalString(node.props.avatarUrl), showAvatar: extractValue.asOptionalBoolean(node.props.showAvatar), orientation: extractValue.asOptionalString(node.props.orientation), children: renderChild(node.children, {
+            type: "Stack",
+            orientation: "vertical",
+        }) }));
+});

package/dist/scripts/src/components/Card/CardNative.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = exports.DEFAULT_ORIENTATION = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const react_1 = require("react");
+const AvatarNative_1 = require("@components/Avatar/AvatarNative");
+const LinkNative_1 = require("@components/Link/LinkNative");
+const HeadingNative_1 = require("@components/Heading/HeadingNative");
+const StackNative_1 = require("@components/Stack/StackNative");
+const TextNative_1 = require("@components/Text/TextNative");
+exports.DEFAULT_ORIENTATION = "vertical";
+exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.DEFAULT_ORIENTATION, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || false, onClick, }, forwardedRef) {
+    const titleProps = {
+        level: "h2",
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, className: (0, classnames_1.default)(Card_module_scss_1.default.wrapper, {
+            [Card_module_scss_1.default.isClickable]: !!onClick,
+            [Card_module_scss_1.default.vertical]: orientation === "vertical",
+            [Card_module_scss_1.default.horizontal]: orientation === "horizontal",
+        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: "1rem" }, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle })] })] })), children] }));
+});