@ledgerhq/native-ui 0.4.0 → 0.5.0

package/assets/logos/LedgerLiveAltRegular.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/assets/logos/LedgerLiveRegular.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/components/Carousel/index.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+import { ScrollView, ViewProps } from "react-native";
+import type { Props as FlexboxProps } from "../Layout/Flex";
+declare const HorizontalScrollView: import("styled-components").StyledComponent<typeof ScrollView, import("styled-components").DefaultTheme, {
+    horizontal: true;
+}, "horizontal">;
+export declare type Props = React.PropsWithChildren<{
+    /**
+     * Forces the selection of a specific item of the carousel.
+     */
+    activeIndex?: number;
+    /**
+     * Called when the active carousel index is updated.
+     */
+    onChange?: (index: number) => void;
+    /**
+     * This number in milliseconds will enable automatic scrolling when defined.
+     *
+     * The Carousel will scroll to the next item after this delay is elapsed,
+     * unless the user is currently dragging the content.
+     *
+     * This delay will also reset whenever the user taps on an indicator bullet to
+     * manually change the carousel item displayed.
+     */
+    autoDelay?: number;
+    /**
+     * Additional props to pass to the outer container.
+     * This container is a Flex element.
+     */
+    containerProps?: FlexboxProps;
+    /**
+     * Additional props to pass to the ScrollView element.
+     * See: https://reactnative.dev/docs/scrollview
+     */
+    scrollViewProps?: React.ComponentProps<typeof HorizontalScrollView>;
+    /**
+     * Additional props to pass to the indicators container.
+     * This container is a Flex element.
+     */
+    slideIndicatorContainerProps?: FlexboxProps & ViewProps;
+}>;
+declare function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, children, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Carousel>;
+export default _default;

package/components/Carousel/index.js

