@hero-design/rn 8.68.0-alpha.1 → 8.69.0

package/types/components/Alert/StyledAlert.d.ts

@@ -1,11 +1,14 @@
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
+import { TextProps } from '../Typography/Text';
+import { IconProps } from '../Icon';
+declare type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
 declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: 'rounded' | 'unrounded';
-    themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
+    themeIntent: ThemeIntent;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -15,12 +18,24 @@ declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledBody: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & TextProps & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -35,4 +50,4 @@ declare const CTAWrapper: import("@emotion/native").StyledComponent<import("reac
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };
+export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, StyledBody, StyledIcon, };

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

@@ -1,16 +1,20 @@
 import { Animated } from 'react-native';
 declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
 declare type ThemePadding = 'narrowContent' | 'wideContent';
+declare type ThemeSize = 'medium' | 'small';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
+    themeSize: ThemeSize;
 }, {}, {}>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSize: ThemeSize;
 }, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -1,7 +1,7 @@
 import { Animated } from 'react-native';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
+export interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
     /**
      * Content of the Badge.
      */
@@ -26,8 +26,12 @@ interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Size of the badge
+     */
+    size?: 'medium' | 'small';
 }
-declare const _default: (({ content: originalContent, visible, max, intent, style, testID, ...nativeProps }: BadgeProps) => JSX.Element) & {
+declare const _default: (({ content: originalContent, visible, max, intent, style, testID, size, ...nativeProps }: BadgeProps) => JSX.Element) & {
     Status: ({ children, visible, intent, style, testID, ...nativeProps }: import("./Status").StatusProps) => JSX.Element;
 };
 export default _default;

package/types/components/BottomSheet/Header.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
 import type { ReactElement } from 'react';
-declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
+import React from 'react';
+declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, variant, }: {
     content: string | ReactElement;
     showDivider: boolean;
     onRequestClose?: (() => void) | undefined;
     showCloseButton: boolean;
+    variant?: "fixed" | "floating" | undefined;
 }) => React.JSX.Element;
 export default Header;

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -1,5 +1,5 @@
-import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, View } from 'react-native';
 import type { ViewProps } from 'react-native';
+import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, TouchableOpacity, View } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -12,6 +12,14 @@ declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledCompon
 }, {}, {
     ref?: import("react").Ref<KeyboardAvoidingView> | undefined;
 }>;
+declare const StyledFloatingWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledFloatingBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
 declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -44,4 +52,10 @@ declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewP
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, StyledKeyboardAvoidingView, };
+declare const StyledFloatingHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { StyledBackdrop, StyledBottomSheet, StyledFloatingBottomSheet, StyledFloatingHeaderWrapper, StyledFloatingWrapper, StyledFooter, StyledHeader, StyledHeaderWrapper, StyledIconWrapper, StyledKeyboardAvoidingView, StyledWrapper, };

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

@@ -63,8 +63,12 @@ interface BottomSheetProps {
      * Supported orientations for the BottomSheet modal, iOS only.
      */
     supportedOrientations?: ('portrait' | 'landscape')[];
+    /**
+     * Variant of the bottom sheet.
+     */
+    variant?: 'fixed' | 'floating';
 }
-declare const _default: (({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, supportedOrientations, }: BottomSheetProps) => JSX.Element) & {
+declare const _default: (({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, supportedOrientations, variant, }: BottomSheetProps) => JSX.Element) & {
     ScrollView: ({ scrollEventThrottle, ...props }: import("react-native").ScrollViewProps) => JSX.Element;
 };
 export default _default;

package/types/components/Box/StyledBox.d.ts

@@ -2,7 +2,7 @@ import { Theme } from '@emotion/react';
 import { View } from 'react-native';
 import { FlexStyleProps, StyleProps } from './types';
 export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
-    [x: string]: string;
+    [x: string]: string | undefined;
 } | {
     [x: string]: number;
 } | undefined;

package/types/components/Progress/ProgressStep.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export interface ProgressStepProps extends ViewProps {
+    /**
+     * The total number of steps.
+     */
+    steps: number;
+    /**
+     * The current step.
+     */
+    current: number;
+    /**
+     * Test ID of the component.
+     */
+    testID?: string;
+}
+declare type StepState = 'complete' | 'incomplete' | 'current';
+export declare const getStepState: (current: number, index: number) => StepState;
+declare const ProgressStep: ({ steps, current, onLayout, ...props }: ProgressStepProps) => React.JSX.Element;
+export default ProgressStep;

package/types/components/Progress/StyledStep.d.ts

@@ -0,0 +1,21 @@
+declare type StepState = 'complete' | 'incomplete' | 'current';
+declare const StyledStepContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledStep: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeState: StepState;
+    themeWidth: number;
+}, {}, {}>;
+declare const StyledSingleStepContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledSingleStep: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+export { StyledStepContainer, StyledStep, StyledSingleStepContainer, StyledSingleStep, };

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

@@ -1,5 +1,6 @@
 declare const Progress: {
     readonly Circle: ({ value, renderValue, intent, style, testID, ...nativeProps }: import("./ProgressCircle").ProgressCircleProps) => JSX.Element;
     readonly Bar: ({ value, intent, style, testID, ...nativeProps }: import("./ProgressBar").ProgressBarProps) => JSX.Element;
+    readonly Step: ({ steps, current, onLayout, ...props }: import("./ProgressStep").ProgressStepProps) => import("react").JSX.Element;
 };
 export default Progress;

package/types/components/Search/SearchOneLine.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps, TextInput as RNTextInput, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { State } from './StyledSearch';
+import { IconName } from '../Icon';
+export declare type SearchOneLineHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
+interface SearchOneLineProps extends NativeTextInputProps {
+    /**
+     * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or ReactElement to render on the right side of the input.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Input text style.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Accessibility label for the input (Android).
+     */
+    accessibilityLabelledBy?: string;
+    /**
+     *  Placeholder text to display.
+     * */
+    placeholder?: string;
+    /**
+     * Whether the input is editable.
+     * */
+    editable?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The max length of the input.
+     * If the max length is set, the input will display the current length and the max length.
+     * */
+    maxLength?: number;
+    /**
+     * Whether to hide the character count.
+     * */
+    renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+}
+export declare const getState: ({ disabled, editable, isEmptyValue, }: {
+    disabled?: boolean | undefined;
+    editable?: boolean | undefined;
+    isFocused?: boolean | undefined;
+    isEmptyValue?: boolean | undefined;
+}) => State;
+declare const SearchOneLine: React.ForwardRefExoticComponent<SearchOneLineProps & React.RefAttributes<SearchOneLineHandles>>;
+export default SearchOneLine;

package/types/components/Search/SearchSuffixIcon.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+import { BadgeProps } from '../Badge';
+interface SearchSuffixIconProps {
+    /**
+     * Name of Icon or ReactElement to render on the right side of the input.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Badge props to be render on the suffix.
+     */
+    badge?: Omit<BadgeProps, 'size'>;
+}
+declare const SearchSuffixIcon: (props: SearchSuffixIconProps) => React.JSX.Element;
+export default SearchSuffixIcon;