@hero-design/rn 7.18.0 → 7.19.0

package/src/components/TimePicker/StyledTimePicker.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   height: theme.__hd__.timePicker.sizes.height,

package/src/components/TimePicker/TimePickerAndroid.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, View } from 'react-native';
 import formatTime from 'date-fns/fp/format';
 
 import TextInput from '../TextInput';
-import { TimePickerProps } from './types';
+import type { TimePickerProps } from './types';
 
 const TimePickerAndroid = ({
   value,

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -7,7 +7,7 @@ import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
 import Typography from '../Typography';
 import { StyledPickerWrapper } from './StyledTimePicker';
-import { TimePickerProps } from './types';
+import type { TimePickerProps } from './types';
 
 const TimePickerIOS = ({
   value,

package/src/components/TimePicker/__tests__/TimePickerIOS.spec.tsx

@@ -1,7 +1,6 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
-import { ModalProps } from 'react-native';
-
+import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import TimePickerIOS from '../TimePickerIOS';
 

package/src/components/TimePicker/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Platform } from 'react-native';
 import TimePickerAndroid from './TimePickerAndroid';
 import TimePickerIOS from './TimePickerIOS';
-import { TimePickerProps } from './types';
+import type { TimePickerProps } from './types';
 
 const TimePicker = (props: TimePickerProps) => {
   if (Platform.OS === 'ios') {

package/src/components/TimePicker/types.ts

@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface TimePickerProps {
   /**

package/src/components/Toast/StyledToast.tsx

@@ -1,12 +1,7 @@
 import styled from '@emotion/native';
-import { ComponentProps } from 'react';
-import {
-  Animated,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from 'react-native';
+import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
 
 const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
   ({ theme, position }) => ({

package/src/components/Toast/Toast.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { Animated, LayoutAnimation } from 'react-native';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import {
   Container,
@@ -10,7 +10,8 @@ import {
   TextContainer,
 } from './StyledToast';
 import { useToastConfig } from './ToastContext';
-import { ToastProps } from './types';
+import type { IconName } from '../Icon';
+import type { ToastProps } from './types';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error'

package/src/components/Toast/ToastContainer.tsx

@@ -3,8 +3,8 @@ import { useTheme } from '@emotion/react';
 
 import Toast from './Toast';
 import { ToastContainerWrapper } from './StyledToast';
-import { ToastContainerProps, ToastItemProps } from './types';
-import { ToastControllerContextType } from './ToastContext';
+import type { ToastContainerProps, ToastItemProps } from './types';
+import type { ToastControllerContextType } from './ToastContext';
 
 const generateID = () =>
   (performance.now().toString(36) + Math.random().toString(36)).replace(

package/src/components/Toast/ToastContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { ToastContainerProps, ToastProps } from './types';
+import type { ToastContainerProps, ToastProps } from './types';
 
 export type ToastControllerContextType = {
   show: (props: Omit<ToastProps, 'position'>) => string;

package/src/components/Toast/ToastProvider.tsx

@@ -1,12 +1,10 @@
-import React, { ReactNode, useEffect, useRef, useState, useMemo } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 
+import type { ReactNode } from 'react';
 import ToastContainer from './ToastContainer';
-import {
-  ToastConfigContext,
-  ToastContext,
-  ToastControllerContextType,
-} from './ToastContext';
-import { ToastContainerProps } from './types';
+import { ToastConfigContext, ToastContext } from './ToastContext';
+import type { ToastControllerContextType } from './ToastContext';
+import type { ToastContainerProps } from './types';
 
 type ToastProviderProps = {
   /**

package/src/components/Toast/__tests__/ToastContainer.spec.tsx

@@ -2,7 +2,7 @@ import { act } from '@testing-library/react-native';
 import React, { createRef } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import ToastContainer from '../ToastContainer';
-import { ToastControllerContextType } from '../ToastContext';
+import type { ToastControllerContextType } from '../ToastContext';
 
 describe('ToastContainer', () => {
   afterEach(() => {

package/src/components/Toast/types.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 
 export interface ToastProps {
   /**

package/src/components/Toolbar/StyledToolbar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ToolbarGroupWrapper } from './StyledToolbar';
-import ToolbarItem, { ToolbarItemProps } from './ToolbarItem';
+import ToolbarItem from './ToolbarItem';
+import type { ToolbarItemProps } from './ToolbarItem';
 
 export interface ToolbarGroupProps {
   /**

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import { ToolbarItemWrapper } from './StyledToolbar';
+import type { IconName } from '../Icon';
 
 export interface ToolbarItemProps {
   /**

package/src/components/Toolbar/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
 

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

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import {
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
   TextProps as NativeTextProps,
   StyleProp,
   TextStyle,

package/src/testHelpers/renderWithTheme.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, RenderOptions } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
+import { render } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
 import { ThemeProvider } from '@emotion/react';
+import type { RenderOptions } from '@testing-library/react-native';
 import { theme } from '../index';
 
 const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>

package/src/theme/ThemeProvider.ts

@@ -1,5 +1,5 @@
 import * as Emotion from '@emotion/react';
-import { Theme } from './getTheme';
+import type { Theme } from './getTheme';
 
 export interface ThemeProviderProps {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme);

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -245,21 +245,24 @@ Object {
     },
     "checkbox": Object {
       "borderWidths": Object {
-        "default": 2,
+        "icon": 2,
+        "wrapper": 1,
       },
       "colors": Object {
-        "borderColor": "#8505a2",
-        "disabled": "#808f91",
-        "text": "#ffffff",
+        "default": "#001f23",
+        "disabledBorder": "#808f91",
       },
       "radii": Object {
-        "base": 4,
+        "icon": 4,
+        "wrapper": 8,
       },
       "sizes": Object {
-        "base": 24,
+        "icon": 20,
       },
       "space": Object {
-        "iconTop": -4,
+        "iconDescriptionPadding": 12,
+        "iconTop": -3,
+        "wrapperPadding": 16,
       },
     },
     "contentNavigator": Object {
@@ -424,12 +427,6 @@ Object {
         },
         "listItemContainerBackground": "#ffffff",
       },
-      "offsets": Object {
-        "cardShadow": Object {
-          "height": 2,
-          "width": 0,
-        },
-      },
       "opacity": Object {
         "cardShadow": 1,
         "disabled": 0.38,
@@ -440,6 +437,13 @@ Object {
         "cardShadow": 4,
         "leadingStatus": 999,
       },
+      "shadows": Object {
+        "cardElevation": 10,
+        "cardOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+      },
       "space": Object {
         "leadingStatusMarginRight": 8,
         "listItemContainerPadding": 16,
@@ -506,13 +510,7 @@ Object {
         "circle": 2,
       },
       "colors": Object {
-        "checkedCircle": "#8505a2",
-        "checkedWrapper": "#f3e6f6",
-        "circle": "#000000",
-        "wrapper": "#ffffff",
-      },
-      "radii": Object {
-        "wrapper": 4,
+        "circle": "#001f23",
       },
       "sizes": Object {
         "circle": 20,
@@ -521,7 +519,6 @@ Object {
       "space": Object {
         "circleLeftMargin": 8,
         "groupTopMargin": 4,
-        "wrapperPadding": 16,
       },
     },
     "richTextEditor": Object {
@@ -590,12 +587,13 @@ Object {
       },
     },
     "switch": Object {
-      "borderWidths": Object {
-        "default": 1,
-      },
       "colors": Object {
-        "active": "#8505a2",
-        "inactive": "#808f91",
+        "backgroundColors": Object {
+          "checked": "#8505a2",
+          "disabled-checked": "#c282d1",
+          "disabled-unchecked": "#ccced1",
+          "unchecked": "#808f91",
+        },
         "thumb": "#ffffff",
       },
       "heights": Object {

package/src/theme/components/accordion.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getAccordionTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/alert.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getAlertTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/avatar.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/badge.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getBadgeTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/bottomNavigation.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getBottomNavigationTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/bottomSheet.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getBottomSheetTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/button.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getButtonTheme = (theme: GlobalTheme) => {
   const fonts = {

package/src/theme/components/calendar.ts

@@ -1,5 +1,5 @@
-import { GlobalTheme } from '../global';
 import { scale } from '../../utils/scale';
+import type { GlobalTheme } from '../global';
 
 const getCalendarTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/card.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/checkbox.ts

@@ -1,28 +1,32 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
+import { scale } from '../../utils/scale';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
-    borderColor: theme.colors.primary,
-    text: theme.colors.invertedText,
-    disabled: theme.colors.inactiveBackground,
+    default: theme.colors.globalPrimary,
+    disabledBorder: theme.colors.globalPrimaryLight,
   };
 
   const space = {
     // to remove the empty space above the check icon
     // and also to center the check mark
-    iconTop: -theme.space.xsmall,
+    iconTop: -scale(3),
+    wrapperPadding: theme.space.medium,
+    iconDescriptionPadding: theme.space.smallMedium,
   };
 
   const sizes = {
-    base: theme.space.large,
+    icon: scale(20),
   };
 
   const radii = {
-    base: theme.radii.base,
+    wrapper: theme.radii.medium,
+    icon: theme.radii.base,
   };
 
   const borderWidths = {
-    default: theme.borderWidths.medium,
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium,
   };
 
   return {

package/src/theme/components/contentNavigator.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getContentNavigatorTheme = (theme: GlobalTheme) => {
   const space = {

package/src/theme/components/divider.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getDividerTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/drawer.ts

@@ -1,5 +1,5 @@
-import { GlobalTheme } from '../global';
 import { scale } from '../../utils/scale';
+import type { GlobalTheme } from '../global';
 
 const getDrawerTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/empty.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {

package/src/theme/components/fab.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/icon.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getIconTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/list.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -27,8 +27,9 @@ const getListTheme = (theme: GlobalTheme) => {
     leadingStatus: theme.radii.rounded,
   };
 
-  const offsets = {
-    cardShadow: { width: 0, height: 2 },
+  const shadows = {
+    cardOffset: { width: 0, height: 2 },
+    cardElevation: 10,
   };
 
   const widths = {
@@ -41,7 +42,7 @@ const getListTheme = (theme: GlobalTheme) => {
     cardShadow: 1,
   };
 
-  return { colors, space, radii, offsets, widths, opacity };
+  return { colors, space, radii, widths, opacity, shadows };
 };
 
 export default getListTheme;

package/src/theme/components/pinInput.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getPinInputTheme = (theme: GlobalTheme) => {
   const borderWidths = {

package/src/theme/components/progress.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/radio.ts

@@ -1,16 +1,12 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
   const colors = {
-    circle: theme.colors.black,
-    checkedCircle: theme.colors.primary,
-    wrapper: theme.colors.platformBackground,
-    checkedWrapper: theme.colors.primaryBackground,
+    circle: theme.colors.globalPrimary,
   };
 
   const space = {
-    wrapperPadding: theme.space.medium, // left padding should be 12 according to the design
     circleLeftMargin: theme.space.small,
     groupTopMargin: theme.space.xsmall,
   };
@@ -24,11 +20,7 @@ const getRadioTheme = (theme: GlobalTheme) => {
     circle: theme.borderWidths.medium,
   };
 
-  const radii = {
-    wrapper: theme.radii.base,
-  };
-
-  return { sizes, borderWidths, space, colors, radii };
+  return { sizes, borderWidths, space, colors };
 };
 
 export default getRadioTheme;

package/src/theme/components/richTextEditor.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getRichTextEditorTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/sectionHeading.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSectionHeadingTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/select.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSelectTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/spinner.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSpinnerTheme = (theme: GlobalTheme) => {
   const color = {

package/src/theme/components/switch.ts

@@ -1,10 +1,14 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSwitchTheme = (theme: GlobalTheme) => {
   const colors = {
+    backgroundColors: {
+      checked: theme.colors.primary,
+      unchecked: theme.colors.globalPrimaryLight,
+      'disabled-checked': theme.colors.primaryLight,
+      'disabled-unchecked': theme.colors.archived,
+    },
     thumb: theme.colors.platformBackground,
-    active: theme.colors.primary,
-    inactive: theme.colors.inactiveBackground,
   };
 
   const thumbSizes = {
@@ -32,10 +36,6 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     rounded: theme.radii.rounded,
   };
 
-  const borderWidths = {
-    default: theme.borderWidths.base,
-  };
-
   return {
     colors,
     thumbSizes,
@@ -43,7 +43,6 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     heights,
     spaces,
     radii,
-    borderWidths,
   };
 };
 

package/src/theme/components/tabs.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTabsTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/tag.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTagTheme = (theme: GlobalTheme) => {
   const borderWidths = {

package/src/theme/components/textInput.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTextInputTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/toast.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getToastTheme = (theme: GlobalTheme) => {
   const colors = {