@ledgerhq/native-ui 0.2.0 → 0.6.0

package/components/Form/Input/SearchInput/index.d.ts

@@ -1,3 +1,14 @@
-/// <reference types="react" />
+import React from "react";
+import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
-export default function SearchInput(props: InputProps): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & React.RefAttributes<TextInput>>;
+export default _default;

package/components/Form/Input/SearchInput/index.js

@@ -3,9 +3,10 @@ import styled from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
 import SearchMedium from "@ledgerhq/icons-ui/native/SearchMedium";
 const Icon = styled(SearchMedium).attrs((p) => ({
-    color: p.theme.colors.palette.neutral.c70,
+    color: p.theme.colors.neutral.c70,
 })) ``;
-export default function SearchInput(props) {
-    return (React.createElement(Input, Object.assign({}, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
+function SearchInput(props, ref) {
+    return (React.createElement(Input, Object.assign({ ref: ref }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
             React.createElement(Icon, null)) })));
 }
+export default React.forwardRef(SearchInput);

package/components/Form/SelectableList.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { GestureResponderEvent } from "react-native";
+export declare type ElementProps<V> = React.PropsWithChildren<{
+    first?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    value?: V;
+    onPress?: ((event: GestureResponderEvent) => void) | undefined;
+    Icon?: (props: {
+        size?: number;
+        color?: string;
+    }) => React.ReactElement;
+}>;
+export declare type Props<V> = React.PropsWithChildren<{
+    currentValue?: V;
+    onChange: (newValue: V) => void;
+}>;
+declare function SelectableList<V>({ currentValue, onChange, children }: Props<V>): JSX.Element;
+declare namespace SelectableList {
+    var Element: <V>({ first, value, selected, disabled, onPress, children, Icon, }: ElementProps<V>) => JSX.Element;
+}
+export default SelectableList;

package/components/Form/SelectableList.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import styled from "styled-components/native";
+import Flex from "../Layout/Flex";
+import { Text } from "../index";
+const ElementContainer = styled(Flex).attrs({
+    accessible: true,
+    accessibilityRole: "radio",
+}) ``;
+function Element({ first, value, selected, disabled, onPress, children, Icon, }) {
+    return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled },
+        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "neutral.c00", border: "1px solid", borderColor: selected ? "primary.c100" : "neutral.c40", borderRadius: 1, flexDirection: "row", alignItems: "center" },
+            Icon && (React.createElement(Flex, { mr: 6 },
+                React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }))),
+            React.createElement(Text, { variant: "large", color: disabled ? "neutral.c50" : "neutral.c100" }, children || value))));
+}
+function SelectableList({ currentValue, onChange, children }) {
+    return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child))
+            return null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const casted = child;
+        return React.cloneElement(casted, {
+            first: index === 0,
+            onPress: () => onChange(casted === null || casted === void 0 ? void 0 : casted.props.value),
+            selected: (casted === null || casted === void 0 ? void 0 : casted.props.value) === currentValue,
+        });
+    })));
+}
+SelectableList.Element = Element;
+export default SelectableList;

package/components/Form/Slider/components.js

@@ -17,19 +17,19 @@ export const RailSelected = styled.View `
   margin-left: -5px;
   margin-right: -5px;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c40};
+  background-color: ${(p) => p.theme.colors.primary.c40};
   border-radius: 30px;
 `;
 export const Rail = styled.View `
   flex: 1;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c30};
+  background-color: ${(p) => p.theme.colors.neutral.c30};
   border-radius: 30px;
 `;
 const ThumbContainer = styled.View `
   height: 40px;
   width: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c90};
+  background-color: ${(p) => p.theme.colors.primary.c90};
   border-radius: 40px;
   display: flex;
   align-items: center;
@@ -38,7 +38,7 @@ const ThumbContainer = styled.View `
 export const Thumb = () => {
     const { colors } = useTheme();
     return (React.createElement(ThumbContainer, null,
-        React.createElement(ArrowsHMedium, { color: colors.palette.neutral.c00, size: 24 })));
+        React.createElement(ArrowsHMedium, { color: colors.neutral.c00, size: 24 })));
 };
 const LabelContainer = styled.View `
   display: flex;
@@ -46,10 +46,10 @@ const LabelContainer = styled.View `
   justify-content: center;
   align-items: center;
   padding: 3.5px 6px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c20};
