orn-ui 0.1.1 → 0.2.0

package/src/atoms/Transition.tsx

@@ -0,0 +1,189 @@
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../theme/UIProvider';
+
+export type TransitionPreset =
+  | 'fade'
+  | 'scale'
+  | 'pop'
+  | 'slide-up'
+  | 'slide-down'
+  | 'slide-left'
+  | 'slide-right';
+
+export interface TransitionProps {
+  children: React.ReactNode;
+  /** Entra en true, sale (y desmonta) en false. @default true */
+  visible?: boolean;
+  /** Uno o varios: 'fade scale' combina opacidad y escala. @default 'fade' */
+  preset?: TransitionPreset | TransitionPreset[];
+  /** ms del timing. @default tokens.duration.base */
+  duration?: number;
+  /** ms antes de arrancar. Un índice por delay escalona una lista. @default 0 */
+  delay?: number;
+  /** Píxeles que recorren los presets de slide. @default 24 */
+  distance?: number;
+  /** Spring en vez de timing (implícito en 'pop'). */
+  spring?: boolean;
+  /** Anima también el primer render. En false arranca ya presente. @default true */
+  appear?: boolean;
+  /** Deja el nodo montado al salir, sólo lo esconde. @default false */
+  keepMounted?: boolean;
+  /**
+   * Progreso 0→1 manejado desde afuera. Con esto el Transition sólo interpola:
+   * quien lo pasa decide cuándo y cómo avanza (un PanResponder, por ejemplo).
+   */
+  value?: Animated.Value;
+  onEntered?: () => void;
+  onExited?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const SCALE_FROM: Record<'scale' | 'pop', number> = { scale: 0.92, pop: 0.8 };
+
+/**
+ * Sigue el ajuste de "reducir movimiento" del sistema: con él activo las
+ * animaciones saltan al estado final en vez de desactivarse, así que los
+ * callbacks y el desmontaje siguen ocurriendo igual.
+ */
+export function useReduceMotion(): boolean {
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    // Sólo se actualiza el estado si el ajuste está activo: el valor inicial ya
+    // es `false` y un setState de false a false costaría un render por montaje.
+    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+      if (alive && enabled) setReduceMotion(true);
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+
+  return reduceMotion;
+}
+
+/**
+ * Transition
+ * Envuelve cualquier árbol y lo anima al entrar y al salir. Todos los presets
+ * se reducen a `opacity` y `transform` sobre un único Animated.Value, que es
+ * lo que `useNativeDriver` sabe mandar al hilo nativo: la animación corre ahí
+ * y el hilo de JS no participa de ningún frame — por eso no hay presets de
+ * alto, ancho o color, que obligarían a volver a JS en cada frame.
+ *
+ * El nodo se mantiene montado hasta que termina la animación de salida, y el
+ * comportamiento es idéntico en iOS y Android: no hay ninguna rama por
+ * plataforma.
+ */
+export const Transition = memo(
+  ({
+    children,
+    visible = true,
+    preset = 'fade',
+    duration,
+    delay = 0,
+    distance = 24,
+    spring,
+    appear = true,
+    keepMounted = false,
+    value,
+    onEntered,
+    onExited,
+    style,
+    testID,
+  }: TransitionProps) => {
+    const theme = useTheme();
+    const reduceMotion = useReduceMotion();
+    const internal = useRef(new Animated.Value(visible && !appear ? 1 : 0)).current;
+    const progress = value ?? internal;
+    const driven = value === undefined;
+
+    const [mounted, setMounted] = useState(visible || keepMounted);
+
+    // Los callbacks viven en un ref: pasados inline cambian de identidad en
+    // cada render y, como dependencias del efecto, reiniciarían la animación.
+    const callbacks = useRef({ onEntered, onExited });
+    useEffect(() => {
+      callbacks.current = { onEntered, onExited };
+    });
+
+    const presetKey = Array.isArray(preset) ? preset.join(' ') : preset;
+    const presets = useMemo(() => presetKey.split(' ') as TransitionPreset[], [presetKey]);
+
+    useEffect(() => {
+      if (visible) setMounted(true);
+    }, [visible]);
+
+    useEffect(() => {
+      if (!driven) return;
+      const toValue = visible ? 1 : 0;
+      const useSpring = spring ?? presets.includes('pop');
+
+      const animation = reduceMotion
+        ? Animated.timing(progress, { toValue, duration: 0, delay, useNativeDriver: true })
+        : useSpring
+          ? Animated.spring(progress, { toValue, delay, friction: 9, tension: 90, useNativeDriver: true })
+          : Animated.timing(progress, {
+              toValue,
+              delay,
+              duration: duration ?? theme.tokens.duration.base,
+              easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
+              useNativeDriver: true,
+            });
+
+      animation.start(({ finished }) => {
+        if (!finished) return;
+        if (visible) {
+          callbacks.current.onEntered?.();
+          return;
+        }
+        callbacks.current.onExited?.();
+        if (!keepMounted) setMounted(false);
+      });
+
+      return () => animation.stop();
+    }, [visible, driven, reduceMotion, spring, delay, duration, keepMounted, presets, progress, theme]);
+
+    const animatedStyle = useMemo(() => {
+      type Interpolated = Animated.AnimatedInterpolation<number>;
+      const transform: Array<{ scale: Interpolated } | { translateX: Interpolated } | { translateY: Interpolated }> = [];
+      let opacity: Animated.Value | undefined;
+
+      for (const item of presets) {
+        if (item === 'fade') {
+          opacity = progress;
+          continue;
+        }
+        if (item === 'scale' || item === 'pop') {
+          transform.push({
+            scale: progress.interpolate({ inputRange: [0, 1], outputRange: [SCALE_FROM[item], 1] }),
+          });
+          continue;
+        }
+        const vertical = item === 'slide-up' || item === 'slide-down';
+        const from = item === 'slide-up' || item === 'slide-left' ? distance : -distance;
+        const offset = progress.interpolate({ inputRange: [0, 1], outputRange: [from, 0] });
+        transform.push(vertical ? { translateY: offset } : { translateX: offset });
+      }
+
+      return { opacity, transform };
+    }, [presets, progress, distance]);
+
+    if (!mounted) return null;
+
+    return (
+      <Animated.View
+        testID={testID}
+        pointerEvents={visible ? undefined : 'none'}
+        style={[style, animatedStyle]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+);
+Transition.displayName = 'Transition';

package/src/atoms/index.ts

@@ -20,6 +20,10 @@ export { Image, prefetchImage } from './Image';
 export type { ImageProps } from './Image';
 export { Spinner } from './Spinner';
 export type { SpinnerProps, SpinnerVariant } from './Spinner';
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton';
+export { Transition, useReduceMotion } from './Transition';
+export type { TransitionProps, TransitionPreset } from './Transition';
 export { EmptyState } from './EmptyState';
 export type { EmptyStateProps } from './EmptyState';
 export { KeyValueRow } from './KeyValueRow';

package/src/molecules/OptionCard.tsx

@@ -1,22 +1,29 @@
 import React, { memo } from 'react';
-import { Text, TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
+import { PressableScale } from '../atoms/PressableScale';
 import type { IconName } from '../icons/types';
 
 export interface OptionCardProps {
   label: string;
-  iconName: IconName;
+  /** Línea secundaria: el detalle que decide la elección ("llega en 3 días"). */
+  description?: string;
+  iconName?: IconName;
   isSelected: boolean;
   onPress: () => void;
-  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': ícono y texto en fila. */
+  disabled?: boolean;
+  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': en fila. @default 'horizontal' */
   layout?: 'vertical' | 'horizontal';
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 const useStyles = createStyles((theme) => ({
   card: {
+    // Las tarjetas se reparten la fila que las contenga, sean dos o cinco.
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: theme.colors.surface,
@@ -25,8 +32,8 @@ const useStyles = createStyles((theme) => ({
     borderColor: theme.colors.border,
     ...theme.tokens.shadow.sm,
   },
-  cardHorizontal: { flex: 1, flexDirection: 'row', padding: theme.tokens.spacing.md - 2, gap: theme.tokens.spacing.sm },
-  cardVertical: { width: '31%', padding: theme.tokens.spacing.sm, gap: 5, minHeight: 100 },
+  cardHorizontal: { flexDirection: 'row', padding: theme.tokens.spacing.md - 2, gap: theme.tokens.spacing.sm },
+  cardVertical: { padding: theme.tokens.spacing.md - 2, gap: 6, minHeight: 100 },
   cardSelected: {
     borderColor: theme.colors.primary,
     backgroundColor: theme.colors.primarySoft,
@@ -34,48 +41,78 @@ const useStyles = createStyles((theme) => ({
     elevation: 0,
     shadowOpacity: 0,
   },
+  cardDisabled: { opacity: 0.5 },
+  text: { flexShrink: 1 },
+  textVertical: { alignItems: 'center' },
   label: { color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },
   labelVertical: { fontSize: theme.tokens.fontSize.xs, textAlign: 'center' },
   labelSelected: { color: theme.colors.primaryText },
+  description: { fontSize: theme.tokens.fontSize.xs, color: theme.colors.textLight, marginTop: 2 },
+  descriptionVertical: { textAlign: 'center' },
 }));
 
 /**
  * OptionCard
- * Card con ícono+label que resalta con borde/fondo primary cuando
- * `isSelected`. Para elegir entre opciones excluyentes (forma de pago, tipo
- * de documento, etc).
+ * Opción excluyente con ícono y label que resalta cuando `isSelected`. Es un
+ * radio con cara de tarjeta, así que se anuncia como tal: envolver el grupo en
+ * una View con `accessibilityRole="radiogroup"` para que el lector de pantalla
+ * lea "1 de 3".
  */
 export const OptionCard = memo(
-  ({ label, iconName, isSelected, onPress, layout = 'horizontal', style }: OptionCardProps) => {
+  ({
+    label,
+    description,
+    iconName,
+    isSelected,
+    onPress,
+    disabled = false,
+    layout = 'horizontal',
+    style,
+    testID,
+  }: OptionCardProps) => {
     const colors = useColors();
     const styles = useStyles();
     const allowFontScaling = useAllowFontScaling();
+    const isVertical = layout === 'vertical';
 
+    // Feedback por transform y no por opacity: con elevation, animar la opacity
+    // dispara un bug de Android que redibuja la sombra como un borde oscuro.
     return (
-      <TouchableOpacity
-        // activeOpacity=1: esta tarjeta tiene elevation (sombra Android); animar su
-        // propia opacity en el press dispara un bug de Android que redibuja la
-        // sombra como un borde oscuro pegado al borde del componente.
-        activeOpacity={1}
+      <PressableScale
         style={[
           styles.card,
-          layout === 'vertical' ? styles.cardVertical : styles.cardHorizontal,
+          isVertical ? styles.cardVertical : styles.cardHorizontal,
           isSelected && styles.cardSelected,
+          disabled && styles.cardDisabled,
           style,
         ]}
         onPress={onPress}
-        accessibilityRole="button"
-        accessibilityState={{ selected: isSelected }}
+        disabled={disabled}
+        accessibilityRole="radio"
+        accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}
         accessibilityLabel={label}
+        accessibilityHint={description}
+        testID={testID}
       >
-        <Icon name={iconName} size={24} color={isSelected ? colors.primary : colors.textLight} />
-        <Text
-          allowFontScaling={allowFontScaling}
-          style={[styles.label, layout === 'vertical' && styles.labelVertical, isSelected && styles.labelSelected]}
-        >
-          {label}
-        </Text>
-      </TouchableOpacity>
+        {!!iconName && <Icon name={iconName} size={24} color={isSelected ? colors.primary : colors.textLight} />}
+
+        <View style={[styles.text, isVertical && styles.textVertical]}>
+          <Text
+            allowFontScaling={allowFontScaling}
+            style={[styles.label, isVertical && styles.labelVertical, isSelected && styles.labelSelected]}
+          >
+            {label}
+          </Text>
+          {!!description && (
+            <Text
+              allowFontScaling={allowFontScaling}
+              style={[styles.description, isVertical && styles.descriptionVertical]}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+      </PressableScale>
     );
   }
 );

package/src/molecules/SegmentedControl.tsx

@@ -0,0 +1,84 @@
+import React, { memo } from 'react';
+import { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling } from '../theme/UIProvider';
+
+export interface SegmentedControlOption<T extends string = string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps<T extends string = string> {
+  options: SegmentedControlOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  track: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.inputBackground,
+    borderRadius: theme.tokens.radius.md,
+    padding: 3,
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: theme.tokens.spacing.sm,
+    borderRadius: theme.tokens.radius.sm,
+    alignItems: 'center',
+  },
+  segmentActive: { backgroundColor: theme.colors.surface, ...theme.tokens.shadow.sm },
+  segmentDisabled: { opacity: 0.5 },
+  label: { fontSize: theme.tokens.fontSize.sm, fontWeight: theme.tokens.fontWeight.medium, color: theme.colors.textLight },
+  labelActive: { color: theme.colors.primaryText, fontWeight: theme.tokens.fontWeight.semibold },
+}));
+
+/**
+ * SegmentedControl
+ * Elige una opción entre pocas, todas visibles. No conoce ningún estado
+ * global: recibe `value` y avisa por `onChange`.
+ */
+function SegmentedControlInner<T extends string>({
+  options,
+  value,
+  onChange,
+  disabled = false,
+  style,
+  testID,
+}: SegmentedControlProps<T>) {
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+
+  return (
+    <View style={[styles.track, style]} accessibilityRole="radiogroup" testID={testID}>
+      {options.map((option) => {
+        const active = option.value === value;
+        const isDisabled = disabled || !!option.disabled;
+        return (
+          <TouchableOpacity
+            key={option.value}
+            style={[styles.segment, active && styles.segmentActive, isDisabled && styles.segmentDisabled]}
+            onPress={() => onChange(option.value)}
+            disabled={isDisabled}
+            accessibilityRole="radio"
+            accessibilityState={{ selected: active, checked: active, disabled: isDisabled }}
+            accessibilityLabel={option.label}
+            testID={testID && `${testID}-${option.value}`}
+          >
+            <Text allowFontScaling={allowFontScaling} style={[styles.label, active && styles.labelActive]}>
+              {option.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+// memo() pierde los genéricos al envolver: el cast los devuelve para que
+// `value` y `onChange` sigan atados al union de `options`.
+export const SegmentedControl = memo(SegmentedControlInner) as typeof SegmentedControlInner;

package/src/molecules/Stepper.tsx

@@ -1,29 +1,89 @@
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { TextInput, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
 
+export type StepperSize = 'sm' | 'md' | 'lg';
+
 export interface StepperProps {
   value: string;
   onChangeText: (text: string) => void;
   onIncrement: () => void;
   onDecrement: () => void;
-  size?: 'sm' | 'md';
+  /** Escala del control: alto, botones, ícono y tipografía. @default 'md' */
+  size?: StepperSize;
+  /** Ocupa todo el ancho disponible y el input se lleva el sobrante. @default false */
+  block?: boolean;
+  /**
+   * En false el valor sólo se cambia con los botones: el teclado no se abre y
+   * el campo pierde el fondo que lo anuncia como editable. @default true
+   */
+  editable?: boolean;
+  /**
+   * Mínimo permitido. Deshabilita "-" al alcanzarlo y acota lo tipeado al
+   * salir del campo. Los negativos se aceptan sólo si `min` es negativo.
+   */
+  min?: number;
+  /** Máximo permitido. Deshabilita "+" al alcanzarlo y acota lo tipeado. */
+  max?: number;
+  /** Acepta un separador decimal, normalizando la coma a punto. @default false */
+  allowDecimals?: boolean;
   style?: StyleProp<ViewStyle>;
   incrementAccessibilityLabel?: string;
   decrementAccessibilityLabel?: string;
+  testID?: string;
 }
 
+const SIZES: Record<StepperSize, { height: number; icon: number; inputWidth: number }> = {
+  sm: { height: 36, icon: 18, inputWidth: 48 },
+  md: { height: 44, icon: 20, inputWidth: 56 },
+  lg: { height: 52, icon: 22, inputWidth: 64 },
+};
+
 const useStyles = createStyles((theme) => ({
-  control: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: theme.colors.border, borderRadius: theme.tokens.radius.md },
-  btn: { height: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: theme.colors.inputBackground },
-  btnSm: { backgroundColor: 'transparent' },
-  input: { flex: 1, textAlign: 'center', fontSize: theme.tokens.fontSize.lg, color: theme.colors.text, height: '100%' },
-  inputSm: { flex: 0, width: 50, borderLeftWidth: 1, borderRightWidth: 1, borderColor: theme.colors.border },
+  control: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.tokens.radius.md,
+  },
+  controlBlock: { alignSelf: 'stretch' },
+  btn: { height: '100%', justifyContent: 'center', alignItems: 'center' },
+  input: {
+    textAlign: 'center',
+    height: '100%',
+    color: theme.colors.text,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderColor: theme.colors.border,
+  },
+  // El fondo distingue el campo de un valor de sólo lectura: es la única
+  // señal de que ahí se puede tipear antes de tocarlo.
+  editable: { backgroundColor: theme.colors.inputBackground },
 }));
 
-/** Stepper: botón "-" + input numérico editable + botón "+". */
+/** Deja sólo lo que puede formar parte del número permitido por el rango. */
+export function sanitizeNumeric(text: string, { allowDecimals = false, allowNegative = false } = {}): string {
+  const normalized = allowDecimals ? text.replace(',', '.') : text;
+  const negative = allowNegative && normalized.trimStart().startsWith('-');
+  const digits = normalized.replace(allowDecimals ? /[^0-9.]/g : /[^0-9]/g, '');
+  const [whole = '', ...decimals] = digits.split('.');
+  const body = decimals.length > 0 ? `${whole}.${decimals.join('')}` : whole;
+  return negative ? `-${body}` : body;
+}
+
+/**
+ * Stepper
+ * Botón "-" + input numérico editable + botón "+". `size` controla sólo la
+ * escala y `block` sólo el ancho, así que los dos ejes se combinan libremente.
+ *
+ * El componente no hace la aritmética de los botones —eso vive en
+ * `onIncrement`/`onDecrement`—, pero sí limpia lo que se tipea y avisa cuándo
+ * el valor llegó a un extremo del rango deshabilitando el botón que lo pasaría.
+ */
 export const Stepper = memo(
   ({
     value,
@@ -31,44 +91,99 @@ export const Stepper = memo(
     onIncrement,
     onDecrement,
     size = 'md',
+    block = false,
+    editable = true,
+    min,
+    max,
+    allowDecimals = false,
     style,
     incrementAccessibilityLabel = 'Increment',
     decrementAccessibilityLabel = 'Decrement',
+    testID,
   }: StepperProps) => {
+    const theme = useTheme();
     const colors = useColors();
     const styles = useStyles();
     const allowFontScaling = useAllowFontScaling();
-    const isSmall = size === 'sm';
-    const btnSize = isSmall ? 36 : 48;
-    const iconSize = isSmall ? 18 : 20;
+    const [focused, setFocused] = useState(false);
+
+    const { height, icon, inputWidth } = SIZES[size];
+    const fontSize =
+      size === 'sm' ? theme.tokens.fontSize.md : size === 'md' ? theme.tokens.fontSize.lg : theme.tokens.fontSize.xl;
+
+    const allowNegative = min !== undefined && min < 0;
+    const numeric = Number(value);
+    const isNumber = value.trim() !== '' && Number.isFinite(numeric);
+    const atMin = isNumber && min !== undefined && numeric <= min;
+    const atMax = isNumber && max !== undefined && numeric >= max;
+
+    const handleChangeText = (text: string) => {
+      onChangeText(sanitizeNumeric(text, { allowDecimals, allowNegative }));
+    };
+
+    // El recorte al rango espera al blur: hacerlo mientras se tipea impide
+    // llegar a "12" cuando el mínimo es 5, porque el "1" ya se corregiría.
+    const handleBlur = () => {
+      setFocused(false);
+      if (!isNumber) return;
+      const clamped = Math.min(max ?? numeric, Math.max(min ?? numeric, numeric));
+      if (clamped !== numeric) onChangeText(String(clamped));
+    };
+
+    const stepButton = (
+      direction: 'decrement' | 'increment',
+      onPress: () => void,
+      disabled: boolean,
+      label: string
+    ) => (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={disabled}
+        style={[styles.btn, { width: height }]}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ disabled }}
+        testID={testID && `${testID}-${direction}`}
+      >
+        <Icon
+          name={direction === 'increment' ? 'plus' : 'minus'}
+          size={icon}
+          color={disabled ? colors.textLight : colors.primary}
+        />
+      </TouchableOpacity>
+    );
 
     return (
-      <View style={[styles.control, { height: isSmall ? 36 : 48 }, style]}>
-        <TouchableOpacity
-          onPress={onDecrement}
-          style={[styles.btn, { width: btnSize }, isSmall && styles.btnSm]}
-          accessibilityRole="button"
-          accessibilityLabel={decrementAccessibilityLabel}
-        >
-          <Icon name="minus" size={iconSize} color={colors.primary} />
-        </TouchableOpacity>
+      <View
+        testID={testID}
+        style={[
+          styles.control,
+          { height },
+          block && styles.controlBlock,
+          focused && { borderColor: colors.primary },
+          style,
+        ]}
+      >
+        {stepButton('decrement', onDecrement, atMin, decrementAccessibilityLabel)}
         <TextInput
           allowFontScaling={allowFontScaling}
-          style={[styles.input, isSmall && styles.inputSm]}
+          style={[
+            styles.input,
+            { fontSize },
+            editable && styles.editable,
+            focused && { borderColor: colors.primary },
+            block ? { flex: 1 } : { width: inputWidth },
+          ]}
           value={value}
-          onChangeText={onChangeText}
-          keyboardType="numeric"
+          onChangeText={handleChangeText}
+          onFocus={() => setFocused(true)}
+          onBlur={handleBlur}
+          editable={editable}
+          keyboardType={allowDecimals ? 'decimal-pad' : 'number-pad'}
           selectTextOnFocus
           accessibilityLabel="Quantity"
         />
-        <TouchableOpacity
-          onPress={onIncrement}
-          style={[styles.btn, { width: btnSize }, isSmall && styles.btnSm]}
-          accessibilityRole="button"
-          accessibilityLabel={incrementAccessibilityLabel}
-        >
-          <Icon name="plus" size={iconSize} color={colors.primary} />
-        </TouchableOpacity>
+        {stepButton('increment', onIncrement, atMax, incrementAccessibilityLabel)}
       </View>
     );
   }

package/src/molecules/index.ts

@@ -1,5 +1,5 @@
-export { Stepper } from './Stepper';
-export type { StepperProps } from './Stepper';
+export { Stepper, sanitizeNumeric } from './Stepper';
+export type { StepperProps, StepperSize } from './Stepper';
 export { OptionCard } from './OptionCard';
 export type { OptionCardProps } from './OptionCard';
 export { InfoRow } from './InfoRow';
@@ -8,7 +8,7 @@ export { FormActions } from './FormActions';
 export type { FormActionsProps } from './FormActions';
 export { AvatarHeader } from './AvatarHeader';
 export type { AvatarHeaderProps } from './AvatarHeader';
-export { ThemeToggle } from './ThemeToggle';
-export type { ThemeToggleProps } from './ThemeToggle';
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';
 export { Steps } from './Steps';
 export type { StepsProps, StepItem, StepStatus } from './Steps';