@xsolla/xui-button 0.128.0 → 0.129.0

package/web/index.mjs

@@ -39,6 +39,8 @@ var StyledBox = styled.div`
   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"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
 
   padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
   ${(props) => props.paddingHorizontal && `
@@ -270,7 +272,7 @@ var Icon = ({ children, ...props }) => {
 };
 
 // src/Button.tsx
-import { useDesignSystem } from "@xsolla/xui-core";
+import { useResolvedTheme } from "@xsolla/xui-core";
 import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
   if (!React2.isValidElement(icon)) return icon;
@@ -306,9 +308,11 @@ var Button = ({
   testID,
   id,
   type = "button",
-  fullWidth = false
+  fullWidth = false,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem();
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = useState(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -501,7 +505,7 @@ Button.displayName = "Button";
 
 // src/IconButton.tsx
 import React3, { useState as useState2 } from "react";
-import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
   if (!React3.isValidElement(icon)) return icon;
@@ -530,9 +534,11 @@ var IconButton = ({
   "aria-controls": ariaControls,
   testID,
   id,
-  type = "button"
+  type = "button",
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem2();
+  const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = useState2(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -672,7 +678,7 @@ import {
   useRef,
   useState as useState3
 } from "react";
-import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var ICON_SIZES = {
   xs: 12,
@@ -730,9 +736,11 @@ var FlexButton = ({
   "aria-controls": ariaControls,
   testID,
   tabIndex = 0,
+  themeMode,
+  themeProductContext,
   ...buttonProps
 }) => {
-  const { theme } = useDesignSystem3();
+  const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
   const [state, setState] = useState3("default");
   const [isFocused, setIsFocused] = useState3(false);
   const isMouseOverRef = useRef(false);
@@ -1007,7 +1015,7 @@ FlexButton.displayName = "FlexButton";
 
 // src/AppButton.tsx
 import React5, { useState as useState4 } from "react";
-import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var cloneIconWithDefaults3 = (icon, defaultSize, defaultColor) => {
   if (!React5.isValidElement(icon)) return icon;
@@ -1040,9 +1048,11 @@ var AppButton = ({
   testID,
   id,
   type = "button",
-  fullWidth = false
+  fullWidth = false,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem4();
+  const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = useState4(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -1228,7 +1238,7 @@ AppButton.displayName = "AppButton";
 
 // src/ButtonGroup.tsx
 import React6 from "react";
-import { useDesignSystem as useDesignSystem5 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var ButtonGroup = ({
   orientation = "horizontal",
@@ -1241,9 +1251,11 @@ var ButtonGroup = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   id,
-  testID
+  testID,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem5();
+  const { theme } = useResolvedTheme5({ themeMode, themeProductContext });
   const flattenChildren = (children2) => {
     const result = [];
     React6.Children.forEach(children2, (child) => {