+  background-color: ${(p) => p.theme.colors.primary.c20};
   border-radius: 4px;
 `;
 export const Label = ({ children }) => {
     return (React.createElement(LabelContainer, null,
-        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "palette.primary.c90" }, children)));
+        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "primary.c90" }, children)));
 };

package/components/Form/Slider/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SliderProps } from "./index.native";
 declare const SliderScreen: (_props: SliderProps) => JSX.Element;
 export default SliderScreen;

package/components/Form/Slider/index.native.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type SliderProps = {
     step: number;
     min: number;

package/components/Form/Slider/index.native.js

@@ -20,7 +20,7 @@ const Slider = ({ value, min, max, step, onChange, disabled }) => {
                 width: "100%",
             }, min: min, max: max, low: value, disabled: disabled, step: step, disableRange: true, floatingLabel: true, renderThumb: Thumb, renderRail: renderRail, renderRailSelected: renderRailSelected, renderLabel: renderLabel, renderNotch: renderNotch, onValueChanged: onChange }),
         React.createElement(MinMaxTextContainer, null,
-            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "palette.neutral.c70" }, min),
-            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "palette.neutral.c70" }, max))));
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, min),
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, max))));
 };
 export default Slider;

package/components/Form/Switch/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type SwitchProps = {
     checked: boolean;
     onChange?: (value: boolean) => void;

package/components/Form/Switch/index.js

@@ -7,9 +7,9 @@ const Switch = ({ checked, onChange, disabled, label, }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
         React.createElement(NativeSwitch, { trackColor: {
-                false: colors.palette.neutral.c50,
-                true: colors.palette.primary.c80,
-            }, thumbColor: colors.palette.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.palette.neutral.c50 }),
-        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.palette.primary.c90 : colors.palette.neutral.c100, style: { marginLeft: space[3] } }, label)) : null));
+                false: colors.neutral.c50,
+                true: colors.primary.c80,
+            }, thumbColor: colors.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.neutral.c50 }),
+        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[3] } }, label)) : null));
 };
 export default Switch;

package/components/Form/Toggle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ButtonProps } from "../../cta/Button";
 declare type ToggleProps = {
     active?: boolean;

package/components/Form/index.d.ts

@@ -2,3 +2,5 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as Toggle } from "./Toggle";
+export { default as SelectableList } from "./SelectableList";

package/components/Form/index.js

@@ -2,3 +2,5 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as Toggle } from "./Toggle";
+export { default as SelectableList } from "./SelectableList";

package/components/Icon/IconBox/index.js

@@ -9,11 +9,11 @@ const IconContainer = styled.View `
   align-items: center;
   justify-content: center;
   border-width: 1px;
-  border-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  border-color: ${(p) => p.theme.colors.neutral.c40};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
 export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, }) {
     const { colors } = useTheme();
     return (React.createElement(IconContainer, { size: boxSize },
-        React.createElement(Icon, { size: iconSize, color: color || colors.palette.neutral.c100 })));
+        React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 })));
 }

package/components/Layout/Box/index.d.ts

@@ -0,0 +1,11 @@
+import { BaseStyledProps } from "../../styled";
+export declare type BoxProps = BaseStyledProps;
+declare const Box: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, 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?: number | undefined;
+}, never>;
+export default Box;

package/components/Layout/Box/index.js

@@ -0,0 +1,3 @@
+import baseStyled from "../../styled";
+const Box = baseStyled.View ``;
+export default Box;

package/components/Layout/Flex/index.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { BackgroundProps, ColorProps, FlexboxProps, LayoutProps, SpaceProps } from "styled-system";
-export interface Props extends ColorProps, BackgroundProps, LayoutProps, FlexboxProps, SpaceProps {
-    alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
-    flexBasis?: string;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-    children?: React.ReactNode;
-    style?: Record<string, unknown>;
-}
-declare const FlexBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, Props, never>;
+import { BaseStyledProps } from "../../styled";
+export declare type FlexBoxProps = BaseStyledProps;
+export declare type Props = FlexBoxProps;
+declare const FlexBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, 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?: number | undefined;
+}, never>;
 export default FlexBox;

package/components/Layout/Flex/index.js

@@ -1,11 +1,5 @@
-import styled from "styled-components/native";
-import { background, color, flexbox, layout, space, } from "styled-system";
-const FlexBox = styled.View `
+import baseStyled from "../../styled";
+const FlexBox = baseStyled.View `
   display: flex;
-  ${flexbox};
-  ${space};
-  ${background};
-  ${color};
-  ${layout};
 `;
 export default FlexBox;

package/components/Layout/Modals/BaseModal/index.js

@@ -19,7 +19,7 @@ import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const { width, height } = sizes;
 const Container = styled.View `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
   padding: 16px;
   min-height: 350px;
