@ledgerhq/native-ui 0.1.0 → 0.4.0

package/components/Form/index.d.ts

@@ -2,3 +2,4 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as SelectableList } from "./SelectableList";

package/components/Form/index.js

@@ -2,3 +2,4 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as SelectableList } from "./SelectableList";

package/components/Icon/IconBox/index.js

@@ -9,11 +9,11 @@ const IconContainer = styled.View `
   align-items: center;
   justify-content: center;
   border-width: 1px;
-  border-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  border-color: ${(p) => p.theme.colors.neutral.c40};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
 export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, }) {
     const { colors } = useTheme();
     return (React.createElement(IconContainer, { size: boxSize },
-        React.createElement(Icon, { size: iconSize, color: color || colors.palette.neutral.c100 })));
+        React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 })));
 }

package/components/Layout/Collapse/Accordion/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { LinkProps } from "../../../cta/Link";
+declare type AccordionProps = {
+    collapsed?: boolean;
+    children: React.ReactNode;
+    title: string;
+    onPress: LinkProps["onPress"];
+};
+declare const Accordion: ({ collapsed, children, title, onPress, }: AccordionProps) => React.ReactElement;
+export default Accordion;

package/components/Layout/Collapse/Accordion/index.js

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from "react-native-reanimated";
+import Link from "../../../cta/Link";
+import { ChevronBottomMedium, ChevronTopMedium, } from "@ledgerhq/icons-ui/native";
+import { View } from "react-native";
+const Accordion = ({ collapsed = false, children, title, onPress, }) => {
+    const animationHeight = useSharedValue(collapsed ? "0%" : "100%");
+    const config = {
+        duration: 500,
+        easing: Easing.bezier(0.5, 0.01, 0, 1),
+    };
+    const style = useAnimatedStyle(() => {
+        return {
+            maxHeight: withTiming(animationHeight.value, config),
+        };
+    });
+    useEffect(() => {
+        if (collapsed) {
+            animationHeight.value = "0%";
+        }
+        else {
+            animationHeight.value = "100%";
+        }
+    }, [animationHeight, collapsed]);
+    return (React.createElement(View, null,
+        React.createElement(Link, { onPress: onPress, Icon: collapsed ? ChevronBottomMedium : ChevronTopMedium }, title),
+        React.createElement(Animated.View, { style: [
+                {
+                    overflow: "hidden",
+                },
+                style,
+            ] }, children)));
+};
+export default Accordion;

package/components/Layout/Modals/BaseModal/index.d.ts

@@ -16,5 +16,5 @@ export declare type BaseModalProps = {
     description?: string;
     subtitle?: string;
     children: React.ReactNode;
-} & ModalProps;
-export default function BaseModal({ isOpen, onClose, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: Partial<BaseModalProps>): React.ReactElement;
+} & Partial<ModalProps>;
+export default function BaseModal({ isOpen, onClose, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;

package/components/Layout/Modals/BaseModal/index.js

@@ -14,12 +14,12 @@ import ReactNativeModal from "react-native-modal";
 import styled, { useTheme } from "styled-components/native";
 import sizes from "../../../../helpers/getDeviceSize";
 import Link from "../../../cta/Link";
-import CloseMedium from "../../../../assets/icons/CloseMedium";
+import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const { width, height } = sizes;
 const Container = styled.View `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
   padding: 16px;
   min-height: 350px;
@@ -38,19 +38,19 @@ const CloseContainer = styled.View `
   align-items: flex-end;
   margin-bottom: ${(p) => p.theme.space[7]}px;
 `;
-const StyledTitle = styled(Text).attrs({ type: "h3" }) `
+const StyledTitle = styled(Text).attrs({ variant: "h3" }) `
   text-transform: uppercase;
 `;
 const StyledDescription = styled(Text).attrs({
-    type: "body",
-    color: "palette.neutral.c80",
+    variant: "body",
+    color: "neutral.c80",
 }) `
   text-transform: capitalize;
   margin-top: ${(p) => p.theme.space[2]}px;
 `;
 const StyledSubtitle = styled(Text).attrs({
-    type: "subTitle",
-    color: "palette.neutral.c80",
+    variant: "subtitle",
+    color: "neutral.c80",
 }) `
   text-transform: uppercase;
   margin-bottom: ${(p) => p.theme.space[2]}px;
