xmlui 0.11.4 → 0.11.6

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

@@ -1,52 +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.imageComponentRenderer = exports.ImageMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const ImageNative_1 = require("./ImageNative");
-const COMP = "Image";
-exports.ImageMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Image` displays pictures from URLs or local sources with built-in responsive " +
-        "sizing, aspect ratio control, and accessibility features. It handles different " +
-        "image formats and provides options for lazy loading and click interactions.",
-    props: {
-        src: (0, metadata_helpers_1.d)("This property is used to indicate the source (path) of the image to display. " +
-            "When not defined, no image is displayed."),
-        data: (0, metadata_helpers_1.d)(`This property contains the binary data that represents the image.`),
-        alt: (0, metadata_helpers_1.d)(`This optional property specifies an alternate text for the image.`),
-        fit: {
-            description: "This property sets how the image content should be resized to fit its container.",
-            type: "string",
-            defaultValue: ImageNative_1.defaultProps.fit,
-        },
-        lazyLoad: {
-            description: `Lazy loading instructs the browser to load the image only when it is imminently needed ` +
-                `(e.g. user scrolls to it).`,
-            type: "boolean",
-            defaultValue: ImageNative_1.defaultProps.lazyLoad,
-        },
-        aspectRatio: (0, metadata_helpers_1.d)("This property sets a preferred aspect ratio for the image, which will be used in " +
-            "calculating auto sizes and other layout functions. If this value is not used, the " +
-            'original aspect ratio is kept. The value can be a number of a string (such as "16/9").'),
-        inline: {
-            description: `When set to true, the image will be displayed as an inline element instead of a block element.`,
-            type: "boolean",
-            defaultValue: ImageNative_1.defaultProps.inline,
-        },
-        animation: (0, metadata_helpers_1.dInternal)(`The optional animation object to be applied to the component`),
-    },
-    events: {
-        click: (0, metadata_helpers_1.dClick)(COMP),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Image_module_scss_1.default.themeVars),
-});
-exports.imageComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ImageMd, ({ node, extractValue, className, extractResourceUrl }) => {
-    return ((0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: node.props.src ? extractResourceUrl(node.props.src) : undefined, imageData: extractValue(node.props.data), alt: extractValue(node.props.alt), fit: extractValue(node.props.fit), lazyLoad: extractValue.asOptionalBoolean(node.props.lazyLoad), inline: extractValue.asOptionalBoolean(node.props.inline), aspectRatio: extractValue(node.props.aspectRatio), className: className, animation: extractValue(node.props.animation) }));
-});

package/dist/scripts/src/components/Image/Image.spec.js

@@ -1,198 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("displays image with valid src", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveAttribute("src", "/resources/test-image-100x100.jpg");
-    }));
-    (0, fixtures_1.test)("displays image with valid data property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" data="/resources/test-image-100x100.jpg" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toBeVisible();
-        // Check that the src attribute contains a blob URL when using data property
-        // The Image component fetches the binary data and passes it as a Blob to ImageNative,
-        // which creates a blob URL and sets it as the src attribute
-        const img = page.getByTestId("img");
-        yield (0, fixtures_1.expect)(img).toHaveAttribute("src", /blob:/);
-    }));
-    (0, fixtures_1.test)("handles invalid src gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/non/existent/bad/url.jpg" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveAttribute("src", "/non/existent/bad/url.jpg");
-    }));
-    (0, fixtures_1.test)("alt text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image alt="test text for alt" src="/non/existent/bad/url.jpg" />`);
-        yield (0, fixtures_1.expect)(page.getByAltText("test text for alt")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles undefined alt", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).not.toHaveAttribute("alt");
-    }));
-    (0, fixtures_1.test)("handles long unicode alt text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Image
-        testId="img" alt="👨‍👩‍👧‍👦 Family photo with unicode characters 中文测试"
-        src="/resources/test-image-100x100.jpg"
-      />
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveAttribute("alt", "👨‍👩‍👧‍👦 Family photo with unicode characters 中文测试");
-    }));
-    (0, fixtures_1.test)(`fit="contain"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-        <HStack width="300px" height="200px" >
-          <Image testId="img" src="/resources/test-image-100x100.jpg" fit="contain" />
-        </HStack>
-      `);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("object-fit", "contain");
-    }));
-    (0, fixtures_1.test)(`fit="cover"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-        <HStack width="300px" height="200px" >
-          <Image testId="img" src="/resources/test-image-100x100.jpg" fit="cover" />
-        </HStack>
-      `);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("object-fit", "cover");
-    }));
-    (0, fixtures_1.test)("handles invalid fit value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" fit="invalid" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("object-fit", "contain");
-    }));
-    (0, fixtures_1.test)("lazy loading enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" lazyLoad="true" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveAttribute("loading", "lazy");
-    }));
-    (0, fixtures_1.test)("lazy loading disabled (default)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveAttribute("loading", "eager");
-    }));
-    (0, fixtures_1.test)("lazy loading explicitly disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" lazyLoad="false" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveAttribute("loading", "eager");
-    }));
-    (0, fixtures_1.test)("applies aspect ratio as number", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" aspectRatio="1.5" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("aspect-ratio", "1.5 / 1");
-    }));
-    (0, fixtures_1.test)("applies aspect ratio as string fraction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" aspectRatio="16/9" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("aspect-ratio", "16 / 9");
-    }));
-    (0, fixtures_1.test)("inline display when true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" inline="true" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("display", "inline");
-    }));
-    (0, fixtures_1.test)("block display when false (default)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" inline="false" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).not.toHaveCSS("display", "inline");
-    }));
-});
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has correct role when clickable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-        <Image testId="img" src="/resources/test-image-100x100.jpg" onClick="console.log('clicked')" alt="Clickable image" />
-      `);
-        const img = page.getByTestId("img");
-        yield (0, fixtures_1.expect)(img).toHaveAttribute("alt", "Clickable image");
-    }));
-});
-fixtures_1.test.describe("Events", () => {
-    (0, fixtures_1.test)(`onClick event`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-        <HStack width="100px" gap="1rem" verticalAlignment="center">   
-          <variable name="showTestText" value="{false}" />
-          <Image onClick="showTestText = true" testId="img" src="/resources/test-image-100x100.jpg" />
-          <Text when="{showTestText}">this is a test text</Text>
-        </HStack>
-      `);
-        yield page.getByTestId("img").click();
-        yield (0, fixtures_1.expect)(page.getByText("this is a test text")).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)(`custom themeVar borderRadius`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" />`, {
-            testThemeVars: {
-                "borderRadius-Image": "25px",
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("border-radius", "25px");
-    }));
-    (0, fixtures_1.test)(`custom themeVar borderColor`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Image testId="img" src="/resources/test-image-100x100.jpg" />`, {
-            testThemeVars: {
-                "borderColor-Image": "rgb(255, 0, 0)",
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveCSS("border-color", "rgb(255, 0, 0)");
-    }));
-});
-fixtures_1.test.describe("Other Edge Cases", () => {
-    [
-        { label: "null", value: null },
-        { label: "undefined", value: undefined },
-        { label: "number", value: 123 },
-        { label: "boolean", value: true },
-        { label: "empty object", value: "{}" },
-        { label: "empty array", value: "[]" },
-        { label: "array", value: "['/resources/test-image-100x100.jpg']" },
-        { label: "function", value: "() => '/resources/test-image-100x100.jpg'" },
-        { label: "object", value: "{ a: '/resources/test-image-100x100.jpg' }" },
-    ].forEach(({ label, value }) => {
-        (0, fixtures_1.test)(`src prop handles ${label} by rendering broken image`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-            yield initTestBed(`<Image testId="img" src="{${value}}" />`);
-            const img = page.getByTestId("img");
-            yield (0, fixtures_1.expect)(img).toBeVisible();
-            const naturalWidth = yield img.evaluate((el) => el.naturalWidth);
-            const naturalHeight = yield img.evaluate((el) => el.naturalHeight);
-            (0, fixtures_1.expect)(naturalWidth).toBe(0);
-            (0, fixtures_1.expect)(naturalHeight).toBe(0);
-        }));
-    });
-    [
-        { label: "empty string", prop: "alt=\"\"", expected: undefined },
-        { label: "string", prop: 'alt="some text"', expected: "some text" },
-        { label: "number", prop: 'alt="{123}"', expected: "123" },
-        { label: "boolean", prop: 'alt="{true}"', expected: "true" },
-    ].forEach(({ label, prop, expected }) => {
-        (0, fixtures_1.test)(`alt attribute appears if value is ${label}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-            yield initTestBed(`<Image testId="img" ${prop} />`);
-            const img = page.getByTestId("img");
-            yield (0, fixtures_1.expect)(img).toBeVisible();
-            yield (0, fixtures_1.expect)(img).toHaveAttribute("alt", expected);
-        }));
-    });
-    [
-        { label: "null", prop: 'alt="{null}"' },
-        { label: "undefined", prop: 'alt="{undefined}"' },
-        { label: "empty object", prop: 'alt="{{}}"' },
-        { label: "empty array", prop: 'alt="{[]}"' },
-        { label: "array", prop: 'alt="{[\'/resources/test-image-100x100.jpg\']}"' },
-        { label: "function", prop: 'alt="{() => \'/resources/test-image-100x100.jpg\'}"' },
-        { label: "object", prop: 'alt="{{ a: \'/resources/test-image-100x100.jpg\' }}"' },
-    ].forEach(({ label, prop }) => {
-        (0, fixtures_1.test)(`alt attr not shown if value is ${label}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-            yield initTestBed(`<Image testId="img" ${prop} />`);
-            const img = page.getByTestId("img");
-            yield (0, fixtures_1.expect)(img).toBeVisible();
-            yield (0, fixtures_1.expect)(img).not.toHaveAttribute("alt");
-        }));
-    });
-    (0, fixtures_1.test)("handles very long src URL", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const longUrl = "/very/long/path/".repeat(20) + "image.jpg";
-        yield initTestBed(`<Image testId="img" src="${longUrl}" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("img")).toHaveAttribute("src", longUrl);
-    }));
-});

