@ledgerhq/native-ui 0.6.0 → 0.6.1

package/components/Form/SelectableList.d.ts

@@ -1,15 +1,19 @@
-import React from "react";
+import React, { ComponentType } from "react";
 import { GestureResponderEvent } from "react-native";
-export declare type ElementProps<V> = React.PropsWithChildren<{
+import { IconType } from "../Icon/type";
+declare type BaseElementProps<V> = {
     first?: boolean;
     selected?: boolean;
     disabled?: boolean;
     value?: V;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
-    Icon?: (props: {
-        size?: number;
-        color?: string;
-    }) => React.ReactElement;
+    Icon?: IconType;
+};
+export declare type ElementProps<V> = React.PropsWithChildren<BaseElementProps<V> & {
+    /**
+     * A function that will render some content on the right side of the input.
+     */
+    renderRight?: ComponentType<BaseElementProps<V>> | React.ReactElement;
 }>;
 export declare type Props<V> = React.PropsWithChildren<{
     currentValue?: V;
@@ -17,6 +21,6 @@ export declare type Props<V> = React.PropsWithChildren<{
 }>;
 declare function SelectableList<V>({ currentValue, onChange, children }: Props<V>): JSX.Element;
 declare namespace SelectableList {
-    var Element: <V>({ first, value, selected, disabled, onPress, children, Icon, }: ElementProps<V>) => JSX.Element;
+    var Element: <V>(props: ElementProps<V>) => JSX.Element;
 }
 export default SelectableList;

package/components/Form/SelectableList.js

@@ -7,12 +7,14 @@ const ElementContainer = styled(Flex).attrs({
     accessible: true,
     accessibilityRole: "radio",
 }) ``;
-function Element({ first, value, selected, disabled, onPress, children, Icon, }) {
+function Element(props) {
+    const { first, value, selected, disabled, onPress, children, Icon, renderRight: RenderRight, } = props;
     return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled },
         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, flexDirection: "row", alignItems: "center" },
-            Icon && (React.createElement(Flex, { mr: 6 },
+            Icon && (React.createElement(Flex, { mr: 6, flexShrink: 0 },
                 React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }))),
-            React.createElement(Text, { variant: "large", color: disabled ? "neutral.c50" : "neutral.c100" }, children || value))));
+            React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : "neutral.c100" }, children || value),
+            RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? (RenderRight) : (React.createElement(RenderRight, Object.assign({}, props))))))));
 }
 function SelectableList({ currentValue, onChange, children }) {
     return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {

package/components/Form/Switch/index.js

@@ -10,6 +10,6 @@ const Switch = ({ checked, onChange, disabled, label, }) => {
                 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));
+        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[3], flexShrink: 1 } }, label)) : null));
 };
 export default Switch;

package/components/Icon/BoxedIcon.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+export declare const DEFAULT_BOX_SIZE = 40;
+export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BADGE_SIZE = 20;
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconBoxProps = {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.
+     */
+    Badge?: React.ComponentType<IconProps>;
+    /**
+     * Color of the border
+     */
+    borderColor?: string;
+    /**
+     * Badge color, will be applied to the component provided in the `Badge` prop
+     */
+    badgeColor?: string;
+    /**
+     * Badge size, will be applied to the component provided in the `Badge` prop
+     */
+    badgeSize?: number;
+    children?: JSX.Element;
+    /**
+     * Box size for preview
+     */
+    size?: number;
+};
+export declare type BoxedIconProps = IconBoxProps & {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.
+     */
+    Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);
+    /**
+     * Icon size, will be applied to the component provided in the `Icon` prop
+     */
+    iconSize?: number;
+    /**
+     * Icon color, will be applied to the component provided in the `Icon` prop
+     */
+    iconColor?: string;
+};
+export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, }: IconBoxProps) => JSX.Element;
+declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
+export default BoxedIcon;

package/components/Icon/BoxedIcon.js

