@ledgerhq/lumen-ui-rnative 0.1.8 → 0.1.9

package/dist/module/lib/Components/Stepper/Stepper.js

@@ -0,0 +1,188 @@
+"use strict";
+
+import { getStepperCalculations } from '@ledgerhq/lumen-utils-shared';
+import { useEffect } from 'react';
+import Animated, { cancelAnimation, useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+import { useCommonTranslation } from "../../../i18n/index.js";
+import { useTheme } from "../../../styles/index.js";
+import { useTimingConfig } from "../../Animations/useTimingConfig.js";
+import { Box } from "../Utility/Box/index.js";
+import { Text } from "../Utility/Text/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SIZE = 48;
+const STROKE_WIDTH = 4;
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const _worklet_3381650496170_init_data = {
+  code: "function StepperTsx1(){const{animatedOffset}=this.__closure;return{strokeDashoffset:animatedOffset.value};}",
+  location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/Stepper/Stepper.tsx",
+  sourceMap: "{\"version\":3,\"names\":[\"StepperTsx1\",\"animatedOffset\",\"__closure\",\"strokeDashoffset\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/Stepper/Stepper.tsx\"],\"mappings\":\"AAsCI,SAAAA,YAAA,QAAAC,cAAA,OAAAC,SAAA,OAAO,CACLC,gBAAgB,CAAEF,cAAc,CAACG,KACnC,CAAC\",\"ignoreList\":[]}"
+};
+const useAnimatedProgress = ({
+  progressDashOffset
+}) => {
+  const animatedOffset = useSharedValue(progressDashOffset);
+  const timingConfig = useTimingConfig({
+    duration: 300,
+    easing: 'easeInOut'
+  });
+  useEffect(() => {
+    animatedOffset.value = withTiming(progressDashOffset, timingConfig);
+    return () => cancelAnimation(animatedOffset);
+  }, [progressDashOffset, animatedOffset, timingConfig]);
+  const animatedProgress = useAnimatedProps(function StepperTsx1Factory({
+    _worklet_3381650496170_init_data,
+    animatedOffset
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const StepperTsx1 = () => ({
+      strokeDashoffset: animatedOffset.value
+    });
+    StepperTsx1.__closure = {
+      animatedOffset
+    };
+    StepperTsx1.__workletHash = 3381650496170;
+    StepperTsx1.__pluginVersion = "0.6.1";
+    StepperTsx1.__initData = _worklet_3381650496170_init_data;
+    StepperTsx1.__stackDetails = _e;
+    return StepperTsx1;
+  }({
+    _worklet_3381650496170_init_data,
+    animatedOffset
+  }), [animatedOffset]);
+  return animatedProgress;
+};
+
+/**
+ * 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
+}) => {
+  const {
+    t
+  } = useCommonTranslation();
+  const {
+    theme
+  } = useTheme();
+  const {
+    displayLabel,
+    r,
+    cx,
+    cy,
+    trackDashArray,
+    progressDashArray,
+    progressDashOffset
+  } = getStepperCalculations({
+    currentStep,
+    totalSteps,
+    size: SIZE,
+    label,
+    strokeWidth: STROKE_WIDTH
+  });
+  const animatedProgress = useAnimatedProgress({
+    progressDashOffset
+  });
+  return /*#__PURE__*/_jsxs(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,
+    children: [/*#__PURE__*/_jsxs(Svg, {
+      width: SIZE,
+      height: SIZE,
+      viewBox: `0 0 ${SIZE} ${SIZE}`,
+      style: {
+        transform: [{
+          rotate: '135deg'
+        }]
+      },
+      children: [/*#__PURE__*/_jsx(Circle, {
+        cx: cx,
+        cy: cy,
+        r: r,
+        fill: "none",
+        stroke: theme.colors.border.mutedSubtle,
+        strokeLinecap: "round",
+        strokeWidth: STROKE_WIDTH,
+        strokeDasharray: trackDashArray,
+        strokeDashoffset: 0
+      }), /*#__PURE__*/_jsx(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,
+        animatedProps: animatedProgress
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      lx: {
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        top: 's0',
+        left: 's0',
+        right: 's0',
+        bottom: 's0'
+      },
+      children: label ? /*#__PURE__*/_jsx(Text, {
+        typography: "body2SemiBold",
+        lx: {
+          color: 'base'
+        },
+        children: label
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          typography: "body1SemiBold",
+          lx: {
+            color: 'base'
+          },
+          children: Math.min(Math.max(currentStep, 0), totalSteps)
+        }), /*#__PURE__*/_jsxs(Text, {
+          typography: "body2SemiBold",
+          lx: {
+            color: 'muted'
+          },
+          children: ["/", totalSteps]
+        })]
+      })
+    })]
+  });
+};
+Stepper.displayName = 'Stepper';
+//# sourceMappingURL=Stepper.js.map

