@utilitywarehouse/hearth-react-native 0.31.1 → 0.32.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.31.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.32.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.31.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.32.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -48,15 +48,15 @@
 
 ✖ 21 problems (0 errors, 21 warnings)
 
-Rule                                              | Time (ms) | Relative
-:-------------------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars                 |  1546.291 |    60.2%
-react-hooks/exhaustive-deps                       |   108.680 |     4.2%
-no-global-assign                                  |    99.957 |     3.9%
-react-hooks/rules-of-hooks                        |    90.616 |     3.5%
-no-misleading-character-class                     |    53.413 |     2.1%
-no-unexpected-multiline                           |    51.887 |     2.0%
-@typescript-eslint/ban-ts-comment                 |    49.938 |     1.9%
-@typescript-eslint/no-unnecessary-type-constraint |    38.622 |     1.5%
-no-loss-of-precision                              |    33.899 |     1.3%
-no-useless-escape                                 |    30.813 |     1.2%
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1597.986 |    54.8%
+react-hooks/exhaustive-deps               |   222.159 |     7.6%
+no-global-assign                          |   113.864 |     3.9%
+react-hooks/rules-of-hooks                |    86.855 |     3.0%
+no-misleading-character-class             |    82.947 |     2.8%
+no-unexpected-multiline                   |    65.031 |     2.2%
+@typescript-eslint/ban-ts-comment         |    59.965 |     2.1%
+no-regex-spaces                           |    42.086 |     1.4%
+no-useless-escape                         |    37.102 |     1.3%
+@typescript-eslint/triple-slash-reference |    36.097 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.32.0
+
+### Minor Changes
+
+- [#1134](https://github.com/utilitywarehouse/hearth/pull/1134) [`8824186`](https://github.com/utilitywarehouse/hearth/commit/ebccb55afebcbd47508d7992614b2495c7839cc6) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Roundel` status indicator component.
+
+`Roundel` is a compact status indicator with `success`, `pending`, and `error` variants, intended for inline state cues.
+
+**Components affected**:
+- `Roundel`
+
+**Developer changes**:
+
+Import and use `Roundel` from `@utilitywarehouse/hearth-react-native`:
+
+```tsx
+import { Roundel } from '@utilitywarehouse/hearth-react-native';
+
+<Roundel variant="success" />
+```
+
+- [#1132](https://github.com/utilitywarehouse/hearth/pull/1132) [`8824186`](https://github.com/utilitywarehouse/hearth/commit/882418633ee8c3a11e204329d07363dc411996dc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add the `Rating` component
+
+  **Components affected**:
+  - `Rating`
+
+  **Developer changes**:
+
+  ```tsx
+  import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => <Rating value={3} />;
+  ```
+
+- [#1129](https://github.com/utilitywarehouse/hearth/pull/1129) [`ec385a8`](https://github.com/utilitywarehouse/hearth/commit/ec385a8185bfa4ec7f4d5f1366ecc069a98cbba8) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `StepperInput` for controlled numeric input with increment and decrement buttons.
+
+  `StepperInput` is a new React Native form component for adjusting numeric values with direct text entry and dedicated step controls. It supports min and max bounds, configurable step size, validation and helper text through `FormField`, and an opt-in `focusInputOnStepPress` prop for keyboard-first flows.
+
+  **Components affected**:
+  - `StepperInput`
+
+  **Developer changes**:
+
+  Import and use `StepperInput` from `@utilitywarehouse/hearth-react-native`:
+
+  ```tsx
+  import { StepperInput } from '@utilitywarehouse/hearth-react-native';
+
+  <StepperInput label="Guests" min={1} max={10} value={value} onChangeText={setValue} />;
+  ```
+
+### Patch Changes
+
+- [#1133](https://github.com/utilitywarehouse/hearth/pull/1133) [`5cae98e`](https://github.com/utilitywarehouse/hearth/commit/5cae98e640a708a7d99eaf0395b7b52e71b8e6ec) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add a `defaultHeight` prop to `Textarea` so the initial height can be configured.
+
 ## 0.31.1
 
 ### Patch Changes

package/build/components/Rating/Rating.d.ts

@@ -0,0 +1,6 @@
+import type RatingProps from './Rating.props';
+declare const Rating: {
+    ({ value, defaultValue, onChange, disabled, labels, hideLabel, style, accessibilityLabel, ...props }: RatingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Rating;

package/build/components/Rating/Rating.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import RatingStarEmpty from './RatingStarEmpty';
+import RatingStarFilled from './RatingStarFilled';
+const MAX_RATING = 5;
+const STAR_WIDTH = 32;
+const STAR_HEIGHT = 30;
+const STAR_CONTAINER_SIZE = 40;
+const DEFAULT_LABELS = {
+    0: 'Select a rating',
+    1: 'Awful',
+    2: 'Bad',
+    3: 'Okay',
+    4: 'Good',
+    5: 'Great!',
+};
+const clampRating = (value) => Math.min(MAX_RATING, Math.max(0, Math.round(value)));
+const Rating = ({ value, defaultValue = 0, onChange, disabled = false, labels, hideLabel = false, style, accessibilityLabel, ...props }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(clampRating(defaultValue));
+    useEffect(() => {
+        if (!isControlled) {
+            setInternalValue(clampRating(defaultValue));
+        }
+    }, [defaultValue, isControlled]);
+    const resolvedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+    const resolvedValue = clampRating(isControlled ? value : internalValue);
+    const currentLabel = resolvedLabels[resolvedValue] ?? DEFAULT_LABELS[resolvedValue];
+    const labelColor = resolvedValue === 0 ? 'secondary' : 'primary';
+    const handlePress = useCallback((nextValue) => {
+        if (disabled)
+            return;
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [disabled, isControlled, onChange]);
+    styles.useVariants({ disabled });
+    return (_jsxs(View, { ...props, accessibilityRole: "radiogroup", accessibilityState: { disabled }, accessibilityLabel: accessibilityLabel ?? currentLabel, style: [styles.container, style], children: [_jsx(View, { style: styles.stars, children: [1, 2, 3, 4, 5].map(starValue => {
+                    const isFilled = starValue <= resolvedValue;
+                    const starLabel = resolvedLabels[starValue] ?? DEFAULT_LABELS[starValue];
+                    return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { selected: resolvedValue === starValue, disabled }, accessibilityLabel: `Rate ${starLabel}`, disabled: disabled, hitSlop: 8, onPress: () => handlePress(starValue), style: styles.star, children: isFilled ? (_jsx(RatingStarFilled, { width: STAR_WIDTH, height: STAR_HEIGHT })) : (_jsx(RatingStarEmpty, { width: STAR_WIDTH, height: STAR_HEIGHT })) }, starValue));
+                }) }), !hideLabel ? (_jsx(BodyText, { size: "md", color: labelColor, style: styles.label, children: currentLabel })) : null] }));
+};
+Rating.displayName = 'Rating';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        alignItems: 'center',
+        gap: theme.components.rating.gap,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    stars: {
+        flexDirection: 'row',
+        gap: theme.components.rating.gap,
+    },
+    star: {
+        width: STAR_CONTAINER_SIZE,
+        height: STAR_CONTAINER_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.components.rating.borderWidth,
+    },
+    label: {
+        textAlign: 'center',
+    },
+}));
+export default Rating;

package/build/components/Rating/Rating.props.d.ts

@@ -0,0 +1,18 @@
+import type { ViewProps } from 'react-native';
+export type RatingValue = 0 | 1 | 2 | 3 | 4 | 5;
+export type RatingLabels = Partial<Record<RatingValue, string>>;
+export interface RatingProps extends Omit<ViewProps, 'children'> {
+    /** Current rating value. */
+    value?: RatingValue;
+    /** Initial rating value when uncontrolled. */
+    defaultValue?: RatingValue;
+    /** Called when a star is selected. */
+    onChange?: (value: RatingValue) => void;
+    /** Disables the rating input. */
+    disabled?: boolean;
+    /** Override labels for specific rating values. */
+    labels?: RatingLabels;
+    /** Hide the label text below the stars. */
+    hideLabel?: boolean;
+}
+export default RatingProps;

package/build/components/Rating/Rating.props.js

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

package/build/components/Rating/RatingStarEmpty.d.ts

@@ -0,0 +1,6 @@
+type RatingStarProps = {
+    width?: number;
+    height?: number;
+};
+declare const RatingStarEmpty: ({ width, height }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
+export default RatingStarEmpty;

package/build/components/Rating/RatingStarEmpty.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, Svg } from 'react-native-svg';
+import { useTheme } from '../../hooks';
+const STAR_PATH = 'M16 1C16.0831 1 16.1883 1.02107 16.3262 1.09766C16.3896 1.13286 16.4424 1.183 16.4902 1.28711H16.4912L20.1777 9.8916L20.4141 10.4424L21.0117 10.4941L30.5107 11.3096C30.7062 11.3326 30.8 11.3864 30.8467 11.4238C30.915 11.4787 30.9492 11.5325 30.9707 11.6035C31.0029 11.71 31.0094 11.8192 30.9844 11.9463V11.9482C30.98 11.9702 30.9618 12.0389 30.832 12.1514L23.6338 18.2939L23.1689 18.6904L23.3096 19.2852L25.458 28.3926H25.459C25.4832 28.5045 25.4775 28.5714 25.4658 28.6133L25.4531 28.6475C25.4155 28.7291 25.3682 28.7951 25.3076 28.8516L25.2432 28.9043C25.172 28.9558 25.0868 28.9907 24.96 28.999C24.8763 29.0045 24.793 28.9887 24.6865 28.9229L24.6787 28.918L24.6699 28.9131L16.5088 24.0898L16 23.7891L15.4912 24.0898L7.33008 28.9131L7.32129 28.918L7.31348 28.9229C7.20704 28.9887 7.12371 29.0045 7.04004 28.999C6.94495 28.9928 6.87333 28.9713 6.81348 28.9395L6.75684 28.9043C6.68716 28.8537 6.63221 28.7954 6.58789 28.7236L6.54688 28.6475C6.53436 28.6202 6.51869 28.5743 6.52539 28.4902L6.54102 28.3926L8.69043 19.2852L8.83105 18.6904L8.36621 18.2939L1.16699 12.1514C1.03725 12.0389 1.01999 11.9702 1.01563 11.9482V11.9463L1.00195 11.8545C0.994777 11.765 1.00514 11.6834 1.0293 11.6035C1.05077 11.5325 1.08501 11.4787 1.15332 11.4238C1.19992 11.3864 1.2935 11.3327 1.48828 11.3096L10.9883 10.4941L11.5859 10.4424L11.8223 9.8916L15.5088 1.28711C15.5567 1.18274 15.6103 1.1329 15.6738 1.09766C15.8117 1.02107 15.9169 1 16 1Z';
+const RatingStarEmpty = ({ width = 32, height = 30 }) => {
+    const theme = useTheme();
+    return (_jsx(Svg, { width: width, height: height, viewBox: "0 0 32 30", preserveAspectRatio: "none", children: _jsx(Path, { d: STAR_PATH, strokeWidth: 2, fill: "none", stroke: theme.color.border.subtle }) }));
+};
+export default RatingStarEmpty;

package/build/components/Rating/RatingStarFilled.d.ts

@@ -0,0 +1,6 @@
+type RatingStarProps = {
+    width?: number;
+    height?: number;
+};
+declare const RatingStarFilled: ({ width, height }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
+export default RatingStarFilled;

package/build/components/Rating/RatingStarFilled.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, Svg } from 'react-native-svg';
+import { useTheme } from '../../hooks';
+const STAR_PATH = 'M16 1C16.0831 1 16.1883 1.02107 16.3262 1.09766C16.3896 1.13286 16.4424 1.183 16.4902 1.28711H16.4912L20.1777 9.8916L20.4141 10.4424L21.0117 10.4941L30.5107 11.3096C30.7062 11.3326 30.8 11.3864 30.8467 11.4238C30.915 11.4787 30.9492 11.5325 30.9707 11.6035C31.0029 11.71 31.0094 11.8192 30.9844 11.9463V11.9482C30.98 11.9702 30.9618 12.0389 30.832 12.1514L23.6338 18.2939L23.1689 18.6904L23.3096 19.2852L25.458 28.3926H25.459C25.4832 28.5045 25.4775 28.5714 25.4658 28.6133L25.4531 28.6475C25.4155 28.7291 25.3682 28.7951 25.3076 28.8516L25.2432 28.9043C25.172 28.9558 25.0868 28.9907 24.96 28.999C24.8763 29.0045 24.793 28.9887 24.6865 28.9229L24.6787 28.918L24.6699 28.9131L16.5088 24.0898L16 23.7891L15.4912 24.0898L7.33008 28.9131L7.32129 28.918L7.31348 28.9229C7.20704 28.9887 7.12371 29.0045 7.04004 28.999C6.94495 28.9928 6.87333 28.9713 6.81348 28.9395L6.75684 28.9043C6.68716 28.8537 6.63221 28.7954 6.58789 28.7236L6.54688 28.6475C6.53436 28.6202 6.51869 28.5743 6.52539 28.4902L6.54102 28.3926L8.69043 19.2852L8.83105 18.6904L8.36621 18.2939L1.16699 12.1514C1.03725 12.0389 1.01999 11.9702 1.01563 11.9482V11.9463L1.00195 11.8545C0.994777 11.765 1.00514 11.6834 1.0293 11.6035C1.05077 11.5325 1.08501 11.4787 1.15332 11.4238C1.19992 11.3864 1.2935 11.3327 1.48828 11.3096L10.9883 10.4941L11.5859 10.4424L11.8223 9.8916L15.5088 1.28711C15.5567 1.18274 15.6103 1.1329 15.6738 1.09766C15.8117 1.02107 15.9169 1 16 1Z';
+const RatingStarFilled = ({ width = 32, height = 30 }) => {
+    const theme = useTheme();
+    return (_jsx(Svg, { width: width, height: height, viewBox: "0 0 32 30", preserveAspectRatio: "none", children: _jsx(Path, { d: STAR_PATH, strokeWidth: 2, fill: theme.color.surface.highlight.default, stroke: theme.color.border.strong }) }));
+};
+export default RatingStarFilled;

package/build/components/Rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Rating } from './Rating';
+export type { RatingLabels, RatingProps, RatingValue } from './Rating.props';

