@xsolla/xui-button 0.89.0 → 0.90.0

package/native/index.js

@@ -38,7 +38,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Button.tsx
-var import_react4 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 
 // ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -320,227 +320,14 @@ var Divider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style });
 };
 
-// ../primitives-native/src/Input.tsx
-var import_react2 = require("react");
-var import_react_native6 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var keyboardTypeMap = {
-  text: "default",
-  number: "numeric",
-  email: "email-address",
-  tel: "phone-pad",
-  url: "url",
-  decimal: "decimal-pad"
-};
-var inputModeToKeyboardType = {
-  none: "default",
-  text: "default",
-  decimal: "decimal-pad",
-  numeric: "number-pad",
-  tel: "phone-pad",
-  search: "default",
-  email: "email-address",
-  url: "url"
-};
-var autoCompleteToTextContentType = {
-  "one-time-code": "oneTimeCode",
-  email: "emailAddress",
-  username: "username",
-  password: "password",
-  "new-password": "newPassword",
-  tel: "telephoneNumber",
-  "postal-code": "postalCode",
-  name: "name"
-};
-var InputPrimitive = (0, import_react2.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
-    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native6.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        secureTextEntry: secureTextEntry || type === "password",
-        keyboardType,
-        textContentType,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
-
-// ../primitives-native/src/TextArea.tsx
-var import_react3 = require("react");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native7.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        multiline: true,
-        numberOfLines: rows || 4,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlignVertical: "top",
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-TextAreaPrimitive.displayName = "TextAreaPrimitive";
-
 // src/Button.tsx
 var import_xui_core = require("@xsolla/xui-core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
-  if (!import_react4.default.isValidElement(icon)) return icon;
+  if (!import_react2.default.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return import_react4.default.cloneElement(iconElement, {
+  return import_react2.default.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -574,7 +361,7 @@ var Button = ({
   fullWidth = false
 }) => {
   const { theme } = (0, import_xui_core.useDesignSystem)();
-  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react4.useState)(false);
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react2.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
   const controlTone = theme?.colors?.control?.[tone];
@@ -625,7 +412,7 @@ var Button = ({
   const hasIcon = Boolean(iconLeft || iconRight);
   const showDivider = divider !== void 0 ? divider : hasIcon;
   const computedAriaLabel = ariaLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Box,
     {
       as: "button",
@@ -670,7 +457,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Box,
           {
             position: "absolute",
@@ -681,7 +468,7 @@ var Button = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Spinner,
               {
                 color: textColor,
@@ -691,7 +478,7 @@ var Button = ({
             )
           }
         ),
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Box,
           {
             height: "100%",
@@ -703,7 +490,7 @@ var Button = ({
               pointerEvents: loading ? "none" : "auto"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 Box,
                 {
                   width: sizeStyles.iconContainerSize,
@@ -713,11 +500,11 @@ var Button = ({
                   children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
                 }
               ),
-              showDivider && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
+              showDivider && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Box,
           {
             flex: fullWidth ? 1 : void 0,
@@ -733,13 +520,13 @@ var Button = ({
             },
             "aria-hidden": loading ? true : void 0,
             children: [
-              labelIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
+              labelIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
                 labelIcon,
                 sizeStyles.labelIconSize,
                 textColor
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
-              sublabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 Text,
                 {
                   color: textColor,
@@ -749,11 +536,11 @@ var Button = ({
                   children: sublabel
                 }
               ),
-              customContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { "aria-hidden": true, children: customContent })
+              customContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { "aria-hidden": true, children: customContent })
             ]
           }
         ),
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Box,
           {
             height: "100%",
@@ -765,8 +552,8 @@ var Button = ({
               pointerEvents: loading ? "none" : "auto"
             },
             children: [
-              showDivider && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              showDivider && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 Box,
                 {
                   width: sizeStyles.iconContainerSize,
@@ -786,14 +573,14 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/IconButton.tsx
-var import_react5 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_xui_core2 = require("@xsolla/xui-core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
-  if (!import_react5.default.isValidElement(icon)) return icon;
+  if (!import_react3.default.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return import_react5.default.cloneElement(iconElement, {
+  return import_react3.default.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -819,7 +606,7 @@ var IconButton = ({
   type = "button"
 }) => {
   const { theme } = (0, import_xui_core2.useDesignSystem)();
-  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react5.useState)(false);
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react3.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
   const controlTone = theme?.colors?.control?.[tone];
@@ -864,7 +651,7 @@ var IconButton = ({
   }
   const borderColor = disabled ? variantStyles.borderDisable || variantStyles.border : variantStyles.border;
   const textColor = disabled ? variantStyles.text?.disable || variantStyles.text?.primary : variantStyles.text?.primary;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Box,
     {
       as: "button",
@@ -909,7 +696,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Box,
           {
             position: "absolute",
@@ -920,7 +707,7 @@ var IconButton = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Spinner,
               {
                 color: textColor,
@@ -930,7 +717,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Box,
           {
             "aria-hidden": true,
@@ -948,9 +735,9 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/FlexButton.tsx
-var import_react6 = require("react");
+var import_react4 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ICON_SIZES = {
   xs: 12,
   sm: 14,
@@ -1010,9 +797,9 @@ var FlexButton = ({
   ...buttonProps
 }) => {
   const { theme } = (0, import_xui_core3.useDesignSystem)();
-  const [state, setState] = (0, import_react6.useState)("default");
-  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
-  const isMouseOverRef = (0, import_react6.useRef)(false);
+  const [state, setState] = (0, import_react4.useState)("default");
+  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const isMouseOverRef = (0, import_react4.useRef)(false);
   const isDisabled = disabled || loading;
   const getVariantColors = (currentState) => {
     if (isDisabled) {
@@ -1245,7 +1032,7 @@ var FlexButton = ({
     height: lineHeight
   };
   const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       ...buttonProps,
@@ -1272,10 +1059,10 @@ var FlexButton = ({
       tabIndex,
       style: buttonStyle,
       "data-testid": testID || "flex-button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: contentStyle, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: spinnerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }),
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: iconSize, color: colors.text, children: iconRight })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: contentStyle, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: spinnerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children }),
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }
   );
@@ -1283,9 +1070,9 @@ var FlexButton = ({
 FlexButton.displayName = "FlexButton";
 
 // src/ButtonGroup.tsx
-var import_react7 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_xui_core4 = require("@xsolla/xui-core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ButtonGroup = ({
   orientation = "horizontal",
   size = "md",
@@ -1302,8 +1089,8 @@ var ButtonGroup = ({
   const { theme } = (0, import_xui_core4.useDesignSystem)();
   const flattenChildren = (children2) => {
     const result = [];
-    import_react7.default.Children.forEach(children2, (child) => {
-      if (import_react7.default.isValidElement(child) && child.type === import_react7.default.Fragment) {
+    import_react5.default.Children.forEach(children2, (child) => {
+      if (import_react5.default.isValidElement(child) && child.type === import_react5.default.Fragment) {
         result.push(...flattenChildren(child.props.children));
       } else if (child !== null && child !== void 0) {
         result.push(child);
@@ -1339,8 +1126,8 @@ var ButtonGroup = ({
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
       return childrenToProcess.map((child, index) => {
-        if (import_react7.default.isValidElement(child)) {
-          return import_react7.default.cloneElement(child, {
+        if (import_react5.default.isValidElement(child)) {
+          return import_react5.default.cloneElement(child, {
             ...child.props,
             fullWidth: true,
             key: child.key ?? index
@@ -1356,9 +1143,9 @@ var ButtonGroup = ({
     if (useSpaceBetween) {
       const firstChild = processedChildren[0];
       const restChildren = processedChildren.slice(1);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
         firstChild,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
       ] });
     }
     if (orientation === "vertical") {
@@ -1366,8 +1153,8 @@ var ButtonGroup = ({
     }
     return children;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Box,
       {
         role: "group",
@@ -1384,7 +1171,7 @@ var ButtonGroup = ({
         children: renderChildren()
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Text,
       {
         id: errorId,
@@ -1397,7 +1184,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Text,
       {
         id: descriptionId,