@hero-design/rn 8.5.0-alpha.0 → 8.6.0

package/types/components/Icon/utils.d.ts

@@ -1,2 +1,2 @@
-declare const isHeroIcon: (x: any) => x is "number" | "swag" | "wallet" | "bold" | "menu" | "filter" | "image" | "switch" | "list" | "warning" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "candy-box-menu" | "caret-down-small" | "caret-down" | "caret-left-small" | "caret-left" | "caret-right-small" | "caret-right" | "caret-up-small" | "caret-up" | "check-radio" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock-3" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "directory" | "document" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feed" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "folder-user" | "folder" | "format-bold" | "format-heading1" | "format-heading2" | "format-italic" | "format-list-bulleted" | "format-list-numbered" | "format-underlined" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading-2" | "loading" | "location" | "lock" | "looks-one" | "looks-two" | "media-content" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply-arrow" | "reply" | "reschedule" | "rostering" | "save" | "schedule-send" | "schedule" | "search-person" | "send" | "speaker-active" | "speaker" | "star-award" | "star-badge" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "tag" | "target" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "activate-outlined" | "add-credit-card-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-downwards" | "arrow-left" | "arrow-leftwards" | "arrow-right" | "arrow-rightwards" | "arrow-up" | "arrow-upwards" | "at-sign" | "bell-active-outlined" | "bell-outlined" | "bell-slash-outlined" | "billing-outlined" | "body-outlined" | "bookmark-added-outlined" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "chat-bubble-outlined" | "chat-unread-outlined" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "cup-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-card-outlined" | "dollar-coin-shine-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "explore-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-dollar-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-verified-outlined" | "filter-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "hand-holding-user-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-active-outlined" | "home-outlined" | "id-card-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "live-help-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "near-me-outlined" | "node-outlined" | "number-points" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "qualification-outlined" | "re-assign" | "redeem" | "refresh" | "remove" | "reply-outlined" | "restart" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "search-secured-outlined" | "send-outlined" | "share-1" | "share-2" | "share-outlined" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-active-outlined" | "speaker-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "suitcase-clock-outlined" | "suitcase-outlined" | "survey-outlined" | "switch-outlined" | "sync" | "target-outlined" | "timesheet-outlined" | "today-outlined" | "transfer" | "trash-bin-outlined" | "umbrela-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-circle-outlined" | "user-gear-outlined" | "user-outlined" | "user-rectangle-outlined" | "video-1-outlined" | "video-2-outlined" | "wallet-outlined";
+declare const isHeroIcon: (x: any) => x is "number" | "swag" | "wallet" | "bold" | "menu" | "filter" | "image" | "switch" | "list" | "warning" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bookmark-added" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "candy-box-menu" | "caret-down-small" | "caret-down" | "caret-left-small" | "caret-left" | "caret-right-small" | "caret-right" | "caret-up-small" | "caret-up" | "check-radio" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock-3" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "directory" | "document" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feed" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "folder-user" | "folder" | "format-bold" | "format-heading1" | "format-heading2" | "format-italic" | "format-list-bulleted" | "format-list-numbered" | "format-underlined" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading-2" | "loading" | "location" | "lock" | "looks-one" | "looks-two" | "media-content" | "money-notes" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply-arrow" | "reply" | "reschedule" | "rostering" | "save" | "schedule-send" | "schedule" | "search-person" | "send" | "speaker-active" | "speaker" | "star-award" | "star-badge" | "star-circle" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "tag" | "target" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "activate-outlined" | "add-credit-card-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-downwards" | "arrow-left" | "arrow-leftwards" | "arrow-right" | "arrow-rightwards" | "arrow-up" | "arrow-upwards" | "article-outlined" | "at-sign" | "auto-graph-outlined" | "bell-active-outlined" | "bell-outlined" | "bell-slash-outlined" | "billing-outlined" | "body-outlined" | "bookmark-added-outlined" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "chat-bubble-outlined" | "chat-unread-outlined" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "cup-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-card-outlined" | "dollar-coin-shine-outlined" | "dollar-credit-card-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "explore-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-dollar-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-statutory-outlined" | "file-verified-outlined" | "filter-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "hand-holding-user-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-active-outlined" | "home-outlined" | "id-card-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "live-help-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "near-me-outlined" | "node-outlined" | "number-points" | "overview-outlined" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "qualification-outlined" | "re-assign" | "redeem" | "refresh" | "remove" | "reply-outlined" | "restart" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "search-secured-outlined" | "send-outlined" | "share-1" | "share-2" | "share-outlined" | "show-chart-outlined" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-active-outlined" | "speaker-outlined" | "star-circle-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "suitcase-clock-outlined" | "suitcase-outlined" | "survey-outlined" | "switch-outlined" | "sync" | "target-outlined" | "timesheet-outlined" | "today-outlined" | "transfer" | "trash-bin-outlined" | "umbrela-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-circle-outlined" | "user-gear-outlined" | "user-outlined" | "user-rectangle-outlined" | "video-1-outlined" | "video-2-outlined" | "wallet-outlined";
 export { isHeroIcon };

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

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

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

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

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { SectionList } from 'react-native';
 import type { SingleSelectProps } from '.';