package/dist/scripts/src/components/Image/ImageNative.js

@@ -1,73 +0,0 @@
-"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.Image = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
-exports.defaultProps = {
-    fit: "contain",
-    lazyLoad: false,
-    inline: false,
-};
-exports.Image = (0, react_1.forwardRef)(function Img(_a, ref) {
-    var { src, alt, imageData, fit = exports.defaultProps.fit, style, className, onClick, aspectRatio, lazyLoad = exports.defaultProps.lazyLoad, inline = exports.defaultProps.inline } = _a, rest = __rest(_a, ["src", "alt", "imageData", "fit", "style", "className", "onClick", "aspectRatio", "lazyLoad", "inline"]);
-    const [blobUrl, setBlobUrl] = (0, react_1.useState)(null);
-    const blobToRender = (0, react_1.useMemo)(() => {
-        if (!imageData || !(imageData instanceof Blob)) {
-            return undefined;
-        }
-        return imageData;
-    }, [imageData]);
-    // Handle Blob data when src is empty
-    (0, react_1.useEffect)(() => {
-        if (!src && blobToRender) {
-            const url = URL.createObjectURL(blobToRender);
-            setBlobUrl(url);
-            // Cleanup function to revoke the blob URL
-            return () => {
-                URL.revokeObjectURL(url);
-                setBlobUrl(null);
-            };
-        }
-        else {
-            // Clean up any existing blob URL if src is provided or imageData is not a Blob
-            if (blobUrl) {
-                URL.revokeObjectURL(blobUrl);
-                setBlobUrl(null);
-            }
-        }
-    }, [src, blobToRender]);
-    src = safeConvertPropToString(src);
-    alt = safeConvertPropToString(alt);
-    // Use blob URL if src is empty and we have a blob URL
-    const imageSrc = src || blobUrl;
-    return ((0, jsx_runtime_1.jsx)("img", Object.assign({}, rest, { src: imageSrc, ref: ref, alt: alt, loading: lazyLoad ? "lazy" : "eager", className: (0, classnames_1.default)(Image_module_scss_1.default.img, {
-            [Image_module_scss_1.default.clickable]: !!onClick,
-        }, className), style: Object.assign(Object.assign(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { flexShrink: 1, aspectRatio: aspectRatio }), (inline ? { display: "inline" } : {})), onClick: onClick })));
-});
-function safeConvertPropToString(prop) {
-    if (typeof prop === "string")
-        return prop;
-    if (prop != null &&
-        typeof prop !== "object" &&
-        typeof prop !== "function" &&
-        !Number.isNaN(prop)) {
-        return String(prop);
-    }
-    return undefined;
-}

