@ledgerhq/native-ui 0.5.0 → 0.6.0

package/components/Carousel/index.js

@@ -52,7 +52,7 @@ function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContai
         const interval = setInterval(() => {
             if (!disableTimer.current) {
                 setActiveIndexState((index) => {
-                    const newIndex = index ? (index + 1) % slidesLength : 0;
+                    const newIndex = typeof index !== "undefined" ? (index + 1) % slidesLength : 0;
                     scrollToIndex(newIndex);
                     onChange && onChange(newIndex);
                     return newIndex;

package/components/Form/SelectableList.d.ts

@@ -3,8 +3,13 @@ import { GestureResponderEvent } from "react-native";
 export declare type ElementProps<V> = React.PropsWithChildren<{
     first?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     value?: V;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
+    Icon?: (props: {
+        size?: number;
+        color?: string;
+    }) => React.ReactElement;
 }>;
 export declare type Props<V> = React.PropsWithChildren<{
     currentValue?: V;
@@ -12,6 +17,6 @@ export declare type Props<V> = React.PropsWithChildren<{
 }>;
 declare function SelectableList<V>({ currentValue, onChange, children }: Props<V>): JSX.Element;
 declare namespace SelectableList {
-    var Element: <V>({ first, value, selected, onPress, children, }: ElementProps<V>) => JSX.Element;
+    var Element: <V>({ first, value, selected, disabled, onPress, children, Icon, }: ElementProps<V>) => JSX.Element;
 }
 export default SelectableList;

package/components/Form/SelectableList.js

@@ -1,19 +1,18 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import styled from "styled-components/native";
-import { border } from "styled-system";
 import Flex from "../Layout/Flex";
 import { Text } from "../index";
 const ElementContainer = styled(Flex).attrs({
     accessible: true,
     accessibilityRole: "radio",
-}) `
-  ${border}
-`;
-function Element({ first, value, selected, onPress, children, }) {
-    return (React.createElement(TouchableOpacity, { onPress: onPress },
-        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "neutral.c00", border: "1px solid", borderColor: selected ? "primary.c100" : "neutral.c40", borderRadius: 1 },
-            React.createElement(Text, { variant: "large" }, children || value))));
+}) ``;
+function Element({ first, value, selected, disabled, onPress, children, Icon, }) {
+    return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled },
+        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "neutral.c00", border: "1px solid", borderColor: selected ? "primary.c100" : "neutral.c40", borderRadius: 1, flexDirection: "row", alignItems: "center" },
+            Icon && (React.createElement(Flex, { mr: 6 },
+                React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }))),
+            React.createElement(Text, { variant: "large", color: disabled ? "neutral.c50" : "neutral.c100" }, children || value))));
 }
 function SelectableList({ currentValue, onChange, children }) {
     return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {

package/components/Form/index.d.ts

@@ -2,4 +2,5 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";

package/components/Form/index.js

@@ -2,4 +2,5 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";

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

@@ -0,0 +1,64 @@
+import React from "react";
+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;
+    /**
+     * **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, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
+export default FlowStepper;

package/components/Navigation/FlowStepper/index.js

@@ -0,0 +1,38 @@
+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, 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, { index: activeIndex, length: stepsLength }),
+            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/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;

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

@@ -0,0 +1,29 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+export declare type BaseTabsProps = {
+    labels: string[];
+    activeIndex: number;
+    onChange: (newIndex: number) => void;
+};
+export declare type TabItemProps = Partial<BaseTabsProps> & {
+    label: string;
+    isActive: boolean;
+    index: number;
+    onPress: () => void;
+};
+export declare type TabsProps = BaseTabsProps & {
+    Item: (props: TabItemProps) => React.ReactElement;
+};
+export declare const TabsContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: number | undefined;
+} & {
+    flexDirection: string;
+    alignItems: string;
+}, "alignItems" | "flexDirection">;
+declare const TemplateTabsGroup: (props: TabsProps) => React.ReactElement;
+export default TemplateTabsGroup;

package/components/Tabs/TemplateTabs/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components/native";
+import FlexBox from "../../Layout/Flex";
+export const TabsContainer = styled(FlexBox).attrs({
+    flexDirection: "row",
+    alignItems: "stretch",
+}) `
+  width: 100%;
+`;
+const TemplateTabsGroup = (props) => {
+    const { labels, activeIndex, onChange, Item } = props;
+    return (React.createElement(TabsContainer, Object.assign({}, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { label: label, index: index, isActive: index === activeIndex, onPress: () => onChange(index) }))))));
+};
+export default TemplateTabsGroup;

package/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChipTabs } from "./Chip";
+export { default as GraphTabs } from "./Graph";

package/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default as ChipTabs } from "./Chip";
+export { default as GraphTabs } from "./Graph";

package/components/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
@@ -9,3 +8,6 @@ export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
 export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export { default as ProgressBar } from "./ProgressBar";
+export * as Transitions from "./transitions";

package/components/index.js

@@ -1,5 +1,4 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
@@ -9,3 +8,7 @@ export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
 export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export { default as ProgressBar } from "./ProgressBar";
+import * as Transitions_1 from "./transitions";
+export { Transitions_1 as Transitions };

package/components/{drawer → message}/Notification/index.d.ts

@@ -1,17 +1,18 @@
 import React from "react";
 import { TextProps, TouchableOpacityProps } from "react-native";
 declare type Props = {
-    Icon: React.ComponentType<{
+    Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
-    color?: string;
+    iconColor?: string;
     variant?: "primary" | "secondary";
     title: string;
     subtitle?: string;
     numberOfLines?: TextProps["numberOfLines"];
     onClose?: TouchableOpacityProps["onPress"];
-    onLearnMore?: TouchableOpacityProps["onPress"];
+    linkText?: string;
+    onLinkPress?: TouchableOpacityProps["onPress"];
 };
-export default function Notification({ Icon, color, variant, numberOfLines, title, subtitle, onClose, onLearnMore, }: Props): React.ReactElement;
+export default function Notification({ Icon, iconColor, variant, numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }: Props): React.ReactElement;
 export {};

package/components/{drawer → message}/Notification/index.js

@@ -4,28 +4,32 @@ import FlexBox from "../../Layout/Flex";
 import { TouchableOpacity, } from "react-native";
 import Text from "../../Text";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
+import { Flex } from "../../Layout";
 const NotificationContainer = styled.View `
   display: flex;
   width: 100%;
   flex-direction: row;
   align-items: center;
-  padding: 16px;
+  ${(p) => p.variant === "primary" &&
+    `
+     padding: 16px;
+  `}
   background-color: ${(p) => p.variant === "primary" ? p.theme.colors.primary.c90 : "transparent"};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
-export default function Notification({ Icon, color, variant = "primary", numberOfLines, title, subtitle, onClose, onLearnMore, }) {
+export default function Notification({ Icon, iconColor, variant = "primary", numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }) {
     const { colors } = useTheme();
     const textColor = variant === "primary" ? colors.neutral.c00 : colors.neutral.c100;
     return (React.createElement(NotificationContainer, { variant: variant },
-        React.createElement(FlexBox, null,
-            React.createElement(Icon, { size: 18, color: color || textColor })),
-        React.createElement(FlexBox, { ml: 16, flexShrink: 1 },
-            React.createElement(Text, { variant: "body", fontWeight: "medium", color: color || textColor, numberOfLines: numberOfLines }, title),
-            !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: color ||
-                    (variant === "primary" ? colors.neutral.c00 : colors.neutral.c80), mt: "2px", mb: "2px" }, subtitle)),
-            onLearnMore && (React.createElement(TouchableOpacity, { onPress: onLearnMore },
-                React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: color || textColor }, "Learn more")))),
+        Icon && (React.createElement(FlexBox, { mr: 16 },
+            React.createElement(Icon, { size: 20, color: iconColor || textColor }))),
+        React.createElement(FlexBox, { flexShrink: 1 },
+            React.createElement(Text, { variant: "body", fontWeight: "medium", color: textColor, numberOfLines: numberOfLines }, title),
+            !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: variant === "primary" ? colors.neutral.c00 : colors.neutral.c80, mt: 2 }, subtitle)),
+            linkText && onLinkPress && (React.createElement(Flex, { mt: 3 },
+                React.createElement(TouchableOpacity, { onPress: onLinkPress },
+                    React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor }, linkText))))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
             React.createElement(TouchableOpacity, { onPress: onClose },
-                React.createElement(CloseMedium, { size: 14, color: color || textColor }))))));
+                React.createElement(CloseMedium, { size: 14, color: textColor }))))));
 }

package/components/message/index.d.ts

@@ -1 +1,2 @@
 export { default as Alert } from "./Alert";
+export { default as Notification } from "./Notification";

package/components/message/index.js

@@ -1 +1,2 @@
 export { default as Alert } from "./Alert";
+export { default as Notification } from "./Notification";

package/components/transitions/Fade.d.ts

@@ -0,0 +1,5 @@
+import { TransitionProps } from "./types";
+/**
+ * A fade-in / fade-out transition changing the opacity of its children based on their status.
+ */
+export declare function Fade({ status, duration, style, children }: TransitionProps): JSX.Element;

package/components/transitions/Fade.js

@@ -0,0 +1,32 @@
+import React, { useRef, useMemo, useEffect } from "react";
+import { Animated } from "react-native";
+/**
+ * A fade-in / fade-out transition changing the opacity of its children based on their status.
+ */
+export function Fade({ status, duration, style, children }) {
+    const fadeAnim = useRef(new Animated.Value(status === "entered" ? 1 : 0)).current;
+    const fadeIn = useMemo(() => Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true,
+    }), [duration, fadeAnim]);
+    const fadeOut = useMemo(() => Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true,
+    }), [duration, fadeAnim]);
+    useEffect(() => {
+        if (status === "entering") {
+            fadeIn.start();
+        }
+        if (status === "exiting") {
+            fadeOut.start();
+        }
+    }, [fadeIn, fadeOut, status]);
+    return (React.createElement(Animated.View, { style: [
+            {
+                opacity: fadeAnim,
+            },
+            style,
+        ] }, children));
+}

