@ledgerhq/native-ui 0.4.0 → 0.6.2

package/README.md

@@ -211,10 +211,7 @@ export default function App() {
         <Text variant="h2" color="neutral.c100" my={10}>
           Hello, world!
         </Text>
-        <Switch
-          checked={isLight}
-          onChange={() => setPalette(() => (isLight ? "dark" : "light"))}
-        />
+        <Switch checked={isLight} onChange={() => setPalette(() => (isLight ? "dark" : "light"))} />
       </Flex>
     </StyleProvider>
   );

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,74 @@
+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 = typeof index !== "undefined" ? (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;
+declare const Checkbox: ({ checked, onChange, disabled, label }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/components/Form/Checkbox/index.js

@@ -16,7 +16,7 @@ const Square = styled(Flex).attrs({
     ? `background-color: ${theme.colors.primary.c90};`
     : `border: 1px solid ${theme.colors.neutral.c50};`}
 `;
-const Checkbox = ({ checked, onChange, disabled, label, }) => {
+const Checkbox = ({ checked, onChange, disabled, label }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Pressable, { onPress: onChange, disabled: disabled },
         React.createElement(Flex, { flexDirection: "row", alignItems: "center" },

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))));
+        !!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

@@ -16,8 +16,8 @@ import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const PercentButton = styled(TouchableOpacity) `
-  color: ${(p) => p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70};
-  background-color: ${(p) => p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
   border-radius: 100px;
   border-width: 0;
   height: 31px;
@@ -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/SelectableList.d.ts

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { ComponentType } from "react";
 import { GestureResponderEvent } from "react-native";
-export declare type ElementProps<V> = React.PropsWithChildren<{
+import { IconType } from "../Icon/type";
+declare type BaseElementProps<V> = {
     first?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     value?: V;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
+    Icon?: IconType;
+};
+export declare type ElementProps<V> = React.PropsWithChildren<BaseElementProps<V> & {
+    /**
+     * A function that will render some content on the right side of the input.
+     */
+    renderRight?: ComponentType<BaseElementProps<V>> | React.ReactElement;
 }>;
 export declare type Props<V> = React.PropsWithChildren<{
     currentValue?: V;
@@ -12,6 +21,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>(props: ElementProps<V>) => JSX.Element;
 }
 export default SelectableList;

package/components/Form/SelectableList.js

@@ -1,19 +1,20 @@
 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(props) {
+    const { first, value, selected, disabled, onPress, children, Icon, renderRight: RenderRight, } = props;
+    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, flexShrink: 0 },
+                React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }))),
+            React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : "neutral.c100" }, children || value),
+            RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? RenderRight : React.createElement(RenderRight, Object.assign({}, props)))))));
 }
 function SelectableList({ currentValue, onChange, children }) {
     return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {

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/Slider/index.native.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import styled from "styled-components/native";
 import RnRangeSlider from "rn-range-slider";
 import Text from "../../Text";
-import { Label, MinMaxTextContainer, Notch, Rail, RailSelected, Thumb, } from "./components";
+import { Label, MinMaxTextContainer, Notch, Rail, RailSelected, Thumb } from "./components";
 const SliderContainer = styled.View `
   display: flex;
   flex-direction: column;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 declare type SwitchProps = {
     checked: boolean;
     onChange?: (value: boolean) => void;
     disabled?: boolean;
     label?: string;
 };
-declare const Switch: ({ checked, onChange, disabled, label, }: SwitchProps) => JSX.Element;
+declare const Switch: ({ checked, onChange, disabled, label }: SwitchProps) => JSX.Element;
 export default Switch;

package/components/Form/Switch/index.js

@@ -3,13 +3,13 @@ import { Switch as NativeSwitch } from "react-native";
 import { useTheme } from "styled-components/native";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
-const Switch = ({ checked, onChange, disabled, label, }) => {
+const Switch = ({ checked, onChange, disabled, label }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
         React.createElement(NativeSwitch, { trackColor: {
                 false: colors.neutral.c50,
                 true: colors.primary.c80,
             }, thumbColor: colors.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.neutral.c50 }),
-        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[3] } }, label)) : null));
+        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[3], flexShrink: 1 } }, label)) : null));
 };
 export default Switch;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import type { ButtonProps } from "../../cta/Button";
 declare type ToggleProps = {
     active?: boolean;
     onPress: () => void;
     children: ButtonProps["children"];
 };
-export default function Toggle({ active, children, onPress, }: ToggleProps): JSX.Element;
+export default function Toggle({ active, children, onPress }: ToggleProps): JSX.Element;
 export {};

package/components/Form/Toggle/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import Button from "../../cta/Button";
-export default function Toggle({ active = false, children, onPress, }) {
+export default function Toggle({ active = false, children, onPress }) {
     return (React.createElement(TouchableOpacity, { onPress: onPress },
         React.createElement(Button, { disabled: !active, type: "main" }, children)));
 }

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";