@ledgerhq/native-ui 0.8.3 → 0.9.0-nightly.2

package/lib/assets/cryptoIcons.d.ts

@@ -0,0 +1 @@
+export * from "@ledgerhq/crypto-icons-ui/native";

package/lib/assets/cryptoIcons.js

@@ -0,0 +1 @@
+export * from "@ledgerhq/crypto-icons-ui/native";

package/lib/assets/index.d.ts

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

package/lib/assets/index.js

@@ -2,3 +2,5 @@ import * as Icons_1 from "@ledgerhq/icons-ui/native";
 export { Icons_1 as Icons };
 import * as Logos_1 from "./logos";
 export { Logos_1 as Logos };
+import * as CryptoIcons_1 from "@ledgerhq/crypto-icons-ui/native";
+export { CryptoIcons_1 as CryptoIcons };

package/lib/components/Icon/CryptoIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type Props = {
+    name: string;
+    size?: number;
+    color?: string;
+    backgroundColor?: string;
+};
+export declare const iconNames: string[];
+declare const CryptoIcon: ({ name, size, color, backgroundColor }: Props) => JSX.Element | null;
+export default CryptoIcon;

package/lib/components/Icon/CryptoIcon.js

@@ -0,0 +1,23 @@
+import * as icons from "@ledgerhq/crypto-icons-ui/native";
+import React from "react";
+import { ensureContrast } from "../../styles";
+import { useTheme } from "styled-components/native";
+export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+    const key = rawKey;
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const CryptoIcon = ({ name, size = 16, color, backgroundColor }) => {
+    const maybeIconName = `${name}`;
+    const { colors } = useTheme();
+    if (maybeIconName in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[maybeIconName];
+        const defaultColor = Component.DefaultColor;
+        const contrastedColor = ensureContrast(color || defaultColor, backgroundColor || colors.background.main);
+        return React.createElement(Component, { size: size, color: contrastedColor });
+    }
+    return null;
+};
+export default CryptoIcon;

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

@@ -1,3 +1,4 @@
 export { default as IconBox } from "./IconBox";
 export { default as BoxedIcon } from "./BoxedIcon";
 export { default as Icon } from "./Icon";
+export { default as CryptoIcon } from "./CryptoIcon";

package/lib/components/Icon/index.js

@@ -1,3 +1,4 @@
 export { default as IconBox } from "./IconBox";
 export { default as BoxedIcon } from "./BoxedIcon";
 export { default as Icon } from "./Icon";
+export { default as CryptoIcon } from "./CryptoIcon";

package/lib/components/Layout/Divider/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="styled-components-react-native" />
+declare const Divider: 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;
+} & {
+    my: number;
+    height: number;
+    backgroundColor: string;
+}, "height" | "backgroundColor" | "my">;
+export default Divider;

package/lib/components/Layout/Divider/index.js

@@ -0,0 +1,8 @@
+import { Flex } from "../index";
+import styled from "styled-components/native";
+const Divider = styled(Flex).attrs(() => ({
+    my: 4,
+    height: 1,
+    backgroundColor: "neutral.c40",
+})) ``;
+export default Divider;

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

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
 export { default as Box } from "./Box";
+export { default as Divider } from "./Divider";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";

package/lib/components/Layout/index.js

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
 export { default as Box } from "./Box";
+export { default as Divider } from "./Divider";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";

package/lib/components/Text/getTextStyle.d.ts

@@ -1,6 +1,7 @@
 import { TextVariants } from "../../styles/theme";
 import { BaseTextProps } from "./index";
 export declare type FontWeightTypes = "medium" | "semiBold" | "bold";
+export declare const fontWeightTypes: FontWeightTypes[];
 export declare function getBracketSize({ variant }: {
     variant?: TextVariants;
 }): number;
