@hero-design/rn 8.120.2 → 8.121.0

package/src/components/Icon/index.tsx

@@ -3,6 +3,8 @@ import type { AccessibilityProps, StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 import AnimatedIcon from './AnimatedIcon';
+import GradientIcon from './GradientIcon';
+import SpinWrapper from './SpinWrapper';
 import { useDeprecation } from '../../utils/hooks';
 
 export type IconName = typeof IconList[number];
@@ -28,7 +30,8 @@ export interface IconProps extends AccessibilityProps {
     | 'disabled-text'
     | 'text-inverted'
     | 'muted'
-    | 'inactive';
+    | 'inactive'
+    | 'ai';
   /**
    * Size of the Icon.
    */
@@ -87,6 +90,24 @@ const Icon = ({
     accessibilityActions,
   };
 
+  if (intent === 'ai') {
+    const gradientIcon = (
+      <GradientIcon
+        name={icon}
+        themeSize={size}
+        testID={testID}
+        style={spin ? undefined : style}
+        {...accessibilityProps}
+      />
+    );
+
+    if (spin) {
+      return <SpinWrapper style={style}>{gradientIcon}</SpinWrapper>;
+    }
+
+    return gradientIcon;
+  }
+
   return spin ? (
     <AnimatedIcon
       name={icon}

package/src/components/Toolbar/StyledToolbar.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/native';
 import { TextInput, TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import Typography from '../Typography';
-import type { BodyProps } from '../Typography/Body';
+import type { TypographyColorIntent } from '../Typography/types';
 
 export type ToolbarMessageState =
   | 'default'
@@ -63,7 +63,7 @@ const IconButtonLabel = styled(Typography.Body)(({ theme }) => ({
 }));
 
 const StyledLabel = styled(Typography.Body)<{
-  intent: Exclude<BodyProps['intent'], undefined>;
+  intent: TypographyColorIntent;
 }>(({ theme, intent }) => ({
   color:
     intent === 'secondary'

package/src/components/Typography/Body/StyledBody.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import { Text } from 'react-native';
-import type { TypographyIntent } from '../types';
+import type { TypographyColorIntent } from '../types';
 
 type ThemeVariant = 'small' | 'small-bold' | 'regular' | 'regular-bold';
 type FontWeights = 'regular' | 'semiBold';
@@ -20,7 +20,7 @@ const FONTSIZE_MAP: Record<ThemeVariant, FontSizes> = {
   'small-bold': 'small',
 } as const;
 const StyledBody = styled(Text)<{
-  themeIntent: TypographyIntent;
+  themeIntent: TypographyColorIntent;
   themeTypeface: 'neutral' | 'playful';
   themeVariant: ThemeVariant;
   themeIsItalic?: boolean;

package/src/components/Typography/Body/index.tsx

@@ -6,7 +6,9 @@ import type {
   TextStyle,
 } from 'react-native';
 import type { TypographyIntent } from '../types';
+import { pickAccessibilityProps } from '../utils';
 import { StyledBody } from './StyledBody';
+import GradientText from '../GradientText';
 
 export interface BodyProps extends NativeTextProps {
   /**
@@ -48,20 +50,36 @@ const Body = ({
   typeface = 'neutral',
   variant = 'regular',
   fontStyle = 'normal',
+  style,
+  testID,
   ...nativeProps
 }: BodyProps) => {
-  return (
+  const isAi = intent === 'ai';
+
+  const styledText = (
     <StyledBody
       {...nativeProps}
       themeTypeface={typeface}
-      themeIntent={intent}
+      themeIntent={isAi ? 'body' : intent}
       themeVariant={variant}
       themeIsItalic={fontStyle === 'italic'}
       allowFontScaling={allowFontScaling}
+      style={style}
+      testID={testID}
     >
       {children}
     </StyledBody>
   );
+
+  if (isAi) {
+    return (
+      <GradientText {...pickAccessibilityProps(nativeProps)}>
+        {styledText}
+      </GradientText>
+    );
+  }
+
+  return styledText;
 };
 
 export default Body;

package/src/components/Typography/Caption/StyledCaption.tsx

@@ -1,11 +1,11 @@
 import { Text } from 'react-native';
 import styled from '@emotion/native';
-import type { TypographyIntent } from '../types';
+import type { TypographyColorIntent } from '../types';
 import { FONTWEIGHT_MAP } from '../types';
 
 const StyledCaption = styled(Text)<{
   themeFontWeight: 'regular' | 'semi-bold';
-  themeIntent: TypographyIntent;
+  themeIntent: TypographyColorIntent;
   themeIsItalic?: boolean;
 }>(({ themeFontWeight, themeIntent, theme, themeIsItalic }) => {
   const baseFontWeight = FONTWEIGHT_MAP[themeFontWeight];

package/src/components/Typography/Caption/index.tsx

@@ -7,6 +7,8 @@ import type {
 } from 'react-native';
 import { StyledCaption } from './StyledCaption';
 import type { TypographyIntent } from '../types';
+import { pickAccessibilityProps } from '../utils';
+import GradientText from '../GradientText';
 
 export interface CaptionProps extends NativeTextProps {
   /**
@@ -41,19 +43,35 @@ const Caption = ({
   intent = 'body',
   allowFontScaling = false,
   fontStyle = 'normal',
+  style,
+  testID,
   ...nativeProps
 }: CaptionProps) => {
-  return (
+  const isAi = intent === 'ai';
+
+  const styledText = (
     <StyledCaption
       {...nativeProps}
       themeFontWeight={fontWeight}
-      themeIntent={intent}
+      themeIntent={isAi ? 'body' : intent}
       themeIsItalic={fontStyle === 'italic'}
       allowFontScaling={allowFontScaling}
+      style={style}
+      testID={testID}
     >
       {children}
     </StyledCaption>
   );
+
+  if (isAi) {
+    return (
+      <GradientText {...pickAccessibilityProps(nativeProps)}>
+        {styledText}
+      </GradientText>
+    );
+  }
+
+  return styledText;
 };
 
 export default Caption;

package/src/components/Typography/GradientText/index.tsx

@@ -0,0 +1,85 @@
+import MaskedView from '@react-native-masked-view/masked-view';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useCallback, useState } from 'react';
+import type { AccessibilityProps, LayoutChangeEvent } from 'react-native';
+import { View } from 'react-native';
+
+import { useTheme } from '../../../theme';
+
+interface GradientTextProps extends AccessibilityProps {
+  children: React.ReactNode;
+}
+
+const GradientText = ({
+  children,
+  ...accessibilityProps
+}: GradientTextProps) => {
+  const theme = useTheme();
+  const gradient = theme.colors.gradients.aiDiagonal;
+  const [size, setSize] = useState<{ width: number; height: number } | null>(
+    null
+  );
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setSize((prevSize) => {
+      if (prevSize && prevSize.width === width && prevSize.height === height) {
+        return prevSize;
+      }
+      return { width, height };
+    });
+  }, []);
+
+  return (
+    <View {...accessibilityProps}>
+      {/*
+       * MaskedView is entirely hidden from the accessibility tree.
+       * It is purely visual: the mask defines the text clip shape and
+       * the content shows either a gradient or a visible fallback.
+       * Screen readers must not traverse into either branch here.
+       */}
+      <MaskedView
+        style={{ alignSelf: 'stretch' }}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        maskElement={
+          <View
+            onLayout={onLayout}
+            style={{ backgroundColor: 'transparent' }}
+            testID="gradient-text-mask"
+          >
+            {children}
+          </View>
+        }
+      >
+        {size ? (
+          <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
+        )}
+      </MaskedView>
+      {/*
+       * Visually hidden but accessible: the single Text node that
+       * screen readers announce. Kept outside MaskedView so it is
+       * always present and never duplicated.
+       */}
+      <View
+        style={{ position: 'absolute', opacity: 0 }}
+        importantForAccessibility="yes"
+        accessibilityElementsHidden={false}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export default GradientText;

package/src/components/Typography/Label/StyledLabel.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/native';
 import { Text } from 'react-native';
-import type { TypographyIntent } from '../types';
+import type { TypographyColorIntent } from '../types';
 
 const StyledLabel = styled(Text)<{
-  themeIntent: TypographyIntent;
+  themeIntent: TypographyColorIntent;
   themeIsItalic?: boolean;
 }>(({ themeIntent, theme, themeIsItalic }) => {
   // For Label, we assume 'regular' weight for base font family

package/src/components/Typography/Label/index.tsx

@@ -7,6 +7,8 @@ import type {
 } from 'react-native';
 import { StyledLabel } from './StyledLabel';
 import type { TypographyIntent } from '../types';
+import { pickAccessibilityProps } from '../utils';
+import GradientText from '../GradientText';
 
 export interface LabelProps extends NativeTextProps {
   /**
@@ -36,18 +38,34 @@ const Label = ({
   intent = 'body',
   allowFontScaling = false,
   fontStyle = 'normal',
+  style,
+  testID,
   ...nativeProps
 }: LabelProps) => {
-  return (
+  const isAi = intent === 'ai';
+
+  const styledText = (
     <StyledLabel
       {...nativeProps}
-      themeIntent={intent}
+      themeIntent={isAi ? 'body' : intent}
       themeIsItalic={fontStyle === 'italic'}
       allowFontScaling={allowFontScaling}
+      style={style}
+      testID={testID}
     >
       {children}
     </StyledLabel>
   );
+
+  if (isAi) {
+    return (
+      <GradientText {...pickAccessibilityProps(nativeProps)}>
+        {styledText}
+      </GradientText>
+    );
+  }
+
+  return styledText;
 };
 
 export default Label;

package/src/components/Typography/Title/StyledTitle.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/native';
 import { Text } from 'react-native';
-import type { TypographyIntent } from '../types';
+import type { TypographyColorIntent } from '../types';
 
 type ThemeLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 const StyledTitle = styled(Text)<{
-  themeIntent: TypographyIntent;
+  themeIntent: TypographyColorIntent;
   themeLevel: ThemeLevel;
   themeTypeface: 'neutral' | 'playful';
   themeIsItalic?: boolean;

package/src/components/Typography/Title/index.tsx

@@ -6,7 +6,9 @@ import type {
   TextStyle,
 } from 'react-native';
 import type { TypographyIntent } from '../types';
+import { pickAccessibilityProps } from '../utils';
 import { StyledTitle } from './StyledTitle';
+import GradientText from '../GradientText';
 
 export interface TitleProps extends NativeTextProps {
   /**
@@ -31,7 +33,6 @@ export interface TitleProps extends NativeTextProps {
    * - `playful`: To visualise a playful content.
    */
   typeface?: 'neutral' | 'playful';
-
   /**
    * The level of Title including h1, h2, h3, h4, h5 and h6.
    */
@@ -49,18 +50,36 @@ const Title = ({
   level = 'h1',
   typeface = 'neutral',
   fontStyle = 'normal',
+  style,
+  testID,
   ...nativeProps
-}: TitleProps) => (
-  <StyledTitle
-    {...nativeProps}
-    themeLevel={level}
-    themeTypeface={typeface}
-    themeIntent={intent}
-    themeIsItalic={fontStyle === 'italic'}
-    allowFontScaling={allowFontScaling}
-  >
-    {children}
-  </StyledTitle>
-);
+}: TitleProps) => {
+  const isAi = intent === 'ai';
+
+  const styledText = (
+    <StyledTitle
+      {...nativeProps}
+      themeLevel={level}
+      themeTypeface={typeface}
+      themeIntent={isAi ? 'body' : intent}
+      themeIsItalic={fontStyle === 'italic'}
+      allowFontScaling={allowFontScaling}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </StyledTitle>
+  );
+
+  if (isAi) {
+    return (
+      <GradientText {...pickAccessibilityProps(nativeProps)}>
+        {styledText}
+      </GradientText>
+    );
+  }
+
+  return styledText;
+};
 
 export default Title;

package/src/components/Typography/types.ts

@@ -4,7 +4,7 @@ export const FONTWEIGHT_MAP = {
   'semi-bold': 'semiBold',
 } as const;
 
-export type TypographyIntent =
+export type TypographyColorIntent =
   | 'body'
   | 'subdued'
   | 'primary'
@@ -18,3 +18,5 @@ export type TypographyIntent =
   | 'disabled'
   | 'muted'
   | 'inactive';
+
+export type TypographyIntent = TypographyColorIntent | 'ai';

package/src/components/Typography/utils.ts

@@ -0,0 +1,31 @@
+import type { AccessibilityProps, TextProps } from 'react-native';
+
+const ACCESSIBILITY_KEYS: ReadonlyArray<keyof AccessibilityProps> = [
+  'accessible',
+  'accessibilityActions',
+  'accessibilityLabel',
+  'accessibilityRole',
+  'accessibilityState',
+  'accessibilityHint',
+  'accessibilityValue',
+  'onAccessibilityAction',
+  // Android
+  'accessibilityLabelledBy',
+  'accessibilityLiveRegion',
+  'importantForAccessibility',
+  // iOS
+  'accessibilityElementsHidden',
+  'accessibilityLanguage',
+  'accessibilityIgnoresInvertColors',
+  'accessibilityViewIsModal',
+  'onAccessibilityEscape',
+  'onAccessibilityTap',
+  'onMagicTap',
+  'accessibilityIgnoresInvertColors',
+];
+
+export const pickAccessibilityProps = (props: TextProps): AccessibilityProps =>
+  ACCESSIBILITY_KEYS.filter((key) => key in props).reduce<AccessibilityProps>(
+    (acc, key) => Object.assign(acc, { [key]: props[key] }),
+    {}
+  );

package/src/theme/global/colors/gradients.ts

@@ -0,0 +1,78 @@
+import { mobileVisualisationPalette } from '@hero-design/colors';
+
+import type { GradientPoint, Gradients, SystemPalette } from './types';
+
+const DIAGONAL_ANGLE = 282;
+const HORIZONTAL_ANGLE = 90;
+
+const DIAGONAL_LOCATIONS = [0, 0.2931, 0.993] as const;
+const HORIZONTAL_LOCATIONS = [0, 0.25, 0.75] as const;
+
+// 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.
+const angleToPoints = (
+  angleDeg: number
+): { start: GradientPoint; end: GradientPoint } => {
+  const rad = ((angleDeg - 90) * Math.PI) / 180;
+  const x = Math.cos(rad);
+  const y = Math.sin(rad);
+  // Normalize so both components are in [0, 1]
+  const start = {
+    x: Math.round(((1 - x) / 2) * 100) / 100,
+    y: Math.round(((1 - y) / 2) * 100) / 100,
+  };
+  const end = {
+    x: Math.round(((1 + x) / 2) * 100) / 100,
+    y: Math.round(((1 + y) / 2) * 100) / 100,
+  };
+  return { start, end };
+};
+
+const getGradients = (systemPalette: SystemPalette): Gradients => {
+  const { blueMedium } = mobileVisualisationPalette;
+  const { pinkMedium } = mobileVisualisationPalette;
+  const brandPrimary = systemPalette.primary;
+  const backgroundFallback = systemPalette.defaultGlobalSurface;
+
+  return {
+    aiDiagonal: {
+      angle: DIAGONAL_ANGLE,
+      ...angleToPoints(DIAGONAL_ANGLE),
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+    },
+    aiDiagonal8: {
+      angle: DIAGONAL_ANGLE,
+      ...angleToPoints(DIAGONAL_ANGLE),
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.08,
+      backgroundFallback,
+    },
+    aiDiagonal16: {
+      angle: DIAGONAL_ANGLE,
+      ...angleToPoints(DIAGONAL_ANGLE),
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.16,
+      backgroundFallback,
+    },
+    aiDiagonal24: {
+      angle: DIAGONAL_ANGLE,
+      ...angleToPoints(DIAGONAL_ANGLE),
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.24,
+      backgroundFallback,
+    },
+    aiHorizontal: {
+      angle: HORIZONTAL_ANGLE,
+      ...angleToPoints(HORIZONTAL_ANGLE),
+      colors: [brandPrimary, pinkMedium, brandPrimary],
+      locations: HORIZONTAL_LOCATIONS,
+    },
+  };
+};
+
+export default getGradients;

package/src/theme/global/colors/types.ts

@@ -1,3 +1,5 @@
+import type { ColorValue } from 'react-native';
+
 export type GlobalSystemPalette = {
   // Updated 14 / Nov / 22
   // Surfaces
@@ -64,6 +66,26 @@ export type BrandSystemPalette = {
   decorativeSecondarySurface?: string;
 };
 
+export type GradientPoint = { x: number; y: number };
+
+export type GradientToken = {
+  angle: number;
+  start: GradientPoint;
+  end: GradientPoint;
+  colors: readonly [ColorValue, ColorValue, ...ColorValue[]];
+  locations: readonly [number, number, ...number[]];
+  opacity?: number;
+  backgroundFallback?: string;
+};
+
+export type Gradients = {
+  aiDiagonal: GradientToken;
+  aiDiagonal8: GradientToken;
+  aiDiagonal16: GradientToken;
+  aiDiagonal24: GradientToken;
+  aiHorizontal: GradientToken;
+};
+
 export type ThemeMode = 'light' | 'dark';
 type ThemeName =
   | 'swagLight'

package/src/theme/global/index.ts

@@ -16,8 +16,9 @@ import { getSpace } from './space';
 import { getSizes } from './sizes';
 import { getBorderWidths, getRadii } from './borders';
 import type { Scale } from './scale';
-import type { SystemPalette } from './colors/types';
+import type { GradientToken, Gradients, SystemPalette } from './colors/types';
 import { getShadows } from './shadows';
+import getGradients from './colors/gradients';
 
 const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const fonts = getFonts(scale.font);
@@ -28,10 +29,12 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const sizes = getSizes(scale.size);
   const radii = getRadii(scale.radius);
   const shadows = getShadows(systemPalette);
+  const gradients = getGradients(systemPalette);
 
   return {
     colors: {
       ...systemPalette,
+      gradients,
     },
     fonts,
     fontSizes,
@@ -46,7 +49,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
 
 type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 
-export type { GlobalTheme, Scale, SystemPalette };
+export type { GlobalTheme, GradientToken, Gradients, Scale, SystemPalette };
 
 export {
   getGlobalTheme,

package/testUtils/setup.tsx

@@ -110,6 +110,40 @@ jest.mock('react-native-webview', () => {
   };
 });
 
+jest.mock('@react-native-masked-view/masked-view', () => {
+  const React = jest.requireActual('react');
+  const { View } = jest.requireActual('react-native');
+
+  const MaskedView = ({
+    maskElement,
+    children,
+    style,
+    testID,
+  }: {
+    maskElement: React.ReactNode;
+    children: React.ReactNode;
+    style?: object;
+    testID?: string;
+  }) => React.createElement(View, { style, testID }, maskElement, children);
+
+  return { __esModule: true, default: MaskedView };
+});
+
+jest.mock('expo-linear-gradient', () => {
+  const React = jest.requireActual('react');
+  const { View } = jest.requireActual('react-native');
+
+  return {
+    LinearGradient: ({
+      children,
+      style,
+    }: {
+      children?: React.ReactNode;
+      style?: object;
+    }) => React.createElement(View, { style }, children),
+  };
+});
+
 jest.mock('hero-editor/dist/app.js', () => ({ default: '' }));
 
 jest.mock('react-native-gesture-handler', () => {

package/types/components/Icon/GradientIcon/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+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>;
+}
+declare const GradientIcon: ({ name, themeSize, testID, style, ...accessibilityProps }: GradientIconProps) => React.JSX.Element;
+export default GradientIcon;

package/types/components/Icon/SpinWrapper.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface SpinWrapperProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const SpinWrapper: ({ children, style, testID }: SpinWrapperProps) => React.JSX.Element;
+export default SpinWrapper;

package/types/components/Icon/index.d.ts

@@ -12,7 +12,7 @@ export interface IconProps extends AccessibilityProps {
     /**
      * Intent of the Icon.
      */
-    intent?: 'text' | 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted' | 'muted' | 'inactive';
+    intent?: 'text' | 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted' | 'muted' | 'inactive' | 'ai';
     /**
      * Size of the Icon.
      */