@ledgerhq/lumen-ui-rnative 0.0.71 → 0.0.73

package/src/lib/Components/Stepper/Stepper.tsx

@@ -0,0 +1,159 @@
+import { getStepperCalculations } from '@ledgerhq/lumen-utils-shared';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useCommonTranslation } from '../../../i18n';
+import { useTheme } from '../../../styles';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
+import { StepperProps } from './types';
+
+const SIZE = 48;
+const STROKE_WIDTH = 4;
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+/**
+ * A circular stepper component showing progress as current step out of total steps.
+ * Renders a track arc with a progress arc and a center label.
+ *
+ * @see [Figma – Stepper](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11977-94&m=dev)
+ *
+ * @example
+ * <Stepper currentStep={1} totalSteps={4} />
+ * <Stepper currentStep={0} totalSteps={9} disabled /> // Shows minimal dot, disabled style
+ */
+export const Stepper = ({
+  lx = {},
+  currentStep,
+  totalSteps,
+  disabled = false,
+  label,
+  ref,
+  ...props
+}: StepperProps) => {
+  const { t } = useCommonTranslation();
+  const { theme } = useTheme();
+
+  const {
+    displayLabel,
+    r,
+    cx,
+    cy,
+    trackDashArray,
+    progressDashArray,
+    progressDashOffset,
+  } = getStepperCalculations({
+    currentStep,
+    totalSteps,
+    size: SIZE,
+    label,
+    strokeWidth: STROKE_WIDTH,
+  });
+
+  const animatedOffset = useRef(new Animated.Value(progressDashOffset)).current;
+
+  useEffect(() => {
+    const animation = Animated.timing(animatedOffset, {
+      toValue: progressDashOffset,
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [progressDashOffset, animatedOffset]);
+
+  return (
+    <Box
+      ref={ref}
+      accessibilityRole='progressbar'
+      accessibilityValue={{
+        now: currentStep,
+        min: 1,
+        max: totalSteps,
+        text: displayLabel,
+      }}
+      accessibilityLabel={
+        label ??
+        t('components.stepper.progressAriaLabel', {
+          currentStep: Math.min(Math.max(currentStep, 0), totalSteps),
+          totalSteps,
+        })
+      }
+      lx={{
+        width: 's48',
+        height: 's48',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 'full',
+        ...lx,
+      }}
+      {...props}
+    >
+      <Svg
+        width={SIZE}
+        height={SIZE}
+        viewBox={`0 0 ${SIZE} ${SIZE}`}
+        style={{ transform: [{ rotate: '135deg' }] }}
+      >
+        <Circle
+          cx={cx}
+          cy={cy}
+          r={r}
+          fill='none'
+          stroke={theme.colors.border.mutedSubtle}
+          strokeLinecap='round'
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={trackDashArray}
+          strokeDashoffset={0}
+        />
+        <AnimatedCircle
+          cx={cx}
+          cy={cy}
+          r={r}
+          fill='none'
+          stroke={
+            disabled
+              ? theme.colors.border.mutedSubtleHover
+              : theme.colors.border.active
+          }
+          strokeLinecap='round'
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={progressDashArray}
+          strokeDashoffset={animatedOffset}
+        />
+      </Svg>
+      <Box
+        lx={{
+          position: 'absolute',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'row',
+          top: 's0',
+          left: 's0',
+          right: 's0',
+          bottom: 's0',
+        }}
+      >
+        {label ? (
+          <Text typography='body2SemiBold' lx={{ color: 'base' }}>
+            {label}
+          </Text>
+        ) : (
+          <>
+            <Text typography='body1SemiBold' lx={{ color: 'base' }}>
+              {Math.min(Math.max(currentStep, 0), totalSteps)}
+            </Text>
+            <Text typography='body2SemiBold' lx={{ color: 'muted' }}>
+              /{totalSteps}
+            </Text>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+Stepper.displayName = 'Stepper';

package/src/lib/Components/Stepper/index.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './types';

package/src/lib/Components/Stepper/types.ts

@@ -0,0 +1,21 @@
+import { StyledViewProps } from '../../../styles';
+
+export type StepperProps = {
+  /**
+   * Current step number (1-based). Use 0 or negative to show minimal dot (before starting).
+   */
+  currentStep: number;
+  /**
+   * Total number of steps.
+   */
+  totalSteps: number;
+  /**
+   * Whether the stepper is disabled. Changes the progress arc to a muted style.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Optional custom label. Defaults to "{currentStep}/{totalSteps}".
+   */
+  label?: string;
+} & Omit<StyledViewProps, 'children'>;

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx

@@ -114,8 +114,6 @@ export const WithMultipleStops: Story = {
     },
   },
   render: (args) => {
-    const { theme } = useTheme();
-    console.log({ theme });
     return (
       <Box lx={{ gap: 's12' }}>
         <LinearGradient {...args} />

package/src/lib/Components/index.ts

@@ -17,7 +17,10 @@ export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';
 export * from './Select';
+export * from './Skeleton';
+export * from './Spinner';
 export * from './Spot';
+export * from './Stepper';
 export * from './Subheader';
 export * from './Switch';
 export * from './TabBar';