@hero-design/rn 8.120.2 → 8.121.0

package/lib/index.js

@@ -2,6 +2,8 @@
 
 var reactNative = require('react-native');
 var React = require('react');
+var MaskedView = require('@react-native-masked-view/masked-view');
+var expoLinearGradient = require('expo-linear-gradient');
 var reactNativeVectorIcons = require('react-native-vector-icons');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
@@ -37,6 +39,7 @@ function _interopNamespaceCompat(e) {
 
 var reactNative__namespace = /*#__PURE__*/_interopNamespaceCompat(reactNative);
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+var MaskedView__default = /*#__PURE__*/_interopDefaultCompat(MaskedView);
 var Svg__default = /*#__PURE__*/_interopDefaultCompat(Svg);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultCompat(DateTimePicker);
 var RnSlider__default = /*#__PURE__*/_interopDefaultCompat(RnSlider);
@@ -5455,6 +5458,76 @@ var getShadows = function getShadows(palette) {
   }
 };
 
+var DIAGONAL_ANGLE = 282;
+var HORIZONTAL_ANGLE = 90;
+var DIAGONAL_LOCATIONS = [0, 0.2931, 0.993];
+var HORIZONTAL_LOCATIONS = [0, 0.25, 0.75];
+// Convert CSS gradient angle (degrees) to expo-linear-gradient start/end points.
+// Follows CSS convention: 0° = bottom→top, 90° = left→right,
+// 180° = top→bottom, 270° = right→left.
+var angleToPoints = function angleToPoints(angleDeg) {
+  var rad = (angleDeg - 90) * Math.PI / 180;
+  var x = Math.cos(rad);
+  var y = Math.sin(rad);
+  // Normalize so both components are in [0, 1]
+  var start = {
+    x: Math.round((1 - x) / 2 * 100) / 100,
+    y: Math.round((1 - y) / 2 * 100) / 100
+  };
+  var end = {
+    x: Math.round((1 + x) / 2 * 100) / 100,
+    y: Math.round((1 + y) / 2 * 100) / 100
+  };
+  return {
+    start: start,
+    end: end
+  };
+};
+var getGradients = function getGradients(systemPalette) {
+  var blueMedium = palette$9.blueMedium;
+  var pinkMedium = palette$9.pinkMedium;
+  var brandPrimary = systemPalette.primary;
+  var backgroundFallback = systemPalette.defaultGlobalSurface;
+  return {
+    aiDiagonal: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS
+    }),
+    aiDiagonal8: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.08,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal16: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.16,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal24: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.24,
+      backgroundFallback: backgroundFallback
+    }),
+    aiHorizontal: _objectSpread2(_objectSpread2({
+      angle: HORIZONTAL_ANGLE
+    }, angleToPoints(HORIZONTAL_ANGLE)), {}, {
+      colors: [brandPrimary, pinkMedium, brandPrimary],
+      locations: HORIZONTAL_LOCATIONS
+    })
+  };
+};
+
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var fonts = getFonts(scale.font);
   var fontSizes = getFontSizes(scale.fontSize);
@@ -5464,8 +5537,11 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var sizes = getSizes(scale.size);
   var radii = getRadii(scale.radius);
   var shadows = getShadows(systemPalette);
