@telus-uds/components-base 3.29.0 → 3.30.0

package/lib/esm/Scroll/index.js

@@ -0,0 +1,4 @@
+import Scroll from './Scroll';
+export default Scroll;
+export { default as ScrollItem } from './ScrollItem';
+export { ScrollProvider, useScroll } from './ScrollContext';

package/lib/esm/StackView/StackWrapBox.js

@@ -43,6 +43,7 @@ const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = useViewport();
@@ -69,7 +70,8 @@ const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const content = getStackedContent(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
@@ -105,6 +107,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: PropTypes.string,
   /**
    * A StackWrap 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.

package/lib/esm/StackView/StackWrapGap.js

@@ -28,6 +28,7 @@ const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = useViewport();
@@ -47,7 +48,8 @@ const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const content = getStackedContent(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib/esm/StackView/getStackedContent.js

@@ -36,7 +36,8 @@ const getStackedContent = (children, _ref) => {
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -48,15 +49,24 @@ const getStackedContent = (children, _ref) => {
   const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    _createElement(Box, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/_createElement(Box, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/React.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/esm/Tooltip/Tooltip.native.js

@@ -206,7 +206,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       focus: focused
     };
   };
-  const onTooltipLayout = _ref10 => {
+  const onTooltipLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -214,7 +214,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: Platform.select({

package/lib/esm/index.js

@@ -45,6 +45,7 @@ export { default as QuickLinksFeature } from './QuickLinksFeature';
 export { default as Radio, RadioGroup } from './Radio';
 export { default as RadioCard, RadioCardGroup } from './RadioCard';
 export { default as Responsive } from './Responsive';
+export { default as Scroll, ScrollItem } from './Scroll';
 export { default as Search } from './Search';
 export { default as Select } from './Select';
 export { default as Shortcuts, ShortcutsItem } from './Shortcuts';

package/lib/esm/utils/animation/index.js

@@ -1,2 +1,2 @@
-/* eslint-disable import/prefer-default-export */
+export { default as useAnimatedValue } from './useAnimatedValue';
 export { default as useVerticalExpandAnimation } from './useVerticalExpandAnimation';

package/lib/esm/utils/animation/useAnimatedValue.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Easing from "react-native-web/dist/exports/Easing";
+const ANIMATION_DURATION = 200;
+
+/**
+ * Smoothly animates a numeric value to a new target using a quadratic ease-in-out
+ * curve. Returns the current interpolated value as a plain number so
+ * consumers can use it in non-Animated style props.
+ *
+ * @param {number} targetValue - The value to animate towards.
+ * @param {number} [duration=ANIMATION_DURATION] - Animation duration in ms.
+ */
+const useAnimatedValue = function (targetValue) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANIMATION_DURATION;
+  const [currentValue, setCurrentValue] = React.useState(targetValue);
+  const animatedValue = React.useRef(new Animated.Value(targetValue)).current;
+  React.useEffect(() => {
+    const id = animatedValue.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return setCurrentValue(value);
+    });
+    return () => animatedValue.removeListener(id);
+  }, [animatedValue]);
+  React.useEffect(() => {
+    const animation = Animated.timing(animatedValue, {
+      toValue: targetValue,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [targetValue, animatedValue, duration]);
+  return currentValue;
+};
+export default useAnimatedValue;

package/lib/esm/utils/children.js

@@ -47,7 +47,8 @@ export const unpackFragment = child => {
 };
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = child => isStringOrNumber(child) || child.type === A11yText || child.type?.name === 'FootnoteLink';
+// Check displayName first as it is explicitly set and reliable regardless of export style (named vs default)
+const isWrapable = child => isStringOrNumber(child) || child.type === A11yText || child.type?.__UDS_COMPONENT_NAME__ === 'FootnoteLink';
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
 // Group wrappable children for one `<Text>` parent, merging adjacent text nodes

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.20.0",
+    "@telus-uds/system-theme-tokens": "^4.21.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.29.0",
+  "version": "3.30.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.20.0",
+    "@telus-uds/system-theme-tokens": "^4.21.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.29.0",
+  "version": "3.30.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -1403,9 +1403,14 @@ Carousel.propTypes = {
    */
   thumbnails: PropTypes.arrayOf(
     PropTypes.shape({
+      /** Accessibility label for the thumbnail image, used by assistive technologies. */
       accessibilityLabel: PropTypes.string,
+      /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
       alt: PropTypes.string,
-      src: PropTypes.string
+      /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+      isVideo: PropTypes.bool,
+      /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+      src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     })
   ),
   /**

package/src/Carousel/CarouselThumbnail.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, Image } from 'react-native'
+import { StyleSheet, Pressable, Image, View } from 'react-native'
 import { useCarousel } from './CarouselContext'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
+import Icon from '../Icon'
 
 const selectPressableTokens = ({ borderColor, borderRadius, borderWidth, margin, padding }) => ({
   borderColor,
@@ -13,83 +14,171 @@ const selectPressableTokens = ({ borderColor, borderRadius, borderWidth, margin,
   padding
 })
 
+// Play icon overlay appearance is consistent across all brands and is not theme-configurable.
+// The circle occupies 55% of the thumbnail size, and the icon occupies 55% of the circle diameter.
+const PLAY_ICON_RATIO = 0.55
+const PLAY_ICON_BORDER_RADIUS_DIVISOR = 2
+
+const selectImageStyles = (size) => ({
+  width: size,
+  height: size
+})
+
+const selectSelectedStyles = ({ selectedBorderColor, selectedBorderWidth, padding, margin }) => ({
+  borderColor: selectedBorderColor,
+  borderWidth: selectedBorderWidth,
+  padding: padding - selectedBorderWidth,
+  marginBottom: margin + selectedBorderWidth
+})
+
+const selectNonSelectedStyles = ({ borderWidth, padding, margin, selectedBorderWidth }) => ({
+  padding: padding - borderWidth,
+  marginBottom: margin + selectedBorderWidth
+})
+
+const selectPlayIconCircleStyles = (thumbnailSize) => {
+  const diameter = thumbnailSize * PLAY_ICON_RATIO
+  return {
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / PLAY_ICON_BORDER_RADIUS_DIVISOR
+  }
+}
+
+const selectPlayIconTokens = (thumbnailSize) => ({
+  size: thumbnailSize * PLAY_ICON_RATIO * PLAY_ICON_RATIO
+})
+
 /**
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = React.forwardRef(({ accessibilityLabel, alt, index, src }, ref) => {
-  const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo } = useCarousel()
-  const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail')
-  const viewport = useViewport()
-  const thumbnailTitle =
-    alt ??
-    getCopyWithPlaceholders('stepTrackerLabel')
-      .replace(/%\{itemLabel\}/g, itemLabel)
-      .replace(/%\{stepNumber\}/g, index)
-      .replace(/%\{stepCount\}/g, totalItems)
-  const handlePress = () => goTo(index)
-  const handleKeyDown = (event) => {
-    // Allow using the spacebar for navigation
-    if (event?.key === ' ') goTo(index)
-  }
-  const { borderWidth, padding, selectedBorderColor, selectedBorderWidth, size, margin } =
-    getThumbnailTokens({ viewport })
-  const styles = {
-    image: {
-      height: size,
-      width: size
-    },
-    selected: {
-      borderColor: selectedBorderColor,
-      borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth,
-      marginBottom: margin + selectedBorderWidth
-    },
-    nonSelected: {
-      padding: padding - borderWidth,
-      marginBottom: margin + selectedBorderWidth
+const CarouselThumbnail = React.forwardRef(
+  ({ accessibilityLabel, alt, index, isVideo, src }, ref) => {
+    const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo } = useCarousel()
+    const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail')
+    const viewport = useViewport()
+    const thumbnailTitle =
+      alt ??
+      getCopyWithPlaceholders('stepTrackerLabel')
+        .replace(/%\{itemLabel\}/g, itemLabel)
+        .replace(/%\{stepNumber\}/g, index)
+        .replace(/%\{stepCount\}/g, totalItems)
+    const handlePress = () => goTo(index)
+    const handleKeyDown = (event) => {
+      // Allow using the spacebar for navigation
+      if (event?.key === ' ') goTo(index)
     }
-  }
+    const {
+      borderWidth,
+      padding,
+      selectedBorderColor,
+      selectedBorderWidth,
+      size,
+      margin,
+      playIcon
+    } = getThumbnailTokens({ viewport })
 
-  return (
-    <Pressable
-      key={src}
-      onKeyDown={handleKeyDown}
-      onPress={handlePress}
-      style={({ hovered, pressed, focused }) => {
-        const pressableStyles = selectPressableTokens(
-          getThumbnailTokens({
-            hover: hovered,
-            pressed,
-            focus: focused
-          })
-        )
+    return (
+      <Pressable
+        key={src}
+        onKeyDown={handleKeyDown}
+        onPress={handlePress}
+        style={({ hovered, pressed, focused }) => {
+          const pressableStyles = selectPressableTokens(
+            getThumbnailTokens({
+              hover: hovered,
+              pressed,
+              focus: focused
+            })
+          )
 
-        return [
-          pressableStyles,
-          index === activeIndex ? [styles.selected, { outline: 'none' }] : styles.nonSelected
-        ]
-      }}
-      ref={ref}
-    >
-      <Image
-        accessibilityIgnoresInvertColors
-        accessibilityLabel={accessibilityLabel ?? alt}
-        source={src}
-        style={styles.image}
-        title={thumbnailTitle}
-      />
-    </Pressable>
-  )
-})
+          return [
+            pressableStyles,
+            index === activeIndex
+              ? [
+                  selectSelectedStyles({
+                    selectedBorderColor,
+                    selectedBorderWidth,
+                    padding,
+                    margin
+                  }),
+                  staticStyles.selectedPressableOutline
+                ]
+              : selectNonSelectedStyles({ borderWidth, padding, margin, selectedBorderWidth })
+          ]
+        }}
+        ref={ref}
+      >
+        <View style={[staticStyles.imageContainer, selectImageStyles(size)]}>
+          <Image
+            accessibilityIgnoresInvertColors
+            accessibilityLabel={accessibilityLabel ?? alt}
+            source={src}
+            style={selectImageStyles(size)}
+            title={thumbnailTitle}
+          />
+          {isVideo && playIcon && (
+            <View
+              style={staticStyles.playIconOverlayContainer}
+              testID={`play-icon-overlay-${index}`}
+            >
+              <View
+                style={[selectPlayIconCircleStyles(size), staticStyles.playIconCircleBackground]}
+              >
+                <Icon
+                  icon={playIcon}
+                  tokens={{
+                    ...selectPlayIconTokens(size),
+                    color: staticStyles.playIconSymbol.color
+                  }}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      </Pressable>
+    )
+  }
+)
 
 CarouselThumbnail.displayName = 'CarouselThumbnail'
 
 CarouselThumbnail.propTypes = {
+  /** Accessibility label for screen readers, overrides the alt text */
   accessibilityLabel: PropTypes.string,
+  /** Alt text for the thumbnail image */
   alt: PropTypes.string,
+  /** Zero-based index of this thumbnail within the carousel */
   index: PropTypes.number,
-  src: PropTypes.string
+  /**
+   * When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video.
+   */
+  isVideo: PropTypes.bool,
+  /** Image source URI (web) or local asset require() (native) */
+  src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 }
 
+const staticStyles = StyleSheet.create({
+  imageContainer: {
+    position: 'relative'
+  },
+  playIconOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selectedPressableOutline: { outlineStyle: 'none' },
+  playIconCircleBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  playIconSymbol: { color: 'rgb(255, 255, 255)' }
+})
+
 export default CarouselThumbnail

package/src/Carousel/CarouselThumbnailNavigation.jsx

@@ -27,11 +27,12 @@ const CarouselThumbnailNavigation = React.forwardRef(({ thumbnails = [] }, ref)
   return (
     <View style={containerStyles}>
       <StackWrap direction="row" tokens={stackWrapTokens} space={2} ref={ref}>
-        {thumbnails.map(({ accessibilityLabel, alt, src }, index) => (
+        {thumbnails.map(({ accessibilityLabel, alt, isVideo, src }, index) => (
           <CarouselThumbnail
             accessibilityLabel={accessibilityLabel}
             alt={alt}
             index={index}
+            isVideo={isVideo}
             key={src}
             src={src}
           />
@@ -47,9 +48,14 @@ CarouselThumbnailNavigation.propTypes = {
    */
   thumbnails: PropTypes.arrayOf(
     PropTypes.shape({
+      /** Accessibility label for the thumbnail image, used by assistive technologies. */
       accessibilityLabel: PropTypes.string,
+      /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
       alt: PropTypes.string,
-      src: PropTypes.string
+      /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+      isVideo: PropTypes.bool,
+      /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+      src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     })
   ).isRequired
 }

package/src/Footnote/FootnoteLink.jsx

@@ -14,22 +14,26 @@ import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-// The top property varies between devices due to how devices render the viewport.
-const selectTextStyle = ({ fontSize, lineHeight }) => ({
-  fontSize,
-  lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-  ...Platform.select({
-    ios: {
-      top: -fontSize / 2
-    },
-    android: {
-      top: fontSize / 4
+const HALF_FONT_SIZE = 2
+const QUARTER_FONT_SIZE = 4
+const DEFAULT_LINE_HEIGHT = 1
+const LINE_HEIGHT_MULTIPLIER = 2
+
+const selectTextStyle = ({ fontSize, lineHeight }) =>
+  Platform.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
     },
     web: {
-      top: -fontSize / 2.8
+      fontSize,
+      lineHeight:
+        lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
     }
   })
-})
 
 const FootnoteLink = React.forwardRef(
   ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }, ref) => {
@@ -70,6 +74,7 @@ const FootnoteLink = React.forwardRef(
 )
 
 FootnoteLink.displayName = 'FootnoteLink'
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink'
 
 const copyShape = PropTypes.shape({ a11yLabel: PropTypes.string.isRequired })
 

package/src/InputSupports/InputSupports.jsx

@@ -66,12 +66,7 @@ const InputSupports = React.forwardRef(
           />
         )}
         {typeof children === 'function'
-          ? children({
-              inputId,
-              ...a11yProps,
-              validation: feedbackValidation,
-              accessibilityDescribedBy: feedbackId
-            })
+          ? children({ inputId, ...a11yProps, validation: feedbackValidation })
           : children}
         {feedback || maxCharsReachedErrorMessage ? (
           <Feedback

package/src/InputSupports/useInputSupports.js

@@ -31,8 +31,8 @@ const useInputSupports = ({
         : undefined
     ]), // native only -> replaced with describedBy on web
     accessibilityDescribedBy: joinDefined([
-      !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
       hint && hintId,
+      (feedback && feedbackId) || undefined,
       charactersCount
         ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount)
         : undefined

package/src/Modal/Modal.jsx

@@ -262,7 +262,7 @@ const Modal = React.forwardRef(
           </View>
           {/* when a modal becomes open its first focusable element is being automatically focused */}
           {/* and we prefer the close button over backdrop */}
-          <TouchableWithoutFeedback onPress={isBackdropClickable && handleClose}>
+          <TouchableWithoutFeedback onPress={isBackdropClickable ? handleClose : undefined}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
         </ScrollView>

package/src/Progress/Progress.jsx

@@ -8,6 +8,9 @@ import ProgressContext from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const BORDER_SIDES = 2
+const CENTER_DIVISOR = 2
+
 const selectProgressStyles = ({
   backgroundColor,
   borderWidth,
@@ -24,6 +27,14 @@ const selectProgressStyles = ({
   ...applyShadowToken(shadow)
 })
 
+const selectBarWrapperStyles = ({ barHeight, borderRadius, borderWidth, height }) => ({
+  height: barHeight,
+  width: '100%',
+  position: 'absolute',
+  top: (height - borderWidth * BORDER_SIDES - barHeight) / CENTER_DIVISOR,
+  borderRadius
+})
+
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
  *
@@ -36,10 +47,11 @@ const selectProgressStyles = ({
  *
  * - Use the following tokens to customize the appearance:
  *   - `backgroundColor` for the background color of the progress container,
+ *   - `barHeight` to control the height of the progress bars displayed within the container,
  *   - `borderColor` to control the color of the border,
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `height` to control the height of the progress bar container.
  *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
@@ -62,8 +74,15 @@ const selectProgressStyles = ({
  */
 const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
-  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false
+  const { barHeight, height } = themeTokens
+
+  const content =
+    barHeight && barHeight !== height ? (
+      <View style={selectBarWrapperStyles(themeTokens)}>{children}</View>
+    ) : (
+      children
+    )
 
   return (
     <ProgressContext.Provider value={{ layers }}>
@@ -72,7 +91,7 @@ const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref)
         style={[staticStyles.progressContainer, selectProgressStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        {children}
+        {content}
       </View>
     </ProgressContext.Provider>
   )