@@ -77,7 +77,7 @@ export default function BaseModal(_a) {
                 Icon && (React.createElement(FlexBox, { mb: 24 }, typeof Icon === "function"
                     ? Icon({
                         size: 48,
-                        color: iconColor || colors.palette.neutral.c100,
+                        color: iconColor || colors.neutral.c100,
                     })
                     : Icon)),
                 subtitle && React.createElement(StyledSubtitle, null, subtitle),

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

@@ -1,9 +1,10 @@
 import React from "react";
+import { SpaceProps } from "styled-system";
 import type { NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from "react-native";
-declare type ScrollContainerProps = ScrollViewProps & {
+declare type ScrollContainerProps = ScrollViewProps & SpaceProps & {
     children: React.ReactNode;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     horizontal?: boolean;
 };
-declare const ScrollContainer: ({ children, onScroll, horizontal, }: ScrollContainerProps) => JSX.Element;
+declare const ScrollContainer: ({ children, onScroll, horizontal, ...props }: ScrollContainerProps) => JSX.Element;
 export default ScrollContainer;

package/components/Layout/ScrollContainer/index.js

@@ -1,10 +1,23 @@
+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 from "react";
-import { margin, padding } from "styled-system";
+import { space } from "styled-system";
 import styled from "styled-components/native";
 import Animated from "react-native-reanimated";
 const ScrollView = styled(Animated.ScrollView) `
-  ${margin};
-  ${padding};
+  ${space};
 `;
-const ScrollContainer = ({ children, onScroll, horizontal = false, }) => (React.createElement(ScrollView, { onScroll: onScroll, horizontal: horizontal }, children));
+const ScrollContainer = (_a) => {
+    var { children, onScroll, horizontal = false } = _a, props = __rest(_a, ["children", "onScroll", "horizontal"]);
+    return (React.createElement(ScrollView, Object.assign({}, props, { onScroll: onScroll, horizontal: horizontal }), children));
+};
 export default ScrollContainer;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import Animated from "react-native-reanimated";
+export declare type HeaderProps = {
+    TopLeftSection?: JSX.Element;
+    TopMiddleSection?: JSX.Element;
+    TopRightSection?: JSX.Element;
+    MiddleSection?: JSX.Element;
+    BottomSection?: JSX.Element;
+    currentPositionY: Animated.SharedValue<number>;
+};
+declare const Header: ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps) => JSX.Element;
+export default Header;

package/components/Layout/ScrollContainerHeader/Header.js

@@ -0,0 +1,64 @@
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
+import styled from "styled-components/native";
+import Animated, { useAnimatedStyle, interpolate, Extrapolate, } from "react-native-reanimated";
+import Flex from "../Flex";
+const Container = styled(Flex).attrs({
+    paddingHorizontal: 16,
+}) `
+  background-color: ${(p) => p.theme.colors.background.main};
+  width: 100%;
+`;
+const SCROLL_BREAKPOINT = 80;
+const Header = ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }) => {
+    const [topSectionHeight, setTopSectionHeight] = useState(0);
+    const [topSectionWidth, setTopSectionWidth] = useState(0);
+    const [topMiddleWidth, setTopMiddleWidth] = useState(0);
+    const [topLeftWidth, setTopLeftWidth] = useState(0);
+    const [middleWidth, setMiddleWidth] = useState(0);
+    const onLayout = useCallback(({ nativeEvent: { layout } }) => {
+        setTopSectionHeight(layout.height);
+        setTopSectionWidth(layout.width);
+    }, []);
+    const onLayoutTopLeft = useCallback(({ nativeEvent: { layout } }) => {
+        setTopLeftWidth(layout.width);
+    }, []);
+    const onLayoutTopMiddle = useCallback(({ nativeEvent: { layout } }) => {
+        setTopMiddleWidth(layout.width);
+    }, []);
+    const onLayoutMiddle = useCallback(({ nativeEvent: { layout } }) => {
+        setMiddleWidth(layout.width);
+    }, []);
+    const MiddleStyle = useAnimatedStyle(() => {
+        const scaleRatio = middleWidth
+            ? Math.min(topMiddleWidth / middleWidth, 0.9)
+            : 0.7;
+        /** scale the animated content to fit in the available space on the top header section */
+        const scale = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [1, scaleRatio], Extrapolate.CLAMP);
+        /** translate verticaly to the middle of the top header section */
+        const translateY = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -topSectionHeight + topSectionHeight / 2], Extrapolate.CLAMP);
+        /** offset horizontaly given the scale transformation and potential top left header section */
+        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topSectionWidth - topMiddleWidth) / 2 + topLeftWidth], Extrapolate.CLAMP);
+        /** allow for content to move upward as animation is taking place */
+        const maxHeight = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [70, 0], Extrapolate.CLAMP);
+        return {
+            maxHeight,
+            transform: [{ translateY }, { translateX }, { scale }],
+            justifyContent: "center", // needed to ensure vertical centering of animated content
+        };
+    }, [
+        topLeftWidth,
+        topSectionHeight,
+        middleWidth,
+        topMiddleWidth,
+        topSectionWidth,
+    ]);
+    return (React.createElement(Container, null,
+        React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", onLayout: onLayout },
+            React.createElement(View, { onLayout: onLayoutTopLeft }, TopLeftSection),
+            React.createElement(Flex, { flex: 1, onLayout: onLayoutTopMiddle }),
+            TopRightSection),
+        React.createElement(Animated.View, { onLayout: middleWidth ? () => { } : onLayoutMiddle, style: MiddleStyle }, MiddleSection),
+        BottomSection ? React.createElement(Flex, null, BottomSection) : null));
+};
+export default Header;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ScrollViewProps } from "react-native";
+import type { HeaderProps } from "./Header";
+declare type ScrollContainerHeaderProps = Omit<HeaderProps, "currentPositionY"> & Omit<ScrollViewProps, "onScroll"> & {
+    children?: React.ReactNode;
+    onScroll?: (y: number) => void;
+};
+declare const ScrollContainerHeader: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, ...props }: ScrollContainerHeaderProps) => JSX.Element;
+export default ScrollContainerHeader;

