@telus-uds/components-base 3.20.0 → 3.22.0

package/CHANGELOG.md

@@ -1,9 +1,35 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Oct 2025 15:11:05 GMT and should not be manually modified.
+This log was last generated on Wed, 29 Oct 2025 07:40:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.22.0
+
+Wed, 29 Oct 2025 07:40:46 GMT
+
+### Minor changes
+
+- `Carousel`: Add `loopDuration` prop (oscar.palencia@telus.com)
+- `Button`: add RNMQ support (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Interactive Card`: extra spacing fixed in interactive Cards when padding tokens are set to none (35577399+JoshHC@users.noreply.github.com)
+
+## 3.21.0
+
+Tue, 21 Oct 2025 14:46:26 GMT
+
+### Minor changes
+
+- `StackView`: add RNMQ support (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Responsive`: fix console warning (guillermo.peitzner@telus.com)
+- `TabsDropdown`: outline unnecessary property removed (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.20.0
 
 Fri, 10 Oct 2025 15:11:05 GMT

package/lib/cjs/Button/Button.js

@@ -22,16 +22,23 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const buttonVariant = {
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _ThemeProvider.useTheme)();
+  const buttonVariant = enableMediaQueryStyleSheet ? variant : {
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokensCallback : _ThemeProvider.useThemeTokensCallback;
+  const getTokens = useTokens('Button', tokens, buttonVariant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,
-    ref: ref
+    ref: ref,
+    viewport: viewport
   });
 });
 Button.displayName = 'Button';

package/lib/cjs/Button/ButtonBase.js

@@ -257,6 +257,13 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     iconProps,
     ...rawRest
   } = _ref12;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    viewport
+  } = rawRest;
+  const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport;
   const {
     onPress,
     ...rest
@@ -268,15 +275,55 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
   };
   const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
+  let layoutMediaQueryStyles;
+  let flexAndWidthStylesIds;
+  if (enableMediaQueryStyleSheet) {
+    const defaultPressableState = {
+      pressed: false,
+      hovered: false,
+      focused: false
+    };
+    const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
+      let [vp, viewportTokens] = _ref13;
+      const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
+      acc[vp] = {
+        ...staticStyles.row,
+        ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+        ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+        ...selectOuterSizeStyles(viewportTokens)
+      };
+      return acc;
+    }, {});
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(layoutTokensByViewport);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      layout: {
+        ...mediaQueryStyles
+      }
+    });
+    layoutMediaQueryStyles = styles.layout;
+    flexAndWidthStylesIds = ids.layout;
+  }
   const getPressableStyle = pressableState => {
+    if (enableMediaQueryStyleSheet) {
+      const themeTokens = resolveButtonTokens(pressableState)[viewport];
+      return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)];
+    }
     const themeTokens = resolveButtonTokens(pressableState);
-    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
-  const {
-    themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
+    dataSet: {
+      ...(flexAndWidthStylesIds ? {
+        media: flexAndWidthStylesIds
+      } : {}),
+      ...rawRest.dataSet
+    }
+  } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -288,8 +335,9 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     disabled: inactive,
     hrefAttrs: hrefAttrs,
     ...systemProps,
