orn-ui 0.2.10 → 0.3.0

package/lib/module/atoms/Image.js

@@ -3,11 +3,23 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { Image as RNImage, Platform, StyleSheet, View } from 'react-native';
 import { createStyles } from '../theme/createStyles';
+import { useColors, useTheme } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
 import { Spinner } from './Spinner';
+
+/**
+ * The event RN's Image passes to `onError`. Taken from its own prop type:
+ * react-native 0.88 (Expo SDK 58) renamed the exported name
+ * (`ImageErrorEventData` -> `ImageErrorEvent`).
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = createStyles(theme => ({
   container: {
-    overflow: 'hidden',
+    overflow: 'hidden'
+  },
+  // Only while loading or on failure: once the image has loaded, a PNG with
+  // transparency (a logo) let this gray show through.
+  placeholder: {
     backgroundColor: theme.colors.skeleton
   },
   overlay: {
@@ -16,7 +28,9 @@ const useStyles = createStyles(theme => ({
   },
   fallback: {
     flex: 1,
-    backgroundColor: theme.colors.skeleton
+    backgroundColor: theme.colors.skeleton,
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 }));
 function sourceUri(source) {
@@ -25,14 +39,22 @@ function sourceUri(source) {
 
 /**
  * Image
- * Wrapper cero-dependencias sobre <Image> de RN: agrega estado de carga y
- * error (con los mismos placeholders que el resto de la librería), y expone
- * `priority="high"` para adelantar la descarga vía Image.prefetch(). El
- * cache real (disco/memoria) lo maneja el motor de imágenes nativo de RN —
- * esto no lo reimplementa, solo no lo deja apagado por accidente: en iOS
- * fuerza `cache="force-cache"` (usa el disco aunque el header HTTP no lo
- * pida); en Android el cache de disco de la imagen nativa ya está siempre
- * activo, no hay knob equivalente que tocar.
+ * Zero-dependency wrapper over RN's <Image>: adds loading and error state
+ * (with the same placeholders as the rest of the library), and exposes
+ * `priority="high"` to start the download early via Image.prefetch(). The
+ * actual cache (disk/memory) is handled by RN's native image engine — this
+ * doesn't reimplement it, it just keeps it from being accidentally turned off:
+ * on iOS it forces `cache="force-cache"` (uses the disk even when the HTTP
+ * header doesn't ask for it); on Android the native image's disk cache is
+ * always on, there is no equivalent knob to touch.
+ *
+ * Gestalt, closure: the container takes its final size from the first frame
+ * (`skeleton` background), so the layout doesn't jump when the image arrives
+ * and the eye completes the shape it will fill. If loading fails, the same
+ * slot shows a warning icon: the state is visible, not a silent gray.
+ *
+ * Success is detected with `onLoad`, not `onLoadEnd`: RN also calls
+ * `onLoadEnd` on failure, and using it for "loaded" overwrote the error.
  */
 export const Image = /*#__PURE__*/memo(({
   source,
@@ -46,14 +68,17 @@ export const Image = /*#__PURE__*/memo(({
   style,
   onLoadEnd,
   onError,
-  testID
+  testID,
+  accessibilityLabel
 }) => {
   const styles = useStyles();
+  const colors = useColors();
+  const theme = useTheme();
   const [status, setStatus] = useState('loading');
   const uri = sourceUri(source);
   useEffect(() => {
-    // Resetea el estado si cambia la imagen (misma instancia de Image,
-    // source distinto: p.ej. avatar de un usuario a otro en la misma fila).
+    // Resets the state if the image changes (same Image instance, different
+    // source: e.g. one user's avatar to another's in the same row).
     setStatus('loading');
   }, [uri ?? source]);
   useEffect(() => {
@@ -65,26 +90,29 @@ export const Image = /*#__PURE__*/memo(({
     setStatus('error');
     onError?.(e);
   }, [onError]);
-  const handleLoadEnd = useCallback(() => {
+  const handleLoad = useCallback(() => {
     setStatus('loaded');
-    onLoadEnd?.();
-  }, [onLoadEnd]);
+  }, []);
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
+    style: [styles.container, status !== 'loaded' && styles.placeholder, {
       width,
       height,
       borderRadius: radius
     }, style],
     testID: testID,
+    accessible: !!accessibilityLabel,
+    accessibilityRole: accessibilityLabel ? 'image' : undefined,
+    accessibilityLabel: accessibilityLabel,
     children: [status !== 'error' && /*#__PURE__*/_jsx(RNImage, {
       source: source,
       resizeMode: resizeMode,
       style: StyleSheet.absoluteFill,
-      fadeDuration: Platform.OS === 'android' ? 150 : undefined,
+      fadeDuration: Platform.OS === 'android' ? theme.tokens.duration.fast : undefined,
       ...(Platform.OS === 'ios' ? {
         cache: 'force-cache'
       } : null),
-      onLoadEnd: handleLoadEnd,
+      onLoad: handleLoad,
+      onLoadEnd: onLoadEnd,
       onError: handleError
     }), status === 'loading' && loading !== false && /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, styles.overlay],
@@ -92,17 +120,25 @@ export const Image = /*#__PURE__*/memo(({
         size: "small",
         fullscreen: false
       }) : loading
-    }), status === 'error' && (fallback ?? /*#__PURE__*/_jsx(View, {
-      style: styles.fallback
-    }))]
+    }), status === 'error' &&
+    /*#__PURE__*/
+    // Custom fallback or the default: always centered in the slot.
+    _jsx(View, {
+      style: styles.fallback,
+      children: fallback ?? /*#__PURE__*/_jsx(Icon, {
+        name: "warning",
+        size: Math.max(16, Math.min(32, Math.round(Math.min(width ?? 64, height ?? 64) * 0.3))),
+        color: colors.textLight
+      })
+    })]
   });
 });
 Image.displayName = 'Image';
 
 /**
- * Precarga una URL antes de montar el componente (p.ej. al recibir la
- * respuesta de un listado, antes de navegar al detalle). Re-exporta
- * Image.prefetch de RN — no hay nada zero-dep que agregarle encima.
+ * Preloads a URL before mounting the component (e.g. on receiving a list
+ * response, before navigating to the detail). Re-exports RN's
+ * Image.prefetch — there is nothing zero-dep to add on top.
  */
 export const prefetchImage = RNImage.prefetch;
 //# sourceMappingURL=Image.js.map

