orn-ui 0.1.1 → 0.2.0

package/lib/typescript/organisms/index.d.ts

@@ -1,12 +1,12 @@
 export { Modal } from './Modal';
 export type { ModalProps, ModalVariant } from './Modal';
 export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './BottomSheet';
+export type { BottomSheetProps, FooterPlacement } from './BottomSheet';
 export { Select } from './Select';
 export type { SelectProps, SelectOption } from './Select';
 export { Alert } from './Alert';
 export type { AlertProps, AlertButton, AlertType } from './Alert';
-export { AlertProvider, useAlert } from './AlertProvider';
+export { AlertProvider, useAlert, showAlert, showConfirm, hideAlert } from './AlertProvider';
 export type { AlertOptions, ConfirmOptions } from './AlertProvider';
 export { Screen } from './Screen';
 export type { ScreenProps, ScreenEdge } from './Screen';
@@ -16,7 +16,7 @@ export { SearchList } from './SearchList';
 export type { SearchListProps } from './SearchList';
 export { Toast } from './Toast';
 export type { ToastProps, ToastVariant } from './Toast';
-export { ToastProvider, useToast } from './ToastProvider';
+export { ToastProvider, useToast, showToast, hideToast, hideAllToasts } from './ToastProvider';
 export type { ToastProviderProps, ToastOptions } from './ToastProvider';
 export { DatePicker, buildMonthGrid, DEFAULT_MONTH_NAMES, DEFAULT_WEEKDAY_NAMES } from './DatePicker';
 export type { DatePickerProps, DateRange } from './DatePicker';
@@ -24,4 +24,8 @@ export { DateField } from './DateField';
 export type { DateFieldProps } from './DateField';
 export { Wizard } from './Wizard';
 export type { WizardProps, WizardStep } from './Wizard';
+export { ThemeToggle } from './ThemeToggle';
+export type { ThemeToggleProps } from './ThemeToggle';
+export { NavigationBar } from './NavigationBar';
+export type { NavigationBarProps, NavigationBarItem } from './NavigationBar';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACtG,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/F,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACtG,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,44 @@
+/**
+ * Utilidades de color sin dependencias, usadas para derivar una familia de
+ * roles (relleno / encima / tenue / legible) a partir de un solo hex de marca.
+ */
+/** Contraste mínimo AA para texto normal. */
+export declare const AA_CONTRAST = 4.5;
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface Hsl {
+    h: number;
+    s: number;
+    l: number;
+}
+/** Roles que necesita un acento del theme, en un esquema concreto. */
+export interface AccentRoles {
+    /** Relleno pleno: fondo de botón, círculo del paso actual. */
+    base: string;
+    /** Texto/ícono que va encima del relleno. */
+    on: string;
+    /** Fondo tenue: badges, pill del indicador activo. */
+    soft: string;
+    /** El acento legible sobre `surface`: labels, links. */
+    text: string;
+}
+export declare function hexToRgb(hex: string): Rgb;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+export declare function rgbToHsl({ r, g, b }: Rgb): Hsl;
+export declare function hslToRgb({ h, s, l }: Hsl): Rgb;
+export declare function toHsl(hex: string): Hsl;
+export declare function toHex(hsl: Hsl): string;
+/** Luminancia relativa WCAG de un hex. */
+export declare function luminance(hex: string): number;
+/** Ratio de contraste WCAG entre dos hex: 1 (igual) a 21 (blanco sobre negro). */
+export declare function contrast(a: string, b: string): number;
+/**
+ * Deriva los cuatro roles de un acento a partir de un hex, para un esquema.
+ * `surface` es el fondo sobre el que tiene que leerse el rol `text`, así que
+ * cada esquema pasa el suyo.
+ */
+export declare function deriveAccent(hex: string, scheme: 'light' | 'dark', surface: string): AccentRoles;
+//# sourceMappingURL=colors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/theme/colors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,6CAA6C;AAC7C,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,sEAAsE;AACtE,MAAM,WAAW,WAAW;IAC1B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;CACd;AAID,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAYzC;AAID,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAEjD;AAMD,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,CAmB9C;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,CAQ9C;AAED,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAEtC;AAED,wBAAgB,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAEtC;AAOD,0CAA0C;AAC1C,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,kFAAkF;AAClF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAIrD;AAkCD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,WAAW,CAsBhG"}

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

@@ -3,6 +3,9 @@ import type { ThemeOverrides, ThemePair } from './types';
  * Construye el par de themes light/dark que consume <UIProvider theme={...}>.
  * Nunca muta los defaults: cada llamada produce objetos nuevos, seguros de
  * compartir entre providers distintos (tests, multi-brand en el mismo árbol).
+ *
+ * `brand` se aplica antes que `colors`, así que un rol escrito a mano siempre
+ * gana sobre el derivado.
  */
 export declare function createTheme(overrides?: ThemeOverrides): ThemePair;
 export declare const defaultTheme: ThemePair;

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

