@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/theme/build.js

@@ -3,21 +3,40 @@ import { resolveOnColor } from "./contrast.js";
 import { DEFAULT_DARK_THEME } from "./dark.js";
 import { DEFAULT_THEME } from "./default.js";
 import { mergeTheme } from "./define.js";
-const STATE_LIGHT = { hover: 0.08, press: 0.12, focus: 0.12, drag: 0.16 };
-const STATE_DARK = { hover: 0.1, press: 0.16, focus: 0.14, drag: 0.2 };
-const MATERIAL_LIGHT = { blur: 24, opacity: 0.78, borderOpacity: 0.18 };
-const MATERIAL_DARK = { blur: 28, opacity: 0.62, borderOpacity: 0.22 };
+const STATE_LIGHT = {
+  hover: 0.08,
+  press: 0.12,
+  focus: 0.12,
+  drag: 0.16
+};
+const STATE_DARK = {
+  hover: 0.1,
+  press: 0.16,
+  focus: 0.14,
+  drag: 0.2
+};
+const MATERIAL_LIGHT = {
+  blur: 24,
+  opacity: 0.78,
+  borderOpacity: 0.18
+};
+const MATERIAL_DARK = {
+  blur: 28,
+  opacity: 0.62,
+  borderOpacity: 0.22
+};
 const SUCCESS = "#2F6B3C";
 const WARNING = "#7E5E12";
 const DANGER = "#9B3B30";
 const INFO = "#0F5C6E";
 function deriveBrandText(brand, mode) {
-    if (mode === "light") {
-        return shiftLightness(brand, -0.28);
-    }
-    // Dark surfaces need a light brand text — mix toward white until AA-friendly.
-    return mixHex(brand, "#FFFFFF", 0.62);
+  if (mode === "light") {
+    return shiftLightness(brand, -0.28);
+  }
+  // Dark surfaces need a light brand text — mix toward white until AA-friendly.
+  return mixHex(brand, "#FFFFFF", 0.62);
 }