package/lib/module/atoms/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useEffect","useState","Image","RNImage","Platform","StyleSheet","View","createStyles","Spinner","jsx","_jsx","jsxs","_jsxs","useStyles","theme","container","overflow","backgroundColor","colors","skeleton","overlay","alignItems","justifyContent","fallback","flex","sourceUri","source","uri","undefined","width","height","resizeMode","radius","loading","priority","style","onLoadEnd","onError","testID","styles","status","setStatus","prefetch","catch","handleError","e","handleLoadEnd","borderRadius","children","absoluteFill","fadeDuration","OS","cache","size","fullscreen","displayName","prefetchImage"],"sourceRoot":"../../../src","sources":["atoms/Image.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","useCallback","useEffect","useState","Image","RNImage","Platform","StyleSheet","View","createStyles","useColors","useTheme","Icon","Spinner","jsx","_jsx","jsxs","_jsxs","useStyles","theme","container","overflow","placeholder","backgroundColor","colors","skeleton","overlay","alignItems","justifyContent","fallback","flex","sourceUri","source","uri","undefined","width","height","resizeMode","radius","loading","priority","style","onLoadEnd","onError","testID","accessibilityLabel","styles","status","setStatus","prefetch","catch","handleError","e","handleLoad","borderRadius","accessible","accessibilityRole","children","absoluteFill","fadeDuration","OS","tokens","duration","fast","cache","onLoad","size","fullscreen","name","Math","max","min","round","color","textLight","displayName","prefetchImage"],"sourceRoot":"../../../src","sources":["atoms/Image.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/Input.js

@@ -1,10 +1,14 @@
 "use strict";
 
