@xsolla/xui-button 0.133.0-pr226.1776244133 → 0.134.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-button",
-  "version": "0.133.0-pr226.1776244133",
+  "version": "0.134.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.133.0-pr226.1776244133",
-    "@xsolla/xui-icons": "0.133.0-pr226.1776244133",
-    "@xsolla/xui-primitives-core": "0.133.0-pr226.1776244133"
+    "@xsolla/xui-core": "0.134.0",
+    "@xsolla/xui-icons": "0.134.0",
+    "@xsolla/xui-primitives-core": "0.134.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -39,120 +39,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Button.tsx
-var import_react3 = __toESM(require("react"));
-
-// ../primitives-web/src/Box.tsx
 var import_react2 = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-
-// ../primitives-web/src/filterDOMProps.ts
-var import_react = __toESM(require("react"));
-var NON_HTML_PROPS = /* @__PURE__ */ new Set([
-  // BoxProps — layout & styling
-  "backgroundColor",
-  "borderColor",
-  "borderWidth",
-  "borderBottomWidth",
-  "borderBottomColor",
-  "borderTopWidth",
-  "borderTopColor",
-  "borderLeftWidth",
-  "borderLeftColor",
-  "borderRightWidth",
-  "borderRightColor",
-  "borderRadius",
-  "borderStyle",
-  "flexDirection",
-  "flexWrap",
-  "alignItems",
-  "justifyContent",
-  "alignSelf",
-  "flex",
-  "flexShrink",
-  "gap",
-  "position",
-  "top",
-  "bottom",
-  "left",
-  "right",
-  "outline",
-  "overflow",
-  "overflowX",
-  "overflowY",
-  "zIndex",
-  "cursor",
-  "padding",
-  "paddingHorizontal",
-  "paddingVertical",
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-  "margin",
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "hoverStyle",
-  "pressStyle",
-  "focusStyle",
-  "outlineColor",
-  "outlineWidth",
-  "outlineOffset",
-  "outlineStyle",
-  // BoxProps — RN-only
-  "onPress",
-  "onLayout",
-  "onMoveShouldSetResponder",
-  "onResponderGrant",
-  "onResponderMove",
-  "onResponderRelease",
-  "onResponderTerminate",
-  "testID",
-  // Box — custom element type
-  "elementType",
-  // TextProps
-  "fontSize",
-  "fontWeight",
-  "fontFamily",
-  "lineHeight",
-  "whiteSpace",
-  "textAlign",
-  "textDecoration",
-  "numberOfLines",
-  "letterSpacing",
-  "textTransform",
-  // SpinnerProps
-  "strokeWidth",
-  // DividerProps
-  "vertical",
-  "dashStroke"
-]);
-function createFilteredElement(defaultTag) {
-  const Component = import_react.default.forwardRef(
-    ({ children, elementType, ...props }, ref) => {
-      const Tag = elementType || defaultTag;
-      const htmlProps = {};
-      for (const key of Object.keys(props)) {
-        if (!NON_HTML_PROPS.has(key)) {
-          htmlProps[key] = props[key];
-        }
-      }
-      return import_react.default.createElement(Tag, { ref, ...htmlProps }, children);
-    }
-  );
-  Component.displayName = `Filtered(${defaultTag})`;
-  return Component;
-}
 
 // ../primitives-web/src/Box.tsx
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var FilteredDiv = createFilteredElement("div");
-var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
+var StyledBox = import_styled_components.default.div`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -239,7 +132,7 @@ var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box = import_react2.default.forwardRef(
+var Box = import_react.default.forwardRef(
   ({
     children,
     onPress,
@@ -264,8 +157,6 @@ var Box = import_react2.default.forwardRef(
     type,
     disabled,
     id,
-    testID,
-    "data-testid": dataTestId,
     ...props
   }, ref) => {
     if (as === "img" && src) {
@@ -293,7 +184,7 @@ var Box = import_react2.default.forwardRef(
       StyledBox,
       {
         ref,
-        elementType: as,
+        as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -313,7 +204,6 @@ var Box = import_react2.default.forwardRef(
         "aria-controls": ariaControls,
         "aria-live": ariaLive,
         tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
-        "data-testid": dataTestId || testID,
         ...props,
         children
       }
@@ -325,8 +215,7 @@ Box.displayName = "Box";
 // ../primitives-web/src/Text.tsx
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var FilteredSpan = createFilteredElement("span");
-var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
+var StyledText = import_styled_components2.default.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"};
@@ -367,8 +256,7 @@ var rotate = import_styled_components3.keyframes`
     transform: rotate(360deg);
   }
 `;
-var FilteredDiv2 = createFilteredElement("div");
-var StyledSpinner = (0, import_styled_components3.default)(FilteredDiv2)`
+var StyledSpinner = import_styled_components3.default.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
@@ -404,8 +292,7 @@ Spinner.displayName = "Spinner";
 // ../primitives-web/src/Icon.tsx
 var import_styled_components4 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var FilteredDiv3 = createFilteredElement("div");