package/build/components/Rating/index.js

@@ -0,0 +1 @@
+export { default as Rating } from './Rating';

package/build/components/Roundel/Roundel.d.ts

@@ -0,0 +1,6 @@
+import type RoundelProps from './Roundel.props';
+declare const Roundel: {
+    ({ variant, style, ...props }: RoundelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Roundel;

package/build/components/Roundel/Roundel.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const Roundel = ({ variant = 'success', style, ...props }) => {
+    styles.useVariants({ variant });
+    const icon = variant === 'error' ? CloseSmallIcon : variant === 'success' ? TickSmallIcon : undefined;
+    return (_jsx(View, { ...props, style: [styles.container, style], children: icon ? _jsx(Icon, { as: icon, size: "sm" }) : null }));
+};
+Roundel.displayName = 'Roundel';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        width: theme.space[300],
+        height: theme.space[300],
+        borderRadius: theme.components.parts.roundel.borderRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        borderStyle: 'solid',
+        variants: {
+            variant: {
+                success: {
+                    backgroundColor: theme.color.feedback.positive.surface.default,
+                },
+                error: {
+                    backgroundColor: theme.color.feedback.danger.surface.default,
+                },
+                pending: {
+                    borderWidth: theme.components.parts.roundel.pending.borderWidth,
+                    borderStyle: 'dashed',
+                    borderColor: theme.color.border.strong,
+                },
+            },
+        },
+    },
+}));
+export default Roundel;

