@ledgerhq/native-ui 0.1.0 → 0.4.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>
@@ -121,6 +121,8 @@ npx react-native link
 
 ## Minimal Working Example
 
+[🌍 Hosted here.](https://snack.expo.dev/PG3RFRIAP)
+
 ### Expo
 
 ```js
@@ -131,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 }) {
@@ -161,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
@@ -188,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() {
@@ -203,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/index.d.ts

@@ -1,2 +1,2 @@
-export * as Icons from "./icons";
-export * as Logos from "./icons/logos";
+export * as Icons from "@ledgerhq/icons-ui/native";
+export * as Logos from "./logos";

package/assets/index.js

@@ -1,4 +1,4 @@
-import * as Icons_1 from "./icons";
+import * as Icons_1 from "@ledgerhq/icons-ui/native";
 export { Icons_1 as Icons };
-import * as Logos_1 from "./icons/logos";
+import * as Logos_1 from "./logos";
 export { Logos_1 as Logos };

package/assets/{icons/logos → logos}/LedgerLiveAltRegular.d.ts

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

package/assets/{icons/logos → logos}/LedgerLiveRegular.d.ts

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

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

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

package/components/Form/Checkbox/index.js

@@ -3,7 +3,7 @@ import { Pressable } from "react-native";
 import styled, { useTheme } from "styled-components/native";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
-import CheckAlone from "../../../assets/icons/CheckAloneMedium";
+import CheckAlone from "@ledgerhq/icons-ui/native/CheckAloneMedium";
 const Square = styled(Flex).attrs({
     justifyContent: "center",
     alignItems: "center",
@@ -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,41 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TextInputProps } from "react-native";
-declare type CommonProps = TextInputProps & {
+import { View, TextInputProps } 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"> & {
+    renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
+    renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
+    value: T;
+    onChange?: (value: T) => void;
+    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;
 };
-export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../../Layout/Flex").Props & {
+export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<typeof View, import("styled-components").DefaultTheme, import("../../../Layout/Flex").Props & {
     alignItems: string;
     flexDirection: string;
     pl: string;
 }, "pl" | "alignItems" | "flexDirection">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../../Layout/Flex").Props & {
+export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof View, import("styled-components").DefaultTheme, import("../../../Layout/Flex").Props & {
     alignItems: string;
     flexDirection: string;
     pr: string;
 }, "pr" | "alignItems" | "flexDirection">;
-export default function Input(props: InputProps): JSX.Element;
-export {};
+export default function Input<T = string>(props: InputProps<T>): JSX.Element;

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import { View } from "react-native";
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
@@ -18,38 +18,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%;
@@ -60,8 +60,8 @@ const BaseInput = styled.TextInput.attrs((p) => ({
   padding-left: 20px;
   padding-right: 20px;
 `;
-const InputErrorContainer = styled(Text).attrs(() => ({ type: "small3" })) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+const InputErrorContainer = styled(Text) `
+  color: ${(p) => p.theme.colors.error.c100};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
@@ -74,13 +74,21 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     flexDirection: "row",
     pr: "16px",
 })) ``;
+// 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, disabled, error, renderLeft, renderRight } = props, textInputProps = __rest(props, ["value", "disabled", "error", "renderLeft", "renderRight"]);
+    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"]);
+    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%" } },
         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({}, 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))));
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputProps } from "../BaseInput";
 export default function LegendInput({ legend, ...inputProps }: InputProps & {
     legend: string;

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

@@ -15,5 +15,5 @@ import Text from "../../../Text";
 export default function LegendInput(_a) {
     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)) })));
+            React.createElement(Text, { color: "neutral.c70", variant: "body" }, legend)) })));
 }

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

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { InputProps } from "../BaseInput";
-export default function NumberInput({ onPercentClick, max, value, disabled, ...inputProps }: InputProps & {
+export default function NumberInput({ onPercentClick, max, value, disabled, ...inputProps }: InputProps<number | undefined> & {
     onPercentClick: (percent: number) => void;
-    max: number;
+    min?: number;
+    max?: number;
 }): JSX.Element;

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,12 +27,23 @@ const PercentButton = styled(TouchableOpacity) `
   justify-content: center;
   align-items: center;
 `;
+function serialize(value) {
+    return value ? "" + value : "";
+}
+function deserialize(value) {
+    try {
+        return parseFloat(value);
+    }
+    catch (error) {
+        return undefined;
+    }
+}
 export default function NumberInput(_a) {
     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({ 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,
                     "%")));
         })) })));

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GestureResponderEvent } from "react-native";
 import { InputProps } from "../BaseInput";
 export default function QrCodeInput({ onQrCodeClick, ...inputProps }: InputProps & {

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

@@ -14,9 +14,9 @@ import { TouchableOpacity } from "react-native";
 import styled from "styled-components/native";
 import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
-import QrCodeMedium from "../../../../assets/icons/QrCodeMedium";
+import QrCodeMedium from "@ledgerhq/icons-ui/native/QrCodeMedium";
 const QrCodeButton = styled(TouchableOpacity) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,7 +26,7 @@ const QrCodeButton = styled(TouchableOpacity) `
   border-width: 0;
 `;
 const Icon = styled(QrCodeMedium).attrs((p) => ({
-    color: p.theme.colors.palette.neutral.c00,
+    color: p.theme.colors.neutral.c00,
 })) ``;
 export default function QrCodeInput(_a) {
     var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { InputProps } from "../BaseInput";
 export default function SearchInput(props: InputProps): JSX.Element;

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

@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
-import SearchMedium from "../../../../assets/icons/SearchMedium";
+import SearchMedium from "@ledgerhq/icons-ui/native/SearchMedium";
 const Icon = styled(SearchMedium).attrs((p) => ({
-    color: p.theme.colors.palette.neutral.c70,
+    color: p.theme.colors.neutral.c70,
 })) ``;
 export default function SearchInput(props) {
     return (React.createElement(Input, Object.assign({}, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,

package/components/Form/SelectableList.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { GestureResponderEvent } from "react-native";
+export declare type ElementProps<V> = React.PropsWithChildren<{
+    first?: boolean;
+    selected?: boolean;
+    value?: V;
+    onPress?: ((event: GestureResponderEvent) => void) | undefined;
+}>;
+export declare type Props<V> = React.PropsWithChildren<{
+    currentValue?: V;
+    onChange: (newValue: V) => void;
+}>;
+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;
+}
+export default SelectableList;

package/components/Form/SelectableList.js

@@ -0,0 +1,32 @@
+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 SelectableList({ currentValue, onChange, children }) {
+    return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child))
+            return null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const casted = child;
+        return React.cloneElement(casted, {
+            first: index === 0,
+            onPress: () => onChange(casted === null || casted === void 0 ? void 0 : casted.props.value),
+            selected: (casted === null || casted === void 0 ? void 0 : casted.props.value) === currentValue,
+        });
+    })));
+}
+SelectableList.Element = Element;
+export default SelectableList;

package/components/Form/Slider/components.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
 import Text from "../../Text";
-import ArrowsHMedium from "../../../assets/icons/ArrowsHMedium";
+import { ArrowsHMedium } from "@ledgerhq/icons-ui/native";
 export const MinMaxTextContainer = styled.View `
   flex-direction: row;
   justify-content: space-between;
@@ -17,19 +17,19 @@ export const RailSelected = styled.View `
   margin-left: -5px;
   margin-right: -5px;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c40};
+  background-color: ${(p) => p.theme.colors.primary.c40};
   border-radius: 30px;
 `;
 export const Rail = styled.View `
   flex: 1;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c30};
+  background-color: ${(p) => p.theme.colors.neutral.c30};
   border-radius: 30px;
 `;
 const ThumbContainer = styled.View `
   height: 40px;
   width: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c90};
+  background-color: ${(p) => p.theme.colors.primary.c90};
   border-radius: 40px;
   display: flex;
   align-items: center;
@@ -38,7 +38,7 @@ const ThumbContainer = styled.View `
 export const Thumb = () => {
     const { colors } = useTheme();
     return (React.createElement(ThumbContainer, null,
-        React.createElement(ArrowsHMedium, { color: colors.palette.neutral.c00, size: 24 })));
+        React.createElement(ArrowsHMedium, { color: colors.neutral.c00, size: 24 })));
 };
 const LabelContainer = styled.View `
   display: flex;
@@ -46,10 +46,10 @@ const LabelContainer = styled.View `
   justify-content: center;
   align-items: center;
   padding: 3.5px 6px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c20};
