orn-ui 0.1.0 → 0.1.1

package/lib/module/theme/UIProvider.js

@@ -8,6 +8,9 @@ import { zeroInsets } from './insets';
 import { renderDefaultIcon } from '../icons/defaultIcons';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UIContext = /*#__PURE__*/createContext(undefined);
+
+/** Una sola vez por sesión: en un re-render el aviso no aporta nada nuevo. */
+let warnedAboutInsets = false;
 /**
  * UIProvider
  * Único punto de entrada de la librería: resuelve el theme activo (sistema u
@@ -34,6 +37,14 @@ export function UIProvider({
     if (!isControlled) setUncontrolledMode(next);
     onModeChange?.(next);
   }, [isControlled, onModeChange]);
+
+  // Olvidar `insets` no rompe nada visible al montar: el default de ceros
+  // recién se nota cuando abrís un Modal `full` (se mete abajo del notch) o un
+  // BottomSheet (queda pegado a la barra de gestos). El aviso llega antes.
+  if (__DEV__ && insets === zeroInsets && !warnedAboutInsets) {
+    warnedAboutInsets = true;
+    console.warn('orn-ui: <UIProvider> sin `insets`, se usan {top:0,bottom:0,left:0,right:0}. ' + 'Los modales y el Screen quedan sin safe area. Pasá `insets={useSafeAreaInsets()}` ' + "o usá <SafeAreaUIProvider> de 'orn-ui/safe-area', que lo cablea solo.");
+  }
   const scheme = mode === 'system' ? systemScheme === 'dark' ? 'dark' : 'light' : mode;
   const resolvedTheme = theme[scheme];
   const labels = useMemo(() => labelOverrides ? {

package/lib/module/theme/UIProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContext","useMemo","useState","useCallback","Appearance","useColorScheme","defaultTheme","defaultLabels","zeroInsets","renderDefaultIcon","jsx","_jsx","UIContext","undefined","UIProvider","children","theme","defaultMode","mode","controlledMode","onModeChange","icons","insets","labels","labelOverrides","allowFontScaling","systemScheme","uncontrolledMode","setUncontrolledMode","isControlled","setMode","next","scheme","resolvedTheme","value","Provider","useUIContext","ctx","Error","useTheme","useColors","colors","useThemeMode","useIcons","useInsets","useLabels","useAllowFontScaling","__testUtils"],"sourceRoot":"../../../src","sources":["theme/UIProvider.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createContext","useContext","useMemo","useState","useCallback","Appearance","useColorScheme","defaultTheme","defaultLabels","zeroInsets","renderDefaultIcon","jsx","_jsx","UIContext","undefined","warnedAboutInsets","UIProvider","children","theme","defaultMode","mode","controlledMode","onModeChange","icons","insets","labels","labelOverrides","allowFontScaling","systemScheme","uncontrolledMode","setUncontrolledMode","isControlled","setMode","next","__DEV__","console","warn","scheme","resolvedTheme","value","Provider","useUIContext","ctx","Error","useTheme","useColors","colors","useThemeMode","useIcons","useInsets","useLabels","useAllowFontScaling","__testUtils"],"sourceRoot":"../../../src","sources":["theme/UIProvider.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/palettes.js

@@ -4,35 +4,94 @@
  * Cada color es `string`, no un literal (`as const`): light y dark tienen
  * valores distintos para la misma clave, y createTheme() debe poder
  * aceptar cualquier hex/rgba en los overrides — literal typing lo impediría.
+ *
+ * Cada acento viene en cuatro roles, y no son intercambiables:
+ *
+ *   `primary`      relleno sólido (fondo de botón, día seleccionado, FAB).
+ *   `onPrimary`    texto/ícono *encima* de ese relleno.
+ *   `primarySoft`  fondo teñido para estados seleccionados y pills.
+ *   `primaryText`  texto/ícono del acento sobre `surface`, `background`
+ *                  o sobre su propio `primarySoft`.
+ *
+ * El motivo es el contraste: un acento que se lee bien como relleno no se
+ * lee como texto. Antes los componentes usaban `colors.primary` para las dos
+ * cosas y lo teñían concatenando alpha al hex (`colors.primary + '15'`), lo
+ * que en dark daba 2.6:1 sobre la superficie — muy por debajo del 4.5:1 de
+ * WCAG AA. Todos los pares de esta paleta pasan AA en ambos esquemas.
  */
 
-const shared = {
-  primary: '#004cef',
-  secondary: '#00cae1',
+const neutral = {
   white: '#ffffff',
-  black: '#000000',
-  error: '#ff3b30',
-  success: '#34c759',
-  warning: '#f59e0b'
+  black: '#000000'
 };
 export const lightPalette = {
-  ...shared,
+  ...neutral,
+  primary: '#004cef',
+  onPrimary: '#ffffff',
+  primarySoft: '#e6edfe',
+  primaryText: '#00369f',
+  secondary: '#00cae1',
+  onSecondary: '#00363d',
+  secondarySoft: '#dcf6f9',
+  secondaryText: '#00707d',
+  success: '#34c759',
+  onSuccess: '#00320f',
+  successSoft: '#e3f6e9',
+  successText: '#116a30',
+  error: '#ff3b30',
+  onError: '#3d0300',
+  errorSoft: '#fdeaea',
+  errorText: '#c62222',
+  warning: '#f59e0b',
+  onWarning: '#3d2600',
+  warningSoft: '#fdf1de',
+  warningText: '#8a4b00',
   background: '#f8f9fa',
   surface: '#ffffff',
   text: '#333333',
   textLight: '#666666',
   border: '#e5e7eb',
   inputBackground: '#f5f7fa',
-  overlay: 'rgba(0,0,0,0.5)'
+  overlay: 'rgba(0,0,0,0.5)',
+  scrim: 'rgba(248,249,250,0.8)',
+  skeleton: '#eceef1'
 };
+
+/**
+ * Los acentos de dark NO son los de light: sobre `#1e1e1e` hay que subir la
+ * luminosidad del acento y bajar la del texto que va encima (por eso
+ * `onPrimary` es azul oscuro acá y blanco en light).
+ */
 export const darkPalette = {
-  ...shared,
+  ...neutral,
+  primary: '#7ba4ff',
+  onPrimary: '#00205c',
+  primarySoft: '#1b2740',
+  primaryText: '#a9c3ff',
+  secondary: '#4dd8e8',
+  onSecondary: '#00363d',
+  secondarySoft: '#12333a',
+  secondaryText: '#7fe6f2',
+  success: '#5ddb84',
+  onSuccess: '#003514',
+  successSoft: '#13301e',
+  successText: '#7fe6a1',
+  error: '#ff7b72',
+  onError: '#4d0500',
+  errorSoft: '#3a1c1a',
+  errorText: '#ffa9a3',
+  warning: '#f0b458',
+  onWarning: '#3d2600',
+  warningSoft: '#33260f',
+  warningText: '#f5c97e',
   background: '#121212',
   surface: '#1e1e1e',
   text: '#ecedee',
   textLight: '#9ba1a6',
   border: '#2a2a2e',
   inputBackground: '#232326',
-  overlay: 'rgba(0,0,0,0.6)'
+  overlay: 'rgba(0,0,0,0.6)',
+  scrim: 'rgba(18,18,18,0.8)',
+  skeleton: '#26262a'
 };
 //# sourceMappingURL=palettes.js.map

package/lib/module/theme/palettes.js.map

@@ -1 +1 @@
-{"version":3,"names":["shared","primary","secondary","white","black","error","success","warning","lightPalette","background","surface","text","textLight","border","inputBackground","overlay","darkPalette"],"sourceRoot":"../../../src","sources":["theme/palettes.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAkBA,MAAMA,MAAM,GAAG;EACbC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,KAAK,EAAE,SAAS;EAChBC,KAAK,EAAE,SAAS;EAChBC,KAAK,EAAE,SAAS;EAChBC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE;AACX,CAAC;AAED,OAAO,MAAMC,YAAyB,GAAG;EACvC,GAAGR,MAAM;EACTS,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAE,SAAS;EACpBC,MAAM,EAAE,SAAS;EACjBC,eAAe,EAAE,SAAS;EAC1BC,OAAO,EAAE;AACX,CAAC;AAED,OAAO,MAAMC,WAAwB,GAAG;EACtC,GAAGhB,MAAM;EACTS,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAE,SAAS;EACpBC,MAAM,EAAE,SAAS;EACjBC,eAAe,EAAE,SAAS;EAC1BC,OAAO,EAAE;AACX,CAAC","ignoreList":[]}
+{"version":3,"names":["neutral","white","black","lightPalette","primary","onPrimary","primarySoft","primaryText","secondary","onSecondary","secondarySoft","secondaryText","success","onSuccess","successSoft","successText","error","onError","errorSoft","errorText","warning","onWarning","warningSoft","warningText","background","surface","text","textLight","border","inputBackground","overlay","scrim","skeleton","darkPalette"],"sourceRoot":"../../../src","sources":["theme/palettes.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AA0CA,MAAMA,OAAO,GAAG;EACdC,KAAK,EAAE,SAAS;EAChBC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,MAAMC,YAAyB,GAAG;EACvC,GAAGH,OAAO;EAEVI,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,aAAa,EAAE,SAAS;EACxBC,aAAa,EAAE,SAAS;EAExBC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,KAAK,EAAE,SAAS;EAChBC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,SAAS,EAAE,SAAS;EAEpBC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAE,SAAS;EACpBC,MAAM,EAAE,SAAS;EACjBC,eAAe,EAAE,SAAS;EAC1BC,OAAO,EAAE,iBAAiB;EAC1BC,KAAK,EAAE,uBAAuB;EAC9BC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAwB,GAAG;EACtC,GAAGjC,OAAO;EAEVI,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,aAAa,EAAE,SAAS;EACxBC,aAAa,EAAE,SAAS;EAExBC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,KAAK,EAAE,SAAS;EAChBC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,SAAS,EAAE,SAAS;EAEpBC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,SAAS;EACpBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EAEtBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAE,SAAS;EACpBC,MAAM,EAAE,SAAS;EACjBC,eAAe,EAAE,SAAS;EAC1BC,OAAO,EAAE,iBAAiB;EAC1BC,KAAK,EAAE,oBAAoB;EAC3BC,QAAQ,EAAE;AACZ,CAAC","ignoreList":[]}

package/lib/typescript/atoms/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/atoms/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAYD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,oFAA4E,UAAU,uBAqBtG,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/atoms/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAYD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,oFAA4E,UAAU,uBAuBtG,CAAC"}

package/lib/typescript/atoms/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/atoms/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAKL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;AACnG,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA8CD;;;;;GAKG;AACH,eAAO,MAAM,MAAM,+LAiBd,WAAW,uBA8Ef,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/atoms/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAKL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;AACnG,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAgDD;;;;;GAKG;AACH,eAAO,MAAM,MAAM,+LAiBd,WAAW,uBA8Ef,CAAC"}

package/lib/typescript/atoms/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/atoms/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgBD,eAAO,MAAM,QAAQ,uFAAmE,aAAa,uBA4CnG,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/atoms/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgBD,eAAO,MAAM,QAAQ,uFAAmE,aAAa,uBA+CnG,CAAC"}

package/lib/typescript/organisms/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/organisms/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAE9E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,CAAC;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAiDD;;;;GAIG;AACH,eAAO,MAAM,KAAK,oCAAgB,UAAU,8BA6E1C,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/organisms/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAE9E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,CAAC;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAiDD;;;;GAIG;AACH,eAAO,MAAM,KAAK,oCAAgB,UAAU,8BA8E1C,CAAC"}

package/lib/typescript/organisms/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/organisms/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAmC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/F,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwCD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,8GAC2E,UAAU,uBA0CtG,CAAC;AAGF,sFAAsF;AACtF,eAAO,MAAM,aAAa,qDACC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,uBAmBvF,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/organisms/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAmC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/F,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwCD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,8GAC2E,UAAU,uBAkDtG,CAAC;AAGF,sFAAsF;AACtF,eAAO,MAAM,aAAa,qDACC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,uBAmBvF,CAAC"}

package/lib/typescript/safe-area/SafeAreaUIProvider.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { type UIProviderProps } from '../theme/UIProvider';
+export interface SafeAreaUIProviderProps extends Omit<UIProviderProps, 'insets'> {
+    /**
+     * Insets explícitos. Ganan sobre los medidos — útil para tests, storybook o
+     * una pantalla embebida que no ocupa la ventana entera.
+     */
+    insets?: UIProviderProps['insets'];
+    /**
+     * Montar también el `<SafeAreaProvider>`. Ponelo en false si tu app ya tiene
+     * uno arriba (React Navigation lo monta solo en algunas plantillas):
+     * un provider anidado mide el frame de *su* View, no el de la ventana, así
+     * que ahí adentro los insets darían cero.
+     * @default true
+     */
+    mountSafeAreaProvider?: boolean;
+}
+/**
+ * SafeAreaUIProvider
+ * `UIProvider` con los insets ya cableados desde `react-native-safe-area-context`.
+ *
+ * Vive en su propio subpath (`orn-ui/safe-area`) a propósito: es el único
+ * archivo de la librería que importa un paquete de terceros. Nada del entry
+ * principal lo referencia, así que quien hace `import { Button } from 'orn-ui'`
+ * nunca lo resuelve y el bundle sigue sin dependencias de runtime.
+ *
+ * ```tsx
+ * import { SafeAreaUIProvider } from 'orn-ui/safe-area';
+ *
+ * export default function App() {
+ *   return (
+ *     <SafeAreaUIProvider defaultMode="system">
+ *       <RootNavigator />
+ *     </SafeAreaUIProvider>
+ *   );
+ * }
+ * ```
+ *
+ * El equivalente a mano — pasarle `insets={useSafeAreaInsets()}` a `UIProvider`
+ * desde un componente que ya esté dentro de `<SafeAreaProvider>` — sigue
+ * siendo válido. Esto sólo evita el error silencioso de olvidarlo: `insets`
+ * por defecto es `{0,0,0,0}`, y con ceros el bottom sheet queda pegado contra
+ * la barra de gestos y el modal `full` se mete abajo del notch.
+ */
+export declare function SafeAreaUIProvider({ mountSafeAreaProvider, ...props }: SafeAreaUIProviderProps): React.JSX.Element;
+//# sourceMappingURL=SafeAreaUIProvider.d.ts.map

package/lib/typescript/safe-area/SafeAreaUIProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SafeAreaUIProvider.d.ts","sourceRoot":"","sources":["../../../src/safe-area/SafeAreaUIProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEvE,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IAC9E;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACnC;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,qBAA4B,EAC5B,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB"}

package/lib/typescript/safe-area/index.d.ts

@@ -0,0 +1,3 @@
+export { SafeAreaUIProvider } from './SafeAreaUIProvider';
+export type { SafeAreaUIProviderProps } from './SafeAreaUIProvider';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/safe-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/safe-area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/typescript/theme/UIProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UIProvider.d.ts","sourceRoot":"","sources":["../../../src/theme/UIProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAcpD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACzB,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAoB,EACpB,WAAsB,EACtB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,KAAyB,EACzB,MAAmB,EACnB,MAAM,EAAE,cAAc,EACtB,gBAAwB,GACzB,EAAE,eAAe,qBA8BjB;AAUD,wBAAgB,QAAQ,IAAI,KAAK,CAEhC;AAED,wBAAgB,SAAS,IAAI,KAAK,CAAC,QAAQ,CAAC,CAE3C;AAED,wBAAgB,YAAY;;oBA5FV,SAAS,KAAK,IAAI;EA+FnC;AAED,wBAAgB,QAAQ,IAAI,YAAY,CAEvC;AAED,wBAAgB,SAAS,IAAI,UAAU,CAEtC;AAED,wBAAgB,SAAS,IAAI,MAAM,CAElC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,8FAA8F;AAC9F,eAAO,MAAM,WAAW;;CAAiB,CAAC"}
+{"version":3,"file":"UIProvider.d.ts","sourceRoot":"","sources":["../../../src/theme/UIProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAiBpD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACzB,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAoB,EACpB,WAAsB,EACtB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,KAAyB,EACzB,MAAmB,EACnB,MAAM,EAAE,cAAc,EACtB,gBAAwB,GACzB,EAAE,eAAe,qBA0CjB;AAUD,wBAAgB,QAAQ,IAAI,KAAK,CAEhC;AAED,wBAAgB,SAAS,IAAI,KAAK,CAAC,QAAQ,CAAC,CAE3C;AAED,wBAAgB,YAAY;;oBA3GV,SAAS,KAAK,IAAI;EA8GnC;AAED,wBAAgB,QAAQ,IAAI,YAAY,CAEvC;AAED,wBAAgB,SAAS,IAAI,UAAU,CAEtC;AAED,wBAAgB,SAAS,IAAI,MAAM,CAElC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,8FAA8F;AAC9F,eAAO,MAAM,WAAW;;CAAiB,CAAC"}

package/lib/typescript/theme/palettes.d.ts

@@ -2,15 +2,44 @@
  * Cada color es `string`, no un literal (`as const`): light y dark tienen
  * valores distintos para la misma clave, y createTheme() debe poder
  * aceptar cualquier hex/rgba en los overrides — literal typing lo impediría.
+ *
+ * Cada acento viene en cuatro roles, y no son intercambiables:
+ *
+ *   `primary`      relleno sólido (fondo de botón, día seleccionado, FAB).
+ *   `onPrimary`    texto/ícono *encima* de ese relleno.
+ *   `primarySoft`  fondo teñido para estados seleccionados y pills.
+ *   `primaryText`  texto/ícono del acento sobre `surface`, `background`
+ *                  o sobre su propio `primarySoft`.
+ *
+ * El motivo es el contraste: un acento que se lee bien como relleno no se
+ * lee como texto. Antes los componentes usaban `colors.primary` para las dos
+ * cosas y lo teñían concatenando alpha al hex (`colors.primary + '15'`), lo
+ * que en dark daba 2.6:1 sobre la superficie — muy por debajo del 4.5:1 de
+ * WCAG AA. Todos los pares de esta paleta pasan AA en ambos esquemas.
  */
 export interface ThemeColors {
     primary: string;
+    onPrimary: string;
+    primarySoft: string;
+    primaryText: string;
     secondary: string;
-    white: string;
-    black: string;
-    error: string;
+    onSecondary: string;
+    secondarySoft: string;
+    secondaryText: string;
     success: string;
+    onSuccess: string;
+    successSoft: string;
+    successText: string;
+    error: string;
+    onError: string;
+    errorSoft: string;
+    errorText: string;
     warning: string;
+    onWarning: string;
+    warningSoft: string;
+    warningText: string;
+    white: string;
+    black: string;
     background: string;
     surface: string;
     text: string;
@@ -18,7 +47,16 @@ export interface ThemeColors {
     border: string;
     inputBackground: string;
     overlay: string;
+    /** Velo semitransparente sobre contenido propio (footer de carga de List). */
+    scrim: string;
+    /** Fondo de placeholder mientras carga una imagen. */
+    skeleton: string;
 }
 export declare const lightPalette: ThemeColors;
+/**
+ * Los acentos de dark NO son los de light: sobre `#1e1e1e` hay que subir la
+ * luminosidad del acento y bajar la del texto que va encima (por eso
+ * `onPrimary` es azul oscuro acá y blanco en light).
+ */
 export declare const darkPalette: ThemeColors;
 //# sourceMappingURL=palettes.d.ts.map

package/lib/typescript/theme/palettes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../../../src/theme/palettes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAYD,eAAO,MAAM,YAAY,EAAE,WAS1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WASzB,CAAC"}
+{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../../../src/theme/palettes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAEpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IAEtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAEpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAElB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAEpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAOD,eAAO,MAAM,YAAY,EAAE,WAqC1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,WAqCzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orn-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Fast, tree-shakeable, atomic-design component library for React Native. Zero runtime dependencies.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -255,22 +255,45 @@
       "react-native": "./src/icons/index.ts",
       "default": "./lib/module/icons/index.js"
     },
+    "./safe-area": {
+      "types": "./lib/typescript/safe-area/index.d.ts",
+      "react-native": "./src/safe-area/index.ts",
+      "default": "./lib/module/safe-area/index.js"
+    },
     "./package.json": "./package.json"
   },
+  "scripts": {
+    "gen:exports": "node scripts/gen-exports.mjs",
+    "gen:exports:check": "node scripts/gen-exports.mjs --check",
+    "build:registry": "node scripts/build-registry.mjs",
+    "test:cli": "node scripts/smoke-test-cli.mjs",
+    "build": "node scripts/gen-exports.mjs && node scripts/build-registry.mjs && bob build",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "prepare": "node scripts/gen-exports.mjs && node scripts/build-registry.mjs && bob build"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-native": ">=0.73.0"
+    "react-native": ">=0.73.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-safe-area-context": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@react-native/jest-preset": "^0.86.2",
-    "@types/jest": "^29.5.14",
     "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
     "@types/react": "~19.2.14",
     "@types/react-test-renderer": "^19.1.0",
     "jest": "^29.7.0",
     "react": "19.2.3",
     "react-native": "0.86.2",
     "react-native-builder-bob": "^0.35.3",
+    "react-native-safe-area-context": "~5.8.1",
     "react-test-renderer": "19.2.3",
     "typescript": "~5.9.3"
   },
@@ -281,6 +304,15 @@
     "atomic-design"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DavidTrujillo123/orn-ui.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/DavidTrujillo123/orn-ui#readme",
+  "bugs": {
+    "url": "https://github.com/DavidTrujillo123/orn-ui/issues"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -297,15 +329,5 @@
         }
       ]
     ]
-  },
-  "scripts": {
-    "gen:exports": "node scripts/gen-exports.mjs",
-    "gen:exports:check": "node scripts/gen-exports.mjs --check",
-    "build:registry": "node scripts/build-registry.mjs",
-    "test:cli": "node scripts/smoke-test-cli.mjs",
-    "build": "node scripts/gen-exports.mjs && node scripts/build-registry.mjs && bob build",
-    "typecheck": "tsc --noEmit",
-    "test": "jest",
-    "test:coverage": "jest --coverage"
   }
-}
+}

