@hero-design/rn 8.68.0 → 8.69.0

package/types/components/BottomSheet/Header.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
 import type { ReactElement } from 'react';
-declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
+import React from 'react';
+declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, variant, }: {
     content: string | ReactElement;
     showDivider: boolean;
     onRequestClose?: (() => void) | undefined;
     showCloseButton: boolean;
+    variant?: "fixed" | "floating" | undefined;
 }) => React.JSX.Element;
 export default Header;

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -1,5 +1,5 @@
-import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, View } from 'react-native';
 import type { ViewProps } from 'react-native';
+import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, TouchableOpacity, View } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -12,6 +12,14 @@ declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledCompon
 }, {}, {
     ref?: import("react").Ref<KeyboardAvoidingView> | undefined;
 }>;
+declare const StyledFloatingWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledFloatingBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
 declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -44,4 +52,10 @@ declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewP
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, StyledKeyboardAvoidingView, };
+declare const StyledFloatingHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { StyledBackdrop, StyledBottomSheet, StyledFloatingBottomSheet, StyledFloatingHeaderWrapper, StyledFloatingWrapper, StyledFooter, StyledHeader, StyledHeaderWrapper, StyledIconWrapper, StyledKeyboardAvoidingView, StyledWrapper, };

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

@@ -63,8 +63,12 @@ interface BottomSheetProps {
      * Supported orientations for the BottomSheet modal, iOS only.
      */
     supportedOrientations?: ('portrait' | 'landscape')[];
+    /**
+     * Variant of the bottom sheet.
+     */
+    variant?: 'fixed' | 'floating';
 }
-declare const _default: (({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, supportedOrientations, }: BottomSheetProps) => JSX.Element) & {
+declare const _default: (({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, supportedOrientations, variant, }: BottomSheetProps) => JSX.Element) & {
     ScrollView: ({ scrollEventThrottle, ...props }: import("react-native").ScrollViewProps) => JSX.Element;
 };
 export default _default;

package/types/components/Box/StyledBox.d.ts

@@ -2,7 +2,7 @@ import { Theme } from '@emotion/react';
 import { View } from 'react-native';
 import { FlexStyleProps, StyleProps } from './types';
 export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
-    [x: string]: string;
+    [x: string]: string | undefined;
 } | {
     [x: string]: number;
 } | undefined;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export interface ProgressStepProps extends ViewProps {
+    /**
+     * The total number of steps.
+     */
+    steps: number;
+    /**
+     * The current step.
+     */
+    current: number;
+    /**
+     * Test ID of the component.
+     */
+    testID?: string;
+}
+declare type StepState = 'complete' | 'incomplete' | 'current';
+export declare const getStepState: (current: number, index: number) => StepState;
+declare const ProgressStep: ({ steps, current, onLayout, ...props }: ProgressStepProps) => React.JSX.Element;
+export default ProgressStep;

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

@@ -0,0 +1,21 @@
+declare type StepState = 'complete' | 'incomplete' | 'current';
+declare const StyledStepContainer: 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 StyledStep: 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: StepState;
+    themeWidth: number;
+}, {}, {}>;
+declare const StyledSingleStepContainer: 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 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;
+}, {}, {}>;
+export { StyledStepContainer, StyledStep, StyledSingleStepContainer, StyledSingleStep, };

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

@@ -1,5 +1,6 @@
 declare const Progress: {
     readonly Circle: ({ value, renderValue, intent, style, testID, ...nativeProps }: import("./ProgressCircle").ProgressCircleProps) => JSX.Element;
     readonly Bar: ({ value, intent, style, testID, ...nativeProps }: import("./ProgressBar").ProgressBarProps) => JSX.Element;
+    readonly Step: ({ steps, current, onLayout, ...props }: import("./ProgressStep").ProgressStepProps) => import("react").JSX.Element;
 };
 export default Progress;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, swagLightSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ThemeSwitcher, withTheme } from './theme';
+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';
@@ -51,5 +51,5 @@ import PageControl from './components/PageControl';
 import Portal from './components/Portal';
 import { ScrollViewWithFAB, SectionListWithFAB, FlatListWithFAB } from './components/AnimatedScroller';
 import Search from './components/Search';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, 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, 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, };
+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, 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, };
 export * from './types';

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

