xmlui 0.4.0

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appStateComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const hooks_1 = require("@components-core/utils/hooks");
+const AppStateContext_1 = require("@components/App/AppStateContext");
+function AppState({ bucket = "default", updateState, initialValue, registerComponentApi, }) {
+    const registerAppState = (0, AppStateContext_1.useAppStateContextPart)((value) => value.registerAppState);
+    const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (initialValue !== undefined) {
+            registerAppState(bucket, initialValue);
+        }
+    }, [bucket, initialValue, registerAppState]);
+    const value = (0, AppStateContext_1.useAppStateContextPart)((value) => value.appState[bucket]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        updateState({ value });
+    }, [updateState, value]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        registerComponentApi({
+            update: (patch) => update(bucket, patch),
+        });
+    }, [bucket, registerComponentApi, update]);
+    return null;
+}
+exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)("AppState", ({ node, extractValue, updateState, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(AppState, { bucket: extractValue(node.props.bucket), initialValue: extractValue(node.props.initialValue), updateState: updateState, registerComponentApi: registerComponentApi }));
+}, {});

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

@@ -0,0 +1,81 @@
+"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.avatarComponentRenderer = exports.Avatar = 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 Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+exports.Avatar = (0, react_1.forwardRef)(function Avatar(_a, ref) {
+    var { size = "sm", url, name, style, onClick } = _a, rest = __rest(_a, ["size", "url", "name", "style", "onClick"]);
+    let abbrev = null;
+    if (!url && !!name) {
+        abbrev = name
+            .trim()
+            .split(" ")
+            .filter((word) => !!word.trim().length)
+            .map((word) => word[0].toUpperCase())
+            .slice(0, 3);
+    }
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(Avatar_module_scss_1.default.container, {
+            [Avatar_module_scss_1.default.xs]: size === "xs",
+            [Avatar_module_scss_1.default.sm]: size === "sm",
+            [Avatar_module_scss_1.default.md]: size === "md",
+            [Avatar_module_scss_1.default.lg]: size === "lg",
+            [Avatar_module_scss_1.default.clickable]: !!onClick,
+        }), style: Object.assign({ backgroundImage: url ? `url(${url})` : "none" }, style), onClick: onClick, children: abbrev })));
+});
+const AvatarSizeKeys = ["xs", "sm", "md", "lg"];
+const metadata = {
+    displayName: "Avatar",
+    description: "Display an avatar associated with an entity",
+    props: {
+        size: (0, descriptorHelper_1.desc)("Size of the avatar (xs, sm, md, or lg)"),
+        name: (0, descriptorHelper_1.desc)("Name to extract the first letters of words as avatar text"),
+        url: (0, descriptorHelper_1.desc)("Url of the avatar image"),
+    },
+    events: {
+        click: (0, descriptorHelper_1.desc)("Triggers when the avatar is clicked"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Avatar_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "radius-Avatar": "50%",
+        "thickness-border-Avatar": "1px",
+        "style-border-Avatar": "solid",
+        "border-Avatar": "$thickness-border-Avatar $style-border-Avatar $color-border-Avatar",
+        "shadow-Avatar": "$shadow",
+        "color-text-Avatar": "$color-text-secondary",
+        "font-weight-Avatar": "$font-weight-bold",
+        light: {
+            "color-bg-Avatar": "$color-surface-100",
+            "color-border-Avatar": "$color-surface-400A80",
+        },
+        dark: {
+            "color-bg-Avatar": "$color-surface-800",
+            "color-border-Avatar": "$color-surface-700",
+        },
+    },
+};
+/**
+ * This function defines the renderer for the Avatar component.
+ */
+exports.avatarComponentRenderer = (0, renderers_1.createComponentRenderer)("Avatar", ({ node, extractValue, lookupEventHandler, layoutCss, extractResourceUrl }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(exports.Avatar, { size: (_a = node.props) === null || _a === void 0 ? void 0 : _a.size, url: extractResourceUrl(node.props.url), name: extractValue(node.props.name), style: layoutCss }));
+}, metadata);

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Badge_module_scss_1 = __importDefault(require("./Badge.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 Badge = ({ value, color, variant = "badge" }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ [Badge_module_scss_1.default.badge]: variant === "badge", [Badge_module_scss_1.default.pill]: variant === "pill" }), style: color
+            ? typeof color === "string"
+                ? { backgroundColor: color }
+                : { backgroundColor: color.background, color: color.label }
+            : undefined, children: value }));
+};
+const metadata = {
+    displayName: "Badge",
+    description: "A label that accepts a color map the defines its background (and optionally, its label) color",
+    props: {
+        value: (0, descriptorHelper_1.desc)("The label value"),
+        variant: (0, descriptorHelper_1.desc)("The style variant of the component"),
+        colorMap: (0, descriptorHelper_1.desc)("A key-value collection, where the value is either a color for the background" +
+            "or for both the background and the label as well. If provided and accessed, it takes " +
+            "precedence of both default values and theme overrides."),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Badge_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "padding-horizontal-Badge": "$space-2",
+        "padding-vertical-Badge": "$space-0_5",
+        "padding-Badge": "$padding-vertical-Badge $padding-horizontal-Badge",
+        "padding-Badge-pill": "$padding-vertical-Badge-pill $padding-horizontal-Badge-pill",
+        "radius-Badge": "4px",
+        "font-size-Badge": "$font-size-normal",
+        "font-size-Badge-pill": "$font-size-normal",
+        "font-weight-Badge": "$font-weight-bold",
+        "font-weight-Badge-pill": "$font-weight-normal",
+        light: {
+            "color-bg-Badge": "$color-primary-500",
+            "color-text-Badge": "$color-surface-50",
+        },
+        dark: {
+            "color-bg-Badge": "$color-primary-500",
+            "color-text-Badge": "$color-surface-50",
+        }
+    },
+};
+exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)("Badge", ({ node, extractValue }) => {
+    var _a;
+    const value = extractValue(node.props.value);
+    const colorMap = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.colorMap);
+    return (0, jsx_runtime_1.jsx)(Badge, { variant: extractValue(node.props.variant), value: value, color: colorMap === null || colorMap === void 0 ? void 0 : colorMap[value] });
+}, metadata);

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

