@ledgerhq/native-ui 0.1.1 → 0.5.0

package/README.md

@@ -1,14 +1,16 @@
 # `@ledgerhq/native-ui`
 
-![build](https://github.com/LedgerHQ/ui/actions/workflows/native.yml/badge.svg)
+[![build](https://github.com/LedgerHQ/ui/actions/workflows/native.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/native.yml)
+[![npm](https://img.shields.io/npm/v/@ledgerhq/native-ui)](https://www.npmjs.com/package/@ledgerhq/native-ui)
+[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-native.vercel.app)
 
-#### Design and interface resources
+### Design and interface resources for React Native
 
-This package contains [React Native](https://reactnative.dev/) components and styles built on top of our design system and used internally at [Ledger](https://www.ledger.com/).
+#### This package contains [React Native](https://reactnative.dev/) components and styles built on top of our design system and used internally at [Ledger](https://www.ledger.com/).
 
 ## Reference
 
-[📚 The storybook is hosted here.](https://ledger-live-ui-native.vercel.app/)
+**[🔗 Storybook](https://ledger-live-ui-native.vercel.app/)**
 
 ## Installation
 
@@ -18,24 +20,22 @@ This package contains [React Native](https://reactnative.dev/) components and st
 npm i @ledgerhq/native-ui
 ```
 
-### Required Dependencies
+### Peer dependencies
 
-**Skip this step if your project is using Expo! ✨**
+_This library uses the following packages under the hood and relies on them being installed separately to avoid package duplication._
 
 ```sh
-npm i react react-native@^0.64.0 react-native-reanimated@~2.2.3 react-native-svg@^12.1.1
+npm i styled-components react-native-reanimated react-native-svg
 ```
 
-Then, follow the installation instructions for:
+### Additional setup
 
-- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation)
-- [react-native-svg](https://github.com/react-native-svg/react-native-svg#installation)
+**Skip this step if your project is managed by Expo.**
 
-### Recommended Dependencies
+Follow the installation instructions for:
 
-```sh
-npm i styled-components
-```
+- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation)
+- [react-native-svg](https://github.com/react-native-svg/react-native-svg#installation)
 
 ## Usage
 
@@ -62,7 +62,7 @@ import { Flex, Text } from "@ledgerhq/native-ui";
 function Hello() {
   return (
     <Flex flexDirection="column" alignItems="center">
-      <Text type="h1" color="palette.neutral.c100">
+      <Text variant="h1" color="neutral.c100">
         Hello, world!
       </Text>
     </Flex>
@@ -133,7 +133,7 @@ import { useFonts } from "expo-font";
 
 function Logo() {
   const theme = useTheme();
-  return <Logos.LedgerLiveRegular color={theme.colors.palette.neutral.c100} />;
+  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;
 }
 
 function FontProvider({ children }) {
@@ -163,10 +163,10 @@ export default function App() {
           justifyContent="center"
           alignItems="center"
           flexDirection="column"
-          backgroundColor="palette.neutral.c00"
+          backgroundColor="neutral.c00"
         >
           <Logo />
-          <Text type="h2" color="palette.neutral.c100" my={10}>
+          <Text variant="h2" color="neutral.c100" my={10}>
             Hello, world!
           </Text>
           <Switch
@@ -190,7 +190,7 @@ import { useTheme } from "styled-components/native";
 
 function Logo() {
   const theme = useTheme();
-  return <Logos.LedgerLiveRegular color={theme.colors.palette.neutral.c100} />;
+  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;
 }
 
 export default function App() {
@@ -205,10 +205,10 @@ export default function App() {
         justifyContent="center"
         alignItems="center"
         flexDirection="column"
-        backgroundColor="palette.neutral.c00"
+        backgroundColor="neutral.c00"
       >
         <Logo />
-        <Text type="h2" color="palette.neutral.c100" my={10}>
+        <Text variant="h2" color="neutral.c100" my={10}>
           Hello, world!
         </Text>
         <Switch

package/assets/icons.d.ts

@@ -0,0 +1 @@
+export * from "@ledgerhq/icons-ui/native";

package/assets/icons.js

@@ -0,0 +1 @@
+export * from "@ledgerhq/icons-ui/native";

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

@@ -11,16 +11,16 @@ const Square = styled(Flex).attrs({
   width: 18px;
   height: 18px;
   border-radius: 4px;
-  color: ${({ theme }) => theme.colors.palette.neutral.c00};
+  color: ${({ theme }) => theme.colors.neutral.c00};
   ${({ checked, theme }) => checked
-    ? `background-color: ${theme.colors.palette.primary.c90};`
-    : `border: 1px solid ${theme.colors.palette.neutral.c50};`}
+    ? `background-color: ${theme.colors.primary.c90};`
+    : `border: 1px solid ${theme.colors.neutral.c50};`}
 `;
 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" },
-            React.createElement(Square, { checked: checked }, checked ? (React.createElement(CheckAlone, { size: 13, color: colors.palette.neutral.c00 })) : null),
-            label ? (React.createElement(Text, { type: "body", color: checked ? colors.palette.primary.c90 : colors.palette.neutral.c100, style: { marginLeft: space[2] } }, label)) : null)));
+            React.createElement(Square, { checked: checked }, checked ? React.createElement(CheckAlone, { size: 13, color: colors.neutral.c00 }) : null),
+            label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[2] } }, label)) : null)));
 };
 export default Checkbox;

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