@@ -43,14 +43,14 @@ const StyledTitle = styled(Text).attrs({ variant: "h3" }) `
 `;
 const StyledDescription = styled(Text).attrs({
     variant: "body",
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
 }) `
   text-transform: capitalize;
   margin-top: ${(p) => p.theme.space[2]}px;
 `;
 const StyledSubtitle = styled(Text).attrs({
     variant: "subtitle",
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
 }) `
   text-transform: uppercase;
   margin-bottom: ${(p) => p.theme.space[2]}px;
@@ -77,7 +77,7 @@ export default function BaseModal(_a) {
                 Icon && (React.createElement(FlexBox, { mb: 24 }, typeof Icon === "function"
                     ? Icon({
                         size: 48,
-                        color: iconColor || colors.palette.neutral.c100,
+                        color: iconColor || colors.neutral.c100,
                     })
                     : Icon)),
                 subtitle && React.createElement(StyledSubtitle, null, subtitle),

package/components/Layout/ScrollContainerHeader/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Animated from "react-native-reanimated";
 export declare type HeaderProps = {
     TopLeftSection?: JSX.Element;

package/components/Layout/ScrollContainerHeader/Header.js

@@ -6,7 +6,7 @@ import Flex from "../Flex";
 const Container = styled(Flex).attrs({
     paddingHorizontal: 16,
 }) `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
 `;
 const SCROLL_BREAKPOINT = 80;

package/components/Layout/index.d.ts

@@ -1,4 +1,7 @@
+export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
+export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";

package/components/Layout/index.js

@@ -1,4 +1,7 @@
+export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
+export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";

package/components/Loader/index.js

@@ -10,8 +10,8 @@ const iconSize = radius * 0.88;
 const iconOffset = radius - iconSize / 2;
 const ProgressLoader = ({ progress = 0, onPress, Icon, }) => {
     const { colors } = useTheme();
-    const backgroundColor = colors.palette.primary.c20;
-    const progressColor = colors.palette.primary.c90;
+    const backgroundColor = colors.primary.c20;
+    const progressColor = colors.primary.c90;
     const strokeDashoffset = circumference - progress * circumference;
     return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
         React.createElement(Svg, { width: radius * 2, height: radius * 2 },

package/components/Navigation/FlowStepper/index.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+import { TransitionProps } from "../../transitions";
+interface InnerProps {
+    /**
+     * The active index.
+     */
+    activeIndex: number;
+    /**
+     * The total number of steps.
+     */
+    stepsLength: number;
+}
+export interface RenderTransitionProps extends InnerProps, TransitionProps {
+    /**
+     * The index of the child.
+     */
+    index: number;
+    /**
+     * The previously active index.
+     */
+    previousActiveIndex: number | null;
+}
+export interface Props<ExtraProps> {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * An optional header displayed above the progress bar.
+     */
+    header?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * An optional footer displayed below the body.
+     */
+    footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * Extra props that are passed to the header and footer render functions.
+     */
+    extraProps?: ExtraProps;
+    /**
+     * **Use this prop in combination with `transitionDuration`.**
+     *
+     * A render function wrapping every children which allows using transitions.
+     * This function is called with various useful arguments, most notably:
+     * - the child index
+     * - the current active index
+     * - the previous active index
+     * - the transition status ("entered", "entering", "exiting" or "exited")
+     */
+    renderTransition?: (props: RenderTransitionProps) => JSX.Element | null;
+    /**
+     * **Use this prop in combination with `renderTransition`.**
+     *
+     * If this prop is true and if `renderTransition` is used
+     * then specifies the duration of the transition in milliseconds.
+     */
+    transitionDuration?: number;
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: React.ReactNode;
+}
+declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
+export default FlowStepper;

package/components/Navigation/FlowStepper/index.js

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from "react";
+import { SafeAreaView } from "react-native";
+import Flex from "../../Layout/Flex";
+import ProgressBar from "../../ProgressBar";
+import { Transition, } from "../../transitions";
+function FlowStepper({ activeIndex, header, footer, extraProps, renderTransition, transitionDuration = 0, children, }) {
+    const previousActiveIndex = useRef(null);
+    const stepsLength = React.Children.count(children);
+    useEffect(() => () => {
+        previousActiveIndex.current = activeIndex;
+    }, [activeIndex]);
+    return (React.createElement(Flex, { flex: 1 },
+        header &&
+            header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })),
+        React.createElement(SafeAreaView, { style: { flex: 1 } },
+            React.createElement(ProgressBar, { index: activeIndex, length: stepsLength }),
+            React.createElement(Flex, { flex: 1 }, React.Children.map(children, (child, index) => {
+                if (renderTransition && transitionDuration) {
+                    return (React.createElement(Transition, { in: index === activeIndex, timeout: transitionDuration, mountOnEnter: true, unmountOnExit: true }, (status) => {
+                        return renderTransition({
+                            index,
+                            activeIndex,
+                            previousActiveIndex: previousActiveIndex.current,
+                            stepsLength,
+                            status,
+                            duration: transitionDuration,
+                            children: child,
+                        });
+                    }));
+                }
+                else {
+                    return index === activeIndex ? child : null;
+                }
+            })),
+            footer &&
+                footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })))));
+}
+export default FlowStepper;

package/components/Navigation/SlideIndicator/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import styled from "styled-components/native";
-import Animated, { useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
+import Animated, { useDerivedValue, useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
 const Container = styled.View `
   flex-direction: row;
   align-items: center;