-import React, { memo, useRef, useState } from 'react';
-import { ActivityIndicator, Animated, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { AccessibilityInfo, ActivityIndicator, Animated, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useLabels, useTheme } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
+import { useKeyboardField } from '../theme/useKeyboardField';
+import { validateInputValue } from './inputValidation';
+
+/** The TextInput instance, plus `validate()` to check the field on demand (e.g. on submit). */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = createStyles(theme => ({
   container: {
@@ -39,9 +43,15 @@ const useStyles = createStyles(theme => ({
     marginLeft: theme.tokens.spacing.lg,
     marginRight: -theme.tokens.spacing.xs
   },
+  // 20 icon + md padding (12) per side = 44pt touch area (Fitts).
   rightIcon: {
-    padding: theme.tokens.spacing.sm + 2,
-    marginRight: theme.tokens.spacing.xs
+    padding: theme.tokens.spacing.md,
+    marginRight: theme.tokens.spacing.xxs
+  },
+  // Read-only: no fill, so it doesn't look like a field you can tap
+  // (affordance), but the text keeps its contrast to stay readable.
+  readOnly: {
+    backgroundColor: 'transparent'
   },
   errorText: {
     marginTop: theme.tokens.spacing.xs,
@@ -52,18 +62,46 @@ const useStyles = createStyles(theme => ({
 
 /**
  * Input
- * El borde anima color entre border/primary/error con Animated (no
- * useNativeDriver: los navegadores de color en RN sin Fabric solo son
- * confiables en el hilo de JS; el costo es despreciable, se anima un borde).
+ * The border animates its color between border/primary/error with Animated
+ * (no useNativeDriver: color drivers in RN without Fabric are only reliable
+ * on the JS thread; the cost is negligible, it animates one border).
+ *
+ * Gestalt:
+ * - Proximity: label (`spacing.sm` above) and error (`spacing.xs` below) sit
+ *   right next to the field and the next field is `spacing.lg` away: each
+ *   label and its error read with their field, not with the neighbor.
+ * - Common region: left icon, text and right action share the same border
+ *   and background, so they read as a single control.
+ * - Focal point: the border turns `primary` on focus and `error` on error;
+ *   the error is also written out (not just color).
+ *
+ * Accessibility: the accessible name includes "required" when applicable, the
+ * error is announced as a hint, and the eye and right-action buttons have a
+ * 44pt touch area and texts from `labels` (translatable).
+ *
+ * Keyboard: on focus it registers with the root UIProvider's host, which
+ * lifts the app just enough for the whole field (label, field and error) to
+ * sit above the keyboard — without depending on Screen or a ScrollView. What
+ * you type is always visible.
+ *
+ * Validation: `required` and `rules` run when leaving the field (`validateOn`),
+ * the error appears in writing, is announced to the screen reader and, once
+ * visible, is revalidated on every change so it disappears as soon as it is
+ * fixed. An `error` passed by hand overrides the internal validation.
  */
-export const Input = /*#__PURE__*/memo(({
+export const Input = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   label,
   required = false,
-  error,
+  error: errorProp,
+  rules,
+  validateOn = 'blur',
+  onValidate,
+  onChangeText,
   containerStyle,
   leftIconName,
   rightIconName,
   onRightIconPress,
+  rightIconAccessibilityLabel,
   isPassword = false,
   isLoading = false,
   style,
@@ -71,39 +109,82 @@ export const Input = /*#__PURE__*/memo(({
   onBlur,
   testID,
   ...props
-}) => {
+}, ref) => {
   const colors = useColors();
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
+  const labels = useLabels();
+  const theme = useTheme();
+  const readOnly = props.editable === false;
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const focusProgress = useRef(new Animated.Value(0)).current;
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const [internalError, setInternalError] = useState(undefined);
+  // Last known value: the controlled one (`value`) or what was typed (uncontrolled).
+  const valueRef = useRef(props.value ?? props.defaultValue ?? '');
+  if (props.value !== undefined) valueRef.current = props.value;
+  const error = errorProp ?? internalError;
+  const runValidation = () => {
+    const next = validateInputValue(valueRef.current, {
+      required,
+      rules
+    }, labels);
+    setInternalError(next);
+    onValidate?.(next);
+    return next;
+  };
+  useImperativeHandle(ref, () => Object.assign(inputRef.current, {
+    validate: runValidation
+  }));
+
+  // The new error is announced right away, not only as a hint when returning to the field.
+  useEffect(() => {
+    if (internalError && errorProp === undefined) AccessibilityInfo.announceForAccessibility(internalError);
+  }, [internalError, errorProp]);
+  const keyboard = useKeyboardField(containerRef);
+
+  // If the error appears or changes while the field is focused, the block grows:
+  // a readjustment is requested so the error line isn't covered either.
+  useEffect(() => {
+    if (isFocused) keyboard.focus();
+  }, [error, isFocused, keyboard]);
   const handleFocus = e => {
     setIsFocused(true);
+    keyboard.focus();
     Animated.timing(focusProgress, {
       toValue: 1,
-      duration: 200,
+      duration: theme.tokens.duration.base,
       useNativeDriver: false
     }).start();
     onFocus?.(e);
   };
   const handleBlur = e => {
     setIsFocused(false);
+    keyboard.blur();
+    if (validateOn === 'blur') runValidation();
     Animated.timing(focusProgress, {
       toValue: 0,
-      duration: 200,
+      duration: theme.tokens.duration.base,
       useNativeDriver: false
     }).start();
     onBlur?.(e);
   };
+  const handleChangeText = text => {
+    valueRef.current = text;
+    onChangeText?.(text);
+    if (validateOn === 'change' || internalError) runValidation();
+  };
   const borderColor = error ? colors.error : focusProgress.interpolate({
     outputRange: [colors.border, colors.primary],
     inputRange: [0, 1]
   });
   return /*#__PURE__*/_jsxs(View, {
+    ref: containerRef,
     style: [styles.container, containerStyle],
     testID: testID,
-    children: [label && /*#__PURE__*/_jsxs(Text, {
+    children: [!!label && /*#__PURE__*/_jsxs(Text, {
       allowFontScaling: allowFontScaling,
       style: styles.label,
       children: [label, required && /*#__PURE__*/_jsx(Text, {
@@ -111,7 +192,7 @@ export const Input = /*#__PURE__*/memo(({
         children: " *"
       })]
     }), /*#__PURE__*/_jsxs(Animated.View, {
-      style: [styles.inputWrapper, {
+      style: [styles.inputWrapper, readOnly && styles.readOnly, {
         borderColor
       }],
       children: [leftIconName && /*#__PURE__*/_jsx(Icon, {
@@ -120,6 +201,7 @@ export const Input = /*#__PURE__*/memo(({
         color: colors.textLight,
         style: styles.leftIcon
       }), /*#__PURE__*/_jsx(TextInput, {
+        ref: inputRef,
         style: [styles.input, style],
         placeholderTextColor: colors.textLight,
         onFocus: handleFocus,
@@ -127,8 +209,14 @@ export const Input = /*#__PURE__*/memo(({
         secureTextEntry: isPassword && !showPassword,
         allowFontScaling: allowFontScaling,
         textAlignVertical: "center",
-        accessibilityLabel: label ?? props.placeholder,
-        ...props
+        accessibilityLabel: label || props.placeholder ? `${label ?? props.placeholder}${required ? `, ${labels.required}` : ''}` : undefined,
+        accessibilityHint: error || undefined,
+        accessibilityState: {
+          disabled: readOnly,
+          busy: isLoading
+        },
+        ...props,
+        onChangeText: handleChangeText
       }), isLoading ? /*#__PURE__*/_jsx(View, {
         style: styles.rightIcon,
         children: /*#__PURE__*/_jsx(ActivityIndicator, {
@@ -139,7 +227,7 @@ export const Input = /*#__PURE__*/memo(({
         onPress: () => setShowPassword(v => !v),
         style: styles.rightIcon,
         accessibilityRole: "button",
-        accessibilityLabel: showPassword ? 'Hide password' : 'Show password',
+        accessibilityLabel: showPassword ? labels.hidePassword : labels.showPassword,
         children: /*#__PURE__*/_jsx(Icon, {
           name: showPassword ? 'eye-off' : 'eye',
           size: 20,
@@ -150,7 +238,7 @@ export const Input = /*#__PURE__*/memo(({
         style: styles.rightIcon,
         disabled: !onRightIconPress,
         accessibilityRole: "button",
-        accessibilityLabel: "Clear",
+        accessibilityLabel: rightIconAccessibilityLabel ?? labels.clear,
         children: /*#__PURE__*/_jsx(Icon, {
           name: rightIconName,
           size: 20,
@@ -163,6 +251,6 @@ export const Input = /*#__PURE__*/memo(({
       children: error
     })]
   });
-});
+}));
 Input.displayName = 'Input';
 //# sourceMappingURL=Input.js.map

package/lib/module/atoms/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useRef","useState","ActivityIndicator","Animated","Text","TextInput","TouchableOpacity","View","createStyles","useAllowFontScaling","useColors","Icon","jsx","_jsx","jsxs","_jsxs","useStyles","theme","container","marginBottom","tokens","spacing","lg","width","label","sm","fontSize","md","fontWeight","medium","color","colors","text","required","errorText","inputWrapper","flexDirection","alignItems","backgroundColor","inputBackground","borderRadius","radius","borderWidth","minHeight","input","flex","paddingVertical","paddingHorizontal","leftIcon","marginLeft","marginRight","xs","rightIcon","padding","marginTop","Input","error","containerStyle","leftIconName","rightIconName","onRightIconPress","isPassword","isLoading","style","onFocus","onBlur","testID","props","styles","allowFontScaling","isFocused","setIsFocused","showPassword","setShowPassword","focusProgress","Value","current","handleFocus","e","timing","toValue","duration","useNativeDriver","start","handleBlur","borderColor","interpolate","outputRange","border","primary","inputRange","children","name","size","textLight","placeholderTextColor","secureTextEntry","textAlignVertical","accessibilityLabel","placeholder","onPress","v","accessibilityRole","disabled","displayName"],"sourceRoot":"../../../src","sources":["atoms/Input.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","memo","useEffect","useImperativeHandle","useRef","useState","AccessibilityInfo","ActivityIndicator","Animated","Text","TextInput","TouchableOpacity","View","createStyles","useAllowFontScaling","useColors","useLabels","useTheme","Icon","useKeyboardField","validateInputValue","jsx","_jsx","jsxs","_jsxs","useStyles","theme","container","marginBottom","tokens","spacing","lg","width","label","sm","fontSize","md","fontWeight","medium","color","colors","text","required","errorText","inputWrapper","flexDirection","alignItems","backgroundColor","inputBackground","borderRadius","radius","borderWidth","minHeight","input","flex","paddingVertical","paddingHorizontal","leftIcon","marginLeft","marginRight","xs","rightIcon","padding","xxs","readOnly","marginTop","Input","error","errorProp","rules","validateOn","onValidate","onChangeText","containerStyle","leftIconName","rightIconName","onRightIconPress","rightIconAccessibilityLabel","isPassword","isLoading","style","onFocus","onBlur","testID","props","ref","styles","allowFontScaling","labels","editable","isFocused","setIsFocused","showPassword","setShowPassword","focusProgress","Value","current","inputRef","containerRef","internalError","setInternalError","undefined","valueRef","value","defaultValue","runValidation","next","Object","assign","validate","announceForAccessibility","keyboard","focus","handleFocus","e","timing","toValue","duration","base","useNativeDriver","start","handleBlur","blur","handleChangeText","borderColor","interpolate","outputRange","border","primary","inputRange","children","name","size","textLight","placeholderTextColor","secureTextEntry","textAlignVertical","accessibilityLabel","placeholder","accessibilityHint","accessibilityState","disabled","busy","onPress","v","accessibilityRole","hidePassword","clear","displayName"],"sourceRoot":"../../../src","sources":["atoms/Input.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/KeyValueRow.js

@@ -9,42 +9,70 @@ const useStyles = createStyles(theme => ({
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
+    gap: theme.tokens.spacing.md
   },
+  // Two texts: aligned on the first line, so a value that wraps onto
+  // several lines still reads next to its label.
+  rowText: {
+    alignItems: 'baseline'
+  },
+  // The label keeps its natural width up to half the row; the value
+  // shrinks and wraps instead of pushing the row off the screen.
   label: {
+    flexShrink: 0,
+    maxWidth: '50%',
     fontSize: theme.tokens.fontSize.sm,
+    lineHeight: theme.tokens.lineHeight.sm,
     fontWeight: theme.tokens.fontWeight.semibold,
     color: theme.colors.textLight
   },
   value: {
+    flexShrink: 1,
     fontSize: theme.tokens.fontSize.sm,
+    lineHeight: theme.tokens.lineHeight.sm,
     textAlign: 'right',
-    color: theme.colors.text
+    color: theme.colors.text,
+    // Fixed-width digits: in a column of amounts the figures line up
+    // across rows.
+    fontVariant: ['tabular-nums']
   }
 }));
+const isPrimitive = node => typeof node === 'string' || typeof node === 'number';
 
 /**
  * KeyValueRow
- * Fila label (izquierda) / value (derecha). Si label/value son string o
- * number, se renderizan con el estilo default; si ya vienen envueltos en un
- * componente de texto propio, se respetan tal cual.
+ * Label (left) / value (right) row. If label/value are a string or number,
+ * they render with the default style; if they already come wrapped in a
+ * custom component, they are kept as is.
+ *
+ * Gestalt, alignment and similarity: labels share color and weight and values
+ * align to the right edge with tabular digits, so a stack of rows reads as
+ * two columns — what on the left, how much on the right.
+ * With a text label and value, the row is a single accessibility node
+ * ("Subtotal, $300.00"); if either is a custom node (a Badge, a button) it
+ * isn't merged, so as not to hide what that node announces or lets you tap.
  */
 export const KeyValueRow = /*#__PURE__*/memo(({
   label,
   value,
   style,
   labelStyle,
-  valueStyle
+  valueStyle,
+  testID
 }) => {
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
+  const merge = isPrimitive(label) && isPrimitive(value);
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.row, style],
-    children: [typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/_jsx(Text, {
+    style: [styles.row, merge && styles.rowText, style],
+    accessible: merge || undefined,
+    testID: testID,
+    children: [isPrimitive(label) ? /*#__PURE__*/_jsx(Text, {
       allowFontScaling: allowFontScaling,
       style: [styles.label, labelStyle],
       children: label
-    }) : label, typeof value === 'string' || typeof value === 'number' ? /*#__PURE__*/_jsx(Text, {
+    }) : label, isPrimitive(value) ? /*#__PURE__*/_jsx(Text, {
       allowFontScaling: allowFontScaling,
       style: [styles.value, valueStyle],
       children: value

package/lib/module/atoms/KeyValueRow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","Text","View","createStyles","useAllowFontScaling","jsx","_jsx","jsxs","_jsxs","useStyles","theme","row","flexDirection","justifyContent","alignItems","label","fontSize","tokens","sm","fontWeight","semibold","color","colors","textLight","value","textAlign","text","KeyValueRow","style","labelStyle","valueStyle","styles","allowFontScaling","children","displayName"],"sourceRoot":"../../../src","sources":["atoms/KeyValueRow.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,mBAAmB,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU1D,MAAMC,SAAS,GAAGN,YAAY,CAAEO,KAAK,KAAM;EACzCC,GAAG,EAAE;IAAEC,aAAa,EAAE,KAAK;IAAEC,cAAc,EAAE,eAAe;IAAEC,UAAU,EAAE;EAAS,CAAC;EACpFC,KAAK,EAAE;IAAEC,QAAQ,EAAEN,KAAK,CAACO,MAAM,CAACD,QAAQ,CAACE,EAAE;IAAEC,UAAU,EAAET,KAAK,CAACO,MAAM,CAACE,UAAU,CAACC,QAAQ;IAAEC,KAAK,EAAEX,KAAK,CAACY,MAAM,CAACC;EAAU,CAAC;EAC1HC,KAAK,EAAE;IAAER,QAAQ,EAAEN,KAAK,CAACO,MAAM,CAACD,QAAQ,CAACE,EAAE;IAAEO,SAAS,EAAE,OAAO;IAAEJ,KAAK,EAAEX,KAAK,CAACY,MAAM,CAACI;EAAK;AAC5F,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,gBAAG3B,IAAI,CAAC,CAAC;EAAEe,KAAK;EAAES,KAAK;EAAEI,KAAK;EAAEC,UAAU;EAAEC;AAA6B,CAAC,KAAK;EACrG,MAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B,MAAMuB,gBAAgB,GAAG5B,mBAAmB,CAAC,CAAC;EAC9C,oBACEI,KAAA,CAACN,IAAI;IAAC0B,KAAK,EAAE,CAACG,MAAM,CAACpB,GAAG,EAAEiB,KAAK,CAAE;IAAAK,QAAA,GAC9B,OAAOlB,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,gBACrDT,IAAA,CAACL,IAAI;MAAC+B,gBAAgB,EAAEA,gBAAiB;MAACJ,KAAK,EAAE,CAACG,MAAM,CAAChB,KAAK,EAAEc,UAAU,CAAE;MAAAI,QAAA,EACzElB;IAAK,CACF,CAAC,GAEPA,KACD,EACA,OAAOS,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,gBACrDlB,IAAA,CAACL,IAAI;MAAC+B,gBAAgB,EAAEA,gBAAiB;MAACJ,KAAK,EAAE,CAACG,MAAM,CAACP,KAAK,EAAEM,UAAU,CAAE;MAAAG,QAAA,EACzET;IAAK,CACF,CAAC,GAEPA,KACD;EAAA,CACG,CAAC;AAEX,CAAC,CAAC;AACFG,WAAW,CAACO,WAAW,GAAG,aAAa","ignoreList":[]}
+{"version":3,"names":["React","memo","Text","View","createStyles","useAllowFontScaling","jsx","_jsx","jsxs","_jsxs","useStyles","theme","row","flexDirection","justifyContent","alignItems","gap","tokens","spacing","md","rowText","label","flexShrink","maxWidth","fontSize","sm","lineHeight","fontWeight","semibold","color","colors","textLight","value","textAlign","text","fontVariant","isPrimitive","node","KeyValueRow","style","labelStyle","valueStyle","testID","styles","allowFontScaling","merge","accessible","undefined","children","displayName"],"sourceRoot":"../../../src","sources":["atoms/KeyValueRow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/PressableScale.js

@@ -2,14 +2,26 @@
 
 import React, { memo, useRef } from 'react';
 import { Animated, Pressable } from 'react-native';
+import { useReduceMotion } from './Transition';
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Short spring with almost no bounce: feedback arrives in ~100 ms (Doherty). */
+const PRESS_SPRING = {
+  speed: 50,
+  bounciness: 6
+};
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 /**
  * PressableScale
- * Feedback táctil de "achicarse" al presionar, con Animated.spring de RN
- * (useNativeDriver: true — corre en el hilo nativo, sin coste de JS por frame).
- * No depende de reanimated: la librería entera es cero-dependencias.
+ * Tactile "shrink" feedback on press, with RN's Animated.spring
+ * (useNativeDriver: true — runs on the native thread, no JS cost per frame).
+ * Doesn't depend on reanimated: the whole library is zero-dependency.
+ *
+ * Gestalt, figure/ground: as it sinks, the pressed element separates for an
+ * instant from the rest and confirms what was touched (Doherty: immediate
+ * response). Announces itself as a button by default (`accessibilityRole` can
+ * be changed) and, when disabled, exposes `disabled` to the screen reader.
+ * With Reduce Motion it doesn't scale.
  */
 export const PressableScale = /*#__PURE__*/memo(({
   scaleTo = 0.96,
@@ -18,15 +30,18 @@ export const PressableScale = /*#__PURE__*/memo(({
   onPressIn,
   onPressOut,
   disabled,
+  accessibilityRole = 'button',
+  accessibilityState,
   ...props
 }) => {
   const scale = useRef(new Animated.Value(1)).current;
+  const reduceMotion = useReduceMotion();
   const animateTo = value => {
+    if (reduceMotion) return;
     Animated.spring(scale, {
       toValue: value,
       useNativeDriver: true,
-      speed: 50,
-      bounciness: 6
+      ...PRESS_SPRING
     }).start();
   };
   const handlePressIn = e => {
@@ -39,6 +54,11 @@ export const PressableScale = /*#__PURE__*/memo(({
   };
   return /*#__PURE__*/_jsx(AnimatedPressable, {
     ...props,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: {
+      ...accessibilityState,
+      disabled: !!disabled
+    },
     disabled: disabled,
     onPressIn: handlePressIn,
     onPressOut: handlePressOut,