@ledgerhq/native-ui 0.31.2-nightly.0 → 0.32.0-nightly.1

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { FlexBoxProps } from "../Layout/Flex";
+export interface PointProgressProps extends FlexBoxProps {
+    start: number;
+    end: number;
+    current: number;
+}
+export declare function ProgressPoint({ start, end, current, ...props }: PointProgressProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ProgressPoint>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressPoint/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAa,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAIpD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAgBD,wBAAgB,aAAa,CAAC,EAAE,KAAS,EAAE,GAAS,EAAE,OAAW,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAiBhG;;AAED,wBAAyC"}

package/lib/components/ProgressPoint/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components/native";
+import Flex from "../Layout/Flex";
+import Animated, { useDerivedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
+import Box from "../Layout/Box";
+const Container = styled(Flex) `
+  width: 100%;
+  position: relative;
+`;
+const Point = styled(Box) `
+  position: absolute;
+  width: 4px;
+  height: 9px;
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.colors.primary.c100};
+`;
+const AnimatedPoint = Animated.createAnimatedComponent(Point);
+export function ProgressPoint({ start = 0, end = 100, current = 0, ...props }) {
+    const percentage = useDerivedValue(() => {
+        const range = end - start;
+        if (range <= 0)
+            return 0;
+        return Math.max(0, Math.min(100, ((current - start) / range) * 100));
+    }, [start, end, current]);
+    const animatedPointStyle = useAnimatedStyle(() => ({
+        left: withTiming(`${percentage.value}%`, { duration: 300 }),
+        transform: [{ translateX: -6 }],
+    }));
+    return (React.createElement(Container, { height: 9, bg: "neutral.c40", borderRadius: 4, ...props },
+        React.createElement(AnimatedPoint, { style: animatedPointStyle })));
+}
+export default React.memo(ProgressPoint);

package/lib/components/index.d.ts

@@ -11,5 +11,6 @@ export { default as Carousel } from "./Carousel";
 export * from "./Tabs";
 export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
+export { default as ProgressPoint } from "./ProgressPoint";
 export * as Transitions from "./transitions";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC"}

package/lib/components/index.js

@@ -11,5 +11,6 @@ export { default as Carousel } from "./Carousel";
 export * from "./Tabs";
 export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
+export { default as ProgressPoint } from "./ProgressPoint";
 import * as Transitions_1 from "./transitions";
 export { Transitions_1 as Transitions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.31.2-nightly.0",
+  "version": "0.32.0-nightly.1",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -40,8 +40,8 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "@ledgerhq/crypto-icons-ui": "^1.12.0-nightly.0",
-    "@ledgerhq/icons-ui": "^0.9.0",
-    "@ledgerhq/ui-shared": "^0.3.0"
+    "@ledgerhq/ui-shared": "^0.3.0",
+    "@ledgerhq/icons-ui": "^0.9.0"
   },
   "peerDependencies": {
     "react": ">=17",