xmlui 0.7.29 → 0.7.30

package/dist/xmlui.d.ts

@@ -443,7 +443,7 @@ export declare const Button: default_2.ForwardRefExoticComponent<{
     gap?: string | number;
     accessibilityProps?: any;
     autoFocus?: boolean;
-} & Pick<default_2.HTMLAttributes<HTMLButtonElement>, "className" | "onClick" | "tabIndex" | "aria-controls" | "aria-disabled" | "aria-expanded" | "aria-label" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave"> & default_2.RefAttributes<HTMLButtonElement>>;
+} & Pick<default_2.HTMLAttributes<HTMLButtonElement>, "className" | "onClick" | "aria-disabled" | "aria-label" | "aria-controls" | "aria-expanded" | "onFocus" | "onBlur" | "tabIndex" | "onMouseEnter" | "onMouseLeave"> & default_2.RefAttributes<HTMLButtonElement>>;
 
 declare type ButtonThemeColor = (typeof buttonThemeValues)[number];
 

package/dist/xmlui.mjs

@@ -1,4 +1,4 @@
-import { A as e, B as t, E as r, I as o, h as p, f as n, S as c, c as d, b as u, e as S, i as l, p as A, s as C, t as m, j as B, u as f } from "./index-B3eDGXIR.mjs";
+import { A as e, B as t, E as r, I as o, h as p, f as n, S as c, c as d, b as u, e as S, i as l, p as A, s as C, t as m, j as B, u as f } from "./index-_MjjtXKH.mjs";
 export {
   e as AppRoot,
   t as Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmlui",
-  "version": "0.7.29",
+  "version": "0.7.30",
   "sideEffects": false,
   "scripts": {
     "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/Icon/MoonIcon.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoonIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const moon_svg_react_1 = __importDefault(require("./svg/moon.svg?react"));
-const MoonIcon = (props) => ((0, jsx_runtime_1.jsx)(moon_svg_react_1.default, Object.assign({}, props)));
-exports.MoonIcon = MoonIcon;

package/dist/scripts/src/components/Icon/SunIcon.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SunIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const sun_svg_react_1 = __importDefault(require("./svg/sun.svg?react"));
-const SunIcon = (props) => ((0, jsx_runtime_1.jsx)(sun_svg_react_1.default, Object.assign({}, props)));
-exports.SunIcon = SunIcon;

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

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconInfoCardRenderer = exports.IconInfoCardMd = void 0;
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const compound_utils_1 = require("../../components-core/utils/compound-utils");
-// --- We cannot use this with nextra
-// import componentSource from "./IconInfoCard.xmlui?raw";
-const COMP = "IconInfoCard";
-exports.IconInfoCardMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    description: "This component displays an icon and some content in a card.",
-    props: {
-        height: (0, ComponentDefs_1.d)("The height of the card."),
-        iconBackgroundColor: (0, ComponentDefs_1.d)("The background color of the icon."),
-        iconName: (0, ComponentDefs_1.d)("The name of the icon to display."),
-    },
-});
-const componentSource = `
-<Component name="IconInfoCard">
-  <Card height="{$props.height}" width="{$props.width}">
-    <HStack verticalAlignment="center">
-      <CHStack 
-        backgroundColor="{$props.iconBackgroundColor}" 
-        color="white"
-        width="$space-10"
-        height="$space-10"
-        radius="$radius">
-        <Icon name="{$props.iconName}" size="$space-6"  />
-      </CHStack>
-      <VStack gap="0">
-        <Slot />
-      </VStack>
-    </HStack>
-  </Card>
-</Component>
-`;
-exports.iconInfoCardRenderer = {
-    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
-    metadata: exports.IconInfoCardMd,
-};

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

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageHeaderRenderer = exports.PageHeaderMd = void 0;
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const compound_utils_1 = require("../../components-core/utils/compound-utils");
-// --- We cannot use this with nextra
-// import componentSource from "./PageHeader.xmlui?raw";
-const COMP = "PageHeader";
-exports.PageHeaderMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    description: `The \`${COMP}\` component is a component that displays a title and an ` +
-        `optional pre-title. The pre-title is displayed above the title.`,
-    props: {
-        preTitle: (0, ComponentDefs_1.d)("The pre-title to display above the title."),
-        title: (0, ComponentDefs_1.d)("The title to display."),
-    },
-    defaultThemeVars: {
-        "gap-PageHeader": "$space-2",
-    },
-});
-const componentSource = `
-<Component name="PageHeader">
-  <HStack gap="$gap-PageHeader" verticalAlignment="center">
-    <VStack gap="$space-tight">
-      <Text when="{$props.preTitle !== undefined}" variant="subheading" value="{$props.preTitle}" />
-      <H2 value="{$props.title}" />
-    </VStack>
-    <SpaceFiller />
-    <Slot />
-  </HStack>
-</Component>
-`;
-exports.pageHeaderRenderer = {
-    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
-    metadata: exports.PageHeaderMd,
-};

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

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tableHeaderRenderer = exports.TableHeaderMd = void 0;
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const compound_utils_1 = require("../../components-core/utils/compound-utils");
-// --- We cannot use this with nextra
-//import componentSource from "./TableHeader.xmlui?raw";
-const COMP = "TableHeader";
-exports.TableHeaderMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    description: `The \`${COMP}\` component can be used within a \`Table\` to define a particular table ` +
-        `column's visual properties and data bindings.`,
-    props: {
-        title: (0, ComponentDefs_1.d)("The title of the table header."),
-    },
-    defaultThemeVars: {
-        [`padding-vertical-${COMP}`]: "$space-4",
-        [`padding-horizontal-${COMP}`]: "$space-5",
-    },
-});
-const componentSource = `
-<Component name="TableHeader">
-  <VStack 
-    verticalAlignment="center"
-    verticalPadding="$padding-vertical-TableHeader"
-    horizontalPadding="$padding-horizontal-TableHeader">
-    <Text variant="strong" value="{$props.title}"/>
-  </VStack>
-</Component>
-`;
-exports.tableHeaderRenderer = {
-    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
-    metadata: exports.TableHeaderMd,
-};

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