package/dist/module/lib/Components/Stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getStepperCalculations","useEffect","Animated","cancelAnimation","useAnimatedProps","useSharedValue","withTiming","Svg","Circle","useCommonTranslation","useTheme","useTimingConfig","Box","Text","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SIZE","STROKE_WIDTH","AnimatedCircle","createAnimatedComponent","_worklet_3381650496170_init_data","code","location","sourceMap","useAnimatedProgress","progressDashOffset","animatedOffset","timingConfig","duration","easing","value","animatedProgress","StepperTsx1Factory","_e","global","Error","StepperTsx1","strokeDashoffset","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","Stepper","lx","currentStep","totalSteps","disabled","label","ref","props","t","theme","displayLabel","r","cx","cy","trackDashArray","progressDashArray","size","strokeWidth","accessibilityRole","accessibilityValue","now","min","max","text","accessibilityLabel","Math","width","height","flexShrink","alignItems","justifyContent","borderRadius","children","viewBox","style","transform","rotate","fill","stroke","colors","border","mutedSubtle","strokeLinecap","strokeDasharray","mutedSubtleHover","active","animatedProps","position","flexDirection","top","left","right","bottom","typography","color","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/Stepper/Stepper.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/Stepper/Stepper.mdx

@@ -0,0 +1,215 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import * as StepperStories from './Stepper.stories';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
+
+<Meta title='Communication/Stepper/Docs' of={StepperStories} />
+
+# 🔄 Stepper
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+The Stepper component provides visual feedback for multi-step processes and workflows. It displays progress as a circular indicator showing the current step out of total steps, helping users understand where they are in a sequence.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11977-94&m=dev).
+
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
+
+<Canvas of={StepperStories.Base} />
+<Controls of={StepperStories.Base} />
+
+## 🎯 Anatomy
+
+The Stepper consists of:
+- **Track Circle**: A muted circular background showing the full progress path
+- **Progress Arc**: A colored arc that fills clockwise from the top, representing completed progress
+- **Label**: Centered text showing "current/total" steps (e.g., "2/4")
+
+The progress arc starts at the top (12 o'clock position) and fills clockwise. When at 0% progress, a small dot appears at the top instead of an empty arc.
+
+---
+
+## 🏷️ Labels
+
+**Default label**: The default label is "currentStep/totalSteps" (e.g., "2/4").
+
+
+### Step Ranges
+- **`totalSteps`** must be between **2** and **9**
+- **`currentStep`** must be between **0** and **`totalSteps`**
+- Use `currentStep={0}` to show the initial state (minimal dot before starting)
+
+> ⚠️ Using more than **9** total steps or exceeding the valid range may cause the UI to break and text to be truncated inside the circular indicator.
+
+> ⚠️ Values outside valid ranges are automatically clamped: **`currentStep`** is kept between **0** and **`totalSteps`**.
+
+## 🎨 Disabled State
+
+The Stepper supports a disabled state that changes the progress arc to a muted appearance:
+
+<Canvas of={StepperStories.DisabledShowcase} />
+
+
+## Custom Labels
+
+By default, the stepper displays "currentStep/totalSteps" (e.g., "2/4"). You can provide a custom label for special cases:
+
+<Canvas of={StepperStories.WithCustomLabel} />
+
+> ⚠️ **Note**: The label and step counts are automatically truncated if they overflow the circular indicator. Keep custom labels short to ensure readability within the 48px circle.
+
+---
+
+## Usage Guidelines
+
+### Best Practices
+
+- Keep step counts reasonable (typically 3-7 steps)
+- Use descriptive labels when the numeric format isn't clear
+- Combine with textual step indicators for better context
+- Use disabled for paused or inactive steppers
+
+</Tab>
+<Tab label="Implementation">
+
+## Installation
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+Import and use the Stepper component:
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Stepper } from '@ledgerhq/lumen-ui-rnative';
+
+function OnboardingFlow() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const totalSteps = 4;
+
+  return (
+    <View>
+      <Stepper currentStep={currentStep} totalSteps={totalSteps} />
+      {/* Your step content */}
+    </View>
+  );
+}
+```
+
+### With Disabled State
+
+Control the visual state based on step completion:
+
+```tsx
+import React from 'react';
+import { Box, Stepper } from '@ledgerhq/lumen-ui-rnative';
+
+function MultiStepForm() {
+  return (
+    <Box lx={{ flexDirection: 'row', gap: 's16' }}>
+      <Stepper currentStep={1} totalSteps={3} />
+      <Stepper currentStep={2} totalSteps={3} />
+      <Stepper currentStep={0} totalSteps={3} disabled />
+    </Box>
+  );
+}
+```
+
+### Custom Labels
+
+Provide custom labels for localized or descriptive text:
+
+```tsx
+import React from 'react';
+import { Stepper } from '@ledgerhq/lumen-ui-rnative';
+
+function LocalizedStepper() {
+  const currentStep = 3;
+  const totalSteps = 5;
+  
+  return (
+    <Stepper 
+      currentStep={currentStep} 
+      totalSteps={totalSteps}
+      label={`Étape ${currentStep} sur ${totalSteps}`}
+    />
+  );
+}
+```
+
+## Do's and Don'ts
+
+<Box lx={{ gap: 's24' }}>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Provide meaningful step counts'
+      description='Use realistic total steps that match your flow'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Stepper currentStep={3} totalSteps={5} />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use for single-step processes"
+      description='Steppers are for multi-step workflows only'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Stepper currentStep={1} totalSteps={1} />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use disabled for paused steppers'
+      description='Reserve disabled for steppers that are not actively progressing'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Stepper 
+  currentStep={2} 
+  totalSteps={4} 
+  disabled 
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't disable active steps"
+      description='Active steps in progress should not be disabled'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Stepper 
+  currentStep={2} 
+  totalSteps={4} 
+  disabled // Wrong for active step
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</Box>
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Components/Stepper/Stepper.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import { Box } from "../Utility/Box/index.js";
+import { Text } from "../Utility/Text/index.js";
+import { Stepper } from "./Stepper.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Communication/Stepper',
+  component: Stepper,
+  parameters: {
+    actions: {
+      disable: true
+    }
+  },
+  argTypes: {
+    currentStep: {
+      control: 'number'
+    },
+    totalSteps: {
+      control: 'number'
+    },
+    disabled: {
+      control: 'boolean'
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    currentStep: 2,
+    totalSteps: 4
+  },
+  render: args => /*#__PURE__*/_jsx(Stepper, {
+    ...args
+  })
+};
+export const DisabledShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      gap: 's32',
+      alignItems: 'center'
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      lx: {
+        alignItems: 'center',
+        gap: 's8'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        typography: "body3",
+        lx: {
+          color: 'muted'
+        },
+        children: "Default (2/4)"
+      }), /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 2,
+        totalSteps: 4
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      lx: {
+        alignItems: 'center',
+        gap: 's8'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        typography: "body3",
+        lx: {
+          color: 'muted'
+        },
+        children: "Disabled (2/4)"
+      }), /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 2,
+        totalSteps: 4,
+        disabled: true
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      lx: {
+        alignItems: 'center',
+        gap: 's8'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        typography: "body3",
+        lx: {
+          color: 'muted'
+        },
+        children: "Unstarted (0/9)"
+      }), /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 0,
+        totalSteps: 9
+      })]
+    })]
+  })
+};
+export const WithCustomLabel = {
+  args: {
+    currentStep: 5,
+    totalSteps: 5,
+    label: '🎉'
+  },
+  render: args => /*#__PURE__*/_jsx(Stepper, {
+    ...args
+  })
+};
+//# sourceMappingURL=Stepper.stories.js.map

package/dist/module/lib/Components/Stepper/Stepper.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Box","Text","Stepper","jsx","_jsx","jsxs","_jsxs","meta","title","component","parameters","actions","disable","argTypes","currentStep","control","totalSteps","disabled","Base","args","render","DisabledShowcase","lx","gap","alignItems","children","typography","color","WithCustomLabel","label"],"sourceRoot":"../../../../../src","sources":["lib/Components/Stepper/Stepper.stories.tsx"],"mappings":";;AACA,SAASA,GAAG,QAAQ,yBAAgB;AACpC,SAASC,IAAI,QAAQ,0BAAiB;AACtC,SAASC,OAAO,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpC,MAAMC,IAA0B,GAAG;EACjCC,KAAK,EAAE,uBAAuB;EAC9BC,SAAS,EAAEP,OAAO;EAClBQ,UAAU,EAAE;IACVC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAK;EAC3B,CAAC;EACDC,QAAQ,EAAE;IACRC,WAAW,EAAE;MAAEC,OAAO,EAAE;IAAS,CAAC;IAClCC,UAAU,EAAE;MAAED,OAAO,EAAE;IAAS,CAAC;IACjCE,QAAQ,EAAE;MAAEF,OAAO,EAAE;IAAU;EACjC;AACF,CAAC;AAED,eAAeR,IAAI;AAGnB,OAAO,MAAMW,IAAW,GAAG;EACzBC,IAAI,EAAE;IACJL,WAAW,EAAE,CAAC;IACdE,UAAU,EAAE;EACd,CAAC;EACDI,MAAM,EAAGD,IAAI,iBAAKf,IAAA,CAACF,OAAO;IAAA,GAAKiB;EAAI,CAAG;AACxC,CAAC;AAED,OAAO,MAAME,gBAAuB,GAAG;EACrCD,MAAM,EAAEA,CAAA,kBACNd,KAAA,CAACN,GAAG;IAACsB,EAAE,EAAE;MAAEC,GAAG,EAAE,KAAK;MAAEC,UAAU,EAAE;IAAS,CAAE;IAAAC,QAAA,gBAC5CnB,KAAA,CAACN,GAAG;MAACsB,EAAE,EAAE;QAAEE,UAAU,EAAE,QAAQ;QAAED,GAAG,EAAE;MAAK,CAAE;MAAAE,QAAA,gBAC3CrB,IAAA,CAACH,IAAI;QAACyB,UAAU,EAAC,OAAO;QAACJ,EAAE,EAAE;UAAEK,KAAK,EAAE;QAAQ,CAAE;QAAAF,QAAA,EAAC;MAEjD,CAAM,CAAC,eACPrB,IAAA,CAACF,OAAO;QAACY,WAAW,EAAE,CAAE;QAACE,UAAU,EAAE;MAAE,CAAE,CAAC;IAAA,CACvC,CAAC,eACNV,KAAA,CAACN,GAAG;MAACsB,EAAE,EAAE;QAAEE,UAAU,EAAE,QAAQ;QAAED,GAAG,EAAE;MAAK,CAAE;MAAAE,QAAA,gBAC3CrB,IAAA,CAACH,IAAI;QAACyB,UAAU,EAAC,OAAO;QAACJ,EAAE,EAAE;UAAEK,KAAK,EAAE;QAAQ,CAAE;QAAAF,QAAA,EAAC;MAEjD,CAAM,CAAC,eACPrB,IAAA,CAACF,OAAO;QAACY,WAAW,EAAE,CAAE;QAACE,UAAU,EAAE,CAAE;QAACC,QAAQ;MAAA,CAAE,CAAC;IAAA,CAChD,CAAC,eACNX,KAAA,CAACN,GAAG;MAACsB,EAAE,EAAE;QAAEE,UAAU,EAAE,QAAQ;QAAED,GAAG,EAAE;MAAK,CAAE;MAAAE,QAAA,gBAC3CrB,IAAA,CAACH,IAAI;QAACyB,UAAU,EAAC,OAAO;QAACJ,EAAE,EAAE;UAAEK,KAAK,EAAE;QAAQ,CAAE;QAAAF,QAAA,EAAC;MAEjD,CAAM,CAAC,eACPrB,IAAA,CAACF,OAAO;QAACY,WAAW,EAAE,CAAE;QAACE,UAAU,EAAE;MAAE,CAAE,CAAC;IAAA,CACvC,CAAC;EAAA,CACH;AAET,CAAC;AAED,OAAO,MAAMY,eAAsB,GAAG;EACpCT,IAAI,EAAE;IACJL,WAAW,EAAE,CAAC;IACdE,UAAU,EAAE,CAAC;IACba,KAAK,EAAE;EACT,CAAC;EACDT,MAAM,EAAGD,IAAI,iBAAKf,IAAA,CAACF,OAAO;IAAA,GAAKiB;EAAI,CAAG;AACxC,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Stepper/Stepper.test.js

@@ -0,0 +1,154 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { Stepper } from "./Stepper.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+describe('Stepper Component', () => {
+  it('should render with i18n accessibility label', async () => {
+    const {
+      findByLabelText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 2,
+        totalSteps: 4
+      })
+    }));
+    const stepper = await findByLabelText('Step 2 of 4');
+    expect(stepper).toBeTruthy();
+    expect(stepper.props.accessibilityRole).toBe('progressbar');
+    expect(stepper.props.accessibilityValue).toEqual(expect.objectContaining({
+      now: 2,
+      min: 1,
+      max: 4,
+      text: '2/4'
+    }));
+  });
+  it('should render with custom label', () => {
+    const {
+      getByLabelText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 3,
+        totalSteps: 5,
+        label: "Step 3 of 5"
+      })
+    }));
+    const stepper = getByLabelText('Step 3 of 5');
+    expect(stepper).toBeTruthy();
+  });
+  it('should render active border color by default', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 1,
+        totalSteps: 4,
+        testID: "stepper"
+      })
+    }));
+    const stepper = getByTestId('stepper');
+    expect(stepper).toBeTruthy();
+  });
+  it('should render disabled style when disabled', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 2,
+        totalSteps: 4,
+        disabled: true,
+        testID: "stepper"
+      })
+    }));
+    const stepper = getByTestId('stepper');
+    expect(stepper).toBeTruthy();
+  });
+  it('should clamp currentStep to totalSteps in display', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 10,
+        totalSteps: 4
+      })
+    }));
+    expect(getByText('4')).toBeTruthy();
+    expect(getByText('/4')).toBeTruthy();
+  });
+  it('should handle zero totalSteps gracefully', async () => {
+    const {
+      findByLabelText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 1,
+        totalSteps: 0
+      })
+    }));
+    const stepper = await findByLabelText('Step 0 of 0');
+    expect(stepper).toBeTruthy();
+  });
+  it('should handle currentStep <= 0 (minimal dot)', async () => {
+    const {
+      findByLabelText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 0,
+        totalSteps: 4
+      })
+    }));
+    const stepper = await findByLabelText('Step 0 of 4');
+    expect(stepper).toBeTruthy();
+  });
+  it('should clamp negative currentStep to 0', async () => {
+    const {
+      findByLabelText,
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: -3,
+        totalSteps: 4
+      })
+    }));
+    const stepper = await findByLabelText('Step 0 of 4');
+    expect(stepper).toBeTruthy();
+    expect(stepper.props.accessibilityValue).toEqual(expect.objectContaining({
+      now: -3,
+      min: 1,
+      max: 4,
+      text: '0/4'
+    }));
+    expect(getByText('0')).toBeTruthy();
+    expect(getByText('/4')).toBeTruthy();
+  });
+  it('should apply custom lx props', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(Stepper, {
+        currentStep: 2,
+        totalSteps: 4,
+        testID: "stepper",
+        lx: {
+          marginTop: 's8'
+        }
+      })
+    }));
+    const stepper = getByTestId('stepper');
+    const style = stepper.props.style;
+    const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
+    expect(flatStyle.marginTop).toBe(8);
+  });
+});
+//# sourceMappingURL=Stepper.test.js.map

package/dist/module/lib/Components/Stepper/Stepper.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","React","ThemeProvider","Stepper","jsx","_jsx","TestWrapper","children","themes","colorScheme","locale","findByLabelText","currentStep","totalSteps","stepper","toBeTruthy","props","accessibilityRole","toBe","accessibilityValue","toEqual","objectContaining","now","min","max","text","getByLabelText","label","getByTestId","testID","disabled","getByText","lx","marginTop","style","flatStyle","Array","isArray","Object","assign"],"sourceRoot":"../../../../../src","sources":["lib/Components/Stepper/Stepper.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,QAAQ,eAAe;AACpD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,QAAQ,+BAA+B;AACtD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,mCAAgC;AAC9D,SAASC,OAAO,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAwC,CAAC,kBAC9DF,IAAA,CAACH,aAAa;EAACM,MAAM,EAAET,gBAAiB;EAACU,WAAW,EAAC,MAAM;EAACC,MAAM,EAAC,IAAI;EAAAH,QAAA,EACpEA;AAAQ,CACI,CAChB;AAEDX,QAAQ,CAAC,mBAAmB,EAAE,MAAM;EAClCC,EAAE,CAAC,6CAA6C,EAAE,YAAY;IAC5D,MAAM;MAAEc;IAAgB,CAAC,GAAGX,MAAM,cAChCK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,CAAE;QAACC,UAAU,EAAE;MAAE,CAAE;IAAC,CAC/B,CACf,CAAC;IACD,MAAMC,OAAO,GAAG,MAAMH,eAAe,CAAC,aAAa,CAAC;IACpDb,MAAM,CAACgB,OAAO,CAAC,CAACC,UAAU,CAAC,CAAC;IAC5BjB,MAAM,CAACgB,OAAO,CAACE,KAAK,CAACC,iBAAiB,CAAC,CAACC,IAAI,CAAC,aAAa,CAAC;IAC3DpB,MAAM,CAACgB,OAAO,CAACE,KAAK,CAACG,kBAAkB,CAAC,CAACC,OAAO,CAC9CtB,MAAM,CAACuB,gBAAgB,CAAC;MACtBC,GAAG,EAAE,CAAC;MACNC,GAAG,EAAE,CAAC;MACNC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE;IACR,CAAC,CACH,CAAC;EACH,CAAC,CAAC;EAEF5B,EAAE,CAAC,iCAAiC,EAAE,MAAM;IAC1C,MAAM;MAAE6B;IAAe,CAAC,GAAG1B,MAAM,cAC/BK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,CAAE;QAACC,UAAU,EAAE,CAAE;QAACc,KAAK,EAAC;MAAa,CAAE;IAAC,CACnD,CACf,CAAC;IACD,MAAMb,OAAO,GAAGY,cAAc,CAAC,aAAa,CAAC;IAC7C5B,MAAM,CAACgB,OAAO,CAAC,CAACC,UAAU,CAAC,CAAC;EAC9B,CAAC,CAAC;EAEFlB,EAAE,CAAC,8CAA8C,EAAE,MAAM;IACvD,MAAM;MAAE+B;IAAY,CAAC,GAAG5B,MAAM,cAC5BK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,CAAE;QAACC,UAAU,EAAE,CAAE;QAACgB,MAAM,EAAC;MAAS,CAAE;IAAC,CAChD,CACf,CAAC;IACD,MAAMf,OAAO,GAAGc,WAAW,CAAC,SAAS,CAAC;IACtC9B,MAAM,CAACgB,OAAO,CAAC,CAACC,UAAU,CAAC,CAAC;EAC9B,CAAC,CAAC;EAEFlB,EAAE,CAAC,4CAA4C,EAAE,MAAM;IACrD,MAAM;MAAE+B;IAAY,CAAC,GAAG5B,MAAM,cAC5BK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,CAAE;QAACC,UAAU,EAAE,CAAE;QAACiB,QAAQ;QAACD,MAAM,EAAC;MAAS,CAAE;IAAC,CACzD,CACf,CAAC;IACD,MAAMf,OAAO,GAAGc,WAAW,CAAC,SAAS,CAAC;IACtC9B,MAAM,CAACgB,OAAO,CAAC,CAACC,UAAU,CAAC,CAAC;EAC9B,CAAC,CAAC;EAEFlB,EAAE,CAAC,mDAAmD,EAAE,MAAM;IAC5D,MAAM;MAAEkC;IAAU,CAAC,GAAG/B,MAAM,cAC1BK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,EAAG;QAACC,UAAU,EAAE;MAAE,CAAE;IAAC,CAChC,CACf,CAAC;IACDf,MAAM,CAACiC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAChB,UAAU,CAAC,CAAC;IACnCjB,MAAM,CAACiC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAChB,UAAU,CAAC,CAAC;EACtC,CAAC,CAAC;EAEFlB,EAAE,CAAC,0CAA0C,EAAE,YAAY;IACzD,MAAM;MAAEc;IAAgB,CAAC,GAAGX,MAAM,cAChCK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,CAAE;QAACC,UAAU,EAAE;MAAE,CAAE;IAAC,CAC/B,CACf,CAAC;IACD,MAAMC,OAAO,GAAG,MAAMH,eAAe,CAAC,aAAa,CAAC;IACpDb,MAAM,CAACgB,OAAO,CAAC,CAACC,UAAU,CAAC,CAAC;EAC9B,CAAC,CAAC;EAEFlB,EAAE,CAAC,8CAA8C,EAAE,YAAY;IAC7D,MAAM;MAAEc;IAAgB,CAAC,GAAGX,MAAM,cAChCK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,CAAE;QAACC,UAAU,EAAE;MAAE,CAAE;IAAC,CAC/B,CACf,CAAC;IACD,MAAMC,OAAO,GAAG,MAAMH,eAAe,CAAC,aAAa,CAAC;IACpDb,MAAM,CAACgB,OAAO,CAAC,CAACC,UAAU,CAAC,CAAC;EAC9B,CAAC,CAAC;EAEFlB,EAAE,CAAC,wCAAwC,EAAE,YAAY;IACvD,MAAM;MAAEc,eAAe;MAAEoB;IAAU,CAAC,GAAG/B,MAAM,cAC3CK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QAACS,WAAW,EAAE,CAAC,CAAE;QAACC,UAAU,EAAE;MAAE,CAAE;IAAC,CAChC,CACf,CAAC;IACD,MAAMC,OAAO,GAAG,MAAMH,eAAe,CAAC,aAAa,CAAC;IACpDb,MAAM,CAACgB,OAAO,CAAC,CAACC,UAAU,CAAC,CAAC;IAC5BjB,MAAM,CAACgB,OAAO,CAACE,KAAK,CAACG,kBAAkB,CAAC,CAACC,OAAO,CAC9CtB,MAAM,CAACuB,gBAAgB,CAAC;MACtBC,GAAG,EAAE,CAAC,CAAC;MACPC,GAAG,EAAE,CAAC;MACNC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE;IACR,CAAC,CACH,CAAC;IACD3B,MAAM,CAACiC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAChB,UAAU,CAAC,CAAC;IACnCjB,MAAM,CAACiC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAChB,UAAU,CAAC,CAAC;EACtC,CAAC,CAAC;EAEFlB,EAAE,CAAC,8BAA8B,EAAE,MAAM;IACvC,MAAM;MAAE+B;IAAY,CAAC,GAAG5B,MAAM,cAC5BK,IAAA,CAACC,WAAW;MAAAC,QAAA,eACVF,IAAA,CAACF,OAAO;QACNS,WAAW,EAAE,CAAE;QACfC,UAAU,EAAE,CAAE;QACdgB,MAAM,EAAC,SAAS;QAChBG,EAAE,EAAE;UAAEC,SAAS,EAAE;QAAK;MAAE,CACzB;IAAC,CACS,CACf,CAAC;IACD,MAAMnB,OAAO,GAAGc,WAAW,CAAC,SAAS,CAAC;IACtC,MAAMM,KAAK,GAAGpB,OAAO,CAACE,KAAK,CAACkB,KAAK;IACjC,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAClCI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAGL,KAAK,CAAC,GAC3BA,KAAK;IACTpC,MAAM,CAACqC,SAAS,CAACF,SAAS,CAAC,CAACf,IAAI,CAAC,CAAC,CAAC;EACrC,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}