-import type { OptionType, SectionData, SectionType } from '../types';
+import type { OptionType, SectionType } from '../types';
+import { BaseOptionListProps } from '../BaseOptionList';
 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, sectionListRef, }: OptionListProps<V, T>) => JSX.Element;
+} & BaseOptionListProps<V, T>;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, ...rest }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

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

@@ -1 +1 @@
-export declare const StyledOptionList: <V, T extends import("../types").OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, }: import("../BaseOptionList").BaseOptionListProps<V, T>) => JSX.Element;
+export declare const StyledOptionList: <V, T extends import("../types").OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, ...rest }: import("../BaseOptionList").BaseOptionListProps<V, T>) => JSX.Element;

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

@@ -1,6 +1,6 @@
-import { Animated, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 export declare type ActionIntent = 'primary' | 'success' | 'danger';
-declare const StyledRectButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+export declare const StyledRectButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -8,16 +8,3 @@ declare const StyledRectButton: import("@emotion/native").StyledComponent<import
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-declare const StyledWrapper: 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 StyledContent: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { StyledRectButton, StyledWrapper, StyledContent };

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

@@ -1,5 +1,5 @@
+import { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
 import { ActionIntent } from './StyledSwipeable';
 export interface SwipeableActionProps {
     /**
@@ -10,6 +10,10 @@ export interface SwipeableActionProps {
      * Callback when the action button is pressed.
      */
     onPress?: () => void;
+    /**
+     * Action button's content
+     */
+    children?: ReactNode;
     /**
      * Additional style.
      */
@@ -18,14 +22,6 @@ export interface SwipeableActionProps {
      * Testing id of the component.
      */
     testID?: string;
-    /**
-     * Name of the Icon.
-     */
-    icon: IconName;
-    /**
-     * Action label of the component.
-     */
-    label: string;
 }
-declare const SwipeableAction: ({ intent, onPress, style, testID, label, icon, }: SwipeableActionProps) => JSX.Element;
+declare const SwipeableAction: ({ intent, onPress, style, children, testID, }: SwipeableActionProps) => JSX.Element;
 export default SwipeableAction;

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

@@ -1,28 +1,45 @@
-import React from 'react';
-import { GestureResponderEvent, PanResponderGestureState, StyleProp, ViewStyle } from 'react-native';
-import SwipeableAction from './SwipeableAction';
-export declare type SwipeState = 'closed' | 'leftOpen' | 'rightOpen';
-export declare type SwipeableProps = {
-    leftContent?: React.ReactNode;
-    rightContent?: React.ReactNode;
-    leftActions?: [typeof SwipeableAction][];
-    rightActions?: [typeof SwipeableAction][];
-    onSwipeLeftStart?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
-    onSwipeLeftEnd?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+import { ComponentProps, ReactNode } from 'react';
+import { Swipeable as RnghSwipeable, RectButton } from 'react-native-gesture-handler';
+declare type State = 'closed' | 'leftOpen' | 'rightOpen';
+declare type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
+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;
-    onStateChange?: (state: SwipeState) => void;
-    onSwipeRightStart?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
-    onSwipeRightEnd?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
-    leftButtonWidth?: number;
-    rightButtonWidth?: number;
-    swipeState?: SwipeState;
-    style?: StyleProp<ViewStyle>;
-    children: React.ReactNode;
-};
-declare const _default: React.NamedExoticComponent<SwipeableProps> & {
-    readonly type: ({ children, leftActions, leftContent, rightActions, rightContent, style, leftActionsWidth, leftButtonWidth, onSwipeLeftStart, onSwipeLeftEnd, rightActionsWidth, rightButtonWidth, onSwipeRightStart, onSwipeRightEnd, swipeState, onStateChange, ...rest }: SwipeableProps) => JSX.Element;
-} & {
-    Action: ({ intent, onPress, style, testID, label, icon, }: import("./SwipeableAction").SwipeableActionProps) => JSX.Element;
+    /**
+     * Testing ID of the component
+     */
+    testID?: string;
+}
+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/SwipeableV2/StyledSwipeable.d.ts

@@ -0,0 +1,15 @@
+import { Animated, View } from 'react-native';
+export declare type ActionIntent = 'primary' | 'success' | 'danger';
+declare const StyledWrapper: 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 StyledContent: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledWrapper, StyledContent };

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { GestureResponderEvent, PanResponderGestureState, StyleProp, ViewStyle } from 'react-native';
+export declare type SwipeableV2Props = {
+    /**
+     * Content panel that is going to be revealed from the left side when user swipes right.
+     */
+    leftContent?: React.ReactNode;
+    /**
+     * Content panel that is going to be revealed from the right side when user swipes left.
+     */
+    rightContent?: React.ReactNode;
+    /**
+     * If the user swipe a distance greater than this value, the callback onSwipeRightEnd is called.
+     */
+    leftActionsWidth?: number;
+    /**
+     * If the user swipe a distance greater than this value, the callback onSwipeLeftEnd is called.
+     */
+    rightActionsWidth?: number;
+    /**
+     * Callback when start swiping to left.
+     */
+    onSwipeLeftStart?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+    /**
+     * Callback when end swiping to left.
+     */
+    onSwipeLeftEnd?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+    /**
+     * Callback when start swiping to right.
+     */
+    onSwipeRightStart?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+    /**
+     * Callback when end swiping to right.
+     */
+    onSwipeRightEnd?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+    /**
+     * additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * React node that is swipeable.
+     */
+    children: React.ReactNode;
+};
+declare const SwipeableV2: ({ children, leftContent, rightContent, style, leftActionsWidth, onSwipeLeftStart, onSwipeLeftEnd, rightActionsWidth, onSwipeRightStart, onSwipeRightEnd, ...rest }: SwipeableV2Props) => JSX.Element;
+export default SwipeableV2;

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

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
-export interface ToolbarProps {
+import { ViewProps } from 'react-native';
+export interface ToolbarProps extends Omit<ViewProps, 'style'> {
     /**
      * Toolbar's content.
      */
     children?: ReactNode;
 }
-declare const _default: (({ children }: ToolbarProps) => JSX.Element) & {
+declare const _default: (({ children, ...rest }: ToolbarProps) => JSX.Element) & {
     Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => JSX.Element;
 };
 export default _default;

package/types/index.d.ts

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

package/src/components/Swipeable/Buttons.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native';
-
-type Props = {
-  buttons?: React.ReactNode[];
-  isLeftButtons: boolean;
-  leftButtonContainerStyle?: StyleProp<ViewStyle>;
-  rightButtonContainerStyle?: StyleProp<ViewStyle>;
-  panAnimatedValue: Animated.ValueXY;
-  width: number;
-  canSwipeLeft?: boolean;
-  canSwipeRight?: boolean;
-  buttonWidth: number;
-};
-
-const Buttons = ({
-  buttons,
-  isLeftButtons,
-  leftButtonContainerStyle,
-  rightButtonContainerStyle,
-  panAnimatedValue,
-  width,
-  canSwipeLeft,
-  canSwipeRight,
-  buttonWidth,
-}: Props): JSX.Element => {
-  const count = buttons?.length ?? 0;
-  const leftEnd = canSwipeLeft ? -width : 0;
-  const rightEnd = canSwipeRight ? width : 0;
-  const inputRange = isLeftButtons ? [0, rightEnd] : [leftEnd, 0];
-
-  return (
-    <>
-      {buttons?.map((buttonContent, index) => {
-        const outputMultiplier = -index / count;
-        const outputRange = isLeftButtons
-          ? [0, rightEnd * outputMultiplier]
-          : [leftEnd * outputMultiplier, 0];
-
-        const transform = [
-          {
-            translateX: panAnimatedValue.x.interpolate({
-              inputRange,
-              outputRange,
-              extrapolate: 'clamp',
-            }),
-          },
-        ];
-        const buttonStyle = [
-          StyleSheet.absoluteFill,
-          { width: buttonWidth, transform },
-          isLeftButtons ? leftButtonContainerStyle : rightButtonContainerStyle,
-        ];
-
-        return (
-          <Animated.View key={index} style={buttonStyle}>
-            {buttonContent}
-          </Animated.View>
-        );
-      })}
-    </>
-  );
-};
-
-export default Buttons;

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-declare type Props = {
-    buttons?: React.ReactNode[];
-    isLeftButtons: boolean;
-    leftButtonContainerStyle?: StyleProp<ViewStyle>;
-    rightButtonContainerStyle?: StyleProp<ViewStyle>;
-    panAnimatedValue: Animated.ValueXY;
-    width: number;
-    canSwipeLeft?: boolean;
-    canSwipeRight?: boolean;
-    buttonWidth: number;
-};
-declare const Buttons: ({ buttons, isLeftButtons, leftButtonContainerStyle, rightButtonContainerStyle, panAnimatedValue, width, canSwipeLeft, canSwipeRight, buttonWidth, }: Props) => JSX.Element;
-export default Buttons;