@ledgerhq/native-ui 0.3.0 → 0.6.1

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Animated from "react-native-reanimated";
 export declare type HeaderProps = {
     TopLeftSection?: JSX.Element;

package/components/Layout/ScrollContainerHeader/Header.js

@@ -6,7 +6,7 @@ import Flex from "../Flex";
 const Container = styled(Flex).attrs({
     paddingHorizontal: 16,
 }) `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
 `;
 const SCROLL_BREAKPOINT = 80;

package/components/Layout/index.d.ts

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

package/components/Layout/index.js

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

package/components/Loader/InfiniteLoader/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+import { SizeProps } from "styled-system";
+declare const Loader: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+export declare type Props = React.ComponentProps<typeof Loader> & {
+    color?: string;
+};
+export default function InfiniteLoader({ size, color, ...extraProps }: Props): JSX.Element;
+export {};

package/components/Loader/InfiniteLoader/index.js

@@ -0,0 +1,62 @@
+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, { useEffect } from "react";
+import Svg, { LinearGradient, Stop, Mask, Path, Rect } from "react-native-svg";
+import styled from "styled-components/native";
+import { system, size } from "styled-system";
+import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming, cancelAnimation, Easing, } from "react-native-reanimated";
+const strokeSystem = system({
+    stroke: {
+        property: "stroke",
+        scale: "colors",
+    },
+});
+const Loader = styled(Svg).attrs((props) => (Object.assign({}, strokeSystem(props)))) `
+  ${size}
+`;
+export default function InfiniteLoader(_a) {
+    var { size = 38, color = "primary.c50" } = _a, extraProps = __rest(_a, ["size", "color"]);
+    const rotation = useSharedValue(0);
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            transform: [
+                {
+                    rotateZ: `${rotation.value}deg`,
+                },
+            ],
+        };
+    }, [rotation.value]);
+    useEffect(() => {
+        rotation.value = withRepeat(withTiming(360, {
+            duration: 1000,
+            easing: Easing.linear,
+        }), -1 //Infinite
+        );
+        return () => cancelAnimation(rotation);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement(Animated.View, { style: [
+            { display: "flex", justifyContent: "center", alignItems: "center" },
+            animatedStyles,
+        ] },
+        React.createElement(Loader, Object.assign({ size: size, stroke: color, viewBox: "0 0 38 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, extraProps),
+            React.createElement(LinearGradient, { id: "gradient-start", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+                React.createElement(Stop, { offset: 0, stopColor: "white", stopOpacity: 0.5 }),
+                React.createElement(Stop, { offset: 1, stopColor: "white", stopOpacity: 1 })),
+            React.createElement(LinearGradient, { id: "gradient-end", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+                React.createElement(Stop, { offset: 0, stopColor: "white", stopOpacity: 0.5 }),
+                React.createElement(Stop, { offset: 1, stopColor: "white", stopOpacity: 0 })),
+            React.createElement(Mask, { id: "gradient-mask" },
+                React.createElement(Rect, { x: 0, y: -4, width: 44, height: 22, strokeWidth: 0, fill: "url(#gradient-start)", transform: "rotate(10)" }),
+                React.createElement(Rect, { x: 0, y: 18, width: 44, height: 21, strokeWidth: 0, fill: "url(#gradient-end)", transform: "rotate(10)" })),
+            React.createElement(Path, { d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526", strokeWidth: 6, strokeLinecap: "round", strokeLinejoin: "round", mask: "url(#gradient-mask)" }))));
+}

package/components/Loader/ProgressLoader/index.d.ts

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

package/components/Loader/ProgressLoader/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Svg, Circle, G } from "react-native-svg";
+import { useTheme } from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+const radius = 25;
+const strokeWidth = 2;
+const normalizedRadius = radius - strokeWidth / 2;
+const circumference = normalizedRadius * 2 * Math.PI;
+const iconSize = radius * 0.88;
+const iconOffset = radius - iconSize / 2;
+const ProgressLoader = ({ progress = 0, onPress, Icon, }) => {
+    const { colors } = useTheme();
+    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 },
+            React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
+            React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
+                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset })),
+            Icon ? (React.createElement(G, { transform: `translate(${iconOffset}, ${iconOffset})` },
+                React.createElement(Icon, { color: progressColor, size: iconSize }))) : null)));
+};
+export default ProgressLoader;

package/components/Loader/index.d.ts

@@ -1,11 +1,2 @@
-import React from "react";
-declare type Props = {
-    progress?: number;
-    onPress?: () => void;
-    Icon?: React.ComponentType<{
-        color: string;
-        size: number;
-    }>;
-};
-declare const ProgressLoader: ({ progress, onPress, Icon, }: Props) => React.ReactElement;
-export default ProgressLoader;
+export { default as Loader } from "./ProgressLoader";
+export { default as InfiniteLoader } from "./InfiniteLoader";

package/components/Loader/index.js

@@ -1,24 +1,2 @@
-import React from "react";
-import { Svg, Circle, G } from "react-native-svg";
-import { useTheme } from "styled-components/native";
-import { TouchableOpacity } from "react-native";
-const radius = 25;
-const strokeWidth = 2;
-const normalizedRadius = radius - strokeWidth / 2;
-const circumference = normalizedRadius * 2 * Math.PI;
-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 strokeDashoffset = circumference - progress * circumference;
-    return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
-        React.createElement(Svg, { width: radius * 2, height: radius * 2 },
-            React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
-            React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
-                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset })),
-            Icon ? (React.createElement(G, { transform: `translate(${iconOffset}, ${iconOffset})` },
-                React.createElement(Icon, { color: progressColor, size: iconSize }))) : null)));
-};
-export default ProgressLoader;
+export { default as Loader } from "./ProgressLoader";
+export { default as InfiniteLoader } from "./InfiniteLoader";

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

