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

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { ToolbarMessageState } from './StyledToolbar';
+export declare type ToolbarMessageHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
+export interface ToolbarMessageProps extends NativeTextInputProps {
+    /**
+     * Element to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * Element to render on the right side of the input.
+     */
+    suffix?: React.ReactNode;
+    /**
+     * 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;
+    /**
+     * Component ref.
+     */
+    ref?: React.Ref<ToolbarMessageHandles>;
+}
+export declare const getState: ({ disabled, editable, isEmptyValue, }: {
+    disabled?: boolean | undefined;
+    editable?: boolean | undefined;
+    isEmptyValue?: boolean | undefined;
+}) => ToolbarMessageState;
+declare const ToolbarMessage: React.ForwardRefExoticComponent<Omit<ToolbarMessageProps, "ref"> & React.RefAttributes<ToolbarMessageHandles>>;
+export default ToolbarMessage;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+export interface ToolbarProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Toolbar's content.
+     */
+    children?: ReactNode;
+}
+declare const _default: (({ children, ...rest }: ToolbarProps) => React.JSX.Element) & {
+    Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => React.JSX.Element;
+    Message: React.ForwardRefExoticComponent<Omit<import("./ToolbarMessage").ToolbarMessageProps, "ref"> & React.RefAttributes<import("./ToolbarMessage").ToolbarMessageHandles>>;
+};
+export default _default;

package/types/components/Typography/Body/StyledBody.d.ts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+import { ThemeIntent } from '../types';
+declare type ThemeVariant = 'small' | 'small-bold' | 'regular' | 'regular-bold';
+declare const StyledBody: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+    themeTypeface: 'neutral' | 'playful';
+    themeVariant: ThemeVariant;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledBody };

package/types/components/Typography/Body/__tests__/StyledBody.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Typography/Body/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export interface BodyProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled' | 'muted';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * The typeface to render the text in:
+     * - `neutral`: The default typeface for the platform.
+     * - `playful`: To visualise a playful content.
+     */
+    typeface?: 'neutral' | 'playful';
+    /**
+     * size variant of the text.
+     * */
+    variant?: 'regular' | 'regular-bold' | 'small' | 'small-bold';
+}
+declare const Body: ({ children, intent, allowFontScaling, typeface, variant, ...nativeProps }: BodyProps) => React.JSX.Element;
+export default Body;

package/types/components/Typography/Caption/StyledCaption.d.ts

@@ -0,0 +1,12 @@
+import { Text } from 'react-native';
+import { ThemeIntent } from '../types';
+declare const StyledCaption: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeFontWeight: 'regular' | 'semi-bold';
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledCaption };

package/types/components/Typography/Caption/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export interface CaptionProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Font weight of the text.
+     */
+    fontWeight?: 'regular' | 'semi-bold';
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled' | 'muted';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Caption: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: CaptionProps) => React.JSX.Element;
+export default Caption;

package/types/components/Typography/Label/StyledLabel.d.ts

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+import { ThemeIntent } from '../types';
+declare const StyledLabel: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledLabel };

package/types/components/Typography/Label/__tests__/StyledLabel.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Typography/Label/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export interface LabelProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled' | 'muted';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Label: ({ children, intent, allowFontScaling, ...nativeProps }: LabelProps) => React.JSX.Element;
+export default Label;

package/types/components/Typography/Text/StyledText.d.ts

@@ -0,0 +1,13 @@
+import { Text } from 'react-native';
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeFontSize: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    themeFontWeight: 'light' | 'regular' | 'semi-bold';
+    themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled';
+    themeTypeface: 'neutral' | 'playful';
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledText };

package/types/components/Typography/Text/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export interface TextProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Size of the text.
+     */
+    fontSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    /**
+     * Font weight of the text.
+     */
+    fontWeight?: 'light' | 'regular' | 'semi-bold';
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * The typeface to render the text in:
+     * - `neutral`: The default typeface for the platform.
+     * - `playful`: To visualise a playful content.
+     */
+    typeface?: 'neutral' | 'playful';
+}
+declare const Text: ({ children, fontSize, fontWeight, intent, typeface, allowFontScaling, ...nativeProps }: TextProps) => React.JSX.Element;
+export default Text;

package/types/components/Typography/Title/StyledTitle.d.ts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+import { ThemeIntent } from '../types';
+declare type ThemeLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+declare const StyledTitle: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+    themeLevel: ThemeLevel;
+    themeTypeface: 'neutral' | 'playful';
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledTitle };

