@telus-uds/components-base 1.89.0 → 1.90.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 19 Jul 2024 18:14:09 GMT and should not be manually modified.
+This log was last generated on Fri, 26 Jul 2024 21:17:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.90.0
+
+Fri, 26 Jul 2024 21:17:56 GMT
+
+### Minor changes
+
+- `Status`: add component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.60.0
+
+### Patches
+
+- Conditionally add iconSpace on mobile if we have an icon to render (jaime.tuyuc@telus.com)
+- `Carousel`: fix accessibility issue, remove unused accessibilityValue (<tony.eng@telus.com>)
+
 ## 1.89.0
 
-Fri, 19 Jul 2024 18:14:09 GMT
+Fri, 19 Jul 2024 18:20:50 GMT
 
 ### Minor changes
 

package/lib/Button/ButtonBase.js

@@ -306,7 +306,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
           icon: IconComponent,
           iconPosition: iconPosition,
-          space: iconSpace,
+          space: icon ? iconSpace : 0,
           iconProps: {
             ...iconProps,
             tokens: iconTokens

package/lib/Carousel/Carousel.js

@@ -552,12 +552,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const systemProps = selectProps({
     ...rest,
     accessibilityRole,
-    accessibilityLabel,
-    accessibilityValue: {
-      min: 1,
-      max: childrenArray.length,
-      now: activeIndex + 1
-    }
+    accessibilityLabel
   });
 
   // If container isn't used for focus, give it a label of title if none is passed in,

package/lib/Status/Status.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    backgroundColor,
+    backgroundGradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+  if (backgroundGradient) {
+    if (_Platform.default.OS === 'web') {
+      styles.background = (0, _utils.transformGradient)(backgroundGradient);
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient;
+      styles.gradient = {};
+      styles.gradient.start = {
+        x: 0,
+        y: 0
+      };
+      styles.gradient.end = {
+        x: 1,
+        y: 1
+      };
+      styles.gradient.colors = [stopOne.color, stopTwo.color];
+    }
+  } else {
+    styles.backgroundColor = backgroundColor;
+  }
+  return styles;
+};
+const selectIconProps = _ref2 => {
+  let {
+    icon,
+    iconColor
+  } = _ref2;
+  return {
+    icon,
+    tokens: {
+      color: iconColor
+    },
+    variant: {
+      size: 'small'
+    }
+  };
+};
+const selectTextStyles = _ref3 => {
+  let {
+    textColor,
+    textLineHeight,
+    fontName,
+    fontSize,
+    fontWeight
+  } = _ref3;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: _Platform.default.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft: 8
+  });
+};
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    customGradient,
+    ...rest
+  } = _ref4;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Status', tokens, variant);
+  const containerStyles = {
+    ...selectContainerStyles(themeTokens),
+    ...staticStyles.container
+  };
+  let content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      ...selectIconProps(themeTokens)
+    }), (0, _utils.wrapStringsInText)(children, {
+      style: selectTextStyles(themeTokens)
+    })]
+  });
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: containerStyles,
+    ...selectProps(rest),
+    children: content
+  });
+});
+Status.displayName = 'Status';
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('Status'),
+  variant: _utils.variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: _propTypes.default.func
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ..._Platform.default.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+});
+var _default = Status;
+exports.default = _default;

