@ledgerhq/native-ui 0.22.2 → 0.22.3-nightly.0

package/lib/components/Form/Input/AnimatedInput/AnimatedNotchedLabel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { InputStatus } from ".";
+type AnimatedNotchedLabelProps = {
+    placeholder: string;
+    inputStatus: InputStatus;
+};
+export declare const AnimatedNotchedLabel: ({ placeholder, inputStatus }: AnimatedNotchedLabelProps) => React.JSX.Element;
+export {};

package/lib/components/Form/Input/AnimatedInput/AnimatedNotchedLabel.js

@@ -0,0 +1,77 @@
+import React from "react";
+import styled from "styled-components/native";
+import { Flex } from "../../../Layout";
+import { Text } from "react-native";
+import Animated, { useSharedValue, withTiming, useAnimatedStyle, useAnimatedReaction, Easing, } from "react-native-reanimated";
+import { inputTextColor, inputStatusColors, inputBackgroundColor } from "./inputTextColor";
+const labelPadding = 4;
+const labelInitialPositions = {
+    top: 20.5,
+    left: 16 - labelPadding,
+    fontSize: 16,
+};
+const labelFinalPositions = {
+    top: -7,
+    left: 16 - labelPadding,
+    fontSize: 12,
+};
+const LabelContainer = styled(Animated.View) `
+  position: absolute;
+  padding: ${`0 ${labelPadding}px`};
+  display: inline-block;
+  height: 15;
+  z-index: ${(p) => (p.notched ? 3 : 0)};
+`;
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const LabelText = styled(AnimatedText) `
+  display: inline-block;
+  height: 15;
+  line-height: 15;
+  vertical-align: top;
+  color: ${(p) => p.status === "default" ? inputTextColor[p.status] : inputStatusColors[p.status]};
+`;
+const LineCutout = styled(Flex) `
+  position: absolute;
+  height: 1;
+  top: 7;
+  left: 0;
+  width: 120%;
+  background: ${(p) => inputBackgroundColor[p.status]};
+`;
+export const AnimatedNotchedLabel = ({ placeholder, inputStatus }) => {
+    const notched = inputStatus !== "default";
+    const labelTop = useSharedValue(notched ? labelFinalPositions.top : labelInitialPositions.top);
+    const labelLeft = useSharedValue(notched ? labelFinalPositions.left : labelInitialPositions.left);
+    const fontSize = useSharedValue(notched ? labelFinalPositions.fontSize : labelInitialPositions.fontSize);
+    const labelStyle = useAnimatedStyle(() => {
+        return {
+            top: labelTop.value,
+            left: labelLeft.value,
+        };
+    });
+    const labelFontSize = useAnimatedStyle(() => {
+        return {
+            fontSize: fontSize.value,
+        };
+    });
+    useAnimatedReaction(() => notched, (isNotched) => {
+        const targetTop = isNotched ? labelFinalPositions.top : labelInitialPositions.top;
+        const targetLeft = isNotched ? labelFinalPositions.left : labelInitialPositions.left;
+        const targetSize = isNotched ? labelFinalPositions.fontSize : labelInitialPositions.fontSize;
+        labelTop.value = withTiming(targetTop, undefined, () => ({
+            duration: 200,
+            easing: Easing.inOut(Easing.quad),
+        }));
+        labelLeft.value = withTiming(targetLeft, undefined, () => ({
+            duration: 200,
+            easing: Easing.inOut(Easing.quad),
+        }));
+        fontSize.value = withTiming(targetSize, undefined, () => ({
+            duration: 100,
+            easing: Easing.inOut(Easing.quad),
+        }));
+    }, [notched]);
+    return (React.createElement(LabelContainer, { style: Object.assign(Object.assign({}, labelStyle), { elevation: notched ? 3 : 0 }), notched: notched },
+        notched && React.createElement(LineCutout, { status: inputStatus }),
+        React.createElement(LabelText, { style: Object.assign({}, labelFontSize), status: inputStatus }, placeholder)));
+};

package/lib/components/Form/Input/AnimatedInput/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type InputProps as BaseInputType } from "../BaseInput/index";
+import { StyleProp, ViewStyle } from "react-native";
+export type InputStatus = "default" | "focused" | "filled" | "error";
+export interface AnimatedInputProps extends BaseInputType {
+    style?: StyleProp<ViewStyle>;
+}
+declare const _default: React.ForwardRefExoticComponent<AnimatedInputProps & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/Form/Input/AnimatedInput/index.js

