@hero-design/rn 7.22.3 → 7.24.0

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

@@ -5,10 +5,14 @@ interface SpinnerProps extends ViewProps {
      * Size of Spinner.
      */
     size?: 'small' | 'medium';
+    /**
+     * Spinner's variant.
+     */
+    intent?: 'primary' | 'inverted';
     /**
      * Testing id of the component.
      */
     testID?: string;
 }
-declare const Spinner: ({ testID, size, ...nativeProps }: SpinnerProps) => ReactElement;
+declare const Spinner: ({ testID, size, intent, ...nativeProps }: SpinnerProps) => ReactElement;
 export default Spinner;

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

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

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ActionIntent } from './StyledSwipeable';
+export interface SwipeableActionProps {
+    /**
+     * Visual intent color applied to action.
+     */
+    intent?: ActionIntent;
+    /**
+     * Callback when the action button is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Action button's content
+     */
+    children?: ReactNode;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const SwipeableAction: ({ intent, onPress, style, children, testID, }: SwipeableActionProps) => JSX.Element;
+export default SwipeableAction;

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import type { SwipeableProps as RnghSwipeableProps } from 'react-native-gesture-handler/Swipeable';
+import { RectButton } from 'react-native-gesture-handler';
+declare type State = 'closed' | 'leftOpen' | 'rightOpen';
+export interface SwipeableProps extends Pick<RnghSwipeableProps, 'enableTrackpadTwoFingerGesture' | 'friction' | 'leftThreshold' | 'rightThreshold' | 'overshootLeft' | 'overshootRight' | 'overshootFriction' | 'useNativeAnimations' | 'containerStyle' | 'childrenContainerStyle'> {
+    /**
+     * React node that is swipeable.
+     */
+    children: ReactNode;
+    /**
+     * State of the component.
+     */
+    state?: 'closed' | 'leftOpen' | 'rightOpen';
+    /**
+     * Callback when the state of the component changes.
+     */
+    onStateChange?: (state: State) => void;
+    /**
+     * Action panel that is going to be revealed from the left side when user swipes right.
+     */
+    leftActions?: ReactNode;
+    /**
+     * Width of the left action panel.
+     * By default, it will take up the whole width of the device.
+     */
+    leftActionsWidth?: number;
+    /**
+     * Action panel that is going to be revealed from the right side when user swipes left.
+     */
+    rightActions?: ReactNode;
+    /**
+     * Width of the right action panel.
+     * By default, it will take up the whole width of the device.
+     */
+    rightActionsWidth?: number;
+}
+declare const _default: (({ children, state, onStateChange, leftActions, leftActionsWidth, rightActions, rightActionsWidth, ...swipeableProps }: SwipeableProps) => JSX.Element) & {
+    Action: ({ intent, onPress, style, children, testID, }: import("./SwipeableAction").SwipeableActionProps) => JSX.Element;
+    Content: typeof RectButton;
+};
+export default _default;

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

@@ -1,10 +1,8 @@
 import { TextInput, View } from 'react-native';
-export declare type Variant = 'default' | 'filled' | 'focused' | 'disabled' | 'readonly' | 'error';
+export declare type Variant = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
-} & {
-    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
@@ -70,6 +68,15 @@ declare const StyledTextInput: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<TextInput>;
 }>;
+declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    themeVariant: Variant;
+    themeFocused: boolean;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
 declare const StyledTextInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -94,4 +101,4 @@ declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").Styled
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledErrorAndMaxLengthContainer, };
+export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

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

@@ -53,7 +53,7 @@ export interface TextInputProps extends NativeTextInputProps {
     helpText?: string;
     renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
 }