+  var gradients = getGradients(systemPalette);
   return {
-    colors: _objectSpread2({}, systemPalette),
+    colors: _objectSpread2(_objectSpread2({}, systemPalette), {}, {
+      gradients: gradients
+    }),
     fonts: fonts,
     fontSizes: fontSizes,
     lineHeights: lineHeights,
@@ -8095,7 +8171,7 @@ var StyledText$4 = index$c(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$O = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$Q = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 /**
  * @deprecated Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
  */
@@ -8111,7 +8187,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$Q);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__namespace.default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -8144,7 +8220,79 @@ var StyledCaption = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
+var ACCESSIBILITY_KEYS = ['accessible', 'accessibilityActions', 'accessibilityLabel', 'accessibilityRole', 'accessibilityState', 'accessibilityHint', 'accessibilityValue', 'onAccessibilityAction',
+// Android
+'accessibilityLabelledBy', 'accessibilityLiveRegion', 'importantForAccessibility',
+// iOS
+'accessibilityElementsHidden', 'accessibilityLanguage', 'accessibilityIgnoresInvertColors', 'accessibilityViewIsModal', 'onAccessibilityEscape', 'onAccessibilityTap', 'onMagicTap', 'accessibilityIgnoresInvertColors'];
+var pickAccessibilityProps = function pickAccessibilityProps(props) {
+  return ACCESSIBILITY_KEYS.filter(function (key) {
+    return key in props;
+  }).reduce(function (acc, key) {
+    return Object.assign(acc, _defineProperty({}, key, props[key]));
+  }, {});
+};
+
+var _excluded$P = ["children"];
+var GradientText = function GradientText(_ref) {
+  var children = _ref.children,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$P);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var onLayout = React.useCallback(function (event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      width = _event$nativeEvent$la.width,
+      height = _event$nativeEvent$la.height;
+    setSize(function (prevSize) {
+      if (prevSize && prevSize.width === width && prevSize.height === height) {
+        return prevSize;
+      }
+      return {
+        width: width,
+        height: height
+      };
+    });
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, accessibilityProps, /*#__PURE__*/React__namespace.default.createElement(MaskedView__default.default, {
+    style: {
+      alignSelf: 'stretch'
+    },
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    maskElement: /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+      onLayout: onLayout,
+      style: {
+        backgroundColor: 'transparent'
+      },
+      testID: "gradient-text-mask"
+    }, children)
+  }, size ? /*#__PURE__*/React__namespace.default.createElement(expoLinearGradient.LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size.width,
+      height: size.height
+    }
+  }) :
+  // Render children as fallback until layout is measured, so text
+  // is visible immediately rather than blank on the first frame.
+  children), /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    style: {
+      position: 'absolute',
+      opacity: 0
+    },
+    importantForAccessibility: "yes",
+    accessibilityElementsHidden: false
+  }, children));
+};
+
+var _excluded$O = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8155,13 +8303,22 @@ var Caption = function Caption(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledCaption, _extends$1({}, nativeProps, {
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledLabel$1 = index$c(reactNative.Text)(function (_ref) {
@@ -8180,7 +8337,7 @@ var StyledLabel$1 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$N = ["children", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8189,12 +8346,21 @@ var Label = function Label(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
-    themeIntent: intent,
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledTitle$1 = index$c(reactNative.Text)(function (_ref) {
@@ -8212,7 +8378,7 @@ var StyledTitle$1 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
+var _excluded$M = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8225,14 +8391,23 @@ var Title = function Title(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var FONTWEIGHT_MAP = {
@@ -8264,7 +8439,7 @@ var StyledBody$2 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8277,14 +8452,23 @@ var Body = function Body(_ref) {
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeVariant: variant,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var Typography = {
@@ -8894,10 +9078,10 @@ var StyledHeroIcon = index$c(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$J = ["style"];
-var AnimatedIcon = function AnimatedIcon(_ref) {
-  var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$J);
+var SpinWrapper = function SpinWrapper(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    testID = _ref.testID;
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -8908,22 +9092,74 @@ var AnimatedIcon = function AnimatedIcon(_ref) {
     }));
     animation.start();
     return function () {
-      animation.stop();
+      return animation.stop();
     };
   }, []);
-  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+  var rotate = rotateAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '360deg']
   });
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.Animated.View, {
+    testID: testID,
     style: [{
       transform: [{
-        rotate: interpolatedRotateAnimation
+        rotate: rotate
       }]
     }, style]
+  }, children);
+};
+
+var _excluded$K = ["style"];
+var AnimatedIcon = function AnimatedIcon(_ref) {
+  var style = _ref.style,
+    otherProps = _objectWithoutProperties(_ref, _excluded$K);
+  return /*#__PURE__*/React__namespace.default.createElement(SpinWrapper, {
+    style: style
   }, /*#__PURE__*/React__namespace.default.createElement(StyledHeroIcon, otherProps));
 };
 
+var _excluded$J = ["name", "themeSize", "testID", "style"];
+var GradientIcon = function GradientIcon(_ref) {
+  var name = _ref.name,
+    themeSize = _ref.themeSize,
+    testID = _ref.testID,
+    style = _ref.style,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$J);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var size = theme.__hd__.icon.sizes[themeSize];
+  return /*#__PURE__*/React__namespace.default.createElement(MaskedView__default.default, _extends$1({
+    testID: testID,
+    style: [{
+      width: size,
+      height: size
+    }, style]
+  }, accessibilityProps, {
+    maskElement: /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+      style: {
+        backgroundColor: 'transparent',
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React__namespace.default.createElement(StyledHeroIcon, {
+      name: name,
+      themeIntent: "text",
+      themeSize: themeSize
+    }))
+  }), /*#__PURE__*/React__namespace.default.createElement(expoLinearGradient.LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size,
+      height: size
+    }
+  }));
+};
+
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
     style = _ref.style,
@@ -8959,6 +9195,20 @@ var Icon = function Icon(_ref) {
     accessibilityViewIsModal: accessibilityViewIsModal,
     accessibilityActions: accessibilityActions
   };
+  if (intent === 'ai') {
+    var gradientIcon = /*#__PURE__*/React__namespace.default.createElement(GradientIcon, _extends$1({
+      name: icon,
+      themeSize: size,
+      testID: testID,
+      style: spin ? undefined : style
+    }, accessibilityProps));
+    if (spin) {
+      return /*#__PURE__*/React__namespace.default.createElement(SpinWrapper, {
+        style: style
+      }, gradientIcon);
+    }
+    return gradientIcon;
+  }
   return spin ? /*#__PURE__*/React__namespace.default.createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.120.2",
+  "version": "8.121.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,6 +33,8 @@
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-native-community/slider": "^5.0.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "expo-linear-gradient": ">=14.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
@@ -61,6 +63,7 @@
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "^5.0.1",
+    "@react-native-masked-view/masked-view": "0.3.2",
     "@react-native/babel-preset": "0.81.5",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
@@ -81,6 +84,7 @@
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.5",
+    "expo-linear-gradient": "55.0.9",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",

package/rollup.config.mjs

@@ -33,6 +33,8 @@ export default [
       },
     ],
     external: [
+      '@react-native-masked-view/masked-view',
+      'expo-linear-gradient',
       'react',
       'react-native',
       'react-native-safe-area-context',

package/src/components/Icon/AnimatedIcon.tsx

@@ -1,47 +1,14 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Easing } from 'react-native';
+import React from 'react';
 import type { ComponentProps } from 'react';
 import StyledHeroIcon from './HeroIcon';
+import SpinWrapper from './SpinWrapper';
 
 type AnimatedIconProps = ComponentProps<typeof StyledHeroIcon>;
 
-const AnimatedIcon = ({ style, ...otherProps }: AnimatedIconProps) => {
-  const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
-
-  useEffect(() => {
-    const animation = Animated.loop(
-      Animated.timing(rotateAnimation.current, {
-        toValue: 1,
-        duration: 1000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      })
-    );
-
-    animation.start();
-
-    return () => {
-      animation.stop();
-    };
-  }, []);
-
-  const interpolatedRotateAnimation = rotateAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <Animated.View
-      style={[
-        {
-          transform: [{ rotate: interpolatedRotateAnimation }],
-        },
-        style,
-      ]}
-    >
-      <StyledHeroIcon {...otherProps} />
-    </Animated.View>
-  );
-};
+const AnimatedIcon = ({ style, ...otherProps }: AnimatedIconProps) => (
+  <SpinWrapper style={style}>
+    <StyledHeroIcon {...otherProps} />
+  </SpinWrapper>
+);
 
 export default AnimatedIcon;

package/src/components/Icon/GradientIcon/index.tsx

@@ -0,0 +1,71 @@
+import MaskedView from '@react-native-masked-view/masked-view';
+import { LinearGradient } from 'expo-linear-gradient';
+import React from 'react';
+import type { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+import { useTheme } from '../../../theme';
+import StyledHeroIcon from '../HeroIcon';
+import type { IconName } from '..';
+
+type GradientIconSize =
+  | 'xxxsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge';
+
+interface GradientIconProps extends AccessibilityProps {
+  name: IconName;
+  themeSize: GradientIconSize;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const GradientIcon = ({
+  name,
+  themeSize,
+  testID,
+  style,
+  ...accessibilityProps
+}: GradientIconProps) => {
+  const theme = useTheme();
+  const gradient = theme.colors.gradients.aiDiagonal;
+  const size = theme.__hd__.icon.sizes[themeSize];
+
+  return (
+    <MaskedView
+      testID={testID}
+      style={[{ width: size, height: size }, style]}
+      {...accessibilityProps}
+      maskElement={
+        <View
+          style={{
+            backgroundColor: 'transparent',
+            width: size,
+            height: size,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <StyledHeroIcon
+            name={name}
+            themeIntent="text"
+            themeSize={themeSize}
+          />
+        </View>
+      }
+    >
+      <LinearGradient
+        start={gradient.start}
+        end={gradient.end}
+        colors={gradient.colors}
+        locations={gradient.locations}
+        style={{ width: size, height: size }}
+      />
+    </MaskedView>
+  );
+};
+
+export default GradientIcon;

package/src/components/Icon/SpinWrapper.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Easing } from 'react-native';
+
+export interface SpinWrapperProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const SpinWrapper = ({ children, style, testID }: SpinWrapperProps) => {
+  const rotateAnimation = useRef(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(rotateAnimation.current, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+    animation.start();
+    return () => animation.stop();
+  }, []);
+
+  const rotate = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View testID={testID} style={[{ transform: [{ rotate }] }, style]}>
+      {children}
+    </Animated.View>
+  );
+};
+
+export default SpinWrapper;