orn-ui 0.2.10 → 0.3.0

package/lib/module/atoms/EmptyState.js

@@ -5,35 +5,64 @@ import { Text, View } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
+import { Button } from './Button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Icon size: the block's focal point without competing with the title. */
+const ICON_SIZE = 48;
+/** Minimum height: the block doesn't get squashed inside a short empty list. */
+const MIN_HEIGHT = 200;
 const useStyles = createStyles(theme => ({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    padding: theme.tokens.spacing.xxl - 4,
-    minHeight: 200
+    padding: theme.tokens.spacing.xl,
+    minHeight: MIN_HEIGHT
   },
   title: {
     fontSize: theme.tokens.fontSize.lg,
     fontWeight: theme.tokens.fontWeight.semibold,
-    color: theme.colors.textLight,
-    marginTop: theme.tokens.spacing.md - 2,
+    lineHeight: theme.tokens.lineHeight.lg,
+    color: theme.colors.text,
+    marginTop: theme.tokens.spacing.md,
     textAlign: 'center'
   },
   description: {
     fontSize: theme.tokens.fontSize.md,
+    lineHeight: theme.tokens.lineHeight.md,
     color: theme.colors.textLight,
-    marginTop: theme.tokens.spacing.xs + 1,
+    marginTop: theme.tokens.spacing.xs,
     textAlign: 'center'
+  },
+  message: {
+    alignItems: 'center'
+  },
+  action: {
+    marginTop: theme.tokens.spacing.lg
   }
 }));
+
+/**
+ * EmptyState
+ * Centered icon + title + description for a list or screen with no data.
+ *
+ * Gestalt, proximity: title and description sit close together (`spacing.xs`)
+ * and the icon one step further (`spacing.md`), so they read as a message
+ * with its image and not as three loose pieces. Similarity: the title in
+ * `text` and the description in `textLight` mark the hierarchy. The action,
+ * if any, is set further apart (`spacing.lg`): it is the next step, not part
+ * of the message.
+ * The message is a single accessibility node (title and description together;
+ * the icon is decorative) and the button a separate, focusable one.
+ */
 export const EmptyState = /*#__PURE__*/memo(({
   title,
   description,
   iconName = 'search',
   icon,
-  style
+  action,
+  style,
+  testID
 }) => {
   const colors = useColors();
   const styles = useStyles();
@@ -43,20 +72,29 @@ export const EmptyState = /*#__PURE__*/memo(({
   const resolvedDescription = description ?? labels.noResultsDescription;
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, style],
-    accessible: true,
-    accessibilityRole: "text",
-    children: [icon ?? /*#__PURE__*/_jsx(Icon, {
-      name: iconName,
-      size: 48,
-      color: colors.textLight
-    }), /*#__PURE__*/_jsx(Text, {
-      allowFontScaling: allowFontScaling,
-      style: styles.title,
-      children: resolvedTitle
-    }), /*#__PURE__*/_jsx(Text, {
-      allowFontScaling: allowFontScaling,
-      style: styles.description,
-      children: resolvedDescription
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.message,
+      accessible: true,
+      accessibilityRole: "text",
+      children: [icon ?? /*#__PURE__*/_jsx(Icon, {
+        name: iconName,
+        size: ICON_SIZE,
+        color: colors.textLight
+      }), /*#__PURE__*/_jsx(Text, {
+        allowFontScaling: allowFontScaling,
+        style: styles.title,
+        children: resolvedTitle
+      }), /*#__PURE__*/_jsx(Text, {
+        allowFontScaling: allowFontScaling,
+        style: styles.description,
+        children: resolvedDescription
+      })]
+    }), action && /*#__PURE__*/_jsx(Button, {
+      title: action.label,
+      onPress: action.onPress,
+      variant: action.variant ?? 'primary',
+      style: styles.action
     })]
   });
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","Text","View","createStyles","useAllowFontScaling","useColors","useLabels","Icon","jsx","_jsx","jsxs","_jsxs","useStyles","theme","container","flex","justifyContent","alignItems","padding","tokens","spacing","xxl","minHeight","title","fontSize","lg","fontWeight","semibold","color","colors","textLight","marginTop","md","textAlign","description","xs","EmptyState","iconName","icon","style","styles","labels","allowFontScaling","resolvedTitle","noResultsTitle","resolvedDescription","noResultsDescription","accessible","accessibilityRole","children","name","size","displayName"],"sourceRoot":"../../../src","sources":["atoms/EmptyState.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,EAAEC,IAAI,QAAwB,cAAc;AACzD,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,SAAS,QAAQ,qBAAqB;AAC/E,SAASC,IAAI,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAWrC,MAAMC,SAAS,GAAGT,YAAY,CAAEU,KAAK,KAAM;EACzCC,SAAS,EAAE;IACTC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAEL,KAAK,CAACM,MAAM,CAACC,OAAO,CAACC,GAAG,GAAG,CAAC;IACrCC,SAAS,EAAE;EACb,CAAC;EACDC,KAAK,EAAE;IACLC,QAAQ,EAAEX,KAAK,CAACM,MAAM,CAACK,QAAQ,CAACC,EAAE;IAClCC,UAAU,EAAEb,KAAK,CAACM,MAAM,CAACO,UAAU,CAACC,QAAQ;IAC5CC,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,SAAS;IAC7BC,SAAS,EAAElB,KAAK,CAACM,MAAM,CAACC,OAAO,CAACY,EAAE,GAAG,CAAC;IACtCC,SAAS,EAAE;EACb,CAAC;EACDC,WAAW,EAAE;IACXV,QAAQ,EAAEX,KAAK,CAACM,MAAM,CAACK,QAAQ,CAACQ,EAAE;IAClCJ,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,SAAS;IAC7BC,SAAS,EAAElB,KAAK,CAACM,MAAM,CAACC,OAAO,CAACe,EAAE,GAAG,CAAC;IACtCF,SAAS,EAAE;EACb;AACF,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMG,UAAU,gBAAGpC,IAAI,CAC5B,CAAC;EAAEuB,KAAK;EAAEW,WAAW;EAAEG,QAAQ,GAAG,QAAQ;EAAEC,IAAI;EAAEC;AAAuB,CAAC,KAAK;EAC7E,MAAMV,MAAM,GAAGxB,SAAS,CAAC,CAAC;EAC1B,MAAMmC,MAAM,GAAG5B,SAAS,CAAC,CAAC;EAC1B,MAAM6B,MAAM,GAAGnC,SAAS,CAAC,CAAC;EAC1B,MAAMoC,gBAAgB,GAAGtC,mBAAmB,CAAC,CAAC;EAC9C,MAAMuC,aAAa,GAAGpB,KAAK,IAAIkB,MAAM,CAACG,cAAc;EACpD,MAAMC,mBAAmB,GAAGX,WAAW,IAAIO,MAAM,CAACK,oBAAoB;EACtE,oBACEnC,KAAA,CAACT,IAAI;IAACqC,KAAK,EAAE,CAACC,MAAM,CAAC1B,SAAS,EAAEyB,KAAK,CAAE;IAACQ,UAAU;IAACC,iBAAiB,EAAC,MAAM;IAAAC,QAAA,GACxEX,IAAI,iBAAI7B,IAAA,CAACF,IAAI;MAAC2C,IAAI,EAAEb,QAAS;MAACc,IAAI,EAAE,EAAG;MAACvB,KAAK,EAAEC,MAAM,CAACC;IAAU,CAAE,CAAC,eACpErB,IAAA,CAACR,IAAI;MAACyC,gBAAgB,EAAEA,gBAAiB;MAACH,KAAK,EAAEC,MAAM,CAACjB,KAAM;MAAA0B,QAAA,EAC3DN;IAAa,CACV,CAAC,eACPlC,IAAA,CAACR,IAAI;MAACyC,gBAAgB,EAAEA,gBAAiB;MAACH,KAAK,EAAEC,MAAM,CAACN,WAAY;MAAAe,QAAA,EACjEJ;IAAmB,CAChB,CAAC;EAAA,CACH,CAAC;AAEX,CACF,CAAC;AACDT,UAAU,CAACgB,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"names":["React","memo","Text","View","createStyles","useAllowFontScaling","useColors","useLabels","Icon","Button","jsx","_jsx","jsxs","_jsxs","ICON_SIZE","MIN_HEIGHT","useStyles","theme","container","flex","justifyContent","alignItems","padding","tokens","spacing","xl","minHeight","title","fontSize","lg","fontWeight","semibold","lineHeight","color","colors","text","marginTop","md","textAlign","description","textLight","xs","message","action","EmptyState","iconName","icon","style","testID","styles","labels","allowFontScaling","resolvedTitle","noResultsTitle","resolvedDescription","noResultsDescription","children","accessible","accessibilityRole","name","size","label","onPress","variant","displayName"],"sourceRoot":"../../../src","sources":["atoms/EmptyState.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/Fab.js

@@ -3,9 +3,14 @@
 import React, { memo } from 'react';
 import { PressableScale } from './PressableScale';
 import { Icon } from '../icons/Icon';
+import { onColor } from '../icons/defaultIcons';
 import { createStyles } from '../theme/createStyles';
-import { useColors } from '../theme/UIProvider';
+import { useColors, useInsets, useTheme } from '../theme/UIProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Default diameter: comfortably above the 44pt touch minimum (Fitts). */
+const DEFAULT_SIZE = 60;
+/** The glyph takes up half the circle. */
+const ICON_RATIO = 0.5;
 const useStyles = createStyles(theme => ({
   fab: {
     position: 'absolute',
@@ -17,39 +22,54 @@ const useStyles = createStyles(theme => ({
 
 /**
  * Fab
- * Botón flotante circular. `bottom`/`right` en vez del `tabBarHeight`
- * obligatorio de la versión original — el consumidor decide su propio
- * offset (con o sin tab bar).
+ * Circular floating button for the screen's main action.
+ * `bottom`/`right` instead of the required `tabBarHeight` of the original
+ * version — the consumer decides its own offset (with or without a tab bar).
+ *
+ * Gestalt, figure/ground: it is the only thing that floats (`lg` shadow) and
+ * carries the accent, so it stands apart from the content passing beneath it
+ * (Von Restorff: one per screen). Fitts: large and in the thumb's corner,
+ * above the safe area so it doesn't compete with the home gesture.
  */
 export const Fab = /*#__PURE__*/memo(({
   onPress,
   iconName = 'plus',
   icon,
-  size = 60,
-  bottom = 20,
-  right = 20,
+  size = DEFAULT_SIZE,
+  bottom,
+  right,
+  safeArea = true,
   color,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  testID
 }) => {
   const styles = useStyles();
   const colors = useColors();
+  const theme = useTheme();
+  const insets = useInsets();
+  const fill = color ?? colors.primary;
+  // With the theme color, its `onPrimary`; with a custom one, black or white
+  // depending on contrast (a cyan with a white icon was unreadable).
+  const glyph = color ? onColor(color) : colors.onPrimary;
+  const edge = theme.tokens.spacing.xl;
   return /*#__PURE__*/_jsx(PressableScale, {
     onPress: onPress,
     style: [styles.fab, {
       width: size,
       height: size,
       borderRadius: size / 2,
-      bottom,
-      right,
-      backgroundColor: color ?? colors.primary
+      bottom: (bottom ?? edge) + (safeArea ? insets.bottom : 0),
+      right: (right ?? edge) + (safeArea ? insets.right : 0),
+      backgroundColor: fill
     }, style],
     accessibilityRole: "button",
     accessibilityLabel: accessibilityLabel,
+    testID: testID,
     children: icon ?? /*#__PURE__*/_jsx(Icon, {
       name: iconName,
-      size: size * 0.5,
-      color: colors.onPrimary
+      size: size * ICON_RATIO,
+      color: glyph
     })
   });
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","PressableScale","Icon","createStyles","useColors","jsx","_jsx","useStyles","theme","fab","position","justifyContent","alignItems","tokens","shadow","lg","Fab","onPress","iconName","icon","size","bottom","right","color","style","accessibilityLabel","styles","colors","width","height","borderRadius","backgroundColor","primary","accessibilityRole","children","name","onPrimary","displayName"],"sourceRoot":"../../../src","sources":["atoms/Fab.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AAEnC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,eAAe;AAEpC,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,SAAS,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAchD,MAAMC,SAAS,GAAGJ,YAAY,CAAEK,KAAK,KAAM;EACzCC,GAAG,EAAE;IACHC,QAAQ,EAAE,UAAU;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpB,GAAGJ,KAAK,CAACK,MAAM,CAACC,MAAM,CAACC;EACzB;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,GAAG,gBAAGhB,IAAI,CACrB,CAAC;EAAEiB,OAAO;EAAEC,QAAQ,GAAG,MAAM;EAAEC,IAAI;EAAEC,IAAI,GAAG,EAAE;EAAEC,MAAM,GAAG,EAAE;EAAEC,KAAK,GAAG,EAAE;EAAEC,KAAK;EAAEC,KAAK;EAAEC;AAA6B,CAAC,KAAK;EACxH,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAMoB,MAAM,GAAGvB,SAAS,CAAC,CAAC;EAC1B,oBACEE,IAAA,CAACL,cAAc;IACbgB,OAAO,EAAEA,OAAQ;IACjBO,KAAK,EAAE,CACLE,MAAM,CAACjB,GAAG,EACV;MACEmB,KAAK,EAAER,IAAI;MACXS,MAAM,EAAET,IAAI;MACZU,YAAY,EAAEV,IAAI,GAAG,CAAC;MACtBC,MAAM;MACNC,KAAK;MACLS,eAAe,EAAER,KAAK,IAAII,MAAM,CAACK;IACnC,CAAC,EACDR,KAAK,CACL;IACFS,iBAAiB,EAAC,QAAQ;IAC1BR,kBAAkB,EAAEA,kBAAmB;IAAAS,QAAA,EAEtCf,IAAI,iBAAIb,IAAA,CAACJ,IAAI;MAACiC,IAAI,EAAEjB,QAAS;MAACE,IAAI,EAAEA,IAAI,GAAG,GAAI;MAACG,KAAK,EAAEI,MAAM,CAACS;IAAU,CAAE;EAAC,CAC9D,CAAC;AAErB,CACF,CAAC;AACDpB,GAAG,CAACqB,WAAW,GAAG,KAAK","ignoreList":[]}
+{"version":3,"names":["React","memo","PressableScale","Icon","onColor","createStyles","useColors","useInsets","useTheme","jsx","_jsx","DEFAULT_SIZE","ICON_RATIO","useStyles","theme","fab","position","justifyContent","alignItems","tokens","shadow","lg","Fab","onPress","iconName","icon","size","bottom","right","safeArea","color","style","accessibilityLabel","testID","styles","colors","insets","fill","primary","glyph","onPrimary","edge","spacing","xl","width","height","borderRadius","backgroundColor","accessibilityRole","children","name","displayName"],"sourceRoot":"../../../src","sources":["atoms/Fab.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AAEnC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,OAAO,QAAQ,uBAAuB;AAE/C,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA6BrE;AACA,MAAMC,YAAY,GAAG,EAAE;AACvB;AACA,MAAMC,UAAU,GAAG,GAAG;AAEtB,MAAMC,SAAS,GAAGR,YAAY,CAAES,KAAK,KAAM;EACzCC,GAAG,EAAE;IACHC,QAAQ,EAAE,UAAU;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpB,GAAGJ,KAAK,CAACK,MAAM,CAACC,MAAM,CAACC;EACzB;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,GAAG,gBAAGrB,IAAI,CACrB,CAAC;EACCsB,OAAO;EACPC,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,IAAI,GAAGf,YAAY;EACnBgB,MAAM;EACNC,KAAK;EACLC,QAAQ,GAAG,IAAI;EACfC,KAAK;EACLC,KAAK;EACLC,kBAAkB;EAClBC;AACQ,CAAC,KAAK;EACd,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B,MAAMsB,MAAM,GAAG7B,SAAS,CAAC,CAAC;EAC1B,MAAMQ,KAAK,GAAGN,QAAQ,CAAC,CAAC;EACxB,MAAM4B,MAAM,GAAG7B,SAAS,CAAC,CAAC;EAC1B,MAAM8B,IAAI,GAAGP,KAAK,IAAIK,MAAM,CAACG,OAAO;EACpC;EACA;EACA,MAAMC,KAAK,GAAGT,KAAK,GAAG1B,OAAO,CAAC0B,KAAK,CAAC,GAAGK,MAAM,CAACK,SAAS;EACvD,MAAMC,IAAI,GAAG3B,KAAK,CAACK,MAAM,CAACuB,OAAO,CAACC,EAAE;EAEpC,oBACEjC,IAAA,CAACR,cAAc;IACbqB,OAAO,EAAEA,OAAQ;IACjBQ,KAAK,EAAE,CACLG,MAAM,CAACnB,GAAG,EACV;MACE6B,KAAK,EAAElB,IAAI;MACXmB,MAAM,EAAEnB,IAAI;MACZoB,YAAY,EAAEpB,IAAI,GAAG,CAAC;MACtBC,MAAM,EAAE,CAACA,MAAM,IAAIc,IAAI,KAAKZ,QAAQ,GAAGO,MAAM,CAACT,MAAM,GAAG,CAAC,CAAC;MACzDC,KAAK,EAAE,CAACA,KAAK,IAAIa,IAAI,KAAKZ,QAAQ,GAAGO,MAAM,CAACR,KAAK,GAAG,CAAC,CAAC;MACtDmB,eAAe,EAAEV;IACnB,CAAC,EACDN,KAAK,CACL;IACFiB,iBAAiB,EAAC,QAAQ;IAC1BhB,kBAAkB,EAAEA,kBAAmB;IACvCC,MAAM,EAAEA,MAAO;IAAAgB,QAAA,EAEdxB,IAAI,iBAAIf,IAAA,CAACP,IAAI;MAAC+C,IAAI,EAAE1B,QAAS;MAACE,IAAI,EAAEA,IAAI,GAAGd,UAAW;MAACkB,KAAK,EAAES;IAAM,CAAE;EAAC,CAC1D,CAAC;AAErB,CACF,CAAC;AACDjB,GAAG,CAAC6B,WAAW,GAAG,KAAK","ignoreList":[]}

package/lib/module/atoms/Gradient.js

@@ -1,21 +1,17 @@
 "use strict";
 
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_STEPS = 24;
+const DEFAULT_STEPS = 48;
 const styles = StyleSheet.create({
-  // Recorta el plano rotado de las diagonales y el degradado al borderRadius.
+  // Clips the rotated plane of the diagonals and the gradient to the borderRadius.
   root: {
     overflow: 'hidden'
   },
-  segment: {
-    flex: 1
-  },
-  band: {
-    flex: 1
-  },
-  // Plano √2 centrado: rotado 45° cubre las esquinas sin medir el contenedor.
+  // Centered √2 plane: covers the corners of a SQUARE container without
+  // measuring it. Only used until the first onLayout; after that the plane is
+  // sized with the real diagonal (see `diagonalBox`).
   diagonalPlane: {
     position: 'absolute',
     top: '-21%',
@@ -25,16 +21,54 @@ const styles = StyleSheet.create({
   }
 });
 
+/**
+ * Opacities of stacked layers: layer k (from 1 to n-1) starts at k/n and
+ * runs to the end of the segment; stacked with "over", the total opacity in
+ * band k is k/(n-1), same as side-by-side bands. The difference: no layer
+ * edge sits next to a gap, so the antialiasing of an edge (especially when
+ * rotated) blends with the color of the layer below and not with what is
+ * behind the gradient — without the thin lines between bands.
+ */
+function layerOpacities(n) {
+  const out = [];
+  let prev = 0;
+  for (let k = 1; k < n; k += 1) {
+    const total = k / (n - 1);
+    out.push(prev >= 1 ? 1 : 1 - (1 - total) / (1 - prev));
+    prev = total;
+  }
+  return out;
+}
+
+/** Square with the diagonal as its side, centered: rotated 45° it covers any rectangle. */
+function diagonalBox(width, height) {
+  const side = Math.hypot(width, height);
+  return {
+    position: 'absolute',
+    width: side,
+    height: side,
+    left: (width - side) / 2,
+    top: (height - side) / 2
+  };
+}
+
 /**
  * Gradient
- * Degradado lineal sin dependencias: React Native no trae uno en el rango
- * soportado (Expo SDK 54–57) y `experimental_backgroundImage` no está en toda
- * esa ventana, así que se compone con bandas.
+ * Dependency-free linear gradient: React Native doesn't ship one in the
+ * supported range (Expo SDK 54–57) and `experimental_backgroundImage` isn't
+ * available across that whole window, so it is composed from bands.
+ *
+ * Each segment paints the start color and, on top, layers of the end color
+ * that accumulate (see `layerOpacities`). The compositor blends alpha linearly:
+ * the result is the sRGB interpolation between stops without parsing the
+ * color, which is why any format RN accepts works (hex, `rgba()`, name). The
+ * layers run to the end of the plane so no thin lines are left between
+ * bands, and the diagonals rotate a square the size of the measured diagonal
+ * to cover any rectangle, not just squares.
  *
- * Cada tramo pinta el color inicial y encima N bandas del final con opacidad
- * de 0 a 1. El compositor mezcla alpha linealmente: el resultado es la
- * interpolación sRGB entre paradas sin parsear el color, y por eso vale
- * cualquier formato que acepte RN (hex, `rgba()`, nombre).
+ * Gestalt, figure and ground: content on top must contrast with ALL the
+ * stops, not just the first — white text that reads well over the blue at
+ * the start can get lost over the light blue at the end.
  */
 export const Gradient = /*#__PURE__*/memo(({
   colors,
@@ -46,10 +80,21 @@ export const Gradient = /*#__PURE__*/memo(({
 }) => {
   const isRow = direction === 'horizontal';
   const isDiagonal = direction === 'diagonal' || direction === 'diagonal-reverse';
-  // rotate positivo gira en horario (Y crece hacia abajo): -45° manda el eje
-  // del degradado hacia abajo-derecha.
+  // positive rotate turns clockwise (Y grows downward): -45° sends the
+  // gradient axis down-right.
   const rotate = direction === 'diagonal' ? '-45deg' : '45deg';
   const bandCount = Math.max(2, Math.floor(steps));
+  const [size, setSize] = useState(null);
+  const onLayout = isDiagonal ? e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize(prev => prev && prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  } : undefined;
   const painted = useMemo(() => {
     if (colors.length === 0) return null;
     if (colors.length === 1) {
@@ -59,42 +104,63 @@ export const Gradient = /*#__PURE__*/memo(({
         }]
       });
     }
-    const segments = colors.slice(0, -1).map((from, index) => {
+    const segmentCount = colors.length - 1;
+    const opacities = layerOpacities(bandCount);
+    // From `start` (fraction of the axis) to the end of the plane.
+    const from = start => isRow ? {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: `${start * 100}%`
+    } : {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: `${start * 100}%`
+    };
+
+    // Segments are stacked too: each one covers the previous from its start,
+    // and since it begins with the color the previous one ended with, the
+    // edge between segments doesn't show the background.
+    const segments = colors.slice(0, -1).map((start, index) => {
       const to = colors[index + 1];
+      const segStart = index / segmentCount;
+      const segLength = 1 / segmentCount;
+      // The segment runs from segStart to the END of the plane; its layers
+      // sit at fractions of that remaining length.
+      const rest = 1 - segStart;
       return /*#__PURE__*/_jsx(View, {
-        style: [styles.segment, {
-          backgroundColor: from,
-          flexDirection: isRow ? 'row' : 'column'
+        style: [from(segStart), {
+          backgroundColor: start
         }],
-        children: Array.from({
-          length: bandCount
-        }, (_, band) => /*#__PURE__*/_jsx(View, {
-          style: [styles.band, {
+        children: opacities.map((opacity, k) => /*#__PURE__*/_jsx(View, {
+          style: [from((k + 1) / bandCount * segLength / rest), {
             backgroundColor: to,
-            opacity: band / (bandCount - 1)
+            opacity
           }]
-        }, band))
-      }, `${from}-${to}-${index}`);
+        }, k))
+      }, `${start}-${to}-${index}`);
     });
-    const stack = /*#__PURE__*/_jsx(View, {
-      style: [StyleSheet.absoluteFill, {
-        flexDirection: isRow ? 'row' : 'column'
-      }],
+    if (!isDiagonal) return /*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
       children: segments
     });
-    if (!isDiagonal) return stack;
+    const plane = size ? diagonalBox(size.width, size.height) : styles.diagonalPlane;
     return /*#__PURE__*/_jsx(View, {
-      style: [styles.diagonalPlane, {
+      style: [plane, {
         transform: [{
           rotate
         }]
       }],
       children: segments
     });
-  }, [colors, isRow, isDiagonal, rotate, bandCount]);
+  }, [colors, isRow, isDiagonal, rotate, bandCount, size]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: [styles.root, style],
+    onLayout: onLayout,
     children: [/*#__PURE__*/_jsx(View, {
       style: StyleSheet.absoluteFill,
       pointerEvents: "none",

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useMemo","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","DEFAULT_STEPS","styles","create","root","overflow","segment","flex","band","diagonalPlane","position","top","left","width","height","Gradient","colors","direction","steps","children","style","testID","isRow","isDiagonal","rotate","bandCount","Math","max","floor","painted","length","absoluteFill","backgroundColor","segments","slice","map","from","index","to","flexDirection","Array","_","opacity","stack","transform","pointerEvents","displayName"],"sourceRoot":"../../../src","sources":["atoms/Gradient.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,UAAU,EAAEC,IAAI,QAAwC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA0BhF,MAAMC,aAAa,GAAG,EAAE;AAExB,MAAMC,MAAM,GAAGP,UAAU,CAACQ,MAAM,CAAC;EAC/B;EACAC,IAAI,EAAE;IAAEC,QAAQ,EAAE;EAAS,CAAC;EAC5BC,OAAO,EAAE;IAAEC,IAAI,EAAE;EAAE,CAAC;EACpBC,IAAI,EAAE;IAAED,IAAI,EAAE;EAAE,CAAC;EACjB;EACAE,aAAa,EAAE;IAAEC,QAAQ,EAAE,UAAU;IAAEC,GAAG,EAAE,MAAM;IAAEC,IAAI,EAAE,MAAM;IAAEC,KAAK,EAAE,MAAM;IAAEC,MAAM,EAAE;EAAO;AAClG,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,gBAAGtB,IAAI,CAC1B,CAAC;EAAEuB,MAAM;EAAEC,SAAS,GAAG,UAAU;EAAEC,KAAK,GAAGjB,aAAa;EAAEkB,QAAQ;EAAEC,KAAK;EAAEC;AAAsB,CAAC,KAAK;EACrG,MAAMC,KAAK,GAAGL,SAAS,KAAK,YAAY;EACxC,MAAMM,UAAU,GAAGN,SAAS,KAAK,UAAU,IAAIA,SAAS,KAAK,kBAAkB;EAC/E;EACA;EACA,MAAMO,MAAM,GAAGP,SAAS,KAAK,UAAU,GAAG,QAAQ,GAAG,OAAO;EAC5D,MAAMQ,SAAS,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAACV,KAAK,CAAC,CAAC;EAEhD,MAAMW,OAAO,GAAGnC,OAAO,CAAC,MAAM;IAC5B,IAAIsB,MAAM,CAACc,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;IACpC,IAAId,MAAM,CAACc,MAAM,KAAK,CAAC,EAAE;MACvB,oBAAOhC,IAAA,CAACF,IAAI;QAACwB,KAAK,EAAE,CAACzB,UAAU,CAACoC,YAAY,EAAE;UAAEC,eAAe,EAAEhB,MAAM,CAAC,CAAC;QAAE,CAAC;MAAE,CAAE,CAAC;IACnF;IAEA,MAAMiB,QAAQ,GAAGjB,MAAM,CAACkB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAACC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;MACxD,MAAMC,EAAE,GAAGtB,MAAM,CAACqB,KAAK,GAAG,CAAC,CAAW;MACtC,oBACEvC,IAAA,CAACF,IAAI;QAEHwB,KAAK,EAAE,CAAClB,MAAM,CAACI,OAAO,EAAE;UAAE0B,eAAe,EAAEI,IAAI;UAAEG,aAAa,EAAEjB,KAAK,GAAG,KAAK,GAAG;QAAS,CAAC,CAAE;QAAAH,QAAA,EAE3FqB,KAAK,CAACJ,IAAI,CAAC;UAAEN,MAAM,EAAEL;QAAU,CAAC,EAAE,CAACgB,CAAC,EAAEjC,IAAI,kBACzCV,IAAA,CAACF,IAAI;UAAYwB,KAAK,EAAE,CAAClB,MAAM,CAACM,IAAI,EAAE;YAAEwB,eAAe,EAAEM,EAAE;YAAEI,OAAO,EAAElC,IAAI,IAAIiB,SAAS,GAAG,CAAC;UAAE,CAAC;QAAE,GAArFjB,IAAuF,CACnG;MAAC,GALG,GAAG4B,IAAI,IAAIE,EAAE,IAAID,KAAK,EAMvB,CAAC;IAEX,CAAC,CAAC;IAEF,MAAMM,KAAK,gBACT7C,IAAA,CAACF,IAAI;MAACwB,KAAK,EAAE,CAACzB,UAAU,CAACoC,YAAY,EAAE;QAAEQ,aAAa,EAAEjB,KAAK,GAAG,KAAK,GAAG;MAAS,CAAC,CAAE;MAAAH,QAAA,EAAEc;IAAQ,CAAO,CACtG;IAED,IAAI,CAACV,UAAU,EAAE,OAAOoB,KAAK;IAC7B,oBAAO7C,IAAA,CAACF,IAAI;MAACwB,KAAK,EAAE,CAAClB,MAAM,CAACO,aAAa,EAAE;QAAEmC,SAAS,EAAE,CAAC;UAAEpB;QAAO,CAAC;MAAE,CAAC,CAAE;MAAAL,QAAA,EAAEc;IAAQ,CAAO,CAAC;EAC5F,CAAC,EAAE,CAACjB,MAAM,EAAEM,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,CAAC,CAAC;EAElD,oBACEzB,KAAA,CAACJ,IAAI;IAACyB,MAAM,EAAEA,MAAO;IAACD,KAAK,EAAE,CAAClB,MAAM,CAACE,IAAI,EAAEgB,KAAK,CAAE;IAAAD,QAAA,gBAGhDrB,IAAA,CAACF,IAAI;MAACwB,KAAK,EAAEzB,UAAU,CAACoC,YAAa;MAACc,aAAa,EAAC,MAAM;MAAA1B,QAAA,EACvDU;IAAO,CACJ,CAAC,EACNV,QAAQ;EAAA,CACL,CAAC;AAEX,CACF,CAAC;AACDJ,QAAQ,CAAC+B,WAAW,GAAG,UAAU","ignoreList":[]}
+{"version":3,"names":["React","memo","useMemo","useState","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","DEFAULT_STEPS","styles","create","root","overflow","diagonalPlane","position","top","left","width","height","layerOpacities","n","out","prev","k","total","push","diagonalBox","side","Math","hypot","Gradient","colors","direction","steps","children","style","testID","isRow","isDiagonal","rotate","bandCount","max","floor","size","setSize","onLayout","e","nativeEvent","layout","undefined","painted","length","absoluteFill","backgroundColor","segmentCount","opacities","from","start","bottom","right","segments","slice","map","index","to","segStart","segLength","rest","opacity","plane","transform","pointerEvents","displayName"],"sourceRoot":"../../../src","sources":["atoms/Gradient.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/IconButton.js

@@ -4,6 +4,7 @@ import React, { memo } from 'react';
 import { PressableScale } from './PressableScale';
 import { Icon } from '../icons/Icon';
 import { createStyles } from '../theme/createStyles';
+import { useTheme } from '../theme/UIProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = createStyles(theme => ({
   hitArea: {
@@ -13,12 +14,22 @@ const useStyles = createStyles(theme => ({
   }
 }));
 
+/** Minimum touch area recommended by Apple (44pt) and Material (48dp ≈ 44pt). */
+const MIN_TOUCH = 44;
+
 /**
  * IconButton
- * Botón de solo ícono con área táctil mínima de 44x44 garantizada por el
- * padding (icon 24 + padding 8*2 = 40; sube a 44 con size>=24 default RN).
- * `accessibilityLabel` es obligatorio: sin texto visible, es la única forma
- * de que un lector de pantalla anuncie qué hace el botón.
+ * Icon-only button. `accessibilityLabel` is required: with no visible text,
+ * it is the only way for a screen reader to announce what it does.
+ *
+ * Fitts: the visible area is icon + `spacing.sm` per side (24 + 16 = 40pt
+ * with the default size, 32pt with `size={16}`). `hitSlop` makes up the
+ * rest up to 44pt without enlarging the layout, so a row of icons keeps its
+ * rhythm and each one is still easy to tap.
+ *
+ * Gestalt, figure and ground: it has no background of its own, the icon is
+ * the figure over whatever is behind it; that is why the default color is
+ * `colors.text` (guaranteed AA contrast) and `disabled` dims it by half.
  */
 export const IconButton = /*#__PURE__*/memo(({
   iconName,
@@ -32,9 +43,19 @@ export const IconButton = /*#__PURE__*/memo(({
   testID
 }) => {
   const styles = useStyles();
+  const theme = useTheme();
+  const visible = size + theme.tokens.spacing.sm * 2;
+  const extra = Math.max(0, Math.ceil((MIN_TOUCH - visible) / 2));
+  const hitSlop = extra > 0 ? {
+    top: extra,
+    bottom: extra,
+    left: extra,
+    right: extra
+  } : undefined;
   return /*#__PURE__*/_jsx(PressableScale, {
     onPress: onPress,
     disabled: disabled,
+    hitSlop: hitSlop,
     style: [styles.hitArea, {
       opacity: disabled ? 0.5 : 1
     }, style],

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","PressableScale","Icon","createStyles","jsx","_jsx","useStyles","theme","hitArea","padding","tokens","spacing","sm","alignItems","justifyContent","IconButton","iconName","icon","onPress","size","color","disabled","style","accessibilityLabel","testID","styles","opacity","accessibilityRole","accessibilityState","children","name","displayName"],"sourceRoot":"../../../src","sources":["atoms/IconButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AAEnC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,eAAe;AAEpC,SAASC,YAAY,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAcrD,MAAMC,SAAS,GAAGH,YAAY,CAAEI,KAAK,KAAM;EACzCC,OAAO,EAAE;IACPC,OAAO,EAAEF,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,EAAE;IAChCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,gBAAGf,IAAI,CAC5B,CAAC;EAAEgB,QAAQ;EAAEC,IAAI;EAAEC,OAAO;EAAEC,IAAI,GAAG,EAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,kBAAkB;EAAEC;AAAwB,CAAC,KAAK;EAC/G,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,oBACED,IAAA,CAACJ,cAAc;IACbiB,OAAO,EAAEA,OAAQ;IACjBG,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAE,CAACG,MAAM,CAACjB,OAAO,EAAE;MAAEkB,OAAO,EAAEL,QAAQ,GAAG,GAAG,GAAG;IAAE,CAAC,EAAEC,KAAK,CAAE;IAChEK,iBAAiB,EAAC,QAAQ;IAC1BJ,kBAAkB,EAAEA,kBAAmB;IACvCK,kBAAkB,EAAE;MAAEP,QAAQ,EAAE,CAAC,CAACA;IAAS,CAAE;IAC7CG,MAAM,EAAEA,MAAO;IAAAK,QAAA,EAEdZ,IAAI,KAAKD,QAAQ,iBAAIX,IAAA,CAACH,IAAI;MAAC4B,IAAI,EAAEd,QAAS;MAACG,IAAI,EAAEA,IAAK;MAACC,KAAK,EAAEA;IAAM,CAAE,CAAC;EAAC,CAC3D,CAAC;AAErB,CACF,CAAC;AACDL,UAAU,CAACgB,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"names":["React","memo","PressableScale","Icon","createStyles","useTheme","jsx","_jsx","useStyles","theme","hitArea","padding","tokens","spacing","sm","alignItems","justifyContent","MIN_TOUCH","IconButton","iconName","icon","onPress","size","color","disabled","style","accessibilityLabel","testID","styles","visible","extra","Math","max","ceil","hitSlop","top","bottom","left","right","undefined","opacity","accessibilityRole","accessibilityState","children","name","displayName"],"sourceRoot":"../../../src","sources":["atoms/IconButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AAEnC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,eAAe;AAEpC,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAqB/C,MAAMC,SAAS,GAAGJ,YAAY,CAAEK,KAAK,KAAM;EACzCC,OAAO,EAAE;IACPC,OAAO,EAAEF,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,EAAE;IAChCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC,CAAC;;AAEH;AACA,MAAMC,SAAS,GAAG,EAAE;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,gBAAGjB,IAAI,CAC5B,CAAC;EAAEkB,QAAQ;EAAEC,IAAI;EAAEC,OAAO;EAAEC,IAAI,GAAG,EAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,kBAAkB;EAAEC;AAAwB,CAAC,KAAK;EAC/G,MAAMC,MAAM,GAAGpB,SAAS,CAAC,CAAC;EAC1B,MAAMC,KAAK,GAAGJ,QAAQ,CAAC,CAAC;EACxB,MAAMwB,OAAO,GAAGP,IAAI,GAAGb,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,EAAE,GAAG,CAAC;EAClD,MAAMgB,KAAK,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,IAAI,CAAC,CAAChB,SAAS,GAAGY,OAAO,IAAI,CAAC,CAAC,CAAC;EAC/D,MAAMK,OAAO,GAAGJ,KAAK,GAAG,CAAC,GAAG;IAAEK,GAAG,EAAEL,KAAK;IAAEM,MAAM,EAAEN,KAAK;IAAEO,IAAI,EAAEP,KAAK;IAAEQ,KAAK,EAAER;EAAM,CAAC,GAAGS,SAAS;EAChG,oBACEhC,IAAA,CAACL,cAAc;IACbmB,OAAO,EAAEA,OAAQ;IACjBG,QAAQ,EAAEA,QAAS;IACnBU,OAAO,EAAEA,OAAQ;IACjBT,KAAK,EAAE,CAACG,MAAM,CAAClB,OAAO,EAAE;MAAE8B,OAAO,EAAEhB,QAAQ,GAAG,GAAG,GAAG;IAAE,CAAC,EAAEC,KAAK,CAAE;IAChEgB,iBAAiB,EAAC,QAAQ;IAC1Bf,kBAAkB,EAAEA,kBAAmB;IACvCgB,kBAAkB,EAAE;MAAElB,QAAQ,EAAE,CAAC,CAACA;IAAS,CAAE;IAC7CG,MAAM,EAAEA,MAAO;IAAAgB,QAAA,EAEdvB,IAAI,KAAKD,QAAQ,iBAAIZ,IAAA,CAACJ,IAAI;MAACyC,IAAI,EAAEzB,QAAS;MAACG,IAAI,EAAEA,IAAK;MAACC,KAAK,EAAEA;IAAM,CAAE,CAAC;EAAC,CAC3D,CAAC;AAErB,CACF,CAAC;AACDL,UAAU,CAAC2B,WAAW,GAAG,YAAY","ignoreList":[]}