package/components/transitions/Slide.d.ts

@@ -0,0 +1,11 @@
+import { TransitionProps } from "./types";
+export interface SlideProps extends TransitionProps {
+    /**
+     * The direction of the slide animation.
+     */
+    direction?: "left" | "right";
+}
+/**
+ * A slide left/right transition translating its children based on their status and a given direction.
+ */
+export declare function Slide({ status, duration, style, direction, children, }: SlideProps): JSX.Element;

package/components/transitions/Slide.js

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import { Animated, Platform, Dimensions } from "react-native";
+const WEB = Platform.OS === "web";
+/**
+ * A slide left/right transition translating its children based on their status and a given direction.
+ */
+export function Slide({ status, duration, style, direction = "left", children, }) {
+    const [width, setWidth] = useState(Dimensions.get("window").width);
+    const styleRef = useRef(new Animated.Value(0)).current;
+    const previousStatus = useRef(null);
+    useEffect(() => () => {
+        previousStatus.current = status;
+    }, [status]);
+    const animateIn = useMemo(() => Animated.timing(styleRef, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true,
+    }), [duration, styleRef]);
+    const animateOut = useMemo(() => Animated.timing(styleRef, {
+        toValue: direction === "left" ? -1 : 1,
+        duration,
+        useNativeDriver: true,
+    }), [direction, duration, styleRef]);
+    useEffect(() => {
+        if (status === "entering") {
+            if (previousStatus.current !== "exiting") {
+                styleRef.setValue(direction === "left" ? 1 : -1);
+            }
+            animateIn.start();
+        }
+        if (status === "exiting") {
+            animateOut.start();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [status]);
+    return (React.createElement(Animated.View, { style: [
+            {
+                transform: [
+                    {
+                        translateX: styleRef.interpolate({
+                            inputRange: [-1, 1],
+                            outputRange: WEB ? ["-100%", "100%"] : [-width, width],
+                        }),
+                    },
+                ],
+            },
+            style,
+        ], onLayout: ({ nativeEvent }) => setWidth(nativeEvent.layout.width) }, children));
+}

package/components/transitions/Transition.d.ts

@@ -0,0 +1,49 @@
+import { TransitionStatus } from "./index";
+export interface Props {
+    /**
+     * Show the component. Triggers the enter or exit states.
+     */
+    in: boolean;
+    /**
+     * By default the child component is mounted immediately along with the parent Transition component.
+     * If you want to "lazy mount" the component on the first in={true} you can set mountOnEnter.
+     * After the first enter transition the component will stay mounted, even on "exited",
+     * unless you also specify unmountOnExit.
+     */
+    mountOnEnter?: boolean;
+    /**
+     * By default the child component stays mounted after it reaches the 'exited' state.
+     * Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Enable or disable enter transitions.
+     */
+    enter?: boolean;
+    /**
+     * Enable or disable exit transitions.
+     */
+    exit?: boolean;
+    /**
+     * The duration of the transition, in milliseconds.
+     *
+     * You may specify a single timeout for all transitions using a string or or individually using an object.
+     */
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+    /**
+     * A function child can be used instead of a React element.
+     * This function is called with the current transition status ('entering', 'entered', 'exiting', 'exited'),
+     * which can be used to apply context specific props to a component.
+     */
+    children: (status: TransitionStatus) => JSX.Element | null;
+}
+/**
+ * Mimics the [Transition](https://reactcommunity.org/react-transition-group/transition) component
+ * from [react-transition-group](https://reactcommunity.org/react-transition-group).
+ *
+ * Supports a minimal set of options but works with react-native.
+ */
+export declare function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit, enter, exit, children, }: Props): JSX.Element | null;