@@ -0,0 +1,52 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import { BaseInput } from "..";
+import styled, { useTheme } from "styled-components/native";
+import { View } from "react-native";
+import { inputTextColor, inputStatusColors, getInputStatus } from "./inputTextColor";
+import { useAnimatedInputFocus } from "./useAnimatedInputFocus";
+import { AnimatedNotchedLabel } from "./AnimatedNotchedLabel";
+const InputContainer = styled(View) `
+  position: relative;
+  box-sizing: border-box;
+  height: fit-content;
+`;
+const AnimatedInput = (_a) => {
+    var { style = { width: "100%" } } = _a, textInputProps = __rest(_a, ["style"]);
+    const { placeholder, onFocus: onFocusCallback, onBlur: onBlurCallback, error, value } = textInputProps, rest = __rest(textInputProps, ["placeholder", "onFocus", "onBlur", "error", "value"]);
+    const theme = useTheme();
+    const { onFocus, onBlur, focused } = useAnimatedInputFocus({
+        onFocusCallback,
+        onBlurCallback,
+    });
+    const inputStatus = getInputStatus({ focused, hasError: !!error, hasValue: !!value });
+    const displayClearCross = inputStatus === "error" || inputStatus === "focused";
+    return (React.createElement(InputContainer, { status: inputStatus, style: style },
+        placeholder && React.createElement(AnimatedNotchedLabel, { placeholder: placeholder, inputStatus: inputStatus }),
+        React.createElement(BaseInput, Object.assign({ onFocus: onFocus, onBlur: onBlur, error: error, value: value, containerStyle: {
+                height: "100%",
+            }, color: theme ? inputTextColor[inputStatus]({ theme }) : "neutral.c100", inputContainerStyle: {
+                backgroundColor: "none",
+                borderColor: theme ? inputStatusColors[inputStatus]({ theme }) : "neutral.c100",
+                borderRadius: 8,
+                height: inputStatus !== "error" ? 56 : 48,
+            }, baseInputContainerStyle: {
+                paddingTop: 15,
+                paddingBottom: 15,
+                paddingLeft: 14,
+                paddingRight: displayClearCross ? 8 : 14,
+            }, inputErrorContainerStyles: {
+                marginTop: 8,
+            }, inputErrorColor: theme ? inputStatusColors[inputStatus]({ theme }) : "neutral.c100", showErrorIcon: true }, rest))));
+};
+export default forwardRef(AnimatedInput);

package/lib/components/Form/Input/AnimatedInput/inputTextColor.d.ts

@@ -0,0 +1,29 @@
+import { Theme } from "src/styles/theme";
+export type CbThemeType = {
+    theme: Theme;
+};
+export declare const inputStatusColors: {
+    default: ({ theme }: CbThemeType) => string;
+    focused: ({ theme }: CbThemeType) => string;
+    filled: ({ theme }: CbThemeType) => string;
+    error: ({ theme }: CbThemeType) => string;
+};
+export declare const inputTextColor: {
+    default: ({ theme }: CbThemeType) => string;
+    focused: ({ theme }: CbThemeType) => string;
+    filled: ({ theme }: CbThemeType) => string;
+    error: ({ theme }: CbThemeType) => string;
+};
+export declare const inputBackgroundColor: {
+    default: ({ theme }: CbThemeType) => string;
+    focused: ({ theme }: CbThemeType) => string;
+    filled: ({ theme }: CbThemeType) => string;
+    error: ({ theme }: CbThemeType) => string;
+};
+type getInputStatusProps = {
+    focused?: boolean;
+    hasValue?: boolean;
+    hasError?: boolean;
+};
+export declare const getInputStatus: ({ focused, hasValue, hasError }: getInputStatusProps) => "error" | "default" | "focused" | "filled";
+export {};

package/lib/components/Form/Input/AnimatedInput/inputTextColor.js

