@ledgerhq/native-ui 0.30.0-nightly.0 → 0.30.1-nightly.0

package/lib/components/Cards/NewBannerCard/index.d.ts

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react";
+import * as Icons from "@ledgerhq/icons-ui/native";
+import type { BaseStyledProps } from "../../styled";
+type Props = BaseStyledProps & Readonly<{
+    title?: string;
+    description: string;
+    cta: ReactNode;
+    icon: keyof typeof Icons;
+    hasExternalLinkIcon?: boolean;
+    unread?: boolean;
+    onPress: () => void;
+}>;
+export default function NewBannerCard({ title, description, cta, icon, hasExternalLinkIcon, unread, onPress, p, borderRadius, ...styledProps }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Cards/NewBannerCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Cards/NewBannerCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,KAAK,MAAM,2BAA2B,CAAC;AAGnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,KAAK,KAAK,GAAG,eAAe,GAC1B,QAAQ,CAAC;IACP,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,SAAS,CAAC;IACf,IAAI,EAAE,MAAM,OAAO,KAAK,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC,CAAC;AAEL,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,WAAW,EACX,GAAG,EACH,IAAI,EACJ,mBAAmB,EACnB,MAAM,EACN,OAAO,EACP,CAAK,EACL,YAAiB,EACjB,GAAG,WAAW,EACf,EAAE,KAAK,qBAsDP"}

package/lib/components/Cards/NewBannerCard/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { useTheme } from "styled-components/native";
+import * as Icons from "@ledgerhq/icons-ui/native";
+import { BannerIcon } from "../../Icon";
+import { Flex } from "../../Layout";
+import Text from "../../Text";
+export default function NewBannerCard({ title, description, cta, icon, hasExternalLinkIcon, unread, onPress, p = 4, borderRadius = 12, ...styledProps }) {
+    const { theme } = useTheme();
+    return (React.createElement(Pressable, { onPress: onPress, style: (p) => [{ opacity: p.pressed ? 0.2 : 1.0 }] },
+        React.createElement(Flex, { flexDirection: "row", alignItems: "center", bg: theme === "dark" ? "opacityDefault.c05" : "background.default", p: p, borderRadius: borderRadius, ...styledProps },
+            React.createElement(Flex, { position: "relative" },
+                React.createElement(BannerIcon, { icon: icon }),
+                !!unread && (React.createElement(Flex, { bg: "error.c60", height: 8, width: 8, borderRadius: 4, position: "absolute", right: 0, bottom: 0 }))),
+            React.createElement(Flex, { ml: 5, flexShrink: 1 },
+                title && (React.createElement(Text, { color: "neutral.c70", variant: "subtitle" }, title)),
+                React.createElement(Text, { color: "neutral.c100", variant: "body", mt: 2 }, description),
+                React.createElement(Flex, { mt: 3, flexDirection: "row", alignItems: "center" },
+                    React.createElement(Text, { color: "primary.c80", variant: "paragraph", fontWeight: "semiBold", pr: hasExternalLinkIcon ? 3 : 0 }, cta),
+                    hasExternalLinkIcon && React.createElement(Icons.ExternalLink, { size: "S", color: "primary.c80" }))))));
+}

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

@@ -3,4 +3,5 @@ export { default as SideImageCard } from "./SideImageCard";
 export { default as NotificationCard } from "./NotificationCard";
 export { default as InformativeCard } from "./InformativeCard";
 export { default as BannerCard } from "./BannerCard";
+export { default as NewBannerCard } from "./NewBannerCard";
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Cards/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Cards/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Cards/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/Cards/index.js

@@ -3,3 +3,4 @@ export { default as SideImageCard } from "./SideImageCard";
 export { default as NotificationCard } from "./NotificationCard";
 export { default as InformativeCard } from "./InformativeCard";
 export { default as BannerCard } from "./BannerCard";
+export { default as NewBannerCard } from "./NewBannerCard";

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

@@ -0,0 +1,9 @@
+import React from "react";
+import * as Icons from "@ledgerhq/icons-ui/native";
+type IconKey = keyof typeof Icons;
+type Props = Readonly<{
+    icon: IconKey;
+}>;
+export default function BannerIcon({ icon }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=BannerIcon.d.ts.map

package/lib/components/Icon/BannerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/BannerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,KAAK,MAAM,2BAA2B,CAAC;AAInD,KAAK,OAAO,GAAG,MAAM,OAAO,KAAK,CAAC;AAelC,KAAK,KAAK,GAAG,QAAQ,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,qBAajD"}

package/lib/components/Icon/BannerIcon.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import styled, { useTheme } from "styled-components/native";
+import * as Icons from "@ledgerhq/icons-ui/native";
+import { Flex } from "../Layout";
+function getColorsByIcon(colors) {
+    const { warning } = colors;
+    return {
+        Warning: { fg: warning.c80, bg: warning.c30 },
+    };
+}
+function getDefaultDefaultColors({ primary }) {
+    return { fg: primary.c80, bg: primary.c80 };
+}
+export default function BannerIcon({ icon }) {
+    const { colors } = useTheme();
+    const defaultColors = getDefaultDefaultColors(colors);
+    const safeIcon = icon in Icons ? icon : "Information";
+    const Icon = Icons[safeIcon];
+    const { fg: iconColor = defaultColors.fg, bg: iconBgColor = defaultColors.bg } = getColorsByIcon(colors)[safeIcon] ?? {};
+    return (React.createElement(IconContainer, { color: iconBgColor },
+        React.createElement(Icon, { color: iconColor })));
+}
+function IconContainer({ color, children }) {
+    const { theme } = useTheme();
+    return (React.createElement(Flex, { width: 52, height: 52, alignItems: "center", justifyContent: "center" },
+        React.createElement(IconBg, { viewBox: "0 0 52 52", fill: "none" },
+            React.createElement(Defs, null,
+                React.createElement(VGradient, { id: "fillGrad", gradient: theme === "dark"
+                        ? { 0: ["#FFF", 0.05], 1: ["#1D1C1F", 0] }
+                        : { 0: ["#1D1C1F", 0.05], 1: ["#1D1C1F", 0] } }),
+                React.createElement(VGradient, { id: "strokeGrad", gradient: theme === "dark"
+                        ? { 0: ["#FFF", 1], 1: ["#000", 0.5] }
+                        : { 0: ["#000", 0.3], 1: ["#000", 0] } })),
+            React.createElement(Square, { offset: 0, size: 52, rx: 13.5, fill: "url(#fillGrad)" }),
+            React.createElement(BorderSquare, { offset: 0.25, size: 51.5, rx: 13.5, stroke: "url(#strokeGrad)" }),
+            React.createElement(Square, { offset: 7.25, size: 38, rx: 8.7, fill: color, fillOpacity: 0.08 })),
+        children));
+}
+function Square({ offset, size, ...rectProps }) {
+    return React.createElement(Rect, { x: offset, y: offset, width: size, height: size, ...rectProps });
+}
+function VGradient({ id, gradient }) {
+    return (React.createElement(LinearGradient, { id: id, x1: "0", y1: "0", x2: "0", y2: "100%", gradientUnits: "userSpaceOnUse" }, Object.entries(gradient).map(([offset, [hex, opacity]]) => (React.createElement(Stop, { key: offset, offset: offset, stopColor: hex, stopOpacity: opacity })))));
+}
+const IconBg = styled(Svg).attrs({ xmlns: "http://www.w3.org/2000/svg" }) `
+  position: absolute;
+  inset: 0;
+`;
+const BorderSquare = styled(Square) `
+  stroke-opacity: 0.16px;
+  stroke-width: 0.5px;
+`;

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

@@ -3,4 +3,5 @@ export { default as IconBadge } from "./IconBadge";
 export { default as BoxedIcon } from "./BoxedIcon";
 export { default as Icon } from "./Icon";
 export { default as CryptoIcon } from "./CryptoIcon";
+export { default as BannerIcon } from "./BannerIcon";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/Icon/index.js

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

package/lib/components/Text/getTextStyle.js

@@ -36,13 +36,13 @@ export function getTextTypeStyle({ bracket }) {
         },
         h2: {
             fontFamily: "Alpha",
-            lineHeight: "32px",
+            lineHeight: "34px",
             paddingTop: bracket ? 3 : 0,
             textTransform: "uppercase",
         },
         h3: {
             fontFamily: "Alpha",
-            lineHeight: "24px",
+            lineHeight: "26px",
             paddingTop: bracket ? 5 : 0,
             textTransform: "uppercase",
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.30.0-nightly.0",
+  "version": "0.30.1-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -39,8 +39,8 @@
     "react-native-modal": "^13.0.0",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.9.0",
-    "@ledgerhq/icons-ui": "^0.8.1",
+    "@ledgerhq/crypto-icons-ui": "^1.10.0",
+    "@ledgerhq/icons-ui": "^0.9.0-nightly.0",
     "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {