@xsolla/xui-button 0.89.0 → 0.90.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/Button.tsx
-import React3, { useState } from "react";
+import React2, { useState } from "react";
 
 // ../primitives-web/src/Box.tsx
 import React from "react";
@@ -293,176 +293,14 @@ var Divider = (props) => {
   return /* @__PURE__ */ jsx5(StyledDivider, { ...props });
 };
 
-// ../primitives-web/src/Input.tsx
-import { forwardRef } from "react";
-import styled6 from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var StyledInput = styled6.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 = 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__ */ jsx6(
-      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
-import { forwardRef as forwardRef2 } from "react";
-import styled7 from "styled-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var StyledTextArea = styled7.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 = forwardRef2(
-  ({
-    value,
-    placeholder,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows
-  }, ref) => {
-    return /* @__PURE__ */ jsx7(
-      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
 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 (!React3.isValidElement(icon)) return icon;
+  if (!React2.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return React3.cloneElement(iconElement, {
+  return React2.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -592,7 +430,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx8(
+        loading && /* @__PURE__ */ jsx6(
           Box,
           {
             position: "absolute",
@@ -603,7 +441,7 @@ var Button = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx6(
               Spinner,
               {
                 color: textColor,
@@ -625,7 +463,7 @@ var Button = ({
               pointerEvents: loading ? "none" : "auto"
             },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx6(
                 Box,
                 {
                   width: sizeStyles.iconContainerSize,
@@ -635,7 +473,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%" })
             ]
           }
         ),
@@ -655,13 +493,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,
@@ -671,7 +509,7 @@ var Button = ({
                   children: sublabel
                 }
               ),
-              customContent && /* @__PURE__ */ jsx8(Box, { "aria-hidden": true, children: customContent })
+              customContent && /* @__PURE__ */ jsx6(Box, { "aria-hidden": true, children: customContent })
             ]
           }
         ),
@@ -687,8 +525,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,
@@ -708,14 +546,14 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/IconButton.tsx
-import React4, { 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 (!React4.isValidElement(icon)) return icon;
+  if (!React3.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return React4.cloneElement(iconElement, {
+  return React3.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -831,7 +669,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx9(
+        loading && /* @__PURE__ */ jsx7(
           Box,
           {
             position: "absolute",
@@ -842,7 +680,7 @@ var IconButton = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx7(
               Spinner,
               {
                 color: textColor,
@@ -852,7 +690,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx7(
           Box,
           {
             "aria-hidden": true,
@@ -875,7 +713,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,
@@ -1170,7 +1008,7 @@ var FlexButton = ({
     height: lineHeight
   };
   const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       ...buttonProps,
@@ -1197,10 +1035,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 })
       ] }) })
     }
   );
@@ -1208,9 +1046,9 @@ var FlexButton = ({
 FlexButton.displayName = "FlexButton";
 
 // src/ButtonGroup.tsx
-import React6 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",
@@ -1227,8 +1065,8 @@ var ButtonGroup = ({
   const { theme } = useDesignSystem4();
   const flattenChildren = (children2) => {
     const result = [];
-    React6.Children.forEach(children2, (child) => {
-      if (React6.isValidElement(child) && child.type === React6.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);
@@ -1264,8 +1102,8 @@ var ButtonGroup = ({
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
       return childrenToProcess.map((child, index) => {
-        if (React6.isValidElement(child)) {
-          return React6.cloneElement(child, {
+        if (React5.isValidElement(child)) {
+          return React5.cloneElement(child, {
             ...child.props,
             fullWidth: true,
             key: child.key ?? index
@@ -1283,7 +1121,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") {
@@ -1292,7 +1130,7 @@ var ButtonGroup = ({
     return children;
   };
   return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx9(
       Box,
       {
         role: "group",
@@ -1309,7 +1147,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,
@@ -1322,7 +1160,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,