@@ -0,0 +1,27 @@
+export const inputStatusColors = {
+    default: ({ theme }) => theme.colors.opacityDefault.c50,
+    focused: ({ theme }) => theme.colors.primary.c80,
+    filled: ({ theme }) => theme.colors.neutral.c60,
+    error: ({ theme }) => theme.colors.error.c50,
+};
+export const inputTextColor = {
+    default: ({ theme }) => theme.colors.opacityDefault.c70,
+    focused: ({ theme }) => theme.colors.neutral.c100,
+    filled: ({ theme }) => theme.colors.neutral.c100,
+    error: ({ theme }) => theme.colors.neutral.c100,
+};
+export const inputBackgroundColor = {
+    default: ({ theme }) => theme.colors.background.main,
+    focused: ({ theme }) => theme.colors.background.main,
+    filled: ({ theme }) => theme.colors.background.main,
+    error: ({ theme }) => theme.colors.background.main,
+};
+export const getInputStatus = ({ focused, hasValue, hasError }) => {
+    if (hasError)
+        return "error";
+    if (focused)
+        return "focused";
+    if (hasValue)
+        return "filled";
+    return "default";
+};

package/lib/components/Form/Input/AnimatedInput/useAnimatedInputFocus.d.ts

@@ -0,0 +1,11 @@
+import { NativeSyntheticEvent, TextInputFocusEventData } from "react-native";
+type useAnimatedInputFocusProps = {
+    onFocusCallback?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => TextInputFocusEventData | void;
+    onBlurCallback?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => TextInputFocusEventData | void;
+};
+export declare const useAnimatedInputFocus: ({ onFocusCallback, onBlurCallback, }: useAnimatedInputFocusProps) => {
+    onFocus: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    onBlur: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    focused: boolean;
+};
+export {};

package/lib/components/Form/Input/AnimatedInput/useAnimatedInputFocus.js

@@ -0,0 +1,13 @@
+import { useState } from "react";
+export const useAnimatedInputFocus = ({ onFocusCallback, onBlurCallback, }) => {
+    const [focused, setFocused] = useState(false);
+    const onFocus = (e) => {
+        setFocused(true);
+        onFocusCallback && onFocusCallback(e);
+    };
+    const onBlur = (e) => {
+        setFocused(false);
+        onBlurCallback && onBlurCallback(e);
+    };
+    return { onFocus, onBlur, focused };
+};

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

@@ -1,6 +1,6 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TextInput, TextInputProps, StyleProp, ViewStyle } from "react-native";
+import { TextInput, TextInputProps, StyleProp, ViewStyle, TextStyle } from "react-native";
 export type CommonProps = TextInputProps & {
     disabled?: boolean;
     error?: string;
@@ -13,11 +13,15 @@ export type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
     /**
      * A function that will render some content on the left side of the input.
      */
-    renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
+    renderLeft?: ((props: InputProps<T>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => 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;
+    renderRight?: ((props: InputProps<T>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => React.ReactNode) | React.ReactNode;
     /**
      * Triggered when the input value is updated.
      */
@@ -46,6 +50,24 @@ export type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
      * Additional style for the container element.
      */
     containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Additional style for the input container element.
+     */
+    inputContainerStyle?: StyleProp<ViewStyle> & TextStyle;
+    /**
+     * Additional style for the baseInput container element.
+     */
+    baseInputContainerStyle?: TextStyle;
+    /**
+     * Additional style for the error container element.
+     */
+    inputErrorContainerStyles?: StyleProp<ViewStyle>;
+    inputErrorColor?: string;
+    showErrorIcon?: boolean;
+    /**
+     * Optional text color parameter.
+     */
+    color?: string;
 };
 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;
@@ -57,7 +79,7 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
 } & {
     alignItems: string;
     flexDirection: string;
-    pl: string;
+    pl: number;
 }, "alignItems" | "flexDirection" | "pl">;
 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;
@@ -69,7 +91,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
 } & {
     alignItems: string;
     flexDirection: string;
-    pr: string;
+    pr: number;
 }, "alignItems" | "flexDirection" | "pr">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
@@ -80,11 +102,15 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**
      * A function that will render some content on the left side of the input.
      */
-    renderLeft?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
+    renderLeft?: React.ReactNode | ((props: InputProps<T>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => React.ReactNode);
     /**
      * A function that will render some content on the right side of the input.
      */
-    renderRight?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<T>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => React.ReactNode);
     /**
      * Triggered when the input value is updated.
      */
@@ -113,6 +139,24 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
      * Additional style for the container element.
      */
     containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Additional style for the input container element.
+     */
+    inputContainerStyle?: (StyleProp<ViewStyle> & TextStyle) | undefined;
+    /**
+     * Additional style for the baseInput container element.
+     */
+    baseInputContainerStyle?: TextStyle | undefined;
+    /**
+     * Additional style for the error container element.
+     */
+    inputErrorContainerStyles?: StyleProp<ViewStyle>;
+    inputErrorColor?: string | undefined;
+    showErrorIcon?: boolean | undefined;
+    /**
+     * Optional text color parameter.
+     */
+    color?: string | undefined;
 } & {
     ref?: React.ForwardedRef<TextInput> | undefined;
 }) => ReturnType<typeof Input>;

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