package/dist/scripts/src/components/Input/InputAdornment.js

@@ -1,28 +0,0 @@
-"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.Adornment = Adornment;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const InputAdornment_module_scss_1 = __importDefault(require("./InputAdornment.module.scss"));
-const IconNative_1 = require("../Icon/IconNative");
-const TextNative_1 = require("../Text/TextNative");
-function Adornment(_a) {
-    var { iconName, text, className, onClick } = _a, rest = __rest(_a, ["iconName", "text", "className", "onClick"]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className, {
-                [InputAdornment_module_scss_1.default.clickable]: !!onClick,
-            }), role: onClick ? "button" : "presentation", onClick: onClick, tabIndex: onClick ? 0 : undefined, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, style: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { style: { fontSize: "inherit" }, children: text }) }))] }))) : null }));
-}

package/dist/scripts/src/components/Input/InputDivider.js

@@ -1,35 +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.InputDivider = InputDivider;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const InputDivider_module_scss_1 = __importDefault(require("./InputDivider.module.scss"));
-/**
- * InputDivider is a simple component for displaying separators between input fields.
- *
- * This component is designed to be used in multi-field input scenarios like TimeInput
- * and DateInput where visual separators (like ":", "/", "-") are needed between fields.
- *
- * Key features:
- * - Flexible separator content (single or multi-character strings)
- * - CSS class-based styling for maximum flexibility
- * - Consistent behavior across different input components
- *
- * @example
- * ```tsx
- * // Time separator
- * <InputDivider separator=":" className={styles.divider} />
- *
- * // Date separator
- * <InputDivider separator="/" className={styles.divider} />
- *
- * // Custom separator
- * <InputDivider separator=" • " className="custom-separator" />
- * ```
- */
-function InputDivider({ separator, className }) {
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(InputDivider_module_scss_1.default.inputDivider, className), children: separator }));
-}

