@ledgerhq/native-ui 0.5.0 → 0.6.3

package/components/Layout/List/TipList/index.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo } from "react";
+import List from "../List";
+import Check from "@ledgerhq/icons-ui/native/CheckAloneMedium";
+import Close from "@ledgerhq/icons-ui/native/CloseMedium";
+export default function TipList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c100" })) : (React.createElement(Close, { size: 20, color: "error.c100" })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: tipItems }, props));
+}

package/components/Layout/List/index.d.ts

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/List/index.js

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/ScrollContainer/index.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { BaseStyledProps } from "../../styled";
 import type { NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from "react-native";
-declare type ScrollContainerProps = ScrollViewProps & SpaceProps & {
+declare type ScrollContainerProps = BaseStyledProps & ScrollViewProps & SpaceProps & {
     children: React.ReactNode;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     horizontal?: boolean;

package/components/Layout/ScrollContainer/index.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { space } from "styled-system";
-import styled from "styled-components/native";
+import baseStyled from "../../styled";
 import Animated from "react-native-reanimated";
-const ScrollView = styled(Animated.ScrollView) `
+const ScrollView = baseStyled(Animated.ScrollView) `
   ${space};
 `;
 const ScrollContainer = (_a) => {

package/components/Layout/ScrollContainerHeader/Header.d.ts

@@ -7,5 +7,5 @@ export declare type HeaderProps = {
     BottomSection?: JSX.Element;
     currentPositionY: Animated.SharedValue<number>;
 };
-declare const Header: ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps) => JSX.Element;
+declare const Header: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps) => JSX.Element;
 export default Header;

package/components/Layout/ScrollContainerHeader/Header.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { View } from "react-native";
 import styled from "styled-components/native";
-import Animated, { useAnimatedStyle, interpolate, Extrapolate, } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, interpolate, Extrapolate } from "react-native-reanimated";
 import Flex from "../Flex";
 const Container = styled(Flex).attrs({
     paddingHorizontal: 16,
@@ -10,7 +9,7 @@ const Container = styled(Flex).attrs({
   width: 100%;
 `;
 const SCROLL_BREAKPOINT = 80;
-const Header = ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }) => {
+const Header = ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, currentPositionY, }) => {
     const [topSectionHeight, setTopSectionHeight] = useState(0);
     const [topSectionWidth, setTopSectionWidth] = useState(0);
     const [topMiddleWidth, setTopMiddleWidth] = useState(0);
@@ -29,34 +28,42 @@ const Header = ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection,
     const onLayoutMiddle = useCallback(({ nativeEvent: { layout } }) => {
         setMiddleWidth(layout.width);
     }, []);
+    const TopMiddleStyle = useAnimatedStyle(() => {
+        const scaleRatio = middleWidth ? Math.min(topMiddleWidth / middleWidth, 0.9) : 0.7;
+        /** scale the animated content to fit in the available space on the top header section */
+        const scale = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [1, scaleRatio], Extrapolate.CLAMP);
+        /** offset horizontaly given the scale transformation and potential top left header section */
+        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topMiddleWidth - topMiddleWidth * scaleRatio) / 2], Extrapolate.CLAMP);
+        const opacity = interpolate(currentPositionY.value, [SCROLL_BREAKPOINT - 1, SCROLL_BREAKPOINT + 40], [0, 1], Extrapolate.CLAMP);
+        return {
+            transform: [{ translateX }, { scale }],
+            flex: 1,
+            opacity,
+            justifyContent: "center", // needed to ensure vertical centering of animated content
+        };
+    }, [topLeftWidth, topSectionHeight, middleWidth, topMiddleWidth, topSectionWidth]);
     const MiddleStyle = useAnimatedStyle(() => {
-        const scaleRatio = middleWidth
-            ? Math.min(topMiddleWidth / middleWidth, 0.9)
-            : 0.7;
+        const scaleRatio = middleWidth ? Math.min(topMiddleWidth / middleWidth, 0.9) : 0.7;
         /** scale the animated content to fit in the available space on the top header section */
         const scale = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [1, scaleRatio], Extrapolate.CLAMP);
         /** translate verticaly to the middle of the top header section */
         const translateY = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -topSectionHeight + topSectionHeight / 2], Extrapolate.CLAMP);
         /** offset horizontaly given the scale transformation and potential top left header section */