@@ -0,0 +1,87 @@
+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, { useTheme } from "styled-components/native";
+import { PixelRatio } from "react-native";
+import { Rect, ClipPath, Svg, Defs } from "react-native-svg";
+import Flex from "../Layout/Flex";
+import Box from "../Layout/Box";
+export const DEFAULT_BOX_SIZE = 40;
+export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_BADGE_SIZE = 20;
+const BORDER_RADIUS = 2;
+function getClipRectangleSize(badgeSize) {
+    return (3 / 4) * badgeSize;
+}
+const Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "visible",
+})) ``;
+const IconBoxBackground = styled(Flex) `
+  position: absolute;
+  height: ${(p) => p.size}px;
+  width: ${(p) => p.size}px;
+  border-radius: ${(p) => p.theme.radii[BORDER_RADIUS]}px;
+`;
+const BadgeContainer = styled.View `
+  position: absolute;
+  overflow: visible;
+  ${(p) => `
+    top: -${p.badgeSize / 2 - 2}px;
+    right: -${p.badgeSize / 2 - 2}px;
+    height: ${p.badgeSize}px;
+    width: ${p.badgeSize}px;`}
+`;
+/** This component is needed to draw a border that is clipped behind the badge icon */
+const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, }) => {
+    const { colors, radii } = useTheme();
+    const borderRadius = radii[BORDER_RADIUS];
+    const borderWidth = 1;
+    const paletteStr = borderColor.split(".")[0];
+    // @ts-expect-error idk how to handle this properly pls help
+    const palette = colors[paletteStr];
+    const strokeColor = (palette ? palette[borderColor.split(".")[1]] : borderColor) ||
+        colors.neutral.c40;
+    const squareSize = getClipRectangleSize(badgeSize);
+    /**
+     * The following adjustments are necessary to have visual consistency
+     *  between RN (native) Views with border and this component
+     */
+    const svgSize = size + borderWidth;
+    const rectSize = size - borderWidth;
+    const rectRadius = borderRadius - borderWidth / 2;
+    return (React.createElement(Box, { position: "absolute", overflow: "hidden" },
+        React.createElement(Svg, { height: svgSize, width: svgSize },
+            React.createElement(Defs, null,
+                React.createElement(ClipPath, { id: "clip" },
+                    React.createElement(Rect, { x: "0", y: "0", width: svgSize - squareSize, height: squareSize }),
+                    React.createElement(Rect, { x: "0", y: squareSize, width: "100%", height: svgSize - squareSize }))),
+            React.createElement(Rect, { strokeWidth: PixelRatio.roundToNearestPixel(borderWidth), stroke: strokeColor, x: borderWidth, y: borderWidth, rx: rectRadius, ry: rectRadius, width: rectSize, height: rectSize, fill: "transparent", clipPath: "url(#clip)" }))));
+};
+export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
+    const hasBadge = !!Badge;
+    return (React.createElement(Container, { size: size },
+        hasBadge ? (React.createElement(IconBoxBackgroundSVG, { size: size, badgeSize: badgeSize, borderColor: borderColor })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor })),
+        children,
+        hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
+            React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
+};
+const BoxedIcon = (_a) => {
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
+    return (React.createElement(IconBox, Object.assign({}, iconBoxProps),
+        React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor })));
+};
+export default BoxedIcon;

package/components/Icon/IconBox/index.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
+import { IconOrElementType } from "../type";
 declare type Props = {
-    Icon: (props: {
-        size?: number;
-        color?: string;
-    }) => React.ReactElement;
+    Icon: IconOrElementType;
     color?: string;
     boxSize?: number;
     iconSize?: number;

package/components/Icon/IconBox/index.js

@@ -14,6 +14,5 @@ const IconContainer = styled.View `
 `;
 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.neutral.c100 })));
+    return (React.createElement(IconContainer, { size: boxSize }, React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
 }

package/components/Icon/index.d.ts

@@ -1 +1,2 @@
 export { default as IconBox } from "./IconBox";
+export { default as BoxedIcon } from "./BoxedIcon";

package/components/Icon/index.js

@@ -1 +1,2 @@
 export { default as IconBox } from "./IconBox";
+export { default as BoxedIcon } from "./BoxedIcon";

package/components/Icon/type.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconType = React.ComponentType<IconProps>;
+export declare type IconOrElementType = IconType | React.ReactElement;

package/components/Icon/type.js

@@ -0,0 +1 @@
+export {};

package/components/Layout/List/IconBoxList/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+import { IconType } from "../../../Icon/type";
+export declare type IconBoxListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    Icon: IconType;
+};
+export declare type IconBoxListProps = Omit<BaseListProps, "items"> & {
+    items: IconBoxListItemProps[];
+};
+export default function IconBoxList({ items, ...props }: IconBoxListProps): React.ReactElement;

