@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/theme/css-vars.js

@@ -1,16 +1,12 @@
 function toRgbTriplet(color) {
-    const hex = color.trim().replace(/^#/, "");
-    const full = hex.length === 3
-        ? hex
-            .split("")
-            .map((c) => c + c)
-            .join("")
-        : hex;
-    const r = Number.parseInt(full.slice(0, 2), 16);
-    const g = Number.parseInt(full.slice(2, 4), 16);
-    const b = Number.parseInt(full.slice(4, 6), 16);
-    return `${r} ${g} ${b}`;
+  const hex = color.trim().replace(/^#/, "");
+  const full = hex.length === 3 ? hex.split("").map(c => c + c).join("") : hex;
+  const r = Number.parseInt(full.slice(0, 2), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
+  const b = Number.parseInt(full.slice(4, 6), 16);
+  return `${r} ${g} ${b}`;
 }
+
 /**
  * Deriva las CSS variables (tripletes RGB para `rgb(var(--x) / <alpha>)`) a
  * partir del objeto de tokens tipado. Fuente ÚNICA: las clases (className) y el
@@ -19,68 +15,68 @@ function toRgbTriplet(color) {
  * State / material opacities are emitted as unitless numbers (not RGB).
  */
 export function themeToVars(t) {
-    const rgb = toRgbTriplet;
-    return {
-        "--primary": rgb(t.primary),
-        "--secondary": rgb(t.secondary),
-        "--accent": rgb(t.accent),
-        "--bg-page": rgb(t.bg.page),
-        "--bg-card": rgb(t.bg.card),
-        "--bg-popover": rgb(t.bg.popover),
-        "--bg-muted": rgb(t.bg.muted),
-        "--bg-accent": rgb(t.bg.accent),
-        "--bg-hover": rgb(t.bg.hover),
-        "--bg-disabled": rgb(t.bg.disabled),
-        "--bg-container-lowest": rgb(t.bg.containerLowest),
-        "--bg-container": rgb(t.bg.container),
-        "--bg-container-high": rgb(t.bg.containerHigh),
-        "--text-primary": rgb(t.text.primary),
-        "--text-secondary": rgb(t.text.secondary),
-        "--text-tertiary": rgb(t.text.tertiary),
-        "--text-muted": rgb(t.text.muted),
-        "--text-accent": rgb(t.text.accent),
-        "--text-inverse": rgb(t.text.inverse),
-        "--text-disabled": rgb(t.text.disabled),
-        "--text-on-primary": rgb(t.text.onPrimary),
-        "--text-on-secondary": rgb(t.text.onSecondary),
-        "--text-on-accent": rgb(t.text.onAccent),
-        "--text-on-danger": rgb(t.text.onDanger),
-        "--text-on-success": rgb(t.text.onSuccess),
-        "--icon-primary": rgb(t.icon.primary),
-        "--icon-secondary": rgb(t.icon.secondary),
-        "--icon-tertiary": rgb(t.icon.tertiary),
-        "--icon-inverse": rgb(t.icon.inverse),
-        "--icon-disabled": rgb(t.icon.disabled),
-        "--border-default": rgb(t.border.default),
-        "--border-light": rgb(t.border.light),
-        "--border-strong": rgb(t.border.strong),
-        "--border-focus": rgb(t.border.focus),
-        "--success": rgb(t.success),
-        "--warning": rgb(t.warning),
-        "--danger": rgb(t.danger),
-        "--info": rgb(t.info),
-        "--container-primary": rgb(t.container.primary),
-        "--container-on-primary": rgb(t.container.onPrimary),
-        "--container-secondary": rgb(t.container.secondary),
-        "--container-on-secondary": rgb(t.container.onSecondary),
-        "--container-accent": rgb(t.container.accent),
-        "--container-on-accent": rgb(t.container.onAccent),
-        "--container-success": rgb(t.container.success),
-        "--container-on-success": rgb(t.container.onSuccess),
-        "--container-warning": rgb(t.container.warning),
-        "--container-on-warning": rgb(t.container.onWarning),
-        "--container-danger": rgb(t.container.danger),
-        "--container-on-danger": rgb(t.container.onDanger),
-        "--container-info": rgb(t.container.info),
-        "--container-on-info": rgb(t.container.onInfo),
-        "--state-hover": String(t.state.hover),
-        "--state-press": String(t.state.press),
-        "--state-focus": String(t.state.focus),
-        "--state-drag": String(t.state.drag),
-        "--material-blur": String(t.material.blur),
-        "--material-opacity": String(t.material.opacity),
-        "--material-border-opacity": String(t.material.borderOpacity),
-        "--ring": rgb(t.ring),
-        "--input": rgb(t.input),
-    };
+  const rgb = toRgbTriplet;
+  return {
+    "--primary": rgb(t.primary),
+    "--secondary": rgb(t.secondary),
+    "--accent": rgb(t.accent),
+    "--bg-page": rgb(t.bg.page),
+    "--bg-card": rgb(t.bg.card),
+    "--bg-popover": rgb(t.bg.popover),
+    "--bg-muted": rgb(t.bg.muted),
+    "--bg-accent": rgb(t.bg.accent),
+    "--bg-hover": rgb(t.bg.hover),
+    "--bg-disabled": rgb(t.bg.disabled),
+    "--bg-container-lowest": rgb(t.bg.containerLowest),
+    "--bg-container": rgb(t.bg.container),
+    "--bg-container-high": rgb(t.bg.containerHigh),
+    "--text-primary": rgb(t.text.primary),
+    "--text-secondary": rgb(t.text.secondary),
+    "--text-tertiary": rgb(t.text.tertiary),
+    "--text-muted": rgb(t.text.muted),
+    "--text-accent": rgb(t.text.accent),
+    "--text-inverse": rgb(t.text.inverse),
+    "--text-disabled": rgb(t.text.disabled),
+    "--text-on-primary": rgb(t.text.onPrimary),
+    "--text-on-secondary": rgb(t.text.onSecondary),
+    "--text-on-accent": rgb(t.text.onAccent),
+    "--text-on-danger": rgb(t.text.onDanger),
+    "--text-on-success": rgb(t.text.onSuccess),
+    "--icon-primary": rgb(t.icon.primary),
+    "--icon-secondary": rgb(t.icon.secondary),
+    "--icon-tertiary": rgb(t.icon.tertiary),
+    "--icon-inverse": rgb(t.icon.inverse),
+    "--icon-disabled": rgb(t.icon.disabled),
+    "--border-default": rgb(t.border.default),
+    "--border-light": rgb(t.border.light),
+    "--border-strong": rgb(t.border.strong),
+    "--border-focus": rgb(t.border.focus),
+    "--success": rgb(t.success),
+    "--warning": rgb(t.warning),
+    "--danger": rgb(t.danger),
+    "--info": rgb(t.info),
+    "--container-primary": rgb(t.container.primary),
+    "--container-on-primary": rgb(t.container.onPrimary),
+    "--container-secondary": rgb(t.container.secondary),
+    "--container-on-secondary": rgb(t.container.onSecondary),
+    "--container-accent": rgb(t.container.accent),
+    "--container-on-accent": rgb(t.container.onAccent),
+    "--container-success": rgb(t.container.success),
+    "--container-on-success": rgb(t.container.onSuccess),
+    "--container-warning": rgb(t.container.warning),
+    "--container-on-warning": rgb(t.container.onWarning),
+    "--container-danger": rgb(t.container.danger),
+    "--container-on-danger": rgb(t.container.onDanger),
+    "--container-info": rgb(t.container.info),
+    "--container-on-info": rgb(t.container.onInfo),
+    "--state-hover": String(t.state.hover),
+    "--state-press": String(t.state.press),
+    "--state-focus": String(t.state.focus),
+    "--state-drag": String(t.state.drag),
+    "--material-blur": String(t.material.blur),
+    "--material-opacity": String(t.material.opacity),
+    "--material-border-opacity": String(t.material.borderOpacity),
+    "--ring": rgb(t.ring),
+    "--input": rgb(t.input)
+  };
 }

package/dist/theme/dark.js

@@ -17,108 +17,127 @@ const successC = containerPair(SUCCESS, "dark");
 const warningC = containerPair(WARNING, "dark");
 const dangerC = containerPair(DANGER, "dark");
 const infoC = containerPair(INFO, "dark");
+
 /**
  * Default dark theme. Companion to `DEFAULT_THEME`.
  * Prefer `buildThemeFromBrand({ mode: "dark", ... })` for brand apps.
  */
 export const DEFAULT_DARK_THEME = {
-    name: "default-dark",
-    primary: PRIMARY,
-    secondary: SECONDARY,
-    accent: ACCENT,
-    bg: {
-        page: "#181614",
-        card: "#221F1C",
-        popover: "#221F1C",
-        muted: "#302C28",
-        accent: primaryC.container,
-        hover: "#2A2622",
-        disabled: "#3A342F",
-        inverse: "#FAF9F7",
-        containerLowest: "#141210",
-        container: "#221F1C",
-        containerHigh: "#302C28",
+  name: "default-dark",
+  primary: PRIMARY,
+  secondary: SECONDARY,
+  accent: ACCENT,
+  bg: {
+    page: "#181614",
+    card: "#221F1C",
+    popover: "#221F1C",
+    muted: "#302C28",
+    accent: primaryC.container,
+    hover: "#2A2622",
+    disabled: "#3A342F",
+    inverse: "#FAF9F7",
+    containerLowest: "#141210",
+    container: "#221F1C",
+    containerHigh: "#302C28"
+  },
+  text: {
+    primary: INK,
+    secondary: MUTED,
+    tertiary: "#8A8178",
+    muted: MUTED,
+    accent: PRIMARY,
+    inverse: "#0A0A0A",
+    disabled: "#8A8A8A",
+    onPrimary: resolveOnColor(PRIMARY),
+    onSecondary: resolveOnColor(SECONDARY),
+    onAccent: resolveOnColor(ACCENT),
+    onDanger: resolveOnColor(DANGER),
+    onSuccess: resolveOnColor(SUCCESS)
+  },
+  icon: {
+    primary: INK,
+    secondary: MUTED,
+    tertiary: "#8A8178",
+    inverse: "#0A0A0A",
+    disabled: "#8A8A8A"
+  },
+  border: {
+    default: "#302C28",
+    light: "#221F1C",
+    strong: "#443F38",
+    focus: PRIMARY
+  },
+  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: {
+    hover: 0.1,
+    press: 0.16,
+    focus: 0.14,
+    drag: 0.2
+  },
+  material: {
+    blur: 28,
+    opacity: 0.62,
+    borderOpacity: 0.22
+  },
+  ring: PRIMARY,
+  input: "#302C28",
+  gradient: {
+    primary: ["#1C3765", PRIMARY],
+    accent: [ACCENT, "#DBB055"]
+  },
+  shadow: {
+    sm: {
+      shadowColor: "#000000",
+      shadowOffset: {
+        width: 0,
+        height: 1
+      },
+      shadowOpacity: 0.4,
+      shadowRadius: 3,
+      elevation: 2
     },
-    text: {
-        primary: INK,
-        secondary: MUTED,
-        tertiary: "#8A8178",
-        muted: MUTED,
-        accent: PRIMARY,
-        inverse: "#0A0A0A",
-        disabled: "#8A8A8A",
-        onPrimary: resolveOnColor(PRIMARY),
-        onSecondary: resolveOnColor(SECONDARY),
-        onAccent: resolveOnColor(ACCENT),
-        onDanger: resolveOnColor(DANGER),
-        onSuccess: resolveOnColor(SUCCESS),
-    },
-    icon: {
-        primary: INK,
-        secondary: MUTED,
-        tertiary: "#8A8178",
-        inverse: "#0A0A0A",
-        disabled: "#8A8A8A",
-    },
-    border: {
-        default: "#302C28",
-        light: "#221F1C",
-        strong: "#443F38",
-        focus: PRIMARY,
-    },
-    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: { hover: 0.1, press: 0.16, focus: 0.14, drag: 0.2 },
-    material: { blur: 28, opacity: 0.62, borderOpacity: 0.22 },
-    ring: PRIMARY,
-    input: "#302C28",
-    gradient: {
-        primary: ["#1C3765", PRIMARY],
-        accent: [ACCENT, "#DBB055"],
-    },
-    shadow: {
-        sm: {
-            shadowColor: "#000000",
-            shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.4,
-            shadowRadius: 3,
-            elevation: 2,
-        },
-        md: {
-            shadowColor: "#000000",
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.55,
-            shadowRadius: 8,
-            elevation: 4,
-        },
-        lg: {
-            shadowColor: "#000000",
-            shadowOffset: { width: 0, height: 10 },
-            shadowOpacity: 0.65,
-            shadowRadius: 18,
-            elevation: 7,
-        },
-    },
-    pattern: {
-        mode: "dark-pattern",
-        size: 56,
+    md: {
+      shadowColor: "#000000",
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.55,
+      shadowRadius: 8,
+      elevation: 4
     },
+    lg: {
+      shadowColor: "#000000",
+      shadowOffset: {
+        width: 0,
+        height: 10
+      },
+      shadowOpacity: 0.65,
+      shadowRadius: 18,
+      elevation: 7
+    }
+  },
+  pattern: {
+    mode: "dark-pattern",
+    size: 56
+  }
 };

package/dist/theme/default.js

@@ -17,108 +17,127 @@ const successC = containerPair(SUCCESS, "light");
 const warningC = containerPair(WARNING, "light");
 const dangerC = containerPair(DANGER, "light");
 const infoC = containerPair(INFO, "light");
+
 /**
  * Default light theme. Sample values — not the framework identity.
  * Prefer `buildThemeFromBrand` or `extendTheme` at app boot.
  */
 export const DEFAULT_THEME = {
-    name: "default-light",
-    primary: PRIMARY,
-    secondary: SECONDARY,
-    accent: ACCENT,
-    bg: {
-        page: "#FAF9F7",
-        card: "#FFFFFF",
-        popover: "#FFFFFF",
-        muted: "#F3F0EA",
-        accent: primaryC.container,
-        hover: "#EBE6DE",
-        disabled: "#E4DFD7",
-        inverse: "#181614",
-        containerLowest: "#FAF9F7",
-        container: "#F3F0EA",
-        containerHigh: "#E4DFD7",
+  name: "default-light",
+  primary: PRIMARY,
+  secondary: SECONDARY,
+  accent: ACCENT,
+  bg: {
+    page: "#FAF9F7",
+    card: "#FFFFFF",
+    popover: "#FFFFFF",
+    muted: "#F3F0EA",
+    accent: primaryC.container,
+    hover: "#EBE6DE",
+    disabled: "#E4DFD7",
+    inverse: "#181614",
+    containerLowest: "#FAF9F7",
+    container: "#F3F0EA",
+    containerHigh: "#E4DFD7"
+  },
+  text: {
+    primary: INK,
+    secondary: MUTED,
+    tertiary: "#A39B90",
+    muted: MUTED,
+    accent: PRIMARY,
+    inverse: "#FFFFFF",
+    disabled: "#A39B90",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#FFFFFF",
+    onAccent: "#1A1714",
+    onDanger: resolveOnColor(DANGER),
+    onSuccess: resolveOnColor(SUCCESS)
+  },
+  icon: {
+    primary: INK,
+    secondary: MUTED,
+    tertiary: "#A39B90",
+    inverse: "#FFFFFF",
+    disabled: "#A39B90"
+  },
+  border: {
+    default: "#E4DFD7",
+    light: "#F3F0EA",
+    strong: "#D5CEC2",
+    focus: PRIMARY
+  },
+  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: {
+    hover: 0.08,
+    press: 0.12,
+    focus: 0.12,
+    drag: 0.16
+  },
+  material: {
+    blur: 24,
+    opacity: 0.78,
+    borderOpacity: 0.18
+  },
+  ring: PRIMARY,
+  input: "#E4DFD7",
+  gradient: {
+    primary: [SECONDARY, PRIMARY],
+    accent: ["#B88A2E", ACCENT]
+  },
+  shadow: {
+    sm: {
+      shadowColor: "#000000",
+      shadowOffset: {
+        width: 0,
+        height: 1
+      },
+      shadowOpacity: 0.06,
+      shadowRadius: 2,
+      elevation: 1
     },
-    text: {
-        primary: INK,
-        secondary: MUTED,
-        tertiary: "#A39B90",
-        muted: MUTED,
-        accent: PRIMARY,
-        inverse: "#FFFFFF",
-        disabled: "#A39B90",
-        onPrimary: "#FFFFFF",
-        onSecondary: "#FFFFFF",
-        onAccent: "#1A1714",
-        onDanger: resolveOnColor(DANGER),
-        onSuccess: resolveOnColor(SUCCESS),
-    },
-    icon: {
-        primary: INK,
-        secondary: MUTED,
-        tertiary: "#A39B90",
-        inverse: "#FFFFFF",
-        disabled: "#A39B90",
-    },
-    border: {
-        default: "#E4DFD7",
-        light: "#F3F0EA",
-        strong: "#D5CEC2",
-        focus: PRIMARY,
-    },
-    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: { hover: 0.08, press: 0.12, focus: 0.12, drag: 0.16 },
-    material: { blur: 24, opacity: 0.78, borderOpacity: 0.18 },
-    ring: PRIMARY,
-    input: "#E4DFD7",
-    gradient: {
-        primary: [SECONDARY, PRIMARY],
-        accent: ["#B88A2E", ACCENT],
-    },
-    shadow: {
-        sm: {
-            shadowColor: "#000000",
-            shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.06,
-            shadowRadius: 2,
-            elevation: 1,
-        },
-        md: {
-            shadowColor: "#000000",
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.1,
-            shadowRadius: 6,
-            elevation: 3,
-        },
-        lg: {
-            shadowColor: "#000000",
-            shadowOffset: { width: 0, height: 10 },
-            shadowOpacity: 0.14,
-            shadowRadius: 15,
-            elevation: 5,
-        },
-    },
-    pattern: {
-        mode: "light-pattern",
-        size: 56,
+    md: {
+      shadowColor: "#000000",
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 6,
+      elevation: 3
     },
+    lg: {
+      shadowColor: "#000000",
+      shadowOffset: {
+        width: 0,
+        height: 10
+      },
+      shadowOpacity: 0.14,
+      shadowRadius: 15,
+      elevation: 5
+    }
+  },
+  pattern: {
+    mode: "light-pattern",
+    size: 56
+  }
 };

package/dist/theme/define.js

@@ -1,17 +1,19 @@
 import { DEFAULT_THEME } from "./default.js";
 function isPlainObject(v) {
-    return typeof v === "object" && v !== null && !Array.isArray(v);
+  return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function deepMerge(base, override) {
-    const out = { ...base };
-    for (const key of Object.keys(override)) {
-        const o = override[key];
-        const b = base[key];
-        out[key] =
-            isPlainObject(o) && isPlainObject(b) ? deepMerge(b, o) : o;
-    }
-    return out;
+  const out = {
+    ...base
+  };
+  for (const key of Object.keys(override)) {
+    const o = override[key];
+    const b = base[key];
+    out[key] = isPlainObject(o) && isPlainObject(b) ? deepMerge(b, o) : o;
+  }
+  return out;
 }
+
 /**
  * Defines a complete, typed theme (powerful API: the framework parametrizes
  * every token explicitly).
@@ -20,18 +22,20 @@ function deepMerge(base, override) {
  * `@sincpro/mobile-ui/theme` so light and dark brand fills both stay WCAG AA.
  */
 export function defineTheme(tokens) {
-    return tokens;
+  return tokens;
 }
+
 /**
  * Merges a base theme with partial overrides (typed deep merge). Primitive
  * to build simpler APIs on top (e.g. the core's createTheme).
  */
 export function mergeTheme(base, overrides = {}) {
-    return deepMerge(base, overrides);
+  return deepMerge(base, overrides);
 }
+
 /**
  * Default theme + partial overrides in a single step.
  */
 export function extendTheme(overrides = {}) {
-    return deepMerge(DEFAULT_THEME, overrides);
+  return deepMerge(DEFAULT_THEME, overrides);
 }

package/dist/theme/index.d.ts

@@ -11,4 +11,5 @@ export { theme } from "./theme.js";
 export type { PatternMode, ShadowStyle, ThemeTokens } from "./types.js";
 export { appliedTextStyle, configureFonts, fontFamilies, type FontRole, resetFonts, useAppFonts, variantFontRole, } from "./typography.js";
 export { useTheme } from "./useTheme.js";
+export { useThemeVars } from "./useThemeVars.js";
 export { validateTheme } from "./validate.js";