@@ -11,6 +12,7 @@ export declare function getTextTypeStyle({ bracket }: {
     lineHeight?: string;
     paddingTop?: number;
     textTransform?: string;
+    letterSpacing?: number;
 }>;
 export declare function getTextStyle({ variant, bracket, fontWeight, }: Partial<BaseTextProps>): {
     fontFamily: string;

package/lib/components/Text/getTextStyle.js

@@ -1,5 +1,7 @@
+export const fontWeightTypes = ["medium", "semiBold", "bold"];
 const bracketSizes = {
     h1: 32,
+    h1Inter: 32,
     h2: 28,
     h3: 20,
     h4: 18,
@@ -24,6 +26,11 @@ export function getTextTypeStyle({ bracket }) {
             paddingTop: bracket ? 5 : 0,
             textTransform: "uppercase",
         },
+        h1Inter: {
+            fontFamily: "Inter",
+            lineHeight: "42px",
+            letterSpacing: -1,
+        },
         h2: {
             fontFamily: "Alpha",
             lineHeight: "28px",

package/lib/components/tags/Tag/index.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
 import { FlexBoxProps } from "../../Layout/Flex";
+import { IconType } from "../../Icon/type";
 export interface TagProps extends FlexBoxProps {
-    active?: boolean;
+    type?: "shade" | "color" | "warning";
+    size?: "small" | "medium";
+    Icon?: IconType;
     uppercase?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
-export default function Tag({ active, uppercase, children, ...props }: TagProps): JSX.Element;
+export default function Tag({ type, size, uppercase, Icon, children, ...props }: TagProps): JSX.Element;

package/lib/components/tags/Tag/index.js

@@ -12,8 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import Flex from "../../Layout/Flex";
 import Text from "../../Text";
+import { Box } from "../../Layout";
+const typeColor = {
+    color: "primary.c80",
+    shade: "neutral.c30",
+    warning: "warning.c100",
+};
 export default function Tag(_a) {
-    var { active, uppercase, children } = _a, props = __rest(_a, ["active", "uppercase", "children"]);
-    return (React.createElement(Flex, Object.assign({ px: 2, alignItems: "center", justifyContent: "center", borderRadius: 4, borderWidth: 1, borderColor: active ? "primary.c50" : "neutral.c40" }, props),
-        React.createElement(Text, { variant: "tiny", fontWeight: "semiBold", lineHeight: "16px", uppercase: uppercase !== false, textAlign: "center", color: active ? "primary.c70" : "neutral.c80" }, children)));
+    var { type = "shade", size = "small", uppercase, Icon, children } = _a, props = __rest(_a, ["type", "size", "uppercase", "Icon", "children"]);
+    return (React.createElement(Flex, Object.assign({ px: size === "small" ? "6px" : 3, alignItems: "center", justifyContent: "center", flexDirection: "row", borderRadius: 6, bg: typeColor[type], height: size === "small" ? "18px" : "28px" }, props),
+        Icon && (React.createElement(Box, { pr: 2 },
+            React.createElement(Icon, { size: size === "small" ? 16 : 20, color: type === "shade" ? "neutral.c90" : "neutral.c00" }))),
+        React.createElement(Text, { variant: size === "small" ? "subtitle" : "small", fontWeight: "bold", uppercase: uppercase !== false, textAlign: "center", color: type === "shade" ? "neutral.c90" : "neutral.c00" }, children)));
 }

package/lib/styles/helpers.d.ts

@@ -6,3 +6,4 @@ export declare const mix: (c: string, b: string, a: number) => string;
 export declare const getColor: (p: {
     colors: unknown;
 }, color: string) => string;
+export declare const ensureContrast: (color1: string, color2: string) => string;

package/lib/styles/helpers.js

@@ -12,3 +12,12 @@ export const getColor = (p, color) => {
     const c = get(p.colors, color);
     return c;
 };
+export const ensureContrast = (color1, color2) => {
+    const colorL1 = Color(color1).luminosity() + 0.05;
+    const colorL2 = Color(color2).luminosity() + 0.05;
+    const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
+    if (lRatio < 1.5) {
+        return Color(color1).rotate(180).negate().string();
+    }
+    return color1;
+};

package/lib/styles/theme.d.ts

@@ -1,8 +1,9 @@
 import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
-export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny";
+export declare const textVariants: readonly ["h1", "h1Inter", "h2", "h3", "h4", "h5", "large", "body", "bodyLineHeight", "paragraph", "paragraphLineHeight", "small", "subtitle", "tiny"];
+export declare type TextVariants = typeof textVariants[number];
 export declare type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
-export declare const fontSizes: ThemeScale<number, TextVariants>;
+export declare const fontSizes: ThemeScale<number, "h1" | "h1Inter" | "h2" | "h3" | "h4" | "h5" | "large" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny">;
 export declare const radii: number[];
 export declare const zIndexes: number[];
 export declare type Theme = {

package/lib/styles/theme.js

@@ -1,8 +1,24 @@
 import { palettes } from "@ledgerhq/ui-shared";
 //                    0  1  2  3  4   5   6   7   8   9   10  11  12  13  14
 export const space = [0, 2, 4, 8, 12, 14, 16, 24, 32, 40, 48, 64, 80, 96, 120];
-//                        0   1   2   3   4   5   6   7   8
-export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
+export const textVariants = [
+    "h1",
+    "h1Inter",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "large",
+    "body",
+    "bodyLineHeight",
+    "paragraph",
+    "paragraphLineHeight",
+    "small",
+    "subtitle",
+    "tiny",
+];
+//                        0   1   2   3   4   5   6   7   8   9
+export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28, 32];
 [
     fontSizes.tiny,
     fontSizes.subtitle,
@@ -13,6 +29,7 @@ export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
     fontSizes.h3,
     fontSizes.h2,
     fontSizes.h1,
+    fontSizes.h1Inter,
 ] = fontSizes;
 fontSizes.bodyLineHeight = fontSizes.body;
 fontSizes.paragraphLineHeight = fontSizes.paragraph;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.8.3",
+  "version": "0.9.0-nightly.2",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -32,6 +32,7 @@
     "lib/**/*"
   ],
   "dependencies": {
+    "@ledgerhq/crypto-icons-ui": "^0.2.0-nightly.0",
     "@ledgerhq/icons-ui": "^0.2.7",
     "@ledgerhq/ui-shared": "^0.1.9",
     "@types/color": "^3.0.3",
@@ -140,7 +141,7 @@
   "scripts": {
     "android": "expo start --android",
     "build": "tsc -p tsconfig.prod.json && node scripts/postBuild",
-    "prebuild:storybook": "pnpm -F ui-shared -F icons-ui build",
+    "prebuild:storybook": "pnpm -F ui-shared -F icons-ui -F crypto-icons-ui build",
     "build:storybook": "pnpm build-storybook -o web-build",
     "watch": "tsc -p tsconfig.prod.json --watch",
     "clean": "rimraf lib",