@@ -0,0 +1,199 @@
+"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.barChartComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const PieChart_module_scss_1 = __importDefault(require("@components/PieChart/PieChart.module.scss"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const renderers_1 = require("@components-core/renderers");
+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" }) }) }));
+};
+const metadata = {
+    displayName: "BarChart",
+    description: "A bar chart component",
+    props: {
+        data: (0, descriptorHelper_1.desc)("The data to be displayed in the bar chart"),
+        keys: (0, descriptorHelper_1.desc)("The keys to be used in the bar chart"),
+        groupMode: (0, descriptorHelper_1.desc)("The group mode of the bar chart"),
+        layout: (0, descriptorHelper_1.desc)("The layout of the bar chart"),
+        indexBy: (0, descriptorHelper_1.desc)("The index to be used in the bar chart"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PieChart_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "scheme-BarChart": "pastel1",
+        "color-text-BarChart": "$color-text-secondary",
+        "color-ticks-BarChart": "$color-text-primary",
+        "color-bg-tooltip-BarChart": "$color-bg-primary",
+        "color-text-tooltip-BarChart": "$color-text-primary",
+        "color-axis-BarChart": "$color-text-primary",
+        light: {
+            "scheme-BarChart": "set3",
+        },
+        dark: {
+            "scheme-BarChart": "dark2",
+        },
+    },
+};
+exports.barChartComponentRenderer = (0, renderers_1.createComponentRenderer)("BarChart", ({ extractValue, node, layoutCss }) => {
+    var _a, _b, _c, _d, _e;
+    return ((0, jsx_runtime_1.jsx)(BarChart, { style: layoutCss, data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), keys: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.keys), groupMode: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.groupMode), layout: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.layout), indexBy: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.indexBy) }));
+}, metadata);

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bookmarkComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+exports.bookmarkComponentRenderer = (0, renderers_1.createComponentRenderer)("Bookmark", (rendererContext) => {
+    const { node, renderChild, extractValue, layoutContext } = rendererContext;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { id: extractValue(node.uid), style: { width: 0, height: 0 } }), renderChild(node.children, layoutContext)] }));
+}, {
+    opaque: true,
+});

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