+
 /**
  * Builds a complete `ThemeTokens` from a brand seed — Material-style derivation
  * for mobile apps that rebrand without hand-authoring every token.
@@ -33,82 +52,94 @@ function deriveBrandText(brand, mode) {
  * }));
  */
 export function buildThemeFromBrand(opts) {
-    const { name, brand, mode } = opts;
-    const base = mode === "light" ? DEFAULT_THEME : DEFAULT_DARK_THEME;
-    const secondary = opts.secondary ?? shiftLightness(brand, mode === "light" ? -0.18 : -0.08);
-    const accent = opts.accent ?? brand;
-    const brandText = opts.brandText ?? deriveBrandText(brand, mode);
-    const primaryC = containerPair(brand, mode);
-    const secondaryC = containerPair(secondary, mode);
-    const accentC = containerPair(accent, mode);
-    const successC = containerPair(SUCCESS, mode);
-    const warningC = containerPair(WARNING, mode);
-    const dangerC = containerPair(DANGER, mode);
-    const infoC = containerPair(INFO, mode);
-    const page = mode === "light" ? mixHex(brand, "#FFFFFF", 0.96) : "#0C0C0C";
-    const card = mode === "light" ? "#FFFFFF" : "#161616";
-    const muted = mode === "light" ? mixHex(brand, "#FFFFFF", 0.92) : mixHex(brand, "#000000", 0.88);
-    const bgAccent = primaryC.container;
-    const hover = mode === "light" ? mixHex(brand, "#FFFFFF", 0.9) : mixHex(brand, "#000000", 0.82);
-    const disabled = mode === "light" ? mixHex(brand, "#FFFFFF", 0.86) : mixHex("#FFFFFF", "#000000", 0.85);
-    return mergeTheme(base, {
-        name,
-        primary: brand,
-        secondary,
-        accent,
-        bg: {
-            page,
-            card,
-            popover: card,
-            muted,
-            accent: bgAccent,
-            hover,
-            disabled,
-            inverse: mode === "light" ? "#0C0C0C" : mixHex(brand, "#FFFFFF", 0.94),
-            containerLowest: mode === "light" ? page : "#0A0A0A",
-            container: muted,
-            containerHigh: mode === "light" ? mixHex(brand, "#FFFFFF", 0.84) : "#1E1E1E",
-        },
-        text: {
-            accent: brandText,
-            onPrimary: resolveOnColor(brand),
-            onSecondary: resolveOnColor(secondary),
-            onAccent: resolveOnColor(accent),
-            onDanger: resolveOnColor(DANGER),
-            onSuccess: resolveOnColor(SUCCESS),
-        },
-        border: {
-            focus: brandText,
-            default: mode === "light" ? mixHex(brand, "#FFFFFF", 0.82) : "#262626",
-            light: muted,
-            strong: mode === "light" ? mixHex(brand, "#000000", 0.25) : "#3A3A3A",
-        },
-        ring: brandText,
-        success: SUCCESS,
-        warning: WARNING,
-        danger: DANGER,
-        info: INFO,
-        container: {
-            primary: primaryC.container,
-            onPrimary: primaryC.onContainer,
-            secondary: secondaryC.container,
-            onSecondary: secondaryC.onContainer,
-            accent: accentC.container,
-            onAccent: accentC.onContainer,
-            success: successC.container,
-            onSuccess: successC.onContainer,
-            warning: warningC.container,
-            onWarning: warningC.onContainer,
-            danger: dangerC.container,
-            onDanger: dangerC.onContainer,
-            info: infoC.container,
-            onInfo: infoC.onContainer,
-        },
-        state: mode === "light" ? { ...STATE_LIGHT } : { ...STATE_DARK },
-        material: mode === "light" ? { ...MATERIAL_LIGHT } : { ...MATERIAL_DARK },
-        gradient: {
-            primary: [shiftLightness(brand, 0.12), brand],
-            accent: [brand, secondary],
-        },
-    });
+  const {
+    name,
+    brand,
+    mode
+  } = opts;
+  const base = mode === "light" ? DEFAULT_THEME : DEFAULT_DARK_THEME;
+  const secondary = opts.secondary ?? shiftLightness(brand, mode === "light" ? -0.18 : -0.08);
+  const accent = opts.accent ?? brand;
+  const brandText = opts.brandText ?? deriveBrandText(brand, mode);
+  const primaryC = containerPair(brand, mode);
+  const secondaryC = containerPair(secondary, mode);
+  const accentC = containerPair(accent, mode);
+  const successC = containerPair(SUCCESS, mode);
+  const warningC = containerPair(WARNING, mode);
+  const dangerC = containerPair(DANGER, mode);
+  const infoC = containerPair(INFO, mode);
+  const page = mode === "light" ? mixHex(brand, "#FFFFFF", 0.96) : "#0C0C0C";
+  const card = mode === "light" ? "#FFFFFF" : "#161616";
+  const muted = mode === "light" ? mixHex(brand, "#FFFFFF", 0.92) : mixHex(brand, "#000000", 0.88);
+  const bgAccent = primaryC.container;
+  const hover = mode === "light" ? mixHex(brand, "#FFFFFF", 0.9) : mixHex(brand, "#000000", 0.82);
+  const disabled = mode === "light" ? mixHex(brand, "#FFFFFF", 0.86) : mixHex("#FFFFFF", "#000000", 0.85);
+  return mergeTheme(base, {
+    name,
+    primary: brand,
+    secondary,
+    accent,
+    bg: {
+      page,
+      card,
+      popover: card,
+      muted,
+      accent: bgAccent,
+      hover,
+      disabled,
+      inverse: mode === "light" ? "#0C0C0C" : mixHex(brand, "#FFFFFF", 0.94),
+      containerLowest: mode === "light" ? page : "#0A0A0A",
+      container: muted,
+      containerHigh: mode === "light" ? mixHex(brand, "#FFFFFF", 0.84) : "#1E1E1E"
+    },
+    text: {
+      accent: brandText,
+      onPrimary: resolveOnColor(brand),
+      onSecondary: resolveOnColor(secondary),
+      onAccent: resolveOnColor(accent),
+      onDanger: resolveOnColor(DANGER),
+      onSuccess: resolveOnColor(SUCCESS)
+    },
+    border: {
+      focus: brandText,
+      default: mode === "light" ? mixHex(brand, "#FFFFFF", 0.82) : "#262626",
+      light: muted,
+      strong: mode === "light" ? mixHex(brand, "#000000", 0.25) : "#3A3A3A"
+    },
+    ring: brandText,
+    success: SUCCESS,
+    warning: WARNING,
+    danger: DANGER,
+    info: INFO,
+    container: {
+      primary: primaryC.container,
+      onPrimary: primaryC.onContainer,
+      secondary: secondaryC.container,
+      onSecondary: secondaryC.onContainer,
+      accent: accentC.container,
+      onAccent: accentC.onContainer,
+      success: successC.container,
+      onSuccess: successC.onContainer,
+      warning: warningC.container,
+      onWarning: warningC.onContainer,
+      danger: dangerC.container,
+      onDanger: dangerC.onContainer,
+      info: infoC.container,
+      onInfo: infoC.onContainer
+    },
+    state: mode === "light" ? {
+      ...STATE_LIGHT
+    } : {
+      ...STATE_DARK
+    },
+    material: mode === "light" ? {
+      ...MATERIAL_LIGHT
+    } : {
+      ...MATERIAL_DARK
+    },
+    gradient: {
+      primary: [shiftLightness(brand, 0.12), brand],
+      accent: [brand, secondary]
+    }
+  });
 }