@@ -13,6 +13,7 @@ import React, { useMemo, useCallback, useEffect, useImperativeHandle, useRef } f
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
 import FlexBox from "../../../Layout/Flex";
+import { DeleteCircleFill } from "@ledgerhq/icons-ui/native";
 const InputContainer = styled.View `
   display: flex;
   flex-direction: row;
@@ -56,30 +57,26 @@ const BaseInput = styled.TextInput.attrs((p) => ({
   width: 100%;
   border: 0;
   flex-shrink: 1;
-  padding-top: 14px;
-  padding-bottom: 14px;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding: 14px 20px;
 `;
-const InputErrorContainer = styled(Text) `
+const InputErrorText = styled(Text) `
   color: ${(p) => p.theme.colors.error.c50};
-  margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     flexDirection: "row",
-    pl: "16px",
+    pl: 16,
 })) ``;
 export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     flexDirection: "row",
-    pr: "16px",
+    pr: 16,
 })) ``;
 // 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 = (_) => _;
 function Input(props, ref) {
-    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle, autoFocus, onFocus, onBlur } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle", "autoFocus", "onFocus", "onBlur"]);
+    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle, inputContainerStyle, baseInputContainerStyle, inputErrorContainerStyles, autoFocus, onFocus, onBlur, color, inputErrorColor = "error.c50", showErrorIcon = false } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle", "inputContainerStyle", "baseInputContainerStyle", "inputErrorContainerStyles", "autoFocus", "onFocus", "onBlur", "color", "inputErrorColor", "showErrorIcon"]);
     const inputRef = useRef();
     useImperativeHandle(ref, () => inputRef.current, [inputRef]);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
@@ -93,16 +90,18 @@ function Input(props, ref) {
     }, [inputRef, autoFocus]);
     const [focus, setFocus] = React.useState(false);
     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(InputContainer, { disabled: disabled, focus: focus, error: error, style: inputContainerStyle },
+            typeof renderLeft === "function" ? renderLeft(props, inputRef) : renderLeft,
             React.createElement(BaseInput, Object.assign({ ref: inputRef }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: (e) => {
                     setFocus(true);
                     typeof onFocus === "function" && onFocus(e);
                 }, onBlur: (e) => {
                     setFocus(false);
                     typeof onBlur === "function" && onBlur(e);
-                } })),
-            typeof renderRight === "function" ? renderRight(props) : renderRight),
-        !!error && !disabled && React.createElement(InputErrorContainer, null, error)));
+                }, style: Object.assign(Object.assign({}, (color ? { color: color } : {})), baseInputContainerStyle) })),
+            typeof renderRight === "function" ? renderRight(props, inputRef) : renderRight),
+        !!error && !disabled && (React.createElement(FlexBox, { flexDirection: "row", alignItems: "center", style: inputErrorContainerStyles || { paddingLeft: "12px" } },
+            showErrorIcon && React.createElement(DeleteCircleFill, { color: inputErrorColor, size: "S" }),
+            React.createElement(InputErrorText, { color: inputErrorColor, variant: "small", ml: 2 }, error)))));
 }
 export default React.forwardRef(Input);

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

@@ -3,13 +3,23 @@ import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
 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);
+    renderLeft?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => 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>;
+    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
+    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
+    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    inputErrorColor?: string | undefined;
+    showErrorIcon?: boolean | undefined;
+    color?: string | undefined;
 } & {
     legend: string;
 } & React.RefAttributes<TextInput>>;

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