@@ -0,0 +1,70 @@
+import React from "react";
+import { Props as ProgressBarProps } from "../../ProgressBar";
+import { TransitionProps } from "../../transitions";
+interface InnerProps {
+    /**
+     * The active index.
+     */
+    activeIndex: number;
+    /**
+     * The total number of steps.
+     */
+    stepsLength: number;
+}
+export interface RenderTransitionProps extends InnerProps, TransitionProps {
+    /**
+     * The index of the child.
+     */
+    index: number;
+    /**
+     * The previously active index.
+     */
+    previousActiveIndex: number | null;
+}
+export interface Props<ExtraProps> {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * An optional header displayed above the progress bar.
+     */
+    header?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * An optional footer displayed below the body.
+     */
+    footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * Extra props that are passed to the header and footer render functions.
+     */
+    extraProps?: ExtraProps;
+    /**
+     * Additional props to pass to the progressbar component.
+     * This component is a Flex element.
+     */
+    progressBarProps?: ProgressBarProps;
+    /**
+     * **Use this prop in combination with `transitionDuration`.**
+     *
+     * A render function wrapping every children which allows using transitions.
+     * This function is called with various useful arguments, most notably:
+     * - the child index
+     * - the current active index
+     * - the previous active index
+     * - the transition status ("entered", "entering", "exiting" or "exited")
+     */
+    renderTransition?: (props: RenderTransitionProps) => JSX.Element | null;
+    /**
+     * **Use this prop in combination with `renderTransition`.**
+     *
+     * If this prop is true and if `renderTransition` is used
+     * then specifies the duration of the transition in milliseconds.
+     */
+    transitionDuration?: number;
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: React.ReactNode;
+}
+declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
+export default FlowStepper;

package/components/Navigation/FlowStepper/index.js

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from "react";
+import { SafeAreaView } from "react-native";
+import Flex from "../../Layout/Flex";
+import ProgressBar from "../../ProgressBar";
+import { Transition, } from "../../transitions";
+function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration = 0, children, }) {
+    const previousActiveIndex = useRef(null);
+    const stepsLength = React.Children.count(children);
+    useEffect(() => () => {
+        previousActiveIndex.current = activeIndex;
+    }, [activeIndex]);
+    return (React.createElement(Flex, { flex: 1 },
+        header &&
+            header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })),
+        React.createElement(SafeAreaView, { style: { flex: 1 } },
+            React.createElement(ProgressBar, Object.assign({ index: activeIndex, length: stepsLength }, progressBarProps)),
+            React.createElement(Flex, { flex: 1 }, React.Children.map(children, (child, index) => {
+                if (renderTransition && transitionDuration) {
+                    return (React.createElement(Transition, { in: index === activeIndex, timeout: transitionDuration, mountOnEnter: true, unmountOnExit: true }, (status) => {
+                        return renderTransition({
+                            index,
+                            activeIndex,
+                            previousActiveIndex: previousActiveIndex.current,
+                            stepsLength,
+                            status,
+                            duration: transitionDuration,
+                            children: child,
+                        });
+                    }));
+                }
+                else {
+                    return index === activeIndex ? child : null;
+                }
+            })),
+            footer &&
+                footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })))));
+}
+export default FlowStepper;

