@ledgerhq/native-ui 0.6.3 → 0.6.4

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

@@ -1,10 +1,16 @@
 import React from "react";
 import { IconOrElementType } from "../type";
+import { FlexBoxProps } from "../../Layout/Flex";
 declare type Props = {
     Icon: IconOrElementType;
     color?: string;
     boxSize?: number;
     iconSize?: number;
+    /**
+     * Additional props to pass to the container component.
+     * This component is a Flex element.
+     */
+    iconContainerProps?: FlexBoxProps;
 };
-export default function IconBox({ Icon, color, boxSize, iconSize, }: Props): React.ReactElement;
+export default function IconBox({ Icon, color, boxSize, iconSize, iconContainerProps, }: Props): React.ReactElement;
 export {};

package/components/Icon/IconBox/index.js

@@ -1,18 +1,19 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
+import Flex from "../../Layout/Flex";
 const DEFAULT_BOX_SIZE = 56;
 const DEFAULT_ICON_SIZE = 24;
-const IconContainer = styled.View `
-  width: ${(p) => (p.size ? p.size : DEFAULT_BOX_SIZE)}px;
-  height: ${(p) => (p.size ? p.size : DEFAULT_BOX_SIZE)}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-width: 1px;
-  border-color: ${(p) => p.theme.colors.neutral.c40};
+const IconContainer = styled(Flex).attrs(({ size = DEFAULT_BOX_SIZE }) => ({
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: "1px",
+    borderColor: "neutral.c40",
+    width: `${size}px`,
+    height: `${size}px`,
+})) `
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
-export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, }) {
+export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, iconContainerProps, }) {
     const { colors } = useTheme();
-    return (React.createElement(IconContainer, { size: boxSize }, React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
+    return (React.createElement(IconContainer, Object.assign({ size: boxSize }, iconContainerProps), React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
 }

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

@@ -2,9 +2,10 @@ import React from "react";
 import { FlatListProps } from "react-native";
 import type { HeaderProps } from "./Header";
 import { BaseStyledProps } from "../../styled";
-declare type ScrollContainerHeaderProps = BaseStyledProps & Omit<HeaderProps, "currentPositionY"> & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem" | "stickyHeaderIndices"> & {
+declare type ScrollContainerHeaderProps = BaseStyledProps & Omit<HeaderProps, "currentPositionY"> & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem"> & {
     children?: React.ReactNode;
     onScroll?: (y: number) => void;
+    containerProps?: BaseStyledProps;
 };
-declare const ScrollContainerHeader: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, ...props }: ScrollContainerHeaderProps) => JSX.Element;
+declare const ScrollContainerHeader: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps, ...props }: ScrollContainerHeaderProps) => JSX.Element;
 export default ScrollContainerHeader;

package/components/Layout/ScrollContainerHeader/index.js

@@ -12,21 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import { View } from "react-native";
 import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
+import Flex from "../Flex";
 import Header from "./Header";
 import baseStyled from "../../styled";
 const StyledFlatList = baseStyled.FlatList ``;
 const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
 const ScrollContainerHeader = (_a) => {
-    var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll"]);
+    var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll", "containerProps"]);
     const currentPositionY = useSharedValue(0);
     const handleScroll = useAnimatedScrollHandler((event) => {
         currentPositionY.value = event.contentOffset.y;
         if (onScroll)
             onScroll(event.contentOffset.y);
     });
-    return (React.createElement(AnimatedFlatList, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0], data: [
-            React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
-            children,
-        ], renderItem: ({ item, index }) => (React.createElement(View, { key: index }, item)) })));
+    return (React.createElement(Flex, Object.assign({ flex: 1 }, containerProps),
+        React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
+        React.createElement(AnimatedFlatList, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), keyExtractor: (_, index) => index }))));
 };
 export default ScrollContainerHeader;

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

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

package/components/Tabs/Graph/index.js

@@ -2,20 +2,26 @@ 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 TabText = styled(Text).attrs({
+    lineHeight: "48px",
+    textAlign: "center",
+    borderRadius: 48,
+    px: 24,
+    height: 48,
+}) ``;
 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))));
+export const GraphTab = ({ onPress, isActive, label, activeColor = "neutral.c100", activeBg = "primary.c20", }) => {
+    return (React.createElement(TabBbx, { onPress: onPress }, isActive ? (React.createElement(TabText, { variant: "body", bg: activeBg, color: activeColor, fontWeight: "semiBold" }, label)) : (React.createElement(TabText, { variant: "body" }, label))));
 };
 const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
 export default GraphTabs;

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

@@ -4,15 +4,21 @@ export declare type BaseTabsProps = {
     labels: string[];
     activeIndex: number;
     onChange: (newIndex: number) => void;
+    activeColor?: string;
+    activeBg?: string;
 };
 export declare type TabItemProps = Partial<BaseTabsProps> & {
     label: string;
     isActive: boolean;
     index: number;
     onPress: () => void;
+    activeColor?: string;
+    activeBg?: string;
 };
 export declare type TabsProps = BaseTabsProps & {
     Item: (props: TabItemProps) => React.ReactElement;
+    activeColor?: string;
+    activeBg?: string;
 };
 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;

package/components/Tabs/TemplateTabs/index.js

@@ -8,7 +8,7 @@ export const TabsContainer = styled(FlexBox).attrs({
   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) }))))));
+    const { labels, activeIndex, onChange, Item, activeColor, activeBg } = 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), activeColor: activeColor, activeBg: activeBg }))))));
 };
 export default TemplateTabsGroup;

package/components/Text/index.d.ts

@@ -10,7 +10,7 @@ export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps
     fontFamily?: string;
     fontSize?: number | string | TextVariants;
     color?: string;
-    lineHeight?: number;
+    lineHeight?: number | string;
     bracket?: boolean;
     textTransform?: TextStyle["textTransform"];
     uppercase?: boolean;

package/package.json

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