@hero-design/rn 8.68.0-alpha.0 → 8.68.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/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;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+interface SearchTwoLineProps {
+    /**
+     * 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>;
+    /**
+     * Label of the Input handler.
+     */
+    label: React.ReactNode;
+    /**
+     * Content of the Input handler.
+     */
+    content: React.ReactNode;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const SearchTwoLine: (props: SearchTwoLineProps) => React.JSX.Element;
+export default SearchTwoLine;

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

@@ -0,0 +1,44 @@
+import { TextInput, View } from 'react-native';
+export declare type State = 'default' | 'filled' | 'disabled' | 'readonly';
+export declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeFocused: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledAffixContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledSuffixContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TextInput> | undefined;
+}>;
+export declare const StyledHandlerContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledBadge: import("@emotion/native").StyledComponent<import("../Badge").BadgeProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,10 @@
+import SearchTwoLine from './SearchTwoLine';
+import SearchOneLine from './SearchOneLine';
+import SearchSuffixIcon from './SearchSuffixIcon';
+declare type SearchType = {
+    OneLine: typeof SearchOneLine;
+    TwoLine: typeof SearchTwoLine;
+    SuffixIcon: typeof SearchSuffixIcon;
+};
+declare const Search: SearchType;
+export default Search;