@arc-ui/components 13.0.0 → 13.1.0

package/lib/_shared/esm/{TemplateBanner-BPzuH5bz.mjs → TemplateBanner-DzU9Edky.mjs}

@@ -1,7 +1,9 @@
 import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
-import React__default from 'react';
+import React__default, { useState, useEffect } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
+import { d as debounce } from './debounce-D_Nx5go6.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { A as ArcBreakpoints } from './arc-breakpoints-CQOgeFK_.mjs';
 import { V as VerticalSpace } from './VerticalSpace-BLWB02I7.mjs';
 import { B as Box } from './Box-C8iK8x5c.mjs';
 import { H as Heading } from './Heading-Da-o0d5x.mjs';
@@ -21,7 +23,7 @@ var BannerRow = function (_a) {
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = __rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
+    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, contentRatios = _a.contentRatios, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = __rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "contentRatios", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -47,6 +49,30 @@ var TemplateBanner = function (_a) {
             ? "".concat(minHeightXL, "px")
             : "auto",
     };
+    var _o = useState("1/1"), contentRatiosPerBreakpoint = _o[0], setContentRatios = _o[1];
+    var checkContentRatio = debounce(function () {
+        if (contentRatios) {
+            for (var _i = 0, _a = Object.entries(ArcBreakpoints); _i < _a.length; _i++) {
+                var _b = _a[_i], key = _b[0], value = _b[1];
+                if (window.innerWidth > value) {
+                    var ratio = contentRatios === null || contentRatios === void 0 ? void 0 : contentRatios[key];
+                    if (ratio) {
+                        setContentRatios(ratio);
+                        return;
+                    }
+                }
+            }
+        }
+        setContentRatios(contentRatio);
+    }, 100);
+    useEffect(function () {
+        checkContentRatio();
+        window.addEventListener("resize", checkContentRatio);
+        return function () {
+            window.removeEventListener("resize", checkContentRatio);
+            checkContentRatio.cancel();
+        };
+    }, [contentRatios, checkContentRatio]);
     return (React__default.createElement("div", __assign({ style: templateBannerStyles, className: classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
             "arc-TemplateBanner--elevation": isElevated,
             "arc-TemplateBanner--minHeightM": minHeightM,
@@ -58,8 +84,10 @@ var TemplateBanner = function (_a) {
                 React__default.createElement(BannerRow, { "data-testid": "arc-TemplateBanner-gridRow", isReversed: isReversed },
                     React__default.createElement(GridCol, { "data-testid": "arc-TemplateBanner-contentCol", align: {
                             m: alignment === "start" ? "start" : "center",
-                            xs: !img || contentRatio === "1/0" ? "center" : "start",
-                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatio] : 12 },
+                            xs: !img || contentRatiosPerBreakpoint === "1/0"
+                                ? "center"
+                                : "start",
+                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatiosPerBreakpoint] : 12 },
                         React__default.createElement("div", { className: classNames("arc-TemplateBanner-content", {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
@@ -73,9 +101,11 @@ var TemplateBanner = function (_a) {
                             children && (React__default.createElement("span", null,
                                 React__default.createElement(VerticalSpace, { size: "32" }),
                                 children)))),
-                    img && contentRatio !== "1/0" && (React__default.createElement(GridCol, __assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
+                    img && contentRatiosPerBreakpoint !== "1/0" && (React__default.createElement(GridCol, __assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
                             ? { m: imageAlignment[img.alignment || "center"] }
-                            : undefined, xs: 12 }, (contentRatio === "2/3" && img ? { m: 4 } : { m: 6 })),
+                            : undefined, xs: 12 }, (contentRatiosPerBreakpoint === "2/3" && img
+                        ? { m: 4 }
+                        : { m: 6 })),
                         React__default.createElement(BannerImage, __assign({ ariaHidden: true }, img)))))))));
 };
 

package/lib/_shared/esm/{TextInput-BCvKXfM_.mjs → TextInput-WczTCUvp.mjs}

@@ -1,5 +1,5 @@
 import { a as __assign, _ as __rest } from './tslib.es6-w7hdJ3oZ.mjs';
-import React__default, { useState, useContext } from 'react';
+import React__default, { useState, useRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { u as useAriaDescribedby, F as FormControl } from './FormControl-DopDD_nC.mjs';
@@ -60,7 +60,7 @@ var InputIcon = function (_a) {
             "arc-TextInput-inputIcon": true,
             "arc-TextInput-inputIcon--isReadOnly": isReadOnly,
             "arc-TextInput-inputIcon--isDisabled": isDisabled,
-        }), disabled: isReadOnly || isDisabled, "aria-label": isButton.label, onFocus: isButton.onFocus, onClick: function (e) {
+        }), disabled: isReadOnly || isDisabled, "aria-label": isButton.label, onFocus: isButton.onFocus, onKeyDown: isButton.onKeyDown, onClick: function (e) {
             var _a;
             e.preventDefault();
             (_a = isButton.onClick) === null || _a === void 0 ? void 0 : _a.call(isButton);
@@ -71,19 +71,42 @@ var InputIcon = function (_a) {
 
 var TrailingSlot = function (_a) {
     var _b;
-    var trailingSlot = _a.trailingSlot, showPassword = _a.showPassword, isPasswordVisible = _a.isPasswordVisible, onTogglePassword = _a.onTogglePassword, isLoading = _a.isLoading, clearButton = _a.clearButton, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _c = _a.size, size = _c === void 0 ? "m" : _c;
+    var id = _a.id, trailingSlot = _a.trailingSlot, showPassword = _a.showPassword, isPasswordVisible = _a.isPasswordVisible, onTogglePassword = _a.onTogglePassword, isLoading = _a.isLoading, clearButton = _a.clearButton, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _c = _a.size, size = _c === void 0 ? "m" : _c, inputRef = _a.inputRef;
     var spinnerSizeMap = {
         s: 16,
         m: 24,
         l: 24,
     };
     var spinnerSize = spinnerSizeMap[size];
-    return (React__default.createElement("span", { className: "arc-TextInput-trailingSlot" },
+    var focusInput = function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var clearInput = function () {
+        var _a;
+        if (inputRef.current) {
+            inputRef.current.value = "";
+            inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        (_a = clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick) === null || _a === void 0 ? void 0 : _a.call(clearButton);
+    };
+    var onClearButtonKeydown = function () {
+        clearInput();
+        focusInput();
+    };
+    return (React__default.createElement("span", { className: "arc-TextInput-trailingSlot", id: "trailingslot-".concat(id) },
         trailingSlot && !showPassword && !isLoading && !clearButton && (React__default.createElement(React__default.Fragment, null, trailingSlot)),
         (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick) && !showPassword && !isLoading && (React__default.createElement(InputIcon, { themeIcon: "textInputClear", isReadOnly: isReadOnly, isDisabled: isDisabled, tooltip: {
                 title: (_b = clearButton.tooltipLabel) !== null && _b !== void 0 ? _b : "Clear",
                 side: "bottom",
-            }, isButton: { onClick: clearButton.onClick, label: "Clear Input" }, size: size })),
+            }, isButton: {
+                onClick: function () {
+                    clearInput();
+                    focusInput();
+                },
+                label: "Clear Input",
+                onKeyDown: onClearButtonKeydown,
+            }, size: size })),
         showPassword && !isLoading && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(InputIcon, { isDisabled: isDisabled, isReadOnly: isReadOnly, themeIcon: isPasswordVisible
                     ? "textInputShowPassword"
@@ -112,6 +135,16 @@ var TextInputComponent = function (_a) {
     var _b;
     var ref = _a.ref, _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = __rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
     var _l = useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
+    var inputRef = useRef(null);
+    var setInputRef = function (node) {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -143,11 +176,11 @@ var TextInputComponent = function (_a) {
             React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix arc-TextInput-affixes", "aria-hidden": true }, prefix)),
                 leadingSlot && (React__default.createElement("span", { className: "arc-TextInput-leadingSlot" }, leadingSlot)),
-                React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
+                React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: setInputRef, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
                 (trailingSlot ||
                     showPassword ||
                     isLoading ||
-                    (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React__default.createElement(TrailingSlot, { showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled })),
+                    (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React__default.createElement(TrailingSlot, { id: id, showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled, inputRef: inputRef })),
                 suffix && (React__default.createElement("span", { className: "arc-TextInput-suffix arc-TextInput-affixes", "aria-hidden": true }, suffix))))));
 };
 /**

package/lib/_shared/esm/{arc-breakpoints-ChQgbftE.mjs → arc-breakpoints-CQOgeFK_.mjs}

@@ -1,4 +1,4 @@
-import { A as ArcSizeBreakpointsS, a as ArcSizeBreakpointsM, b as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, d as ArcSizeBreakpointsXxl, e as ArcSizeBreakpointsXs } from './index.es-99J0r2va.mjs';
+import { A as ArcSizeBreakpointsS, a as ArcSizeBreakpointsM, b as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, d as ArcSizeBreakpointsXxl, e as ArcSizeBreakpointsXs } from './index.es-BJl4zTyt.mjs';
 
 /**
  * Provides an object of breakpoints for responsive designs.

package/lib/_shared/esm/{index.es-99J0r2va.mjs → index.es-BJl4zTyt.mjs}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Dec 2025 14:36:38 GMT
+ * Generated on Tue, 10 Feb 2026 16:04:38 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";