package/build/components/Roundel/Roundel.props.d.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+export interface RoundelProps extends Omit<ViewProps, 'children'> {
+    /** Visual variant for the roundel status. */
+    variant?: 'success' | 'pending' | 'error';
+}
+export default RoundelProps;

package/build/components/Roundel/Roundel.props.js

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

package/build/components/Roundel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Roundel } from './Roundel';
+export type { RoundelProps } from './Roundel.props';

package/build/components/Roundel/index.js

@@ -0,0 +1 @@
+export { default as Roundel } from './Roundel';

package/build/components/StepperInput/StepperButton.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentType } from 'react';
+import type { PressableProps } from 'react-native';
+declare const StepperButton: import("react").ForwardRefExoticComponent<{
+    icon: ComponentType;
+    disabled?: boolean;
+} & Omit<PressableProps, "children"> & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+} & Omit<import("react-native").PressableProps, "children"> & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+} & import("react").RefAttributes<unknown>>;
+export default StepperButton;

package/build/components/StepperInput/StepperButton.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const StepperButtonRoot = ({ icon, disabled, states, ...props }) => {
+    const isDisabled = disabled ?? states?.disabled ?? false;
+    const isActive = states?.active ?? false;
+    styles.useVariants({ active: isActive, disabled: isDisabled });
+    return (_jsx(Pressable, { ...props, accessibilityRole: "button", accessibilityState: { disabled: isDisabled, ...props.accessibilityState }, disabled: isDisabled, style: [styles.button, props.style], children: _jsx(Icon, { as: icon, size: "sm", style: styles.icon }) }));
+};
+const StepperButton = createPressable({ Root: StepperButtonRoot });
+StepperButton.displayName = 'StepperButton';
+const styles = StyleSheet.create(theme => ({
+    button: {
+        width: theme.components.iconButton.md.width,
+        height: theme.components.iconButton.md.height,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: theme.components.input.borderRadius,
+        borderWidth: theme.components.input.borderWidth,
+        borderColor: theme.color.border.strong,
+        backgroundColor: theme.color.surface.neutral.strong,
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+            },
+            _active: {
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+            },
+            '_focus-visible': {
+                outlineStyle: 'solid',
+                outlineWidth: 2,
+                outlineColor: theme.color.focus.primary,
+                outlineOffset: 2,
+            },
+        },
+        variants: {
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    icon: {
+        color: theme.color.icon.primary,
+    },
+}));
+export default StepperButton;