-        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topSectionWidth - topMiddleWidth) / 2 + topLeftWidth], Extrapolate.CLAMP);
+        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topSectionWidth - topSectionWidth * scaleRatio) / 2 + topLeftWidth], Extrapolate.CLAMP);
         /** allow for content to move upward as animation is taking place */
         const maxHeight = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [70, 0], Extrapolate.CLAMP);
+        const opacity = interpolate(currentPositionY.value, [SCROLL_BREAKPOINT - 1, SCROLL_BREAKPOINT + 40], [1, 0], Extrapolate.CLAMP);
         return {
             maxHeight,
             transform: [{ translateY }, { translateX }, { scale }],
+            opacity,
             justifyContent: "center", // needed to ensure vertical centering of animated content
         };
-    }, [
-        topLeftWidth,
-        topSectionHeight,
-        middleWidth,
-        topMiddleWidth,
-        topSectionWidth,
-    ]);
+    }, [topLeftWidth, topSectionHeight, middleWidth, topMiddleWidth, topSectionWidth]);
     return (React.createElement(Container, null,
         React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", onLayout: onLayout },
-            React.createElement(View, { onLayout: onLayoutTopLeft }, TopLeftSection),
-            React.createElement(Flex, { flex: 1, onLayout: onLayoutTopMiddle }),
+            React.createElement(Flex, { onLayout: onLayoutTopLeft }, TopLeftSection),
+            React.createElement(Animated.View, { style: [TopMiddleStyle], onLayout: topMiddleWidth ? () => { } : onLayoutTopMiddle }, TopMiddleSection || MiddleSection),
             TopRightSection),
         React.createElement(Animated.View, { onLayout: middleWidth ? () => { } : onLayoutMiddle, style: MiddleStyle }, MiddleSection),
         BottomSection ? React.createElement(Flex, null, BottomSection) : null));

package/components/Layout/ScrollContainerHeader/index.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import type { ScrollViewProps } from "react-native";
+import { FlatListProps } from "react-native";
 import type { HeaderProps } from "./Header";
-declare type ScrollContainerHeaderProps = Omit<HeaderProps, "currentPositionY"> & Omit<ScrollViewProps, "onScroll"> & {
+import { BaseStyledProps } from "../../styled";
+declare type ScrollContainerHeaderProps = BaseStyledProps & Omit<HeaderProps, "currentPositionY"> & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem" | "stickyHeaderIndices"> & {
     children?: React.ReactNode;
     onScroll?: (y: number) => void;
 };

package/components/Layout/ScrollContainerHeader/index.js

@@ -10,8 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import Animated, { useAnimatedScrollHandler, useSharedValue, } from "react-native-reanimated";
+import { View } from "react-native";
+import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
 import Header from "./Header";
+import baseStyled from "../../styled";
+const StyledFlatList = baseStyled.FlatList ``;
+const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
 const ScrollContainerHeader = (_a) => {
     var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll"]);
     const currentPositionY = useSharedValue(0);
@@ -20,8 +24,9 @@ const ScrollContainerHeader = (_a) => {
         if (onScroll)
             onScroll(event.contentOffset.y);
     });
-    return (React.createElement(Animated.ScrollView, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0] }),
-        React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
-        children));
+    return (React.createElement(AnimatedFlatList, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0], data: [
+            React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
+            children,
+        ], renderItem: ({ item, index }) => (React.createElement(View, { key: index }, item)) })));
 };
 export default ScrollContainerHeader;

package/components/Layout/index.d.ts

@@ -5,3 +5,4 @@ export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";
+export * from "./List";

package/components/Layout/index.js

@@ -5,3 +5,4 @@ export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";
+export * from "./List";

