@momo-kits/stepper 0.169.4 → 0.169.6

package/NumberView.tsx

@@ -8,6 +8,7 @@ import {
 } from '@momo-kits/foundation';
 import styles from './styles';
 
+/** Stepper value box, typable when `editable`; shows "0" for NaN. */
 const NumberView: FC<StepperValueProps> = ({
   value = 0,
   size = 'large',

package/StepperButton.tsx

@@ -1,9 +1,10 @@
-import React, {FC, useContext} from 'react';
-import {TouchableOpacity} from 'react-native';
+import React, { FC, useContext } from 'react';
+import { TouchableOpacity } from 'react-native';
 import styles from './styles';
-import {StepperButtonProps} from './types';
-import {ApplicationContext, Icon} from '@momo-kits/foundation';
+import { StepperButtonProps } from './types';
+import { ApplicationContext, Icon } from '@momo-kits/foundation';
 
+/** Round plus or minus button of the Stepper. */
 const StepperButton: FC<StepperButtonProps> = ({
   disabled = false,
   sign = '+',
@@ -11,7 +12,7 @@ const StepperButton: FC<StepperButtonProps> = ({
   onPress,
   componentId,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   const colors = theme.colors;
 
@@ -21,16 +22,16 @@ const StepperButton: FC<StepperButtonProps> = ({
     buttonIcon = '24_navigation_minus_circle';
   }
   const buttonColor = disabled ? colors.text.disable : colors.primary;
+  const signName = sign === '+' ? 'plus' : 'minus';
 
   return (
     <TouchableOpacity
       disabled={disabled}
       onPress={onPress}
       style={[sizeStyle]}
-      accessibilityState={{disabled}}
-      accessibilityLabel={`${componentId}|${
-        sign === '+' ? 'plus' : 'minus'
-      }-touch`}>
+      accessibilityState={{ disabled }}
+      accessibilityLabel={`${componentId}|${signName}-touch`}
+    >
       <Icon size={22} color={buttonColor} source={buttonIcon} />
     </TouchableOpacity>
   );

package/index.tsx

@@ -6,13 +6,17 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import {View} from 'react-native';
+import { View } from 'react-native';
 import StepperButton from './StepperButton';
-import {DisabledStatus, StepperProps} from './types';
+import { DisabledStatus, StepperProps } from './types';
 import styles from './styles';
 import NumberView from './NumberView';
-import {MiniAppContext, ScreenContext} from '@momo-kits/foundation';
+import { MiniAppContext, ScreenContext } from '@momo-kits/foundation';
 
+/**
+ * Numeric stepper with minus/plus buttons and an optional editable value.
+ * Values are clamped to [min, max]; the ref exposes `setStepValue`.
+ */
 const Stepper = forwardRef(
   (
     {
@@ -26,7 +30,7 @@ const Stepper = forwardRef(
       onValueChange,
       accessibilityLabel,
     }: StepperProps,
-    ref
+    ref,
   ) => {
     const [value, setValue] = useState(defaultValue);
 
@@ -132,8 +136,8 @@ const Stepper = forwardRef(
         />
       </View>
     );
-  }
+  },
 );
 
-export {Stepper};
-export type {StepperProps};
+export { Stepper };
+export type { StepperProps };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.169.4",
+    "version": "0.169.6",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/types.ts

@@ -1,4 +1,4 @@
-import {ViewStyle} from 'react-native';
+import { ViewStyle } from 'react-native';
 
 /**
  * Properties for the StepperButton component, which represents the individual
@@ -27,13 +27,13 @@ export type StepperButtonProps = {
   onPress: () => void;
 
   /**
-   * Optional. Assign accessibility label to the button for automated testing.
+   * Accessibility label prefix of the Stepper, used for automated testing.
    */
   componentId: string;
 };
 
 /**
- * Properties for the StepperValue component, which displays the current value
+ * Properties for the NumberView component, which displays the current value
  * within a stepper control and allows for direct input.
  */
 export type StepperValueProps = {
@@ -65,7 +65,7 @@ export type StepperValueProps = {
   onValueChange?: (value: string) => void;
 
   /**
-   * Optional. Assign accessibility label to the button for automated testing.
+   * Accessibility label prefix of the Stepper, used for automated testing.
    */
   componentId: string;
 };
@@ -81,18 +81,19 @@ export type StepperProps = {
   defaultValue: number;
 
   /**
-   * Optional. The minimum allowable value for the stepper. If not provided, there is no minimum.
+   * Optional. The minimum allowable value for the stepper. Defaults to 0.
    */
   min?: number;
 
   /**
-   * Optional. The maximum allowable value for the stepper. If not provided, there is no maximum.
+   * Optional. The maximum allowable value for the stepper. Defaults to 100.
    */
   max?: number;
 
   /**
    * Optional. Specifies whether the entire stepper control or specific parts are disabled.
-   * Can be a single boolean (to disable all) or an array of booleans (to control individual components).
+   * A boolean disables all; `[minus, plus]` disables each button, and the
+   * value input only when both are `true`.
    */
   disabled?: boolean | boolean[];