@@ -0,0 +1,76 @@
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { Platform, } from "react-native";
+import styled from "styled-components/native";
+import { Flex, SlideIndicator } from "../index";
+const HorizontalScrollView = styled.ScrollView.attrs({ horizontal: true }) `
+  flex: 1;
+`;
+function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, children, }) {
+    const [init, setInit] = useState(false);
+    const [activeIndexState, setActiveIndexState] = useState(activeIndex);
+    const disableTimer = useRef(false);
+    const [resetTimer, setResetTimer] = useState({});
+    const dimensions = useRef(null);
+    const slidesLength = React.Children.count(children);
+    const scrollRef = useRef(null);
+    const fullWidth = 100 * slidesLength;
+    const itemWidth = !dimensions.current
+        ? 0
+        : dimensions.current.contentWidth / slidesLength;
+    const scrollToIndex = useCallback((index, animated = true) => {
+        if (scrollRef.current && dimensions.current) {
+            scrollRef.current.scrollTo({
+                x: itemWidth * index,
+                animated,
+            });
+        }
+    }, [itemWidth]);
+    useEffect(() => {
+        // On init scroll to the active index prop location - if specified.
+        if (init && activeIndex)
+            scrollToIndex(activeIndex, false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [init]);
+    useEffect(() => {
+        if (scrollToIndex && typeof activeIndex === "number") {
+            scrollToIndex(activeIndex);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeIndex]);
+    const onContentSizeChange = (contentWidth, contentHeight) => {
+        dimensions.current = { contentWidth, contentHeight };
+        setInit(true);
+    };
+    const onScroll = ({ nativeEvent: { contentOffset, contentSize }, }) => {
+        const newIndex = Math.abs(Math.round((contentOffset.x / contentSize.width) * slidesLength));
+        setActiveIndexState(newIndex);
+        onChange && onChange(newIndex);
+    };
+    useEffect(() => {
+        if (!autoDelay)
+            return;
+        const interval = setInterval(() => {
+            if (!disableTimer.current) {
+                setActiveIndexState((index) => {
+                    const newIndex = index ? (index + 1) % slidesLength : 0;
+                    scrollToIndex(newIndex);
+                    onChange && onChange(newIndex);
+                    return newIndex;
+                });
+            }
+        }, autoDelay);
+        return () => clearInterval(interval);
+    }, [resetTimer, slidesLength, scrollToIndex, onChange, autoDelay]);
+    return (React.createElement(Flex, Object.assign({ flex: 1, width: "100%", alignItems: "center", justifyContent: "center" }, containerProps),
+        React.createElement(HorizontalScrollView, Object.assign({ ref: scrollRef, onScroll: onScroll, onContentSizeChange: onContentSizeChange, onScrollBeginDrag: () => {
+                disableTimer.current = true;
+            }, onScrollEndDrag: () => {
+                disableTimer.current = false;
+            }, pagingEnabled: Platform.OS !== "web", showsHorizontalScrollIndicator: false, scrollEventThrottle: 200, contentContainerStyle: { width: `${fullWidth}%` }, decelerationRate: "fast" }, scrollViewProps), React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
+        React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps),
+            React.createElement(SlideIndicator, { activeIndex: activeIndexState || 0, onChange: (index) => {
+                    scrollToIndex(index);
+                    setResetTimer({});
+                }, slidesLength: slidesLength }))));
+}
+export default React.memo(Carousel);

package/components/Form/Checkbox/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import type { BaseTextProps } from "../../Text";
 declare type CheckboxProps = {
     checked: boolean;
     onChange?: () => void;
     disabled?: boolean;
-    label?: string;
+    label?: BaseTextProps["children"];
 };
 declare const Checkbox: ({ checked, onChange, disabled, label, }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/components/Form/Input/BaseInput/index.d.ts

@@ -1,15 +1,30 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { View, TextInputProps } from "react-native";
+import { TextInput, TextInputProps, StyleProp, ViewStyle } from "react-native";
 export declare type CommonProps = TextInputProps & {
     disabled?: boolean;
     error?: string;
 };
 export declare type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
+    /**
+     * The value of the input.
+     */
+    value: T;
+    /**
+     * A function that will render some content on the left side of the input.
+     */
     renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
+    /**
+     * A function that will render some content on the right side of the input.
+     */
     renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
-    value: T;
+    /**
+     * Triggered when the input value is updated.
+     */
     onChange?: (value: T) => void;
+    /**
+     * Same as onChange but preserves the native event passed as the callback argument.
+     */
     onChangeEvent?: TextInputProps["onChange"];
     /**
      * A function can be provided to serialize a value of any type to a string.
@@ -27,15 +42,78 @@ export declare type InputProps<T = string> = Omit<CommonProps, "value" | "onChan
      * *A deserializer function should always be used in conjunction with a serializer function.*
      */
     deserialize?: (value: string) => T;
+    /**
+     * Additional style for the container element.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
 };
-export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<typeof View, import("styled-components").DefaultTheme, import("../../../Layout/Flex").Props & {
+export declare const InputRenderLeftContainer: 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;
+} & {
     alignItems: string;
     flexDirection: string;
     pl: string;
 }, "pl" | "alignItems" | "flexDirection">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof View, import("styled-components").DefaultTheme, import("../../../Layout/Flex").Props & {
+export declare const InputRenderRightContainer: 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;
+} & {
     alignItems: string;
     flexDirection: string;
     pr: string;
 }, "pr" | "alignItems" | "flexDirection">;
-export default function Input<T = string>(props: InputProps<T>): JSX.Element;
+declare function Input<T = string>(props: InputProps<T>, ref?: React.ForwardedRef<TextInput>): JSX.Element;
+declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
+    /**
+     * The value of the input.
+     */
+    value: T;
+    /**
+     * A function that will render some content on the left side of the input.
+     */
+    renderLeft?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
+    /**
+     * A function that will render some content on the right side of the input.
+     */
+    renderRight?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
+    /**
+     * Triggered when the input value is updated.
+     */
+    onChange?: ((value: T) => void) | undefined;
+    /**
+     * Same as onChange but preserves the native event passed as the callback argument.
+     */
+    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    /**
+     * A function can be provided to serialize a value of any type to a string.
+     *
+     * This can be useful to wrap the `<BaseInput />` component (which expects a string)
+     * and create higher-level components that will automatically perform the input/output
+     * conversion to other types.
+     *
+     * *A serializer function should always be used in conjunction with a deserializer function.*
+     */
+    serialize?: ((value: T) => string) | undefined;
+    /**
+     * A deserializer can be provided to convert the html input value from a string to any other type.
+     *
+     * *A deserializer function should always be used in conjunction with a serializer function.*
+     */
+    deserialize?: ((value: string) => T) | undefined;
+    /**
+     * Additional style for the container element.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+} & {
+    ref?: React.ForwardedRef<TextInput> | undefined;
+}) => ReturnType<typeof Input>;
+export default _default;

package/components/Form/Input/BaseInput/index.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useMemo, useCallback } from "react";
-import { View } from "react-native";
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
 import FlexBox from "../../../Layout/Flex";
@@ -77,18 +76,19 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
 // Yes, this is dirty. If you can figure out a better way please change the code :).
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const IDENTITY = (_) => _;
-export default function Input(props) {
-    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize"]);
+function Input(props, ref) {
+    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle"]);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
     const handleChange = useCallback((value) => {
         onChange && onChange(deserialize(value));
         onChangeText && onChangeText(value);
     }, [onChange, onChangeText, deserialize]);
     const [focus, setFocus] = React.useState(false);
-    return (React.createElement(View, { style: { display: "flex", width: "100%" } },
+    return (React.createElement(FlexBox, { width: "100%", style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
         React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error },
             typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
-            React.createElement(BaseInput, Object.assign({}, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: () => setFocus(true), onBlur: () => setFocus(false) })),
+            React.createElement(BaseInput, Object.assign({ ref: ref }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: () => setFocus(true), onBlur: () => setFocus(false) })),
             typeof renderRight === "function" ? renderRight(props) : renderRight),
         !!error && !disabled && (React.createElement(InputErrorContainer, null, error))));
 }
+export default React.forwardRef(Input);

package/components/Form/Input/LegendInput/index.d.ts

@@ -1,5 +1,16 @@
-/// <reference types="react" />
+import React from "react";
+import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
-export default function LegendInput({ legend, ...inputProps }: InputProps & {
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & {
     legend: string;
-}): JSX.Element;
+} & React.RefAttributes<TextInput>>;
+export default _default;

package/components/Form/Input/LegendInput/index.js

@@ -12,8 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import Input, { InputRenderRightContainer } from "../BaseInput";
 import Text from "../../../Text";
-export default function LegendInput(_a) {
+function LegendInput(_a, ref) {
     var { legend } = _a, inputProps = __rest(_a, ["legend"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
             React.createElement(Text, { color: "neutral.c70", variant: "body" }, legend)) })));
 }
+export default React.forwardRef(LegendInput);

package/components/Form/Input/NumberInput/index.d.ts

@@ -1,7 +1,18 @@
-/// <reference types="react" />
+import React from "react";
+import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
-export default function NumberInput({ onPercentClick, max, value, disabled, ...inputProps }: InputProps<number | undefined> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: number | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    onChange?: ((value: number | undefined) => void) | undefined;
+    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    serialize?: ((value: number | undefined) => string) | undefined;
+    deserialize?: ((value: string) => number | undefined) | undefined;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & {
     onPercentClick: (percent: number) => void;
-    min?: number;
-    max?: number;
-}): JSX.Element;
+    min?: number | undefined;
+    max?: number | undefined;
+} & React.RefAttributes<TextInput>>;
+export default _default;

package/components/Form/Input/NumberInput/index.js

@@ -38,9 +38,9 @@ function deserialize(value) {
         return undefined;
     }
 }
-export default function NumberInput(_a) {
+function NumberInput(_a, ref) {
     var { onPercentClick, max, value, disabled } = _a, inputProps = __rest(_a, ["onPercentClick", "max", "value", "disabled"]);
-    return (React.createElement(Input, Object.assign({ serialize: serialize, deserialize: deserialize }, inputProps, { value: value, disabled: disabled, keyboardType: "numeric", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px", flexDirection: "row" }, [0.25, 0.5, 0.75, 1].map((percent) => {
+    return (React.createElement(Input, Object.assign({ ref: ref, serialize: serialize, deserialize: deserialize }, inputProps, { value: value, disabled: disabled, keyboardType: "numeric", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px", flexDirection: "row" }, [0.25, 0.5, 0.75, 1].map((percent) => {
             const active = !!value && !!max && Number(value) === percent * Number(max);
             return (React.createElement(PercentButton, { key: percent, onPress: () => onPercentClick(percent), active: active, disabled: disabled },
                 React.createElement(Text, { variant: "small", color: active ? "neutral.c00" : "neutral.c70" },
@@ -48,3 +48,4 @@ export default function NumberInput(_a) {
                     "%")));
         })) })));
 }
+export default React.forwardRef(NumberInput);

package/components/Form/Input/QrCodeInput/index.d.ts

@@ -1,6 +1,17 @@
-/// <reference types="react" />
+import React from "react";
+import { TextInput } from "react-native";
 import { GestureResponderEvent } from "react-native";
 import { InputProps } from "../BaseInput";
-export default function QrCodeInput({ onQrCodeClick, ...inputProps }: InputProps & {
-    onQrCodeClick?: (event: GestureResponderEvent) => void;
-}): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & {
+    onQrCodeClick?: ((event: GestureResponderEvent) => void) | undefined;
+} & React.RefAttributes<TextInput>>;
+export default _default;

package/components/Form/Input/QrCodeInput/index.js

@@ -28,9 +28,10 @@ const QrCodeButton = styled(TouchableOpacity) `
 const Icon = styled(QrCodeMedium).attrs((p) => ({
     color: p.theme.colors.neutral.c00,
 })) ``;
-export default function QrCodeInput(_a) {
+function QrCodeInput(_a, ref) {
     var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
             React.createElement(QrCodeButton, { onPress: onQrCodeClick },
                 React.createElement(Icon, { size: "20px" }))) })));
 }
+export default React.forwardRef(QrCodeInput);

package/components/Form/Input/SearchInput/index.d.ts

@@ -1,3 +1,14 @@
-/// <reference types="react" />
+import React from "react";
+import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
-export default function SearchInput(props: InputProps): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & React.RefAttributes<TextInput>>;
+export default _default;

package/components/Form/Input/SearchInput/index.js

@@ -5,7 +5,8 @@ import SearchMedium from "@ledgerhq/icons-ui/native/SearchMedium";
 const Icon = styled(SearchMedium).attrs((p) => ({
     color: p.theme.colors.neutral.c70,
 })) ``;
-export default function SearchInput(props) {
-    return (React.createElement(Input, Object.assign({}, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
+function SearchInput(props, ref) {
+    return (React.createElement(Input, Object.assign({ ref: ref }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
             React.createElement(Icon, null)) })));
 }
+export default React.forwardRef(SearchInput);

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SliderProps } from "./index.native";
 declare const SliderScreen: (_props: SliderProps) => JSX.Element;
 export default SliderScreen;

package/components/Form/Slider/index.native.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type SliderProps = {
     step: number;
     min: number;

package/components/Form/Switch/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type SwitchProps = {
     checked: boolean;
     onChange?: (value: boolean) => void;

package/components/Form/Toggle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ButtonProps } from "../../cta/Button";
 declare type ToggleProps = {
     active?: boolean;

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

@@ -0,0 +1,11 @@
+import { BaseStyledProps } from "../../styled";
+export declare type BoxProps = BaseStyledProps;
+declare const Box: 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;
+}, never>;
+export default Box;

package/components/Layout/Box/index.js

@@ -0,0 +1,3 @@
+import baseStyled from "../../styled";
+const Box = baseStyled.View ``;
+export default Box;

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

@@ -1,13 +1,12 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { BackgroundProps, ColorProps, FlexboxProps, LayoutProps, SpaceProps } from "styled-system";
-export interface Props extends ColorProps, BackgroundProps, LayoutProps, FlexboxProps, SpaceProps {
-    alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
-    flexBasis?: string;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-    children?: React.ReactNode;
-    style?: Record<string, unknown>;
-}
-declare const FlexBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, Props, never>;
+import { BaseStyledProps } from "../../styled";
+export declare type FlexBoxProps = BaseStyledProps;
+export declare type Props = FlexBoxProps;
+declare const FlexBox: 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;
+}, never>;
 export default FlexBox;

package/components/Layout/Flex/index.js

@@ -1,11 +1,5 @@
-import styled from "styled-components/native";
-import { background, color, flexbox, layout, space, } from "styled-system";
-const FlexBox = styled.View `
+import baseStyled from "../../styled";
+const FlexBox = baseStyled.View `
   display: flex;
-  ${flexbox};
-  ${space};
-  ${background};
-  ${color};
-  ${layout};
 `;
 export default FlexBox;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Animated from "react-native-reanimated";
 export declare type HeaderProps = {
     TopLeftSection?: JSX.Element;

package/components/Layout/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";

package/components/Layout/index.js

@@ -1,5 +1,6 @@
 export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";

package/components/Navigation/SlideIndicator/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import styled from "styled-components/native";
-import Animated, { useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
+import Animated, { useDerivedValue, useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
 const Container = styled.View `
   flex-direction: row;
   align-items: center;
@@ -8,14 +8,18 @@ const Container = styled.View `
   height: 6px;
   position: relative;
 `;
-const Bullet = styled.TouchableOpacity `
+const bulletStyle = `
   width: 6px;
   height: 6px;
   border-radius: 6px;
   margin: 0 6px;
+`;
+const Bullet = styled.TouchableOpacity `
+  ${bulletStyle}
   background-color: ${(p) => p.theme.colors.neutral.c40};
 `;
-const ActiveBullet = styled(Bullet) `
+const ActiveBullet = styled.View.attrs({ pointerEvents: "none" }) `
+  ${bulletStyle}
   background-color: ${(p) => p.theme.colors.neutral.c100};
   position: absolute;
   top: 0;
@@ -28,10 +32,13 @@ const config = {
 };
 function SlideIndicator({ slidesLength, activeIndex = 0, onChange, }) {
     const slidesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
-    const activeSize = useMemo(() => (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
-        12, [activeIndex, slidesLength]);
+    const activeSize = useDerivedValue(() => {
+        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
+            12;
+        return size;
+    }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({
-        width: withTiming(activeSize, config),
+        width: withTiming(activeSize.value, config),
     }));
     return (React.createElement(Container, null,
         slidesArray.map((_, index) => (React.createElement(Bullet, { key: index, onPress: () => onChange(index) }))),

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

@@ -6,7 +6,14 @@ export declare type ToggleGroupProps = {
     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 & {
+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">;

package/components/chart/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Item } from "./types";
 export declare type ChartProps = {
     data: Array<Item>;

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

@@ -1,8 +1,8 @@
 /// <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;
@@ -17,19 +17,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

@@ -9,11 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useCallback, useState } 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 { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";
+import baseStyled from "../../styled";
 const IconContainer = styled.View `
   ${(p) => p.iconButton
     ? ""
@@ -21,12 +21,11 @@ const IconContainer = styled.View `
         ? `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 +35,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;` : "")}
 `;
@@ -69,12 +68,12 @@ const ButtonContainer = (props) => {
         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 +87,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/index.d.ts

@@ -8,3 +8,4 @@ export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";

package/components/index.js

@@ -8,3 +8,4 @@ export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type AlertType = "info" | "warning" | "error";
 export interface AlertProps {
     type?: AlertType;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "@ledgerhq/icons-ui": "^0.2.0",
     "@ledgerhq/ui-shared": "^0.1.3",
     "@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/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,