@hero-design/rn 8.121.0 → 8.123.0

package/src/components/InlineLoader/AnimatedGradientText.tsx

@@ -0,0 +1,135 @@
+import MaskedView from '@react-native-masked-view/masked-view';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { Animated, Easing, Platform, View } from 'react-native';
+import { useTheme } from '../../theme';
+import Typography from '../Typography';
+
+interface AnimatedGradientTextProps {
+  children: string;
+  fontSize: number;
+  lineHeight: number;
+}
+
+const ANIMATION_DURATION_MS = 2000;
+
+const AnimatedGradientText = ({
+  children,
+  fontSize,
+  lineHeight,
+}: AnimatedGradientTextProps) => {
+  const theme = useTheme();
+  const gradient = theme.colors.gradients.aiHorizontal;
+
+  const [size, setSize] = useState<{ width: number; height: number } | null>(
+    null
+  );
+  const animatedValue = useRef(new Animated.Value(0));
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setSize((prev) => {
+      if (prev?.width === width && prev?.height === height) return prev;
+      return { width, height };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!size) return;
+    animatedValue.current.setValue(0);
+    const animation = Animated.loop(
+      Animated.timing(animatedValue.current, {
+        toValue: 1,
+        duration: ANIMATION_DURATION_MS,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS !== 'web',
+      })
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [size]);
+
+  // Slide left by one full text-width per loop cycle.
+  // Starting at 0 keeps the gradient visible from the first frame.
+  const translateX = size
+    ? animatedValue.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, -size.width],
+      })
+    : animatedValue.current;
+
+  return (
+    <View>
+      <MaskedView
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        maskElement={
+          <View
+            onLayout={onLayout}
+            style={{ backgroundColor: 'transparent' }}
+            testID="animated-gradient-text-mask"
+          >
+            <Typography.Body intent="body" style={{ fontSize, lineHeight }}>
+              {children}
+            </Typography.Body>
+          </View>
+        }
+      >
+        {size ? (
+          <View
+            style={{
+              width: size.width,
+              height: size.height,
+              overflow: 'hidden',
+            }}
+          >
+            {/*
+             * Double the colour pattern so the gradient tiles seamlessly:
+             * [A, B, A, B, A] at equal spacing means the slice at
+             * translateX=0 looks identical to the slice at translateX=-width,
+             * eliminating the jump when the loop restarts.
+             */}
+            <Animated.View
+              style={{
+                width: size.width * 2,
+                height: size.height,
+                transform: [{ translateX }],
+              }}
+            >
+              <LinearGradient
+                start={gradient.start}
+                end={gradient.end}
+                colors={[
+                  gradient.colors[0],
+                  gradient.colors[1],
+                  gradient.colors[2],
+                  gradient.colors[1],
+                  gradient.colors[0],
+                ]}
+                locations={[0, 0.25, 0.5, 0.75, 1.0]}
+                style={{ width: '100%', height: '100%' }}
+              />
+            </Animated.View>
+          </View>
+        ) : (
+          <Typography.Body intent="body" style={{ fontSize, lineHeight }}>
+            {children}
+          </Typography.Body>
+        )}
+      </MaskedView>
+      {/* Visually hidden but accessible text for screen readers */}
+      <View
+        style={{ position: 'absolute', opacity: 0 }}
+        importantForAccessibility="yes"
+        accessibilityElementsHidden={false}
+      >
+        <Typography.Body intent="body" style={{ fontSize, lineHeight }}>
+          {children}
+        </Typography.Body>
+      </View>
+    </View>
+  );
+};
+
+export default AnimatedGradientText;