+    ...dataSetProp,
     children: pressableState => {
-      const themeTokens = resolveButtonTokens(pressableState);
+      const themeTokens = enableMediaQueryStyleSheet ? resolveButtonTokens(pressableState)[viewport] : resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
       const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, _Platform.default.select({

package/lib/cjs/Card/PressableCardBase.js

@@ -181,7 +181,9 @@ const staticStyles = _StyleSheet.default.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';

package/lib/cjs/Carousel/Carousel.js

@@ -358,6 +358,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     copy,
     slideDuration = 0,
     transitionDuration = 0,
+    loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
     ...rest
@@ -477,6 +478,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = _react.default.useCallback((panToAnimate, toValue, toIndex) => {
+    const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -494,14 +496,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration * 1000
+        duration: applicableTransitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       _Animated.default.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration ? transitionDuration * 1000 : 1000
+        duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
       _Animated.default.spring(panToAnimate, {
@@ -510,7 +512,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -1204,6 +1206,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: _propTypes.default.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: _propTypes.default.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/lib/cjs/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -68,7 +68,7 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
-  max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
+  max: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   inheritedStyles: _propTypes.default.arrayOf(_propTypes.default.string),
   children: _propTypes.default.node.isRequired
 };

package/lib/cjs/StackView/StackView.js

@@ -9,8 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _useTheme = _interopRequireDefault(require("../ThemeProvider/useTheme"));
 var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
 var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -69,10 +68,15 @@ const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     tag,
     accessibilityRole,
+    dataSet,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _useTheme.default)();
   const selectedProps = selectProps({
     accessibilityRole,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
@@ -83,17 +87,58 @@ const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     divider,
     space
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
-    viewport
-  });
-  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const size = {
-    width: themeTokens.width
-  };
+  const allTokens = (0, _utils.useAllViewportTokens)('StackView', tokens, variant);
+  let stackViewStyles;
+  let dataSetValue = dataSet;
+  if (enableMediaQueryStyleSheet) {
+    const stylesByViewport = {
+      xs: {
+        ...(0, _common.selectFlexStyles)(allTokens.xs),
+        width: allTokens.xs.width
+      },
+      sm: {
+        ...(0, _common.selectFlexStyles)(allTokens.sm),
+        width: allTokens.sm.width
+      },
+      md: {
+        ...(0, _common.selectFlexStyles)(allTokens.md),
+        width: allTokens.md.width
+      },
+      lg: {
+        ...(0, _common.selectFlexStyles)(allTokens.lg),
+        width: allTokens.lg.width
+      },
+      xl: {
+        ...(0, _common.selectFlexStyles)(allTokens.xl),
+        width: allTokens.xl.width
+      }
+    };
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      stackView: {
+        ...mediaQueryStyles
+      }
+    });
+    stackViewStyles = [_common.staticStyles[direction], styles.stackView];
+    dataSetValue = {
+      media: ids.stackView,
+      ...dataSet
+    };
+  } else {
+    const flexStyles = (0, _common.selectFlexStyles)(allTokens.current);
+    const size = {
+      width: allTokens.current.width
+    };
+    stackViewStyles = [flexStyles, _common.staticStyles[direction], size];
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, _common.staticStyles[direction], size],
+    style: stackViewStyles,
+    dataSet: dataSetValue,
     children: content
   });
 });
