@draftbit/core 44.1.15 → 44.2.1-ada448.0

package/src/components/RadioButton/context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+export var Direction;
+(function (Direction) {
+    Direction["Horizontal"] = "horizontal";
+    Direction["Vertical"] = "vertical";
+})(Direction || (Direction = {}));
+export const radioButtonGroupContext = createContext({
+    onValueChange: () => { },
+    value: "",
+    direction: undefined,
+});
+export function useRadioButtonGroupContext() {
+    return useContext(radioButtonGroupContext);
+}

package/src/components/RadioButton/index.js

@@ -0,0 +1,4 @@
+export { default as RadioButton } from "./RadioButton";
+export { default as RadioButtonGroup } from "./RadioButtonGroup";
+export { default as RadioButtonRow } from "./RadioButtonRow";
+export { default as RadioButtonFieldGroup } from "./RadioButtonFieldGroup";

package/src/components/ResizeMode.js

@@ -0,0 +1 @@
+export {};

package/src/components/Row.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { View, Text, Image, StyleSheet, } from "react-native";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const Row = ({ titleTypeStyle, titleColor, subtitleTypeStyle, subtitleColor, title, subtitle, multilineSubtitle, image, right, style, }) => {
+    return (React.createElement(View, { style: [styles.container, { padding: 16 }, style] },
+        React.createElement(View, { style: styles.leftContainer },
+            image && (React.createElement(Image, { source: typeof image === "string" ? { uri: image } : image, style: {
+                    marginRight: 12,
+                    width: subtitle
+                        ? Config.rowMultiLineImageSize
+                        : Config.rowSingleLineImageSize,
+                    height: subtitle
+                        ? Config.rowMultiLineImageSize
+                        : Config.rowSingleLineImageSize,
+                } })),
+            React.createElement(View, { style: styles.textContainer },
+                React.createElement(Text, { style: [
+                        titleTypeStyle,
+                        {
+                            color: titleColor,
+                        },
+                    ], numberOfLines: 1 }, title),
+                subtitle ? (React.createElement(Text, { style: [
+                        subtitleTypeStyle,
+                        {
+                            color: subtitleColor,
+                            marginTop: 4,
+                        },
+                    ], numberOfLines: multilineSubtitle ? undefined : 1 }, subtitle)) : null)),
+        right && right()));
+};
+const styles = StyleSheet.create({
+    leftContainer: {
+        flexDirection: "row",
+        flex: 1,
+    },
+    container: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    textContainer: {
+        flex: 1,
+        justifyContent: "center",
+    },
+});
+export default withTheme(Row);

package/src/components/RowBodyIcon.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import Config from "./Config";
+const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
+};
+export default withTheme(RowBodyIcon);

package/src/components/RowHeadlineImageCaption.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { withTheme } from "../theming";
+import Row from "./Row";
+const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
+                ...typography.caption,
+                color: colors.strong,
+                marginLeft: 16,
+            } }, caption)), style: style }));
+};
+export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageIcon.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import Config from "./Config";
+const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
+                ? Config.rowMultiLineIconSize
+                : Config.rowSingleLineIconSize, color: colors.light, style: {
+                marginLeft: 16,
+                alignSelf: multilineSubtitle ? "flex-start" : "center",
+                marginTop: multilineSubtitle ? 4 : 0,
+            } })), style: style }));
+};
+export default withTheme(RowHeadlineImageIcon);

package/src/components/ScreenContainer.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { StyleSheet, ScrollView, View, } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { withTheme } from "../theming";
+function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
+    const backgroundColor = theme.colors.background;
+    const edges = ["left", "right"];
+    if (hasSafeArea || hasTopSafeArea) {
+        edges.push("top");
+    }
+    if (hasSafeArea || hasBottomSafeArea) {
+        edges.push("bottom");
+    }
+    return (React.createElement(SafeAreaView, { edges: edges, style: [
+            styles.container,
+            {
+                backgroundColor,
+            },
+        ], ...rest }, scrollable ? (React.createElement(ScrollView, { contentContainerStyle: [
+            styles.scrollViewContainer,
+            { backgroundColor },
+            style,
+        ] }, children)) : (React.createElement(View, { style: [styles.container, { backgroundColor }, style] }, children))));
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollViewContainer: {
+        flexGrow: 1,
+        flex: undefined,
+    },
+});
+export default withTheme(ScreenContainer);