package/src/components/InlineLoader/InlineLoader.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import { useTheme } from '../../theme';
+import AnimatedGradientText from './AnimatedGradientText';
+import {
+  getIconName,
+  getIconIntent,
+  getIconSize,
+  getTextSizeName,
+} from './utils';
+import { StyledContainer, StyledIconContainer } from './StyledInlineLoader';
+import type {
+  InlineLoaderState,
+  InlineLoaderIntent,
+  InlineLoaderTextSize,
+} from './types';
+
+export interface InlineLoaderProps {
+  /**
+   * Text content displayed next to the icon.
+   */
+  text: string;
+  /**
+   * Current state of the loader.
+   */
+  state?: InlineLoaderState;
+  /**
+   * Visual intent.
+   */
+  intent?: InlineLoaderIntent;
+  /**
+   * Font size (px) — also controls icon size.
+   */
+  size?: InlineLoaderTextSize;
+  /**
+   * Additional container style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id.
+   */
+  testID?: string;
+}
+
+const InlineLoader = ({
+  text,
+  state = 'idle',
+  intent = 'neutral',
+  size = 14,
+  style,
+  testID,
+}: InlineLoaderProps) => {
+  const theme = useTheme();
+  const textSizeName = getTextSizeName(size);
+  const lineHeight = theme.__hd__.inlineLoader.icon.lineHeights[textSizeName];
+
+  const iconName = getIconName(state);
+  const iconIntent = getIconIntent(state, intent);
+  const { size: iconSize, styleFontSize } = getIconSize(size);
+
+  const iconStyle = styleFontSize ? { fontSize: styleFontSize } : undefined;
+  const isAiLoading = state === 'loading' && intent === 'ai';
+
+  return (
+    <StyledContainer testID={testID} style={style}>
+      <StyledIconContainer themeSize={textSizeName}>
+        <Icon
+          icon={iconName}
+          intent={iconIntent}
+          size={iconSize}
+          spin={state === 'loading'}
+          style={iconStyle}
+          accessible={false}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        />
+      </StyledIconContainer>
+      {isAiLoading ? (
+        <AnimatedGradientText fontSize={size} lineHeight={lineHeight}>
+          {text}
+        </AnimatedGradientText>
+      ) : (
+        <Typography.Body intent="body" style={{ fontSize: size, lineHeight }}>
+          {text}
+        </Typography.Body>
+      )}
+    </StyledContainer>
+  );
+};
+
+export default InlineLoader;

package/src/components/InlineLoader/StyledInlineLoader.tsx

@@ -0,0 +1,20 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import type { InlineLoaderTextSizeName } from './types';
+
+type ThemeSize = InlineLoaderTextSizeName;
+
+const StyledContainer = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  gap: theme.__hd__.inlineLoader.space.gap,
+}));
+
+const StyledIconContainer = styled(View)<{
+  themeSize: ThemeSize;
+}>(({ themeSize, theme }) => ({
+  height: theme.__hd__.inlineLoader.icon.lineHeights[themeSize],
+  justifyContent: 'center',
+}));
+
+export { StyledContainer, StyledIconContainer };

package/src/components/InlineLoader/index.tsx

@@ -0,0 +1,4 @@
+import InlineLoader from './InlineLoader';
+
+export type { InlineLoaderProps } from './InlineLoader';
+export default InlineLoader;

package/src/components/InlineLoader/types.ts

@@ -0,0 +1,9 @@
+export type InlineLoaderState = 'idle' | 'loading' | 'success' | 'error';
+export type InlineLoaderIntent = 'neutral' | 'ai';
+export type InlineLoaderTextSize = 10 | 12 | 14 | 16 | 18;
+export type InlineLoaderTextSizeName =
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge';

package/src/components/InlineLoader/utils.ts

@@ -0,0 +1,66 @@
+import type { IconName } from '../Icon';
+import type {
+  InlineLoaderState,
+  InlineLoaderIntent,
+  InlineLoaderTextSize,
+  InlineLoaderTextSizeName,
+} from './types';
+
+const TEXT_SIZE_NAMES: Record<InlineLoaderTextSize, InlineLoaderTextSizeName> =
+  {
+    10: 'xsmall',
+    12: 'small',
+    14: 'medium',
+    16: 'large',
+    18: 'xlarge',
+  };
+
+export const getTextSizeName = (
+  size: InlineLoaderTextSize
+): InlineLoaderTextSizeName => TEXT_SIZE_NAMES[size];
+
+export const getIconName = (state: InlineLoaderState): IconName => {
+  switch (state) {
+    case 'idle':
+      return 'circle-ok-outlined';
+    case 'loading':
+      return 'loading';
+    case 'success':
+      return 'circle-check';
+    case 'error':
+      return 'circle-cancel-outlined';
+  }
+};
+
+export const getIconIntent = (
+  state: InlineLoaderState,
+  intent: InlineLoaderIntent
+): 'inactive' | 'primary' | 'ai' | 'success' | 'danger' => {
+  switch (state) {
+    case 'idle':
+      return 'inactive';
+    case 'loading':
+      return intent === 'ai' ? 'ai' : 'primary';
+    case 'success':
+      return 'success';
+    case 'error':
+      return 'danger';
+  }
+};
+
+export const getIconSize = (
+  textSize: InlineLoaderTextSize
+): { size: 'xxxsmall' | 'xsmall' | 'small'; styleFontSize?: number } => {
+  switch (textSize) {
+    case 10:
+      return { size: 'xxxsmall' };
+    case 12:
+      return { size: 'xxxsmall', styleFontSize: 14 };
+    case 14:
+      return { size: 'xxxsmall', styleFontSize: 14 };
+    case 16:
+      return { size: 'xsmall' };
+    case 18:
+      return { size: 'small' };
+  }
+};