@@ -8,15 +8,19 @@ const Container = styled.View `
   height: 6px;
   position: relative;
 `;
-const Bullet = styled.TouchableOpacity `
+const bulletStyle = `
   width: 6px;
   height: 6px;
   border-radius: 6px;
   margin: 0 6px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
 `;
-const ActiveBullet = styled(Bullet) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+const Bullet = styled.TouchableOpacity `
+  ${bulletStyle}
+  background-color: ${(p) => p.theme.colors.neutral.c40};
+`;
+const ActiveBullet = styled.View.attrs({ pointerEvents: "none" }) `
+  ${bulletStyle}
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   position: absolute;
   top: 0;
   left: 0;
@@ -28,10 +32,13 @@ const config = {
 };
 function SlideIndicator({ slidesLength, activeIndex = 0, onChange, }) {
     const slidesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
-    const activeSize = useMemo(() => (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
-        12, [activeIndex, slidesLength]);
+    const activeSize = useDerivedValue(() => {
+        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
+            12;
+        return size;
+    }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({
-        width: withTiming(activeSize, config),
+        width: withTiming(activeSize.value, config),
     }));
     return (React.createElement(Container, null,
         slidesArray.map((_, index) => (React.createElement(Bullet, { key: index, onPress: () => onChange(index) }))),

package/components/Navigation/Stepper/index.js

@@ -19,12 +19,12 @@ import Animated, { useAnimatedStyle, withTiming, withDelay, Easing, } from "reac
 const Separator = styled.View `
   flex: 1;
   height: 1px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
   ${space}
 `;
 const SeparatorFilling = Animated.createAnimatedComponent(styled.View `
   height: 100%;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
 `);
 const AnimatedSeparator = (_a) => {
     var { filled, delay, duration } = _a, spaceProps = __rest(_a, ["filled", "delay", "duration"]);
@@ -67,13 +67,13 @@ const StepIcon = {
     width: ${(p) => p.theme.space[2]}px;
     height: ${(p) => p.theme.space[2]}px;
     border-radius: ${(p) => p.theme.radii[2]}px;
-    background-color: ${(p) => p.theme.colors.palette.primary.c90};
+    background-color: ${(p) => p.theme.colors.primary.c90};
   `,
     Pending: styled.View `
     width: ${(p) => p.theme.space[1]}px;
     height: ${(p) => p.theme.space[1]}px;
     border-radius: ${(p) => p.theme.space[1]}px;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c70};
+    background-color: ${(p) => p.theme.colors.neutral.c70};
   `,
     Completed: ({ color }) => (React.createElement(CheckAlone, { size: 16, color: color })),
     Errored: ({ color }) => (React.createElement(CloseMedium, { size: 16, color: color })),
@@ -85,13 +85,13 @@ const StepView = styled.View `
   justify-content: center;
 `;
 const ActiveText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const PendingText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c70};
+  color: ${(p) => p.theme.colors.neutral.c70};
 `;
 const ErroredText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
 `;
 function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const labelText = useMemo(() => {
@@ -109,14 +109,14 @@ function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const icon = useMemo(() => {
         switch (state) {
             case "COMPLETED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
-                    React.createElement(StepIcon.Completed, { color: colors.palette.primary.c90 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
+                    React.createElement(StepIcon.Completed, { color: colors.primary.c90 })));
             case "CURRENT":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
                     React.createElement(StepIcon.Current, null)));
             case "ERRORED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.warning.c30" },
-                    React.createElement(StepIcon.Errored, { color: colors.palette.error.c100 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "warning.c30" },
+                    React.createElement(StepIcon.Errored, { color: colors.error.c100 })));
             case "PENDING":
                 return (React.createElement(StepIcon.Background, null,
                     React.createElement(StepIcon.Pending, null)));

package/components/Navigation/index.d.ts

@@ -1,2 +1,3 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
+export { default as FlowStepper } from "./FlowStepper";

package/components/Navigation/index.js

@@ -1,2 +1,3 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
+export { default as FlowStepper } from "./FlowStepper";

package/components/ProgressBar/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FlexBoxProps } from "../Layout/Flex";
+export interface Props extends FlexBoxProps {
+    /**
+     * The index of the active step.
+     */
+    index: number;
+    /**
+     * The total number of steps.
+     */
+    length: number;
+}
+declare function ProgressBar({ index, length, ...props }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ProgressBar>;
+export default _default;