package/src/components/Slider.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import NativeSlider from "@react-native-community/slider";
+import isNumber from "lodash.isnumber";
+import toNumber from "lodash.tonumber";
+import { withTheme } from "../theming";
+function maybeParseValue(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (isNumber(value)) {
+        return value;
+    }
+    try {
+        const maybe = toNumber(value);
+        if (isNumber(maybe)) {
+            return maybe;
+        }
+    }
+    catch {
+        return undefined;
+    }
+    return undefined;
+}
+function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, defaultValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        if (value != null) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setInternalValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const minTrackColor = minimumTrackTintColor || theme.colors.primary;
+    const maxTrackColor = maximumTrackTintColor || theme.colors.light;
+    const thumbColor = thumbTintColor || theme.colors.primary;
+    const leftIconThemeColor = leftIconColor || theme.colors.light;
+    const rightIconThemeColor = rightIconColor || theme.colors.light;
+    const parsedValue = maybeParseValue(internalValue);
+    const handleSlidingComplete = (newValue) => {
+        setInternalValue(newValue);
+        onValueChange(newValue);
+    };
+    return (React.createElement(View, { style: [styles.container, style], ...rest },
+        leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
+        React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider }),
+        rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
+}
+const styles = StyleSheet.create({
+    container: {
+        height: 40,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    slider: {
+        flex: 1,
+        marginHorizontal: 12,
+    },
+});
+export default withTheme(Slider);

package/src/components/StarRating.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { View, StyleSheet, Pressable, } from "react-native";
+import { withTheme } from "../theming";
+const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, defaultValue, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
+    const [localRating, setLocalRating] = React.useState(rating || defaultValue || 0);
+    React.useEffect(() => {
+        if (rating != null) {
+            setLocalRating(rating);
+        }
+    }, [rating]);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setLocalRating(defaultValue);
+        }
+    }, [defaultValue]);
+    const ratingHandler = React.useCallback((r) => {
+        setLocalRating(r);
+        !!onPress && onPress(r);
+    }, [onPress]);
+    const ratingRounded = Math.round(localRating * 2) / 2;
+    return (React.createElement(View, { style: [styles.container, style], ...rest }, [...Array(maxStars)].map((_, i) => (React.createElement(View, { key: i, style: { display: "flex" } },
+        React.createElement(Icon, { name: ratingRounded - i === 0.5
+                ? "MaterialIcons/star-half"
+                : "MaterialIcons/star", size: starSize, color: ratingRounded > i ? activeColor : inactiveColor }),
+        isEditable && (React.createElement(View, { style: styles.touchContainer },
+            React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 0.5) }),
+            React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 1) }))))))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    touchContainer: {
+        display: "flex",
+        flexDirection: "row",
+        position: "absolute",
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
+        zIndex: 1,
+    },
+    pressable: {
+        flex: 1,
+        height: "100%",
+        width: "50%",
+    },
+});
+export default withTheme(StarRating);

package/src/components/StepIndicator.js