package/types/components/Typography/Title/__tests__/StyledTitle.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Typography/Title/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export interface TitleProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled' | 'muted';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * The typeface to render the text in:
+     * - `neutral`: The default typeface for the platform.
+     * - `playful`: To visualise a playful content.
+     */
+    typeface?: 'neutral' | 'playful';
+    /**
+     * The level of Title including h1, h2, h3, h4, h5 and h6.
+     */
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare const Title: ({ children, intent, allowFontScaling, level, typeface, ...nativeProps }: TitleProps) => React.JSX.Element;
+export default Title;

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

@@ -0,0 +1,17 @@
+import Text from './Text';
+import Caption from './Caption';
+import Label from './Label';
+import Title from './Title';
+import Body from './Body';
+interface TypographyProps {
+    /**
+     * @deprecated Typography.Text will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
+     */
+    Text: typeof Text;
+    Caption: typeof Caption;
+    Label: typeof Label;
+    Title: typeof Title;
+    Body: typeof Body;
+}
+declare const Typography: TypographyProps;
+export default Typography;

package/types/components/Typography/types.d.ts

@@ -0,0 +1,6 @@
+export declare const FONTWEIGHT_MAP: {
+    readonly light: "light";
+    readonly regular: "regular";
+    readonly 'semi-bold': "semiBold";
+};
+export declare type ThemeIntent = 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled' | 'muted';

package/types/index.d.ts

@@ -0,0 +1,57 @@
+import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ThemeSwitcher, withTheme } from './theme';
+import { scale } from './utils/scale';
+import Accordion from './components/Accordion';
+import Alert from './components/Alert';
+import Attachment from './components/Attachment';
+import Avatar, { useAvatarColors } from './components/Avatar';
+import Badge from './components/Badge';
+import BottomNavigation from './components/BottomNavigation';
+import BottomSheet from './components/BottomSheet';
+import Box from './components/Box';
+import Button from './components/Button';
+import Calendar from './components/Calendar';
+import Carousel from './components/Carousel';
+import Card from './components/Card';
+import Chip from './components/Chip';
+import Collapse from './components/Collapse';
+import Checkbox from './components/Checkbox';
+import ContentNavigator from './components/ContentNavigator';
+import DatePicker from './components/DatePicker';
+import Divider from './components/Divider';
+import Drawer from './components/Drawer';
+import Empty from './components/Empty';
+import Error from './components/Error';
+import FAB from './components/FAB';
+import HeroDesignProvider from './components/HeroDesignProvider';
+import MapPin from './components/MapPin';
+import Icon from './components/Icon';
+import Image from './components/Image';
+import List from './components/List';
+import PinInput from './components/PinInput';
+import Progress from './components/Progress';
+import Slider from './components/Slider';
+import Spinner from './components/Spinner';
+import Swipeable from './components/Swipeable';
+import Radio from './components/Radio';
+import SectionHeading from './components/SectionHeading';
+import Select from './components/Select';
+import Skeleton from './components/Skeleton';
+import Success from './components/Success';
+import Switch from './components/Switch';
+import Tabs from './components/Tabs';
+import Tag from './components/Tag';
+import TextInput from './components/TextInput';
+import TimePicker from './components/TimePicker';
+import Toast from './components/Toast';
+import Toolbar from './components/Toolbar';
+import Typography from './components/Typography';
+import Rate from './components/Rate';
+import RefreshControl from './components/RefreshControl';
+import RichTextEditor from './components/RichTextEditor';
+import PageControl from './components/PageControl';
+import Portal from './components/Portal';
+import { ScrollViewWithFAB, SectionListWithFAB, FlatListWithFAB } from './components/AnimatedScroller';
+import Search from './components/Search';
+import FloatingIsland from './components/FloatingIsland';
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, };
+export * from './types';

package/types/testHelpers/renderWithTheme.d.ts

@@ -0,0 +1,3 @@
+import type { RenderOptions } from '@testing-library/react-native';
+declare const renderWithTheme: (ui: JSX.Element, options?: RenderOptions) => import("@testing-library/react-native").RenderAPI;
+export default renderWithTheme;

package/types/testHelpers/utils.d.ts

@@ -0,0 +1 @@
+export declare const setOrientation: (orientation: 'portrait' | 'landscape') => void;

package/types/theme/ThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import type { Theme } from './getTheme';
+export interface ThemeProviderProps {
+    theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+    children: React.ReactNode;
+}
+interface ThemeProviderType {
+    (props: ThemeProviderProps): React.ReactElement;
+}
+declare const ThemeProvider: ThemeProviderType;
+declare const useTheme: () => Theme;
+export { useTheme };
+export default ThemeProvider;