package/components/Loader/InfiniteLoader/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+import { SizeProps } from "styled-system";
+declare const Loader: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+export declare type Props = React.ComponentProps<typeof Loader> & {
+    color?: string;
+};
+export default function InfiniteLoader({ size, color, ...extraProps }: Props): JSX.Element;
+export {};

package/components/Loader/InfiniteLoader/index.js

@@ -0,0 +1,58 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect } from "react";
+import Svg, { LinearGradient, Stop, Mask, Path, Rect } from "react-native-svg";
+import styled from "styled-components/native";
+import { system, size } from "styled-system";
+import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming, cancelAnimation, Easing, } from "react-native-reanimated";
+const strokeSystem = system({
+    stroke: {
+        property: "stroke",
+        scale: "colors",
+    },
+});
+const Loader = styled(Svg).attrs((props) => (Object.assign({}, strokeSystem(props)))) `
+  ${size}
+`;
+export default function InfiniteLoader(_a) {
+    var { size = 38, color = "primary.c50" } = _a, extraProps = __rest(_a, ["size", "color"]);
+    const rotation = useSharedValue(0);
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            transform: [
+                {
+                    rotateZ: `${rotation.value}deg`,
+                },
+            ],
+        };
+    }, [rotation.value]);
+    useEffect(() => {
+        rotation.value = withRepeat(withTiming(360, {
+            duration: 1000,
+            easing: Easing.linear,
+        }), -1);
+        return () => cancelAnimation(rotation);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement(Animated.View, { style: [{ display: "flex", justifyContent: "center", alignItems: "center" }, animatedStyles] },
+        React.createElement(Loader, Object.assign({ size: size, stroke: color, viewBox: "0 0 38 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, extraProps),
+            React.createElement(LinearGradient, { id: "gradient-start", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+                React.createElement(Stop, { offset: 0, stopColor: "white", stopOpacity: 0.5 }),
+                React.createElement(Stop, { offset: 1, stopColor: "white", stopOpacity: 1 })),
+            React.createElement(LinearGradient, { id: "gradient-end", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+                React.createElement(Stop, { offset: 0, stopColor: "white", stopOpacity: 0.5 }),
+                React.createElement(Stop, { offset: 1, stopColor: "white", stopOpacity: 0 })),
+            React.createElement(Mask, { id: "gradient-mask" },
+                React.createElement(Rect, { x: 0, y: -4, width: 44, height: 22, strokeWidth: 0, fill: "url(#gradient-start)", transform: "rotate(10)" }),
+                React.createElement(Rect, { x: 0, y: 18, width: 44, height: 21, strokeWidth: 0, fill: "url(#gradient-end)", transform: "rotate(10)" })),
+            React.createElement(Path, { d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526", strokeWidth: 6, strokeLinecap: "round", strokeLinejoin: "round", mask: "url(#gradient-mask)" }))));
+}

package/components/Loader/ProgressLoader/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare type Props = {
+    progress?: number;
+    onPress?: () => void;
+    Icon?: React.ComponentType<{
+        color: string;
+        size: number;
+    }>;
+};
+declare const ProgressLoader: ({ progress, onPress, Icon }: Props) => React.ReactElement;
+export default ProgressLoader;

package/components/Loader/ProgressLoader/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Svg, Circle, G } from "react-native-svg";
+import { useTheme } from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+const radius = 25;
+const strokeWidth = 2;
+const normalizedRadius = radius - strokeWidth / 2;
+const circumference = normalizedRadius * 2 * Math.PI;
+const iconSize = radius * 0.88;
+const iconOffset = radius - iconSize / 2;
+const ProgressLoader = ({ progress = 0, onPress, Icon }) => {
+    const { colors } = useTheme();
+    const backgroundColor = colors.primary.c20;
+    const progressColor = colors.primary.c90;
+    const strokeDashoffset = circumference - progress * circumference;
+    return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
+        React.createElement(Svg, { width: radius * 2, height: radius * 2 },
+            React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
+            React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
+                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset })),
+            Icon ? (React.createElement(G, { transform: `translate(${iconOffset}, ${iconOffset})` },
+                React.createElement(Icon, { color: progressColor, size: iconSize }))) : null)));
+};
+export default ProgressLoader;

package/components/Loader/index.d.ts

@@ -1,11 +1,2 @@
-import React from "react";
-declare type Props = {
-    progress?: number;
-    onPress?: () => void;
-    Icon?: React.ComponentType<{
-        color: string;
-        size: number;
-    }>;
-};
-declare const ProgressLoader: ({ progress, onPress, Icon, }: Props) => React.ReactElement;
-export default ProgressLoader;
+export { default as Loader } from "./ProgressLoader";
+export { default as InfiniteLoader } from "./InfiniteLoader";

package/components/Loader/index.js

@@ -1,24 +1,2 @@
-import React from "react";
-import { Svg, Circle, G } from "react-native-svg";
-import { useTheme } from "styled-components/native";
-import { TouchableOpacity } from "react-native";
-const radius = 25;
-const strokeWidth = 2;
-const normalizedRadius = radius - strokeWidth / 2;
-const circumference = normalizedRadius * 2 * Math.PI;
-const iconSize = radius * 0.88;
-const iconOffset = radius - iconSize / 2;
-const ProgressLoader = ({ progress = 0, onPress, Icon, }) => {
-    const { colors } = useTheme();
-    const backgroundColor = colors.primary.c20;
-    const progressColor = colors.primary.c90;
-    const strokeDashoffset = circumference - progress * circumference;
-    return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
-        React.createElement(Svg, { width: radius * 2, height: radius * 2 },
-            React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
-            React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
-                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset })),
-            Icon ? (React.createElement(G, { transform: `translate(${iconOffset}, ${iconOffset})` },
-                React.createElement(Icon, { color: progressColor, size: iconSize }))) : null)));
-};
-export default ProgressLoader;
+export { default as Loader } from "./ProgressLoader";
+export { default as InfiniteLoader } from "./InfiniteLoader";

