@hero-design/rn 8.30.3 → 8.31.0

package/types/components/Select/types.d.ts

@@ -1,23 +1,23 @@
 import type { ReactElement } from 'react';
 import type { ListRenderItemInfo, SectionListData, SectionListRenderItemInfo, StyleProp, ViewStyle } from 'react-native';
 import type { TextInputProps } from '../TextInput';
-export declare type OptionType<V> = {
+export type OptionType<V> = {
     value: V;
     text: string;
     key?: string;
     disabled?: boolean;
     highlighted?: boolean;
 };
-export declare type SectionType = {
+export type SectionType = {
     category: string;
 };
-export declare type SectionData<V, T extends OptionType<V>> = SectionListData<T, SectionType>;
-export declare type CombinedOptionsType<V, T extends OptionType<V>> = T[] | SectionData<V, T>[];
-export declare type ListRenderOptionInfo<V, T extends OptionType<V>> = ListRenderItemInfo<T> & {
+export type SectionData<V, T extends OptionType<V>> = SectionListData<T, SectionType>;
+export type CombinedOptionsType<V, T extends OptionType<V>> = T[] | SectionData<V, T>[];
+export type ListRenderOptionInfo<V, T extends OptionType<V>> = ListRenderItemInfo<T> & {
     selected: boolean;
     onPress: () => void;
 };
-export declare type SectionListRenderOptionInfo<V, T extends OptionType<V>> = SectionListRenderItemInfo<T, SectionType> & {
+export type SectionListRenderOptionInfo<V, T extends OptionType<V>> = SectionListRenderItemInfo<T, SectionType> & {
     selected: boolean;
     onPress: () => void;
 };

package/types/components/Skeleton/StyledSkeleton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare type ThemeIntent = 'light' | 'dark';
-declare type ThemeVariant = 'circular' | 'rectangular' | 'rounded';
+type ThemeIntent = 'light' | 'dark';
+type ThemeVariant = 'circular' | 'rectangular' | 'rounded';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Success/StyledSuccess.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Modal, View } from 'react-native';
-declare type SuccessVariant = 'full-screen' | 'in-page';
+type SuccessVariant = 'full-screen' | 'in-page';
 declare const StyledSuccessContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Swipeable/StyledSwipeable.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TouchableOpacity } from 'react-native';
-export declare type ActionIntent = 'primary' | 'success' | 'danger';
+export type ActionIntent = 'primary' | 'success' | 'danger';
 export declare const StyledRectButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode } from 'react';
 import { Swipeable as RnghSwipeable, RectButton } from 'react-native-gesture-handler';
-declare type State = 'closed' | 'leftOpen' | 'rightOpen';
-declare type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
+type State = 'closed' | 'leftOpen' | 'rightOpen';
+type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
 export interface SwipeableProps extends Pick<RnghSwipeableProps, 'enableTrackpadTwoFingerGesture' | 'friction' | 'leftThreshold' | 'rightThreshold' | 'overshootLeft' | 'overshootRight' | 'overshootFriction' | 'useNativeAnimations' | 'containerStyle' | 'childrenContainerStyle'> {
     /**
      * React node that is swipeable.

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

@@ -1,11 +1,11 @@
 import { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../../Icon';
-declare type StatusBadgeType = {
+type StatusBadgeType = {
     type: 'status';
 };
-export declare type BadgeConfigType = StatusBadgeType;
-export declare type OptionType<T> = {
+export type BadgeConfigType = StatusBadgeType;
+export type OptionType<T> = {
     value: T;
     text: string;
     icon: IconName;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Animated, View } from 'react-native';
-export declare type Variant = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked';
+export type Variant = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
-export declare type StatusBadgeType = {
+export type StatusBadgeType = {
     type: 'status';
 };
-export declare type CounterBadgeType = {
+export type CounterBadgeType = {
     type: 'counter';
     value: number;
     max?: number;
 };
-export declare type BadgeConfigType = StatusBadgeType | CounterBadgeType;
+export type BadgeConfigType = StatusBadgeType | CounterBadgeType;
 interface TabWithBadgeProps {
     config?: BadgeConfigType;
     tabItem: ReactNode;

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

@@ -2,10 +2,10 @@ import type { ReactNode } 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: {
+export type ItemType = string | IconName | ((props: {
     color: string;
 }) => ReactNode);
-export declare type TabType = {
+export type TabType = {
     key: string;
     activeItem: ItemType;
     inactiveItem?: ItemType;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { View } from 'react-native';
-declare type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
-declare type ThemeVariant = 'filled' | 'outlined';
+type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+type ThemeVariant = 'filled' | 'outlined';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TextInput, View } from 'react-native';
-export declare type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
-declare type Variant = 'text' | 'textarea';
+export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+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> | undefined;

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

@@ -3,7 +3,7 @@ import { TextInput as RNTextInput } from 'react-native';
 import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
-export declare type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
+export type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
 export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.

package/types/components/Toast/ToastContext.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import type { ToastContainerProps, ToastProps } from './types';
-export declare type ToastControllerContextType = {
+export type ToastControllerContextType = {
     show: (props: Omit<ToastProps, 'position'>) => string;
     hide: (id: string) => void;
     clearAll: () => void;
 };
 export declare const ToastContext: import("react").Context<ToastControllerContextType>;
-export declare type ToastConfigContextType = Pick<ToastContainerProps, 'position' | 'displayType'>;
+export type ToastConfigContextType = Pick<ToastContainerProps, 'position' | 'displayType'>;
 export declare const ToastConfigContext: import("react").Context<ToastConfigContextType>;
 export declare const useToastConfig: () => ToastConfigContextType;
 export declare const useToast: () => ToastControllerContextType;

package/types/components/Toast/ToastProvider.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ToastContainerProps } from './types';
-declare type ToastProviderProps = {
+type ToastProviderProps = {
     /**
      * Content to be wrapped.
      */

package/types/components/Toast/types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
-export declare type IntentType = 'success' | 'info' | 'warning' | 'error' | 'notification' | 'snackbar';
+export type IntentType = 'success' | 'info' | 'warning' | 'error' | 'notification' | 'snackbar';
 export interface ToastProps {
     /**
      * Toast content.
@@ -66,7 +66,7 @@ export interface ToastContainerProps {
      */
     style?: StyleProp<ViewStyle>;
 }
-export declare type ToastItemProps = {
+export type ToastItemProps = {
     id: string;
     props: Omit<ToastProps, 'position'>;
 };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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> | 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,26 @@
+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';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Caption: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: CaptionProps) => JSX.Element;
+export default Caption;

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

@@ -1,6 +1,8 @@
 import Text from './Text';
+import Caption from './Caption';
 interface TypographyProps {
     Text: typeof Text;
+    Caption: typeof Caption;
 }
 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 type ThemeIntent = 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled';

package/types/theme/ThemeSwitcher.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-declare type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
+type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
 declare const ThemeSwitcher: ({ name, children, }: {
     name?: ThemeName | undefined;
     children: React.ReactNode;

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

@@ -25,6 +25,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xxxxxlarge: number;
         '6xlarge': number;
         '7xlarge': number;
+        caption: number;
     };
     lineHeights: {
         xsmall: number;
@@ -37,6 +38,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xxxxxlarge: number;
         '6xlarge': number;
         '7xlarge': number;
+        caption: number;
     };
 };
 export default getTypographyTheme;

package/types/theme/getTheme.d.ts

@@ -44,7 +44,7 @@ import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
 import type { GlobalTheme, Scale, SystemPalette } from './global';
-declare type Theme = GlobalTheme & {
+type Theme = GlobalTheme & {
     __hd__: {
         accordion: ReturnType<typeof getAccordionTheme>;
         alert: ReturnType<typeof getAlertTheme>;

package/types/theme/global/colors/types.d.ts

@@ -1,4 +1,4 @@
-export declare type GlobalSystemPalette = {
+export type GlobalSystemPalette = {
     defaultGlobalSurface: string;
     onDefaultGlobalSurface: string;
     neutralGlobalSurface: string;
@@ -33,7 +33,7 @@ export declare type GlobalSystemPalette = {
     archivedSurface: string;
     onArchivedSurface: string;
 };
-export declare type BrandSystemPalette = {
+export type BrandSystemPalette = {
     primary: string;
     onPrimary: string;
     secondary: string;
@@ -44,4 +44,4 @@ export declare type BrandSystemPalette = {
     decorativePrimary: string;
     decorativePrimarySurface: string;
 };
-export declare type SystemPalette = GlobalSystemPalette & BrandSystemPalette;
+export type SystemPalette = GlobalSystemPalette & BrandSystemPalette;

package/types/theme/global/index.d.ts

@@ -60,6 +60,6 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     sizes: import("./sizes").Sizes;
     radii: import("./borders").Radii;
 };
-declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
+type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export type { GlobalTheme, Scale, SystemPalette };
 export { getGlobalTheme, defaultScale, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };

package/types/theme/global/scale.d.ts

@@ -9,6 +9,6 @@ declare const scale: {
     fontSize: number;
     radius: number;
 };
-declare type Scale = typeof scale;
+type Scale = typeof scale;
 export { scale };
 export type { Scale };

package/types/theme/global/typography.d.ts

@@ -20,7 +20,7 @@ interface FontSizes {
     small: number;
     xsmall: number;
 }
-declare type LineHeights = FontSizes;
+type LineHeights = FontSizes;
 declare const getFonts: ({ neutral, playful, }: {
     neutral: string;
     playful: string;

package/types/types.d.ts

@@ -9,6 +9,4 @@ import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './compon
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
-import { FABHandles } from './components/FAB/FAB';
-import { ActionGroupHandles } from './components/FAB/ActionGroup';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, };
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, };

package/types/utils/helpers.d.ts

@@ -1,4 +1,4 @@
 export declare const isIOS: boolean;
 export declare const isAndroid: boolean;
-export declare function pick<O, T extends keyof O>(keys: T[], obj: O): Pick<O, T>;
+export declare function pick<O extends object, T extends keyof O>(keys: T[], obj: O): Pick<O, T>;
 export declare function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T>;