package/src/index.ts

@@ -85,6 +85,9 @@ import SegmentedControl from './components/SegmentedControl';
 import FloatingIsland from './components/FloatingIsland';
 import LocaleProvider from './components/LocaleProvider';
 import FilterTrigger from './components/FilterTrigger';
+import InlineLoader, {
+  type InlineLoaderProps,
+} from './components/InlineLoader';
 
 export {
   theme,
@@ -169,6 +172,8 @@ export {
   FloatingIsland,
   LocaleProvider,
   FilterTrigger,
+  InlineLoader,
+  type InlineLoaderProps,
   styled,
 };
 

package/src/theme/components/avatar.ts

@@ -1,7 +1,9 @@
+import { mobileAvatarPalette } from '@hero-design/colors';
 import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
   const colors = {
+    neutral: mobileAvatarPalette.maasstrichtBlueLight25,
     primary: theme.colors.primary,
     info: theme.colors.info,
     danger: theme.colors.error,

package/src/theme/components/inlineLoader.ts

@@ -0,0 +1,18 @@
+import type { GlobalTheme } from '../global';
+
+const getInlineLoaderTheme = (theme: GlobalTheme) => ({
+  space: {
+    gap: theme.space.small,
+  },
+  icon: {
+    lineHeights: {
+      xsmall: theme.lineHeights.xsmall,
+      small: theme.lineHeights.small,
+      medium: theme.lineHeights.medium,
+      large: theme.lineHeights.large,
+      xlarge: theme.lineHeights.xlarge,
+    },
+  },
+});
+
+export default getInlineLoaderTheme;

package/src/theme/getTheme.ts

@@ -66,6 +66,7 @@ import getAppCueTheme from './components/appCue';
 import type { ThemeMode } from './global/colors/types';
 import getFilterTriggerTheme from './components/filterTrigger';
 import getSegmentedControlTheme from './components/segmentedControl';
+import getInlineLoaderTheme from './components/inlineLoader';
 
 type Theme = GlobalTheme & {
   themeMode?: ThemeMode;
@@ -124,6 +125,7 @@ type Theme = GlobalTheme & {
     toolbar: ReturnType<typeof getToolbarTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
     floatingIsland: ReturnType<typeof getFloatingIslandTheme>;
+    inlineLoader: ReturnType<typeof getInlineLoaderTheme>;
     segmentedControl: ReturnType<typeof getSegmentedControlTheme>;
   };
 };
@@ -190,6 +192,7 @@ const getTheme = (
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme),
     },
   };

package/types/components/Avatar/Avatar.d.ts

@@ -14,9 +14,9 @@ export interface AvatarProps extends ViewProps {
      */
     title?: string;
     /**
-     * Intent of the Icon.
+     * Visual intent of the Avatar. Defaults to `'neutral'`.
      */
-    intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    intent?: 'neutral' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
     /**
      * Size of the avatar.
      */

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,7 +1,7 @@
 import { View, Image } from 'react-native';
 import type { TextProps } from '../Typography/Text';
 type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
-type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+type ThemeIntent = 'neutral' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/InlineLoader/AnimatedGradientText.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AnimatedGradientTextProps {
+    children: string;
+    fontSize: number;
+    lineHeight: number;
+}
+declare const AnimatedGradientText: ({ children, fontSize, lineHeight, }: AnimatedGradientTextProps) => React.JSX.Element;
+export default AnimatedGradientText;

package/types/components/InlineLoader/InlineLoader.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { InlineLoaderState, InlineLoaderIntent, InlineLoaderTextSize } from './types';
+export interface InlineLoaderProps {
+    /**
+     * Text content displayed next to the icon.
+     */
+    text: string;
+    /**
+     * Current state of the loader.
+     */
+    state?: InlineLoaderState;
+    /**
+     * Visual intent.
+     */
+    intent?: InlineLoaderIntent;
+    /**
+     * Font size (px) — also controls icon size.
+     */
+    size?: InlineLoaderTextSize;
+    /**
+     * Additional container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id.
+     */
+    testID?: string;
+}
+declare const InlineLoader: ({ text, state, intent, size, style, testID, }: InlineLoaderProps) => React.JSX.Element;
+export default InlineLoader;

package/types/components/InlineLoader/StyledInlineLoader.d.ts

@@ -0,0 +1,18 @@
+import { View } from 'react-native';
+import type { InlineLoaderTextSizeName } from './types';
+type ThemeSize = InlineLoaderTextSizeName;
+declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledIconContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledContainer, StyledIconContainer };

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

