@hero-design/rn 8.82.0-alpha.0 → 8.82.1

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /**
+     * Control whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const _default: (({ disabled, checked, onPress, style, testID, }: SwitchProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Selector: <T>({ options, value, onPress, style, testID, }: import("./SelectorSwitch").SelectorSwitchProps<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+export default _default;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Animated } from 'react-native';
+declare const ActiveTabIndicator: ({ scrollOffsetAnimatedValue, positionAnimatedValue, tabsLength, tabsWidth, }: {
+    scrollOffsetAnimatedValue: Animated.Value;
+    positionAnimatedValue: Animated.Value;
+    tabsLength: number;
+    tabsWidth: number;
+}) => React.JSX.Element;
+export default ActiveTabIndicator;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+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;
+}) => React.JSX.Element;
+export default SceneView;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TabsProps } from '.';
+export interface ScrollableTabProps extends TabsProps {
+    variant?: 'underlined' | 'highlighted';
+}
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, variant, }: ScrollableTabProps) => React.JSX.Element;
+export default ScrollableTab;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleProp, ViewProps, ViewStyle } 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;
+    };
+    /**
+     * Variant of the tab header
+     */
+    variant?: 'underlined' | 'highlighted';
+}
+declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, variant, }: ScrollableTabHeaderProps) => React.JSX.Element;
+export default ScrollableTabHeader;

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

@@ -0,0 +1,9 @@
+import { Animated } from 'react-native';
+declare const useInitHighlightedAnimation: ({ selectedIndex, tabsLength, variant, }: {
+    selectedIndex?: number | undefined;
+    tabsLength: number;
+    variant: 'underlined' | 'highlighted';
+}) => {
+    tabsAnims: Animated.Value[];
+};
+export default useInitHighlightedAnimation;

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

@@ -0,0 +1,10 @@
+import { Animated } from 'react-native';
+declare const useInitUnderlinedAnimation: ({ tabsLength, selectedIndex, variant, }: {
+    tabsLength: number;
+    selectedIndex?: number | undefined;
+    variant: 'underlined' | 'highlighted';
+}) => {
+    underlinedTranslateX: Animated.AnimatedInterpolation<string | number>[];
+    underlinedOpacity: Animated.AnimatedInterpolation<string | number>[];
+};
+export default useInitUnderlinedAnimation;

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

@@ -0,0 +1,55 @@
+import { Animated, View } from 'react-native';
+declare const TabScreen: 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;
+}>;
+declare const TabContainer: 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;
+}>;
+declare const HeaderTabWrapper: 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;
+} & {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const HeaderTabItem: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    isFirstItem?: boolean | undefined;
+}, {}, {}>;
+declare const HeaderTabItemOutlineWrapper: 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;
+}>;
+declare const HeaderTabItemOutline: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeActive: boolean;
+}, {}, {}>;
+declare const HeaderTabItemWrapper: 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;
+}>;
+declare const HeaderTabItemIndicator: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+export { HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, HeaderTabItemOutlineWrapper, HeaderTabItemOutline, HeaderTabItemWrapper, HeaderTabItemIndicator, };

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

@@ -0,0 +1,51 @@
+import { Animated, View } from 'react-native';
+declare const TabContainer: 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;
+}>;
+declare const HeaderTabWrapper: 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;
+} & {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const HeaderTab: 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;
+}>;
+declare const HeaderTabItem: 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;
+}>;
+declare const TabScreen: 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;
+}>;
+declare const StyledIndicator: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeWidth: number;
+}, {}, {}>;
+declare const StyledBadgeWrapper: 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 { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, TabScreen, StyledIndicator, StyledBadgeWrapper, };

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+export declare type StatusBadgeType = {
+    type: 'status';
+};
+export declare type CounterBadgeType = {
+    type: 'counter';
+    value: number;
+    max?: number;
+};
+export declare type BadgeConfigType = StatusBadgeType | CounterBadgeType;
+interface TabWithBadgeProps {
+    config?: BadgeConfigType;
+    tabItem: ReactNode;
+}
+declare const TabWithBadge: ({ config, tabItem }: TabWithBadgeProps) => React.JSX.Element;
+export default TabWithBadge;

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