package/registry/alert.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "organisms/Alert.tsx",
-      "content": "import React, { memo } from 'react';\nimport { Modal, Text, TouchableWithoutFeedback, View } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';\nimport { Button, type ButtonVariant } from '../atoms/Button';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport type AlertType = 'success' | 'error' | 'warning' | 'info' | 'question';\n\nexport interface AlertButton {\n  text: string;\n  onPress?: () => void;\n  style?: 'cancel' | 'default' | 'destructive';\n  variant?: ButtonVariant;\n}\n\nexport interface AlertProps {\n  visible: boolean;\n  title: string;\n  message?: string;\n  type?: AlertType;\n  onClose?: () => void;\n  buttons?: AlertButton[];\n  confirmText?: string;\n  cancelText?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  inline?: boolean;\n}\n\nconst ICON_BY_TYPE: Record<AlertType, IconName> = {\n  success: 'check',\n  error: 'alert',\n  warning: 'warning',\n  question: 'question',\n  info: 'info',\n};\n\nconst useStyles = createStyles((theme) => ({\n  overlay: { flex: 1, backgroundColor: theme.colors.overlay, justifyContent: 'center', alignItems: 'center', padding: theme.tokens.spacing.xl },\n  overlayInline: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999 },\n  container: {\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.xl,\n    padding: theme.tokens.spacing.xl,\n    width: '100%',\n    maxWidth: 340,\n    alignItems: 'center',\n    ...theme.tokens.shadow.md,\n  },\n  iconContainer: { marginBottom: theme.tokens.spacing.lg - 1 },\n  title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.text, textAlign: 'center', marginBottom: theme.tokens.spacing.md - 2 },\n  message: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight, textAlign: 'center', marginBottom: theme.tokens.spacing.xl, lineHeight: theme.tokens.lineHeight.md },\n  buttonContainer: { flexDirection: 'row', justifyContent: 'center', gap: theme.tokens.spacing.sm + 2, width: '100%' },\n  buttonContainerVertical: { flexDirection: 'column' },\n  button: { paddingVertical: theme.tokens.spacing.md - 2, paddingHorizontal: theme.tokens.spacing.xl },\n  buttonHorizontal: { flex: 1 },\n  buttonVertical: { width: '100%' },\n}));\n\n/** Deriva la lista de botones a partir de props, sin mutar `buttons` recibido por props. */\nfunction resolveButtons(props: AlertProps, labels: { confirm: string; cancel: string; close: string }): AlertButton[] {\n  const { buttons, confirmText, cancelText, onConfirm, onCancel, onClose } = props;\n  if (buttons && buttons.length > 0) return buttons;\n\n  if (confirmText || onConfirm) {\n    const list: AlertButton[] = [];\n    if (cancelText || onCancel) {\n      list.push({ text: cancelText || labels.cancel, onPress: onCancel || onClose, variant: 'outline', style: 'cancel' });\n    }\n    list.push({ text: confirmText || labels.confirm, onPress: onConfirm, variant: 'primary' });\n    return list;\n  }\n\n  return [{ text: labels.close, onPress: onClose, variant: 'outline' }];\n}\n\n/**\n * Alert\n * Componente declarativo de diálogo. Para uso imperativo (mostrar desde\n * un handler sin levantar estado propio), usar AlertProvider + useAlert().\n */\nexport const Alert = memo((props: AlertProps) => {\n  const { visible, title, message, type = 'info', onClose, inline = false } = props;\n  const colors = useColors();\n  const styles = useStyles();\n  const labels = useLabels();\n  const allowFontScaling = useAllowFontScaling();\n\n  if (!visible) return null;\n\n  const iconColor: Record<AlertType, string> = {\n    success: colors.success,\n    error: colors.error,\n    warning: colors.warning,\n    question: colors.primary,\n    info: colors.secondary,\n  };\n\n  const effectiveButtons = resolveButtons(props, { confirm: labels.confirm, cancel: labels.cancel, close: labels.close });\n  const vertical = effectiveButtons.length > 2;\n\n  const content = (\n    <TouchableWithoutFeedback onPress={onClose} accessibilityRole=\"none\">\n      <View style={[styles.overlay, inline && styles.overlayInline]}>\n        <TouchableWithoutFeedback>\n          <View style={styles.container} accessibilityRole=\"alert\" accessibilityViewIsModal>\n            <View style={styles.iconContainer}>\n              <Icon name={ICON_BY_TYPE[type]} size={48} color={iconColor[type]} />\n            </View>\n\n            <Text allowFontScaling={allowFontScaling} style={styles.title}>\n              {title}\n            </Text>\n\n            {!!message && (\n              <Text allowFontScaling={allowFontScaling} style={styles.message}>\n                {message}\n              </Text>\n            )}\n\n            <View style={[styles.buttonContainer, vertical && styles.buttonContainerVertical]}>\n              {effectiveButtons.map((btn, index) => {\n                const isCancel = btn.style === 'cancel';\n                let variant: ButtonVariant = btn.variant || 'primary';\n                if (!btn.variant && isCancel) variant = 'outline';\n                if (!btn.variant && btn.style === 'destructive') variant = 'destructive';\n\n                return (\n                  <Button\n                    key={index}\n                    title={btn.text}\n                    onPress={btn.onPress || onClose || (() => {})}\n                    variant={variant}\n                    style={[styles.button, vertical ? styles.buttonVertical : styles.buttonHorizontal]}\n                    textStyle={{ fontSize: 14 }}\n                  />\n                );\n              })}\n            </View>\n          </View>\n        </TouchableWithoutFeedback>\n      </View>\n    </TouchableWithoutFeedback>\n  );\n\n  if (inline) {\n    return (\n      <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} pointerEvents=\"box-none\">\n        {content}\n      </View>\n    );\n  }\n\n  return (\n    <Modal transparent visible={visible} animationType=\"fade\" statusBarTranslucent presentationStyle=\"overFullScreen\" onRequestClose={onClose || (() => {})}>\n      {content}\n    </Modal>\n  );\n});\nAlert.displayName = 'Alert';\n"
+      "content": "import React, { memo } from 'react';\nimport { Modal, Text, TouchableWithoutFeedback, View } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';\nimport { Button, type ButtonVariant } from '../atoms/Button';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport type AlertType = 'success' | 'error' | 'warning' | 'info' | 'question';\n\nexport interface AlertButton {\n  text: string;\n  onPress?: () => void;\n  style?: 'cancel' | 'default' | 'destructive';\n  variant?: ButtonVariant;\n}\n\nexport interface AlertProps {\n  visible: boolean;\n  title: string;\n  message?: string;\n  type?: AlertType;\n  onClose?: () => void;\n  buttons?: AlertButton[];\n  confirmText?: string;\n  cancelText?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  inline?: boolean;\n}\n\nconst ICON_BY_TYPE: Record<AlertType, IconName> = {\n  success: 'check',\n  error: 'alert',\n  warning: 'warning',\n  question: 'question',\n  info: 'info',\n};\n\nconst useStyles = createStyles((theme) => ({\n  overlay: { flex: 1, backgroundColor: theme.colors.overlay, justifyContent: 'center', alignItems: 'center', padding: theme.tokens.spacing.xl },\n  overlayInline: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999 },\n  container: {\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.xl,\n    padding: theme.tokens.spacing.xl,\n    width: '100%',\n    maxWidth: 340,\n    alignItems: 'center',\n    ...theme.tokens.shadow.md,\n  },\n  iconContainer: { marginBottom: theme.tokens.spacing.lg - 1 },\n  title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.text, textAlign: 'center', marginBottom: theme.tokens.spacing.md - 2 },\n  message: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight, textAlign: 'center', marginBottom: theme.tokens.spacing.xl, lineHeight: theme.tokens.lineHeight.md },\n  buttonContainer: { flexDirection: 'row', justifyContent: 'center', gap: theme.tokens.spacing.sm + 2, width: '100%' },\n  buttonContainerVertical: { flexDirection: 'column' },\n  button: { paddingVertical: theme.tokens.spacing.md - 2, paddingHorizontal: theme.tokens.spacing.xl },\n  buttonHorizontal: { flex: 1 },\n  buttonVertical: { width: '100%' },\n}));\n\n/** Deriva la lista de botones a partir de props, sin mutar `buttons` recibido por props. */\nfunction resolveButtons(props: AlertProps, labels: { confirm: string; cancel: string; close: string }): AlertButton[] {\n  const { buttons, confirmText, cancelText, onConfirm, onCancel, onClose } = props;\n  if (buttons && buttons.length > 0) return buttons;\n\n  if (confirmText || onConfirm) {\n    const list: AlertButton[] = [];\n    if (cancelText || onCancel) {\n      list.push({ text: cancelText || labels.cancel, onPress: onCancel || onClose, variant: 'outline', style: 'cancel' });\n    }\n    list.push({ text: confirmText || labels.confirm, onPress: onConfirm, variant: 'primary' });\n    return list;\n  }\n\n  return [{ text: labels.close, onPress: onClose, variant: 'outline' }];\n}\n\n/**\n * Alert\n * Componente declarativo de diálogo. Para uso imperativo (mostrar desde\n * un handler sin levantar estado propio), usar AlertProvider + useAlert().\n */\nexport const Alert = memo((props: AlertProps) => {\n  const { visible, title, message, type = 'info', onClose, inline = false } = props;\n  const colors = useColors();\n  const styles = useStyles();\n  const labels = useLabels();\n  const allowFontScaling = useAllowFontScaling();\n\n  if (!visible) return null;\n\n  const iconColor: Record<AlertType, string> = {\n    // Íconos sobre la superficie del diálogo: rol `*Text`, no el acento pleno.\n    success: colors.successText,\n    error: colors.errorText,\n    warning: colors.warningText,\n    question: colors.primaryText,\n    info: colors.secondaryText,\n  };\n\n  const effectiveButtons = resolveButtons(props, { confirm: labels.confirm, cancel: labels.cancel, close: labels.close });\n  const vertical = effectiveButtons.length > 2;\n\n  const content = (\n    <TouchableWithoutFeedback onPress={onClose} accessibilityRole=\"none\">\n      <View style={[styles.overlay, inline && styles.overlayInline]}>\n        <TouchableWithoutFeedback>\n          <View style={styles.container} accessibilityRole=\"alert\" accessibilityViewIsModal>\n            <View style={styles.iconContainer}>\n              <Icon name={ICON_BY_TYPE[type]} size={48} color={iconColor[type]} />\n            </View>\n\n            <Text allowFontScaling={allowFontScaling} style={styles.title}>\n              {title}\n            </Text>\n\n            {!!message && (\n              <Text allowFontScaling={allowFontScaling} style={styles.message}>\n                {message}\n              </Text>\n            )}\n\n            <View style={[styles.buttonContainer, vertical && styles.buttonContainerVertical]}>\n              {effectiveButtons.map((btn, index) => {\n                const isCancel = btn.style === 'cancel';\n                let variant: ButtonVariant = btn.variant || 'primary';\n                if (!btn.variant && isCancel) variant = 'outline';\n                if (!btn.variant && btn.style === 'destructive') variant = 'destructive';\n\n                return (\n                  <Button\n                    key={index}\n                    title={btn.text}\n                    onPress={btn.onPress || onClose || (() => {})}\n                    variant={variant}\n                    style={[styles.button, vertical ? styles.buttonVertical : styles.buttonHorizontal]}\n                    textStyle={{ fontSize: 14 }}\n                  />\n                );\n              })}\n            </View>\n          </View>\n        </TouchableWithoutFeedback>\n      </View>\n    </TouchableWithoutFeedback>\n  );\n\n  if (inline) {\n    return (\n      <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} pointerEvents=\"box-none\">\n        {content}\n      </View>\n    );\n  }\n\n  return (\n    <Modal transparent visible={visible} animationType=\"fade\" statusBarTranslucent presentationStyle=\"overFullScreen\" onRequestClose={onClose || (() => {})}>\n      {content}\n    </Modal>\n  );\n});\nAlert.displayName = 'Alert';\n"
     }
   ],
   "registryDependencies": [

package/registry/avatar-header.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "molecules/AvatarHeader.tsx",
-      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport interface AvatarHeaderProps {\n  /** Ícono a mostrar dentro del círculo. Si se omite, se usan `initials`. */\n  iconName?: IconName;\n  iconColor?: string;\n  /** Texto corto (ej. 2 letras) mostrado si no se pasa `iconName`. */\n  initials?: string;\n  title: string;\n  subtitle?: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { alignItems: 'center', marginBottom: theme.tokens.spacing.xl },\n  avatar: {\n    width: 80,\n    height: 80,\n    borderRadius: 40,\n    backgroundColor: theme.colors.primary + '20',\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginBottom: theme.tokens.spacing.md,\n  },\n  initials: { fontSize: theme.tokens.fontSize.xxl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.primary },\n  title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, textAlign: 'center', color: theme.colors.text, marginBottom: theme.tokens.spacing.xs },\n  subtitle: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight },\n}));\n\n/**\n * AvatarHeader\n * Círculo 80x80 con ícono o iniciales + título/subtítulo centrado. Header\n * típico de modales de detalle (cliente, producto, etc).\n */\nexport const AvatarHeader = memo(({ iconName, iconColor, initials, title, subtitle, style }: AvatarHeaderProps) => {\n  const colors = useColors();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n\n  return (\n    <View style={[styles.container, style]}>\n      <View style={styles.avatar}>\n        {iconName ? (\n          <Icon name={iconName} size={40} color={iconColor || colors.primary} />\n        ) : (\n          <Text allowFontScaling={allowFontScaling} style={styles.initials}>\n            {initials}\n          </Text>\n        )}\n      </View>\n      <Text allowFontScaling={allowFontScaling} style={styles.title}>\n        {title}\n      </Text>\n      {typeof subtitle === 'string' ? (\n        <Text allowFontScaling={allowFontScaling} style={styles.subtitle}>\n          {subtitle}\n        </Text>\n      ) : (\n        subtitle\n      )}\n    </View>\n  );\n});\nAvatarHeader.displayName = 'AvatarHeader';\n"
+      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport interface AvatarHeaderProps {\n  /** Ícono a mostrar dentro del círculo. Si se omite, se usan `initials`. */\n  iconName?: IconName;\n  iconColor?: string;\n  /** Texto corto (ej. 2 letras) mostrado si no se pasa `iconName`. */\n  initials?: string;\n  title: string;\n  subtitle?: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { alignItems: 'center', marginBottom: theme.tokens.spacing.xl },\n  avatar: {\n    width: 80,\n    height: 80,\n    borderRadius: 40,\n    backgroundColor: theme.colors.primarySoft,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginBottom: theme.tokens.spacing.md,\n  },\n  initials: { fontSize: theme.tokens.fontSize.xxl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.primaryText },\n  title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, textAlign: 'center', color: theme.colors.text, marginBottom: theme.tokens.spacing.xs },\n  subtitle: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight },\n}));\n\n/**\n * AvatarHeader\n * Círculo 80x80 con ícono o iniciales + título/subtítulo centrado. Header\n * típico de modales de detalle (cliente, producto, etc).\n */\nexport const AvatarHeader = memo(({ iconName, iconColor, initials, title, subtitle, style }: AvatarHeaderProps) => {\n  const colors = useColors();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n\n  return (\n    <View style={[styles.container, style]}>\n      <View style={styles.avatar}>\n        {iconName ? (\n          <Icon name={iconName} size={40} color={iconColor || colors.primary} />\n        ) : (\n          <Text allowFontScaling={allowFontScaling} style={styles.initials}>\n            {initials}\n          </Text>\n        )}\n      </View>\n      <Text allowFontScaling={allowFontScaling} style={styles.title}>\n        {title}\n      </Text>\n      {typeof subtitle === 'string' ? (\n        <Text allowFontScaling={allowFontScaling} style={styles.subtitle}>\n          {subtitle}\n        </Text>\n      ) : (\n        subtitle\n      )}\n    </View>\n  );\n});\nAvatarHeader.displayName = 'AvatarHeader';\n"
     }
   ],
   "registryDependencies": [

package/registry/avatar.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/Avatar.tsx",
-      "content": "import React, { memo } from 'react';\nimport { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { useColors } from '../theme/UIProvider';\n\nexport interface AvatarProps {\n  size?: number;\n  backgroundColor?: string;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst styles = StyleSheet.create({\n  circle: { justifyContent: 'center', alignItems: 'center' },\n});\n\n/**\n * Avatar\n * Círculo con ícono/iniciales adentro. Usado a la izquierda de filas de\n * lista o como header de detalle (junto a AvatarHeader).\n */\nexport const Avatar = memo(({ size = 44, backgroundColor, children, style }: AvatarProps) => {\n  const colors = useColors();\n  return (\n    <View\n      style={[\n        styles.circle,\n        {\n          width: size,\n          height: size,\n          borderRadius: size / 2,\n          backgroundColor: backgroundColor || colors.primary + '15',\n        },\n        style,\n      ]}\n    >\n      {children}\n    </View>\n  );\n});\nAvatar.displayName = 'Avatar';\n"
+      "content": "import React, { memo } from 'react';\nimport { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { useColors } from '../theme/UIProvider';\n\nexport interface AvatarProps {\n  size?: number;\n  backgroundColor?: string;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst styles = StyleSheet.create({\n  circle: { justifyContent: 'center', alignItems: 'center' },\n});\n\n/**\n * Avatar\n * Círculo con ícono/iniciales adentro. Usado a la izquierda de filas de\n * lista o como header de detalle (junto a AvatarHeader).\n */\nexport const Avatar = memo(({ size = 44, backgroundColor, children, style }: AvatarProps) => {\n  const colors = useColors();\n  return (\n    <View\n      style={[\n        styles.circle,\n        {\n          width: size,\n          height: size,\n          borderRadius: size / 2,\n          backgroundColor: backgroundColor || colors.primarySoft,\n        },\n        style,\n      ]}\n    >\n      {children}\n    </View>\n  );\n});\nAvatar.displayName = 'Avatar';\n"
     }
   ],
   "registryDependencies": [

package/registry/badge.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/Badge.tsx",
-      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useTheme } from '../theme/UIProvider';\n\nexport type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport interface BadgeProps {\n  label: string;\n  variant?: BadgeVariant;\n  /** Override manual, gana sobre `variant`. */\n  backgroundColor?: string;\n  textColor?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  badge: {\n    paddingHorizontal: theme.tokens.spacing.md - 2,\n    paddingVertical: theme.tokens.spacing.xs + 1,\n    borderRadius: theme.tokens.radius.full,\n    alignSelf: 'flex-start',\n  },\n  text: { fontSize: theme.tokens.fontSize.xs, fontWeight: theme.tokens.fontWeight.bold, letterSpacing: 0.3 },\n}));\n\n/**\n * Badge\n * Pill de estado. `variant` cubre los casos comunes (éxito/error/advertencia/\n * info/neutral); `backgroundColor`/`textColor` quedan para casos que no\n * encajan en el set semántico.\n */\nexport const Badge = memo(({ label, variant = 'neutral', backgroundColor, textColor, style }: BadgeProps) => {\n  const theme = useTheme();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n  const { colors } = theme;\n\n  const palette: Record<BadgeVariant, { bg: string; fg: string }> = {\n    success: { bg: colors.success + '20', fg: colors.success },\n    error: { bg: colors.error + '20', fg: colors.error },\n    warning: { bg: colors.warning + '20', fg: colors.warning },\n    info: { bg: colors.secondary + '20', fg: colors.secondary },\n    neutral: { bg: colors.inputBackground, fg: colors.textLight },\n  };\n\n  return (\n    <View style={[styles.badge, { backgroundColor: backgroundColor ?? palette[variant].bg }, style]}>\n      <Text allowFontScaling={allowFontScaling} style={[styles.text, { color: textColor ?? palette[variant].fg }]}>\n        {label}\n      </Text>\n    </View>\n  );\n});\nBadge.displayName = 'Badge';\n"
+      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useTheme } from '../theme/UIProvider';\n\nexport type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport interface BadgeProps {\n  label: string;\n  variant?: BadgeVariant;\n  /** Override manual, gana sobre `variant`. */\n  backgroundColor?: string;\n  textColor?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  badge: {\n    paddingHorizontal: theme.tokens.spacing.md - 2,\n    paddingVertical: theme.tokens.spacing.xs + 1,\n    borderRadius: theme.tokens.radius.full,\n    alignSelf: 'flex-start',\n  },\n  text: { fontSize: theme.tokens.fontSize.xs, fontWeight: theme.tokens.fontWeight.bold, letterSpacing: 0.3 },\n}));\n\n/**\n * Badge\n * Pill de estado. `variant` cubre los casos comunes (éxito/error/advertencia/\n * info/neutral); `backgroundColor`/`textColor` quedan para casos que no\n * encajan en el set semántico.\n */\nexport const Badge = memo(({ label, variant = 'neutral', backgroundColor, textColor, style }: BadgeProps) => {\n  const theme = useTheme();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n  const { colors } = theme;\n\n  const palette: Record<BadgeVariant, { bg: string; fg: string }> = {\n    // fg es el rol `*Text`, no el acento pleno: el acento sobre su propio\n    // tinte da ~2.2:1 en light — el label quedaba ilegible.\n    success: { bg: colors.successSoft, fg: colors.successText },\n    error: { bg: colors.errorSoft, fg: colors.errorText },\n    warning: { bg: colors.warningSoft, fg: colors.warningText },\n    info: { bg: colors.secondarySoft, fg: colors.secondaryText },\n    neutral: { bg: colors.inputBackground, fg: colors.textLight },\n  };\n\n  return (\n    <View style={[styles.badge, { backgroundColor: backgroundColor ?? palette[variant].bg }, style]}>\n      <Text allowFontScaling={allowFontScaling} style={[styles.text, { color: textColor ?? palette[variant].fg }]}>\n        {label}\n      </Text>\n    </View>\n  );\n});\nBadge.displayName = 'Badge';\n"
     }
   ],
   "registryDependencies": [

package/registry/button.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/Button.tsx",
-      "content": "import React, { memo, useRef } from 'react';\nimport {\n  ActivityIndicator,\n  Animated,\n  Pressable,\n  Text,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (e: GestureResponderEvent) => void;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  disabled?: boolean;\n  style?: StyleProp<ViewStyle>;\n  textStyle?: StyleProp<TextStyle>;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  leftIconName?: IconName;\n  rightIconName?: IconName;\n  iconColor?: string;\n  testID?: string;\n  accessibilityLabel?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  base: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 0,\n  },\n  sm: { paddingVertical: theme.tokens.spacing.sm, paddingHorizontal: theme.tokens.spacing.md },\n  md: { paddingVertical: theme.tokens.spacing.lg - 1, paddingHorizontal: theme.tokens.spacing.xl },\n  lg: { paddingVertical: theme.tokens.spacing.lg + 2, paddingHorizontal: theme.tokens.spacing.xxl },\n  link: { paddingVertical: theme.tokens.spacing.xs, paddingHorizontal: 0, justifyContent: 'flex-start' },\n  outline: { borderWidth: 1 },\n  filledShadow: { ...theme.tokens.shadow.md, shadowColor: '#000' },\n  text: { fontWeight: theme.tokens.fontWeight.semibold, textAlign: 'center' },\n  textSm: { fontSize: theme.tokens.fontSize.sm },\n  textMd: { fontSize: theme.tokens.fontSize.lg },\n  textLg: { fontSize: theme.tokens.fontSize.xl },\n  underline: { textDecorationLine: 'underline' },\n  iconLeft: { marginRight: theme.tokens.spacing.sm },\n  iconRight: { marginLeft: theme.tokens.spacing.sm },\n}));\n\nfunction resolveColors(variant: ButtonVariant, disabled: boolean, colors: ReturnType<typeof useColors>) {\n  if (disabled) {\n    return { background: colors.inputBackground, text: colors.textLight, border: 'transparent' };\n  }\n  switch (variant) {\n    case 'outline':\n      return { background: 'transparent', text: colors.primary, border: colors.primary };\n    case 'ghost':\n      return { background: 'transparent', text: colors.primary, border: 'transparent' };\n    case 'link':\n      return { background: 'transparent', text: colors.primary, border: 'transparent' };\n    case 'secondary':\n      return { background: colors.secondary, text: colors.white, border: 'transparent' };\n    case 'destructive':\n      return { background: colors.error, text: colors.white, border: 'transparent' };\n    case 'primary':\n    default:\n      return { background: colors.primary, text: colors.white, border: 'transparent' };\n  }\n}\n\n/**\n * Button\n * Único componente de botón de la librería. `variant` decide el estilo\n * semántico, `size` la densidad. El feedback de \"presionado\" anima solo\n * `transform` (Animated.spring, useNativeDriver) — nunca opacity ni layout.\n */\nexport const Button = memo(\n  ({\n    title,\n    onPress,\n    variant = 'primary',\n    size = 'md',\n    loading = false,\n    disabled = false,\n    style,\n    textStyle,\n    leftIcon,\n    rightIcon,\n    leftIconName,\n    rightIconName,\n    iconColor,\n    testID,\n    accessibilityLabel,\n  }: ButtonProps) => {\n    const styles = useStyles();\n    const colors = useColors();\n    const theme = useTheme();\n    const allowFontScaling = useAllowFontScaling();\n    const scale = useRef(new Animated.Value(1)).current;\n    const isDisabled = disabled || loading;\n    const isFilled = variant === 'primary' || variant === 'secondary' || variant === 'destructive';\n\n    const resolved = resolveColors(variant, disabled, colors);\n    const effectiveIconColor = iconColor ?? resolved.text;\n\n    const animateTo = (value: number) => {\n      Animated.spring(scale, { toValue: value, useNativeDriver: true, speed: 50, bounciness: 6 }).start();\n    };\n\n    const containerStyle: StyleProp<ViewStyle> = [\n      styles.base,\n      styles[size],\n      variant === 'link' && styles.link,\n      variant === 'outline' && [styles.outline, { borderColor: resolved.border }],\n      { backgroundColor: resolved.background },\n      isFilled && !disabled && styles.filledShadow,\n      { opacity: isDisabled ? 0.7 : 1 },\n      style,\n    ];\n\n    const labelStyle: StyleProp<TextStyle> = [\n      styles.text,\n      size === 'sm' ? styles.textSm : size === 'lg' ? styles.textLg : styles.textMd,\n      { color: resolved.text },\n      variant === 'link' && styles.underline,\n      textStyle,\n    ];\n\n    const iconSize = size === 'sm' ? 16 : size === 'lg' ? 22 : 20;\n\n    return (\n      // El Pressable ES el contenedor animado, no un wrapper alrededor de uno.\n      // Con un Animated.View interno, un `style` de layout (flex, width,\n      // margin) caía en el hijo mientras el Pressable — que es quien ocupa\n      // lugar en el layout del padre — quedaba sin él: el ancho colapsaba y\n      // el label desaparecía (visible en los botones en fila del Alert).\n      <AnimatedPressable\n        onPress={onPress}\n        onPressIn={() => {\n          if (!isDisabled) animateTo(0.95);\n        }}\n        onPressOut={() => {\n          if (!isDisabled) animateTo(1);\n        }}\n        disabled={isDisabled}\n        testID={testID}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel ?? title}\n        accessibilityState={{ disabled: isDisabled, busy: loading }}\n        style={[containerStyle, { transform: [{ scale }] }]}\n      >\n        {loading ? (\n          <ActivityIndicator size=\"small\" color={resolved.text} />\n        ) : (\n          <>\n            {leftIcon}\n            {!leftIcon && leftIconName && (\n              <Icon name={leftIconName} size={iconSize} color={effectiveIconColor} style={styles.iconLeft} />\n            )}\n            <Text allowFontScaling={allowFontScaling} style={labelStyle}>\n              {title}\n            </Text>\n            {rightIcon}\n            {!rightIcon && rightIconName && (\n              <Icon name={rightIconName} size={iconSize} color={effectiveIconColor} style={styles.iconRight} />\n            )}\n          </>\n        )}\n      </AnimatedPressable>\n    );\n  }\n);\nButton.displayName = 'Button';\n"
+      "content": "import React, { memo, useRef } from 'react';\nimport {\n  ActivityIndicator,\n  Animated,\n  Pressable,\n  Text,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (e: GestureResponderEvent) => void;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  disabled?: boolean;\n  style?: StyleProp<ViewStyle>;\n  textStyle?: StyleProp<TextStyle>;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  leftIconName?: IconName;\n  rightIconName?: IconName;\n  iconColor?: string;\n  testID?: string;\n  accessibilityLabel?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  base: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 0,\n  },\n  sm: { paddingVertical: theme.tokens.spacing.sm, paddingHorizontal: theme.tokens.spacing.md },\n  md: { paddingVertical: theme.tokens.spacing.lg - 1, paddingHorizontal: theme.tokens.spacing.xl },\n  lg: { paddingVertical: theme.tokens.spacing.lg + 2, paddingHorizontal: theme.tokens.spacing.xxl },\n  link: { paddingVertical: theme.tokens.spacing.xs, paddingHorizontal: 0, justifyContent: 'flex-start' },\n  outline: { borderWidth: 1 },\n  filledShadow: { ...theme.tokens.shadow.md, shadowColor: '#000' },\n  text: { fontWeight: theme.tokens.fontWeight.semibold, textAlign: 'center' },\n  textSm: { fontSize: theme.tokens.fontSize.sm },\n  textMd: { fontSize: theme.tokens.fontSize.lg },\n  textLg: { fontSize: theme.tokens.fontSize.xl },\n  underline: { textDecorationLine: 'underline' },\n  iconLeft: { marginRight: theme.tokens.spacing.sm },\n  iconRight: { marginLeft: theme.tokens.spacing.sm },\n}));\n\nfunction resolveColors(variant: ButtonVariant, disabled: boolean, colors: ReturnType<typeof useColors>) {\n  if (disabled) {\n    return { background: colors.inputBackground, text: colors.textLight, border: 'transparent' };\n  }\n  switch (variant) {\n    // Las variantes sin relleno pintan texto sobre el fondo de la pantalla:\n    // van con el rol `*Text`. Las rellenas van con `on*` sobre el acento.\n    case 'outline':\n      return { background: 'transparent', text: colors.primaryText, border: colors.primary };\n    case 'ghost':\n      return { background: 'transparent', text: colors.primaryText, border: 'transparent' };\n    case 'link':\n      return { background: 'transparent', text: colors.primaryText, border: 'transparent' };\n    case 'secondary':\n      return { background: colors.secondary, text: colors.onSecondary, border: 'transparent' };\n    case 'destructive':\n      return { background: colors.error, text: colors.onError, border: 'transparent' };\n    case 'primary':\n    default:\n      return { background: colors.primary, text: colors.onPrimary, border: 'transparent' };\n  }\n}\n\n/**\n * Button\n * Único componente de botón de la librería. `variant` decide el estilo\n * semántico, `size` la densidad. El feedback de \"presionado\" anima solo\n * `transform` (Animated.spring, useNativeDriver) — nunca opacity ni layout.\n */\nexport const Button = memo(\n  ({\n    title,\n    onPress,\n    variant = 'primary',\n    size = 'md',\n    loading = false,\n    disabled = false,\n    style,\n    textStyle,\n    leftIcon,\n    rightIcon,\n    leftIconName,\n    rightIconName,\n    iconColor,\n    testID,\n    accessibilityLabel,\n  }: ButtonProps) => {\n    const styles = useStyles();\n    const colors = useColors();\n    const theme = useTheme();\n    const allowFontScaling = useAllowFontScaling();\n    const scale = useRef(new Animated.Value(1)).current;\n    const isDisabled = disabled || loading;\n    const isFilled = variant === 'primary' || variant === 'secondary' || variant === 'destructive';\n\n    const resolved = resolveColors(variant, disabled, colors);\n    const effectiveIconColor = iconColor ?? resolved.text;\n\n    const animateTo = (value: number) => {\n      Animated.spring(scale, { toValue: value, useNativeDriver: true, speed: 50, bounciness: 6 }).start();\n    };\n\n    const containerStyle: StyleProp<ViewStyle> = [\n      styles.base,\n      styles[size],\n      variant === 'link' && styles.link,\n      variant === 'outline' && [styles.outline, { borderColor: resolved.border }],\n      { backgroundColor: resolved.background },\n      isFilled && !disabled && styles.filledShadow,\n      { opacity: isDisabled ? 0.7 : 1 },\n      style,\n    ];\n\n    const labelStyle: StyleProp<TextStyle> = [\n      styles.text,\n      size === 'sm' ? styles.textSm : size === 'lg' ? styles.textLg : styles.textMd,\n      { color: resolved.text },\n      variant === 'link' && styles.underline,\n      textStyle,\n    ];\n\n    const iconSize = size === 'sm' ? 16 : size === 'lg' ? 22 : 20;\n\n    return (\n      // El Pressable ES el contenedor animado, no un wrapper alrededor de uno.\n      // Con un Animated.View interno, un `style` de layout (flex, width,\n      // margin) caía en el hijo mientras el Pressable — que es quien ocupa\n      // lugar en el layout del padre — quedaba sin él: el ancho colapsaba y\n      // el label desaparecía (visible en los botones en fila del Alert).\n      <AnimatedPressable\n        onPress={onPress}\n        onPressIn={() => {\n          if (!isDisabled) animateTo(0.95);\n        }}\n        onPressOut={() => {\n          if (!isDisabled) animateTo(1);\n        }}\n        disabled={isDisabled}\n        testID={testID}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel ?? title}\n        accessibilityState={{ disabled: isDisabled, busy: loading }}\n        style={[containerStyle, { transform: [{ scale }] }]}\n      >\n        {loading ? (\n          <ActivityIndicator size=\"small\" color={resolved.text} />\n        ) : (\n          <>\n            {leftIcon}\n            {!leftIcon && leftIconName && (\n              <Icon name={leftIconName} size={iconSize} color={effectiveIconColor} style={styles.iconLeft} />\n            )}\n            <Text allowFontScaling={allowFontScaling} style={labelStyle}>\n              {title}\n            </Text>\n            {rightIcon}\n            {!rightIcon && rightIconName && (\n              <Icon name={rightIconName} size={iconSize} color={effectiveIconColor} style={styles.iconRight} />\n            )}\n          </>\n        )}\n      </AnimatedPressable>\n    );\n  }\n);\nButton.displayName = 'Button';\n"
     }
   ],
   "registryDependencies": [

package/registry/checkbox.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/Checkbox.tsx",
-      "content": "import React, { memo, useEffect, useRef } from 'react';\nimport { Animated, Text, TouchableOpacity } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\n\nexport interface CheckboxProps {\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  label?: string;\n  color?: string;\n  disabled?: boolean;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flexDirection: 'row', alignItems: 'center', marginBottom: theme.tokens.spacing.sm },\n  box: {\n    width: 24,\n    height: 24,\n    borderRadius: theme.tokens.radius.sm,\n    borderWidth: 2,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginRight: theme.tokens.spacing.sm + 2,\n  },\n  label: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },\n}));\n\nexport const Checkbox = memo(({ value, onValueChange, label, color, disabled, testID }: CheckboxProps) => {\n  const colors = useColors();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n  const activeColor = color || colors.primary;\n  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;\n  const checkScale = useRef(new Animated.Value(value ? 1 : 0)).current;\n\n  useEffect(() => {\n    Animated.timing(progress, { toValue: value ? 1 : 0, duration: 150, useNativeDriver: false }).start();\n    Animated.spring(checkScale, {\n      toValue: value ? 1 : 0,\n      useNativeDriver: true,\n      speed: 40,\n      bounciness: 10,\n    }).start();\n  }, [value]);\n\n  const backgroundColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.surface, activeColor] });\n  const borderColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.border, activeColor] });\n\n  return (\n    <TouchableOpacity\n      style={styles.container}\n      activeOpacity={0.7}\n      disabled={disabled}\n      onPress={() => onValueChange(!value)}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={{ checked: value, disabled: !!disabled }}\n      accessibilityLabel={label}\n      testID={testID}\n    >\n      <Animated.View style={[styles.box, { backgroundColor, borderColor, opacity: disabled ? 0.5 : 1 }]}>\n        <Animated.View style={{ transform: [{ scale: checkScale }] }}>\n          <Icon name=\"check\" size={16} color={colors.white} />\n        </Animated.View>\n      </Animated.View>\n      {label && (\n        <Text allowFontScaling={allowFontScaling} style={styles.label}>\n          {label}\n        </Text>\n      )}\n    </TouchableOpacity>\n  );\n});\nCheckbox.displayName = 'Checkbox';\n"
+      "content": "import React, { memo, useEffect, useRef } from 'react';\nimport { Animated, Text, TouchableOpacity } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\n\nexport interface CheckboxProps {\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  label?: string;\n  color?: string;\n  disabled?: boolean;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flexDirection: 'row', alignItems: 'center', marginBottom: theme.tokens.spacing.sm },\n  box: {\n    width: 24,\n    height: 24,\n    borderRadius: theme.tokens.radius.sm,\n    borderWidth: 2,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginRight: theme.tokens.spacing.sm + 2,\n  },\n  label: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },\n}));\n\nexport const Checkbox = memo(({ value, onValueChange, label, color, disabled, testID }: CheckboxProps) => {\n  const colors = useColors();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n  const activeColor = color || colors.primary;\n  // El check va encima del relleno: con `color` propio no sabemos qué tono\n  // contrasta, así que ahí seguimos con blanco (decisión del consumidor).\n  const checkColor = color ? colors.white : colors.onPrimary;\n  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;\n  const checkScale = useRef(new Animated.Value(value ? 1 : 0)).current;\n\n  useEffect(() => {\n    Animated.timing(progress, { toValue: value ? 1 : 0, duration: 150, useNativeDriver: false }).start();\n    Animated.spring(checkScale, {\n      toValue: value ? 1 : 0,\n      useNativeDriver: true,\n      speed: 40,\n      bounciness: 10,\n    }).start();\n  }, [value]);\n\n  const backgroundColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.surface, activeColor] });\n  const borderColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.border, activeColor] });\n\n  return (\n    <TouchableOpacity\n      style={styles.container}\n      activeOpacity={0.7}\n      disabled={disabled}\n      onPress={() => onValueChange(!value)}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={{ checked: value, disabled: !!disabled }}\n      accessibilityLabel={label}\n      testID={testID}\n    >\n      <Animated.View style={[styles.box, { backgroundColor, borderColor, opacity: disabled ? 0.5 : 1 }]}>\n        <Animated.View style={{ transform: [{ scale: checkScale }] }}>\n          <Icon name=\"check\" size={16} color={checkColor} />\n        </Animated.View>\n      </Animated.View>\n      {label && (\n        <Text allowFontScaling={allowFontScaling} style={styles.label}>\n          {label}\n        </Text>\n      )}\n    </TouchableOpacity>\n  );\n});\nCheckbox.displayName = 'Checkbox';\n"
     }
   ],
   "registryDependencies": [