@@ -1 +1 @@
-{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/createTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAS,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAuBhE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,SAAS,CAgBjE;AAED,eAAO,MAAM,YAAY,EAAE,SAAyB,CAAC"}
+{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/createTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAsB,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA+C7E;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,SAAS,CAsBjE;AAED,eAAO,MAAM,YAAY,EAAE,SAAyB,CAAC"}

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

@@ -3,7 +3,9 @@ export type { Tokens } from './tokens';
 export { lightPalette, darkPalette } from './palettes';
 export type { ThemeColors } from './palettes';
 export { createTheme, defaultTheme } from './createTheme';
-export type { Theme, ThemePair, ThemeOverrides, DeepPartial } from './types';
+export type { Theme, ThemePair, ThemeOverrides, BrandAccent, DeepPartial } from './types';
+export { deriveAccent, contrast, luminance, AA_CONTRAST } from './colors';
+export type { AccentRoles } from './colors';
 export { defaultLabels } from './labels';
 export type { Labels } from './labels';
 export { zeroInsets } from './insets';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvG,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACvD,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvG,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACvD,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC1E,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

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;;;;;;;;;;;;;;;;;;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"}
+{"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,WAwC1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,WAqCzB,CAAC"}

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

@@ -14,7 +14,16 @@ export interface ThemePair {
 export type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
+/** Acentos que se pueden definir con un solo hex vía `brand`. */
+export type BrandAccent = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
 export interface ThemeOverrides {
+    /**
+     * Un hex por acento; de cada uno se derivan sus cuatro roles (relleno, lo
+     * que va encima, el fondo tenue y la variante legible sobre `surface`) para
+     * light y para dark, con el contraste ya resuelto. Un string suelto define
+     * `primary`. Lo que se pase en `colors` gana sobre lo derivado.
+     */
+    brand?: string | Partial<Record<BrandAccent, string>>;
     colors?: {
         light?: Partial<ThemeColors>;
         dark?: Partial<ThemeColors>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,yEAAyE;AACzE,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,+EAA+E;AAC/E,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC7B,CAAC;IACF,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,yEAAyE;AACzE,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,+EAA+E;AAC/E,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,iEAAiE;AACjE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpF,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC7B,CAAC;IACF,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9B"}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "orn-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Fast, tree-shakeable, atomic-design component library for React Native. Zero runtime dependencies.",
+  "author": "David Trujillo <davot098@gmail.com>",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -100,6 +101,21 @@
       "react-native": "./src/atoms/Spinner.tsx",
       "default": "./lib/module/atoms/Spinner.js"
     },
+    "./skeleton": {
+      "types": "./lib/typescript/atoms/Skeleton.d.ts",
+      "react-native": "./src/atoms/Skeleton.tsx",
+      "default": "./lib/module/atoms/Skeleton.js"
+    },
+    "./transition": {
+      "types": "./lib/typescript/atoms/Transition.d.ts",
+      "react-native": "./src/atoms/Transition.tsx",
+      "default": "./lib/module/atoms/Transition.js"
+    },
+    "./use-reduce-motion": {
+      "types": "./lib/typescript/atoms/Transition.d.ts",
+      "react-native": "./src/atoms/Transition.tsx",
+      "default": "./lib/module/atoms/Transition.js"
+    },
     "./empty-state": {
       "types": "./lib/typescript/atoms/EmptyState.d.ts",
       "react-native": "./src/atoms/EmptyState.tsx",
@@ -125,6 +141,11 @@
       "react-native": "./src/molecules/Stepper.tsx",
       "default": "./lib/module/molecules/Stepper.js"
     },
+    "./sanitize-numeric": {
+      "types": "./lib/typescript/molecules/Stepper.d.ts",
+      "react-native": "./src/molecules/Stepper.tsx",
+      "default": "./lib/module/molecules/Stepper.js"
+    },
     "./option-card": {
       "types": "./lib/typescript/molecules/OptionCard.d.ts",
       "react-native": "./src/molecules/OptionCard.tsx",
@@ -145,10 +166,10 @@
       "react-native": "./src/molecules/AvatarHeader.tsx",
       "default": "./lib/module/molecules/AvatarHeader.js"
     },
-    "./theme-toggle": {
-      "types": "./lib/typescript/molecules/ThemeToggle.d.ts",
-      "react-native": "./src/molecules/ThemeToggle.tsx",
-      "default": "./lib/module/molecules/ThemeToggle.js"
+    "./segmented-control": {
+      "types": "./lib/typescript/molecules/SegmentedControl.d.ts",
+      "react-native": "./src/molecules/SegmentedControl.tsx",
+      "default": "./lib/module/molecules/SegmentedControl.js"
     },
     "./steps": {
       "types": "./lib/typescript/molecules/Steps.d.ts",
@@ -185,6 +206,21 @@
       "react-native": "./src/organisms/AlertProvider.tsx",
       "default": "./lib/module/organisms/AlertProvider.js"
     },
+    "./show-alert": {
+      "types": "./lib/typescript/organisms/AlertProvider.d.ts",
+      "react-native": "./src/organisms/AlertProvider.tsx",
+      "default": "./lib/module/organisms/AlertProvider.js"
+    },
+    "./show-confirm": {
+      "types": "./lib/typescript/organisms/AlertProvider.d.ts",
+      "react-native": "./src/organisms/AlertProvider.tsx",
+      "default": "./lib/module/organisms/AlertProvider.js"
+    },
+    "./hide-alert": {
+      "types": "./lib/typescript/organisms/AlertProvider.d.ts",
+      "react-native": "./src/organisms/AlertProvider.tsx",
+      "default": "./lib/module/organisms/AlertProvider.js"
+    },
     "./screen": {
       "types": "./lib/typescript/organisms/Screen.d.ts",
       "react-native": "./src/organisms/Screen.tsx",
@@ -215,6 +251,21 @@
       "react-native": "./src/organisms/ToastProvider.tsx",
       "default": "./lib/module/organisms/ToastProvider.js"
     },
+    "./show-toast": {
+      "types": "./lib/typescript/organisms/ToastProvider.d.ts",
+      "react-native": "./src/organisms/ToastProvider.tsx",
+      "default": "./lib/module/organisms/ToastProvider.js"
+    },
+    "./hide-toast": {
+      "types": "./lib/typescript/organisms/ToastProvider.d.ts",
+      "react-native": "./src/organisms/ToastProvider.tsx",
+      "default": "./lib/module/organisms/ToastProvider.js"
+    },
+    "./hide-all-toasts": {
+      "types": "./lib/typescript/organisms/ToastProvider.d.ts",
+      "react-native": "./src/organisms/ToastProvider.tsx",
+      "default": "./lib/module/organisms/ToastProvider.js"
+    },
     "./date-picker": {
       "types": "./lib/typescript/organisms/DatePicker.d.ts",
       "react-native": "./src/organisms/DatePicker.tsx",
@@ -245,6 +296,16 @@
       "react-native": "./src/organisms/Wizard.tsx",
       "default": "./lib/module/organisms/Wizard.js"
     },
+    "./theme-toggle": {
+      "types": "./lib/typescript/organisms/ThemeToggle.d.ts",
+      "react-native": "./src/organisms/ThemeToggle.tsx",
+      "default": "./lib/module/organisms/ThemeToggle.js"
+    },
+    "./navigation-bar": {
+      "types": "./lib/typescript/organisms/NavigationBar.d.ts",
+      "react-native": "./src/organisms/NavigationBar.tsx",
+      "default": "./lib/module/organisms/NavigationBar.js"
+    },
     "./theme": {
       "types": "./lib/typescript/theme/index.d.ts",
       "react-native": "./src/theme/index.ts",
@@ -309,7 +370,7 @@
     "url": "git+https://github.com/DavidTrujillo123/orn-ui.git",
     "directory": "packages/ui"
   },
-  "homepage": "https://github.com/DavidTrujillo123/orn-ui#readme",
+  "homepage": "https://orn-ui-docs.vercel.app/",
   "bugs": {
     "url": "https://github.com/DavidTrujillo123/orn-ui/issues"
   },

package/registry/alert-provider.json

@@ -5,12 +5,19 @@
   "category": "organisms",
   "exportedNames": [
     "AlertProvider",
-    "useAlert"
+    "useAlert",
+    "showAlert",
+    "showConfirm",
+    "hideAlert"
   ],
   "files": [
     {
       "path": "organisms/AlertProvider.tsx",
-      "content": "import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { Alert, type AlertButton, type AlertType } from './Alert';\n\nexport interface AlertOptions {\n  title: string;\n  message?: string;\n  type?: AlertType;\n  confirmText?: string;\n  cancelText?: string;\n}\n\nexport interface ConfirmOptions extends AlertOptions {\n  /** Botón de confirmar en rojo/destructivo (para \"eliminar\", etc). */\n  destructive?: boolean;\n}\n\ninterface AlertContextValue {\n  /** Muestra un alert de un solo botón. Resuelve cuando se cierra. */\n  alert: (options: AlertOptions) => Promise<void>;\n  /** Muestra confirmar/cancelar. Resuelve true si se confirmó, false si se canceló. */\n  confirm: (options: ConfirmOptions) => Promise<boolean>;\n  hide: () => void;\n}\n\nconst AlertContext = createContext<AlertContextValue | undefined>(undefined);\n\ninterface InternalState {\n  visible: boolean;\n  title: string;\n  message?: string;\n  type: AlertType;\n  buttons: AlertButton[];\n}\n\nconst HIDDEN: InternalState = { visible: false, title: '', type: 'info', buttons: [] };\n\n/**\n * AlertProvider\n * Monta un único <Alert> controlado imperativamente. Colocar una vez cerca\n * de la raíz (dentro de UIProvider). Los handlers async pueden hacer\n * `const ok = await confirm({ title: 'Eliminar', destructive: true })`.\n */\nexport function AlertProvider({ children }: { children: React.ReactNode }) {\n  const [state, setState] = useState<InternalState>(HIDDEN);\n  const resolverRef = useRef<((value: any) => void) | null>(null);\n\n  const hide = useCallback(() => {\n    setState(HIDDEN);\n    resolverRef.current?.(undefined);\n    resolverRef.current = null;\n  }, []);\n\n  const alertFn = useCallback((options: AlertOptions): Promise<void> => {\n    return new Promise((resolve) => {\n      resolverRef.current = resolve;\n      setState({\n        visible: true,\n        title: options.title,\n        message: options.message,\n        type: options.type ?? 'info',\n        buttons: [\n          {\n            text: options.confirmText ?? 'OK',\n            onPress: () => {\n              setState(HIDDEN);\n              resolve();\n              resolverRef.current = null;\n            },\n          },\n        ],\n      });\n    });\n  }, []);\n\n  const confirmFn = useCallback((options: ConfirmOptions): Promise<boolean> => {\n    return new Promise((resolve) => {\n      resolverRef.current = resolve;\n      setState({\n        visible: true,\n        title: options.title,\n        message: options.message,\n        type: options.type ?? 'question',\n        buttons: [\n          {\n            text: options.cancelText ?? 'Cancel',\n            style: 'cancel',\n            variant: 'outline',\n            onPress: () => {\n              setState(HIDDEN);\n              resolve(false);\n              resolverRef.current = null;\n            },\n          },\n          {\n            text: options.confirmText ?? 'OK',\n            variant: options.destructive ? 'destructive' : 'primary',\n            style: options.destructive ? 'destructive' : 'default',\n            onPress: () => {\n              setState(HIDDEN);\n              resolve(true);\n              resolverRef.current = null;\n            },\n          },\n        ],\n      });\n    });\n  }, []);\n\n  const value = useMemo<AlertContextValue>(() => ({ alert: alertFn, confirm: confirmFn, hide }), [alertFn, confirmFn, hide]);\n\n  return (\n    <AlertContext.Provider value={value}>\n      {children}\n      <Alert visible={state.visible} title={state.title} message={state.message} type={state.type} buttons={state.buttons} onClose={hide} />\n    </AlertContext.Provider>\n  );\n}\n\nexport function useAlert(): AlertContextValue {\n  const ctx = useContext(AlertContext);\n  if (!ctx) {\n    throw new Error('orn-ui: useAlert must be used within an <AlertProvider>.');\n  }\n  return ctx;\n}\n"
+      "content": "import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Alert, type AlertButton, type AlertType } from './Alert';\nimport { createImperativeBridge } from './imperativeBridge';\n\nexport interface AlertOptions {\n  title: string;\n  message?: string;\n  type?: AlertType;\n  confirmText?: string;\n  cancelText?: string;\n}\n\nexport interface ConfirmOptions extends AlertOptions {\n  /** Botón de confirmar en rojo/destructivo (para \"eliminar\", etc). */\n  destructive?: boolean;\n}\n\ninterface AlertContextValue {\n  /** Muestra un alert de un solo botón. Resuelve cuando se cierra. */\n  alert: (options: AlertOptions) => Promise<void>;\n  /** Muestra confirmar/cancelar. Resuelve true si se confirmó, false si se canceló. */\n  confirm: (options: ConfirmOptions) => Promise<boolean>;\n  hide: () => void;\n}\n\nconst AlertContext = createContext<AlertContextValue | undefined>(undefined);\nconst bridge = createImperativeBridge<AlertContextValue>('AlertProvider');\n\n/**\n * Abre un alert desde fuera del árbol de React —un servicio, un interceptor—\n * sin pasar por el hook. Sin <AlertProvider> montado resuelve de inmediato, así\n * que un `await` nunca queda colgado.\n */\nexport function showAlert(options: AlertOptions): Promise<void> {\n  return bridge.get()?.alert(options) ?? Promise.resolve();\n}\n\n/** Igual que showAlert, pero resuelve true/false. Sin provider, false. */\nexport function showConfirm(options: ConfirmOptions): Promise<boolean> {\n  return bridge.get()?.confirm(options) ?? Promise.resolve(false);\n}\n\nexport function hideAlert(): void {\n  bridge.get()?.hide();\n}\n\ninterface InternalState {\n  visible: boolean;\n  title: string;\n  message?: string;\n  type: AlertType;\n  buttons: AlertButton[];\n}\n\nconst HIDDEN: InternalState = { visible: false, title: '', type: 'info', buttons: [] };\n\n/**\n * AlertProvider\n * Monta un único <Alert> controlado imperativamente. Colocar una vez cerca\n * de la raíz (dentro de UIProvider). Los handlers async pueden hacer\n * `const ok = await confirm({ title: 'Eliminar', destructive: true })`.\n */\nexport function AlertProvider({ children }: { children: React.ReactNode }) {\n  const [state, setState] = useState<InternalState>(HIDDEN);\n  const resolverRef = useRef<((value: any) => void) | null>(null);\n\n  const hide = useCallback(() => {\n    setState(HIDDEN);\n    resolverRef.current?.(undefined);\n    resolverRef.current = null;\n  }, []);\n\n  const alertFn = useCallback((options: AlertOptions): Promise<void> => {\n    return new Promise((resolve) => {\n      resolverRef.current = resolve;\n      setState({\n        visible: true,\n        title: options.title,\n        message: options.message,\n        type: options.type ?? 'info',\n        buttons: [\n          {\n            text: options.confirmText ?? 'OK',\n            onPress: () => {\n              setState(HIDDEN);\n              resolve();\n              resolverRef.current = null;\n            },\n          },\n        ],\n      });\n    });\n  }, []);\n\n  const confirmFn = useCallback((options: ConfirmOptions): Promise<boolean> => {\n    return new Promise((resolve) => {\n      resolverRef.current = resolve;\n      setState({\n        visible: true,\n        title: options.title,\n        message: options.message,\n        type: options.type ?? 'question',\n        buttons: [\n          {\n            text: options.cancelText ?? 'Cancel',\n            style: 'cancel',\n            variant: 'outline',\n            onPress: () => {\n              setState(HIDDEN);\n              resolve(false);\n              resolverRef.current = null;\n            },\n          },\n          {\n            text: options.confirmText ?? 'OK',\n            variant: options.destructive ? 'destructive' : 'primary',\n            style: options.destructive ? 'destructive' : 'default',\n            onPress: () => {\n              setState(HIDDEN);\n              resolve(true);\n              resolverRef.current = null;\n            },\n          },\n        ],\n      });\n    });\n  }, []);\n\n  const value = useMemo<AlertContextValue>(() => ({ alert: alertFn, confirm: confirmFn, hide }), [alertFn, confirmFn, hide]);\n\n  useEffect(() => {\n    bridge.set(value);\n    return () => bridge.set(null);\n  }, [value]);\n\n  return (\n    <AlertContext.Provider value={value}>\n      {children}\n      <Alert visible={state.visible} title={state.title} message={state.message} type={state.type} buttons={state.buttons} onClose={hide} />\n    </AlertContext.Provider>\n  );\n}\n\nexport function useAlert(): AlertContextValue {\n  const ctx = useContext(AlertContext);\n  if (!ctx) {\n    throw new Error('orn-ui: useAlert must be used within an <AlertProvider>.');\n  }\n  return ctx;\n}\n"
+    },
+    {
+      "path": "organisms/imperativeBridge.ts",
+      "content": "/**\n * Puente entre el proveedor montado y el código que no es un componente\n * (servicios, capa de API, interceptores). El proveedor se registra al montar y\n * se borra al desmontar, así que fuera del árbol nunca queda una referencia\n * viva a un contexto muerto.\n */\nexport interface ImperativeBridge<T> {\n  set: (value: T | null) => void;\n  get: () => T | null;\n}\n\nexport function createImperativeBridge<T>(providerName: string): ImperativeBridge<T> {\n  let current: T | null = null;\n\n  return {\n    set: (value) => {\n      current = value;\n    },\n    get: () => {\n      if (!current && __DEV__) {\n        console.warn(\n          `orn-ui: se llamó a la API imperativa sin un <${providerName}> montado. La llamada se ignoró.`\n        );\n      }\n      return current;\n    },\n  };\n}\n"
     }
   ],
   "registryDependencies": [

package/registry/bottom-sheet.json

@@ -9,10 +9,14 @@
   "files": [
     {
       "path": "organisms/BottomSheet.tsx",
-      "content": "import React, { memo, useEffect, useRef, useState } from 'react';\nimport { Animated, Dimensions, Modal, PanResponder, Pressable, View, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useInsets } from '../theme/UIProvider';\n\nconst { height: SCREEN_HEIGHT } = Dimensions.get('window');\nconst DISMISS_THRESHOLD = 100;\n\nexport interface BottomSheetProps {\n  visible: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n  closeAccessibilityLabel?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flex: 1, justifyContent: 'flex-end' },\n  backdrop: { backgroundColor: theme.colors.overlay },\n  sheet: {\n    backgroundColor: theme.colors.surface,\n    borderTopLeftRadius: theme.tokens.radius.xxl,\n    borderTopRightRadius: theme.tokens.radius.xxl,\n    paddingHorizontal: theme.tokens.spacing.xl,\n    ...theme.tokens.shadow.lg,\n  },\n  handleArea: { paddingVertical: theme.tokens.spacing.md, alignItems: 'center' },\n  handle: { width: 40, height: 5, borderRadius: 3, backgroundColor: theme.colors.border },\n}));\n\nconst absoluteFill: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };\n\n/**\n * BottomSheet\n * Modal que aparece desde abajo: animación con Animated (no la del Modal\n * nativo) y arrastre para cerrar con PanResponder — no un gesture-handler\n * externo, para mantener la librería en cero dependencias.\n */\nexport const BottomSheet = memo(({ visible, onClose, children, closeAccessibilityLabel = 'Close' }: BottomSheetProps) => {\n  const styles = useStyles();\n  const insets = useInsets();\n  const [mounted, setMounted] = useState(visible);\n  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;\n  const backdropOpacity = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    if (visible) {\n      setMounted(true);\n      Animated.timing(translateY, { toValue: 0, duration: 250, useNativeDriver: true }).start();\n      Animated.timing(backdropOpacity, { toValue: 1, duration: 250, useNativeDriver: true }).start();\n    } else {\n      Animated.timing(translateY, { toValue: SCREEN_HEIGHT, duration: 200, useNativeDriver: true }).start(({ finished }) => {\n        if (finished) setMounted(false);\n      });\n      Animated.timing(backdropOpacity, { toValue: 0, duration: 200, useNativeDriver: true }).start();\n    }\n  }, [visible]);\n\n  const panResponder = useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 5 && Math.abs(gesture.dy) > Math.abs(gesture.dx),\n      onPanResponderMove: (_, gesture) => {\n        if (gesture.dy > 0) translateY.setValue(gesture.dy);\n      },\n      onPanResponderRelease: (_, gesture) => {\n        if (gesture.dy > DISMISS_THRESHOLD) {\n          onClose();\n        } else {\n          Animated.timing(translateY, { toValue: 0, duration: 150, useNativeDriver: true }).start();\n        }\n      },\n    })\n  ).current;\n\n  if (!mounted) return null;\n\n  return (\n    <Modal visible transparent animationType=\"none\" statusBarTranslucent onRequestClose={onClose}>\n      <View style={styles.container}>\n        <Animated.View style={[absoluteFill, styles.backdrop, { opacity: backdropOpacity }]}>\n          <Pressable style={absoluteFill} onPress={onClose} accessibilityRole=\"button\" accessibilityLabel={closeAccessibilityLabel} />\n        </Animated.View>\n\n        <Animated.View\n          style={[styles.sheet, { paddingBottom: Math.max(insets.bottom, 20) }, { transform: [{ translateY }] }]}\n        >\n          <View style={styles.handleArea} {...panResponder.panHandlers}>\n            <View style={styles.handle} />\n          </View>\n          {children}\n        </Animated.View>\n      </View>\n    </Modal>\n  );\n});\nBottomSheet.displayName = 'BottomSheet';\n"
+      "content": "import React, { memo, useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  Keyboard,\n  KeyboardAvoidingView,\n  Modal,\n  PanResponder,\n  Platform,\n  Pressable,\n  ScrollView,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors, useInsets } from '../theme/UIProvider';\nimport { Title } from '../atoms/Text';\nimport { IconButton } from '../atoms/IconButton';\nimport { Transition } from '../atoms/Transition';\n\nconst { height: SCREEN_HEIGHT } = Dimensions.get('window');\nconst DISMISS_THRESHOLD = 100;\n\nexport type FooterPlacement = 'fixed' | 'scroll' | 'hide-with-keyboard';\n\nexport interface BottomSheetProps {\n  visible: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n  /** Con título aparece el header, con su botón de cerrar. */\n  title?: string;\n  /** Acciones de la hoja. Dónde vive lo decide `footerPlacement`. */\n  footer?: React.ReactNode;\n  /**\n   * 'fixed' lo ancla al pie de la hoja; 'scroll' lo deja al final del\n   * contenido; 'hide-with-keyboard' lo esconde mientras se escribe, que en un\n   * formulario largo le devuelve esa franja al campo enfocado. @default 'fixed'\n   */\n  footerPlacement?: FooterPlacement;\n  /** El contenido scrollea cuando no entra. @default true */\n  scrollable?: boolean;\n  /** Arrastrar la hoja hacia abajo la cierra. @default true */\n  draggable?: boolean;\n  /** Fracción de la pantalla (0-1) o píxeles. @default 0.9 */\n  maxHeight?: number;\n  closeAccessibilityLabel?: string;\n  containerStyle?: ViewStyle;\n  contentStyle?: ViewStyle;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flex: 1, justifyContent: 'flex-end' },\n  backdrop: { backgroundColor: theme.colors.overlay },\n  sheet: {\n    backgroundColor: theme.colors.surface,\n    borderTopLeftRadius: theme.tokens.radius.xxl,\n    borderTopRightRadius: theme.tokens.radius.xxl,\n    ...theme.tokens.shadow.lg,\n  },\n  handleArea: { paddingVertical: theme.tokens.spacing.md, alignItems: 'center' },\n  handle: { width: 40, height: 5, borderRadius: 3, backgroundColor: theme.colors.border },\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.tokens.spacing.md,\n    paddingHorizontal: theme.tokens.spacing.xl,\n    paddingBottom: theme.tokens.spacing.md,\n  },\n  headerSpaced: { paddingTop: theme.tokens.spacing.xl },\n  title: { flex: 1, fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold },\n  content: { paddingHorizontal: theme.tokens.spacing.xl },\n  scroll: { flexShrink: 1 },\n  footer: {\n    paddingHorizontal: theme.tokens.spacing.xl,\n    paddingTop: theme.tokens.spacing.md,\n    borderTopWidth: 1,\n    borderTopColor: theme.colors.border,\n  },\n  footerInline: { paddingTop: theme.tokens.spacing.xl },\n}));\n\nconst absoluteFill: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };\n\n/**\n * BottomSheet\n * Hoja que entra desde abajo, con arrastre para cerrar (PanResponder, no un\n * gesture-handler externo: la librería es cero dependencias). Header, footer y\n * scroll son opcionales, así que cubre tanto la hoja desnuda como el formulario\n * completo.\n */\nexport const BottomSheet = memo(\n  ({\n    visible,\n    onClose,\n    children,\n    title,\n    footer,\n    footerPlacement = 'fixed',\n    scrollable = true,\n    draggable = true,\n    maxHeight = 0.9,\n    closeAccessibilityLabel = 'Close',\n    containerStyle,\n    contentStyle,\n    testID,\n  }: BottomSheetProps) => {\n    const styles = useStyles();\n    const colors = useColors();\n    const insets = useInsets();\n    const [mounted, setMounted] = useState(visible);\n    const [keyboardOpen, setKeyboardOpen] = useState(false);\n    const progress = useRef(new Animated.Value(0)).current;\n\n    useEffect(() => {\n      if (visible) {\n        setMounted(true);\n        Animated.timing(progress, { toValue: 1, duration: 250, useNativeDriver: true }).start();\n      } else {\n        Animated.timing(progress, { toValue: 0, duration: 200, useNativeDriver: true }).start(({ finished }) => {\n          if (finished) setMounted(false);\n        });\n      }\n    }, [visible, progress]);\n\n    useEffect(() => {\n      if (footerPlacement !== 'hide-with-keyboard') return;\n      const [show, hide] =\n        Platform.OS === 'ios' ? ['keyboardWillShow', 'keyboardWillHide'] : ['keyboardDidShow', 'keyboardDidHide'];\n      const subs = [\n        Keyboard.addListener(show as 'keyboardDidShow', () => setKeyboardOpen(true)),\n        Keyboard.addListener(hide as 'keyboardDidHide', () => setKeyboardOpen(false)),\n      ];\n      return () => subs.forEach((sub) => sub.remove());\n    }, [footerPlacement]);\n\n    const panResponder = useRef(\n      PanResponder.create({\n        onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 5 && Math.abs(gesture.dy) > Math.abs(gesture.dx),\n        onPanResponderMove: (_, gesture) => {\n          if (gesture.dy > 0) progress.setValue(1 - Math.min(gesture.dy, SCREEN_HEIGHT) / SCREEN_HEIGHT);\n        },\n        onPanResponderRelease: (_, gesture) => {\n          if (gesture.dy > DISMISS_THRESHOLD) {\n            onClose();\n          } else {\n            Animated.timing(progress, { toValue: 1, duration: 150, useNativeDriver: true }).start();\n          }\n        },\n      })\n    ).current;\n\n    if (!mounted) return null;\n\n    // Porcentaje y no píxeles: se mide contra el contenedor, que con el teclado\n    // abierto es más bajo, así que la hoja entra siempre entera.\n    const resolvedMaxHeight: number | `${number}%` = maxHeight <= 1 ? `${maxHeight * 100}%` : maxHeight;\n    const hasHeader = !!title;\n\n    const scrolledFooter = !!footer && footerPlacement === 'scroll' && (\n      <View style={styles.footerInline}>{footer}</View>\n    );\n    const pinnedFooter =\n      !!footer && footerPlacement !== 'scroll' && !(footerPlacement === 'hide-with-keyboard' && keyboardOpen) ? (\n        <View style={styles.footer}>{footer}</View>\n      ) : null;\n\n    const body = scrollable ? (\n      <ScrollView\n        style={styles.scroll}\n        contentContainerStyle={[styles.content, contentStyle]}\n        keyboardShouldPersistTaps=\"handled\"\n        showsVerticalScrollIndicator={false}\n      >\n        {children}\n        {scrolledFooter}\n      </ScrollView>\n    ) : (\n      <View style={[styles.content, contentStyle]}>\n        {children}\n        {scrolledFooter}\n      </View>\n    );\n\n    return (\n      <Modal visible transparent animationType=\"none\" statusBarTranslucent onRequestClose={onClose}>\n        {/* La hoja está anclada abajo, así que el teclado la tapa entera: hay\n            que empujarla, no ajustar insets adentro del scroll. Una sola\n            compensación, la del contenedor. */}\n        <KeyboardAvoidingView\n          style={styles.container}\n          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}\n        >\n          <Transition value={progress} preset=\"fade\" style={[absoluteFill, styles.backdrop]}>\n            {/* Con header, el botón de cerrar ya expone la acción: repetir el\n                label acá deja dos elementos con el mismo nombre. */}\n            <Pressable\n              style={absoluteFill}\n              onPress={onClose}\n              testID=\"bottom-sheet-backdrop\"\n              accessibilityRole={hasHeader ? undefined : 'button'}\n              accessibilityLabel={hasHeader ? undefined : closeAccessibilityLabel}\n            />\n          </Transition>\n\n          <Transition\n            value={progress}\n            preset=\"slide-up\"\n            distance={SCREEN_HEIGHT}\n            testID={testID}\n            style={[\n              styles.sheet,\n              { maxHeight: resolvedMaxHeight, paddingBottom: Math.max(insets.bottom, 20) },\n              containerStyle,\n            ]}\n          >\n            {draggable && (\n              <View style={styles.handleArea} testID=\"bottom-sheet-handle\" {...panResponder.panHandlers}>\n                <View style={styles.handle} />\n              </View>\n            )}\n\n            {hasHeader && (\n              <View style={[styles.header, !draggable && styles.headerSpaced]}>\n                <Title style={styles.title} numberOfLines={1}>\n                  {title}\n                </Title>\n                <IconButton\n                  iconName=\"close\"\n                  size={24}\n                  color={colors.text}\n                  onPress={onClose}\n                  accessibilityLabel={closeAccessibilityLabel}\n                />\n              </View>\n            )}\n\n            {body}\n\n            {pinnedFooter}\n          </Transition>\n        </KeyboardAvoidingView>\n      </Modal>\n    );\n  }\n);\nBottomSheet.displayName = 'BottomSheet';\n"
     }
   ],
   "registryDependencies": [
-    "core"
+    "core",
+    "title",
+    "icon-button",
+    "pressable-scale",
+    "transition"
   ]
 }

package/registry/core.json

@@ -23,17 +23,21 @@
       "path": "theme/UIProvider.tsx",
       "content": "import React, { createContext, useContext, useMemo, useState, useCallback } from 'react';\nimport { Appearance, useColorScheme } from 'react-native';\nimport { defaultTheme } from './createTheme';\nimport { defaultLabels, type Labels } from './labels';\nimport { zeroInsets, type EdgeInsets } from './insets';\nimport type { Theme, ThemePair } from './types';\nimport { renderDefaultIcon } from '../icons/defaultIcons';\nimport type { IconRenderer } from '../icons/types';\n\nexport type ThemeMode = 'system' | 'light' | 'dark';\n\ninterface UIContextValue {\n  theme: Theme;\n  mode: ThemeMode;\n  setMode: (mode: ThemeMode) => void;\n  icons: IconRenderer;\n  insets: EdgeInsets;\n  labels: Labels;\n  allowFontScaling: boolean;\n}\n\nconst UIContext = createContext<UIContextValue | undefined>(undefined);\n\n/** Una sola vez por sesión: en un re-render el aviso no aporta nada nuevo. */\nlet warnedAboutInsets = false;\n\nexport interface UIProviderProps {\n  children: React.ReactNode;\n  /** Par light/dark. Por defecto el theme de marca de la librería (créalo con createTheme()). */\n  theme?: ThemePair;\n  /** Modo inicial (no controlado) si no se pasa `mode`. @default 'system' */\n  defaultMode?: ThemeMode;\n  /** Modo controlado. Si se pasa junto a onModeChange, el provider no gestiona estado propio. */\n  mode?: ThemeMode;\n  onModeChange?: (mode: ThemeMode) => void;\n  /** Renderer de íconos. Por defecto usa los glifos zero-dep incluidos. */\n  icons?: IconRenderer;\n  /** Insets de safe area (de useSafeAreaInsets()). Por defecto {0,0,0,0}. */\n  insets?: EdgeInsets;\n  labels?: Partial<Labels>;\n  /** @default false, para paridad con el resto de la librería (accesibilidad primero). */\n  allowFontScaling?: boolean;\n}\n\n/**\n * UIProvider\n * Único punto de entrada de la librería: resuelve el theme activo (sistema u\n * override manual), e inyecta íconos, insets y textos por defecto a todo el\n * árbol. No persiste el modo — si el consumidor quiere recordar la preferencia\n * entre sesiones, controla `mode`/`onModeChange` y persiste donde prefiera.\n */\nexport function UIProvider({\n  children,\n  theme = defaultTheme,\n  defaultMode = 'system',\n  mode: controlledMode,\n  onModeChange,\n  icons = renderDefaultIcon,\n  insets = zeroInsets,\n  labels: labelOverrides,\n  allowFontScaling = false,\n}: UIProviderProps) {\n  const systemScheme = useColorScheme();\n  const [uncontrolledMode, setUncontrolledMode] = useState<ThemeMode>(defaultMode);\n  const isControlled = controlledMode !== undefined;\n  const mode = isControlled ? controlledMode : uncontrolledMode;\n\n  const setMode = useCallback(\n    (next: ThemeMode) => {\n      if (!isControlled) setUncontrolledMode(next);\n      onModeChange?.(next);\n    },\n    [isControlled, onModeChange]\n  );\n\n  // Olvidar `insets` no rompe nada visible al montar: el default de ceros\n  // recién se nota cuando abrís un Modal `full` (se mete abajo del notch) o un\n  // BottomSheet (queda pegado a la barra de gestos). El aviso llega antes.\n  if (__DEV__ && insets === zeroInsets && !warnedAboutInsets) {\n    warnedAboutInsets = true;\n    console.warn(\n      'orn-ui: <UIProvider> sin `insets`, se usan {top:0,bottom:0,left:0,right:0}. ' +\n        'Los modales y el Screen quedan sin safe area. Pasá `insets={useSafeAreaInsets()}` ' +\n        \"o usá <SafeAreaUIProvider> de 'orn-ui/safe-area', que lo cablea solo.\"\n    );\n  }\n\n  const scheme: 'light' | 'dark' =\n    mode === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : mode;\n\n  const resolvedTheme = theme[scheme];\n\n  const labels = useMemo(\n    () => (labelOverrides ? { ...defaultLabels, ...labelOverrides } : defaultLabels),\n    [labelOverrides]\n  );\n\n  const value = useMemo<UIContextValue>(\n    () => ({ theme: resolvedTheme, mode, setMode, icons, insets, labels, allowFontScaling }),\n    [resolvedTheme, mode, setMode, icons, insets, labels, allowFontScaling]\n  );\n\n  return <UIContext.Provider value={value}>{children}</UIContext.Provider>;\n}\n\nfunction useUIContext(): UIContextValue {\n  const ctx = useContext(UIContext);\n  if (!ctx) {\n    throw new Error('orn-ui: this hook must be used within a <UIProvider>.');\n  }\n  return ctx;\n}\n\nexport function useTheme(): Theme {\n  return useUIContext().theme;\n}\n\nexport function useColors(): Theme['colors'] {\n  return useUIContext().theme.colors;\n}\n\nexport function useThemeMode() {\n  const { mode, setMode } = useUIContext();\n  return { mode, setMode };\n}\n\nexport function useIcons(): IconRenderer {\n  return useUIContext().icons;\n}\n\nexport function useInsets(): EdgeInsets {\n  return useUIContext().insets;\n}\n\nexport function useLabels(): Labels {\n  return useUIContext().labels;\n}\n\nexport function useAllowFontScaling(): boolean {\n  return useUIContext().allowFontScaling;\n}\n\n/** Re-exportado para que tests/consumidores puedan simular cambios de sistema sin RN real. */\nexport const __testUtils = { Appearance };\n"
     },
+    {
+      "path": "theme/colors.ts",
+      "content": "/**\n * Utilidades de color sin dependencias, usadas para derivar una familia de\n * roles (relleno / encima / tenue / legible) a partir de un solo hex de marca.\n */\n\n/** Contraste mínimo AA para texto normal. */\nexport const AA_CONTRAST = 4.5;\n\nexport interface Rgb {\n  r: number;\n  g: number;\n  b: number;\n}\n\nexport interface Hsl {\n  h: number;\n  s: number;\n  l: number;\n}\n\n/** Roles que necesita un acento del theme, en un esquema concreto. */\nexport interface AccentRoles {\n  /** Relleno pleno: fondo de botón, círculo del paso actual. */\n  base: string;\n  /** Texto/ícono que va encima del relleno. */\n  on: string;\n  /** Fondo tenue: badges, pill del indicador activo. */\n  soft: string;\n  /** El acento legible sobre `surface`: labels, links. */\n  text: string;\n}\n\nconst HEX = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;\n\nexport function hexToRgb(hex: string): Rgb {\n  const match = HEX.exec(hex.trim());\n  if (!match) {\n    throw new Error(`orn-ui: se esperaba un color hex como \"#7c3aed\", se recibió \"${hex}\".`);\n  }\n  const digits = match[1]!;\n  const full = digits.length === 3 ? digits.replace(/./g, (c) => c + c) : digits;\n  return {\n    r: parseInt(full.slice(0, 2), 16),\n    g: parseInt(full.slice(2, 4), 16),\n    b: parseInt(full.slice(4, 6), 16),\n  };\n}\n\nconst toHexPair = (value: number) => Math.round(clamp(value, 0, 255)).toString(16).padStart(2, '0');\n\nexport function rgbToHex({ r, g, b }: Rgb): string {\n  return `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`;\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function rgbToHsl({ r, g, b }: Rgb): Hsl {\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n  const l = (max + min) / 2;\n\n  if (delta === 0) return { h: 0, s: 0, l };\n\n  const s = delta / (1 - Math.abs(2 * l - 1));\n  let h: number;\n  if (max === rn) h = ((gn - bn) / delta) % 6;\n  else if (max === gn) h = (bn - rn) / delta + 2;\n  else h = (rn - gn) / delta + 4;\n\n  h *= 60;\n  return { h: h < 0 ? h + 360 : h, s, l };\n}\n\nexport function hslToRgb({ h, s, l }: Hsl): Rgb {\n  const c = (1 - Math.abs(2 * l - 1)) * s;\n  const hp = (((h % 360) + 360) % 360) / 60;\n  const x = c * (1 - Math.abs((hp % 2) - 1));\n  const [r1, g1, b1] =\n    hp < 1 ? [c, x, 0] : hp < 2 ? [x, c, 0] : hp < 3 ? [0, c, x] : hp < 4 ? [0, x, c] : hp < 5 ? [x, 0, c] : [c, 0, x];\n  const m = l - c / 2;\n  return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };\n}\n\nexport function toHsl(hex: string): Hsl {\n  return rgbToHsl(hexToRgb(hex));\n}\n\nexport function toHex(hsl: Hsl): string {\n  return rgbToHex(hslToRgb({ ...hsl, s: clamp(hsl.s, 0, 1), l: clamp(hsl.l, 0, 1) }));\n}\n\nfunction channelLuminance(value: number) {\n  const c = value / 255;\n  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n}\n\n/** Luminancia relativa WCAG de un hex. */\nexport function luminance(hex: string): number {\n  const { r, g, b } = hexToRgb(hex);\n  return 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b);\n}\n\n/** Ratio de contraste WCAG entre dos hex: 1 (igual) a 21 (blanco sobre negro). */\nexport function contrast(a: string, b: string): number {\n  const la = luminance(a);\n  const lb = luminance(b);\n  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);\n}\n\n/**\n * Blanco si alcanza el contraste AA —es lo que se espera encima de un relleno\n * de color— y si no, el extremo que más contraste dé.\n */\nfunction bestOnColor(background: string, light: string, dark: string): string {\n  if (contrast(background, light) >= AA_CONTRAST) return light;\n  return contrast(background, dark) >= contrast(background, light) ? dark : light;\n}\n\n/**\n * Mueve la luminosidad del tono hasta alcanzar el contraste pedido contra\n * `against`. Si ni el extremo llega —un amarillo puro sobre blanco, por\n * ejemplo— devuelve el más contrastado que encontró en el camino.\n */\nfunction reachContrast(hsl: Hsl, against: string, target: number, direction: 'darker' | 'lighter'): string {\n  const step = direction === 'darker' ? -0.02 : 0.02;\n  let best = toHex(hsl);\n  let bestRatio = contrast(best, against);\n\n  for (let l = hsl.l; l >= 0 && l <= 1; l += step) {\n    const candidate = toHex({ ...hsl, l });\n    const ratio = contrast(candidate, against);\n    if (ratio > bestRatio) {\n      best = candidate;\n      bestRatio = ratio;\n    }\n    if (ratio >= target) return candidate;\n  }\n\n  return best;\n}\n\n/**\n * Deriva los cuatro roles de un acento a partir de un hex, para un esquema.\n * `surface` es el fondo sobre el que tiene que leerse el rol `text`, así que\n * cada esquema pasa el suyo.\n */\nexport function deriveAccent(hex: string, scheme: 'light' | 'dark', surface: string): AccentRoles {\n  const hsl = toHsl(hex);\n\n  if (scheme === 'light') {\n    const base = toHex(hsl);\n    return {\n      base,\n      on: bestOnColor(base, '#ffffff', '#1a1a1a'),\n      soft: toHex({ h: hsl.h, s: Math.min(hsl.s, 0.85), l: 0.94 }),\n      text: reachContrast({ ...hsl, l: Math.min(hsl.l, 0.38) }, surface, AA_CONTRAST, 'darker'),\n    };\n  }\n\n  // En oscuro el acento sube de luminosidad y lo que va encima baja: un\n  // #004cef sobre #1e1e1e no se distingue del fondo.\n  const base = toHex({ ...hsl, l: 0.72 });\n  return {\n    base,\n    on: bestOnColor(base, '#ffffff', toHex({ ...hsl, s: Math.min(hsl.s, 0.9), l: 0.16 })),\n    soft: toHex({ h: hsl.h, s: Math.min(hsl.s, 0.35), l: 0.18 }),\n    text: reachContrast({ ...hsl, l: Math.max(hsl.l, 0.74) }, surface, AA_CONTRAST, 'lighter'),\n  };\n}\n"
+    },
     {
       "path": "theme/createStyles.ts",
       "content": "import { StyleSheet } from 'react-native';\nimport { useTheme } from './UIProvider';\nimport type { Theme } from './types';\n\n/**\n * createStyles(factory)\n * Devuelve un hook useStyles() que memoiza el StyleSheet resultante por\n * theme (WeakMap<Theme, Styles>), no por instancia de componente. Todas las\n * filas de una lista comparten el mismo objeto de estilos: sin esto, N filas\n * ⇒ N StyleSheet.create() por render, que es lo que hacía cada componente\n * de la app original con `useMemo(() => createStyles(colors), [colors])`.\n *\n * La cache vive en el closure del factory (una WeakMap por llamada a\n * createStyles, es decir, una por componente), así que temas de distintos\n * <UIProvider> en el mismo árbol no colisionan entre sí.\n *\n * El tipo de `factory` sigue el patrón oficial de RN para StyleSheet\n * tipados (`T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>`):\n * es lo que le da contexto a TS para inferir literales ('row', 'center', ...)\n * en vez de ensancharlos a `string` dentro del objeto devuelto.\n */\nexport function createStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(\n  factory: (theme: Theme) => T | StyleSheet.NamedStyles<T>\n): () => T {\n  const cache = new WeakMap<Theme, T>();\n\n  return function useStyles(): T {\n    const theme = useTheme();\n    let styles = cache.get(theme);\n    if (!styles) {\n      // El cast es seguro: StyleSheet.create<T>(...) con el mismo T del\n      // factory siempre devuelve T; TS no puede probarlo por sí solo dentro\n      // de un cuerpo genérico (T podría \"instanciarse\" con un subtipo no\n      // relacionado desde su punto de vista, aunque en runtime es el mismo).\n      styles = StyleSheet.create(factory(theme)) as T;\n      cache.set(theme, styles);\n    }\n    return styles;\n  };\n}\n"
     },
     {
       "path": "theme/createTheme.ts",
-      "content": "import { lightPalette, darkPalette } from './palettes';\nimport { tokens as defaultTokens } from './tokens';\nimport type { Theme, ThemeOverrides, ThemePair } from './types';\n\nfunction mergeDeep<T extends Record<string, any>>(base: T, patch?: Partial<T>): T {\n  if (!patch) return base;\n  const out: Record<string, any> = { ...base };\n  for (const key of Object.keys(patch)) {\n    const patchVal = (patch as Record<string, any>)[key];\n    const baseVal = (base as Record<string, any>)[key];\n    if (\n      patchVal &&\n      baseVal &&\n      typeof patchVal === 'object' &&\n      typeof baseVal === 'object' &&\n      !Array.isArray(patchVal)\n    ) {\n      out[key] = mergeDeep(baseVal, patchVal);\n    } else if (patchVal !== undefined) {\n      out[key] = patchVal;\n    }\n  }\n  return out as T;\n}\n\n/**\n * Construye el par de themes light/dark que consume <UIProvider theme={...}>.\n * Nunca muta los defaults: cada llamada produce objetos nuevos, seguros de\n * compartir entre providers distintos (tests, multi-brand en el mismo árbol).\n */\nexport function createTheme(overrides?: ThemeOverrides): ThemePair {\n  const tokens = mergeDeep(defaultTokens, overrides?.tokens as any);\n\n  const light: Theme = {\n    colors: mergeDeep(lightPalette, overrides?.colors?.light),\n    tokens,\n    scheme: 'light',\n  };\n\n  const dark: Theme = {\n    colors: mergeDeep(darkPalette, overrides?.colors?.dark),\n    tokens,\n    scheme: 'dark',\n  };\n\n  return { light, dark };\n}\n\nexport const defaultTheme: ThemePair = createTheme();\n"
+      "content": "import { lightPalette, darkPalette, type ThemeColors } from './palettes';\nimport { tokens as defaultTokens } from './tokens';\nimport { deriveAccent } from './colors';\nimport type { BrandAccent, Theme, ThemeOverrides, ThemePair } from './types';\n\nfunction mergeDeep<T extends Record<string, any>>(base: T, patch?: Partial<T>): T {\n  if (!patch) return base;\n  const out: Record<string, any> = { ...base };\n  for (const key of Object.keys(patch)) {\n    const patchVal = (patch as Record<string, any>)[key];\n    const baseVal = (base as Record<string, any>)[key];\n    if (\n      patchVal &&\n      baseVal &&\n      typeof patchVal === 'object' &&\n      typeof baseVal === 'object' &&\n      !Array.isArray(patchVal)\n    ) {\n      out[key] = mergeDeep(baseVal, patchVal);\n    } else if (patchVal !== undefined) {\n      out[key] = patchVal;\n    }\n  }\n  return out as T;\n}\n\nconst capitalize = <T extends string>(name: T) => (name.charAt(0).toUpperCase() + name.slice(1)) as Capitalize<T>;\n\n/** Expande cada hex de `brand` a los cuatro roles del acento en un esquema. */\nfunction brandColors(\n  brand: ThemeOverrides['brand'],\n  scheme: 'light' | 'dark',\n  palette: ThemeColors\n): Partial<ThemeColors> {\n  if (!brand) return {};\n  const accents = typeof brand === 'string' ? { primary: brand } : brand;\n  const out: Partial<ThemeColors> = {};\n\n  for (const [name, hex] of Object.entries(accents) as [BrandAccent, string | undefined][]) {\n    if (!hex) continue;\n    const roles = deriveAccent(hex, scheme, palette.surface);\n    out[name] = roles.base;\n    out[`on${capitalize(name)}`] = roles.on;\n    out[`${name}Soft`] = roles.soft;\n    out[`${name}Text`] = roles.text;\n  }\n\n  return out;\n}\n\n/**\n * Construye el par de themes light/dark que consume <UIProvider theme={...}>.\n * Nunca muta los defaults: cada llamada produce objetos nuevos, seguros de\n * compartir entre providers distintos (tests, multi-brand en el mismo árbol).\n *\n * `brand` se aplica antes que `colors`, así que un rol escrito a mano siempre\n * gana sobre el derivado.\n */\nexport function createTheme(overrides?: ThemeOverrides): ThemePair {\n  const tokens = mergeDeep(defaultTokens, overrides?.tokens as any);\n\n  const light: Theme = {\n    colors: mergeDeep(\n      mergeDeep(lightPalette, brandColors(overrides?.brand, 'light', lightPalette)),\n      overrides?.colors?.light\n    ),\n    tokens,\n    scheme: 'light',\n  };\n\n  const dark: Theme = {\n    colors: mergeDeep(\n      mergeDeep(darkPalette, brandColors(overrides?.brand, 'dark', darkPalette)),\n      overrides?.colors?.dark\n    ),\n    tokens,\n    scheme: 'dark',\n  };\n\n  return { light, dark };\n}\n\nexport const defaultTheme: ThemePair = createTheme();\n"
     },
     {
       "path": "theme/index.ts",
-      "content": "export { spacing, radius, fontSize, fontWeight, lineHeight, duration, shadow, tokens } from './tokens';\nexport type { Tokens } from './tokens';\nexport { lightPalette, darkPalette } from './palettes';\nexport type { ThemeColors } from './palettes';\nexport { createTheme, defaultTheme } from './createTheme';\nexport type { Theme, ThemePair, ThemeOverrides, DeepPartial } from './types';\nexport { defaultLabels } from './labels';\nexport type { Labels } from './labels';\nexport { zeroInsets } from './insets';\nexport type { EdgeInsets } from './insets';\nexport { createStyles } from './createStyles';\nexport {\n  UIProvider,\n  useTheme,\n  useColors,\n  useThemeMode,\n  useIcons,\n  useInsets,\n  useLabels,\n  useAllowFontScaling,\n} from './UIProvider';\nexport type { UIProviderProps, ThemeMode } from './UIProvider';\n"
+      "content": "export { spacing, radius, fontSize, fontWeight, lineHeight, duration, shadow, tokens } from './tokens';\nexport type { Tokens } from './tokens';\nexport { lightPalette, darkPalette } from './palettes';\nexport type { ThemeColors } from './palettes';\nexport { createTheme, defaultTheme } from './createTheme';\nexport type { Theme, ThemePair, ThemeOverrides, BrandAccent, DeepPartial } from './types';\nexport { deriveAccent, contrast, luminance, AA_CONTRAST } from './colors';\nexport type { AccentRoles } from './colors';\nexport { defaultLabels } from './labels';\nexport type { Labels } from './labels';\nexport { zeroInsets } from './insets';\nexport type { EdgeInsets } from './insets';\nexport { createStyles } from './createStyles';\nexport {\n  UIProvider,\n  useTheme,\n  useColors,\n  useThemeMode,\n  useIcons,\n  useInsets,\n  useLabels,\n  useAllowFontScaling,\n} from './UIProvider';\nexport type { UIProviderProps, ThemeMode } from './UIProvider';\n"
     },
     {
       "path": "theme/insets.ts",
@@ -45,7 +49,7 @@
     },
     {
       "path": "theme/palettes.ts",
-      "content": "/**\n * Cada color es `string`, no un literal (`as const`): light y dark tienen\n * valores distintos para la misma clave, y createTheme() debe poder\n * aceptar cualquier hex/rgba en los overrides — literal typing lo impediría.\n *\n * Cada acento viene en cuatro roles, y no son intercambiables:\n *\n *   `primary`      relleno sólido (fondo de botón, día seleccionado, FAB).\n *   `onPrimary`    texto/ícono *encima* de ese relleno.\n *   `primarySoft`  fondo teñido para estados seleccionados y pills.\n *   `primaryText`  texto/ícono del acento sobre `surface`, `background`\n *                  o sobre su propio `primarySoft`.\n *\n * El motivo es el contraste: un acento que se lee bien como relleno no se\n * lee como texto. Antes los componentes usaban `colors.primary` para las dos\n * cosas y lo teñían concatenando alpha al hex (`colors.primary + '15'`), lo\n * que en dark daba 2.6:1 sobre la superficie — muy por debajo del 4.5:1 de\n * WCAG AA. Todos los pares de esta paleta pasan AA en ambos esquemas.\n */\nexport interface ThemeColors {\n  primary: string;\n  onPrimary: string;\n  primarySoft: string;\n  primaryText: string;\n\n  secondary: string;\n  onSecondary: string;\n  secondarySoft: string;\n  secondaryText: string;\n\n  success: string;\n  onSuccess: string;\n  successSoft: string;\n  successText: string;\n\n  error: string;\n  onError: string;\n  errorSoft: string;\n  errorText: string;\n\n  warning: string;\n  onWarning: string;\n  warningSoft: string;\n  warningText: string;\n\n  white: string;\n  black: string;\n  background: string;\n  surface: string;\n  text: string;\n  textLight: string;\n  border: string;\n  inputBackground: string;\n  overlay: string;\n  /** Velo semitransparente sobre contenido propio (footer de carga de List). */\n  scrim: string;\n  /** Fondo de placeholder mientras carga una imagen. */\n  skeleton: string;\n}\n\nconst neutral = {\n  white: '#ffffff',\n  black: '#000000',\n};\n\nexport const lightPalette: ThemeColors = {\n  ...neutral,\n\n  primary: '#004cef',\n  onPrimary: '#ffffff',\n  primarySoft: '#e6edfe',\n  primaryText: '#00369f',\n\n  secondary: '#00cae1',\n  onSecondary: '#00363d',\n  secondarySoft: '#dcf6f9',\n  secondaryText: '#00707d',\n\n  success: '#34c759',\n  onSuccess: '#00320f',\n  successSoft: '#e3f6e9',\n  successText: '#116a30',\n\n  error: '#ff3b30',\n  onError: '#3d0300',\n  errorSoft: '#fdeaea',\n  errorText: '#c62222',\n\n  warning: '#f59e0b',\n  onWarning: '#3d2600',\n  warningSoft: '#fdf1de',\n  warningText: '#8a4b00',\n\n  background: '#f8f9fa',\n  surface: '#ffffff',\n  text: '#333333',\n  textLight: '#666666',\n  border: '#e5e7eb',\n  inputBackground: '#f5f7fa',\n  overlay: 'rgba(0,0,0,0.5)',\n  scrim: 'rgba(248,249,250,0.8)',\n  skeleton: '#eceef1',\n};\n\n/**\n * Los acentos de dark NO son los de light: sobre `#1e1e1e` hay que subir la\n * luminosidad del acento y bajar la del texto que va encima (por eso\n * `onPrimary` es azul oscuro acá y blanco en light).\n */\nexport const darkPalette: ThemeColors = {\n  ...neutral,\n\n  primary: '#7ba4ff',\n  onPrimary: '#00205c',\n  primarySoft: '#1b2740',\n  primaryText: '#a9c3ff',\n\n  secondary: '#4dd8e8',\n  onSecondary: '#00363d',\n  secondarySoft: '#12333a',\n  secondaryText: '#7fe6f2',\n\n  success: '#5ddb84',\n  onSuccess: '#003514',\n  successSoft: '#13301e',\n  successText: '#7fe6a1',\n\n  error: '#ff7b72',\n  onError: '#4d0500',\n  errorSoft: '#3a1c1a',\n  errorText: '#ffa9a3',\n\n  warning: '#f0b458',\n  onWarning: '#3d2600',\n  warningSoft: '#33260f',\n  warningText: '#f5c97e',\n\n  background: '#121212',\n  surface: '#1e1e1e',\n  text: '#ecedee',\n  textLight: '#9ba1a6',\n  border: '#2a2a2e',\n  inputBackground: '#232326',\n  overlay: 'rgba(0,0,0,0.6)',\n  scrim: 'rgba(18,18,18,0.8)',\n  skeleton: '#26262a',\n};\n"
+      "content": "/**\n * Cada color es `string`, no un literal (`as const`): light y dark tienen\n * valores distintos para la misma clave, y createTheme() debe poder\n * aceptar cualquier hex/rgba en los overrides — literal typing lo impediría.\n *\n * Cada acento viene en cuatro roles, y no son intercambiables:\n *\n *   `primary`      relleno sólido (fondo de botón, día seleccionado, FAB).\n *   `onPrimary`    texto/ícono *encima* de ese relleno.\n *   `primarySoft`  fondo teñido para estados seleccionados y pills.\n *   `primaryText`  texto/ícono del acento sobre `surface`, `background`\n *                  o sobre su propio `primarySoft`.\n *\n * El motivo es el contraste: un acento que se lee bien como relleno no se\n * lee como texto. Antes los componentes usaban `colors.primary` para las dos\n * cosas y lo teñían concatenando alpha al hex (`colors.primary + '15'`), lo\n * que en dark daba 2.6:1 sobre la superficie — muy por debajo del 4.5:1 de\n * WCAG AA. Todos los pares de esta paleta pasan AA en ambos esquemas.\n */\nexport interface ThemeColors {\n  primary: string;\n  onPrimary: string;\n  primarySoft: string;\n  primaryText: string;\n\n  secondary: string;\n  onSecondary: string;\n  secondarySoft: string;\n  secondaryText: string;\n\n  success: string;\n  onSuccess: string;\n  successSoft: string;\n  successText: string;\n\n  error: string;\n  onError: string;\n  errorSoft: string;\n  errorText: string;\n\n  warning: string;\n  onWarning: string;\n  warningSoft: string;\n  warningText: string;\n\n  white: string;\n  black: string;\n  background: string;\n  surface: string;\n  text: string;\n  textLight: string;\n  border: string;\n  inputBackground: string;\n  overlay: string;\n  /** Velo semitransparente sobre contenido propio (footer de carga de List). */\n  scrim: string;\n  /** Fondo de placeholder mientras carga una imagen. */\n  skeleton: string;\n}\n\nconst neutral = {\n  white: '#ffffff',\n  black: '#000000',\n};\n\nexport const lightPalette: ThemeColors = {\n  ...neutral,\n\n  primary: '#004cef',\n  onPrimary: '#ffffff',\n  primarySoft: '#e6edfe',\n  primaryText: '#00369f',\n\n  secondary: '#00cae1',\n  onSecondary: '#00363d',\n  secondarySoft: '#dcf6f9',\n  secondaryText: '#00707d',\n\n  success: '#34c759',\n  onSuccess: '#00320f',\n  successSoft: '#e3f6e9',\n  successText: '#116a30',\n\n  // El rojo va con texto blanco, que es lo que la gente espera de un botón\n  // destructivo. #ff3b30 no llega a 4.5:1 con blanco y obligaba a texto casi\n  // negro sobre rojo; este tono sí, y sigue leyéndose como rojo de alerta.\n  error: '#dc2626',\n  onError: '#ffffff',\n  errorSoft: '#fdeaea',\n  errorText: '#c62222',\n\n  warning: '#f59e0b',\n  onWarning: '#3d2600',\n  warningSoft: '#fdf1de',\n  warningText: '#8a4b00',\n\n  background: '#f8f9fa',\n  surface: '#ffffff',\n  text: '#333333',\n  textLight: '#666666',\n  border: '#e5e7eb',\n  inputBackground: '#f5f7fa',\n  overlay: 'rgba(0,0,0,0.5)',\n  scrim: 'rgba(248,249,250,0.8)',\n  skeleton: '#eceef1',\n};\n\n/**\n * Los acentos de dark NO son los de light: sobre `#1e1e1e` hay que subir la\n * luminosidad del acento y bajar la del texto que va encima (por eso\n * `onPrimary` es azul oscuro acá y blanco en light).\n */\nexport const darkPalette: ThemeColors = {\n  ...neutral,\n\n  primary: '#7ba4ff',\n  onPrimary: '#00205c',\n  primarySoft: '#1b2740',\n  primaryText: '#a9c3ff',\n\n  secondary: '#4dd8e8',\n  onSecondary: '#00363d',\n  secondarySoft: '#12333a',\n  secondaryText: '#7fe6f2',\n\n  success: '#5ddb84',\n  onSuccess: '#003514',\n  successSoft: '#13301e',\n  successText: '#7fe6a1',\n\n  error: '#ff7b72',\n  onError: '#4d0500',\n  errorSoft: '#3a1c1a',\n  errorText: '#ffa9a3',\n\n  warning: '#f0b458',\n  onWarning: '#3d2600',\n  warningSoft: '#33260f',\n  warningText: '#f5c97e',\n\n  background: '#121212',\n  surface: '#1e1e1e',\n  text: '#ecedee',\n  textLight: '#9ba1a6',\n  border: '#2a2a2e',\n  inputBackground: '#232326',\n  overlay: 'rgba(0,0,0,0.6)',\n  scrim: 'rgba(18,18,18,0.8)',\n  skeleton: '#26262a',\n};\n"
     },
     {
       "path": "theme/tokens.ts",
@@ -53,7 +57,7 @@
     },
     {
       "path": "theme/types.ts",
-      "content": "import type { Tokens } from './tokens';\nimport type { ThemeColors } from './palettes';\n\n/** Theme resuelto: paleta de un scheme concreto + tokens compartidos. */\nexport interface Theme {\n  colors: ThemeColors;\n  tokens: Tokens;\n  scheme: 'light' | 'dark';\n}\n\n/** Par de themes light/dark que produce createTheme() y consume UIProvider. */\nexport interface ThemePair {\n  light: Theme;\n  dark: Theme;\n}\n\nexport type DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport interface ThemeOverrides {\n  colors?: {\n    light?: Partial<ThemeColors>;\n    dark?: Partial<ThemeColors>;\n  };\n  tokens?: DeepPartial<Tokens>;\n}\n"
+      "content": "import type { Tokens } from './tokens';\nimport type { ThemeColors } from './palettes';\n\n/** Theme resuelto: paleta de un scheme concreto + tokens compartidos. */\nexport interface Theme {\n  colors: ThemeColors;\n  tokens: Tokens;\n  scheme: 'light' | 'dark';\n}\n\n/** Par de themes light/dark que produce createTheme() y consume UIProvider. */\nexport interface ThemePair {\n  light: Theme;\n  dark: Theme;\n}\n\nexport type DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\n/** Acentos que se pueden definir con un solo hex vía `brand`. */\nexport type BrandAccent = 'primary' | 'secondary' | 'success' | 'error' | 'warning';\n\nexport interface ThemeOverrides {\n  /**\n   * Un hex por acento; de cada uno se derivan sus cuatro roles (relleno, lo\n   * que va encima, el fondo tenue y la variante legible sobre `surface`) para\n   * light y para dark, con el contraste ya resuelto. Un string suelto define\n   * `primary`. Lo que se pase en `colors` gana sobre lo derivado.\n   */\n  brand?: string | Partial<Record<BrandAccent, string>>;\n  colors?: {\n    light?: Partial<ThemeColors>;\n    dark?: Partial<ThemeColors>;\n  };\n  tokens?: DeepPartial<Tokens>;\n}\n"
     }
   ],
   "registryDependencies": [],

package/registry/date-field.json

@@ -18,6 +18,7 @@
     "title",
     "icon-button",
     "pressable-scale",
+    "transition",
     "date-picker",
     "button"
   ]