package/components/transitions/Transition.js

@@ -0,0 +1,42 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+/**
+ * Mimics the [Transition](https://reactcommunity.org/react-transition-group/transition) component
+ * from [react-transition-group](https://reactcommunity.org/react-transition-group).
+ *
+ * Supports a minimal set of options but works with react-native.
+ */
+export function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit, enter = true, exit = true, children, }) {
+    const [status, setStatus] = useState(inValue ? "entered" : "exited");
+    const canMount = useRef(!mountOnEnter);
+    canMount.current = canMount.current || inValue;
+    useEffect(() => {
+        if ((inValue && status === "entered") ||
+            (!inValue && status === "exited")) {
+            return;
+        }
+        if (inValue && !enter) {
+            return setStatus("entered");
+        }
+        if (!inValue && !exit) {
+            return setStatus("exited");
+        }
+        const timeoutValue = typeof timeout === "number"
+            ? timeout
+            : timeout[inValue ? "enter" : "exit"];
+        setStatus(inValue ? "entering" : "exiting");
+        const timeoutRef = setTimeout(() => {
+            setStatus(inValue ? "entered" : "exited");
+        }, timeoutValue);
+        return () => {
+            clearTimeout(timeoutRef);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inValue, timeout]);
+    const result = useMemo(() => {
+        if (!canMount.current || (unmountOnExit && status === "exited")) {
+            return null;
+        }
+        return children(status);
+    }, [children, status, unmountOnExit]);
+    return result;
+}

package/components/transitions/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Fade";
+export * from "./Slide";
+export * from "./types";
+export * from "./Transition";

package/components/transitions/index.js

@@ -0,0 +1,4 @@
+export * from "./Fade";
+export * from "./Slide";
+export * from "./types";
+export * from "./Transition";

package/components/transitions/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+export declare type TransitionStatus = "entering" | "entered" | "exiting" | "exited";
+export interface TransitionProps {
+    /**
+     * The status of the transition, either "entered", "entering", "exiting" or "exited".
+     */
+    status: TransitionStatus;
+    /**
+     * Duration used to transition between statuses.
+     */
+    duration: number;
+    /**
+     * Additional styles to pass to the underlying View wrapper.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Children that will get controlled by the transition.
+     */
+    children: React.ReactNode;
+}

package/components/transitions/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,8 +15,8 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.0",
-    "@ledgerhq/ui-shared": "^0.1.3",
+    "@ledgerhq/icons-ui": "^0.2.1",
+    "@ledgerhq/ui-shared": "^0.1.4",
     "@types/color": "^3.0.2",
     "@types/react": "^17.0.37",
     "@types/react-native": "^0.65.9",

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

@@ -1,22 +0,0 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { TouchableOpacity } from "react-native";
-export declare type ToggleGroupProps = {
-    labels: string[];
-    activeIndex: number;
-    onChange: (newIndex: number) => void;
-};
-export declare const ToggleGroupContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
-    columnGap?: string | number | undefined;
-    rowGap?: string | number | undefined;
-    color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
-} & {
-    flexDirection: string;
-    alignItems: string;
-}, "alignItems" | "flexDirection">;
-export declare const ToggleBox: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
-declare const ToggleGroup: (props: ToggleGroupProps) => React.ReactElement;
-export default ToggleGroup;

package/components/Navigation/ToggleGroup/index.js

@@ -1,25 +0,0 @@
-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 FlexBox from "../../Layout/Flex";
-export const ToggleGroupContainer = styled(FlexBox).attrs({
-    flexDirection: "row",
-    alignItems: "stretch",
-}) `
-  width: 100%;
-  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
-  border-radius: 35px;
-  padding: 4px;
-`;
-export const ToggleBox = styled(TouchableOpacity) `
-  text-align: center;
-  margin: auto;
-  flex: 1;
-`;
-const ToggleGroup = (props) => {
-    const { labels, activeIndex, onChange } = props;
-    return (React.createElement(ToggleGroupContainer, null, labels.map((label, key) => (React.createElement(ToggleBox, { key: key, onPress: () => onChange(key) }, key === activeIndex ? (React.createElement(Button, { type: "main" }, label)) : (React.createElement(Text, { lineHeight: 36 }, label)))))));
-};
-export default ToggleGroup;

package/components/drawer/index.d.ts

@@ -1 +0,0 @@
-export { default as Notification } from "./Notification";

package/components/drawer/index.js

@@ -1 +0,0 @@
-export { default as Notification } from "./Notification";