package/components/Layout/List/IconBoxList/index.js

@@ -0,0 +1,19 @@
+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, { useMemo } from "react";
+import List from "../List";
+import { IconBox } from "../../../Icon";
+export default function IconBoxList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const iconBoxItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: React.createElement(IconBox, { Icon: item.Icon, boxSize: 48, iconSize: 20 }) }))), [items]);
+    return React.createElement(List, Object.assign({ items: iconBoxItems }, props));
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { BaseStyledProps } from "../../../styled";
+export declare type BaseListItemProps = {
+    title?: string;
+    description?: string;
+    bullet?: React.ReactNode;
+};
+export declare type BaseListProps = {
+    items: BaseListItemProps[];
+    itemContainerProps?: BaseStyledProps;
+};
+export declare const ListItem: ({ title, description, bullet, ...props }: BaseStyledProps & BaseListItemProps) => React.ReactElement;
+export default function List({ items, itemContainerProps, ...props }: BaseListProps): React.ReactElement;

package/components/Layout/List/List/index.js

@@ -0,0 +1,29 @@
+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, { useCallback } from "react";
+import Text from "../../../Text";
+import { Box, Flex } from "../../index";
+import { FlatList } from "react-native";
+export const ListItem = (_a) => {
+    var { title, description, bullet = null } = _a, props = __rest(_a, ["title", "description", "bullet"]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "row", alignItems: "center" }, props),
+        bullet && (React.createElement(Box, { mr: 7, flexShrink: 0 }, bullet)),
+        React.createElement(Flex, { flexDirection: "column", flexShrink: 1, flexWrap: "nowrap" },
+            title && (React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", flexShrink: 1, mb: description ? 2 : null }, title)),
+            description && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c80", flexShrink: 1 }, description)))));
+};
+export default function List(_a) {
+    var { items, itemContainerProps } = _a, props = __rest(_a, ["items", "itemContainerProps"]);
+    const renderItem = useCallback(({ item }) => (React.createElement(ListItem, Object.assign({}, item, { mb: 6, pb: 2 }, itemContainerProps))), [itemContainerProps]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column" }, props),
+        React.createElement(FlatList, { data: items, renderItem: renderItem })));
+}

package/components/Layout/List/NumberedList/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+export declare type NumberedListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    number?: number;
+};
+export declare type NumberedListProps = Omit<BaseListProps, "items"> & {
+    items: NumberedListItemProps[];
+};
+export default function NumberedList({ items, ...props }: NumberedListProps): React.ReactElement;

package/components/Layout/List/NumberedList/index.js

@@ -0,0 +1,20 @@
+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, { useMemo } from "react";
+import List from "../List";
+import { IconBox } from "../../../Icon";
+import Text from "../../../Text";
+export default function NumberedList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const numberedItems = useMemo(() => items.map((item, index) => (Object.assign(Object.assign({}, item), { bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, item.number ? item.number : index), boxSize: 36 })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: numberedItems }, props));
+}

package/components/Layout/List/TipList/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+export declare type TipListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    isPositive: boolean;
+};
+export declare type TipListProps = Omit<BaseListProps, "items"> & {
+    items: TipListItemProps[];
+};
+export default function TipList({ items, ...props }: TipListProps): React.ReactElement;

package/components/Layout/List/TipList/index.js

@@ -0,0 +1,20 @@
+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, { useMemo } from "react";
+import List from "../List";
+import Check from "@ledgerhq/icons-ui/native/CheckAloneMedium";
+import Close from "@ledgerhq/icons-ui/native/CloseMedium";
+export default function TipList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c100" })) : (React.createElement(Close, { size: 20, color: "error.c100" })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: tipItems }, props));
+}

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

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/List/index.js

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/index.d.ts

@@ -5,3 +5,4 @@ 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

@@ -5,3 +5,4 @@ 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.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;
+export { default as Loader } from "./ProgressLoader";
+export { default as InfiniteLoader } from "./InfiniteLoader";

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Props as ProgressBarProps } from "../../ProgressBar";
 import { TransitionProps } from "../../transitions";
 interface InnerProps {
     /**
@@ -37,6 +38,11 @@ export interface Props<ExtraProps> {
      * 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`.**
      *
@@ -60,5 +66,5 @@ export interface Props<ExtraProps> {
      */
     children: React.ReactNode;
 }
-declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
+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

@@ -3,7 +3,7 @@ import { SafeAreaView } from "react-native";
 import Flex from "../../Layout/Flex";
 import ProgressBar from "../../ProgressBar";
 import { Transition, } from "../../transitions";
-function FlowStepper({ activeIndex, header, footer, extraProps, renderTransition, transitionDuration = 0, children, }) {
+function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration = 0, children, }) {
     const previousActiveIndex = useRef(null);
     const stepsLength = React.Children.count(children);
     useEffect(() => () => {
@@ -13,7 +13,7 @@ function FlowStepper({ activeIndex, header, footer, extraProps, renderTransition
         header &&
             header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })),
         React.createElement(SafeAreaView, { style: { flex: 1 } },
-            React.createElement(ProgressBar, { index: activeIndex, length: stepsLength }),
+            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) => {

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",

package/components/Text/index.d.ts

@@ -1,21 +1,19 @@
 import React from "react";
-import { TextProps } from "react-native";
-import { FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps } from "styled-system";
+import { TextProps, TextStyle } from "react-native";
+import { FontSizeProps, TextAlignProps, LineHeightProps } from "styled-system";
+import { BaseStyledProps } from "../styled";
 import { FontWeightTypes } from "./getTextStyle";
 import { TextVariants } from "../../styles/theme";
-export interface BaseTextProps extends TextProps, FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps {
+export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps, TextAlignProps, LineHeightProps {
     variant?: TextVariants;
     fontWeight?: FontWeightTypes;
     fontFamily?: string;
     fontSize?: number | string | TextVariants;
     color?: string;
-    mt?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mr?: number | string;
-    paddingTop?: number;
     lineHeight?: number;
     bracket?: boolean;
+    textTransform?: TextStyle["textTransform"];
+    uppercase?: boolean;
     children: React.ReactNode;
 }
 declare const Text: ({ children, bracket, ...props }: BaseTextProps) => JSX.Element;

package/components/Text/index.js

@@ -11,12 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import { fontSize, textAlign, color, space, lineHeight, border, } from "styled-system";
+import { compose, fontSize, textAlign, lineHeight, system, } from "styled-system";
+import baseStyled from "../styled";
 import BracketRight from "../../icons/BracketLeft";
 import BracketLeft from "../../icons/BracketRight";
 import { getColor } from "../../styles";
 import { getTextStyle } from "./getTextStyle";
-const Base = styled.Text.attrs((p) => {
+const uppercase = system({
+    uppercase: {
+        property: "textTransform",
+        transform: (value) => (value ? "uppercase" : "none"),
+    },
+});
+const textTransform = system({
+    textTransform: {
+        property: "textTransform",
+    },
+});
+const Base = baseStyled.Text.attrs((p) => {
     var _a;
     return ({
         fontSize: p.fontSize ? p.fontSize : (_a = p.variant) !== null && _a !== void 0 ? _a : "paragraph",
@@ -24,12 +36,7 @@ const Base = styled.Text.attrs((p) => {
     });
 }) `
   ${(p) => getTextStyle(p)}
-  ${lineHeight};
-  ${fontSize};
-  ${textAlign};
-  ${color};
-  ${space};
-  ${border};
+  ${compose(lineHeight, fontSize, textAlign, uppercase, textTransform)}
   justify-content: center;
   align-items: center;
 `;

package/components/index.d.ts

@@ -2,12 +2,12 @@ export * from "./cta";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
 export { default as Carousel } from "./Carousel";
 export * from "./Tabs";
+export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
 export * as Transitions from "./transitions";

package/components/index.js

@@ -2,13 +2,13 @@ export * from "./cta";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
 export { default as Carousel } from "./Carousel";
 export * from "./Tabs";
+export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
 import * as Transitions_1 from "./transitions";
 export { Transitions_1 as Transitions };

package/components/message/Alert/index.js

@@ -44,5 +44,5 @@ export default function Alert({ type = "info", title, showIcon = true, }) {
     const textColor = getColor(theme, alertColors[type || "info"].color);
     return (React.createElement(StyledAlertContainer, { type: type },
         showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, icons[type || "info"]({ size: 20, color: textColor }))),
-        React.createElement(Text, { color: textColor }, title)));
+        React.createElement(Text, { color: textColor, flexShrink: 1 }, title)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",