package/components/Navigation/FlowStepper/index.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import { FlexBoxProps } from "../../Layout/Flex";
+import { TransitionProps } from "../../transitions";
+interface InnerProps {
+    /**
+     * The active index.
+     */
+    activeIndex: number;
+    /**
+     * The total number of steps.
+     */
+    stepsLength: number;
+}
+export interface RenderTransitionProps extends InnerProps, TransitionProps {
+    /**
+     * The index of the child.
+     */
+    index: number;
+    /**
+     * The previously active index.
+     */
+    previousActiveIndex: number | null;
+}
+export interface Props<ExtraProps> {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * An optional header displayed above the progress bar.
+     */
+    header?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * An optional footer displayed below the body.
+     */
+    footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * Extra props that are passed to the header and footer render functions.
+     */
+    extraProps?: ExtraProps;
+    /**
+     * Additional props to pass to the progressbar component.
+     * This component is a Flex element.
+     */
+    progressBarProps?: FlexBoxProps;
+    /**
+     * **Use this prop in combination with `transitionDuration`.**
+     *
+     * A render function wrapping every children which allows using transitions.
+     * This function is called with various useful arguments, most notably:
+     * - the child index
+     * - the current active index
+     * - the previous active index
+     * - the transition status ("entered", "entering", "exiting" or "exited")
+     */
+    renderTransition?: (props: RenderTransitionProps) => JSX.Element | null;
+    /**
+     * **Use this prop in combination with `renderTransition`.**
+     *
+     * If this prop is true and if `renderTransition` is used
+     * then specifies the duration of the transition in milliseconds.
+     */
+    transitionDuration?: number;
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: React.ReactNode;
+}
+declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
+export default FlowStepper;

package/components/Navigation/FlowStepper/index.js

@@ -0,0 +1,36 @@
+import React, { useRef, useEffect } from "react";
+import { SafeAreaView } from "react-native";
+import Flex from "../../Layout/Flex";
+import ProgressBar from "../../ProgressBar";
+import { Transition } from "../../transitions";
+function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration = 0, children, }) {
+    const previousActiveIndex = useRef(null);
+    const stepsLength = React.Children.count(children);
+    useEffect(() => () => {
+        previousActiveIndex.current = activeIndex;
+    }, [activeIndex]);
+    return (React.createElement(Flex, { flex: 1 },
+        header && header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })),
+        React.createElement(SafeAreaView, { style: { flex: 1 } },
+            React.createElement(ProgressBar, Object.assign({ index: activeIndex, length: stepsLength }, progressBarProps)),
+            React.createElement(Flex, { flex: 1 }, React.Children.map(children, (child, index) => {
+                if (renderTransition && transitionDuration) {
+                    return (React.createElement(Transition, { in: index === activeIndex, timeout: transitionDuration, mountOnEnter: true, unmountOnExit: true }, (status) => {
+                        return renderTransition({
+                            index,
+                            activeIndex,
+                            previousActiveIndex: previousActiveIndex.current,
+                            stepsLength,
+                            status,
+                            duration: transitionDuration,
+                            children: child,
+                        });
+                    }));
+                }
+                else {
+                    return index === activeIndex ? child : null;
+                }
+            })),
+            footer && footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })))));
+}
+export default FlowStepper;

package/components/Navigation/SlideIndicator/index.d.ts

@@ -4,5 +4,5 @@ declare type Props = {
     activeIndex: number;
     onChange: (index: number) => void;
 };
-declare function SlideIndicator({ slidesLength, activeIndex, onChange, }: Props): React.ReactElement;
+declare function SlideIndicator({ slidesLength, activeIndex, onChange }: Props): React.ReactElement;
 export default SlideIndicator;

package/components/Navigation/SlideIndicator/index.js

@@ -30,11 +30,10 @@ const config = {
     duration: 200,
     easing: Easing.bezier(0.5, 0.01, 0, 1),
 };