@@ -0,0 +1,62 @@
+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';
+export declare type ItemType = string | IconName | ((props: {
+    color: string;
+}) => ReactNode);
+export declare type TabType = {
+    key: string;
+    activeItem: ItemType;
+    inactiveItem?: ItemType;
+    component: ReactNode;
+    testID?: string;
+    badge?: BadgeConfigType;
+};
+export interface TabsProps extends ViewProps {
+    /**
+     * Callback which is called on tab press, receiving key of upcoming active Tab.
+     */
+    onTabPress: (key: string) => void;
+    /**
+     * Current selected tab key.
+     */
+    selectedTabKey: string;
+    /**
+     * List of Tabs to be rendered. Each Tab must have an unique key.
+     */
+    tabs: TabType[];
+    /**
+     * Style for the container of Tab.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style for the tab navigation bar.
+     */
+    barStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether inactive screen should be removed and unmounted in
+     * Defaults value is `false`.
+     */
+    lazy?: boolean;
+    /**
+     * Only work when lazy is `true`. You can specify how many adjacent screens should be preloaded.
+     * Defaults value is `1`.
+     */
+    lazyPreloadDistance?: number;
+    /**
+     * Boolean indicating whether to enable swipe gestures. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
+     * Defaults value is `true`.
+     */
+    swipeEnabled?: boolean;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+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, variant, }: import("./ScrollableTabs").ScrollableTabProps) => React.JSX.Element;
+    useIsFocused: () => boolean | undefined;
+};
+export default _default;

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

@@ -0,0 +1,8 @@
+import { NativeSyntheticEvent } from 'react-native';
+declare const useHandlePageScroll: () => {
+    onPageScrollStateChanged: (e: NativeSyntheticEvent<Readonly<{
+        pageScrollState: 'idle' | 'dragging' | 'settling';
+    }>>) => void;
+    hasScrolled: import("react").MutableRefObject<boolean>;
+};
+export default useHandlePageScroll;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TabContext: React.Context<{
+    selectedTabKey: string;
+} | null>;
+export declare const ScreenContext: React.Context<string | null>;
+export declare const useIsFocused: () => boolean | undefined;

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

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export declare const useAnimatedValueArray: (initialValues: number[]) => Animated.Value[];

package/types/components/Tag/StyledTag.d.ts

@@ -0,0 +1,17 @@
+import { View } from 'react-native';
+declare type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+declare const StyledView: 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;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+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;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+export { StyledText, StyledView };

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

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+interface TagProps extends ViewProps {
+    /**
+     * Content of the Tag.
+     */
+    content: string | ReactElement;
+    /**
+     * Visual intent color to apply to Tag.
+     */
+    intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    /**
+     * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
+     * Tag variant.
+     */
+    variant?: 'filled' | 'outlined';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Tag: ({ content, variant, intent, style, testID, ...nativeProps }: TagProps) => JSX.Element;
+export default Tag;

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

@@ -0,0 +1,86 @@
+import { TextInput, View, Animated } from 'react-native';
+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, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {}>;
+declare const StyledLabelInsideTextInput: 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;
+} & {
+    themeState: State;
+}, {}, {}>;
+declare const StyledAsteriskLabelInsideTextInput: 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;
+} & {
+    themeState: State;
+}, {}, {}>;
+declare const StyledErrorContainer: 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;
+}>;
+declare const StyledError: 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;
+}, {}, {}>;
+declare const StyledMaxLengthMessage: 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;
+} & {
+    themeState: State;
+}, {}, {}>;
+declare const StyledHelperText: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: import("../Typography/Caption").CaptionProps) => import("react").JSX.Element;
+declare const StyledTextInput: 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;
+} & {
+    themeVariant: Variant;
+}, {}, {
+    ref?: import("react").Ref<TextInput> | undefined;
+}>;
+declare const StyledBorderBackDrop: 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;
+} & {
+    themeState: State;
+    themeFocused: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledTextInputContainer: 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;
+}>;
+declare const StyledTextInputAndLabelContainer: 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;
+}>;
+declare const StyledErrorAndHelpTextContainer: 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;
+}>;
+declare const StyledErrorAndMaxLengthContainer: 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 { StyledTextInputContainer, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };