@xsolla/xui-button 0.64.0-pr56.1768440195

package/web/index.mjs

@@ -0,0 +1,1187 @@
+// src/Button.tsx
+import { useState } from "react";
+
+// ../primitives-web/src/Box.tsx
+import React from "react";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var StyledBox = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    type,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../primitives-web/src/Text.tsx
+import styled2 from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledText = styled2.span`
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-weight: ${(props) => props.fontWeight || "normal"};
+  font-family: ${(props) => props.fontFamily || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
+  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
+  white-space: ${(props) => props.whiteSpace || "normal"};
+  text-align: ${(props) => props.textAlign || "inherit"};
+  text-decoration: ${(props) => props.textDecoration || "none"};
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role
+    }
+  );
+};
+
+// ../primitives-web/src/Spinner.tsx
+import styled3, { keyframes } from "styled-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var StyledSpinner = styled3.div`
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  border: ${(props) => props.strokeWidth || 2}px solid
+    ${(props) => props.color || "currentColor"};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: ${rotate} 1s linear infinite;
+`;
+var Spinner = ({
+  role = "status",
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive = "polite",
+  "aria-describedby": ariaDescribedBy,
+  testID,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    StyledSpinner,
+    {
+      role,
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive,
+      "aria-describedby": ariaDescribedBy,
+      "data-testid": testID,
+      ...props
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-web/src/Icon.tsx
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledIcon = styled4.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  color: ${(props) => props.color || "currentColor"};
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+`;
+var Icon = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx4(StyledIcon, { ...props, children });
+};
+
+// ../primitives-web/src/Divider.tsx
+import styled5 from "styled-components";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StyledDivider = styled5.div`
+  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
+  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
+  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+
+  ${(props) => props.dashStroke && `
+    border-style: dashed;
+    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
+    border-width: 0;
+    ${props.vertical ? `
+      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
+      height: 100%;
+    ` : `
+      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+      width: 100%;
+    `}
+  `}
+`;
+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";
+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 } = useDesignSystem();
+  const [isKeyboardPressed, setIsKeyboardPressed] = 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__ */ 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__ */ jsxs(
+          Box,
+          {
+            height: "100%",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsx8(
+                Box,
+                {
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingHorizontal: sizeStyles.iconPadding,
+                  children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconLeft })
+                }
+              ),
+              /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerColor, height: "100%" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          Box,
+          {
+            flex: fullWidth ? 1 : void 0,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            paddingHorizontal: loading ? sizeStyles.loadingPadding : sizeStyles.padding,
+            height: "100%",
+            children: loading ? /* @__PURE__ */ jsx8(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            ) : /* @__PURE__ */ jsx8(
+              Text,
+              {
+                color: textColor,
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "500",
+                "aria-hidden": computedAriaLabel ? true : void 0,
+                children
+              }
+            )
+          }
+        ),
+        !loading && iconRight && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            height: "100%",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerColor, height: "100%" }),
+              /* @__PURE__ */ jsx8(
+                Box,
+                {
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingHorizontal: sizeStyles.iconPadding,
+                  children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconRight })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/IconButton.tsx
+import { useState as useState2 } from "react";
+import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { jsx as jsx9 } from "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 } = useDesignSystem2();
+  const [isKeyboardPressed, setIsKeyboardPressed] = useState2(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__ */ jsx9(
+    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__ */ jsx9(
+        Spinner,
+        {
+          color: textColor,
+          size: sizeStyles.spinnerSize,
+          "aria-hidden": true
+        }
+      ) : /* @__PURE__ */ jsx9(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: icon })
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/FlexButton.tsx
+import { useRef, useState as useState3 } from "react";
+import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
+import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "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 } = useDesignSystem3();
+  const [state, setState] = useState3("default");
+  const [isFocused, setIsFocused] = useState3(false);
+  const isMouseOverRef = 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__ */ jsx10(
+    "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__ */ jsx10("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx10("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx10(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs2(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 })
+      ] }) })
+    }
+  );
+};
+FlexButton.displayName = "FlexButton";
+
+// src/ButtonGroup.tsx
+import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
+import { jsx as jsx11, jsxs as jsxs3 } from "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 } = useDesignSystem4();
+  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__ */ jsxs3(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+    /* @__PURE__ */ jsx11(
+      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__ */ jsx11(Box, { marginTop: 4, children: /* @__PURE__ */ jsx11(
+      Text,
+      {
+        id: errorId,
+        role: "alert",
+        "aria-live": "assertive",
+        color: theme.colors.content.alert.primary,
+        fontSize: 14,
+        fontWeight: "400",
+        children: error
+      }
+    ) }),
+    description && !error && /* @__PURE__ */ jsx11(Box, { marginTop: 4, children: /* @__PURE__ */ jsx11(
+      Text,
+      {
+        id: descriptionId,
+        color: theme.colors.content.tertiary,
+        fontSize: 14,
+        fontWeight: "400",
+        children: description
+      }
+    ) })
+  ] });
+};
+ButtonGroup.displayName = "ButtonGroup";
+export {
+  Button,
+  ButtonGroup,
+  FlexButton,
+  IconButton
+};
+//# sourceMappingURL=index.mjs.map