@ledgerhq/native-ui 0.4.0 → 0.6.2

package/components/cta/Button/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { SpaceProps } from "styled-system";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
-export declare type ButtonProps = TouchableOpacityProps & SpaceProps & {
+import { BaseStyledProps } from "../../styled";
+export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     Icon?: React.ComponentType<{
         size: number;
         color: string;
     }> | null;
+    iconName?: string;
     type?: "main" | "shade" | "error" | "color" | "default";
     size?: "small" | "medium" | "large";
     iconPosition?: "right" | "left";
@@ -17,19 +18,8 @@ export declare type ButtonProps = TouchableOpacityProps & SpaceProps & {
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;
-} & TouchableOpacityProps & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    Icon?: React.ComponentType<{
-        size: number;
-        color: string;
-    }> | null | undefined;
-    type?: "default" | "main" | "shade" | "error" | "color" | undefined;
-    size?: "large" | "small" | "medium" | undefined;
-    iconPosition?: "left" | "right" | undefined;
-    outline?: boolean | undefined;
-    disabled?: boolean | undefined;
-    pressed?: boolean | undefined;
-    children?: React.ReactNode;
-}, never>;
+    sizeVariant?: ButtonProps["size"];
+} & Omit<ButtonProps, "size">, never>;
 declare const Button: (props: ButtonProps) => React.ReactElement;
 export declare const PromisableButton: (props: ButtonProps) => React.ReactElement;
 export default Button;

package/components/cta/Button/index.js

@@ -7,26 +7,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
-import { color, border, space } from "styled-system";
-import { ActivityIndicator, TouchableOpacity, } from "react-native";
-import { buttonSizeStyle, getButtonColorStyle, } from "../../cta/Button/getButtonStyle";
+import { ActivityIndicator, TouchableOpacity } from "react-native";
+import { buttonSizeStyle, getButtonColorStyle } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";
+import { Icon as IconComponent } from "../../Icon";
+import baseStyled from "../../styled";
 const IconContainer = styled.View `
-  ${(p) => p.iconButton
-    ? ""
-    : p.iconPosition === "left"
-        ? `margin-right: 10px;`
-        : `margin-left: 10px;`}
+  ${(p) => p.iconButton ? "" : p.iconPosition === "left" ? `margin-right: 10px;` : `margin-left: 10px;`}
 `;
-export const Base = styled(TouchableOpacity).attrs((p) => (Object.assign({}, getButtonColorStyle(p.theme.colors, p).button))) `
-  ${color};
-  ${border};
-  ${space};
+export const Base = baseStyled(TouchableOpacity).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
+    // Avoid conflict with styled-system's size property by nulling size and renaming it
+    size: undefined, sizeVariant: p.size }))) `
+
   border-radius: ${(p) => p.theme.space[10]}px;
-  height: ${(p) => p.theme.space[10]}px;
   padding: 0 ${(p) => p.theme.space[7]}px;
   flex-direction: row;
   border-style: solid;
@@ -36,7 +32,7 @@ export const Base = styled(TouchableOpacity).attrs((p) => (Object.assign({}, get
   align-content: center;
   overflow: hidden;
   position: relative;
-  ${(p) => buttonSizeStyle[p.size || "medium"]}
+  ${(p) => buttonSizeStyle[p.sizeVariant || "medium"]}
 
   ${(p) => (p.iconButton ? `padding: 0; width: ${p.theme.space[10]}px;` : "")}
 `;
@@ -59,22 +55,23 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, iconPosition = "right", children, hide = false, size = "medium", } = props;
+    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName } = props;
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
+    const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: ctaIconSize[size], color: text.color })) ||
+        (Icon && React.createElement(Icon, { size: ctaIconSize[size], color: text.color })), [iconName, size, Icon, text.color]);
     return (React.createElement(Container, { hide: hide },
         iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null,
-        Icon ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition },
-            React.createElement(Icon, { size: ctaIconSize[size], color: text.color }))) : null,
+        IconNode && (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)),
         iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null));
 };
 const Button = (props) => {
-    const { Icon, children, type = "default", size = "medium" } = props;
-    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: !!Icon && !children, activeOpacity: 0.5 }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size }))));
+    const { Icon, children, type = "default" } = props;
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, activeOpacity: 0.5 }),
+        React.createElement(ButtonContainer, Object.assign({}, props, { type: type }))));
 };
 export const PromisableButton = (props) => {
-    const { Icon, children, onPress, type = "main", size = "medium", disabled = false, } = props;
+    const { Icon, children, onPress, type = "main", disabled = false } = props;
     const [spinnerOn, setSpinnerOn] = useState(false);
     const theme = useTheme();
     const onPressHandler = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
@@ -88,8 +85,8 @@ export const PromisableButton = (props) => {
             setSpinnerOn(false);
         }
     }), [onPress]);
-    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size, hide: spinnerOn })),
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
+        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: spinnerOn })),
         React.createElement(SpinnerContainer, null,
             React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn }))));
 };

package/components/cta/Link/index.js

@@ -5,11 +5,7 @@ import Text from "../../Text";
 import { getLinkColors } from "./getLinkStyle";
 import { ctaIconSize, ctaTextType } from "../getCtaStyle";
 const IconContainer = styled.View `
-  ${(p) => p.iconLink
-    ? ""
-    : p.iconPosition === "left"
-        ? `margin-right: 6px;`
-        : `margin-left: 6px;`}
+  ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
 `;
 export const Base = styled(TouchableOpacity) `
   flex-direction: row;

package/components/index.d.ts

@@ -1,10 +1,13 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export * from "./Loader";
+export { default as ProgressBar } from "./ProgressBar";
+export * as Transitions from "./transitions";

package/components/index.js

@@ -1,10 +1,14 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export * from "./Loader";
+export { default as ProgressBar } from "./ProgressBar";
+import * as Transitions_1 from "./transitions";
+export { Transitions_1 as Transitions };

package/components/message/Alert/index.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 declare type AlertType = "info" | "warning" | "error";
 export interface AlertProps {
     type?: AlertType;
     title: string;
     showIcon?: boolean;
 }
-export default function Alert({ type, title, showIcon, }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon }: AlertProps): JSX.Element;
 export {};

package/components/message/Alert/index.js

@@ -39,10 +39,10 @@ const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
   flex-direction: row;
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true, }) {
+export default function Alert({ type = "info", title, showIcon = true }) {
     const theme = useTheme();
     const textColor = getColor(theme, alertColors[type || "info"].color);
     return (React.createElement(StyledAlertContainer, { type: type },
         showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, icons[type || "info"]({ size: 20, color: textColor }))),
-        React.createElement(Text, { color: textColor }, title)));
+        React.createElement(Text, { color: textColor, flexShrink: 1 }, title)));
 }

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

