@hero-design/rn 7.20.1 → 7.22.0

package/types/components/Switch/SelectorSwitch/__tests__/Option.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../../Icon';
+declare type StatusBadgeType = {
+    type: 'status';
+};
+export declare type BadgeConfigType = StatusBadgeType;
+export declare type OptionType<T> = {
+    value: T;
+    text: string;
+    icon: IconName;
+    badge?: BadgeConfigType;
+};
+export interface SelectorSwitchProps<T> {
+    /**
+     * Array of exactly TWO options to switch between.
+     */
+    options: [OptionType<T>, OptionType<T>];
+    /**
+     * Current selected value.
+     */
+    value: T;
+    /**
+     *  Callback called when an option is pressed.
+     */
+    onPress?: (value: T) => void;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const SelectorSwitch: <T>({ options, value, onPress, style, testID, }: SelectorSwitchProps<T>) => ReactElement;
+export default SelectorSwitch;

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

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface SwitchProps {
     /**
@@ -27,5 +27,7 @@ export interface SwitchProps {
      */
     testID?: string;
 }
-declare const Switch: ({ size, disabled, checked, onPress, style, testID, }: SwitchProps) => ReactElement;
-export default Switch;
+declare const _default: (({ size, disabled, checked, onPress, style, testID, }: SwitchProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Selector: <T>({ options, value, onPress, style, testID, }: import("./SelectorSwitch").SelectorSwitchProps<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+export default _default;

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

@@ -1,3 +1,3 @@
 import type { TabsProps } from '.';
-declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element;
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element;
 export default ScrollableTab;

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

@@ -50,7 +50,7 @@ export interface TabsProps extends ViewProps {
      */
     testID?: string;
 }
-declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element) & {
-    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element;
+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;
 };
 export default _default;

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { Variant } from './StyledTextInput';
-import type { IconName } from '../Icon';
+import React from "react";
+import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from "react-native";
+import type { Variant } from "./StyledTextInput";
+import type { IconName } from "../Icon";
 export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.
@@ -51,6 +51,7 @@ export interface TextInputProps extends NativeTextInputProps {
     loading?: boolean;
     maxLength?: number;
     helpText?: string;
+    renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
 }
 export declare const getVariant: ({ disabled, error, editable, loading, isFocused, isEmptyValue, }: {
     disabled?: boolean;
@@ -60,5 +61,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isFocuse
     isFocused?: boolean;
     isEmptyValue?: boolean;
 }) => Variant;
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, ...nativeProps }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, renderInputValue, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

package/types/index.d.ts

@@ -19,9 +19,11 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Image from './components/Image';
 import List from './components/List';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
+import Slider from './components/Slider';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
@@ -35,5 +37,5 @@ import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 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, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, 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 * from './types';

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

@@ -1,4 +1,5 @@
-declare const getDatePickerTheme: () => {
+import { GlobalTheme } from '../global';
+declare const getDatePickerTheme: (theme: GlobalTheme) => {
     sizes: {
         height: number;
     };

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

@@ -11,19 +11,16 @@ declare const getEmptyTheme: (theme: GlobalTheme) => {
         illustrationBackground: string;
     };
     sizes: {
-        illustration: number;
+        image: number;
     };
     space: {
         titleMargin: number;
-        illustrationMargin: number;
+        imageMargin: number;
         wrapperPadding: number;
     };
     fonts: {
         title: string;
         description: string;
     };
-    radii: {
-        illustration: number;
-    };
 };
 export default getEmptyTheme;

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

@@ -0,0 +1,8 @@
+import type { GlobalTheme } from '../global';
+declare const getImageTheme: (theme: GlobalTheme) => {
+    sizes: {
+        '6xlarge': number;
+        '15xlarge': number;
+    };
+};
+export default getImageTheme;

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

@@ -0,0 +1,9 @@
+import type { GlobalTheme } from '../global';
+declare const getSliderTheme: (theme: GlobalTheme) => {
+    colors: {
+        minimumTrackTint: string;
+        thumbTint: string;
+        maximumTrackTint: string;
+    };
+};
+export default getSliderTheme;

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

@@ -8,26 +8,41 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
             'disabled-unchecked': string;
         };
         thumb: string;
+        selector: {
+            background: string;
+            textBackground: string;
+        };
     };
-    thumbSizes: {
-        small: number;
-        medium: number;
-    };
-    widths: {
-        small: number;
-        medium: number;
-    };
-    heights: {
-        small: number;
-        medium: number;
+    sizes: {
+        thumbs: {
+            small: number;
+            medium: number;
+        };
+        widths: {
+            small: number;
+            medium: number;
+        };
+        heights: {
+            small: number;
+            medium: number;
+        };
+        selector: {
+            height: number;
+        };
     };
     spaces: {
         small: number;
         medium: number;
-        inactive: number;
+        selector: {
+            iconPadding: number;
+            wrapperPadding: number;
+        };
     };
     radii: {
         rounded: number;
+        selector: {
+            default: number;
+        };
     };
 };
 export default getSwitchTheme;

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

@@ -1,4 +1,5 @@
-declare const getTimePickerTheme: () => {
+import { GlobalTheme } from '../global';
+declare const getTimePickerTheme: (theme: GlobalTheme) => {
     sizes: {
         height: number;
     };

package/types/theme/getTheme.d.ts

@@ -15,6 +15,7 @@ import getDrawerTheme from './components/drawer';
 import getEmptyTheme from './components/empty';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
+import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
@@ -22,6 +23,7 @@ import getRadioTheme from './components/radio';
 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 getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -51,6 +53,7 @@ declare type Theme = GlobalTheme & {
         empty: ReturnType<typeof getEmptyTheme>;
         fab: ReturnType<typeof getFABTheme>;
         icon: ReturnType<typeof getIconTheme>;
+        image: ReturnType<typeof getImageTheme>;
         list: ReturnType<typeof getListTheme>;
         pinInput: ReturnType<typeof getPinInputTheme>;
         progress: ReturnType<typeof getProgressTheme>;
@@ -58,6 +61,7 @@ declare type Theme = GlobalTheme & {
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
         select: ReturnType<typeof getSelectTheme>;
+        slider: ReturnType<typeof getSliderTheme>;
         spinner: ReturnType<typeof getSpinnerTheme>;
         switch: ReturnType<typeof getSwitchTheme>;
         tabs: ReturnType<typeof getTabsTheme>;

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

@@ -44,6 +44,7 @@ export declare type SystemPalette = {
     shadow: string;
     __alpha__globalPrimary: string;
     __alpha__globalSecondary1: string;
+    __alpha__globalSecondary4: string;
     __alpha__globalNeutral3: string;
     __alpha__globalLabel1: string;
     __alpha__globalLabel2: string;
@@ -54,6 +55,7 @@ export declare type SystemPalette = {
     __alpha__globalLabel7: string;
     __alpha__globalLabel8: string;
     __alpha__globalLabel9: string;
+    __alpha__primary1: string;
     __alpha__primary2: string;
     __alpha__secondary1: string;
     __alpha__secondary2: string;

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

@@ -50,6 +50,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         shadow: string;
         __alpha__globalPrimary: string;
         __alpha__globalSecondary1: string;
+        __alpha__globalSecondary4: string;
         __alpha__globalNeutral3: string;
         __alpha__globalLabel1: string;
         __alpha__globalLabel2: string;
@@ -60,6 +61,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         __alpha__globalLabel7: string;
         __alpha__globalLabel8: string;
         __alpha__globalLabel9: string;
+        __alpha__primary1: string;
         __alpha__primary2: string;
         __alpha__secondary1: string;
         __alpha__secondary2: string;
@@ -71,6 +73,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     lineHeights: import("./typography").FontSizes;
     borderWidths: import("./borders").BorderWidths;
     space: import("./space").Space;
+    sizes: import("./sizes").Sizes;
     radii: import("./borders").Radii;
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;

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

@@ -1,6 +1,7 @@
 declare const scale: {
     borderWidth: number;
     space: number;
+    size: number;
     font: string;
     fontSize: number;
     radius: number;

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

@@ -0,0 +1,14 @@
+import type { Space } from './space';
+interface Sizes extends Space {
+    xxxxxlarge: number;
+    '6xlarge': number;
+    '7xlarge': number;
+    '9xlarge': number;
+    '14xlarge': number;
+    '15xlarge': number;
+    '18xlarge': number;
+    '19xlarge': number;
+}
+declare const getSizes: (baseSize: number) => Sizes;
+export { getSizes };
+export type { Sizes };

package/.eslintrc.json

@@ -1,61 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "jest": true
-  },
-  "extends": [
-    "plugin:prettier/recommended",
-    "plugin:react/recommended",
-    "airbnb",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint"],
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      }
-    }
-  },
-  "rules": {
-    "react/jsx-props-no-spreading": 0,
-    "react/require-default-props": 0,
-    "react/function-component-definition": 0,
-    "react/jsx-filename-extension": [
-      1,
-      { "extensions": [".js", ".jsx", ".tsx"] }
-    ],
-    "import/prefer-default-export": 0,
-    "import/extensions": 0,
-    "no-use-before-define": 0,
-    "@typescript-eslint/no-use-before-define": 2,
-    "@typescript-eslint/no-unused-vars": [2, { "argsIgnorePattern": "^_" }],
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": "error"
-  },
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {
-        "no-undef": 0,
-        "consistent-return": 0,
-        "default-case": 0,
-        "no-underscore-dangle": [
-          2,
-          {
-            "allow": ["__hd__"]
-          }
-        ]
-      }
-    }
-  ]
-}

package/.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "printWidth": 80,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "arrowParens": "avoid"
-}
-