@@ -1,115 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeChangerButtonComponentRenderer = exports.ThemeChangerButtonMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const renderers_1 = require("../../components-core/renderers");
-const DropdownMenuNative_1 = require("../DropdownMenu/DropdownMenuNative");
-const ButtonNative_1 = require("../Button/ButtonNative");
-const ContentSeparatorNative_1 = require("../ContentSeparator/ContentSeparatorNative");
-const ModalDialogNative_1 = require("../ModalDialog/ModalDialogNative");
-const RadioGroupNative_1 = require("../RadioGroup/RadioGroupNative");
-const StackNative_1 = require("../Stack/StackNative");
-const TextNative_1 = require("../Text/TextNative");
-const IconNative_1 = require("../Icon/IconNative");
-const COMP = "ThemeChangerButton";
-exports.ThemeChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    docFolder: "ThemeChanger",
-    description: `The \`${COMP}\` component is a component that allows the user to change the theme of the app.`,
-    props: {
-        showSettings: (0, ComponentDefs_1.d)("This property indicates if the Settings function of this component is displayed.", null, "boolean", true),
-    },
-});
-/**
- * Define the renderer for the Button component
- */
-exports.themeChangerButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ThemeChangerButtonMd, ({ renderChild, node, extractValue }) => {
-    const [isThemeSettingsOpen, setThemeSettingsOpen] = (0, react_1.useState)(false);
-    const { activeThemeId, activeThemeTone, setActiveThemeId, setActiveThemeTone, availableThemeIds, } = (0, ThemeContext_1.useThemes)();
-    const renderPreview = (id) => {
-        return renderChild({
-            type: "Theme",
-            props: {
-                themeId: id,
-                width: "100%",
-                isRoot: "true",
-                tone: "{activeThemeTone}",
-            },
-            children: [
-                {
-                    type: "Card",
-                    props: {
-                        width: "100%",
-                    },
-                    children: [
-                        {
-                            type: "App",
-                            props: {
-                                width: "100%",
-                                height: "10rem",
-                                layout: "horizontal",
-                            },
-                            children: [
-                                {
-                                    type: "NavPanel",
-                                    props: {},
-                                    children: [
-                                        {
-                                            type: "NavLink",
-                                            props: {
-                                                active: "true",
-                                                url: "/",
-                                                label: "Home",
-                                            },
-                                        },
-                                        {
-                                            type: "NavLink",
-                                            props: {
-                                                url: "/about",
-                                                label: "About",
-                                            },
-                                        },
-                                        {
-                                            type: "NavLink",
-                                            props: {
-                                                url: "/contact",
-                                                label: "Contact",
-                                            },
-                                        },
-                                    ],
-                                },
-                                {
-                                    type: "Pages",
-                                    props: {
-                                        defaultRoute: "/",
-                                    },
-                                    children: [
-                                        {
-                                            type: "CVStack",
-                                            props: {
-                                                height: "100%",
-                                            },
-                                            children: [
-                                                {
-                                                    type: "Text",
-                                                    props: {
-                                                        value: "Hello",
-                                                    },
-                                                },
-                                            ],
-                                        },
-                                    ],
-                                },
-                            ],
-                        },
-                    ],
-                },
-            ],
-        });
-    };
-    const showSettings = extractValue.asOptionalBoolean(node.props.showSettings, true);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(DropdownMenuNative_1.DropdownMenu, { triggerTemplate: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "palette" }) }), children: [(0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { iconPosition: "end", icon: activeThemeTone === "light" ? (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "checkmark" }) : "", label: "Light", onClick: () => setActiveThemeTone("light") }), (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { iconPosition: "end", icon: activeThemeTone === "dark" ? (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "checkmark" }) : "", label: "Dark", onClick: () => setActiveThemeTone("dark") }), showSettings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ContentSeparatorNative_1.ContentSeparator, {}), (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { label: "Theme Settings", onClick: () => setThemeSettingsOpen(true) })] }))] }), isThemeSettingsOpen && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { isInitiallyOpen: true, onClose: () => setThemeSettingsOpen(false), children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "strong", layout: { marginBottom: "1rem" }, children: "Set theme" }), (0, jsx_runtime_1.jsx)(StackNative_1.Stack, { orientation: "vertical", style: { width: "100%", overflow: "scroll" }, children: (0, jsx_runtime_1.jsx)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: ".5rem", flexWrap: "wrap" }, children: availableThemeIds.map((themeUid) => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 0, width: "calc(50% - 0.5rem)" }, variant: activeThemeId === themeUid ? "solid" : "ghost", themeColor: "primary", onClick: () => setActiveThemeId(themeUid), children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { style: { width: "100%" }, children: [renderPreview(themeUid), (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: themeUid })] }) }, themeUid))) }) }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { minHeight: "fit-content" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "strong", layout: { marginBottom: "1rem" }, children: "Set tone" }), (0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { id: "toneSelector", value: activeThemeTone, onDidChange: (value) => setActiveThemeTone(value), children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { style: { gap: "1rem" }, orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroupOption, { label: "Light", value: "light" }), (0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroupOption, { label: "Dark", value: "dark" })] }) })] })] }) }))] }));
-});

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

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toolbarRenderer = exports.ToolbarMd = void 0;
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const compound_utils_1 = require("../../components-core/utils/compound-utils");
-// --- We cannot use this with nextra
-// import componentSource from "./Toolbar.xmlui?raw";
-const COMP = "Toolbar";
-exports.ToolbarMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    description: "This component is a container for a toolbar.",
-    props: {
-        alignment: (0, ComponentDefs_1.d)("The alignment of the toolbar."),
-    },
-    defaultThemeVars: {
-        "gap-Toolbar": "$space-2",
-    },
-});
-const componentSource = `
-<Component name="Toolbar">
-  <HStack 
-    gap="$gap-Toolbar" 
-    verticalAlignment="center"
-    horizontalAlignment="{$props.alignment ?? 'end' }">
-    <Slot />
-  </HStack>
-</Component>
-`;
-exports.toolbarRenderer = {
-    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
-    metadata: exports.ToolbarMd,
-};

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

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

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

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