@xsolla/xui-button 0.111.0 → 0.112.0-pr178.1773103324

package/native/index.d.mts

@@ -207,6 +207,58 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
  */
 declare const FlexButton: React.FC<FlexButtonProps>;
 
+interface AppButtonProps {
+    /** Size of the button */
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button is in a loading state */
+    loading?: boolean;
+    /** Button content */
+    children: React.ReactNode;
+    /** Click handler */
+    onPress?: () => void;
+    /** Icon to display on the left side */
+    iconLeft?: React.ReactNode;
+    /** Icon to display on the right side */
+    iconRight?: React.ReactNode;
+    /** Secondary text displayed inline with the main label */
+    sublabel?: string;
+    /** Alignment of the label text */
+    labelAlignment?: "left" | "center";
+    /** Small icon displayed directly next to the label text */
+    labelIcon?: React.ReactNode;
+    /** Custom content slot for badges, tags, or other elements */
+    customContent?: React.ReactNode;
+    /** Accessible label for screen readers */
+    "aria-label"?: string;
+    /** ID of element that describes this button */
+    "aria-describedby"?: string;
+    /** Indicates the button controls an expandable element */
+    "aria-expanded"?: boolean;
+    /** Indicates the type of popup triggered by the button */
+    "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+    /** Indicates the button is pressed (for toggle buttons) */
+    "aria-pressed"?: boolean | "mixed";
+    /** ID of the element this button controls */
+    "aria-controls"?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+    /** HTML id attribute */
+    id?: string;
+    /** HTML type attribute for the button */
+    type?: "button" | "submit" | "reset";
+    /** Whether the button should stretch to fill the full width of its container */
+    fullWidth?: boolean;
+}
+/**
+ * AppButton - A prominent filled button for app-level actions.
+ *
+ * Uses the `control.appButton` theme tokens for styling.
+ * Supports all the same layout features as Button (icons, sublabels, etc.).
+ */
+declare const AppButton: React.FC<AppButtonProps>;
+
 interface ButtonGroupProps {
     /**
      * Layout orientation of the buttons
@@ -270,4 +322,4 @@ interface ButtonGroupProps {
  */
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
 
-export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, FlexButton, type FlexButtonProps, IconButton, type IconButtonProps };
+export { AppButton, type AppButtonProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, FlexButton, type FlexButtonProps, IconButton, type IconButtonProps };

package/native/index.d.ts

@@ -207,6 +207,58 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
  */
 declare const FlexButton: React.FC<FlexButtonProps>;
 
+interface AppButtonProps {
+    /** Size of the button */
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button is in a loading state */
+    loading?: boolean;
+    /** Button content */
+    children: React.ReactNode;
+    /** Click handler */
+    onPress?: () => void;
+    /** Icon to display on the left side */
+    iconLeft?: React.ReactNode;
+    /** Icon to display on the right side */
+    iconRight?: React.ReactNode;
+    /** Secondary text displayed inline with the main label */
+    sublabel?: string;
+    /** Alignment of the label text */
+    labelAlignment?: "left" | "center";
+    /** Small icon displayed directly next to the label text */
+    labelIcon?: React.ReactNode;
+    /** Custom content slot for badges, tags, or other elements */
+    customContent?: React.ReactNode;
+    /** Accessible label for screen readers */
+    "aria-label"?: string;
+    /** ID of element that describes this button */
+    "aria-describedby"?: string;
+    /** Indicates the button controls an expandable element */
+    "aria-expanded"?: boolean;
+    /** Indicates the type of popup triggered by the button */
+    "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+    /** Indicates the button is pressed (for toggle buttons) */
+    "aria-pressed"?: boolean | "mixed";
+    /** ID of the element this button controls */
+    "aria-controls"?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+    /** HTML id attribute */
+    id?: string;
+    /** HTML type attribute for the button */
+    type?: "button" | "submit" | "reset";
+    /** Whether the button should stretch to fill the full width of its container */
+    fullWidth?: boolean;
+}
+/**
+ * AppButton - A prominent filled button for app-level actions.
+ *
+ * Uses the `control.appButton` theme tokens for styling.
+ * Supports all the same layout features as Button (icons, sublabels, etc.).
+ */
+declare const AppButton: React.FC<AppButtonProps>;
+
 interface ButtonGroupProps {
     /**
      * Layout orientation of the buttons
@@ -270,4 +322,4 @@ interface ButtonGroupProps {
  */
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
 
-export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, FlexButton, type FlexButtonProps, IconButton, type IconButtonProps };
+export { AppButton, type AppButtonProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, FlexButton, type FlexButtonProps, IconButton, type IconButtonProps };

package/native/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  AppButton: () => AppButton,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   FlexButton: () => FlexButton,
@@ -216,29 +217,57 @@ var roleMap = {
   link: "link",
   text: "text"
 };
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
 var Text = ({
   children,
   color,
   fontSize,
   fontWeight,
   fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
   id,
   role,
+  style: styleProp,
   ...props
 }) => {
   let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
   if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
     resolvedFontFamily = void 0;
   }
-  const style = {
+  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
+  const baseStyle = {
     color,
     fontSize: typeof fontSize === "number" ? fontSize : void 0,
     fontWeight,
     fontFamily: resolvedFontFamily,
-    textDecorationLine: props.textDecoration
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
   };
   const accessibilityRole = role ? roleMap[role] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
 };
 
 // ../primitives-native/src/Spinner.tsx
