@hero-design/rn 8.71.0 → 8.72.0

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

@@ -2,6 +2,7 @@ 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 type ThemeVariant = 'filled' | 'outlined';
 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;
@@ -9,6 +10,7 @@ declare const StyledView: import("@emotion/native").StyledComponent<Animated.Ani
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
     themeSize: ThemeSize;
+    themeVariant: ThemeVariant;
 }, {}, {}>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -22,4 +24,10 @@ declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.A
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;
-export { StyledView, StyledText, StyledStatus };
+declare const StyledIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+export { StyledView, StyledText, StyledStatus, StyledIcon };

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

@@ -1,37 +1,6 @@
-import { Animated } from 'react-native';
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-export interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
-    /**
-     * Content of the Badge.
-     */
-    content: string | number;
-    /**
-     * Whether the Badge is visible.
-     */
-    visible?: boolean;
-    /**
-     * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
-     */
-    max?: number;
-    /**
-     * Visual intent color to apply to Badge.
-     */
-    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-    /**
-     * Size of the badge
-     */
-    size?: 'medium' | 'small';
-}
-declare const _default: (({ content: originalContent, visible, max, intent, style, testID, size, ...nativeProps }: BadgeProps) => JSX.Element) & {
+import { BasicBadgeProps, IconBadgeProps } from './types';
+export declare type BadgeProps = BasicBadgeProps | IconBadgeProps;
+declare const _default: (({ content: originalContent, visible, max, intent, style, testID, size, variant, icon, ...nativeProps }: BadgeProps) => JSX.Element) & {
     Status: ({ children, visible, intent, style, testID, ...nativeProps }: import("./Status").StatusProps) => JSX.Element;
 };
 export default _default;

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

@@ -0,0 +1,53 @@
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+interface BaseBadgeProps extends React.ComponentProps<typeof Animated.View> {
+    /**
+     * Whether the Badge is visible.
+     */
+    visible?: boolean;
+    /**
+     * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
+     */
+    max?: number;
+    /**
+     * Visual intent color to apply to Badge.
+     */
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Size of the badge
+     */
+    size?: 'medium' | 'small';
+    /**
+     * Variant of the badge
+     */
+    variant?: 'filled' | 'outlined';
+}
+export interface BasicBadgeProps extends BaseBadgeProps {
+    /**
+     * Content of the Badge.
+     */
+    content: string | number;
+    /**
+     * Use Icon as the content of the Badge.
+     */
+    icon?: never;
+}
+export interface IconBadgeProps extends BaseBadgeProps {
+    /**
+     * Content of the Badge.
+     */
+    content?: never;
+    /**
+     * Use Icon as the content of the Badge.
+     */
+    icon: IconName;
+}
+export {};

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

@@ -0,0 +1,12 @@
+declare const StyledFABPairWrapper: 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 StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & import("react").RefAttributes<import("../FAB").FABHandles> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    iconOnly?: boolean | undefined;
+    isLast?: boolean | undefined;
+}, {}, {}>;
+export { StyledFABPairWrapper, StyledFAB };

package/types/components/FAB/Pair/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { FABProps } from '../FAB';
+export declare type InnerFABProps = Pick<FABProps, 'icon' | 'title' | 'onPress' | 'testID'>;
+export interface FABPairProps extends ViewProps {
+    /**
+     * Configuration for the main FAB.
+     */
+    fabConfig: InnerFABProps;
+    /**
+     * Callback to be called when the cancel FAB is pressed.
+     */
+    onCancel: () => void;
+}
+declare const Pair: ({ fabConfig, onCancel, ...props }: FABPairProps) => React.JSX.Element;
+export default Pair;

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

@@ -1,4 +1,5 @@
 declare const _default: import("react").ForwardRefExoticComponent<import("./FAB").FABProps & import("react").RefAttributes<import("./FAB").FABHandles>> & {
     ActionGroup: import("react").ForwardRefExoticComponent<import("./ActionGroup").ActionGroupProps & import("react").RefAttributes<import("./ActionGroup").ActionGroupHandles>>;
+    Pair: ({ fabConfig, onCancel, ...props }: import("./Pair").FABPairProps) => import("react").JSX.Element;
 };
 export default _default;

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

@@ -17,5 +17,7 @@ declare const StyledSingleStepContainer: import("@emotion/native").StyledCompone
 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;
+} & {
+    themeState: 'complete' | 'incomplete';
 }, {}, {}>;
 export { StyledStepContainer, StyledStep, StyledSingleStepContainer, StyledSingleStep, };

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