package/components/Navigation/SlideIndicator/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import styled from "styled-components/native";
-import Animated, { useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
+import Animated, { useDerivedValue, useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
 const Container = styled.View `
   flex-direction: row;
   align-items: center;
@@ -8,15 +8,19 @@ const Container = styled.View `
   height: 6px;
   position: relative;
 `;
-const Bullet = styled.TouchableOpacity `
+const bulletStyle = `
   width: 6px;
   height: 6px;
   border-radius: 6px;
   margin: 0 6px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
 `;
-const ActiveBullet = styled(Bullet) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+const Bullet = styled.TouchableOpacity `
+  ${bulletStyle}
+  background-color: ${(p) => p.theme.colors.neutral.c40};
+`;
+const ActiveBullet = styled.View.attrs({ pointerEvents: "none" }) `
+  ${bulletStyle}
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   position: absolute;
   top: 0;
   left: 0;
@@ -28,10 +32,13 @@ const config = {
 };
 function SlideIndicator({ slidesLength, activeIndex = 0, onChange, }) {
     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 activeSize = useDerivedValue(() => {
+        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
+            12;
+        return size;
+    }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({
-        width: withTiming(activeSize, config),
+        width: withTiming(activeSize.value, config),
     }));
     return (React.createElement(Container, null,
         slidesArray.map((_, index) => (React.createElement(Bullet, { key: index, onPress: () => onChange(index) }))),

package/components/Navigation/Stepper/index.js

@@ -19,12 +19,12 @@ import Animated, { useAnimatedStyle, withTiming, withDelay, Easing, } from "reac
 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,14 +109,14 @@ 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)));

package/components/Navigation/index.d.ts

@@ -1,2 +1,3 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
+export { default as FlowStepper } from "./FlowStepper";

package/components/Navigation/index.js

@@ -1,2 +1,3 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
+export { default as FlowStepper } from "./FlowStepper";

package/components/ProgressBar/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FlexBoxProps } from "../Layout/Flex";
+export interface Props extends FlexBoxProps {
+    /**
+     * The index of the active step.
+     */
+    index: number;
+    /**
+     * The total number of steps.
+     */
+    length: number;
+}
+declare function ProgressBar({ index, length, ...props }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ProgressBar>;
+export default _default;

package/components/ProgressBar/index.js

@@ -0,0 +1,33 @@
+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 styled from "styled-components/native";
+import Flex from "../Layout/Flex";
+import Animated, { useDerivedValue, useAnimatedStyle, withTiming, } from "react-native-reanimated";
+const ActiveBar = styled.View `
+  background-color: ${(p) => p.theme.colors.neutral.c100};
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+const AnimatedBar = Animated.createAnimatedComponent(ActiveBar);
+function ProgressBar(_a) {
+    var { index, length } = _a, props = __rest(_a, ["index", "length"]);
+    const width = useDerivedValue(() => Math.round((index / (length - 1)) * 100), [index, length]);
+    const animatedStyles = useAnimatedStyle(() => ({
+        width: withTiming(`${width.value}%`),
+    }));
+    return (React.createElement(Flex, Object.assign({ height: 4, width: "100%", backgroundColor: "neutral.c20", position: "relative" }, props),
+        React.createElement(AnimatedBar, { style: [animatedStyles] })));
+}
+export default React.memo(ProgressBar);

package/components/Tabs/Chip/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
+export declare const ChipTab: ({ onPress, isActive, label, }: TabItemProps) => React.ReactElement;
+declare const ChipTabs: (props: BaseTabsProps) => React.ReactElement;
+export default ChipTabs;

package/components/Tabs/Chip/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import styled from "styled-components/native";
+import Text from "../../Text";
+import { TouchableOpacity } from "react-native";
+import TemplateTabs from "../TemplateTabs";
+const TabBox = styled(TouchableOpacity) `
+  text-align: center;
+  margin: auto;
+  flex: 1;
+  padding: ${(p) => p.theme.space[5]}px 0;
+  border-radius: 8px;
+  background-color: ${(p) => p.isActive ? p.theme.colors.palette.primary.c20 : "transparent"};
+`;
+const StyledTabs = styled(TemplateTabs) ``;
+export const ChipTab = ({ onPress, isActive, label, }) => {
+    return (React.createElement(TabBox, { isActive: isActive, onPress: onPress },
+        React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: isActive ? "palette.neutral.c100" : "palette.neutral.c80", textAlign: "center" }, label)));
+};
+const ChipTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: ChipTab })));
+export default ChipTabs;