package/components/Layout/ScrollContainerHeader/index.js

@@ -0,0 +1,27 @@
+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 from "react";
+import Animated, { useAnimatedScrollHandler, useSharedValue, } from "react-native-reanimated";
+import Header from "./Header";
+const ScrollContainerHeader = (_a) => {
+    var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll"]);
+    const currentPositionY = useSharedValue(0);
+    const handleScroll = useAnimatedScrollHandler((event) => {
+        currentPositionY.value = event.contentOffset.y;
+        if (onScroll)
+            onScroll(event.contentOffset.y);
+    });
+    return (React.createElement(Animated.ScrollView, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0] }),
+        React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
+        children));
+};
+export default ScrollContainerHeader;

package/components/Layout/Table/Row.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Props as FlexBoxProps } from "../Flex";
 interface Props extends FlexBoxProps {
-    Icon: (props: {
+    Icon?: (props: {
         size?: number;
     }) => React.ReactElement;
     iconBorder?: boolean;

package/components/Layout/index.d.ts

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

package/components/Layout/index.js

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

package/components/Loader/index.d.ts

@@ -2,7 +2,10 @@ import React from "react";
 declare type Props = {
     progress?: number;
     onPress?: () => void;
-    Icon?: typeof React.Component;
+    Icon?: React.ComponentType<{
+        color: string;
+        size: number;
+    }>;
 };
 declare const ProgressLoader: ({ progress, onPress, Icon, }: Props) => React.ReactElement;
 export default ProgressLoader;

package/components/Loader/index.js

@@ -10,8 +10,8 @@ const iconSize = radius * 0.88;
 const iconOffset = radius - iconSize / 2;
 const ProgressLoader = ({ progress = 0, onPress, Icon, }) => {
     const { colors } = useTheme();
-    const backgroundColor = colors.palette.primary.c20;
-    const progressColor = colors.palette.primary.c90;
+    const backgroundColor = colors.primary.c20;
+    const progressColor = colors.primary.c90;
     const strokeDashoffset = circumference - progress * circumference;
     return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
         React.createElement(Svg, { width: radius * 2, height: radius * 2 },

package/components/Navigation/SlideIndicator/index.js

@@ -13,10 +13,10 @@ const Bullet = styled.TouchableOpacity `
   height: 6px;
   border-radius: 6px;
   margin: 0 6px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
 `;
 const ActiveBullet = styled(Bullet) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   position: absolute;
   top: 0;
   left: 0;
@@ -27,9 +27,7 @@ const config = {
     easing: Easing.bezier(0.5, 0.01, 0, 1),
 };
 function SlideIndicator({ slidesLength, activeIndex = 0, onChange, }) {
-    const slidesArray = useMemo(() => new Array(slidesLength).fill(0), [
-        slidesLength,
-    ]);
+    const slidesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
     const activeSize = useMemo(() => (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
         12, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({

package/components/Navigation/Stepper/index.js

@@ -13,18 +13,18 @@ import React, { useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
 import { space, color } from "styled-system";
 import Text from "../../Text";
-import CheckAlone from "../../../assets/icons/CheckAloneMedium";
-import CloseMedium from "../../../assets/icons/CloseMedium";
+import CheckAlone from "@ledgerhq/icons-ui/native/CheckAloneMedium";
+import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import Animated, { useAnimatedStyle, withTiming, withDelay, Easing, } from "react-native-reanimated";
 const Separator = styled.View `
   flex: 1;
   height: 1px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
   ${space}
 `;
 const SeparatorFilling = Animated.createAnimatedComponent(styled.View `
   height: 100%;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
 `);
 const AnimatedSeparator = (_a) => {
     var { filled, delay, duration } = _a, spaceProps = __rest(_a, ["filled", "delay", "duration"]);
@@ -67,13 +67,13 @@ const StepIcon = {
     width: ${(p) => p.theme.space[2]}px;
     height: ${(p) => p.theme.space[2]}px;
     border-radius: ${(p) => p.theme.radii[2]}px;
-    background-color: ${(p) => p.theme.colors.palette.primary.c90};
+    background-color: ${(p) => p.theme.colors.primary.c90};
   `,
     Pending: styled.View `
     width: ${(p) => p.theme.space[1]}px;
     height: ${(p) => p.theme.space[1]}px;
     border-radius: ${(p) => p.theme.space[1]}px;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c70};
+    background-color: ${(p) => p.theme.colors.neutral.c70};
   `,
     Completed: ({ color }) => (React.createElement(CheckAlone, { size: 16, color: color })),
     Errored: ({ color }) => (React.createElement(CloseMedium, { size: 16, color: color })),
@@ -85,13 +85,13 @@ const StepView = styled.View `
   justify-content: center;
 `;
 const ActiveText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const PendingText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c70};
+  color: ${(p) => p.theme.colors.neutral.c70};
 `;
 const ErroredText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
 `;
 function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const labelText = useMemo(() => {
@@ -109,19 +109,19 @@ function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const icon = useMemo(() => {
         switch (state) {
             case "COMPLETED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
-                    React.createElement(StepIcon.Completed, { color: colors.palette.primary.c90 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
+                    React.createElement(StepIcon.Completed, { color: colors.primary.c90 })));
             case "CURRENT":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
                     React.createElement(StepIcon.Current, null)));
             case "ERRORED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.warning.c30" },
-                    React.createElement(StepIcon.Errored, { color: colors.palette.error.c100 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "warning.c30" },
+                    React.createElement(StepIcon.Errored, { color: colors.error.c100 })));
             case "PENDING":
                 return (React.createElement(StepIcon.Background, null,
                     React.createElement(StepIcon.Pending, null)));
         }
-    }, [state]);
+    }, [state, colors]);
     return (React.createElement(StepView, null,
         React.createElement(StepIcon.Container, { mb: 2 },
             showLeftSeparator && (React.createElement(AnimatedSeparator, { filled: state !== "PENDING", duration: 100, delay: state !== "PENDING" ? 350 : 0 })),

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

@@ -0,0 +1,15 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+import { TouchableOpacity } from "react-native";
+export declare type ToggleGroupProps = {
+    labels: string[];
+    activeIndex: number;
+    onChange: (newIndex: number) => void;
+};
+export declare const ToggleGroupContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../Layout/Flex").Props & {
+    flexDirection: string;
+    alignItems: string;
+}, "alignItems" | "flexDirection">;
+export declare const ToggleBox: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+declare const ToggleGroup: (props: ToggleGroupProps) => React.ReactElement;
+export default ToggleGroup;

package/components/Navigation/ToggleGroup/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "styled-components/native";
+import Text from "../../Text";
+import { TouchableOpacity } from "react-native";
+import Button from "../../cta/Button";
+import FlexBox from "../../Layout/Flex";
+export const ToggleGroupContainer = styled(FlexBox).attrs({
+    flexDirection: "row",
+    alignItems: "stretch",
+}) `
+  width: 100%;
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
+  border-radius: 35px;
+  padding: 4px;
+`;
+export const ToggleBox = styled(TouchableOpacity) `
+  text-align: center;
+  margin: auto;
+  flex: 1;
+`;
+const ToggleGroup = (props) => {
+    const { labels, activeIndex, onChange } = props;
+    return (React.createElement(ToggleGroupContainer, null, labels.map((label, key) => (React.createElement(ToggleBox, { key: key, onPress: () => onChange(key) }, key === activeIndex ? (React.createElement(Button, { type: "main" }, label)) : (React.createElement(Text, { lineHeight: 36 }, label)))))));
+};
+export default ToggleGroup;

package/components/Text/getTextStyle.d.ts

@@ -1,22 +1,15 @@
-export declare type TextTypes = "h1" | "h2" | "h3" | "emphasis" | "body" | "link" | "subTitle" | "small" | "tag" | "large" | "paragraph";
-export declare type FontWeightTypes = "medium" | "semibold" | "bold";
-export declare function getTextTypeStyle({ bracket, }: {
+import { TextVariants } from "../../styles/theme";
+import { BaseTextProps } from "./index";
+export declare type FontWeightTypes = "medium" | "semiBold" | "bold";
+export declare function getTextTypeStyle({ bracket }: {
     bracket?: boolean;
-}): {
-    [index: string]: {
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-        paddingTop?: number;
-    };
-};
-export declare function getTextStyle({ type, bracket, fontWeight, }: {
-    type?: TextTypes;
-    bracket?: boolean;
-    fontWeight?: FontWeightTypes;
-}): {
+}): Record<TextVariants, {
+    fontFamily: string;
+    lineHeight?: number;
+    paddingTop?: number;
+}>;
+export declare function getTextStyle({ variant, bracket, fontWeight, }: Partial<BaseTextProps>): {
     fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
+    lineHeight?: number;
     paddingTop?: number;
 };

package/components/Text/getTextStyle.js

@@ -1,62 +1,48 @@
-export function getTextTypeStyle({ bracket, }) {
+export function getTextTypeStyle({ bracket }) {
     return {
         h1: {
             fontFamily: "Alpha",
-            fontSize: 36,
-            lineHeight: 43.2,
+            lineHeight: 32,
             paddingTop: bracket ? 15 : 0,
         },
         h2: {
             fontFamily: "Alpha",
-            fontSize: 28,
-            lineHeight: 33.6,
+            lineHeight: 28,
             paddingTop: bracket ? 10 : 0,
         },
         h3: {
             fontFamily: "Alpha",
-            fontSize: 20,
-            lineHeight: 24,
+            lineHeight: 20,
             paddingTop: bracket ? 5 : 0,
         },
-        large: {
+        h4: {
             fontFamily: "Inter",
-            fontSize: 16,
-            lineHeight: 19.36,
         },
-        emphasis: {
+        large: {
             fontFamily: "Inter",
-            fontSize: 14,
-            lineHeight: 20,
         },
         body: {
             fontFamily: "Inter",
-            fontSize: 14,
+        },
+        bodyLineHeight: {
+            fontFamily: "Inter",
             lineHeight: 20,
         },
         paragraph: {
             fontFamily: "Inter",
-            fontSize: 13,
-            lineHeight: 15.73,
         },
-        link: {
+        paragraphLineHeight: {
             fontFamily: "Inter",
-            fontSize: 13,
-            lineHeight: 16,
+            lineHeight: 18,
         },
-        tiny: {
+        small: {
             fontFamily: "Inter",
-            fontSize: 12,
-            lineHeight: 16,
         },
-        navigation: {
+        subtitle: {
             fontFamily: "Inter",
-            fontSize: 12,
-            lineHeight: 14.52,
         },
-        subTitle: {
+        tiny: {
             fontFamily: "Inter",
-            fontSize: 11,
-            lineHeight: 13.31,
         },
     };
 }
@@ -65,12 +51,18 @@ const getConcatenedFontWeightFontFamily = {
         medium: {
             fontFamily: "HMAlphaMono-Medium",
         },
+        semiBold: {
+            fontFamily: "HMAlphaMono-Medium",
+        },
+        bold: {
+            fontFamily: "HMAlphaMono-Medium",
+        },
     },
     Inter: {
         medium: {
             fontFamily: "Inter-Medium",
         },
-        semibold: {
+        semiBold: {
             fontFamily: "Inter-SemiBold",
         },
         bold: {
@@ -78,7 +70,8 @@ const getConcatenedFontWeightFontFamily = {
         },
     },
 };
-export function getTextStyle({ type = "body", bracket, fontWeight = "medium", }) {
-    const style = getTextTypeStyle({ bracket })[type];
-    return Object.assign(Object.assign({}, style), getConcatenedFontWeightFontFamily[style.fontFamily || "Inter"][fontWeight]);
+export function getTextStyle({ variant = "paragraph", bracket = false, fontWeight = "medium", }) {
+    var _a;
+    const style = getTextTypeStyle({ bracket })[variant];
+    return Object.assign(Object.assign({}, style), getConcatenedFontWeightFontFamily[(_a = style === null || style === void 0 ? void 0 : style.fontFamily) !== null && _a !== void 0 ? _a : "Inter"][fontWeight]);
 }