@@ -49,6 +49,11 @@ interface SearchOneLineProps extends NativeTextInputProps {
      * Whether to hide the character count.
      * */
     renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+    /**
+     * Variant of the SearchTwo
+     * @default 'basic'
+     */
+    variant?: 'basic' | 'reversed';
 }
 export declare const getState: ({ disabled, editable, isEmptyValue, }: {
     disabled?: boolean | undefined;

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

@@ -26,6 +26,11 @@ interface SearchTwoLineProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Variant of the SearchTwo
+     * @default 'basic'
+     */
+    variant?: 'basic' | 'reversed';
 }
 declare const SearchTwoLine: (props: SearchTwoLineProps) => React.JSX.Element;
 export default SearchTwoLine;

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

@@ -1,5 +1,6 @@
 import { TextInput, View } from 'react-native';
 export declare type State = 'default' | 'filled' | 'disabled' | 'readonly';
+export declare type Variant = 'basic' | 'reversed';
 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;
@@ -11,6 +12,7 @@ export declare const StyledInputContainer: import("@emotion/native").StyledCompo
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeFocused: boolean;
+    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -38,7 +40,10 @@ export declare const StyledHandlerContainer: import("@emotion/native").StyledCom
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledBadge: import("@emotion/native").StyledComponent<import("../Badge").BadgeProps & {
+export declare const StyledBadge: import("@emotion/native").StyledComponent<(import("../Badge/types").BasicBadgeProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, {}, {}>;
+}) | (import("../Badge/types").IconBadgeProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}), {}, {}>;

package/types/components/Toolbar/StyledToolbar.d.ts

@@ -1,5 +1,6 @@
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
+import { BodyProps } from '../Typography/Body';
 declare const ToolbarWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -26,8 +27,14 @@ declare const IconButtonWrapper: import("@emotion/native").StyledComponent<ViewP
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const IconButtonLabel: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+declare const IconButtonLabel: import("@emotion/native").StyledComponent<BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
-export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper, IconButtonWrapper, IconButtonLabel, };
+declare const StyledLabel: import("@emotion/native").StyledComponent<BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    intent: Exclude<BodyProps['intent'], undefined>;
+}, {}, {}>;
+export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper, IconButtonWrapper, IconButtonLabel, StyledLabel, };

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

@@ -8,6 +8,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         warning: string;
         archived: string;
         text: string;
+        border: string;
     };
     fonts: {
         medium: string;
@@ -16,6 +17,10 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
     fontSizes: {
         medium: number;
         small: number;
+        icon: {
+            medium: number;
+            small: number;
+        };
     };
     sizes: {
         medium: {
@@ -43,6 +48,9 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         medium: number;
         small: number;
     };
+    borderWidths: {
+        default: number;
+    };
 };
 export declare type BadgeThemeType = ReturnType<typeof getBadgeTheme>;
 export default getBadgeTheme;

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

@@ -27,6 +27,8 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         height: number;
         iconContainerWidth: number;
         iconContainerHeight: number;
+        fabPairHeight: number;
+        fabPairIconOnlyWidth: number;
     };
     lineHeights: {
         actionItemText: number;
@@ -52,6 +54,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         buttonMarginRight: number;
         containerPadding: number;
         titleMarginHorizontal: number;
+        fabPairMarginRight: number;
     };
 };
 declare type GetFABThemeReturnType = ReturnType<typeof getFABTheme>;

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

@@ -1,15 +1,25 @@
 import type { GlobalTheme } from '../global';
 declare const getSearchTheme: (theme: GlobalTheme) => {
     colors: {
-        containerBackground: string;
-        surfixBackground: string;
+        basic: {
+            containerBackground: string;
+            border: string;
+            focusedBorder: string;
+        };
+        reversed: {
+            containerBackground: string;
+            border: string;
+            focusedBorder: string;
+        };
+        suffixBackground: string;
         text: string;
-        borders: string;
+        shadow: string;
     };
     space: {
         containerHorizontalPadding: number;
         containerVerticalPadding: number;
         inputHorizontalMargin: number;
+        inputVerticalPadding: number;
         prefixHorizontalPadding: number;
         surfixPadding: number;
         badgeTop: number;
@@ -23,8 +33,14 @@ declare const getSearchTheme: (theme: GlobalTheme) => {
     };
     borderWidths: {
         container: {
-            normal: number;
-            focused: number;
+            basic: {
+                normal: number;
+                focused: number;
+            };
+            reversed: {
+                normal: number;
+                focused: number;
+            };
         };
     };
     radii: {
@@ -34,5 +50,15 @@ declare const getSearchTheme: (theme: GlobalTheme) => {
     sizes: {
         surfixSize: number;
     };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+        color: string;
+    };
 };
 export default getSearchTheme;