package/lib/Status/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Status = _interopRequireDefault(require("./Status"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _Status.default;
+exports.default = _default;

package/lib/index.js

@@ -54,6 +54,7 @@ var _exportNames = {
   SkipLink: true,
   Spacer: true,
   StackView: true,
+  Status: true,
   StepTracker: true,
   Tabs: true,
   Tags: true,
@@ -398,6 +399,12 @@ Object.defineProperty(exports, "StackView", {
     return _StackView.default;
   }
 });
+Object.defineProperty(exports, "Status", {
+  enumerable: true,
+  get: function () {
+    return _Status.default;
+  }
+});
 Object.defineProperty(exports, "StepTracker", {
   enumerable: true,
   get: function () {
@@ -678,6 +685,7 @@ Object.keys(_StackView).forEach(function (key) {
     }
   });
 });
+var _Status = _interopRequireDefault(require("./Status"));
 var _StepTracker = _interopRequireDefault(require("./StepTracker"));
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 var _Tags = _interopRequireDefault(require("./Tags"));

package/lib/utils/index.js

@@ -16,7 +16,8 @@ var _exportNames = {
   withLinkRouter: true,
   containUniqueFields: true,
   BaseView: true,
-  htmlAttrs: true
+  htmlAttrs: true,
+  transformGradient: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -42,6 +43,12 @@ Object.defineProperty(exports, "info", {
     return _info.default;
   }
 });
+Object.defineProperty(exports, "transformGradient", {
+  enumerable: true,
+  get: function () {
+    return _transformGradient.transformGradient;
+  }
+});
 Object.defineProperty(exports, "useCopy", {
   enumerable: true,
   get: function () {
@@ -216,6 +223,7 @@ Object.keys(_ssr).forEach(function (key) {
 var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields"));
 var _BaseView = _interopRequireDefault(require("./BaseView"));
 var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
+var _transformGradient = require("./transformGradient");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/transformGradient.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformGradient = exports.default = void 0;
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
+ * @returns {string} The CSS gradient string.
+ */
+const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
+exports.transformGradient = transformGradient;
+var _default = {
+  transformGradient
+};
+exports.default = _default;

package/lib-module/Button/ButtonBase.js

@@ -299,7 +299,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
         children: /*#__PURE__*/_jsx(IconText, {
           icon: IconComponent,
           iconPosition: iconPosition,
-          space: iconSpace,
+          space: icon ? iconSpace : 0,
           iconProps: {
             ...iconProps,
             tokens: iconTokens

package/lib-module/Carousel/Carousel.js

@@ -546,12 +546,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const systemProps = selectProps({
     ...rest,
     accessibilityRole,
-    accessibilityLabel,
-    accessibilityValue: {
-      min: 1,
-      max: childrenArray.length,
-      now: activeIndex + 1
-    }
+    accessibilityLabel
   });
 
   // If container isn't used for focus, give it a label of title if none is passed in,

package/lib-module/Status/Status.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, transformGradient } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    backgroundColor,
+    backgroundGradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+  if (backgroundGradient) {
+    if (Platform.OS === 'web') {
+      styles.background = transformGradient(backgroundGradient);
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient;
+      styles.gradient = {};
+      styles.gradient.start = {
+        x: 0,
+        y: 0
+      };
+      styles.gradient.end = {
+        x: 1,
+        y: 1
+      };
+      styles.gradient.colors = [stopOne.color, stopTwo.color];
+    }
+  } else {
+    styles.backgroundColor = backgroundColor;
+  }
+  return styles;
+};
+const selectIconProps = _ref2 => {
+  let {
+    icon,
+    iconColor
+  } = _ref2;
+  return {
+    icon,
+    tokens: {
+      color: iconColor
+    },
+    variant: {
+      size: 'small'
+    }
+  };
+};
+const selectTextStyles = _ref3 => {
+  let {
+    textColor,
+    textLineHeight,
+    fontName,
+    fontSize,
+    fontWeight
+  } = _ref3;
+  return applyTextStyles({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft: 8
+  });
+};
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    customGradient,
+    ...rest
+  } = _ref4;
+  const themeTokens = useThemeTokens('Status', tokens, variant);
+  const containerStyles = {
+    ...selectContainerStyles(themeTokens),
+    ...staticStyles.container
+  };
+  let content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      ...selectIconProps(themeTokens)
+    }), wrapStringsInText(children, {
+      style: selectTextStyles(themeTokens)
+    })]
+  });
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content);
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: containerStyles,
+    ...selectProps(rest),
+    children: content
+  });
+});
+Status.displayName = 'Status';
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Status'),
+  variant: variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: PropTypes.func
+};
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+});
+export default Status;

package/lib-module/Status/index.js

@@ -0,0 +1,2 @@
+import Status from './Status';
+export default Status;

package/lib-module/index.js

@@ -53,6 +53,7 @@ export { default as SkipLink } from './SkipLink';
 export { default as Spacer } from './Spacer';
 export { default as StackView } from './StackView';
 export * from './StackView';
+export { default as Status } from './Status';
 export { default as StepTracker } from './StepTracker';
 export { default as Tabs } from './Tabs';
 export { default as Tags } from './Tags';

package/lib-module/utils/index.js