@@ -1,23 +1,119 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { View, TextInputProps } from "react-native";
-declare type CommonProps = TextInputProps & {
+import { TextInput, TextInputProps, StyleProp, ViewStyle } from "react-native";
+export declare type CommonProps = TextInputProps & {
     disabled?: boolean;
     error?: string;
 };
-export declare type InputProps = CommonProps & {
-    renderLeft?: ((props: CommonProps) => React.ReactNode) | React.ReactNode;
-    renderRight?: ((props: CommonProps) => React.ReactNode) | React.ReactNode;
+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;
+    /**
+     * 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.
+     *
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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(props: InputProps): JSX.Element;
-export {};
+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

@@ -9,8 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
-import { View } from "react-native";
+import React, { useMemo, useCallback } from "react";
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
 import FlexBox from "../../../Layout/Flex";
@@ -18,38 +17,38 @@ const InputContainer = styled.View `
   display: flex;
   flex-direction: row;
   width: 100%;
-  background: ${(p) => p.theme.colors.palette.neutral.c00};
+  background: ${(p) => p.theme.colors.neutral.c00};
   height: 48px;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 24px;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 
   ${(p) => p.disabled &&
     css `
-      color: ${p.theme.colors.palette.neutral.c60};
-      background: ${(p) => p.theme.colors.palette.neutral.c30};
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p) => p.theme.colors.neutral.c30};
     `};
 
   ${(p) => p.focus &&
     !p.error &&
     css `
-      border: 1px solid ${p.theme.colors.palette.primary.c80};
+      border: 1px solid ${p.theme.colors.primary.c80};
     `};
 
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.palette.error.c100};
+      border: 1px solid ${p.theme.colors.error.c100};
     `};
 
   ${(p) => p.disabled &&
     css `
-      color: ${p.theme.colors.palette.neutral.c60};
-      background: ${(p) => p.theme.colors.palette.neutral.c30};
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p) => p.theme.colors.neutral.c30};
     `};
 `;
 const BaseInput = styled.TextInput.attrs((p) => ({
-    selectionColor: p.theme.colors.palette.primary.c80,
+    selectionColor: p.theme.colors.primary.c80,
 })) `
   height: 100%;
   width: 100%;
@@ -61,7 +60,7 @@ const BaseInput = styled.TextInput.attrs((p) => ({
   padding-right: 20px;
 `;
 const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
@@ -74,13 +73,22 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     flexDirection: "row",
     pr: "16px",
 })) ``;
-export default function Input(props) {
-    const { value, disabled, error, renderLeft, renderRight } = props, textInputProps = __rest(props, ["value", "disabled", "error", "renderLeft", "renderRight"]);
+// 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 } = 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, { editable: !disabled, disabled: disabled, error: error, value: value, 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,
-            React.createElement(Text, { color: "palette.neutral.c70", type: "body" }, legend)) })));
+    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,6 +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 & {
+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;
-    max: number;
-}): JSX.Element;
+    min?: number | undefined;
+    max?: number | undefined;
+} & React.RefAttributes<TextInput>>;
+export default _default;

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

@@ -16,12 +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.palette.neutral.c00
-    : p.theme.colors.palette.neutral.c70};
-  background-color: ${(p) => p.active
-    ? p.theme.colors.palette.neutral.c100
-    : p.theme.colors.palette.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;
@@ -31,13 +27,25 @@ const PercentButton = styled(TouchableOpacity) `
   justify-content: center;
   align-items: center;
 `;
-export default function NumberInput(_a) {
+function serialize(value) {
+    return value ? "" + value : "";
+}
+function deserialize(value) {
+    try {
+        return parseFloat(value);
+    }
+    catch (error) {
+        return undefined;
+    }
+}
+function NumberInput(_a, ref) {
     var { onPercentClick, max, value, disabled } = _a, inputProps = __rest(_a, ["onPercentClick", "max", "value", "disabled"]);
-    return (React.createElement(Input, Object.assign({}, 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, { type: "small", color: active ? "palette.neutral.c00" : "palette.neutral.c70" },
+                React.createElement(Text, { variant: "small", color: active ? "neutral.c00" : "neutral.c70" },
                     percent * 100,
                     "%")));
         })) })));
 }
+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;