@@ -0,0 +1,346 @@
+// @ts-nocheck
+import React, { Component } from "react";
+import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback, } from "react-native";
+const STEP_STATUS = {
+    CURRENT: "current",
+    FINISHED: "finished",
+    UNFINISHED: "unfinished",
+};
+export default class StepIndicator extends Component {
+    constructor(props) {
+        super(props);
+        const defaultStyles = {
+            stepIndicatorSize: 30,
+            currentStepIndicatorSize: 40,
+            separatorStrokeWidth: 3,
+            separatorStrokeUnfinishedWidth: 0,
+            separatorStrokeFinishedWidth: 0,
+            currentStepStrokeWidth: 5,
+            stepStrokeWidth: 0,
+            stepStrokeCurrentColor: "#4aae4f",
+            stepStrokeFinishedColor: "#4aae4f",
+            stepStrokeUnFinishedColor: "#4aae4f",
+            separatorFinishedColor: "#4aae4f",
+            separatorUnFinishedColor: "#a4d4a5",
+            stepIndicatorFinishedColor: "#4aae4f",
+            stepIndicatorUnFinishedColor: "#a4d4a5",
+            stepIndicatorCurrentColor: "#ffffff",
+            stepIndicatorLabelFontSize: 15,
+            currentStepIndicatorLabelFontSize: 15,
+            stepIndicatorLabelCurrentColor: "#000000",
+            stepIndicatorLabelFinishedColor: "#ffffff",
+            stepIndicatorLabelUnFinishedColor: "rgba(255,255,255,0.5)",
+            labelColor: "#000000",
+            labelSize: 13,
+            labelAlign: "center",
+            currentStepLabelColor: "#4aae4f",
+        };
+        const customStyles = Object.assign(defaultStyles, props.customStyles);
+        this.state = {
+            width: 0,
+            height: 1,
+            progressBarSize: -2,
+            customStyles,
+        };
+        this.progressAnim = new Animated.Value(0);
+        this.sizeAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize);
+        this.borderRadiusAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize / 2);
+    }
+    stepPressed(position) {
+        if (this.props.onPress) {
+            this.props.onPress(position);
+        }
+    }
+    render() {
+        const { labels, direction } = this.props;
+        return (React.createElement(View, { style: [
+                styles.container,
+                direction === "vertical"
+                    ? { flexDirection: "row", flex: 1 }
+                    : { flexDirection: "column" },
+            ] },
+            this.state.width !== 0 && this.renderProgressBarBackground(),
+            this.state.width !== 0 && this.renderProgressBar(),
+            this.renderStepIndicator(),
+            labels && this.renderStepLabels()));
+    }
+    componentDidUpdate(prevProps) {
+        // if (prevProps.customStyles !== this.props.customStyles) {
+        //   this.setState((state) => ({
+        //     customStyles: Object.assign(
+        //       state.customStyles,
+        //       this.props.customStyles
+        //     ),
+        //   }));
+        // }
+        if (prevProps.currentPosition !== this.props.currentPosition) {
+            this.onCurrentPositionChanged(this.props.currentPosition);
+        }
+    }
+    renderProgressBarBackground = () => {
+        const { stepCount, direction } = this.props;
+        let progressBarBackgroundStyle;
+        if (direction === "vertical") {
+            progressBarBackgroundStyle = {
+                backgroundColor: this.state.customStyles.separatorUnFinishedColor,
+                position: "absolute",
+                left: (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
+                top: this.state.height / (2 * stepCount),
+                bottom: this.state.height / (2 * stepCount),
+                width: this.state.customStyles.separatorStrokeUnfinishedWidth === 0
+                    ? this.state.customStyles.separatorStrokeWidth
+                    : this.state.customStyles.separatorStrokeUnfinishedWidth,
+            };
+        }
+        else {
+            progressBarBackgroundStyle = {
+                backgroundColor: this.state.customStyles.separatorUnFinishedColor,
+                position: "absolute",
+                top: (this.state.height - this.state.customStyles.separatorStrokeWidth) /
+                    2,
+                left: this.state.width / (2 * stepCount),
+                right: this.state.width / (2 * stepCount),
+                height: this.state.customStyles.separatorStrokeUnfinishedWidth === 0
+                    ? this.state.customStyles.separatorStrokeWidth
+                    : this.state.customStyles.separatorStrokeUnfinishedWidth,
+            };
+        }
+        return (React.createElement(View, { onLayout: (event) => {
+                if (direction === "vertical") {
+                    this.setState({ progressBarSize: event.nativeEvent.layout.height }, () => {
+                        this.onCurrentPositionChanged(this.props.currentPosition);
+                    });
+                }
+                else {
+                    this.setState({ progressBarSize: event.nativeEvent.layout.width }, () => {
+                        this.onCurrentPositionChanged(this.props.currentPosition);
+                    });
+                }
+            }, style: progressBarBackgroundStyle }));
+    };
+    renderProgressBar = () => {
+        const { stepCount, direction } = this.props;
+        let progressBarStyle;
+        if (direction === "vertical") {
+            progressBarStyle = {
+                backgroundColor: this.state.customStyles.separatorFinishedColor,
+                position: "absolute",
+                left: (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
+                top: this.state.height / (2 * stepCount),
+                bottom: this.state.height / (2 * stepCount),
+                width: this.state.customStyles.separatorStrokeFinishedWidth === 0
+                    ? this.state.customStyles.separatorStrokeWidth
+                    : this.state.customStyles.separatorStrokeFinishedWidth,
+                height: this.progressAnim,
+            };
+        }
+        else {
+            progressBarStyle = {
+                backgroundColor: this.state.customStyles.separatorFinishedColor,
+                position: "absolute",
+                top: (this.state.height - this.state.customStyles.separatorStrokeWidth) /
+                    2,
+                left: this.state.width / (2 * stepCount),
+                right: this.state.width / (2 * stepCount),
+                height: this.state.customStyles.separatorStrokeFinishedWidth === 0
+                    ? this.state.customStyles.separatorStrokeWidth
+                    : this.state.customStyles.separatorStrokeFinishedWidth,
+                width: this.progressAnim,
+            };
+        }
+        return React.createElement(Animated.View, { style: progressBarStyle });
+    };
+    renderStepIndicator = () => {
+        let steps = [];
+        const { stepCount, direction } = this.props;
+        for (let position = 0; position < stepCount; position++) {
+            steps.push(React.createElement(TouchableWithoutFeedback, { key: position, onPress: () => this.stepPressed(position) },
+                React.createElement(View, { style: [
+                        styles.stepContainer,
+                        direction === "vertical"
+                            ? { flexDirection: "column" }
+                            : { flexDirection: "row" },
+                    ] }, this.renderStep(position))));
+        }
+        return (React.createElement(View, { onLayout: (event) => this.setState({
+                width: event.nativeEvent.layout.width,
+                height: event.nativeEvent.layout.height,
+            }), style: [
+                styles.stepIndicatorContainer,
+                direction === "vertical"
+                    ? {
+                        flexDirection: "column",
+                        width: this.state.customStyles.currentStepIndicatorSize,
+                    }
+                    : {
+                        flexDirection: "row",
+                        height: this.state.customStyles.currentStepIndicatorSize,
+                    },
+            ] }, steps));
+    };
+    renderStepLabels = () => {
+        const { labels, direction, currentPosition, renderLabel } = this.props;
+        var labelViews = labels.map((label, index) => {
+            const selectedStepLabelStyle = index === currentPosition
+                ? { color: this.state.customStyles.currentStepLabelColor }
+                : { color: this.state.customStyles.labelColor };
+            return (React.createElement(TouchableWithoutFeedback, { style: styles.stepLabelItem, key: index, onPress: () => this.stepPressed(index) },
+                React.createElement(View, { style: styles.stepLabelItem }, renderLabel ? (renderLabel({
+                    position: index,
+                    stepStatus: this.getStepStatus(index),
+                    label,
+                    currentPosition,
+                })) : (React.createElement(Text, { style: [
+                        styles.stepLabel,
+                        selectedStepLabelStyle,
+                        {
+                            fontSize: this.state.customStyles.labelSize,
+                            fontFamily: this.state.customStyles.labelFontFamily,
+                        },
+                    ] }, label)))));
+        });
+        return (React.createElement(View, { style: [
+                styles.stepLabelsContainer,
+                direction === "vertical"
+                    ? { flexDirection: "column", paddingHorizontal: 4 }
+                    : { flexDirection: "row", paddingVertical: 4 },
+                { alignItems: this.state.customStyles.labelAlign },
+            ] }, labelViews));
+    };
+    renderStep = (position) => {
+        const { renderStepIndicator } = this.props;
+        let stepStyle;
+        let indicatorLabelStyle;
+        switch (this.getStepStatus(position)) {
+            case STEP_STATUS.CURRENT: {
+                stepStyle = {
+                    backgroundColor: this.state.customStyles.stepIndicatorCurrentColor,
+                    borderWidth: this.state.customStyles.currentStepStrokeWidth,
+                    borderColor: this.state.customStyles.stepStrokeCurrentColor,
+                    height: this.sizeAnim,
+                    width: this.sizeAnim,
+                    borderRadius: this.borderRadiusAnim,
+                };
+                indicatorLabelStyle = {
+                    fontSize: this.state.customStyles.currentStepIndicatorLabelFontSize,
+                    color: this.state.customStyles.stepIndicatorLabelCurrentColor,
+                };
+                break;
+            }
+            case STEP_STATUS.FINISHED: {
+                stepStyle = {
+                    backgroundColor: this.state.customStyles.stepIndicatorFinishedColor,
+                    borderWidth: this.state.customStyles.stepStrokeWidth,
+                    borderColor: this.state.customStyles.stepStrokeFinishedColor,
+                    height: this.state.customStyles.stepIndicatorSize,
+                    width: this.state.customStyles.stepIndicatorSize,
+                    borderRadius: this.state.customStyles.stepIndicatorSize / 2,
+                };
+                indicatorLabelStyle = {
+                    fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
+                    color: this.state.customStyles.stepIndicatorLabelFinishedColor,
+                };
+                break;
+            }
+            case STEP_STATUS.UNFINISHED: {
+                stepStyle = {
+                    backgroundColor: this.state.customStyles.stepIndicatorUnFinishedColor,
+                    borderWidth: this.state.customStyles.stepStrokeWidth,
+                    borderColor: this.state.customStyles.stepStrokeUnFinishedColor,
+                    height: this.state.customStyles.stepIndicatorSize,
+                    width: this.state.customStyles.stepIndicatorSize,
+                    borderRadius: this.state.customStyles.stepIndicatorSize / 2,
+                };
+                indicatorLabelStyle = {
+                    overflow: "hidden",
+                    fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
+                    color: this.state.customStyles.stepIndicatorLabelUnFinishedColor,
+                };
+                break;
+            }
+            default:
+        }
+        return (React.createElement(Animated.View, { key: "step-indicator", style: [styles.step, stepStyle] }, renderStepIndicator ? (renderStepIndicator({
+            position,
+            stepStatus: this.getStepStatus(position),
+        })) : (React.createElement(Text, { style: indicatorLabelStyle }, `${position + 1}`))));
+    };
+    getStepStatus = (stepPosition) => {
+        const { currentPosition } = this.props;
+        if (stepPosition === currentPosition) {
+            return STEP_STATUS.CURRENT;
+        }
+        else if (stepPosition < currentPosition) {
+            return STEP_STATUS.FINISHED;
+        }
+        else {
+            return STEP_STATUS.UNFINISHED;
+        }
+    };
+    onCurrentPositionChanged = (position) => {
+        let { stepCount } = this.props;
+        if (position > stepCount - 1) {
+            position = stepCount - 1;
+        }
+        const animateToPosition = (this.state.progressBarSize / (stepCount - 1)) * position;
+        this.sizeAnim.setValue(this.state.customStyles.stepIndicatorSize);
+        this.borderRadiusAnim.setValue(this.state.customStyles.stepIndicatorSize / 2);
+        Animated.sequence([
+            Animated.timing(this.progressAnim, {
+                toValue: animateToPosition,
+                duration: 200,
+            }),
+            Animated.parallel([
+                Animated.timing(this.sizeAnim, {
+                    toValue: this.state.customStyles.currentStepIndicatorSize,
+                    duration: 100,
+                }),
+                Animated.timing(this.borderRadiusAnim, {
+                    toValue: this.state.customStyles.currentStepIndicatorSize / 2,
+                    duration: 100,
+                }),
+            ]),
+        ]).start();
+    };
+}
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+    },
+    stepIndicatorContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-around",
+        backgroundColor: "transparent",
+    },
+    stepLabelsContainer: {
+        justifyContent: "space-around",
+    },
+    step: {
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 2,
+    },
+    stepContainer: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    stepLabel: {
+        fontSize: 12,
+        textAlign: "center",
+        fontWeight: "500",
+    },
+    stepLabelItem: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+StepIndicator.defaultProps = {
+    currentPosition: 0,
+    stepCount: 5,
+    customStyles: {},
+    direction: "horizontal",
+};

package/src/components/Stepper.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { View, Text } from "react-native";
+import { isNumber } from "lodash";
+import { withTheme } from "../theming";
+import IconButton from "./IconButton";
+const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, typeStyle, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+    const [value, setValue] = useState(defaultValue ?? 0);
+    const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
+    const handlePlusOrMinus = (type) => {
+        const newValue = type === "plus" ? value + 1 : value - 1;
+        if (isValidValue(newValue)) {
+            setValue(newValue);
+            onChange?.(newValue);
+        }
+    };
+    useEffect(() => {
+        if (valueProp != null &&
+            isNumber(valueProp) &&
+            valueProp !== value &&
+            isValidValue(valueProp)) {
+            setValue(valueProp);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    return (React.createElement(View, { style: [{ flexDirection: "row" }, style] },
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
+        React.createElement(Text, { style: [
+                typography.body1,
+                {
+                    textAlign: "center",
+                    alignSelf: "center",
+                    color: colors.medium,
+                    marginHorizontal: 8,
+                },
+                typeStyle,
+            ] }, value),
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
+};
+export default withTheme(Stepper);