@@ -3,13 +3,23 @@ import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
 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);
+    renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<number | undefined>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => 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>;
+    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
+    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
+    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    inputErrorColor?: string | undefined;
+    showErrorIcon?: boolean | undefined;
+    color?: string | undefined;
 } & {
     onPercentClick: (percent: number) => void;
     min?: number | undefined;

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

@@ -4,13 +4,23 @@ import { GestureResponderEvent } from "react-native";
 import { InputProps } from "../BaseInput";
 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);
+    renderLeft?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => 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>;
+    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
+    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
+    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    inputErrorColor?: string | undefined;
+    showErrorIcon?: boolean | undefined;
+    color?: string | undefined;
 } & {
     onQrCodeClick?: ((event: GestureResponderEvent) => void) | undefined;
 } & React.RefAttributes<TextInput>>;

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

@@ -3,12 +3,22 @@ import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
 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);
+    renderLeft?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
+        clear: () => void;
+    }>) => 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>;
+    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
+    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
+    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    inputErrorColor?: string | undefined;
+    showErrorIcon?: boolean | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<TextInput>>;
 export default _default;

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

@@ -4,3 +4,4 @@ export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";
 export { default as SearchInput } from "./SearchInput";
 export { default as SquaredSearchBar } from "./SquaredSearchBar";
+export { default as AnimatedInput } from "./AnimatedInput";

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

@@ -4,3 +4,4 @@ export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";
 export { default as SearchInput } from "./SearchInput";
 export { default as SquaredSearchBar } from "./SquaredSearchBar";
+export { default as AnimatedInput } from "./AnimatedInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.22.2",
+  "version": "0.22.3-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.6.1",
+    "@ledgerhq/crypto-icons-ui": "^0.6.2-nightly.0",
     "@ledgerhq/icons-ui": "^0.6.2",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
@@ -72,20 +72,19 @@
     "@react-native-community/cli-server-api": "^7.0.3",
     "@react-native-community/datetimepicker": "6.7.5",
     "@react-native-community/slider": "^4.4.2",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-controls": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-ondevice-actions": "6.5.6",
-    "@storybook/addon-ondevice-backgrounds": "6.5.6",
-    "@storybook/addon-ondevice-controls": "6.5.6",
-    "@storybook/addon-ondevice-notes": "6.5.6",
-    "@storybook/addon-react-native-web": "^0.0.19",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/docs-tools": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.16",
-    "@storybook/react-native": "6.5.6",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-controls": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-ondevice-actions": "6.5.7",
+    "@storybook/addon-ondevice-backgrounds": "6.5.7",
+    "@storybook/addon-ondevice-controls": "6.5.7",
+    "@storybook/addon-ondevice-notes": "6.5.7",
+    "@storybook/addon-react-native-web": "^0.0.21",
+    "@storybook/docs-tools": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-native": "6.5.7",
+    "@storybook/react-webpack5": "^7.5.3",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
@@ -108,6 +107,7 @@
     "csstype": "^3.0.11",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "expo": "^49.0.7",
     "expo-asset": "8.10.1",
     "expo-constants": "^14.4.2",
@@ -136,6 +136,7 @@
     "react-native-web": "~0.19.6",
     "regenerator-runtime": "^0.14.0",
     "rimraf": "^4.4.1",
+    "storybook": "^7.5.3",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^13.0.0",
@@ -151,7 +152,7 @@
     "android": "expo start --android",
     "build": "tsc -p tsconfig.prod.json && node scripts/postBuild",
     "prebuild:storybook": "pnpm -F ui-shared -F icons-ui -F crypto-icons-ui build",
-    "build:storybook": "pnpm build-storybook -c .storybook-web -o web-build",
+    "build:storybook": "storybook build -c .storybook-web -o web-build",
     "watch": "tsc -p tsconfig.prod.json --watch",
     "clean": "rimraf lib",
     "eject": "expo eject",
@@ -161,7 +162,7 @@
     "lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}'",
     "release": "yarn publish ./lib --access public",
     "expo-start": "expo start",
-    "storybook": "start-storybook  -c .storybook-web -p 6006",
+    "storybook": "storybook dev  -c .storybook-web -p 6006",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "exit 0",
     "web": "expo start --web",