package/types/theme/ThemeSwitcher.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+declare type ThemeName = 'swag' | 'swagDark' | 'swagLight' | 'work' | 'jobs' | 'wallet' | 'eBens';
+declare const ThemeSwitcher: ({ name, children, }: {
+    name?: ThemeName | undefined;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const withTheme: <P extends Record<string, unknown>>(C: React.ComponentType<P>, themeName: ThemeName) => (props: React.PropsWithChildren<P>) => React.JSX.Element;
+export default ThemeSwitcher;

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

@@ -0,0 +1,13 @@
+import type { GlobalTheme } from '../global';
+declare const getAccordionTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+    };
+    space: {
+        padding: number;
+    };
+    radii: {
+        card: number;
+    };
+};
+export default getAccordionTheme;

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

@@ -0,0 +1,36 @@
+import type { GlobalTheme } from '../global';
+declare const getAlertTheme: (theme: GlobalTheme) => {
+    colors: {
+        backgrounds: {
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            notification: string;
+        };
+        texts: {
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            notification: string;
+        };
+        divider: string;
+    };
+    radii: {
+        default: number;
+    };
+    sizes: {
+        height: number;
+    };
+    space: {
+        contentPaddingHorizontal: number;
+        textPaddingHorizontal: number;
+        iconLeftPadding: number;
+        ctaPadding: number;
+    };
+    borderWidths: {
+        base: number;
+    };
+};
+export default getAlertTheme;

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

@@ -0,0 +1,21 @@
+import type { GlobalTheme } from '../global';
+declare const getAttachmentTheme: (theme: GlobalTheme) => {
+    colors: {
+        highlightedBackground: string;
+    };
+    radii: {
+        image: number;
+        container: number;
+    };
+    sizes: {
+        imageHeight: number;
+        imageWidth: number;
+    };
+    space: {
+        containerPadding: number;
+        containerVerticalPadding: number;
+        ctaPadding: number;
+        textHorizontalPadding: number;
+    };
+};
+export default getAttachmentTheme;

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

@@ -0,0 +1,50 @@
+import type { GlobalTheme } from '../global';
+declare const getAvatarTheme: (theme: GlobalTheme) => {
+    colors: {
+        primary: string;
+        info: string;
+        danger: string;
+        success: string;
+        warning: string;
+        text: string;
+    };
+    spaces: {
+        titleMarginTopForAndroid: {
+            small: number;
+            medium: number;
+            large: number;
+            xlarge: number;
+            xxlarge: number;
+            xxxlarge: number;
+            xxxxlarge: number;
+            xxxxxlarge: number;
+        };
+    };
+    sizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+        xxlarge: number;
+        xxxlarge: number;
+        xxxxlarge: number;
+        xxxxxlarge: number;
+    };
+    radii: {
+        rounded: number;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+        xxlarge: number;
+        xxxlarge: number;
+        xxxxlarge: number;
+        xxxxxlarge: number;
+    };
+};
+export default getAvatarTheme;

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

@@ -0,0 +1,56 @@
+import type { GlobalTheme } from '../global';
+declare const getBadgeTheme: (theme: GlobalTheme) => {
+    colors: {
+        primary: string;
+        danger: string;
+        info: string;
+        success: string;
+        warning: string;
+        archived: string;
+        text: string;
+        border: string;
+    };
+    fonts: {
+        medium: string;
+        small: string;
+    };
+    fontSizes: {
+        medium: number;
+        small: number;
+        icon: {
+            medium: number;
+            small: number;
+        };
+    };
+    sizes: {
+        medium: {
+            height: number;
+            minWidth: number;
+        };
+        small: {
+            height: number;
+            minWidth: number;
+        };
+        statusHeight: number;
+        statusWidth: number;
+    };
+    space: {
+        medium: {
+            horizontalPadding: number;
+        };
+        small: {
+            horizontalPadding: number;
+        };
+        statusPositionTop: number;
+        statusPositionRight: number;
+    };
+    lineHeights: {
+        medium: number;
+        small: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+};
+export declare type BadgeThemeType = ReturnType<typeof getBadgeTheme>;
+export default getBadgeTheme;

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

@@ -0,0 +1,23 @@
+import type { GlobalTheme } from '../global';
+declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
+    colors: {
+        shadow: string;
+        background: string;
+    };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
+    sizes: {
+        height: number;
+    };
+    space: {
+        titleMarginTop: number;
+    };
+};
+export default getBottomNavigationTheme;