package/build/components/StepperInput/StepperInput.d.ts

@@ -0,0 +1,6 @@
+import StepperInputProps from './StepperInput.props';
+declare const StepperInput: {
+    ({ value, defaultValue, onChangeText, onChangeValue, min, max, step, focusInputOnStepPress, validationStatus, disabled, readonly, focused, inBottomSheet, required, label, labelVariant, helperText, helperIcon, validText, invalidText, style, decrementAccessibilityLabel, incrementAccessibilityLabel, onFocus, onBlur, ref, ...props }: StepperInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default StepperInput;

package/build/components/StepperInput/StepperInput.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddSmallIcon, MinusSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { FormField } from '../FormField';
+import { InputComponent, InputField } from '../Input/Input';
+import StepperButton from './StepperButton';
+const normalizeValue = (value) => {
+    if (value === undefined || value === null || value === '') {
+        return '';
+    }
+    return `${value}`;
+};
+const getDecimalPlaces = (value) => {
+    if (value === undefined || value === null || value === '') {
+        return 0;
+    }
+    const normalizedValue = `${value}`;
+    const decimalPart = normalizedValue.split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+};
+const formatNumber = (value, precision) => {
+    if (precision <= 0) {
+        return `${Math.trunc(value)}`;
+    }
+    return value
+        .toFixed(precision)
+        .replace(/\.0+$/, '')
+        .replace(/(\.\d*?)0+$/, '$1');
+};
+const sanitizeValue = (value, allowNegative, allowDecimal) => {
+    const strippedValue = value.replace(allowDecimal ? /[^\d,.-]/g : allowNegative ? /[^\d-]/g : /\D/g, '');
+    const normalizedValue = allowDecimal ? strippedValue.replace(/,/g, '.') : strippedValue;
+    if (!allowNegative) {
+        const unsignedValue = normalizedValue.replace(/-/g, '');
+        if (!allowDecimal) {
+            return unsignedValue;
+        }
+        const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+        const decimalPart = decimalParts.join('');
+        return decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+    }
+    const hasLeadingMinus = normalizedValue.startsWith('-');
+    const unsignedValue = normalizedValue.replace(/-/g, '');
+    if (!allowDecimal) {
+        return `${hasLeadingMinus ? '-' : ''}${unsignedValue}`;
+    }
+    const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+    const decimalPart = decimalParts.join('');
+    const composedValue = decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+    return `${hasLeadingMinus ? '-' : ''}${composedValue}`;
+};
+const parseValue = (value) => {
+    if (!value || value === '-' || value === '.' || value === '-.') {
+        return null;
+    }
+    const parsedValue = Number(value);
+    return Number.isNaN(parsedValue) ? null : parsedValue;
+};
+const clampValue = (value, min, max) => {
+    let nextValue = value;
+    if (typeof min === 'number') {
+        nextValue = Math.max(min, nextValue);
+    }
+    if (typeof max === 'number') {
+        nextValue = Math.min(max, nextValue);
+    }
+    return nextValue;
+};
+const StepperInput = ({ value, defaultValue, onChangeText, onChangeValue, min, max, step = 1, focusInputOnStepPress = false, validationStatus = 'initial', disabled = false, readonly = false, focused = false, inBottomSheet = false, required = true, label, labelVariant = 'body', helperText, helperIcon, validText, invalidText, style, decrementAccessibilityLabel = 'Decrease value', incrementAccessibilityLabel = 'Increase value', onFocus, onBlur, ref, ...props }) => {
+    const inputRef = useRef(null);
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => normalizeValue(defaultValue));
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const displayValue = isControlled ? normalizeValue(value) : internalValue;
+    const parsedValue = parseValue(displayValue);
+    const resolvedFocused = focused || isInputFocused;
+    const allowNegative = typeof min !== 'number' || min < 0 || (typeof max === 'number' && max < 0);
+    const decimalPrecision = Math.max(getDecimalPlaces(value), getDecimalPlaces(defaultValue), getDecimalPlaces(min), getDecimalPlaces(max), getDecimalPlaces(step));
+    const allowDecimal = decimalPrecision > 0;
+    const keyboardType = allowNegative || allowDecimal ? 'numeric' : 'number-pad';
+    const inputMode = allowDecimal ? 'decimal' : 'numeric';
+    useImperativeHandle(ref, () => inputRef.current, []);
+    useEffect(() => {
+        if (!isControlled && defaultValue !== undefined) {
+            setInternalValue(normalizeValue(defaultValue));
+        }
+    }, [defaultValue, isControlled]);
+    const updateValue = (nextValue) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChangeText?.(nextValue);
+        const nextParsedValue = parseValue(nextValue);
+        if (nextParsedValue !== null) {
+            onChangeValue?.(clampValue(nextParsedValue, min, max));
+        }
+    };
+    const handleChangeText = (nextText) => {
+        const sanitizedValue = sanitizeValue(nextText, allowNegative, allowDecimal);
+        if (sanitizedValue === '' ||
+            sanitizedValue === '-' ||
+            sanitizedValue === '.' ||
+            sanitizedValue === '-.' ||
+            (allowDecimal && sanitizedValue.endsWith('.'))) {
+            updateValue(sanitizedValue);
+            return;
+        }
+        const nextParsedValue = parseValue(sanitizedValue);
+        if (nextParsedValue === null) {
+            updateValue(sanitizedValue);
+            return;
+        }
+        const clampedText = formatNumber(clampValue(nextParsedValue, min, max), decimalPrecision);
+        updateValue(clampedText);
+    };
+    const handleStepPress = (direction) => {
+        const baseValue = parsedValue ?? (typeof min === 'number' ? min : 0);
+        const nextValue = clampValue(baseValue + direction * step, min, max);
+        const normalizedValue = formatNumber(nextValue, decimalPrecision);
+        updateValue(normalizedValue);
+        if (focusInputOnStepPress) {
+            inputRef.current?.focus();
+        }
+    };
+    const decrementDisabled = disabled || readonly || (typeof min === 'number' && parsedValue !== null && parsedValue <= min);
+    const incrementDisabled = disabled || readonly || (typeof max === 'number' && parsedValue !== null && parsedValue >= max);
+    const handleFocus = (event) => {
+        setIsInputFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setIsInputFocused(false);
+        onBlur?.(event);
+    };
+    const getAccessibilityLabel = () => {
+        let accessibilityLabel = '';
+        if (label) {
+            accessibilityLabel = accessibilityLabel + label;
+        }
+        if (required) {
+            accessibilityLabel = accessibilityLabel + ', required';
+        }
+        return accessibilityLabel || props.accessibilityLabel;
+    };
+    const getAccessibilityHint = () => {
+        let accessibilityHint = '';
+        if (helperText) {
+            accessibilityHint = accessibilityHint + helperText;
+        }
+        if (validationStatus !== 'initial') {
+            if (accessibilityHint.length > 0) {
+                accessibilityHint = accessibilityHint + ', ';
+            }
+            if (validationStatus === 'invalid' && invalidText) {
+                accessibilityHint = accessibilityHint + invalidText;
+            }
+            if (validationStatus === 'valid' && validText) {
+                accessibilityHint = accessibilityHint + validText;
+            }
+        }
+        return accessibilityHint || props.accessibilityHint;
+    };
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], children: _jsxs(View, { style: styles.controls, children: [_jsx(StepperButton, { icon: MinusSmallIcon, disabled: decrementDisabled, accessibilityLabel: decrementAccessibilityLabel, onPress: () => handleStepPress(-1) }), _jsx(InputComponent, { validationStatus: validationStatus, isInvalid: validationStatus === 'invalid', isReadOnly: readonly, isDisabled: disabled, isFocused: resolvedFocused, isRequired: required, style: styles.inputRoot, children: _jsx(InputField
+                    // @ts-expect-error - ref forwarding issue mirrors the base Input component
+                    , { 
+                        // @ts-expect-error - ref forwarding issue mirrors the base Input component
+                        ref: inputRef, inputMode: inputMode, keyboardType: keyboardType, inBottomSheet: inBottomSheet, editable: !disabled && !readonly, textAlign: "center", value: displayValue, onFocus: handleFocus, onBlur: handleBlur, onChangeText: handleChangeText, accessibilityLabel: getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), accessibilityState: {
+                            ...(props.accessibilityState ?? {}),
+                            disabled: disabled || readonly,
+                        }, "aria-disabled": disabled || readonly, "aria-readonly": readonly, "aria-required": required, "aria-invalid": validationStatus === 'invalid', ...props, style: styles.inputField }) }), _jsx(StepperButton, { icon: AddSmallIcon, disabled: incrementDisabled, accessibilityLabel: incrementAccessibilityLabel, onPress: () => handleStepPress(1) })] }) }));
+};
+StepperInput.displayName = 'StepperInput';
+const styles = StyleSheet.create(theme => ({
+    root: {
+        width: '100%',
+        maxWidth: theme.components.input.maxWidth,
+    },
+    controls: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.input.stepper.gap,
+    },
+    inputRoot: {
+        width: 80,
+        minWidth: 80,
+        paddingHorizontal: 0,
+        justifyContent: 'center',
+    },
+    inputField: {
+        textAlign: 'center',
+        paddingHorizontal: 0,
+    },
+}));
+export default StepperInput;

package/build/components/StepperInput/StepperInput.props.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentType, Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
+export interface StepperBaseProps {
+    ref?: Ref<TextInput>;
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: ComponentType;
+    validText?: string;
+    invalidText?: string;
+    value?: number | string;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChangeValue?: (value: number) => void;
+    focusInputOnStepPress?: boolean;
+    decrementAccessibilityLabel?: string;
+    incrementAccessibilityLabel?: string;
+}
+export type StepperInputProps = StepperBaseProps & Omit<TextInputProps, 'children' | 'value' | 'defaultValue' | 'onChangeText' | 'editable' | 'keyboardType'> & ViewProps & {
+    onChangeText?: (text: string) => void;
+};
+export default StepperInputProps;

package/build/components/StepperInput/StepperInput.props.js

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

package/build/components/StepperInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StepperInput } from './StepperInput';
+export type { StepperInputProps } from './StepperInput.props';