@xsolla/xui-button 0.87.0 → 0.89.0-pr137.1770210437

package/web/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-web/src/Box.tsx
 var import_react = __toESM(require("react"));
@@ -332,176 +332,14 @@ var Divider = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledDivider, { ...props });
 };
 
-// ../primitives-web/src/Input.tsx
-var import_react2 = require("react");
-var import_styled_components6 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var StyledInput = import_styled_components6.default.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var InputPrimitive = (0, import_react2.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    name,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId,
-    ...rest
-  }, ref) => {
-    const handleChange = (e) => {
-      if (onChange) {
-        onChange(e);
-      }
-      if (onChangeText) {
-        onChangeText(e.target.value);
-      }
-    };
-    const inputValue = value !== void 0 ? value : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      StyledInput,
-      {
-        ref,
-        id,
-        value: inputValue,
-        name,
-        placeholder,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        type: secureTextEntry ? "password" : type || "text",
-        inputMode,
-        autoComplete,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": ariaDescribedBy,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
-        "aria-disabled": ariaDisabled,
-        "data-testid": dataTestId,
-        ...rest
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
-
-// ../primitives-web/src/TextArea.tsx
-var import_react3 = require("react");
-var import_styled_components7 = __toESM(require("styled-components"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var StyledTextArea = import_styled_components7.default.textarea`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-  resize: none;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      StyledTextArea,
-      {
-        ref,
-        value,
-        placeholder,
-        onChange: (e) => onChangeText?.(e.target.value),
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        rows
-      }
-    );
-  }
-);
-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,
@@ -535,7 +373,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];
@@ -586,7 +424,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",
@@ -631,7 +469,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Box,
           {
             position: "absolute",
@@ -642,7 +480,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,
@@ -652,7 +490,7 @@ var Button = ({
             )
           }
         ),
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Box,
           {
             height: "100%",
@@ -664,7 +502,7 @@ var Button = ({
               pointerEvents: loading ? "none" : "auto"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 Box,
                 {
                   width: sizeStyles.iconContainerSize,
@@ -674,11 +512,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,
@@ -694,13 +532,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,
@@ -710,11 +548,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%",
@@ -726,8 +564,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,
@@ -747,14 +585,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,
@@ -780,7 +618,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];
@@ -825,7 +663,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",
@@ -870,7 +708,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Box,
           {
             position: "absolute",
@@ -881,7 +719,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,
@@ -891,7 +729,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Box,
           {
             "aria-hidden": true,
@@ -909,9 +747,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,
@@ -971,9 +809,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) {
@@ -1206,7 +1044,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,
@@ -1233,10 +1071,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 })
       ] }) })
     }
   );
@@ -1244,9 +1082,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",
@@ -1263,8 +1101,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);
@@ -1300,8 +1138,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
@@ -1317,9 +1155,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") {
@@ -1327,8 +1165,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",
@@ -1345,7 +1183,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,
@@ -1358,7 +1196,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,