@@ -0,0 +1,196 @@
+"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 __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.buttonComponentRenderer = exports.buttonStylingProps = exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Icon_1 = require("@components/Icon/Icon");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
+    var { id, type = "button", icon, iconPosition = "left", contentPosition = "center", orientation = "horizontal", variant = "solid", themeColor = "primary", size = "sm", disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus, title } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus", "title"]);
+    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 === "left" || iconPosition === "start";
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, title: title, 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] })));
+});
+exports.buttonStylingProps = {
+    variant: (0, descriptorHelper_1.desc)("The button variant (solid, outlined, ghost) to use"),
+    themeColor: (0, descriptorHelper_1.desc)("The button color scheme (primary, secondary, attention)"),
+    size: (0, descriptorHelper_1.desc)("The size of the button (small, medium, large)"),
+};
+// JSDoc-szerű leírás - szét kell választani a runtime cuccokat a statikus type-ok melletti kommentekből
+// A lényeg, hogy egy eszközzel kiszedjük a releváns metaadatokat
+const metadata = {
+    displayName: "Button",
+    // ref: description.mdx <- later
+    description: "Represent a button component, clicking of which triggers an action",
+    props: Object.assign(Object.assign({}, exports.buttonStylingProps), { label: (0, descriptorHelper_1.desc)("Specifies the optional text to display in the button. If omitted, children can be used to set " +
+            "the button's content."), 
+        // ref: filename.mdx
+        type: (0, descriptorHelper_1.desc)("The behavior type of the button"), 
+        // ref: filename.mdx
+        enabled: (0, descriptorHelper_1.desc)("Indicates if the button is enabled"), icon: (0, descriptorHelper_1.desc)("Optional icon ID to display the particular icon in the button"), iconPosition: (0, descriptorHelper_1.desc)("Position of the icon displayed in the button"), contentPosition: (0, descriptorHelper_1.desc)("Determines how the label and icon should be placed inside the Button component") }),
+    events: {
+        click: (0, descriptorHelper_1.desc)("Triggers when the button is clicked"),
+        gotFocus: (0, descriptorHelper_1.desc)("Triggers when he button is focused"),
+        lostFocus: (0, descriptorHelper_1.desc)("Triggers when the button has lost focus"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Button_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "width-Button": "fit-content",
+        "height-Button": "fit-content",
+        "radius-Button": "$radius",
+        "font-size-Button": "$font-size-normal",
+        "color-bg-Button-primary": "$color-primary-500",
+        "color-bg-Button-attention": "$color-bg-attention",
+        "color-border-Button-attention": "$color-attention",
+        "color-bg-Button--disabled": "$color-bg--disabled",
+        "color-border-Button--disabled": "$color-border--disabled",
+        "style-border-Button": "solid",
+        "color-text-Button--disabled": "$color-text--disabled",
+        "color-outline-Button--focus": "$color-outline--focus",
+        "thickness-outline-Button--focus": "$thickness-outline--focus",
+        "style-outline-Button--focus": "$style-outline--focus",
+        "offset-outline-Button--focus": "$offset-outline--focus",
+        "padding-horizontal-xs-Button": "$space-1",
+        "padding-vertical-xs-Button": "$space-0_5",
+        "padding-horizontal-sm-Button": "$space-4",
+        "padding-vertical-sm-Button": "$space-2",
+        "padding-horizontal-md-Button": "$space-4",
+        "padding-vertical-md-Button": "$space-3",
+        "padding-horizontal-lg-Button": "$space-5",
+        "padding-vertical-lg-Button": "$space-4",
+        light: {
+            "color-text-Button": "$color-surface-950",
+            "color-text-Button-solid": "$color-surface-50",
+            "color-border-Button-primary": "$color-primary-500",
+            "color-bg-Button-primary--hover": "$color-primary-400",
+            "color-bg-Button-primary--active": "$color-primary-500",
+            "color-bg-Button-primary-outlined--hover": "$color-primary-50",
+            "color-bg-Button-primary-outlined--active": "$color-primary-100",
+            "color-border-Button-primary-outlined": "$color-primary-600",
+            "color-border-Button-primary-outlined--hover": "$color-primary-500",
+            "color-text-Button-primary-outlined": "$color-primary-900",
+            "color-text-Button-primary-outlined--hover": "$color-primary-950",
+            "color-text-Button-primary-outlined--active": "$color-primary-900",
+            "color-bg-Button-primary-ghost--hover": "$color-primary-50",
+            "color-bg-Button-primary-ghost--active": "$color-primary-100",
+            "color-border-Button-secondary": "$color-secondary-500",
+            "color-bg-Button-secondary": "$color-secondary-500",
+            "color-bg-Button-secondary--hover": "$color-secondary-400",
+            "color-bg-Button-secondary--active": "$color-secondary-500",
+            "color-bg-Button-secondary-outlined--hover": "$color-secondary-50",
+            "color-bg-Button-secondary-outlined--active": "$color-secondary-100",
+            "color-bg-Button-secondary-ghost--hover": "$color-secondary-100",
+            "color-bg-Button-secondary-ghost--active": "$color-secondary-100",
+            "color-bg-Button-attention--hover": "$color-danger-400",
+            "color-bg-Button-attention--active": "$color-danger-500",
+            "color-bg-Button-attention-outlined--hover": "$color-danger-50",
+            "color-bg-Button-attention-outlined--active": "$color-danger-100",
+            "color-bg-Button-attention-ghost--hover": "$color-danger-50",
+            "color-bg-Button-attention-ghost--active": "$color-danger-100",
+        },
+        dark: {
+            "color-text-Button": "$color-surface-50",
+            "color-text-Button-solid": "$color-surface-50",
+            "color-border-Button-primary": "$color-primary-500",
+            "color-bg-Button-primary--hover": "$color-primary-600",
+            "color-bg-Button-primary--active": "$color-primary-500",
+            "color-bg-Button-primary-outlined--hover": "$color-primary-900",
+            "color-bg-Button-primary-outlined--active": "$color-primary-950",
+            "color-border-Button-primary-outlined": "$color-primary-600",
+            "color-border-Button-primary-outlined--hover": "$color-primary-500",
+            "color-text-Button-primary-outlined": "$color-primary-100",
+            "color-text-Button-primary-outlined--hover": "$color-primary-50",
+            "color-text-Button-primary-outlined--active": "$color-primary-100",
+            "color-bg-Button-primary-ghost--hover": "$color-primary-900",
+            "color-bg-Button-primary-ghost--active": "$color-primary-950",
+            "color-border-Button-secondary": "$color-secondary-500",
+            "color-bg-Button-secondary": "$color-secondary-500",
+            "color-bg-Button-secondary--hover": "$color-secondary-400",
+            "color-bg-Button-secondary--active": "$color-secondary-500",
+            "color-bg-Button-secondary-outlined--hover": "$color-secondary-600",
+            "color-bg-Button-secondary-outlined--active": "$color-secondary-500",
+            "color-bg-Button-secondary-ghost--hover": "$color-secondary-900",
+            "color-bg-Button-secondary-ghost--active": "$color-secondary-950",
+            "color-bg-Button-attention--hover": "$color-danger-400",
+            "color-bg-Button-attention--active": "$color-danger-500",
+            "color-bg-Button-attention-outlined--hover": "$color-danger-900",
+            "color-bg-Button-attention-outlined--active": "$color-danger-950",
+            "color-bg-Button-attention-ghost--hover": "$color-danger-900",
+            "color-bg-Button-attention-ghost--active": "$color-danger-950",
+        },
+    },
+};
+exports.buttonComponentRenderer = (0, renderers_1.createComponentRenderer)("Button", ({ node, extractValue, renderChild, lookupEventHandler, lookupAction, layoutCss }) => {
+    var _a, _b, _c;
+    const iconName = extractValue.asString(node.props.icon);
+    const label = extractValue.asDisplayText(node.props.label);
+    return ((0, jsx_runtime_1.jsx)(exports.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)(Icon_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), onFocus: lookupAction((_b = node.events) === null || _b === void 0 ? void 0 : _b.gotFocus), onBlur: lookupAction((_c = node.events) === null || _c === void 0 ? void 0 : _c.lostFocus), title: extractValue(node.props.title), style: layoutCss, children: renderChild(node.children) || label }));
+}, metadata);

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

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardComponentRenderer = void 0;
+exports.Card = Card;
+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 renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const Avatar_1 = require("@components/Avatar/Avatar");
+const Link_1 = require("@components/Link/Link");
+const Heading_1 = require("@components/Heading/Heading");
+const Stack_1 = require("@components/Stack/Stack");
+const Text_1 = require("@components/Text/Text");
+function Card({ children, style, title, subTitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || false, onClick, }) {
+    const titleProps = {
+        level: "h2",
+        layout: { marginTop: 0, marginBottom: "4px" },
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Card_module_scss_1.default.wrapper, { [Card_module_scss_1.default.isClickable]: !!onClick }), style: style, onClick: onClick, children: [[title, subTitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "horizontal", verticalAlignment: "center", layout: { gap: "1rem" }, children: [showAvatar && (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { url: avatarUrl, name: title }), (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "vertical", children: [linkTo ? ((0, jsx_runtime_1.jsx)(Link_1.LocalLink, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(Heading_1.Heading, Object.assign({}, titleProps, { children: title })) })) : ((0, jsx_runtime_1.jsx)(Heading_1.Heading, Object.assign({}, titleProps, { children: title }))), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "small", children: subTitle })] })] })), children] }));
+}
+const metadata = {
+    displayName: "Card",
+    description: "A component displaying its children in a card",
+    props: {
+        avatarUrl: (0, descriptorHelper_1.desc)("The URL of the avatar to display"),
+        showAvatar: (0, descriptorHelper_1.desc)("Indicates whether the avatar should be displayed"),
+        title: (0, descriptorHelper_1.desc)("A prestyled title"),
+        subTitle: (0, descriptorHelper_1.desc)("A prestyled subtitle"),
+        linkTo: (0, descriptorHelper_1.desc)("Optional link for the title"),
+    },
+    events: {
+        click: (0, descriptorHelper_1.desc)("The card is clicked"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Card_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "padding-horizontal-Card": "$space-4",
+        "padding-vertical-Card": "$space-4",
+        "padding-Card": "$padding-vertical-Card $padding-horizontal-Card",
+        "color-border-Card": "$color-border",
+        "thickness-border-Card": "1px",
+        "style-border-Card": "solid",
+        "border-Card": "$thickness-border-Card $style-border-Card $color-border-Card",
+        "radius-Cars": "$radius",
+        "shadow-Card": "none",
+        light: {
+            "color-bg-Card": "white",
+        },
+        dark: {
+            "color-bg-Card": "$color-surface-900",
+        },
+    },
+};
+exports.cardComponentRenderer = (0, renderers_1.createComponentRenderer)("Card", ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(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), children: renderChild(node.children, {
+            // Since the card is a flex container, it's children should behave the same as in a stack
+            // (e.g. starsizing works in this case)
+            type: "Stack",
+            orientation: "vertical",
+        }) }));
+}, metadata);