-export declare const getVariant: ({ disabled, error, editable, loading, isFocused, isEmptyValue, }: {
+export declare const getVariant: ({ disabled, error, editable, loading, isEmptyValue, }: {
     disabled?: boolean;
     error?: string;
     editable?: boolean;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, workSystemPalette } from './theme';
+import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, workSystemPalette, jobsSystemPalette, ThemeSwitcher } from './theme';
 import { scale } from './utils/scale';
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
@@ -25,6 +25,7 @@ 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';
@@ -36,6 +37,7 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 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, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, Accordion, Alert, 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 * from './types';

package/types/theme/ThemeSwitcher.d.ts

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

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

@@ -0,0 +1,7 @@
+import type { GlobalTheme } from '../global';
+declare const getRefreshControlTheme: (theme: GlobalTheme) => {
+    colors: {
+        indicator: string;
+    };
+};
+export default getRefreshControlTheme;

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

@@ -9,9 +9,7 @@ declare const getRichTextEditorTheme: (theme: GlobalTheme) => {
         wrapperMarginBottom: number;
         toolbarHorizontalPadding: number;
         editorPadding: number;
-    };
-    borderWidths: {
-        webViewBorderBottomWidth: number;
+        mention: number;
     };
     fontSizes: {
         editor: number;
@@ -22,5 +20,8 @@ declare const getRichTextEditorTheme: (theme: GlobalTheme) => {
         toolbarSeparatorWidth: number;
         toolbarSeparatorHeight: number;
     };
+    radii: {
+        mention: number;
+    };
 };
 export default getRichTextEditorTheme;

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

@@ -1,7 +1,10 @@
 import type { GlobalTheme } from '../global';
 declare const getSpinnerTheme: (theme: GlobalTheme) => {
     colors: {
-        dot: string;
+        dot: {
+            primary: string;
+            inverted: string;
+        };
     };
     space: {
         spinnerDot: {

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

@@ -0,0 +1,9 @@
+import type { GlobalTheme } from '../global';
+declare const getSwipeableTheme: (theme: GlobalTheme) => {
+    colors: {
+        success: string;
+        danger: string;
+        primary: string;
+    };
+};
+export default getSwipeableTheme;

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

@@ -8,7 +8,6 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             disabled: string;
             readonly: string;
             filled: string;
-            focused: string;
         };
         error: string;
         placeholderIfNotFocused: string;
@@ -23,7 +22,6 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             disabled: string;
             readonly: string;
             filled: string;
-            focused: string;
         };
         labels: {
             default: string;
@@ -31,7 +29,6 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             disabled: string;
             readonly: string;
             filled: string;
-            focused: string;
         };
         labelsInsideTextInput: {
             default: string;
@@ -39,7 +36,6 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             disabled: string;
             readonly: string;
             filled: string;
-            focused: string;
         };
         maxLengthLabels: {
             default: string;
@@ -47,7 +43,6 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             disabled: string;
             readonly: string;
             filled: string;
-            focused: string;
         };
     };
     space: {

package/types/theme/getTheme.d.ts

@@ -20,11 +20,13 @@ import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
+import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
@@ -58,11 +60,13 @@ declare type Theme = GlobalTheme & {
         pinInput: ReturnType<typeof getPinInputTheme>;
         progress: ReturnType<typeof getProgressTheme>;
         radio: ReturnType<typeof getRadioTheme>;
+        refreshControl: ReturnType<typeof getRefreshControlTheme>;
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
         select: ReturnType<typeof getSelectTheme>;
         slider: ReturnType<typeof getSliderTheme>;
         spinner: ReturnType<typeof getSpinnerTheme>;
+        swipeable: ReturnType<typeof getSwipeableTheme>;
         switch: ReturnType<typeof getSwitchTheme>;
         tabs: ReturnType<typeof getTabsTheme>;
         tag: ReturnType<typeof getTagTheme>;

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

@@ -0,0 +1,3 @@
+import type { SystemPalette } from './types';
+declare const jobsSystemPalette: SystemPalette;
+export default jobsSystemPalette;

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

@@ -1,6 +1,7 @@
 import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import workSystemPalette from './colors/work';
+import jobsSystemPalette from './colors/jobs';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
 declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
@@ -87,4 +88,4 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export type { GlobalTheme, Scale, SystemPalette };
-export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette };
+export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette, jobsSystemPalette, };

package/types/theme/index.d.ts

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

package/types/types.d.ts

@@ -6,4 +6,5 @@ import type { TextInputProps } from './components/TextInput';
 import type { RichTextEditorRef, RichTextEditorProps } from './components/RichTextEditor';
 import type { Theme } from './theme';
 import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './components/Select/types';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, };
+import { SwipeableProps } from './components/Swipeable';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, };

package/types/utils/helpers.d.ts

@@ -1,2 +1,4 @@
 export declare const isIOS: boolean;
 export declare const isAndroid: boolean;
+export declare const pick: (keys: Array<string>, props: Record<string, any>) => {};
+export declare const omit: (keys: Array<string>, props: Record<string, any>) => Record<string, any>;

package/src/components/Box/__tests__/helpers.spec.ts

@@ -1,14 +0,0 @@
-import { pick } from '../helpers';
-
-describe('pick', () => {
-  it('works', () => {
-    const keys = ['a', 'b', 'f'];
-    const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
-
-    expect(pick(keys, props)).toEqual({
-      a: 1,
-      b: true,
-      f: 'whatever',
-    });
-  });
-});

package/src/components/Box/helpers.ts

@@ -1,10 +0,0 @@
-export const pick = (keys: Array<string>, props: Record<string, any>) =>
-  keys
-    .filter((key) => key in props)
-    .reduce(
-      (result, cur) => ({
-        ...result,
-        [cur]: props[cur],
-      }),
-      {}
-    );