@hero-design/rn 8.16.0 → 8.17.0

package/src/theme/getTheme.ts

@@ -31,6 +31,7 @@ import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
+import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
 import getSwipeableTheme from './components/swipeable';
@@ -78,6 +79,7 @@ type Theme = GlobalTheme & {
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
+    skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
     swipeable: ReturnType<typeof getSwipeableTheme>;
@@ -131,6 +133,7 @@ const getTheme = (
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
+      skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
       swipeable: getSwipeableTheme(globalTheme),

package/types/components/Error/StyledError.d.ts

@@ -39,6 +39,12 @@ declare const StyledErrorButtonSecondary: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
+declare const StyledErrorImageContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 declare const StyledErrorImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -51,4 +57,4 @@ declare const StyledErrorDescription: import("@emotion/native").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-export { ErrorVariant, StyledErrorModal, StyledErrorImage, StyledErrorContainer, StyledErrorButtonContainer, StyledErrorButtonPrimary, StyledErrorButtonSecondary, StyledErrorContent, StyledErrorTitle, StyledErrorDescription, };
+export { ErrorVariant, StyledErrorModal, StyledErrorImage, StyledErrorContainer, StyledErrorButtonContainer, StyledErrorButtonPrimary, StyledErrorButtonSecondary, StyledErrorContent, StyledErrorTitle, StyledErrorDescription, StyledErrorImageContainer, };

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

@@ -1,6 +1,7 @@
-import type { ReactElement } from 'react';
-import type { ImageSourcePropType, ViewProps } from 'react-native';
+import { ReactElement } from 'react';
+import type { ImageSourcePropType, ViewProps, ImageProps as RNImageProps } from 'react-native';
 import { ErrorVariant } from './StyledError';
+import { ImageProps } from '../Image/index';
 interface ErrorProps extends ViewProps {
     /**
      * @deprecated use conditional rendering instead
@@ -23,7 +24,7 @@ interface ErrorProps extends ViewProps {
     /**
      * Image of the error
      */
-    image?: ImageSourcePropType | string;
+    image?: ReactElement<ImageProps | RNImageProps> | ImageSourcePropType | string;
     /**
      * Testing id of the component.
      */

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type ThemeIntent = 'light' | 'dark';
+declare 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;
+} & {
+    themeIntent: ThemeIntent;
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+declare const StyledGradientContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export { StyledContainer, StyledGradientContainer };

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

@@ -0,0 +1,13 @@
+import { ViewProps } from 'react-native';
+export interface SkeletonProps extends ViewProps {
+    /**
+     * Intent of the component.
+     */
+    intent?: 'light' | 'dark';
+    /**
+     * Variant of the component.
+     */
+    variant?: 'circular' | 'rectangular' | 'rounded';
+}
+declare const Skeleton: ({ intent, variant, style, onLayout, ...props }: SkeletonProps) => JSX.Element;
+export default Skeleton;

package/types/index.d.ts

@@ -32,6 +32,7 @@ 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 Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
@@ -43,5 +44,5 @@ import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';

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

@@ -0,0 +1,17 @@
+import type { GlobalTheme } from '../global';
+declare const getSkeletonTheme: (theme: GlobalTheme) => {
+    colors: {
+        lightBackground: string;
+        darkBackground: string;
+        lightGradientStart: string;
+        lightGradientEnd: string;
+        darkGradientStart: string;
+        darkGradientEnd: string;
+    };
+    radii: {
+        rectangular: number;
+        circular: number;
+        rounded: number;
+    };
+};
+export default getSkeletonTheme;

package/types/theme/getTheme.d.ts

@@ -29,6 +29,7 @@ import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
+import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
 import getSwipeableTheme from './components/swipeable';
@@ -74,6 +75,7 @@ declare type Theme = GlobalTheme & {
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
         select: ReturnType<typeof getSelectTheme>;
+        skeleton: ReturnType<typeof getSkeletonTheme>;
         slider: ReturnType<typeof getSliderTheme>;
         spinner: ReturnType<typeof getSpinnerTheme>;
         swipeable: ReturnType<typeof getSwipeableTheme>;