@hero-design/rn 8.12.5-alpha.0 → 8.12.5

package/src/theme/components/pinInput.ts

@@ -22,6 +22,10 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     cellText: theme.fontSizes.xxxxlarge,
     errorMessage: theme.fontSizes.small,
   };
+  const lineHeights = {
+    cellText: theme.lineHeights.xxxxlarge,
+    errorMessage: theme.fontSizes.small,
+  };
 
   const sizes = {
     cellWidth: theme.sizes.xxlarge,
@@ -39,7 +43,16 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     mask: theme.radii.rounded,
   };
 
-  return { borderWidths, colors, fonts, fontSizes, sizes, space, radii };
+  return {
+    borderWidths,
+    lineHeights,
+    colors,
+    fonts,
+    fontSizes,
+    sizes,
+    space,
+    radii,
+  };
 };
 
 export default getPinInputTheme;

package/src/types.ts

@@ -15,7 +15,6 @@ import type {
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
-import { ScrollableTabsHandles } from './components/Tabs/ScrollableTabs';
 
 export type {
   BottomNavigationTabType,
@@ -28,7 +27,6 @@ export type {
   RichTextEditorProps,
   RichTextEditorRef,
   TabType,
-  ScrollableTabsHandles,
   TextInputProps,
   TextProps,
   TextInputHandles,

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { View, Image, TouchableOpacity, Text } from 'react-native';
+import { View, Image, TouchableOpacity } from 'react-native';
+import { TextProps } from '../Typography/Text';
 declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
 declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
@@ -17,14 +18,12 @@ declare const StyledTextWrapper: import("@emotion/native").StyledComponent<impor
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+declare const StyledText: import("@emotion/native").StyledComponent<TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeSize: ThemeSize;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Badge/StyledBadge.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Animated, Text } from 'react-native';
+import { Animated } from 'react-native';
 declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
 declare type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
@@ -11,12 +11,10 @@ declare const StyledView: import("@emotion/native").StyledComponent<Animated.Ani
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
 }, {}, {}>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+declare const StyledText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {

package/types/components/Empty/StyledEmpty.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 declare type ThemeVariant = 'light' | 'dark';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -7,20 +7,16 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledTitle: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+declare const StyledTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: ThemeVariant;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
-declare const StyledDescription: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+}, {}, {}>;
+declare const StyledDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: ThemeVariant;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 export { StyledWrapper, StyledTitle, StyledDescription };

package/types/components/FAB/StyledFAB.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Text, TouchableHighlight } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import type { TextProps, TouchableHighlightProps } from 'react-native';
 import type { IconProps } from '../Icon';
 declare const StyledFABContainer: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
@@ -12,10 +12,8 @@ declare const StyledFABIcon: import("@emotion/native").StyledComponent<IconProps
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledFABText: import("@emotion/native").StyledComponent<TextProps & {
+declare const StyledFABText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+} & TextProps, {}, {}>;
 export { StyledFABContainer, StyledFABIcon, StyledFABText };

package/types/components/PinInput/StyledPinInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Text, TextInput, View } from 'react-native';
+import { TextInput, View } from 'react-native';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -22,14 +22,12 @@ export declare const StyledCell: import("@emotion/native").StyledComponent<impor
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledCellText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+export declare const StyledCellText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeState: State;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;
 export declare const StyledSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -66,9 +64,7 @@ export declare const StyledErrorContainer: import("@emotion/native").StyledCompo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledErrorMessage: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+export declare const StyledErrorMessage: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
+}, {}, {}>;

package/types/components/Tabs/ScrollableTabs.d.ts

@@ -1,10 +1,3 @@
-import React from 'react';
 import type { TabsProps } from '.';
-export declare type ScrollableTabsHandles = {
-    selectTabKey: (tabKey: string) => void;
-};
-export interface ScrollableTabsProps extends TabsProps {
-    ref?: React.Ref<ScrollableTabsHandles>;
-}
-declare const ScrollableTab: React.ForwardRefExoticComponent<Pick<ScrollableTabsProps, "children" | "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" | "onTabPress" | "selectedTabKey" | "tabs" | "containerStyle" | "barStyle" | "lazy" | "lazyPreloadDistance" | "swipeEnabled"> & React.RefAttributes<ScrollableTabsHandles>>;
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
 export default ScrollableTab;

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

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { IconName } from '../Icon';
 import type { BadgeConfigType } from './TabWithBadge';
@@ -56,6 +55,6 @@ export interface TabsProps extends ViewProps {
     testID?: string;
 }
 declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element) & {
-    Scroll: React.ForwardRefExoticComponent<Pick<import("./ScrollableTabs").ScrollableTabsProps, "children" | "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" | "onTabPress" | "selectedTabKey" | "tabs" | "containerStyle" | "barStyle" | "lazy" | "lazyPreloadDistance" | "swipeEnabled"> & React.RefAttributes<import("./ScrollableTabs").ScrollableTabsHandles>>;
+    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
 };
 export default _default;