@xsolla/xui-button 0.89.0 → 0.91.0

package/native/index.mjs

@@ -1,5 +1,5 @@
 // src/Button.tsx
-import React4, { useState } from "react";
+import React2, { useState } from "react";
 
 // ../primitives-native/src/Box.tsx
 import {
@@ -285,227 +285,14 @@ var Divider = ({
   return /* @__PURE__ */ jsx5(View4, { style });
 };
 
-// ../primitives-native/src/Input.tsx
-import { forwardRef } from "react";
-import { TextInput as RNTextInput } from "react-native";
-import { jsx as jsx6 } from "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 = 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__ */ jsx6(
-      RNTextInput,
-      {
-        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
-import { forwardRef as forwardRef2 } from "react";
-import { TextInput as RNTextInput2 } from "react-native";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var TextAreaPrimitive = forwardRef2(
-  ({
-    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__ */ jsx7(
-      RNTextInput2,
-      {
-        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
 import { useDesignSystem } from "@xsolla/xui-core";
-import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
-  if (!React4.isValidElement(icon)) return icon;
+  if (!React2.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return React4.cloneElement(iconElement, {
+  return React2.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -635,7 +422,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx8(
+        loading && /* @__PURE__ */ jsx6(
           Box,
           {
             position: "absolute",
@@ -646,7 +433,7 @@ var Button = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx6(
               Spinner,
               {
                 color: textColor,
@@ -668,7 +455,7 @@ var Button = ({
               pointerEvents: loading ? "none" : "auto"
             },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx6(
                 Box,
                 {
                   width: sizeStyles.iconContainerSize,
@@ -678,7 +465,7 @@ var Button = ({
                   children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
                 }
               ),
-              showDivider && /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
+              showDivider && /* @__PURE__ */ jsx6(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
             ]
           }
         ),
@@ -698,13 +485,13 @@ var Button = ({
             },
             "aria-hidden": loading ? true : void 0,
             children: [
-              labelIcon && /* @__PURE__ */ jsx8(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
+              labelIcon && /* @__PURE__ */ jsx6(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
                 labelIcon,
                 sizeStyles.labelIconSize,
                 textColor
               ) }),
-              /* @__PURE__ */ jsx8(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
-              sublabel && /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx6(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ jsx6(
                 Text,
                 {
                   color: textColor,
@@ -714,7 +501,7 @@ var Button = ({
                   children: sublabel
                 }
               ),
-              customContent && /* @__PURE__ */ jsx8(Box, { "aria-hidden": true, children: customContent })
+              customContent && /* @__PURE__ */ jsx6(Box, { "aria-hidden": true, children: customContent })
             ]
           }
         ),
@@ -730,8 +517,8 @@ var Button = ({
               pointerEvents: loading ? "none" : "auto"
             },
             children: [
-              showDivider && /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
-              /* @__PURE__ */ jsx8(
+              showDivider && /* @__PURE__ */ jsx6(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
+              /* @__PURE__ */ jsx6(
                 Box,
                 {
                   width: sizeStyles.iconContainerSize,
@@ -751,14 +538,14 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/IconButton.tsx
-import React5, { useState as useState2 } from "react";
+import React3, { useState as useState2 } from "react";
 import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
-  if (!React5.isValidElement(icon)) return icon;
+  if (!React3.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return React5.cloneElement(iconElement, {
+  return React3.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -874,7 +661,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx9(
+        loading && /* @__PURE__ */ jsx7(
           Box,
           {
             position: "absolute",
@@ -885,7 +672,7 @@ var IconButton = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx7(
               Spinner,
               {
                 color: textColor,
@@ -895,7 +682,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx7(
           Box,
           {
             "aria-hidden": true,
@@ -918,7 +705,7 @@ import {
   useState as useState3
 } from "react";
 import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
-import { Fragment, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var ICON_SIZES = {
   xs: 12,
   sm: 14,
@@ -1213,7 +1000,7 @@ var FlexButton = ({
     height: lineHeight
   };
   const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       ...buttonProps,
@@ -1240,10 +1027,10 @@ var FlexButton = ({
       tabIndex,
       style: buttonStyle,
       "data-testid": testID || "flex-button",
-      children: /* @__PURE__ */ jsx10("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx10("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx10(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        iconLeft && /* @__PURE__ */ jsx10(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        /* @__PURE__ */ jsx10("span", { children }),
-        iconRight && /* @__PURE__ */ jsx10(Icon, { size: iconSize, color: colors.text, children: iconRight })
+      children: /* @__PURE__ */ jsx8("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx8("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx8(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+        iconLeft && /* @__PURE__ */ jsx8(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
+        /* @__PURE__ */ jsx8("span", { children }),
+        iconRight && /* @__PURE__ */ jsx8(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }
   );
@@ -1251,9 +1038,9 @@ var FlexButton = ({
 FlexButton.displayName = "FlexButton";
 
 // src/ButtonGroup.tsx
-import React7 from "react";
+import React5 from "react";
 import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var ButtonGroup = ({
   orientation = "horizontal",
   size = "md",
@@ -1270,8 +1057,8 @@ var ButtonGroup = ({
   const { theme } = useDesignSystem4();
   const flattenChildren = (children2) => {
     const result = [];
-    React7.Children.forEach(children2, (child) => {
-      if (React7.isValidElement(child) && child.type === React7.Fragment) {
+    React5.Children.forEach(children2, (child) => {
+      if (React5.isValidElement(child) && child.type === React5.Fragment) {
         result.push(...flattenChildren(child.props.children));
       } else if (child !== null && child !== void 0) {
         result.push(child);
@@ -1307,8 +1094,8 @@ var ButtonGroup = ({
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
       return childrenToProcess.map((child, index) => {
-        if (React7.isValidElement(child)) {
-          return React7.cloneElement(child, {
+        if (React5.isValidElement(child)) {
+          return React5.cloneElement(child, {
             ...child.props,
             fullWidth: true,
             key: child.key ?? index
@@ -1326,7 +1113,7 @@ var ButtonGroup = ({
       const restChildren = processedChildren.slice(1);
       return /* @__PURE__ */ jsxs4(Fragment2, { children: [
         firstChild,
-        /* @__PURE__ */ jsx11(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
+        /* @__PURE__ */ jsx9(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
       ] });
     }
     if (orientation === "vertical") {
@@ -1335,7 +1122,7 @@ var ButtonGroup = ({
     return children;
   };
   return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx9(
       Box,
       {
         role: "group",
@@ -1352,7 +1139,7 @@ var ButtonGroup = ({
         children: renderChildren()
       }
     ),
-    error && /* @__PURE__ */ jsx11(Box, { marginTop: 4, children: /* @__PURE__ */ jsx11(
+    error && /* @__PURE__ */ jsx9(Box, { marginTop: 4, children: /* @__PURE__ */ jsx9(
       Text,
       {
         id: errorId,
@@ -1365,7 +1152,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && /* @__PURE__ */ jsx11(Box, { marginTop: 4, children: /* @__PURE__ */ jsx11(
+    description && /* @__PURE__ */ jsx9(Box, { marginTop: 4, children: /* @__PURE__ */ jsx9(
       Text,
       {
         id: descriptionId,