+  background-color: ${(p) => p.theme.colors.primary.c20};
   border-radius: 4px;
 `;
 export const Label = ({ children }) => {
     return (React.createElement(LabelContainer, null,
-        React.createElement(Text, { type: "body", fontWeight: "semibold", color: "palette.primary.c90" }, children)));
+        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "primary.c90" }, children)));
 };

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

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

package/components/Form/Slider/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-const SliderScreen = () => {
+const SliderScreen = (_props) => {
     return React.createElement(React.Fragment, null);
 };
 export default SliderScreen;

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

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

package/components/Form/Slider/index.native.js

@@ -20,7 +20,7 @@ const Slider = ({ value, min, max, step, onChange, disabled }) => {
                 width: "100%",
             }, min: min, max: max, low: value, disabled: disabled, step: step, disableRange: true, floatingLabel: true, renderThumb: Thumb, renderRail: renderRail, renderRailSelected: renderRailSelected, renderLabel: renderLabel, renderNotch: renderNotch, onValueChanged: onChange }),
         React.createElement(MinMaxTextContainer, null,
-            React.createElement(Text, { type: "small", fontWeight: "medium", color: "palette.neutral.c70" }, min),
-            React.createElement(Text, { type: "small", fontWeight: "medium", color: "palette.neutral.c70" }, max))));
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, min),
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, max))));
 };
 export default Slider;

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

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

package/components/Form/Switch/index.js

@@ -7,9 +7,9 @@ const Switch = ({ checked, onChange, disabled, label, }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
         React.createElement(NativeSwitch, { trackColor: {
-                false: colors.palette.neutral.c50,
-                true: colors.palette.primary.c80,
-            }, thumbColor: colors.palette.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.palette.neutral.c50 }),
-        label ? (React.createElement(Text, { type: "body", color: checked ? colors.palette.primary.c90 : colors.palette.neutral.c100, style: { marginLeft: space[3] } }, label)) : null));
+                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));
 };
 export default Switch;

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

@@ -0,0 +1,9 @@
+/// <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 {};

package/components/Form/Toggle/index.js

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