-function SlideIndicator({ slidesLength, activeIndex = 0, onChange, }) {
+function SlideIndicator({ slidesLength, activeIndex = 0, onChange }) {
     const slidesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
     const activeSize = useDerivedValue(() => {
-        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
-            12;
+        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) - 12;
         return size;
     }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({

package/components/Navigation/Stepper/index.d.ts

@@ -13,5 +13,5 @@ export declare type StepperProps = {
      */
     errored?: boolean;
 };
-declare function Stepper({ steps, activeIndex, errored, }: StepperProps): React.ReactElement;
+declare function Stepper({ steps, activeIndex, errored }: StepperProps): React.ReactElement;
 export default Stepper;

package/components/Navigation/Stepper/index.js

@@ -15,7 +15,7 @@ import { space, color } from "styled-system";
 import Text from "../../Text";
 import CheckAlone from "@ledgerhq/icons-ui/native/CheckAloneMedium";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
-import Animated, { useAnimatedStyle, withTiming, withDelay, Easing, } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, withTiming, withDelay, Easing } from "react-native-reanimated";
 const Separator = styled.View `
   flex: 1;
   height: 1px;
@@ -75,8 +75,8 @@ const StepIcon = {
     border-radius: ${(p) => p.theme.space[1]}px;
     background-color: ${(p) => p.theme.colors.neutral.c70};
   `,
-    Completed: ({ color }) => (React.createElement(CheckAlone, { size: 16, color: color })),
-    Errored: ({ color }) => (React.createElement(CloseMedium, { size: 16, color: color })),
+    Completed: ({ color }) => React.createElement(CheckAlone, { size: 16, color: color }),
+    Errored: ({ color }) => React.createElement(CloseMedium, { size: 16, color: color }),
 };
 // #endregion
 // #region Step
@@ -133,7 +133,7 @@ const Container = styled.View `
   flex-direction: row;
   width: 100%;
 `;
-function Stepper({ steps, activeIndex, errored, }) {
+function Stepper({ steps, activeIndex, errored }) {
     const { space } = useTheme();
     const separatorMarginTop = useMemo(() => Math.floor(space[5] / 2), [space]);
     return (React.createElement(Container, null, steps.map((label, i) => (React.createElement(React.Fragment, { key: i },

package/components/Navigation/index.d.ts

@@ -1,2 +1,3 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
+export { default as FlowStepper } from "./FlowStepper";

package/components/Navigation/index.js

@@ -1,2 +1,3 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
+export { default as FlowStepper } from "./FlowStepper";

package/components/ProgressBar/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FlexBoxProps } from "../Layout/Flex";
+export interface Props extends FlexBoxProps {
+    /**
+     * The index of the active step.
+     */
+    index: number;
+    /**
+     * The total number of steps.
+     */
+    length: number;
+}
+declare function ProgressBar({ index, length, ...props }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ProgressBar>;
+export default _default;

package/components/ProgressBar/index.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components/native";
+import Flex from "../Layout/Flex";
+import Animated, { useDerivedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
+const ActiveBar = styled.View `
+  background-color: ${(p) => p.theme.colors.neutral.c100};
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+const AnimatedBar = Animated.createAnimatedComponent(ActiveBar);
+function ProgressBar(_a) {
+    var { index, length } = _a, props = __rest(_a, ["index", "length"]);
+    const width = useDerivedValue(() => Math.round((index / (length - 1)) * 100), [index, length]);
+    const animatedStyles = useAnimatedStyle(() => ({
+        width: withTiming(`${width.value}%`),
+    }));
+    return (React.createElement(Flex, Object.assign({ height: 4, width: "100%", backgroundColor: "neutral.c20", position: "relative" }, props),
+        React.createElement(AnimatedBar, { style: [animatedStyles] })));
+}
+export default React.memo(ProgressBar);

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
+export declare const ChipTab: ({ onPress, isActive, label }: TabItemProps) => React.ReactElement;
+declare const ChipTabs: (props: BaseTabsProps) => React.ReactElement;
+export default ChipTabs;

package/components/Tabs/Chip/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import styled from "styled-components/native";
+import Text from "../../Text";
+import { TouchableOpacity } from "react-native";
+import TemplateTabs from "../TemplateTabs";
+const TabBox = styled(TouchableOpacity) `
+  text-align: center;
+  margin: auto;
+  flex: 1;
+  padding: ${(p) => p.theme.space[5]}px 0;
+  border-radius: 8px;
+  background-color: ${(p) => (p.isActive ? p.theme.colors.palette.primary.c20 : "transparent")};
+`;
+const StyledTabs = styled(TemplateTabs) ``;
+export const ChipTab = ({ onPress, isActive, label }) => {
+    return (React.createElement(TabBox, { isActive: isActive, onPress: onPress },
+        React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: isActive ? "palette.neutral.c100" : "palette.neutral.c80", textAlign: "center" }, label)));
+};
+const ChipTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: ChipTab })));
+export default ChipTabs;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
+export declare const GraphTab: ({ onPress, isActive, label }: TabItemProps) => React.ReactElement;
+declare const GraphTabs: (props: BaseTabsProps) => React.ReactElement;
+export default GraphTabs;

package/components/Tabs/Graph/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components/native";
+import Text from "../../Text";
+import { TouchableOpacity } from "react-native";
+import Button from "../../cta/Button";
+import TemplateTabs from "../TemplateTabs";
+const TabBbx = styled(TouchableOpacity) `
+  text-align: center;
+  margin: auto;
+  flex: 1;
+`;
+const StyledTabs = styled(TemplateTabs) `
+  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border-radius: 35px;
+  padding: 4px;
+`;
+export const GraphTab = ({ onPress, isActive, label }) => {
+    return (React.createElement(TabBbx, { onPress: onPress }, isActive ? (React.createElement(Button, { type: "main" }, label)) : (React.createElement(Text, { lineHeight: 36, textAlign: "center" }, label))));
+};
+const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
+export default GraphTabs;