@xsolla/xui-button 0.112.0 → 0.113.0

package/web/index.mjs

@@ -188,6 +188,7 @@ var Text = ({
   className,
   id,
   role,
+  numberOfLines: _numberOfLines,
   ...props
 }) => {
   return /* @__PURE__ */ jsx2(
@@ -1004,10 +1005,231 @@ var FlexButton = ({
 };
 FlexButton.displayName = "FlexButton";
 
-// src/ButtonGroup.tsx
-import React5 from "react";
+// src/AppButton.tsx
+import React5, { useState as useState4 } from "react";
 import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var cloneIconWithDefaults3 = (icon, defaultSize, defaultColor) => {
+  if (!React5.isValidElement(icon)) return icon;
+  const iconElement = icon;
+  const existingProps = iconElement.props || {};
+  return React5.cloneElement(iconElement, {
+    ...existingProps,
+    size: existingProps.size ?? defaultSize,
+    color: existingProps.color ?? defaultColor
+  });
+};
+var AppButton = ({
+  size = "md",
+  disabled = false,
+  loading = false,
+  children,
+  onPress,
+  iconLeft,
+  iconRight,
+  sublabel,
+  labelAlignment = "center",
+  labelIcon,
+  customContent,
+  "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 } = useDesignSystem4();
+  const [isKeyboardPressed, setIsKeyboardPressed] = useState4(false);
+  const isDisabled = disabled || loading;
+  const sizeStyles = theme.sizing.button(size);
+  const tokens = theme?.colors?.control?.appButton || {
+    bg: "#34474b",
+    bgHover: "#3d5256",
+    bgPress: "#2b3b3e",
+    border: "rgba(255, 255, 255, 0.12)",
+    borderHover: "rgba(255, 255, 255, 0.18)",
+    borderPress: "rgba(255, 255, 255, 0.12)",
+    text: "#b7c5c8",
+    textDisable: "#b3b3b3"
+  };
+  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();
+      }
+    }
+  };
+  let backgroundColor = tokens.bg;
+  if (disabled) {
+    backgroundColor = tokens.bg;
+  } else if (isKeyboardPressed) {
+    backgroundColor = tokens.bgPress;
+  }
+  const borderColor = tokens.border;
+  const textColor = disabled ? tokens.textDisable : tokens.text;
+  return /* @__PURE__ */ jsxs4(
+    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)" && borderColor !== "rgba(0, 0, 0, 0)" && !borderColor.endsWith(", 0)") ? 1 : 0,
+      borderRadius: sizeStyles.borderRadius,
+      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: tokens.bgHover,
+        borderColor: tokens.borderHover
+      } : void 0,
+      pressStyle: !isDisabled ? {
+        backgroundColor: tokens.bgPress,
+        borderColor: tokens.borderPress
+      } : void 0,
+      focusStyle: {
+        outlineColor: theme.colors.border.brand,
+        outlineWidth: 2,
+        outlineOffset: 2,
+        outlineStyle: "solid"
+      },
+      children: [
+        loading && /* @__PURE__ */ jsx8(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            children: /* @__PURE__ */ jsx8(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            )
+          }
+        ),
+        iconLeft && /* @__PURE__ */ jsx8(
+          Box,
+          {
+            width: sizeStyles.iconContainerSize,
+            height: sizeStyles.iconContainerSize,
+            alignItems: "center",
+            justifyContent: "center",
+            "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
+            children: cloneIconWithDefaults3(iconLeft, sizeStyles.iconSize, textColor)
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          Box,
+          {
+            flex: fullWidth ? 1 : void 0,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: labelAlignment === "left" ? "flex-start" : "center",
+            paddingHorizontal: sizeStyles.padding,
+            height: "100%",
+            gap: sizeStyles.labelIconGap,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
+            "aria-hidden": loading ? true : void 0,
+            children: [
+              labelIcon && /* @__PURE__ */ jsx8(Box, { "aria-hidden": true, children: cloneIconWithDefaults3(
+                labelIcon,
+                sizeStyles.labelIconSize,
+                textColor
+              ) }),
+              /* @__PURE__ */ jsx8(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ jsx8(
+                Text,
+                {
+                  color: textColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "500",
+                  style: { opacity: 0.4 },
+                  children: sublabel
+                }
+              ),
+              customContent && /* @__PURE__ */ jsx8(Box, { "aria-hidden": true, children: customContent })
+            ]
+          }
+        ),
+        iconRight && /* @__PURE__ */ jsx8(
+          Box,
+          {
+            width: sizeStyles.iconContainerSize,
+            height: sizeStyles.iconContainerSize,
+            alignItems: "center",
+            justifyContent: "center",
+            "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
+            children: cloneIconWithDefaults3(iconRight, sizeStyles.iconSize, textColor)
+          }
+        )
+      ]
+    }
+  );
+};
+AppButton.displayName = "AppButton";
+
+// src/ButtonGroup.tsx
+import React6 from "react";
+import { useDesignSystem as useDesignSystem5 } from "@xsolla/xui-core";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var ButtonGroup = ({
   orientation = "horizontal",
   size = "md",
@@ -1021,11 +1243,11 @@ var ButtonGroup = ({
   id,
   testID
 }) => {
-  const { theme } = useDesignSystem4();
+  const { theme } = useDesignSystem5();
   const flattenChildren = (children2) => {
     const result = [];
-    React5.Children.forEach(children2, (child) => {
-      if (React5.isValidElement(child) && child.type === React5.Fragment) {
+    React6.Children.forEach(children2, (child) => {
+      if (React6.isValidElement(child) && child.type === React6.Fragment) {
         result.push(...flattenChildren(child.props.children));
       } else if (child !== null && child !== void 0) {
         result.push(child);
@@ -1061,8 +1283,8 @@ var ButtonGroup = ({
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
       return childrenToProcess.map((child, index) => {
-        if (React5.isValidElement(child)) {
-          return React5.cloneElement(child, {
+        if (React6.isValidElement(child)) {
+          return React6.cloneElement(child, {
             ...child.props,
             fullWidth: true,
             key: child.key ?? index
@@ -1078,9 +1300,9 @@ var ButtonGroup = ({
     if (useSpaceBetween) {
       const firstChild = processedChildren[0];
       const restChildren = processedChildren.slice(1);
-      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
         firstChild,
-        /* @__PURE__ */ jsx8(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
+        /* @__PURE__ */ jsx9(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
       ] });
     }
     if (orientation === "vertical") {
@@ -1088,8 +1310,8 @@ var ButtonGroup = ({
     }
     return children;
   };
-  return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs5(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+    /* @__PURE__ */ jsx9(
       Box,
       {
         role: "group",
@@ -1106,7 +1328,7 @@ var ButtonGroup = ({
         children: renderChildren()
       }
     ),
-    error && /* @__PURE__ */ jsx8(Box, { marginTop: 4, children: /* @__PURE__ */ jsx8(
+    error && /* @__PURE__ */ jsx9(Box, { marginTop: 4, children: /* @__PURE__ */ jsx9(
       Text,
       {
         id: errorId,
@@ -1119,7 +1341,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && /* @__PURE__ */ jsx8(Box, { marginTop: 4, children: /* @__PURE__ */ jsx8(
+    description && /* @__PURE__ */ jsx9(Box, { marginTop: 4, children: /* @__PURE__ */ jsx9(
       Text,
       {
         id: descriptionId,
@@ -1134,6 +1356,7 @@ var ButtonGroup = ({
 };
 ButtonGroup.displayName = "ButtonGroup";
 export {
+  AppButton,
   Button,
   ButtonGroup,
   FlexButton,