@@ -19,4 +19,5 @@ export { default as withLinkRouter } from './withLinkRouter';
 export * from './ssr';
 export { default as containUniqueFields } from './containUniqueFields';
 export { default as BaseView } from './BaseView';
-export { default as htmlAttrs } from './htmlAttrs';
+export { default as htmlAttrs } from './htmlAttrs';
+export { transformGradient } from './transformGradient';

package/lib-module/utils/transformGradient.js

@@ -0,0 +1,15 @@
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
+ * @returns {string} The CSS gradient string.
+ */
+export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
+export default {
+  transformGradient
+};

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.59.0",
+    "@telus-uds/system-theme-tokens": "^2.60.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.89.0",
+  "version": "1.90.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonBase.jsx

@@ -276,7 +276,7 @@ const ButtonBase = React.forwardRef(
               <IconText
                 icon={IconComponent}
                 iconPosition={iconPosition}
-                space={iconSpace}
+                space={icon ? iconSpace : 0}
                 iconProps={{ ...iconProps, tokens: iconTokens }}
               >
                 {wrapStringsInText(

package/src/Carousel/Carousel.jsx

@@ -616,12 +616,7 @@ const Carousel = React.forwardRef(
     const systemProps = selectProps({
       ...rest,
       accessibilityRole,
-      accessibilityLabel,
-      accessibilityValue: {
-        min: 1,
-        max: childrenArray.length,
-        now: activeIndex + 1
-      }
+      accessibilityLabel
     })
 
     // If container isn't used for focus, give it a label of title if none is passed in,

package/src/Status/Status.jsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText,
+  transformGradient
+} from '../utils'
+
+import Icon from '../Icon'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const selectContainerStyles = ({
+  backgroundColor,
+  backgroundGradient,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop
+}) => {
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  }
+
+  if (backgroundGradient) {
+    if (Platform.OS === 'web') {
+      styles.background = transformGradient(backgroundGradient)
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient
+      styles.gradient = {}
+      styles.gradient.start = { x: 0, y: 0 }
+      styles.gradient.end = { x: 1, y: 1 }
+      styles.gradient.colors = [stopOne.color, stopTwo.color]
+    }
+  } else {
+    styles.backgroundColor = backgroundColor
+  }
+
+  return styles
+}
+
+const selectIconProps = ({ icon, iconColor }) => ({
+  icon,
+  tokens: { color: iconColor },
+  variant: { size: 'small' }
+})
+
+const selectTextStyles = ({ textColor, textLineHeight, fontName, fontSize, fontWeight }) =>
+  applyTextStyles({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft: 8
+  })
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = React.forwardRef(({ tokens, variant, children, customGradient, ...rest }, ref) => {
+  const themeTokens = useThemeTokens('Status', tokens, variant)
+  const containerStyles = { ...selectContainerStyles(themeTokens), ...staticStyles.container }
+
+  let content = (
+    <>
+      <Icon {...selectIconProps(themeTokens)} />
+      {wrapStringsInText(children, { style: selectTextStyles(themeTokens) })}
+    </>
+  )
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content)
+  }
+
+  return (
+    <View ref={ref} style={containerStyles} {...selectProps(rest)}>
+      {content}
+    </View>
+  )
+})
+
+Status.displayName = 'Status'
+
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Status'),
+  variant: variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: PropTypes.func
+}
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+})
+
+export default Status

package/src/Status/index.js

@@ -0,0 +1,3 @@
+import Status from './Status'
+
+export default Status

package/src/index.js

@@ -53,6 +53,7 @@ export { default as SkipLink } from './SkipLink'
 export { default as Spacer } from './Spacer'
 export { default as StackView } from './StackView'
 export * from './StackView'
+export { default as Status } from './Status'
 export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
 export { default as Tags } from './Tags'

package/src/utils/index.js

@@ -20,3 +20,4 @@ export * from './ssr'
 export { default as containUniqueFields } from './containUniqueFields'
 export { default as BaseView } from './BaseView'
 export { default as htmlAttrs } from './htmlAttrs'
+export { transformGradient } from './transformGradient'

package/src/utils/transformGradient.js

@@ -0,0 +1,17 @@
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
+ * @returns {string} The CSS gradient string.
+ */
+export const transformGradient = (gradient) =>
+  `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${
+    gradient.stops[0].stop * 100
+  }%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`
+
+export default { transformGradient }