@@ -0,0 +1,3 @@
+import InlineLoader from './InlineLoader';
+export type { InlineLoaderProps } from './InlineLoader';
+export default InlineLoader;

package/types/components/InlineLoader/types.d.ts

@@ -0,0 +1,4 @@
+export type InlineLoaderState = 'idle' | 'loading' | 'success' | 'error';
+export type InlineLoaderIntent = 'neutral' | 'ai';
+export type InlineLoaderTextSize = 10 | 12 | 14 | 16 | 18;
+export type InlineLoaderTextSizeName = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

package/types/components/InlineLoader/utils.d.ts

@@ -0,0 +1,9 @@
+import type { IconName } from '../Icon';
+import type { InlineLoaderState, InlineLoaderIntent, InlineLoaderTextSize, InlineLoaderTextSizeName } from './types';
+export declare const getTextSizeName: (size: InlineLoaderTextSize) => InlineLoaderTextSizeName;
+export declare const getIconName: (state: InlineLoaderState) => IconName;
+export declare const getIconIntent: (state: InlineLoaderState, intent: InlineLoaderIntent) => "inactive" | "primary" | "ai" | "success" | "danger";
+export declare const getIconSize: (textSize: InlineLoaderTextSize) => {
+    size: "xxxsmall" | "xsmall" | "small";
+    styleFontSize?: number;
+};

package/types/index.d.ts

@@ -60,5 +60,6 @@ import SegmentedControl from './components/SegmentedControl';
 import FloatingIsland from './components/FloatingIsland';
 import LocaleProvider from './components/LocaleProvider';
 import FilterTrigger from './components/FilterTrigger';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Chart, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Illustration, type IllustrationName, IllustrationList, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, SegmentedControl, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, FilterTrigger, styled, };
+import InlineLoader, { type InlineLoaderProps } from './components/InlineLoader';
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Chart, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Illustration, type IllustrationName, IllustrationList, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, SegmentedControl, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, FilterTrigger, InlineLoader, type InlineLoaderProps, styled, };
 export * from './types';

package/types/theme/components/avatar.d.ts

@@ -1,6 +1,7 @@
 import type { GlobalTheme } from '../global';
 declare const getAvatarTheme: (theme: GlobalTheme) => {
     colors: {
+        neutral: string;
         primary: string;
         info: string;
         danger: string;

package/types/theme/components/inlineLoader.d.ts

@@ -0,0 +1,16 @@
+import type { GlobalTheme } from '../global';
+declare const getInlineLoaderTheme: (theme: GlobalTheme) => {
+    space: {
+        gap: number;
+    };
+    icon: {
+        lineHeights: {
+            xsmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xlarge: number;
+        };
+    };
+};
+export default getInlineLoaderTheme;

package/types/theme/getTheme.d.ts

@@ -54,6 +54,7 @@ import getAppCueTheme from './components/appCue';
 import type { ThemeMode } from './global/colors/types';
 import getFilterTriggerTheme from './components/filterTrigger';
 import getSegmentedControlTheme from './components/segmentedControl';
+import getInlineLoaderTheme from './components/inlineLoader';
 type Theme = GlobalTheme & {
     themeMode?: ThemeMode;
 } & {
@@ -111,6 +112,7 @@ type Theme = GlobalTheme & {
         toolbar: ReturnType<typeof getToolbarTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
         floatingIsland: ReturnType<typeof getFloatingIslandTheme>;
+        inlineLoader: ReturnType<typeof getInlineLoaderTheme>;
         segmentedControl: ReturnType<typeof getSegmentedControlTheme>;
     };
 };