@@ -1,31 +1,35 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
 import FlexBox from "../../Layout/Flex";
-import { TouchableOpacity, } from "react-native";
+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/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="styled-components-react-native" />
+import { ReactNativeStyledInterface, DefaultTheme } from "styled-components/native";
+import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps, BorderProps, BackgroundProps } from "styled-system";
+import { InterpolationFunction } from "styled-components";
+export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & OverflowProps & BorderProps & BackgroundProps & {
+    columnGap?: string | number;
+    rowGap?: string | number;
+    color?: string;
+    display?: string;
+    position?: string;
+    maxHeight?: number;
+};
+export declare const baseStyles: InterpolationFunction<unknown>;
+declare const _default: ReactNativeStyledInterface<DefaultTheme>;
+export default _default;

package/components/styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components/native";
+import { compose, flexbox, space, position, color, layout, overflow, border, background, } from "styled-system";
+export const baseStyles = compose(flexbox, space, position, color, layout, overflow, border, background);
+const proxyStyled = new Proxy(styled, {
+    apply(target, thisArg, argumentsList) {
+        return styled(target.apply(thisArg, argumentsList)(baseStyles));
+    },
+    get(target, property) {
+        return styled(target[property].apply(styled, [baseStyles]));
+    },
+});
+export default proxyStyled;

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,39 @@
+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.4.0",
+  "version": "0.6.2",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,10 +15,10 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.0",
-    "@ledgerhq/ui-shared": "^0.1.3",
+    "@ledgerhq/icons-ui": "^0.2.2",
+    "@ledgerhq/ui-shared": "^0.1.5",
     "@types/color": "^3.0.2",
-    "@types/react": "^17.0.34",
+    "@types/react": "^17.0.37",
     "@types/react-native": "^0.65.9",
     "@types/styled-components-react-native": "^5.1.3",
     "@types/styled-system": "^5.1.13",

package/styles/StyleProvider.d.ts

@@ -9,5 +9,5 @@ declare module "styled-components" {
     interface DefaultTheme extends Theme {
     }
 }
-export declare const StyleProvider: ({ children, selectedPalette, }: Props) => React.ReactElement;
+export declare const StyleProvider: ({ children, selectedPalette }: Props) => React.ReactElement;
 export {};

package/styles/StyleProvider.js

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { ThemeProvider } from "styled-components/native";
 import defaultTheme from "./theme";
 import { palettes } from "@ledgerhq/ui-shared";
-export const StyleProvider = ({ children, selectedPalette, }) => {
+export const StyleProvider = ({ children, selectedPalette }) => {
     const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign(Object.assign({}, defaultTheme.colors), palettes[selectedPalette]), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
     return React.createElement(ThemeProvider, { theme: theme }, children);
 };

package/styles/helpers.js

@@ -5,9 +5,7 @@ export const darken = (c, a) => Color(c).darken(a).toString();
 export const lighten = (c, a) => Color(c).lighten(a).toString();
 export const mix = (c, b, a) => Color(c).mix(Color(b), a).toString();
 const get = (object, path) => {
-    const p = typeof path === "string"
-        ? path.split(".").filter((key) => key.length)
-        : path;
+    const p = typeof path === "string" ? path.split(".").filter((key) => key.length) : path;
     return p.reduce((dive, key) => dive && dive[key], object);
 };
 export const getColor = (p, color) => {

package/styles/theme.js

@@ -1,5 +1,7 @@
 import { palettes } from "@ledgerhq/ui-shared";
+//                    0  1  2  3  4   5   6   7   8   9   10  11  12  13  14
 export const space = [0, 2, 4, 8, 12, 14, 16, 24, 32, 40, 48, 64, 80, 96, 120];
+//                        0   1   2   3   4   5   6   7   8
 export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
 [
     fontSizes.tiny,

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

@@ -1,15 +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("../../Layout/Flex").Props & {
-    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;