@@ -1029,10 +1058,231 @@ var FlexButton = ({
 };
 FlexButton.displayName = "FlexButton";
 
-// src/ButtonGroup.tsx
+// src/AppButton.tsx
 var import_react5 = __toESM(require("react"));
 var import_xui_core4 = require("@xsolla/xui-core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var cloneIconWithDefaults3 = (icon, defaultSize, defaultColor) => {
+  if (!import_react5.default.isValidElement(icon)) return icon;
+  const iconElement = icon;
+  const existingProps = iconElement.props || {};
+  return import_react5.default.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 } = (0, import_xui_core4.useDesignSystem)();
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react5.useState)(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__ */ (0, import_jsx_runtime8.jsxs)(
+    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__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            )
+          }
+        ),
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsxs)(
+          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__ */ (0, import_jsx_runtime8.jsx)(Box, { "aria-hidden": true, children: cloneIconWithDefaults3(
+                labelIcon,
+                sizeStyles.labelIconSize,
+                textColor
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Text,
+                {
+                  color: textColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "500",
+                  style: { opacity: 0.4 },
+                  children: sublabel
+                }
+              ),
+              customContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { "aria-hidden": true, children: customContent })
+            ]
+          }
+        ),
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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
+var import_react6 = __toESM(require("react"));
+var import_xui_core5 = require("@xsolla/xui-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ButtonGroup = ({
   orientation = "horizontal",
   size = "md",
@@ -1046,11 +1296,11 @@ var ButtonGroup = ({
   id,
   testID
 }) => {
-  const { theme } = (0, import_xui_core4.useDesignSystem)();
+  const { theme } = (0, import_xui_core5.useDesignSystem)();
   const flattenChildren = (children2) => {
     const result = [];
-    import_react5.default.Children.forEach(children2, (child) => {
-      if (import_react5.default.isValidElement(child) && child.type === import_react5.default.Fragment) {
+    import_react6.default.Children.forEach(children2, (child) => {
+      if (import_react6.default.isValidElement(child) && child.type === import_react6.default.Fragment) {
         result.push(...flattenChildren(child.props.children));
       } else if (child !== null && child !== void 0) {
         result.push(child);
@@ -1086,8 +1336,8 @@ var ButtonGroup = ({
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
       return childrenToProcess.map((child, index) => {
-        if (import_react5.default.isValidElement(child)) {
-          return import_react5.default.cloneElement(child, {
+        if (import_react6.default.isValidElement(child)) {
+          return import_react6.default.cloneElement(child, {
             ...child.props,
             fullWidth: true,
             key: child.key ?? index
@@ -1103,9 +1353,9 @@ var ButtonGroup = ({
     if (useSpaceBetween) {
       const firstChild = processedChildren[0];
       const restChildren = processedChildren.slice(1);
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
         firstChild,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
       ] });
     }
     if (orientation === "vertical") {
@@ -1113,8 +1363,8 @@ var ButtonGroup = ({
     }
     return children;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Box,
       {
         role: "group",
@@ -1131,7 +1381,7 @@ var ButtonGroup = ({
         children: renderChildren()
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Text,
       {
         id: errorId,
@@ -1144,7 +1394,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Text,
       {
         id: descriptionId,
@@ -1160,6 +1410,7 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AppButton,
   Button,
   ButtonGroup,
   FlexButton,

package/native/index.js.flow

@@ -372,6 +372,119 @@ declare type FlexButtonProps = {
  * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
  */
 declare var FlexButton: React.FC<FlexButtonProps>;
+declare interface AppButtonProps {
+  /**
+   * Size of the button
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs";
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Click handler
+   */
+  onPress?: () => void;
+
+  /**
+   * Icon to display on the left side
+   */
+  iconLeft?: React.ReactNode;
+
+  /**
+   * Icon to display on the right side
+   */
+  iconRight?: React.ReactNode;
+
+  /**
+   * Secondary text displayed inline with the main label
+   */
+  sublabel?: string;
+
+  /**
+   * Alignment of the label text
+   */
+  labelAlignment?: "left" | "center";
+
+  /**
+   * Small icon displayed directly next to the label text
+   */
+  labelIcon?: React.ReactNode;
+
+  /**
+   * Custom content slot for badges, tags, or other elements
+   */
+  customContent?: React.ReactNode;
+
+  /**
+   * Accessible label for screen readers
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that describes this button
+   */
+  "aria-describedby"?: string;
+
+  /**
+   * Indicates the button controls an expandable element
+   */
+  "aria-expanded"?: boolean;
+
+  /**
+   * Indicates the type of popup triggered by the button
+   */
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+
+  /**
+   * Indicates the button is pressed (for toggle buttons)
+   */
+  "aria-pressed"?: boolean | "mixed";
+
+  /**
+   * ID of the element this button controls
+   */
+  "aria-controls"?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * HTML type attribute for the button
+   */
+  type?: "button" | "submit" | "reset";
+
+  /**
+   * Whether the button should stretch to fill the full width of its container
+   */
+  fullWidth?: boolean;
+}
+/**
+ * AppButton - A prominent filled button for app-level actions.
+ *
+ * Uses the `control.appButton` theme tokens for styling.
+ * Supports all the same layout features as Button (icons, sublabels, etc.).
+ */
+declare var AppButton: React.FC<AppButtonProps>;
 declare interface ButtonGroupProps {
   /**
    * Layout orientation of the buttons
@@ -443,5 +556,11 @@ declare interface ButtonGroupProps {
  * - **Description Support**: Optional description text for additional context
  */
 declare var ButtonGroup: React.FC<ButtonGroupProps>;
-export type { ButtonGroupProps, ButtonProps, FlexButtonProps, IconButtonProps };
-declare export { Button, ButtonGroup, FlexButton, IconButton };
+export type {
+  AppButtonProps,
+  ButtonGroupProps,
+  ButtonProps,
+  FlexButtonProps,
+  IconButtonProps,
+};
+declare export { AppButton, Button, ButtonGroup, FlexButton, IconButton };