@xsolla/xui-button 0.64.0-pr56.1768440195

package/native/index.js

@@ -0,0 +1,1272 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  FlexButton: () => FlexButton,
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Button.tsx
+var import_react4 = require("react");
+
+// ../primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
+};
+
+// ../primitives-native/src/Spinner.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  "aria-describedby": ariaDescribedBy,
+  testID
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native3.View,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-native/src/Icon.tsx
+var import_react = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Icon = ({ children, color, size }) => {
+  const style = {
+    width: typeof size === "number" ? size : void 0,
+    height: typeof size === "number" ? size : void 0,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const childrenWithProps = import_react.default.Children.map(children, (child) => {
+    if (import_react.default.isValidElement(child)) {
+      return import_react.default.cloneElement(child, {
+        color: child.props.color || color,
+        // Also pass size if child seems to be an icon that needs it
+        size: child.props.size || size
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, children: childrenWithProps });
+};
+
+// ../primitives-native/src/Divider.tsx
+var import_react_native5 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Divider = ({
+  color,
+  height,
+  width,
+  vertical,
+  dashStroke
+}) => {
+  const style = {
+    backgroundColor: dashStroke ? "transparent" : color || "rgba(255, 255, 255, 0.15)",
+    width: vertical ? typeof width === "number" ? width : 1 : "100%",
+    height: vertical ? "100%" : typeof height === "number" ? height : 1,
+    ...dashStroke && {
+      borderStyle: "dashed",
+      borderColor: color || "rgba(255, 255, 255, 0.15)",
+      borderWidth: 0,
+      ...vertical ? { borderLeftWidth: typeof width === "number" ? width : 1 } : { borderTopWidth: typeof height === "number" ? height : 1 }
+    }
+  };
+  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,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "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-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "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 Button = ({
+  variant = "primary",
+  tone = "brand",
+  size = "m",
+  disabled = false,
+  loading = false,
+  children,
+  onPress,
+  iconLeft,
+  iconRight,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup,
+  "aria-pressed": ariaPressed,
+  "aria-controls": ariaControls,
+  testID,
+  id,
+  type = "button",
+  fullWidth = false
+}) => {
+  const { theme } = (0, import_xui_core.useDesignSystem)();
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react4.useState)(false);
+  const isDisabled = disabled || loading;
+  const sizeStyles = theme.sizing.button(size);
+  const variantStyles = theme?.colors?.control?.[tone]?.[variant] || theme?.colors?.control?.brand?.primary || {
+    bg: "transparent",
+    text: { primary: "#000" }
+  };
+  const handlePress = () => {
+    if (!isDisabled && onPress) {
+      onPress();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (isDisabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsKeyboardPressed(true);
+    }
+  };
+  const handleKeyUp = (e) => {
+    if (isDisabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsKeyboardPressed(false);
+      if (onPress) {
+        onPress();
+      }
+    }
+  };
+  const styles = variantStyles;
+  let backgroundColor = styles.bg;
+  if (disabled) {
+    backgroundColor = styles.bgDisable || styles.bg;
+  } else if (isKeyboardPressed) {
+    backgroundColor = styles.bgPress || styles.bg;
+  }
+  const borderColor = disabled ? styles.borderDisable || styles.border : styles.border;
+  const textColor = disabled ? styles.text?.disable || styles.text?.primary : styles.text?.primary;
+  const isDarkText = textColor === "#000000" || textColor === "black" || textColor.startsWith("rgba(0, 0, 0");
+  const dividerColor = isDarkText ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)";
+  const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Box,
+    {
+      as: "button",
+      type,
+      id,
+      onPress: handlePress,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      disabled: isDisabled,
+      "aria-label": computedAriaLabel,
+      "aria-disabled": isDisabled || void 0,
+      "aria-busy": loading || void 0,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      "aria-pressed": ariaPressed,
+      "aria-controls": ariaControls,
+      testID,
+      backgroundColor,
+      borderColor,
+      borderWidth: borderColor !== "transparent" && borderColor !== "rgba(255, 255, 255, 0)" ? 1 : 0,
+      borderRadius: theme.radius.button,
+      height: sizeStyles.height,
+      width: fullWidth ? "100%" : void 0,
+      padding: 0,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      cursor: disabled ? "not-allowed" : loading ? "wait" : "pointer",
+      opacity: disabled ? 0.6 : 1,
+      hoverStyle: !isDisabled ? {
+        backgroundColor: variantStyles?.bgHover
+      } : void 0,
+      pressStyle: !isDisabled ? {
+        backgroundColor: variantStyles?.bgPress
+      } : void 0,
+      focusStyle: {
+        outlineColor: theme.colors.border.brand,
+        outlineWidth: 2,
+        outlineOffset: 2,
+        outlineStyle: "solid"
+      },
+      children: [
+        !loading && iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Box,
+          {
+            height: "100%",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Box,
+                {
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingHorizontal: sizeStyles.iconPadding,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconLeft })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerColor, height: "100%" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            flex: fullWidth ? 1 : void 0,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            paddingHorizontal: loading ? sizeStyles.loadingPadding : sizeStyles.padding,
+            height: "100%",
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Text,
+              {
+                color: textColor,
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "500",
+                "aria-hidden": computedAriaLabel ? true : void 0,
+                children
+              }
+            )
+          }
+        ),
+        !loading && iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Box,
+          {
+            height: "100%",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerColor, height: "100%" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Box,
+                {
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingHorizontal: sizeStyles.iconPadding,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconRight })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/IconButton.tsx
+var import_react5 = require("react");
+var import_xui_core2 = require("@xsolla/xui-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var IconButton = ({
+  variant = "primary",
+  tone = "brand",
+  size = "m",
+  disabled = false,
+  loading = false,
+  icon,
+  onPress,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup,
+  "aria-pressed": ariaPressed,
+  "aria-controls": ariaControls,
+  testID,
+  id,
+  type = "button"
+}) => {
+  const { theme } = (0, import_xui_core2.useDesignSystem)();
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react5.useState)(false);
+  const isDisabled = disabled || loading;
+  const sizeStyles = theme.sizing.button(size);
+  const variantStyles = theme?.colors?.control?.[tone]?.[variant] || theme?.colors?.control?.brand?.primary || {
+    bg: "transparent",
+    text: { primary: "#000" }
+  };
+  const handlePress = () => {
+    if (!isDisabled && onPress) {
+      onPress();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (isDisabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsKeyboardPressed(true);
+    }
+  };
+  const handleKeyUp = (e) => {
+    if (isDisabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsKeyboardPressed(false);
+      if (onPress) {
+        onPress();
+      }
+    }
+  };
+  const styles = variantStyles;
+  let backgroundColor = styles.bg;
+  if (disabled) {
+    backgroundColor = styles.bgDisable || styles.bg;
+  } else if (isKeyboardPressed) {
+    backgroundColor = styles.bgPress || styles.bg;
+  }
+  const borderColor = disabled ? styles.borderDisable || styles.border : styles.border;
+  const textColor = disabled ? styles.text?.disable || styles.text?.primary : styles.text?.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Box,
+    {
+      as: "button",
+      type,
+      id,
+      onPress: handlePress,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      disabled: isDisabled,
+      "aria-label": ariaLabel,
+      "aria-disabled": isDisabled || void 0,
+      "aria-busy": loading || void 0,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      "aria-pressed": ariaPressed,
+      "aria-controls": ariaControls,
+      testID,
+      backgroundColor,
+      borderColor,
+      borderWidth: borderColor !== "transparent" && borderColor !== "rgba(255, 255, 255, 0)" ? 1 : 0,
+      borderRadius: theme.radius.button,
+      height: sizeStyles.height,
+      width: sizeStyles.height,
+      padding: 0,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      cursor: disabled ? "not-allowed" : loading ? "wait" : "pointer",
+      opacity: disabled ? 0.6 : 1,
+      hoverStyle: !isDisabled ? {
+        backgroundColor: styles.bgHover
+      } : void 0,
+      pressStyle: !isDisabled ? {
+        backgroundColor: styles.bgPress
+      } : void 0,
+      focusStyle: {
+        outlineColor: theme.colors.border.brand,
+        outlineWidth: 2,
+        outlineOffset: 2,
+        outlineStyle: "solid"
+      },
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Spinner,
+        {
+          color: textColor,
+          size: sizeStyles.spinnerSize,
+          "aria-hidden": true
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: icon })
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/FlexButton.tsx
+var import_react6 = require("react");
+var import_xui_core3 = require("@xsolla/xui-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ICON_SIZES = {
+  xs: 12,
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20
+};
+var SPINNER_SIZES = {
+  xs: 12,
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20
+};
+var LINE_HEIGHTS = {
+  xs: "14px",
+  s: "16px",
+  m: "18px",
+  l: "20px",
+  xl: "22px"
+};
+var FONT_SIZES = {
+  xs: 12,
+  s: 14,
+  m: 14,
+  l: 16,
+  xl: 18
+};
+var BORDER_RADIUS = {
+  xl: 4,
+  l: 4,
+  m: 2,
+  s: 2,
+  xs: 2
+};
+var FlexButton = ({
+  children,
+  variant = "brand",
+  size = "m",
+  background = false,
+  disabled = false,
+  loading = false,
+  iconLeft,
+  iconRight,
+  onPress,
+  onClick,
+  className,
+  type = "button",
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup,
+  "aria-pressed": ariaPressed,
+  "aria-controls": ariaControls,
+  testID,
+  tabIndex = 0,
+  ...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 isDisabled = disabled || loading;
+  const getVariantColors = (currentState) => {
+    if (isDisabled) {
+      return {
+        bg: background ? theme.colors.overlay.mono : "transparent",
+        text: theme.colors.control.text.disable,
+        border: void 0
+      };
+    }
+    const effectiveBackground = loading ? false : background;
+    switch (variant) {
+      case "brand":
+        if (effectiveBackground) {
+          return {
+            bg: currentState === "press" ? theme.colors.control.brand.primary.bgPress : currentState === "hover" ? theme.colors.control.brand.primary.bgHover : theme.colors.background.brand.primary,
+            text: theme.colors.content.on.brand,
+            border: void 0
+          };
+        }
+        return {
+          bg: currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
+          text: currentState === "press" ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
+          border: void 0
+        };
+      case "primary":
+        if (effectiveBackground) {
+          return {
+            bg: theme.colors.background.primary,
+            text: theme.colors.content.primary,
+            border: currentState === "press" ? theme.colors.border.primary : void 0
+          };
+        }
+        return {
+          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          text: theme.colors.content.primary,
+          border: currentState === "press" ? theme.colors.border.primary : void 0
+        };
+      case "secondary":
+        if (effectiveBackground) {
+          return {
+            bg: currentState === "press" ? theme.colors.control.mono.secondary.bgPress : currentState === "hover" ? theme.colors.control.mono.secondary.bgHover : theme.colors.background.secondary,
+            text: theme.colors.content.secondary,
+            border: void 0
+          };
+        }
+        return {
+          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          text: currentState === "press" ? theme.colors.content.primary : currentState === "hover" ? theme.colors.content.secondary : theme.colors.content.secondary,
+          border: void 0
+        };
+      case "tertiary":
+        if (effectiveBackground) {
+          return {
+            bg: currentState === "press" ? theme.colors.control.mono.secondary.bgPress : currentState === "hover" ? theme.colors.control.mono.secondary.bgHover : theme.colors.background.secondary,
+            text: theme.colors.content.tertiary,
+            border: void 0
+          };
+        }
+        return {
+          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          text: currentState === "press" ? theme.colors.content.secondary : currentState === "hover" ? theme.colors.content.tertiary : theme.colors.content.tertiary,
+          border: void 0
+        };
+      case "brandExtra":
+        if (effectiveBackground) {
+          return {
+            bg: currentState === "press" ? theme.colors.control.brandExtra.primary.bgPress : currentState === "hover" ? theme.colors.control.brandExtra.primary.bgHover : theme.colors.background.brandExtra.primary,
+            text: theme.colors.content.on.brandExtra,
+            border: void 0
+          };
+        }
+        return {
+          bg: currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
+          text: currentState === "press" ? theme.colors.content.on.brandExtra : theme.colors.content.brandExtra.secondary,
+          border: void 0
+        };
+      case "inverse":
+        if (effectiveBackground) {
+          return {
+            bg: currentState === "press" ? theme.colors.control.mono.primary.bgPress : currentState === "hover" ? theme.colors.control.mono.primary.bgHover : theme.colors.background.inverse,
+            text: theme.colors.content.inverse,
+            border: void 0
+          };
+        }
+        return {
+          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          text: theme.colors.content.inverse,
+          border: void 0
+        };
+      default:
+        return {
+          bg: "transparent",
+          text: theme.colors.content.primary,
+          border: void 0
+        };
+    }
+  };
+  const getFocusRingColor = () => {
+    switch (variant) {
+      case "brand":
+        return theme.colors.overlay.brand;
+      case "brandExtra":
+        return theme.colors.overlay.brandExtra;
+      case "inverse":
+        return "rgba(255, 255, 255, 0.3)";
+      default:
+        return theme.colors.overlay.mono;
+    }
+  };
+  const getSpinnerColor = () => {
+    switch (variant) {
+      case "brand":
+        return theme.colors.content.brand.primary;
+      case "primary":
+        return theme.colors.content.primary;
+      case "secondary":
+        return theme.colors.content.secondary;
+      case "tertiary":
+        return theme.colors.content.tertiary;
+      case "brandExtra":
+        return theme.colors.content.brandExtra.secondary;
+      case "inverse":
+        return theme.colors.content.inverse;
+      default:
+        return theme.colors.content.brand.primary;
+    }
+  };
+  const colors = getVariantColors(state);
+  const focusRingColor = getFocusRingColor();
+  const spinnerColor = getSpinnerColor();
+  const iconSize = ICON_SIZES[size];
+  const spinnerSize = SPINNER_SIZES[size];
+  const fontSize = FONT_SIZES[size];
+  const borderRadius = BORDER_RADIUS[size];
+  const lineHeight = LINE_HEIGHTS[size];
+  const handleMouseEnter = () => {
+    if (!isDisabled) {
+      isMouseOverRef.current = true;
+      setState("hover");
+    }
+  };
+  const handleMouseLeave = () => {
+    if (!isDisabled) {
+      isMouseOverRef.current = false;
+      setState("default");
+    }
+  };
+  const handleMouseDown = () => {
+    if (!isDisabled) {
+      setState("press");
+    }
+  };
+  const handleMouseUp = () => {
+    if (!isDisabled) {
+      setState(isMouseOverRef.current ? "hover" : "default");
+    }
+  };
+  const handleFocus = () => {
+    if (!isDisabled) {
+      setIsFocused(true);
+    }
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+  const handleClick = (event) => {
+    if (isDisabled) return;
+    if (onPress) {
+      onPress();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (isDisabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setState("press");
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (isDisabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setState(isMouseOverRef.current ? "hover" : "default");
+      if (onPress) {
+        onPress();
+      }
+    }
+  };
+  const borderShadow = colors.border ? `inset 0 0 0 1px ${colors.border}` : void 0;
+  const focusShadow = isFocused && !isDisabled ? `0 0 0 2px ${focusRingColor}` : void 0;
+  const boxShadows = [];
+  if (borderShadow) boxShadows.push(borderShadow);
+  if (focusShadow) boxShadows.push(focusShadow);
+  const combinedBoxShadow = boxShadows.length > 0 ? boxShadows.join(", ") : "none";
+  const buttonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "2px",
+    padding: "4px",
+    backgroundColor: loading ? "transparent" : colors.bg,
+    color: colors.text,
+    border: "none",
+    borderWidth: "0px",
+    borderRadius: `${borderRadius}px`,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    fontSize: `${fontSize}px`,
+    fontWeight: 500,
+    lineHeight,
+    fontFamily: "inherit",
+    transition: "background-color 100ms ease-in-out, color 100ms ease-in-out, box-shadow 100ms ease-in-out",
+    outline: "none",
+    boxShadow: combinedBoxShadow,
+    opacity: isDisabled && !loading ? 0.6 : 1
+  };
+  const contentStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "2px"
+  };
+  const spinnerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    height: lineHeight
+  };
+  const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      ...buttonProps,
+      type,
+      className,
+      disabled: isDisabled,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "aria-label": computedAriaLabel,
+      "aria-busy": loading || void 0,
+      "aria-disabled": isDisabled || void 0,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      "aria-pressed": ariaPressed,
+      "aria-controls": ariaControls,
+      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 })
+      ] }) })
+    }
+  );
+};
+FlexButton.displayName = "FlexButton";
+
+// src/ButtonGroup.tsx
+var import_xui_core4 = require("@xsolla/xui-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ButtonGroup = ({
+  orientation = "horizontal",
+  size = "m",
+  children,
+  description,
+  error,
+  gap,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  id,
+  testID
+}) => {
+  const { theme } = (0, import_xui_core4.useDesignSystem)();
+  const verticalGapMap = {
+    xl: 16,
+    l: 16,
+    m: 12,
+    s: 8,
+    xs: 4
+  };
+  const horizontalGapMap = {
+    xl: 16,
+    l: 16,
+    m: 16,
+    s: 12,
+    xs: 12
+  };
+  const computedGap = gap ?? (orientation === "vertical" ? verticalGapMap[size] : horizontalGapMap[size]);
+  const descriptionId = id ? `${id}-description` : void 0;
+  const errorId = id ? `${id}-error` : void 0;
+  const computedAriaDescribedBy = [
+    ariaDescribedBy,
+    error && errorId ? errorId : void 0,
+    description && !error && descriptionId ? descriptionId : void 0
+  ].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Box,
+      {
+        role: "group",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": computedAriaDescribedBy,
+        id,
+        testID,
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        alignItems: "stretch",
+        gap: computedGap,
+        width: "100%",
+        children
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Text,
+      {
+        id: errorId,
+        role: "alert",
+        "aria-live": "assertive",
+        color: theme.colors.content.alert.primary,
+        fontSize: 14,
+        fontWeight: "400",
+        children: error
+      }
+    ) }),
+    description && !error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Text,
+      {
+        id: descriptionId,
+        color: theme.colors.content.tertiary,
+        fontSize: 14,
+        fontWeight: "400",
+        children: description
+      }
+    ) })
+  ] });
+};
+ButtonGroup.displayName = "ButtonGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ButtonGroup,
+  FlexButton,
+  IconButton
+});
+//# sourceMappingURL=index.js.map