-var StyledIcon = (0, import_styled_components4.default)(FilteredDiv3)`
+var StyledIcon = import_styled_components4.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -428,10 +315,10 @@ var Icon = ({ children, ...props }) => {
 var import_xui_core = require("@xsolla/xui-core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
-  if (!import_react3.default.isValidElement(icon)) return icon;
+  if (!import_react2.default.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return import_react3.default.cloneElement(iconElement, {
+  return import_react2.default.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -466,7 +353,7 @@ var Button = ({
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
-  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react3.useState)(false);
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react2.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
   const controlTone = theme?.colors?.control?.[tone];
@@ -658,14 +545,14 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/IconButton.tsx
-var import_react4 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
-  if (!import_react4.default.isValidElement(icon)) return icon;
+  if (!import_react3.default.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return import_react4.default.cloneElement(iconElement, {
+  return import_react3.default.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -694,7 +581,7 @@ var IconButton = ({
   hoverBackground
 }) => {
   const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react4.useState)(false);
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react3.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
   const controlTone = theme?.colors?.control?.[tone];
@@ -829,7 +716,7 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/FlexButton.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ICON_SIZES = {
@@ -893,9 +780,9 @@ var FlexButton = ({
   ...buttonProps
 }) => {
   const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
-  const [state, setState] = (0, import_react5.useState)("default");
-  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
-  const isMouseOverRef = (0, import_react5.useRef)(false);
+  const [state, setState] = (0, import_react4.useState)("default");
+  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const isMouseOverRef = (0, import_react4.useRef)(false);
   const isDisabled = disabled || loading;
   const getVariantColors = (currentState) => {
     if (isDisabled) {
@@ -1166,14 +1053,14 @@ var FlexButton = ({
 FlexButton.displayName = "FlexButton";
 
 // src/AppButton.tsx
-var import_react6 = __toESM(require("react"));
+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_react6.default.isValidElement(icon)) return icon;
+  if (!import_react5.default.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return import_react6.default.cloneElement(iconElement, {
+  return import_react5.default.cloneElement(iconElement, {
     ...existingProps,
     size: existingProps.size ?? defaultSize,
     color: existingProps.color ?? defaultColor
@@ -1205,7 +1092,7 @@ var AppButton = ({
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
-  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react6.useState)(false);
+  const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react5.useState)(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
   const tokens = theme?.colors?.control?.appButton || {
@@ -1389,7 +1276,7 @@ var AppButton = ({
 AppButton.displayName = "AppButton";
 
 // src/ButtonGroup.tsx
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_xui_core5 = require("@xsolla/xui-core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ButtonGroup = ({
@@ -1410,8 +1297,8 @@ var ButtonGroup = ({
   const { theme } = (0, import_xui_core5.useResolvedTheme)({ themeMode, themeProductContext });
   const flattenChildren = (children2) => {
     const result = [];
-    import_react7.default.Children.forEach(children2, (child) => {
-      if (import_react7.default.isValidElement(child) && child.type === import_react7.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);
@@ -1447,8 +1334,8 @@ var ButtonGroup = ({
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
       return childrenToProcess.map((child, index) => {
-        if (import_react7.default.isValidElement(child)) {
-          return import_react7.default.cloneElement(child, {
+        if (import_react6.default.isValidElement(child)) {
+          return import_react6.default.cloneElement(child, {
             ...child.props,
             fullWidth: true,
             key: child.key ?? index