@hero-design/rn 7.20.1 → 7.22.0

package/src/theme/components/progress.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
@@ -13,8 +12,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    circleWidth: scale(76),
-    barHeight: scale(4),
+    circleWidth: theme.sizes['6xlarge'],
+    barHeight: theme.sizes.xsmall,
   };
 
   const radii = {

package/src/theme/components/radio.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
@@ -11,9 +10,14 @@ const getRadioTheme = (theme: GlobalTheme) => {
     groupTopMargin: theme.space.xsmall,
   };
 
+  const boundingBoxSize = theme.sizes.large;
+  const innerPadding = theme.space.xsmall;
+  const circle = boundingBoxSize - innerPadding;
+  const innerCircle = circle / 2;
+
   const sizes = {
-    circle: scale(20),
-    innerCircle: scale(10),
+    circle,
+    innerCircle,
   };
 
   const borderWidths = {

package/src/theme/components/richTextEditor.ts

@@ -12,10 +12,10 @@ const getRichTextEditorTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    editorMinHeight: 21,
-    toolbarButtonSize: theme.space.xxxlarge,
-    toolbarSeparatorWidth: 1,
-    toolbarSeparatorHeight: theme.space.medium,
+    editorMinHeight: theme.sizes.large,
+    toolbarButtonSize: theme.sizes.xxxlarge,
+    toolbarSeparatorWidth: theme.sizes.xxsmall,
+    toolbarSeparatorHeight: theme.sizes.medium,
   };
 
   const fontSizes = {

package/src/theme/components/slider.ts

@@ -0,0 +1,13 @@
+import type { GlobalTheme } from '../global';
+
+const getSliderTheme = (theme: GlobalTheme) => {
+  const colors = {
+    minimumTrackTint: theme.colors.__alpha__primary1,
+    thumbTint: theme.colors.__alpha__globalSecondary4,
+    maximumTrackTint: theme.colors.__alpha__secondary4,
+  };
+
+  return { colors };
+};
+
+export default getSliderTheme;

package/src/theme/components/switch.ts

@@ -9,38 +9,49 @@ const getSwitchTheme = (theme: GlobalTheme) => {
       'disabled-unchecked': theme.colors.archived,
     },
     thumb: theme.colors.platformBackground,
+    selector: {
+      background: theme.colors.__alpha__globalNeutral3,
+      textBackground: theme.colors.__alpha__primary1,
+    },
   };
 
-  const thumbSizes = {
-    small: theme.space.medium,
-    medium: theme.space.medium * 1.3,
-  };
-
-  const widths = {
-    small: theme.space.xxxlarge,
-    medium: theme.space.xxxxlarge,
-  };
-
-  const heights = {
-    small: theme.space.large,
-    medium: theme.space.large * 1.2,
+  const sizes = {
+    thumbs: {
+      small: theme.sizes.medium,
+      medium: theme.sizes.large,
+    },
+    widths: {
+      small: theme.sizes.xxxlarge,
+      medium: theme.sizes.xxxxxlarge,
+    },
+    heights: {
+      small: theme.sizes.large,
+      medium: theme.sizes.xlarge,
+    },
+    selector: {
+      height: theme.sizes.xxxxlarge,
+    },
   };
 
   const spaces = {
     small: theme.space.xsmall,
     medium: theme.space.xsmall,
-    inactive: 0,
+    selector: {
+      iconPadding: theme.space.medium,
+      wrapperPadding: theme.space.xsmall,
+    },
   };
 
   const radii = {
     rounded: theme.radii.rounded,
+    selector: {
+      default: theme.radii.rounded,
+    },
   };
 
   return {
     colors,
-    thumbSizes,
-    widths,
-    heights,
+    sizes,
     spaces,
     radii,
   };

package/src/theme/components/tabs.ts

@@ -27,7 +27,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    indicator: theme.space.xxsmall,
+    indicator: theme.sizes.xxsmall,
   };
 
   return { borderWidths, colors, space, radii, sizes };

package/src/theme/components/timePicker.ts

@@ -1,8 +1,8 @@
-import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
 
-const getTimePickerTheme = () => {
+const getTimePickerTheme = (theme: GlobalTheme) => {
   const sizes = {
-    height: scale(176),
+    height: theme.sizes['19xlarge'],
   };
 
   return { sizes };

package/src/theme/components/toast.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getToastTheme = (theme: GlobalTheme) => {
@@ -14,7 +13,7 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: scale(48),
+    height: theme.sizes.xxxlarge,
   };
 
   const space = {

package/src/theme/getTheme.ts

@@ -17,6 +17,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';
@@ -24,6 +25,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';
@@ -33,6 +35,7 @@ import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
+
 import type { GlobalTheme, Scale, SystemPalette } from './global';
 
 type Theme = GlobalTheme & {
@@ -54,6 +57,7 @@ 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>;
@@ -61,6 +65,7 @@ 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>;
@@ -92,12 +97,13 @@ const getTheme = (
       card: getCardTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
-      datePicker: getDatePickerTheme(),
+      datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       empty: getEmptyTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
@@ -105,12 +111,13 @@ const getTheme = (
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
+      slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
       switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
-      timePicker: getTimePickerTheme(),
+      timePicker: getTimePickerTheme(globalTheme),
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),

package/src/theme/global/colors/swag.ts

@@ -52,6 +52,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__globalPrimary: palette.maasstrichtBlue,
 
   __alpha__globalSecondary1: palette.maasstrichtBlueLight30,
+  __alpha__globalSecondary4: palette.maasstrichtBlueLight90,
 
   __alpha__globalNeutral3: palette.greyLight90,
 
@@ -65,6 +66,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__globalLabel8: palette.honeydew,
   __alpha__globalLabel9: palette.aliceBlue,
 
+  __alpha__primary1: swagPalette.scarletGum,
   __alpha__primary2: swagPalette.mauve,
 
   __alpha__secondary1: swagPalette.scarletGumLight30,

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

@@ -46,6 +46,7 @@ export type SystemPalette = {
   __alpha__globalPrimary: string;
 
   __alpha__globalSecondary1: string;
+  __alpha__globalSecondary4: string;
 
   __alpha__globalNeutral3: string;
 
@@ -59,6 +60,7 @@ export type SystemPalette = {
   __alpha__globalLabel8: string;
   __alpha__globalLabel9: string;
 
+  __alpha__primary1: string;
   __alpha__primary2: string;
 
   __alpha__secondary1: string;

package/src/theme/global/index.ts

@@ -4,6 +4,7 @@ import workSystemPalette from './colors/work';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
+import { getSizes } from './sizes';
 import { getBorderWidths, getRadii } from './borders';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
@@ -14,6 +15,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const lineHeights = getLineHeights(fontSizes);
   const borderWidths = getBorderWidths(scale.borderWidth);
   const space = getSpace(scale.space);
+  const sizes = getSizes(scale.size);
   const radii = getRadii(scale.radius);
 
   return {
@@ -25,6 +27,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
     lineHeights,
     borderWidths,
     space,
+    sizes,
     radii,
   };
 };

package/src/theme/global/scale.ts

@@ -2,6 +2,8 @@ const BASE_BORDER_WIDTH = 1;
 
 const BASE_SPACE = 8;
 
+const BASE_SIZE = 8;
+
 const BASE_FONT = 'BeVietnamPro';
 
 const BASE_FONT_SIZE = 10;
@@ -11,6 +13,7 @@ const BASE_RADIUS = 4;
 const scale = {
   borderWidth: BASE_BORDER_WIDTH,
   space: BASE_SPACE,
+  size: BASE_SIZE,
   font: BASE_FONT,
   fontSize: BASE_FONT_SIZE,
   radius: BASE_RADIUS,

package/src/theme/global/sizes.ts

@@ -0,0 +1,29 @@
+import { getSpace } from './space';
+import type { Space } from './space';
+import { scale } from '../../utils/scale';
+
+interface Sizes extends Space {
+  xxxxxlarge: number;
+  '6xlarge': number;
+  '7xlarge': number;
+  '9xlarge': number;
+  '14xlarge': number;
+  '15xlarge': number;
+  '18xlarge': number;
+  '19xlarge': number;
+}
+
+const getSizes = (baseSize: number): Sizes => ({
+  ...getSpace(baseSize),
+  xxxxxlarge: scale(baseSize * 8), // 64
+  '6xlarge': scale(baseSize * 9), // 72
+  '7xlarge': scale(baseSize * 10), // 80
+  '9xlarge': scale(baseSize * 12), // 96
+  '14xlarge': scale(baseSize * 17), // 136
+  '15xlarge': scale(baseSize * 18), // 144
+  '18xlarge': scale(baseSize * 21), // 168
+  '19xlarge': scale(baseSize * 22), // 176
+});
+
+export { getSizes };
+export type { Sizes };

package/testUtils/setup.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prefer-stateless-function */
+/* eslint-disable max-classes-per-file */
 jest.mock('react-native-vector-icons', () => ({
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
@@ -16,7 +20,7 @@ jest.mock('react-native', () => {
 });
 
 jest.mock('../src/utils/scale', () => ({
-  scale: jest.fn(size => size),
+  scale: jest.fn((size) => size),
 }));
 
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
@@ -52,6 +56,16 @@ jest.mock('@react-native-community/datetimepicker', () => {
   };
 });
 
+jest.mock('@react-native-community/slider', () => {
+  const React = jest.requireActual('react');
+
+  return class Slider extends React.Component {
+    render() {
+      return React.createElement('Slider', this.props, this.props.children);
+    }
+  };
+});
+
 jest.mock('react-native-webview', () => {
   const React = jest.requireActual('react');
 

package/tsconfig.json

@@ -8,4 +8,4 @@
     "types": ["jest"]
   },
   "include": ["src"]
-}
+}

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

@@ -17,6 +17,10 @@ interface BottomSheetProps {
      * Bottom sheet's content.
      */
     children?: ReactNode;
+    /**
+     * Callback is called when the Bottom Sheet finishes running animation.
+     */
+    onAnimationEnd?: () => void;
     /**
      * Callback is called when the Bottom Sheet is opened.
      */
@@ -51,5 +55,5 @@ interface BottomSheetProps {
      */
     testID?: string;
 }
-declare const BottomSheet: ({ open, header, footer, children, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
+declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
 export default BottomSheet;

package/types/components/Empty/StyledEmpty.d.ts

@@ -6,12 +6,6 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-declare const StyledIllustration: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
-}, {}, {
-    ref?: import("react").Ref<View>;
-}>;
 declare const StyledTitle: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -28,4 +22,4 @@ declare const StyledDescription: import("@emotion/native").StyledComponent<impor
 }, {}, {
     ref?: import("react").Ref<Text>;
 }>;
-export { StyledWrapper, StyledIllustration, StyledTitle, StyledDescription };
+export { StyledWrapper, StyledTitle, StyledDescription };

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

@@ -1,5 +1,11 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle, ImageProps as RNImageProps } from 'react-native';
+import { ImageProps } from '../Image';
 interface EmptyProps {
+    /**
+     * Image to be displayed.
+     */
+    image?: ReactElement<ImageProps | RNImageProps>;
     /**
      * Empty's title.
      */
@@ -22,5 +28,5 @@ interface EmptyProps {
      */
     testID?: string;
 }
-declare const Empty: ({ title, description, style, testID, variant, }: EmptyProps) => JSX.Element;
+declare const Empty: ({ image, title, description, style, testID, variant, }: EmptyProps) => JSX.Element;
 export default Empty;

package/types/components/Image/__tests__/index.spec.d.ts

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

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

@@ -0,0 +1,17 @@
+import type { ImageProps as RNImageProps } from 'react-native';
+export interface ImageProps extends RNImageProps {
+    /**
+     * Whether the image is rounded.
+     */
+    rounded?: boolean;
+    /**
+     * Image sizes, following the same sizes as the `sizes` global theme.
+     */
+    size?: '6xlarge' | '15xlarge';
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Image: ({ rounded, size, testID, style, ...imageNativeProps }: ImageProps) => JSX.Element;
+export default Image;

package/types/components/Select/MultiSelect/OptionList.d.ts

@@ -1,8 +1,11 @@
+import React from 'react';
+import type { SectionList } from 'react-native';
 import type { MultiSelectProps } from '.';
-import type { OptionType, SectionData } from '../types';
+import type { OptionType, SectionData, SectionType } from '../types';
 declare type OptionListProps<V, T extends OptionType<V>> = Pick<MultiSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V[]) => void;
     sections: SectionData<V, T>[];
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

package/types/components/Select/MultiSelect/index.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
 import type { OptionType, SelectProps } from '../types';
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> extends SelectProps<V, T> {
     /**
@@ -12,6 +14,10 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> ex
      * Footer label.
      */
     footerLabel: string;
+    /**
+     * Customise the selected value rendering.
+     */
+    renderSelectedValue?: (selectedValue: V[], inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
+declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
 export default MultiSelect;

package/types/components/Select/SingleSelect/OptionList.d.ts

@@ -1,8 +1,11 @@
+import React from 'react';
+import type { SectionList } from 'react-native';
 import type { SingleSelectProps } from '.';
-import type { OptionType, SectionData } from '../types';
+import type { OptionType, SectionData, SectionType } from '../types';
 declare type OptionListProps<V, T extends OptionType<V>> = Pick<SingleSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V | null) => void;
     sections: SectionData<V, T>[];
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

package/types/components/Select/SingleSelect/index.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
 import type { OptionType, SelectProps } from '../types';
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> extends SelectProps<V, T> {
     /**
@@ -5,9 +7,13 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> e
      */
     value: V | null;
     /**
-     * on select event handler
+     * On select event handler
      */
     onConfirm: (value: V | null) => void;
+    /**
+     * Customise the selected value rendering.
+     */
+    renderSelectedValue?: (selectedValue: V | null, inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
+declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
 export default SingleSelect;

package/types/components/Select/StyledOptionList.d.ts

@@ -1,11 +1,12 @@
+import React from 'react';
+import { SectionList } from 'react-native';
 import type { ReactElement } from 'react';
 import type { SectionListRenderItemInfo } from 'react-native';
-import type { ScrollParams } from './helpers';
 import type { SectionData, OptionType, SelectProps, SectionType } from './types';
 export declare type StyledOptionListProps<V, T extends OptionType<V>> = Pick<SelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'> & {
-    scrollParams: ScrollParams;
     sections: SectionData<V, T>[];
     renderItem: (info: SectionListRenderItemInfo<T, SectionType>) => ReactElement;
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const StyledOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, scrollParams, }: StyledOptionListProps<V, T>) => JSX.Element;
+declare const StyledOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, }: StyledOptionListProps<V, T>) => JSX.Element;
 export default StyledOptionList;

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

@@ -2,7 +2,7 @@ import MultiSelect from './MultiSelect';
 import type { MultiSelectProps } from './MultiSelect';
 import type { SingleSelectProps } from './SingleSelect';
 export type { MultiSelectProps, SingleSelectProps };
-declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
+declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

package/types/components/Slider/__tests__/index.spec.d.ts

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

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

@@ -0,0 +1,52 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SliderProps {
+    /**
+     * Minimum value of the slider.
+     * Defaults to 0.
+     */
+    minimumValue?: number;
+    /**
+     * Maximum value of the slider.
+     * Defaults to 1.
+     */
+    maximumValue?: number;
+    /**
+     * Step value of the slider.
+     * The value should be between 0 and (maximumValue - minimumValue).
+     * Defaults to 0.
+     */
+    step?: number;
+    /**
+     * Value of the slider.
+     * Defaults to 0.
+     */
+    value?: number;
+    /**
+     * Callback continuously called while the user is dragging the slider.
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Callback that is called when the user picks up the slider.
+     * The initial value is passed as an argument to the callback handler.
+     */
+    onSlidingStart?: (value: number) => void;
+    /**
+     * Callback that is called when the user releases the slider, regardless if the value has changed.
+     * The current value is passed as an argument to the callback handler.
+     */
+    onSlidingComplete?: (value: number) => void;
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingStart, onSlidingComplete, disabled, style, testID, }: SliderProps) => JSX.Element;
+export default Slider;

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

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import type { BadgeConfigType, OptionType } from '.';
+export declare const OptionContent: ({ content, badge, }: {
+    content: ReactElement;
+    badge?: BadgeConfigType;
+}) => JSX.Element;
+declare const Option: <T>({ text, icon, badge, selected, }: Pick<OptionType<T>, "text" | "icon" | "badge"> & {
+    selected: boolean;
+}) => ReactElement;
+export default Option;

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

@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
+export declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
+export declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;