@ledgerhq/native-ui 0.19.1-nightly.0 → 0.20.0-nightly.1

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { FlexBoxProps } from "../Layout/Flex";
+import { IconOrElementType } from "./type";
+export declare const DEFAULT_ICON_SIZE = 16;
+export type IconBadgeProps = FlexBoxProps & {
+    /**
+     * 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: IconOrElementType;
+    /**
+     * 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;
+};
+declare const IconBadge: ({ Icon, iconSize, iconColor, ...rest }: IconBadgeProps) => JSX.Element;
+export default IconBadge;

package/lib/components/Icon/IconBadge.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 from "react";
+import Flex from "../Layout/Flex";
+export const DEFAULT_ICON_SIZE = 16;
+const BORDER_RADIUS = 999999;
+const IconBadge = (_a) => {
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, rest = __rest(_a, ["Icon", "iconSize", "iconColor"]);
+    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: "neutral.c40", borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? Icon : React.createElement(Icon, { size: iconSize, color: iconColor })));
+};
+export default IconBadge;

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

@@ -1,4 +1,5 @@
 export { default as IconBox } from "./IconBox";
+export { default as IconBadge } from "./IconBadge";
 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,4 +1,5 @@
 export { default as IconBox } from "./IconBox";
+export { default as IconBadge } from "./IconBadge";
 export { default as BoxedIcon } from "./BoxedIcon";
 export { default as Icon } from "./Icon";
 export { default as CryptoIcon } from "./CryptoIcon";

package/lib/components/Layout/List/VerticalStepper/StepperItem.d.ts

@@ -5,7 +5,7 @@ export type Props = {
     progress?: number;
     nested?: boolean;
     isLastItem?: boolean;
-    setActiveIndex?: (_: number) => void;
+    onTapIndex?: (_: number) => void;
     index: number;
 };
-export default function StepperItem({ item, progress, nested, isLastItem, setActiveIndex, index, }: Props): JSX.Element;
+export default function StepperItem({ item, progress, nested, isLastItem, onTapIndex, index, }: Props): JSX.Element;

package/lib/components/Layout/List/VerticalStepper/StepperItem.js

@@ -11,7 +11,7 @@ const Container = styled(Flex) `
   border-bottom-width: ${(p) => (p.nested ? 0 : 1)}px;
   border-bottom-color: ${(p) => p.isLastItem && p.status !== "inactive" ? "transparent" : p.theme.colors.neutral.c40};
 `;
-export default function StepperItem({ item, progress, nested, isLastItem, setActiveIndex, index, }) {
+export default function StepperItem({ item, progress, nested, isLastItem, onTapIndex, index, }) {
     var _a;
     /**
      * Having an initial value of null will prevent having "height: 0" before the
@@ -36,8 +36,8 @@ export default function StepperItem({ item, progress, nested, isLastItem, setAct
         });
     }, []);
     const handlePress = useCallback(() => {
-        setActiveIndex && setActiveIndex(index);
-    }, [setActiveIndex, index]);
+        onTapIndex && onTapIndex(index);
+    }, [onTapIndex, index]);
     return (React.createElement(Pressable, { onPress: handlePress },
         React.createElement(Flex, { flexDirection: "row" },
             React.createElement(Container, { nested: nested, status: item.status, isLastItem: isLastItem },

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

@@ -1,13 +1,21 @@
-/// <reference types="react" />
+import React from "react";
 import { BaseStyledProps } from "src/components/styled";
 import { Item } from "../types";
 export type Props = BaseStyledProps & {
     steps?: Item[];
-    setActiveIndex?: (arg0: number) => void;
+    onTapIndex?: (arg0: number) => void;
     nested?: boolean;
 };
-declare function VerticalStepper({ steps, setActiveIndex, nested, ...props }: Props): JSX.Element;
-declare namespace VerticalStepper {
-    var ItemStatus: typeof import("../types").ItemStatus;
-}
-export default VerticalStepper;
+declare const _default: React.NamedExoticComponent<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?: string | number | undefined;
+} & {
+    steps?: Item[] | undefined;
+    onTapIndex?: ((arg0: number) => void) | undefined;
+    nested?: boolean | undefined;
+}>;
+export default _default;

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

@@ -12,11 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import StepperItem from "./StepperItem";
 import { Flex } from "../..";
-import { ItemStatus } from "../types";
-export default function VerticalStepper(_a) {
-    var { steps, setActiveIndex, nested } = _a, props = __rest(_a, ["steps", "setActiveIndex", "nested"]);
+export default React.memo(function VerticalStepper(_a) {
+    var { steps, onTapIndex, nested } = _a, props = __rest(_a, ["steps", "onTapIndex", "nested"]);
     return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }),
         nested && React.createElement(Flex, { mt: 7, mb: 4, borderBottomWidth: 1, borderBottomColor: "neutral.c40" }), steps === null || steps === void 0 ? void 0 :
-        steps.map((step, index) => (React.createElement(StepperItem, { key: step.title, item: step, progress: step.progress, nested: nested, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))));
-}
-VerticalStepper.ItemStatus = ItemStatus;
+        steps.map((step, index) => (React.createElement(StepperItem, { key: step.title, item: step, progress: step.progress, nested: nested, isLastItem: index === steps.length - 1, onTapIndex: onTapIndex, index: index })))));
+});

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

@@ -3,4 +3,5 @@ export { default as IconBoxList } from "./IconBoxList";
 export { default as TipList } from "./TipList";
 export { default as NumberedList } from "./NumberedList";
 export { default as VerticalTimeline } from "./VerticalTimeline";
+export { ItemStatus } from "./types";
 export { default as VerticalStepper } from "./VerticalStepper";

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

@@ -3,4 +3,5 @@ export { default as IconBoxList } from "./IconBoxList";
 export { default as TipList } from "./TipList";
 export { default as NumberedList } from "./NumberedList";
 export { default as VerticalTimeline } from "./VerticalTimeline";
+export { ItemStatus } from "./types";
 export { default as VerticalStepper } from "./VerticalStepper";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.19.1-nightly.0",
+  "version": "0.20.0-nightly.1",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "@types/styled-components-react-native": "^5.3.3",
     "react": ">=17",
     "react-native": ">=0.64.0",
-    "react-native-reanimated": "^2.9.1",
+    "react-native-reanimated": "^3.0.0",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -65,6 +65,11 @@
     "@babel/generator": "^7.17.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-arrow-functions": "^7.20.7",
+    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+    "@babel/plugin-transform-template-literals": "^7.18.9",
     "@babel/preset-env": "^7.15.8",
     "@babel/runtime": "^7.17.2",
     "@emotion/core": "^10.3.1",
@@ -139,7 +144,7 @@
     "react-dom": "^18",
     "react-is": "^18",
     "react-native": "0.71.6",
-    "react-native-reanimated": "^2.15.0",
+    "react-native-reanimated": "^3.1.0",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-web": "~0.18.12",
     "regenerator-runtime": "^0.13.9",