package/dist/theme/color.js

@@ -2,108 +2,108 @@
  * Color primitives for theme derivation (HSL). Used by buildThemeFromBrand
  * and container/tonal helpers — keeps brand math in one place.
  */
+
 export function hexToRgb(hex) {
-    const h = hex.trim().replace(/^#/, "");
-    const full = h.length === 3
-        ? h
-            .split("")
-            .map((c) => c + c)
-            .join("")
-        : h;
-    return {
-        r: Number.parseInt(full.slice(0, 2), 16),
-        g: Number.parseInt(full.slice(2, 4), 16),
-        b: Number.parseInt(full.slice(4, 6), 16),
-    };
+  const h = hex.trim().replace(/^#/, "");
+  const full = h.length === 3 ? h.split("").map(c => c + c).join("") : h;
+  return {
+    r: Number.parseInt(full.slice(0, 2), 16),
+    g: Number.parseInt(full.slice(2, 4), 16),
+    b: Number.parseInt(full.slice(4, 6), 16)
+  };
 }
 export function rgbToHex(r, g, b) {
-    const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
-    return ("#" +
-        [clamp(r), clamp(g), clamp(b)]
-            .map((n) => n.toString(16).padStart(2, "0"))
-            .join("")
-            .toUpperCase());
+  const clamp = n => Math.max(0, Math.min(255, Math.round(n)));
+  return "#" + [clamp(r), clamp(g), clamp(b)].map(n => n.toString(16).padStart(2, "0")).join("").toUpperCase();
 }
 export function hexToHsl(hex) {
-    const { r, g, b } = hexToRgb(hex);
-    const rn = r / 255;
-    const gn = g / 255;
-    const bn = b / 255;
-    const max = Math.max(rn, gn, bn);
-    const min = Math.min(rn, gn, bn);
-    const l = (max + min) / 2;
-    if (max === min)
-        return { h: 0, s: 0, l };
-    const d = max - min;
-    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    let h = 0;
-    if (max === rn)
-        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
-    else if (max === gn)
-        h = ((bn - rn) / d + 2) / 6;
-    else
-        h = ((rn - gn) / d + 4) / 6;
-    return { h: h * 360, s, l };
+  const {
+    r,
+    g,
+    b
+  } = hexToRgb(hex);
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return {
+    h: 0,
+    s: 0,
+    l
+  };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;else if (max === gn) h = ((bn - rn) / d + 2) / 6;else h = ((rn - gn) / d + 4) / 6;
+  return {
+    h: h * 360,
+    s,
+    l
+  };
 }
-export function hslToHex({ h, s, l }) {
-    const hh = ((h % 360) + 360) % 360;
-    const c = (1 - Math.abs(2 * l - 1)) * s;
-    const x = c * (1 - Math.abs(((hh / 60) % 2) - 1));
-    const m = l - c / 2;
-    let rn = 0;
-    let gn = 0;
-    let bn = 0;
-    if (hh < 60) {
-        rn = c;
-        gn = x;
-    }
-    else if (hh < 120) {
-        rn = x;
-        gn = c;
-    }
-    else if (hh < 180) {
-        gn = c;
-        bn = x;
-    }
-    else if (hh < 240) {
-        gn = x;
-        bn = c;
-    }
-    else if (hh < 300) {
-        rn = x;
-        bn = c;
-    }
-    else {
-        rn = c;
-        bn = x;
-    }
-    return rgbToHex((rn + m) * 255, (gn + m) * 255, (bn + m) * 255);
+export function hslToHex({
+  h,
+  s,
+  l
+}) {
+  const hh = (h % 360 + 360) % 360;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(hh / 60 % 2 - 1));
+  const m = l - c / 2;
+  let rn = 0;
+  let gn = 0;
+  let bn = 0;
+  if (hh < 60) {
+    rn = c;
+    gn = x;
+  } else if (hh < 120) {
+    rn = x;
+    gn = c;
+  } else if (hh < 180) {
+    gn = c;
+    bn = x;
+  } else if (hh < 240) {
+    gn = x;
+    bn = c;
+  } else if (hh < 300) {
+    rn = x;
+    bn = c;
+  } else {
+    rn = c;
+    bn = x;
+  }
+  return rgbToHex((rn + m) * 255, (gn + m) * 255, (bn + m) * 255);
 }
+
 /** Mix two hex colors. `t=0` → a, `t=1` → b. */
 export function mixHex(a, b, t) {
-    const A = hexToRgb(a);
-    const B = hexToRgb(b);
-    const u = Math.max(0, Math.min(1, t));
-    return rgbToHex(A.r + (B.r - A.r) * u, A.g + (B.g - A.g) * u, A.b + (B.b - A.b) * u);
+  const A = hexToRgb(a);
+  const B = hexToRgb(b);
+  const u = Math.max(0, Math.min(1, t));
+  return rgbToHex(A.r + (B.r - A.r) * u, A.g + (B.g - A.g) * u, A.b + (B.b - A.b) * u);
 }
+
 /** Shift lightness in HSL. delta in [-1, 1] absolute L change. */
 export function shiftLightness(hex, delta) {
-    const hsl = hexToHsl(hex);
-    return hslToHex({
-        ...hsl,
-        l: Math.max(0, Math.min(1, hsl.l + delta)),
-    });
+  const hsl = hexToHsl(hex);
+  return hslToHex({
+    ...hsl,
+    l: Math.max(0, Math.min(1, hsl.l + delta))
+  });
 }
+
 /** Soft container fill + on-container ink (M3-style tonal pair). */
 export function containerPair(seed, mode) {
-    if (mode === "light") {
-        return {
-            container: mixHex(seed, "#FFFFFF", 0.88),
-            onContainer: shiftLightness(seed, -0.22),
-        };
-    }
+  if (mode === "light") {
     return {
-        container: mixHex(seed, "#000000", 0.72),
-        onContainer: mixHex(seed, "#FFFFFF", 0.45),
+      container: mixHex(seed, "#FFFFFF", 0.88),
+      onContainer: shiftLightness(seed, -0.22)
     };
+  }
+  return {
+    container: mixHex(seed, "#000000", 0.72),
+    onContainer: mixHex(seed, "#FFFFFF", 0.45)
+  };
 }

package/dist/theme/components/ThemedActivityIndicator.d.ts

@@ -1,21 +1,8 @@
 import type { ActivityIndicatorProps } from "react-native";
-/**
- * ============================================================================
- * THEMED ACTIVITY INDICATOR
- * ============================================================================
- *
- * Wrapper de ActivityIndicator que usa color primary.
- * NOTA: Como no podemos usar hooks, usa el color hardcoded de Distribution.
- * Para cambiar color, pasar prop color directamente.
- *
- * USO:
- * ```tsx
- * <ThemedActivityIndicator />
- * <ThemedActivityIndicator size="large" color="#8B5CF6" />
- * ```
- */
 interface ThemedActivityIndicatorProps extends Omit<ActivityIndicatorProps, "color"> {
+    /** Defaults to the theme `primary`. */
     color?: string;
 }
+/** ActivityIndicator in the theme `primary` unless a color is given. */
 export declare function ThemedActivityIndicator({ color, ...props }: ThemedActivityIndicatorProps): import("react").JSX.Element;
 export {};

package/dist/theme/components/ThemedActivityIndicator.js

@@ -1,5 +1,37 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { useTheme } from "../useTheme.js";
 import { ActivityIndicator as RNActivityIndicator } from "react-native";
-export function ThemedActivityIndicator({ color = "#0075FF", ...props }) {
-    return _jsx(RNActivityIndicator, { color: color, ...props });
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+/** ActivityIndicator in the theme `primary` unless a color is given. */
+export function ThemedActivityIndicator(t0) {
+  const $ = _c(6);
+  let color;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      color,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = color;
+    $[2] = props;
+  } else {
+    color = $[1];
+    props = $[2];
+  }
+  const theme = useTheme();
+  const t1 = color ?? theme.primary;
+  let t2;
+  if ($[3] !== props || $[4] !== t1) {
+    t2 = _jsx(RNActivityIndicator, {
+      color: t1,
+      ...props
+    });
+    $[3] = props;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 }

package/dist/theme/components/index.js

@@ -6,4 +6,5 @@
  * Components that need access to theme tokens via hook.
  * Estos son el 1% de casos donde className no es suficiente.
  */
+
 export { ThemedActivityIndicator } from "./ThemedActivityIndicator.js";

package/dist/theme/contrast.js

@@ -2,33 +2,34 @@
  * WCAG 2.1 contrast helpers for theme authors.
  * Used by `validateTheme` and by consumers building brand palettes.
  */
+
 export function parseHex(hex) {
-    const h = hex.trim().replace(/^#/, "");
-    const full = h.length === 3
-        ? h
-            .split("")
-            .map((c) => c + c)
-            .join("")
-        : h;
-    return {
-        r: Number.parseInt(full.slice(0, 2), 16),
-        g: Number.parseInt(full.slice(2, 4), 16),
-        b: Number.parseInt(full.slice(4, 6), 16),
-    };
+  const h = hex.trim().replace(/^#/, "");
+  const full = h.length === 3 ? h.split("").map(c => c + c).join("") : h;
+  return {
+    r: Number.parseInt(full.slice(0, 2), 16),
+    g: Number.parseInt(full.slice(2, 4), 16),
+    b: Number.parseInt(full.slice(4, 6), 16)
+  };
 }
 export function relativeLuminance(hex) {
-    const { r, g, b } = parseHex(hex);
-    const norm = (c) => {
-        const s = c / 255;
-        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-    };
-    return 0.2126 * norm(r) + 0.7152 * norm(g) + 0.0722 * norm(b);
+  const {
+    r,
+    g,
+    b
+  } = parseHex(hex);
+  const norm = c => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * norm(r) + 0.7152 * norm(g) + 0.0722 * norm(b);
 }
+
 /** Contrast ratio between two sRGB hex colors (WCAG 2.1). */
 export function contrastRatio(fg, bg) {
-    const L1 = relativeLuminance(fg);
-    const L2 = relativeLuminance(bg);
-    return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+  const L1 = relativeLuminance(fg);
+  const L2 = relativeLuminance(bg);
+  return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
 }
 const DEFAULT_ON_LIGHT = "#FFFFFF";
 const DEFAULT_ON_DARK = "#0A0A0A";
@@ -41,17 +42,15 @@ const DEFAULT_ON_DARK = "#0A0A0A";
  * text: { onPrimary: resolveOnColor("#0B1F4A") } // → #FFFFFF
  */
 export function resolveOnColor(fill, options = {}) {
-    const light = options.light ?? DEFAULT_ON_LIGHT;
-    const dark = options.dark ?? DEFAULT_ON_DARK;
-    const min = options.minRatio ?? 4.5;
-    const withLight = contrastRatio(light, fill);
-    const withDark = contrastRatio(dark, fill);
-    if (withLight >= min && withDark >= min) {
-        return withLight >= withDark ? light : dark;
-    }
-    if (withLight >= min)
-        return light;
-    if (withDark >= min)
-        return dark;
+  const light = options.light ?? DEFAULT_ON_LIGHT;
+  const dark = options.dark ?? DEFAULT_ON_DARK;
+  const min = options.minRatio ?? 4.5;
+  const withLight = contrastRatio(light, fill);
+  const withDark = contrastRatio(dark, fill);
+  if (withLight >= min && withDark >= min) {
     return withLight >= withDark ? light : dark;
+  }
+  if (withLight >= min) return light;
+  if (withDark >= min) return dark;
+  return withLight >= withDark ? light : dark;
 }