@@ -128,6 +173,11 @@ StackView.propTypes = {
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  /**
+   * Data attributes to be applied to the element. When media query stylesheet is enabled,
+   * this will include media query IDs for responsive styling.
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = exports.default = StackView;

package/lib/cjs/Tabs/TabsDropdown.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
@@ -233,20 +234,18 @@ const styles = _StyleSheet.default.create({
     position: 'relative',
     width: '100%'
   },
-  pressable: {
+  pressable: _Platform.default.OS === 'web' ? {
     outlineWidth: 0,
     outlineStyle: 'none',
     outlineColor: 'transparent'
-  },
+  } : {},
   buttonContent: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    minHeight: 44,
-    outline: 'none',
-    boxSizing: 'border-box'
+    minHeight: 44
   }
 });
 var _default = exports.default = TabsDropdown;

package/lib/cjs/ThemeProvider/index.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useTheme: true,
   useSetTheme: true,
-  useResponsiveThemeTokens: true
+  useResponsiveThemeTokens: true,
+  useResponsiveThemeTokensCallback: true
 };
 exports.default = void 0;
 Object.defineProperty(exports, "useResponsiveThemeTokens", {
@@ -15,6 +16,12 @@ Object.defineProperty(exports, "useResponsiveThemeTokens", {
     return _useResponsiveThemeTokens.default;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _useResponsiveThemeTokensCallback.default;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
@@ -31,6 +38,7 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
 var _useResponsiveThemeTokens = _interopRequireDefault(require("./useResponsiveThemeTokens"));
+var _useResponsiveThemeTokensCallback = _interopRequireDefault(require("./useResponsiveThemeTokensCallback"));
 var _useThemeTokens = require("./useThemeTokens");
 Object.keys(_useThemeTokens).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _systemConstants = require("@telus-uds/system-constants");
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getResponsiveThemeTokens = function (_ref, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = (0, _utils.mergeAppearances)(variants, states);
+  const tokensByViewport = Object.fromEntries(_systemConstants.viewports.keys.map(viewport => [viewport, {
+    ...defaultThemeTokens
+  }]));
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach(rule => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || _systemConstants.viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = (0, _utils.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
+  });
+  return tokensByViewport;
+};
+const doesRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesConditionApply(condition, appearances));
+const doesConditionApply = (_ref2, appearances) => {
+  let [key, value] = _ref2;
+  if (key === 'viewport') {
+    return true;
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ */
+
+/**
+ * Returns a memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const getResponsiveThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
+    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, (0, _utils.mergeAppearances)(variants, states), tokenOverrides);
+    return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states);
+  }, [componentTheme, tokens, variants]);
+  return getResponsiveThemeTokensCallback;
+};
+var _default = exports.default = useResponsiveThemeTokensCallback;

package/lib/cjs/index.js

@@ -93,6 +93,7 @@ var _exportNames = {
   applyTextStyles: true,
   applyShadowToken: true,
   useResponsiveThemeTokens: true,
+  useResponsiveThemeTokensCallback: true,
   Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
@@ -605,6 +606,12 @@ Object.defineProperty(exports, "useResponsiveThemeTokens", {
     return _ThemeProvider.useResponsiveThemeTokens;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useResponsiveThemeTokensCallback;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {

package/lib/cjs/utils/ssr-media-query/index.js

@@ -10,8 +10,15 @@ Object.defineProperty(exports, "createMediaQueryStyles", {
     return _createMediaQueryStyles.default;
   }
 });
+Object.defineProperty(exports, "useAllViewportTokens", {
+  enumerable: true,
+  get: function () {
+    return _useAllViewportTokens.default;
+  }
+});
 var _createStylesheet = _interopRequireDefault(require("./create-stylesheet"));
 var _createMediaQueryStyles = _interopRequireDefault(require("./utils/create-media-query-styles"));
+var _useAllViewportTokens = _interopRequireDefault(require("./utils/use-all-viewport-tokens"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyleSheet = exports.StyleSheet = {
   create: _createStylesheet.default

package/lib/cjs/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ThemeProvider = require("../../../ThemeProvider");
+var _ViewportProvider = require("../../../ViewportProvider");
+/**
+ * Hook to get theme tokens for all viewports at once.
+ * This is useful for components that need to support React Native Media Queries (RNMQ).
+ *
+ * All hooks are called unconditionally to comply with React's Rules of Hooks.
+ *
+ * @param {string} componentName - The name of the component to get tokens for
+ * @param {object|function} tokens - Custom tokens or token function
+ * @param {object} variant - Variant configuration
+ * @returns {object} Object with tokens for each viewport (xs, sm, md, lg, xl, current)
+ *
+ * @example
+ * const allTokens = useAllViewportTokens('StackView', tokens, variant)
+ * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
+ */
+const useAllViewportTokens = (componentName, tokens, variant) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const xs = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'xs'
+  });
+  const sm = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'sm'
+  });
+  const md = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'md'
+  });
+  const lg = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'lg'
+  });
+  const xl = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'xl'
+  });
+  const current = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport
+  });
+  return {
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    current
+  };
+};
+var _default = exports.default = useAllViewportTokens;

package/lib/esm/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { useThemeTokensCallback, useResponsiveThemeTokensCallback, useTheme } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,16 +13,23 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const viewport = useViewport();
-  const buttonVariant = {
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  const buttonVariant = enableMediaQueryStyleSheet ? variant : {
     viewport,
     ...variant
   };
-  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokensCallback : useThemeTokensCallback;
+  const getTokens = useTokens('Button', tokens, buttonVariant);
   return /*#__PURE__*/_jsx(ButtonBase, {
     ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,
-    ref: ref
+    ref: ref,
+    viewport: viewport
   });
 });
 Button.displayName = 'Button';