@xsolla/xui-button 0.128.0 → 0.129.0

package/native/index.d.mts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
-interface ButtonProps {
+interface ButtonProps extends ThemeOverrideProps {
     /** Visual variant of the button */
     variant?: "primary" | "secondary" | "tertiary" | "ghost";
     /** Color tone of the button */
@@ -77,7 +78,7 @@ interface ButtonProps {
  */
 declare const Button: React.FC<ButtonProps>;
 
-interface IconButtonProps {
+interface IconButtonProps extends ThemeOverrideProps {
     /** Visual variant of the button */
     variant?: "primary" | "secondary" | "tertiary" | "ghost";
     /** Color tone of the button */
@@ -156,7 +157,7 @@ interface IconButtonProps {
  */
 declare const IconButton: React.FC<IconButtonProps>;
 
-interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, ThemeOverrideProps {
     /** Button content */
     children: ReactNode;
     /** Visual variant of the button */
@@ -207,7 +208,7 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
  */
 declare const FlexButton: React.FC<FlexButtonProps>;
 
-interface AppButtonProps {
+interface AppButtonProps extends ThemeOverrideProps {
     /** Size of the button */
     size?: "xl" | "lg" | "md" | "sm" | "xs";
     /** Whether the button is disabled */
@@ -259,7 +260,7 @@ interface AppButtonProps {
  */
 declare const AppButton: React.FC<AppButtonProps>;
 
-interface ButtonGroupProps {
+interface ButtonGroupProps extends ThemeOverrideProps {
     /**
      * Layout orientation of the buttons
      * @default 'horizontal'

package/native/index.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
-interface ButtonProps {
+interface ButtonProps extends ThemeOverrideProps {
     /** Visual variant of the button */
     variant?: "primary" | "secondary" | "tertiary" | "ghost";
     /** Color tone of the button */
@@ -77,7 +78,7 @@ interface ButtonProps {
  */
 declare const Button: React.FC<ButtonProps>;
 
-interface IconButtonProps {
+interface IconButtonProps extends ThemeOverrideProps {
     /** Visual variant of the button */
     variant?: "primary" | "secondary" | "tertiary" | "ghost";
     /** Color tone of the button */
@@ -156,7 +157,7 @@ interface IconButtonProps {
  */
 declare const IconButton: React.FC<IconButtonProps>;
 
-interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, ThemeOverrideProps {
     /** Button content */
     children: ReactNode;
     /** Visual variant of the button */
@@ -207,7 +208,7 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
  */
 declare const FlexButton: React.FC<FlexButtonProps>;
 
-interface AppButtonProps {
+interface AppButtonProps extends ThemeOverrideProps {
     /** Size of the button */
     size?: "xl" | "lg" | "md" | "sm" | "xs";
     /** Whether the button is disabled */
@@ -259,7 +260,7 @@ interface AppButtonProps {
  */
 declare const AppButton: React.FC<AppButtonProps>;
 
-interface ButtonGroupProps {
+interface ButtonGroupProps extends ThemeOverrideProps {
     /**
      * Layout orientation of the buttons
      * @default 'horizontal'

package/native/index.js

@@ -84,6 +84,10 @@ var Box = ({
   left,
   right,
   width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
   flex,
   overflow,
   zIndex,
@@ -115,6 +119,10 @@ var Box = ({
     zIndex,
     height,
     width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
     padding,
     paddingHorizontal,
     paddingVertical,
@@ -243,7 +251,7 @@ var Text = ({
   }
   const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
   const baseStyle = {
-    color,
+    color: color ?? incomingStyle?.color,
     fontSize: typeof fontSize === "number" ? fontSize : void 0,
     fontWeight,
     fontFamily: resolvedFontFamily,
@@ -362,9 +370,11 @@ var Button = ({
   testID,
   id,
   type = "button",
-  fullWidth = false
+  fullWidth = false,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core.useDesignSystem)();
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react2.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -586,9 +596,11 @@ var IconButton = ({
   "aria-controls": ariaControls,
   testID,
   id,
-  type = "button"
+  type = "button",
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core2.useDesignSystem)();
+  const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react3.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -783,9 +795,11 @@ var FlexButton = ({
   "aria-controls": ariaControls,
   testID,
   tabIndex = 0,
+  themeMode,
+  themeProductContext,
   ...buttonProps
 }) => {
-  const { theme } = (0, import_xui_core3.useDesignSystem)();
+  const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
   const [state, setState] = (0, import_react4.useState)("default");
   const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
   const isMouseOverRef = (0, import_react4.useRef)(false);
@@ -1093,9 +1107,11 @@ var AppButton = ({
   testID,
   id,
   type = "button",
-  fullWidth = false
+  fullWidth = false,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core4.useDesignSystem)();
+  const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react5.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -1294,9 +1310,11 @@ var ButtonGroup = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   id,
-  testID
+  testID,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core5.useDesignSystem)();
+  const { theme } = (0, import_xui_core5.useResolvedTheme)({ themeMode, themeProductContext });
   const flattenChildren = (children2) => {
     const result = [];
     import_react6.default.Children.forEach(children2, (child) => {