@hero-design/rn 8.23.0 → 8.24.0-alpha.1

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const SceneView: ({ lazy, lazyPreloadDistance, children, index, selectedIndex, focused, }: {
+    renderScence: () => React.ReactNode;
+    index: number;
+    selectedIndex: number;
+    lazy?: boolean | undefined;
+    lazyPreloadDistance?: number | undefined;
+    focused?: boolean | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,35 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { TabType } from '.';
+export interface ScrollableTabHeaderProps extends ViewProps {
+    /**
+     * Callback which is called on tab press, receiving key of upcoming active Tab.
+     */
+    onTabPress: (key: string) => void;
+    /**
+     * Current selected tab key.
+     */
+    selectedIndex?: number;
+    /**
+     * List of Tabs to be rendered. Each Tab must have an unique key.
+     */
+    tabs: TabType[];
+    /**
+     * Style for the tab navigation bar.
+     */
+    barStyle?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * component insets
+     */
+    insets?: {
+        top: number;
+        bottom: number;
+        right: number;
+        left: number;
+    };
+}
+declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, }: ScrollableTabHeaderProps) => JSX.Element;
+export default ScrollableTabHeader;

package/types/components/Tabs/ScrollableTabsV2/SceneView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const SceneView: ({ lazy, lazyPreloadDistance, children, index, selectedIndex, testID, }: {
+    children: React.ReactNode;
+    index: number;
+    selectedIndex: number;
+    lazy?: boolean | undefined;
+    lazyPreloadDistance?: number | undefined;
+    testID?: string | undefined;
+}) => JSX.Element;
+export default SceneView;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { TabsProps } from '..';
+export declare const TabContext: React.Context<{
+    selectedTabKey: string;
+} | null>;
+export declare const ScreenContext: React.Context<string | null>;
+export declare const useIsFocused: () => boolean | undefined;
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
+export default ScrollableTab;

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

@@ -0,0 +1,4 @@
+declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: import("..").TabsProps) => JSX.Element) & {
+    useIsFocused: () => boolean | undefined;
+};
+export default _default;

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

@@ -56,5 +56,8 @@ export interface TabsProps extends ViewProps {
 }
 declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element) & {
     Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
+    ScrollV2: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element) & {
+        useIsFocused: () => boolean | undefined;
+    };
 };
 export default _default;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TextInput, View } from 'react-native';
-export declare type Variant = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+export declare type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+declare type Variant = 'text' | 'textarea';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -17,17 +18,19 @@ declare const StyledLabel: import("@emotion/native").StyledComponent<import("../
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -35,13 +38,13 @@ declare const StyledLabelInsideTextInput: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -57,7 +60,7 @@ declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -66,6 +69,8 @@ declare const StyledHelperText: import("@emotion/native").StyledComponent<import
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<TextInput> | undefined;
 }>;
@@ -73,7 +78,7 @@ declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<im
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
     themeFocused: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { Variant } from './StyledTextInput';
+import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 export declare type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
 export interface TextInputProps extends NativeTextInputProps {
@@ -78,14 +78,18 @@ export interface TextInputProps extends NativeTextInputProps {
      * Component ref.
      */
     ref?: React.Ref<TextInputHandles>;
+    /**
+     * Component variant.
+     */
+    variant?: 'text' | 'textarea';
 }
-export declare const getVariant: ({ disabled, error, editable, loading, isEmptyValue, }: {
+export declare const getState: ({ disabled, error, editable, loading, isEmptyValue, }: {
     disabled?: boolean | undefined;
     error?: string | undefined;
     editable?: boolean | undefined;
     loading: boolean;
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
-}) => Variant;
-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" | "accessibilityLabelledBy" | "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" | "required" | "hideCharacterCount" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
+}) => State;
+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" | "accessibilityLabelledBy" | "textAlign" | "variant" | "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" | "required" | "hideCharacterCount" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
 export default TextInput;

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

@@ -55,6 +55,9 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         containerMarginTop: number;
         labelInsideTextInputMarginTop: number;
     };
+    fonts: {
+        text: string;
+    };
     fontSizes: {
         text: number;
         labelInsideTextInput: number;
@@ -73,6 +76,8 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
     };
     sizes: {
         errorAndHelpTextContainerHeight: number;
+        textareaHeight: number;
+        textInputMaxHeight: number;
     };
 };
 export default getTextInputTheme;