orn-ui 0.1.0 → 0.2.0

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,57 +32,87 @@ 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.primary + '15',
+    backgroundColor: theme.colors.primarySoft,
     borderWidth: 1.5,
     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.primary },
+  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/Steps.tsx

@@ -82,8 +82,8 @@ export const Steps = memo(
     const isVertical = orientation === 'vertical';
 
     const colorsFor = (status: StepStatus) => {
-      if (status === 'completed') return { bg: colors.primary, border: colors.primary, fg: colors.white };
-      if (status === 'current') return { bg: 'transparent', border: colors.primary, fg: colors.primary };
+      if (status === 'completed') return { bg: colors.primary, border: colors.primary, fg: colors.onPrimary };
+      if (status === 'current') return { bg: 'transparent', border: colors.primary, fg: colors.primaryText };
       return { bg: 'transparent', border: colors.border, fg: colors.textLight };
     };
 

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';

package/src/organisms/Alert.tsx

@@ -91,11 +91,12 @@ export const Alert = memo((props: AlertProps) => {
   if (!visible) return null;
 
   const iconColor: Record<AlertType, string> = {
-    success: colors.success,
-    error: colors.error,
-    warning: colors.warning,
-    question: colors.primary,
-    info: colors.secondary,
+    // Íconos sobre la superficie del diálogo: rol `*Text`, no el acento pleno.
+    success: colors.successText,
+    error: colors.errorText,
+    warning: colors.warningText,
+    question: colors.primaryText,
+    info: colors.secondaryText,
   };
 
   const effectiveButtons = resolveButtons(props, { confirm: labels.confirm, cancel: labels.cancel, close: labels.close });

package/src/organisms/AlertProvider.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Alert, type AlertButton, type AlertType } from './Alert';
+import { createImperativeBridge } from './imperativeBridge';
 
 export interface AlertOptions {
   title: string;
@@ -23,6 +24,25 @@ interface AlertContextValue {
 }
 
 const AlertContext = createContext<AlertContextValue | undefined>(undefined);
+const bridge = createImperativeBridge<AlertContextValue>('AlertProvider');
+
+/**
+ * Abre un alert desde fuera del árbol de React —un servicio, un interceptor—
+ * sin pasar por el hook. Sin <AlertProvider> montado resuelve de inmediato, así
+ * que un `await` nunca queda colgado.
+ */
+export function showAlert(options: AlertOptions): Promise<void> {
+  return bridge.get()?.alert(options) ?? Promise.resolve();
+}
+
+/** Igual que showAlert, pero resuelve true/false. Sin provider, false. */
+export function showConfirm(options: ConfirmOptions): Promise<boolean> {
+  return bridge.get()?.confirm(options) ?? Promise.resolve(false);
+}
+
+export function hideAlert(): void {
+  bridge.get()?.hide();
+}
 
 interface InternalState {
   visible: boolean;
@@ -108,6 +128,11 @@ export function AlertProvider({ children }: { children: React.ReactNode }) {
 
   const value = useMemo<AlertContextValue>(() => ({ alert: alertFn, confirm: confirmFn, hide }), [alertFn, confirmFn, hide]);
 
+  useEffect(() => {
+    bridge.set(value);
+    return () => bridge.set(null);
+  }, [value]);
+
   return (
     <AlertContext.Provider value={value}>
       {children}