package/components/Tabs/Graph/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
+export declare const GraphTab: ({ onPress, isActive, label, }: TabItemProps) => React.ReactElement;
+declare const GraphTabs: (props: BaseTabsProps) => React.ReactElement;
+export default GraphTabs;

package/components/Tabs/Graph/index.js

@@ -0,0 +1,21 @@
+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 TemplateTabs from "../TemplateTabs";
+const TabBbx = styled(TouchableOpacity) `
+  text-align: center;
+  margin: auto;
+  flex: 1;
+`;
+const StyledTabs = styled(TemplateTabs) `
+  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border-radius: 35px;
+  padding: 4px;
+`;
+export const GraphTab = ({ onPress, isActive, label, }) => {
+    return (React.createElement(TabBbx, { onPress: onPress }, isActive ? (React.createElement(Button, { type: "main" }, label)) : (React.createElement(Text, { lineHeight: 36, textAlign: "center" }, label))));
+};
+const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
+export default GraphTabs;

package/components/Tabs/TemplateTabs/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+export declare type BaseTabsProps = {
+    labels: string[];
+    activeIndex: number;
+    onChange: (newIndex: number) => void;
+};
+export declare type TabItemProps = Partial<BaseTabsProps> & {
+    label: string;
+    isActive: boolean;
+    index: number;
+    onPress: () => void;
+};
+export declare type TabsProps = BaseTabsProps & {
+    Item: (props: TabItemProps) => React.ReactElement;
+};
+export declare const TabsContainer: 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;
+} & {
+    flexDirection: string;
+    alignItems: string;
+}, "alignItems" | "flexDirection">;
+declare const TemplateTabsGroup: (props: TabsProps) => React.ReactElement;
+export default TemplateTabsGroup;

package/components/Tabs/TemplateTabs/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components/native";
+import FlexBox from "../../Layout/Flex";
+export const TabsContainer = styled(FlexBox).attrs({
+    flexDirection: "row",
+    alignItems: "stretch",
+}) `
+  width: 100%;
+`;
+const TemplateTabsGroup = (props) => {
+    const { labels, activeIndex, onChange, Item } = props;
+    return (React.createElement(TabsContainer, Object.assign({}, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { label: label, index: index, isActive: index === activeIndex, onPress: () => onChange(index) }))))));
+};
+export default TemplateTabsGroup;

package/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChipTabs } from "./Chip";
+export { default as GraphTabs } from "./Graph";

package/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default as ChipTabs } from "./Chip";
+export { default as GraphTabs } from "./Graph";

package/components/Text/getTextStyle.d.ts

@@ -7,6 +7,7 @@ export declare function getTextTypeStyle({ bracket }: {
     fontFamily: string;
     lineHeight?: number;
     paddingTop?: number;
+    textTransform?: string;
 }>;
 export declare function getTextStyle({ variant, bracket, fontWeight, }: Partial<BaseTextProps>): {
     fontFamily: string;

package/components/Text/getTextStyle.js

@@ -4,19 +4,23 @@ export function getTextTypeStyle({ bracket }) {
             fontFamily: "Alpha",
             lineHeight: 32,
             paddingTop: bracket ? 15 : 0,
+            textTransform: "uppercase",
         },
         h2: {
             fontFamily: "Alpha",
             lineHeight: 28,
             paddingTop: bracket ? 10 : 0,
+            textTransform: "uppercase",
         },
         h3: {
             fontFamily: "Alpha",
             lineHeight: 20,
             paddingTop: bracket ? 5 : 0,
+            textTransform: "uppercase",
         },
         h4: {
             fontFamily: "Inter",
+            textTransform: "uppercase",
         },
         large: {
             fontFamily: "Inter",
@@ -40,6 +44,7 @@ export function getTextTypeStyle({ bracket }) {
         },
         subtitle: {
             fontFamily: "Inter",
+            textTransform: "uppercase",
         },
         tiny: {
             fontFamily: "Inter",