@hero-design/rn 8.3.0 → 8.3.2

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

@@ -258,13 +258,13 @@ Object {
         "paginatorBackgroundColor": "#401960",
       },
       "fontSizes": Object {
-        "heading": 32,
+        "heading": 36,
       },
       "fonts": Object {
         "heading": "RebondGrotesque-SemiBold",
       },
       "lineHeights": Object {
-        "heading": 32,
+        "heading": 44,
       },
       "radii": Object {
         "paginatorBorderRadius": 999,
@@ -275,6 +275,9 @@ Object {
         "paginatorWidth": 8,
       },
       "space": Object {
+        "footerMarginBottom": 24,
+        "footerPaddingHorizontal": 24,
+        "footerPaddingVertical": 16,
         "headingMarginBottom": 16,
         "headingMarginTop": 8,
         "paginatorMarginHorizontal": 8,
@@ -927,6 +930,7 @@ Object {
         "warning": "#ffa234",
       },
       "fontSizes": Object {
+        "6xlarge": 36,
         "7xlarge": 42,
         "large": 16,
         "medium": 14,
@@ -948,6 +952,7 @@ Object {
         },
       },
       "lineHeights": Object {
+        "6xlarge": 44,
         "7xlarge": 50,
         "large": 24,
         "medium": 22,
@@ -1007,6 +1012,7 @@ Object {
     "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {
+    "6xlarge": 36,
     "7xlarge": 42,
     "large": 16,
     "medium": 14,
@@ -1031,6 +1037,7 @@ Object {
     },
   },
   "lineHeights": Object {
+    "6xlarge": 44,
     "7xlarge": 50,
     "large": 24,
     "medium": 22,

package/src/theme/components/carousel.ts

@@ -9,6 +9,9 @@ const getCarouselTheme = (theme: GlobalTheme) => {
     headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     paginatorMarginHorizontal: theme.space.small,
+    footerPaddingHorizontal: theme.space.large,
+    footerPaddingVertical: theme.space.medium,
+    footerMarginBottom: theme.space.large,
   };
 
   const sizes = {
@@ -22,7 +25,7 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
-    heading: theme.fontSizes.xxxxxlarge,
+    heading: theme.fontSizes['6xlarge'],
   };
 
   const fonts = {
@@ -30,7 +33,7 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const lineHeights = {
-    heading: theme.lineHeights.xxxlarge,
+    heading: theme.lineHeights['6xlarge'],
   };
 
   return { colors, sizes, radii, space, fonts, fontSizes, lineHeights };

package/src/theme/components/typography.ts

@@ -20,6 +20,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '6xlarge': theme.fontSizes['6xlarge'],
     '7xlarge': theme.fontSizes['7xlarge'],
   };
 
@@ -30,6 +31,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '6xlarge': theme.lineHeights['6xlarge'],
     '7xlarge': theme.lineHeights['7xlarge'],
   };
 

package/src/theme/global/typography.ts

@@ -13,6 +13,7 @@ interface Fonts {
 
 interface FontSizes {
   '7xlarge': number;
+  '6xlarge': number;
   xxxxxlarge: number;
   xxxxlarge: number;
   xxxlarge: number;
@@ -62,6 +63,7 @@ const getFontSizes = (baseFontSize: number): FontSizes => {
   });
   return {
     '7xlarge': scale(fontSizes[10]), // 42
+    '6xlarge': scale(fontSizes[9]), //  36
     xxxxxlarge: scale(fontSizes[8]), // 32
     xxxxlarge: scale(fontSizes[7]), //  28
     xxxlarge: scale(fontSizes[6]), //   24
@@ -78,6 +80,7 @@ const getLineHeights = (fontSizes: FontSizes): LineHeights => {
   const additionalSpace = 8;
   return {
     '7xlarge': fontSizes['7xlarge'] + additionalSpace,
+    '6xlarge': fontSizes['6xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,

package/types/components/Carousel/CarouselItem.d.ts

@@ -1,7 +1,6 @@
 import { CarouselData } from './types';
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
     width: number;
-    minHeight: number;
 }
-declare const CarouselItem: ({ width, image, content, heading, body, minHeight, }: CarouselItemProps) => JSX.Element;
+declare const CarouselItem: ({ width, image, content, heading, body, }: CarouselItemProps) => JSX.Element;
 export default CarouselItem;

package/types/components/Carousel/CarouselPaginator/StyledCarouselPaginator.d.ts

@@ -10,7 +10,5 @@ declare const StyledCarouselPaginatorAnimatedView: import("@emotion/native").Sty
 } & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    indicatorWidth: Animated.AnimatedInterpolation;
 }, {}, {}>;
 export { StyledCarouselPaginator, StyledCarouselPaginatorAnimatedView };

package/types/components/Carousel/StyledCarousel.d.ts

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-declare const StyledCarousel: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+declare const StyledBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -27,8 +27,10 @@ declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComp
 } & {
     width: number;
 }, {}, {}>;
-declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { StyledCarousel, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };

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

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from 'react';
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { CarouselData } from './types';
 interface CarouselProps extends ViewProps {
@@ -10,37 +11,22 @@ interface CarouselProps extends ViewProps {
      */
     testID?: string;
     /**
-     * Callback to be called when the user slides to the next slide.
+     * onItemIndexChange event handler receiving index of selected Item.
      */
-    onSlideChange?: (currentSlide?: CarouselData) => void;
-    /**
-     * Callback to be called when the user skips the intro carousel.
-     */
-    onSkipPress?: (currentSlide?: CarouselData) => void;
-    /**
-     * Callback to be called when the user finishes the intro carousel.
-     */
-    onFinishPress?: (currentSlide?: CarouselData) => void;
+    onItemIndexChange?: Dispatch<SetStateAction<number>>;
     /**
      * Carousel data.
      */
     items: CarouselData[];
     /**
-     * Finish button label.
-     */
-    finishButtonLabel?: string;
-    /**
-     * Skip button label.
-     */
-    skipButtonLabel?: string;
-    /**
-     * Footer height.
+     * Render action elements function.
      */
-    footerHeight?: number;
+    renderActions?: (pageIndex: number) => JSX.Element;
     /**
-     * Min content height.
+     * Current selected item index.
      */
-    minContentHeight?: number;
+    selectedItemIndex?: number;
 }
-declare const Carousel: ({ items, onFinishPress, onSkipPress, onSlideChange, finishButtonLabel, skipButtonLabel, footerHeight, minContentHeight, ...nativeProps }: CarouselProps) => JSX.Element;
+export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
+declare const Carousel: ({ items, onItemIndexChange, renderActions, selectedItemIndex, style, ...nativeProps }: CarouselProps) => JSX.Element;
 export default Carousel;

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

@@ -83,5 +83,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isEmptyV
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => Variant;
-declare const _default: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "accessibilityLabelledBy" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
-export default _default;
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "accessibilityLabelledBy" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
+export default TextInput;

package/types/components/Typography/Text/StyledText.d.ts

@@ -3,7 +3,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
     themeTypeface: 'neutral' | 'playful';

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     /**
      * Font weight of the text.
      */

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

@@ -15,6 +15,9 @@ declare const getCarouselTheme: (theme: GlobalTheme) => {
         headingMarginTop: number;
         headingMarginBottom: number;
         paginatorMarginHorizontal: number;
+        footerPaddingHorizontal: number;
+        footerPaddingVertical: number;
+        footerMarginBottom: number;
     };
     fonts: {
         heading: string;

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

@@ -19,6 +19,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '6xlarge': number;
         '7xlarge': number;
     };
     lineHeights: {
@@ -28,6 +29,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '6xlarge': number;
         '7xlarge': number;
     };
 };

package/types/theme/global/typography.d.ts

@@ -9,6 +9,7 @@ interface Fonts {
 }
 interface FontSizes {
     '7xlarge': number;
+    '6xlarge': number;
     xxxxxlarge: number;
     xxxxlarge: number;
     xxxlarge: number;