package/dist/scripts/src/components/Input/InputLabel.js

@@ -1,25 +0,0 @@
-"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.InputLabel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const InputLabel_module_scss_1 = __importDefault(require("./InputLabel.module.scss"));
-const InputLabel = (_a) => {
-    var { text, required, forFieldId, disabled } = _a, rest = __rest(_a, ["text", "required", "forFieldId", "disabled"]);
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, rest, { className: (0, classnames_1.default)(InputLabel_module_scss_1.default.inputLabel, { [InputLabel_module_scss_1.default.disabled]: disabled }), htmlFor: forFieldId, children: [text, " ", required && (0, jsx_runtime_1.jsx)("span", { className: InputLabel_module_scss_1.default.required, children: "*" })] })));
-};
-exports.InputLabel = InputLabel;

package/dist/scripts/src/components/Input/PartialInput.js

@@ -1,155 +0,0 @@
-"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.PartialInput = PartialInput;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const PartialInput_module_scss_1 = __importDefault(require("./PartialInput.module.scss"));
-/**
- * PartialInput is a specialized input component designed for multi-field input scenarios.
- *
- * Key features:
- * - Auto-advance: Automatically moves to the next input when max length is reached
- * - Enhanced blur detection: Provides direction information (next/previous/external)
- * - Consistent styling: Common base styles with component-specific overrides via className
- * - Accessibility: Proper ARIA labels and keyboard navigation support
- * - Validation integration: Works with validation functions and provides feedback
- *
- * This component encapsulates common patterns found in multi-field input components,
- * reducing code duplication and ensuring consistent behavior.
- *
- * @param props - PartialInputProps configuration
- * @returns A configured input element with enhanced multi-field input behavior
- */
-function PartialInput(_a) {
-    var { value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, id, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false } = _a, restProps = __rest(_a, ["value", "placeholder", "onChange", "onBlur", "onKeyDown", "emptyCharacter", "placeholderLength", "max", "min", "maxLength", "validateFn", "onBeep", "nextInputRef", "nextButtonRef", "id", "name", "ariaLabel", "className", "invalidClassName", "disabled", "readOnly", "required", "autoFocus", "inputRef", "step", "isInvalid"]);
-    /**
-     * Process emptyCharacter according to requirements.
-     * Handles null/empty values, multi-character strings, and unicode characters.
-     */
-    const processedEmptyCharacter = (0, react_1.useMemo)(() => {
-        if (!emptyCharacter || emptyCharacter.length === 0) {
-            return "-";
-        }
-        if (emptyCharacter.length > 1) {
-            // Use unicode-aware character extraction
-            const firstChar = [...emptyCharacter][0];
-            return firstChar;
-        }
-        return emptyCharacter;
-    }, [emptyCharacter]);
-    /**
-     * Generate final placeholder value.
-     * Uses explicit placeholder if provided, otherwise generates from emptyCharacter.
-     */
-    const finalPlaceholder = (0, react_1.useMemo)(() => {
-        if (placeholder !== undefined) {
-            return placeholder; // Explicit override takes precedence
-        }
-        return processedEmptyCharacter.repeat(placeholderLength);
-    }, [placeholder, processedEmptyCharacter, placeholderLength]);
-    /**
-     * Internal focus handler that automatically selects all text for easier editing.
-     * This is a common UX pattern for numeric inputs in multi-field components.
-     */
-    const handleInternalFocus = (0, react_1.useCallback)((event) => {
-        // Select all text when gaining focus for easier editing
-        event.target.select();
-    }, []);
-    /**
-     * Enhanced input change handler with automatic advance logic.
-     * When the user types the maximum number of characters and the input is valid,
-     * automatically moves focus to the next input or button.
-     */
-    const handleInputChange = (0, react_1.useCallback)((event) => {
-        const newValue = event.target.value;
-        // Call the original onChange handler
-        if (onChange) {
-            onChange(event);
-        }
-        // Auto-advance logic: move to next input when reaching maxLength with valid numeric input
-        if (newValue.length === maxLength && /^\d+$/.test(newValue) && !isInvalid) {
-            // Check if the new value is valid before auto-tabbing
-            const isValueInvalid = validateFn ? validateFn(newValue) : false;
-            if (!isValueInvalid) {
-                // Small delay to ensure the current input is properly updated
-                setTimeout(() => {
-                    if (nextInputRef === null || nextInputRef === void 0 ? void 0 : nextInputRef.current) {
-                        // Tab to next input field
-                        nextInputRef.current.focus();
-                        nextInputRef.current.select();
-                    }
-                    else if (nextButtonRef === null || nextButtonRef === void 0 ? void 0 : nextButtonRef.current) {
-                        // Tab to next button (e.g., action button)
-                        nextButtonRef.current.focus();
-                    }
-                }, 0);
-            }
-            else {
-                // Input is ready for auto-tab but invalid - play beep sound and fire event
-                onBeep === null || onBeep === void 0 ? void 0 : onBeep();
-            }
-        }
-    }, [onChange, nextInputRef, nextButtonRef, maxLength, validateFn, onBeep, isInvalid]);
-    /**
-     * Enhanced blur handler that detects the direction of navigation.
-     * This helps parent components understand whether the user is moving forward,
-     * backward, or clicking outside the component entirely.
-     */
-    const handleBlur = (0, react_1.useCallback)((event) => {
-        const relatedTarget = event.relatedTarget;
-        let direction = "external";
-        // Determine direction based on related target
-        if (relatedTarget) {
-            // Check if moving to next input
-            if ((nextInputRef === null || nextInputRef === void 0 ? void 0 : nextInputRef.current) === relatedTarget) {
-                direction = "next";
-            }
-            // Check if moving to next button
-            else if ((nextButtonRef === null || nextButtonRef === void 0 ? void 0 : nextButtonRef.current) === relatedTarget) {
-                direction = "next";
-            }
-            // Check if moving from a navigation event (could be previous)
-            // Note: This is a simplified heuristic. In practice, we might need more sophisticated detection
-            else if (relatedTarget.getAttribute("data-input") === "true") {
-                // If it's another input, we assume it could be previous navigation
-                // The parent component can provide more context if needed
-                direction = "previous";
-            }
-        }
-        // Call the enhanced onBlur handler with direction
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(direction, event);
-    }, [onBlur, nextInputRef, nextButtonRef]);
-    /**
-     * Enhanced key down handler that prevents space character input.
-     * Filters out space key presses while allowing other keys to pass through.
-     */
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        // Prevent space character input
-        if (event.key === " " || event.code === "Space") {
-            event.preventDefault();
-            return;
-        }
-        // Call the original onKeyDown handler for other keys
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    }, [onKeyDown]);
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { id: id, "aria-label": ariaLabel, autoComplete: "off", 
-        // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
-        autoFocus: autoFocus, className: (0, classnames_1.default)(PartialInput_module_scss_1.default.partialInput, className, {
-            [invalidClassName]: isInvalid,
-        }), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, maxLength: maxLength, min: min, name: name, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleInternalFocus, onKeyDown: handleKeyDown, placeholder: finalPlaceholder, readOnly: readOnly, ref: inputRef, required: required, step: step, type: "text", value: value !== null ? value : "" })));
-}