@@ -4,6 +4,7 @@ declare const getBottomSheetTheme: (theme: GlobalTheme) => {
         shadow: string;
         background: string;
         backdrop: string;
+        floatingHeaderIconBackground: string;
     };
     shadows: {
         offset: {
@@ -16,9 +17,12 @@ declare const getBottomSheetTheme: (theme: GlobalTheme) => {
     };
     radii: {
         default: number;
+        floating: number;
+        floatingHeaderIcon: number;
     };
     sizes: {
         closeIcon: number;
+        floatingCloseIcon: number;
     };
     space: {
         headerWrapperVerticalPadding: number;
@@ -26,6 +30,9 @@ declare const getBottomSheetTheme: (theme: GlobalTheme) => {
         closeIconMargin: number;
         footerVerticalPadding: number;
         footerHorizontalPadding: number;
+        floatingContentMargin: number;
+        floatingInnerPadding: number;
+        floatingHeaderIconPadding: number;
     };
 };
 export default getBottomSheetTheme;

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

@@ -29,14 +29,23 @@ declare const getProgressTheme: (theme: GlobalTheme) => {
             infoInverted: string;
             archivedInverted: string;
         };
+        step: {
+            complete: string;
+            incomplete: string;
+            current: string;
+        };
     };
     sizes: {
         circleDiameter: number;
         circleCompletenessHeight: number;
         barHeight: number;
+        stepHeight: number;
     };
     radii: {
         default: number;
     };
+    space: {
+        stepGap: number;
+    };
 };
 export default getProgressTheme;

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

@@ -0,0 +1,47 @@
+declare const swagLightJobsSystemPalette: {
+    secondary: string;
+    onSecondary: string;
+    decorativeSecondary: string;
+    decorativeSecondarySurface: string;
+    defaultGlobalSurface: string;
+    onDefaultGlobalSurface: string;
+    neutralGlobalSurface: string;
+    mutedOnDefaultGlobalSurface: string;
+    inactiveOnDefaultGlobalSurface: string;
+    disabledOnDefaultGlobalSurface: string;
+    darkGlobalSurface: string;
+    onDarkGlobalSurface: string;
+    overlayGlobalSurface: string;
+    primaryOutline: string;
+    secondaryOutline: string;
+    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;
+    onPrimary: string;
+    defaultSurface: string;
+    highlightedSurface: string;
+    pressedSurface: string;
+    decorativePrimary: string;
+    decorativePrimarySurface: string;
+};
+export default swagLightJobsSystemPalette;

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

@@ -43,5 +43,7 @@ export declare type BrandSystemPalette = {
     pressedSurface: string;
     decorativePrimary: string;
     decorativePrimarySurface: string;
+    decorativeSecondary?: string;
+    decorativeSecondarySurface?: string;
 };
 export declare type SystemPalette = GlobalSystemPalette & BrandSystemPalette;

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

@@ -2,6 +2,7 @@ import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import swagDarkSystemPalette from './colors/swagDark';
 import swagLightSystemPalette from './colors/swagLight';
+import swagLightJobsSystemPalette from './colors/swagLightJobs';
 import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
@@ -52,6 +53,8 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         pressedSurface: string;
         decorativePrimary: string;
         decorativePrimarySurface: string;
+        decorativeSecondary?: string | undefined;
+        decorativeSecondarySurface?: string | undefined;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;
@@ -75,4 +78,4 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export type { GlobalTheme, Scale, SystemPalette };
-export { getGlobalTheme, defaultScale, swagSystemPalette, swagLightSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };
+export { getGlobalTheme, defaultScale, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };

package/types/theme/index.d.ts

@@ -1,9 +1,9 @@
 import getTheme from './getTheme';
 import ThemeProvider, { useTheme } from './ThemeProvider';
 import ThemeSwitcher, { withTheme } from './ThemeSwitcher';
-import { swagSystemPalette, swagLightSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette } from './global';
+import { swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette } from './global';
 import type { Theme } from './getTheme';
 declare const defaultTheme: Theme;
 export type { Theme };
-export { withTheme, getTheme, ThemeProvider, ThemeSwitcher, useTheme, swagSystemPalette, swagLightSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };
+export { withTheme, getTheme, ThemeProvider, ThemeSwitcher, useTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };
 export default defaultTheme;