@hero-design/rn 7.25.1 → 7.27.0

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

@@ -45,12 +45,17 @@ export interface TabsProps extends ViewProps {
      * 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, testID: componentTestID, }: TabsProps) => JSX.Element) & {
-    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element;
+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, }: TabsProps) => JSX.Element;
 };
 export default _default;

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

@@ -1,10 +1,12 @@
 import { View, Text } from 'react-native';
 declare type ThemeIntent = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+declare 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;
 } & {
     themeIntent: ThemeIntent;
+    themeVariant: ThemeVariant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -13,6 +15,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
+    themeVariant: ThemeVariant;
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

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

@@ -1,13 +1,18 @@
+import { ReactElement } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface TagProps extends ViewProps {
     /**
      * Content of the Tag.
      */
-    content: string;
+    content: string | ReactElement;
     /**
      * Visual intent color to apply to Tag.
      */
     intent?: 'primary' | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    /**
+     * Tag variant.
+     */
+    variant?: 'filled' | 'outlined';
     /**
      * Additional style.
      */
@@ -17,5 +22,5 @@ interface TagProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Tag: ({ content, intent, style, testID, ...nativeProps }: TagProps) => JSX.Element;
+declare const Tag: ({ content, variant, intent, style, testID, ...nativeProps }: TagProps) => JSX.Element;
 export default Tag;

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

@@ -6,6 +6,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
+    themeTypeface: 'neutral' | 'playful';
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

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

@@ -25,6 +25,12 @@ export interface TextProps extends NativeTextProps {
      * 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, ...nativeProps }: TextProps) => JSX.Element;
+declare const Text: ({ children, fontSize, fontWeight, intent, typeface, ...nativeProps }: TextProps) => JSX.Element;
 export default Text;

package/types/index.d.ts

@@ -3,7 +3,7 @@ import { scale } from './utils/scale';
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
 import Attachment from './components/Attachment';
-import Avatar from './components/Avatar';
+import Avatar, { useAvatarColors } from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
@@ -40,5 +40,5 @@ import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';

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

@@ -6,6 +6,8 @@ declare const getAvatarTheme: (theme: GlobalTheme) => {
         danger: string;
         success: string;
         warning: string;
+        text: string;
+        visualisation: string[];
     };
     sizes: {
         small: number;
@@ -20,8 +22,8 @@ declare const getAvatarTheme: (theme: GlobalTheme) => {
     radii: {
         rounded: number;
     };
-    borderWidths: {
-        default: number;
+    fonts: {
+        default: string;
     };
     fontSizes: {
         small: number;

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

@@ -1,17 +1,38 @@
 import type { GlobalTheme } from '../global';
 declare const getProgressTheme: (theme: GlobalTheme) => {
     colors: {
-        primary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        info: string;
-        archived: string;
-        background: string;
-        innerBackground: string;
+        completeness: {
+            primary: string;
+            success: string;
+            warning: string;
+            danger: string;
+            info: string;
+            archived: string;
+            primaryInverted: string;
+            successInverted: string;
+            warningInverted: string;
+            dangerInverted: string;
+            infoInverted: string;
+            archivedInverted: string;
+        };
+        incompleteness: {
+            primary: string;
+            success: string;
+            warning: string;
+            danger: string;
+            info: string;
+            archived: string;
+            primaryInverted: string;
+            successInverted: string;
+            warningInverted: string;
+            dangerInverted: string;
+            infoInverted: string;
+            archivedInverted: string;
+        };
     };
     sizes: {
-        circleWidth: number;
+        circleDiameter: number;
+        circleCompletenessHeight: number;
         barHeight: number;
     };
     radii: {

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

@@ -18,6 +18,7 @@ declare const getTagTheme: (theme: GlobalTheme) => {
         dangerBackground: string;
         archived: string;
         archivedBackground: string;
+        text: string;
     };
     fonts: {
         default: string;

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

@@ -11,11 +11,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         success: string;
         inverted: string;
     };
-    fonts: {
-        light: string;
-        regular: string;
-        semiBold: string;
-    };
+    fonts: import("../global/typography").Fonts;
     fontSizes: {
         small: number;
         medium: number;

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

@@ -12,18 +12,23 @@ export declare type GlobalSystemPalette = {
     inactiveOutline: string;
     disabledOutline: string;
     error: string;
+    mutedError: string;
     errorSurface: string;
     onErrorSurface: string;
     warning: string;
+    mutedWarning: string;
     warningSurface: string;
     onWarningSurface: string;
     success: string;
+    mutedSuccess: string;
     successSurface: string;
     onSuccessSurface: string;
     info: string;
+    mutedInfo: string;
     infoSurface: string;
     onInfoSurface: string;
     archived: string;
+    mutedArchived: string;
     archivedSurface: string;
     onArchivedSurface: string;
 };

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

@@ -68,18 +68,23 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         inactiveOutline: string;
         disabledOutline: string;
         error: string;
+        mutedError: string;
         errorSurface: string;
         onErrorSurface: string;
         warning: string;
+        mutedWarning: string;
         warningSurface: string;
         onWarningSurface: string;
         success: string;
+        mutedSuccess: string;
         successSurface: string;
         onSuccessSurface: string;
         info: string;
+        mutedInfo: string;
         infoSurface: string;
         onInfoSurface: string;
         archived: string;
+        mutedArchived: string;
         archivedSurface: string;
         onArchivedSurface: string;
         primary: string;

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

@@ -2,7 +2,10 @@ declare const scale: {
     borderWidth: number;
     space: number;
     size: number;
-    font: string;
+    font: {
+        neutral: string;
+        playful: string;
+    };
     fontSize: number;
     radius: number;
 };

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

@@ -1,8 +1,12 @@
-interface Fonts {
+interface FontWeights {
     light: string;
     regular: string;
     semiBold: string;
 }
+interface Fonts {
+    neutral: FontWeights;
+    playful: FontWeights;
+}
 interface FontSizes {
     xxxxxlarge: number;
     xxxxlarge: number;
@@ -15,7 +19,10 @@ interface FontSizes {
     xsmall: number;
 }
 declare type LineHeights = FontSizes;
-declare const getFonts: (baseFont: string) => Fonts;
+declare const getFonts: ({ neutral, playful, }: {
+    neutral: string;
+    playful: string;
+}) => Fonts;
 declare const getFontSizes: (baseFontSize: number) => FontSizes;
 declare const getLineHeights: (fontSizes: FontSizes) => LineHeights;
 export { getFonts, getFontSizes, getLineHeights };

package/types/utils/hooks.d.ts

@@ -1 +1,3 @@
 export declare const usePrevious: <T>(value: T) => T | undefined;
+export declare function usePropsOrInternalState<T>(initialState: T, state: T | undefined, setState: ((val: T) => void) | undefined): [T, (val: T) => void];
+export declare const useDeprecation: (message: string, cond?: boolean) => void;

package/src/components/Accordion/utils.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export function usePropsOrInternalState<T>(
-  initialState: T,
-  state: T | undefined,
-  setState: ((val: T) => void) | undefined
-): [T, (val: T) => void] {
-  const [internalState, setInternalState] = React.useState<T>(initialState);
-
-  return [state || internalState, setState || setInternalState];
-}

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

@@ -1 +0,0 @@
-export declare function usePropsOrInternalState<T>(initialState: T, state: T | undefined, setState: ((val: T) => void) | undefined): [T, (val: T) => void];