package/dist/scripts/src/components/Input/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PartialInput = void 0;
-var PartialInput_1 = require("./PartialInput");
-Object.defineProperty(exports, "PartialInput", { enumerable: true, get: function () { return PartialInput_1.PartialInput; } });

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

@@ -1,35 +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.inspectButtonComponentRenderer = exports.InspectButtonMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const ButtonNative_1 = require("../Button/ButtonNative");
-const InspectorContext_1 = require("../../components-core/InspectorContext");
-const InspectButton_module_scss_1 = __importDefault(require("./InspectButton.module.scss"));
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const pi_1 = require("react-icons/pi");
-const metadata_helpers_1 = require("../metadata-helpers");
-const classnames_1 = __importDefault(require("classnames"));
-const COMP = "InspectButton";
-exports.InspectButtonMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "This component displays a button that can turn the inspection " +
-        "mode of a running XMLUI app on or off.",
-    props: {},
-    themeVars: (0, themeVars_1.parseScssVar)(InspectButton_module_scss_1.default.themeVars),
-});
-function InspectButton({ children, style, className }) {
-    const { setInspectMode, inspectMode } = (0, InspectorContext_1.useInspectMode)();
-    return ((0, jsx_runtime_1.jsxs)(ButtonNative_1.Button, { style: style, className: (0, classnames_1.default)(InspectButton_module_scss_1.default.inspectButton, className), themeColor: inspectMode ? "primary" : "secondary", variant: inspectMode ? "solid" : "outlined", onClick: () => {
-            setInspectMode((prev) => !prev);
-        }, children: [(0, jsx_runtime_1.jsx)(pi_1.PiFileCode, { className: InspectButton_module_scss_1.default.icon }), children] }));
-}
-/**
- * Define the renderer for the Button component
- */
-exports.inspectButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.InspectButtonMd, ({ renderChild, node, className }) => {
-    return (0, jsx_runtime_1.jsx)(InspectButton, { className: className, children: renderChild(node.children) });
-});