@sincpro/mobile-ui 0.1.2 → 0.1.4

package/lib/theme/components/index.js

@@ -0,0 +1,9 @@
+/**
+ * ============================================================================
+ * THEMED COMPONENTS - Barrel Export
+ * ============================================================================
+ *
+ * Componentes que necesitan acceso a tokens del theme vía hook.
+ * Estos son el 1% de casos donde className no es suficiente.
+ */
+export { ThemedActivityIndicator } from "../../theme/components/ThemedActivityIndicator";

package/lib/theme/css-vars.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeTokens } from "../theme/types";
+/**
+ * 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
+ * objeto JS (style) salen del mismo `ThemeTokens`, sin posibilidad de divergir.
+ */
+export declare function themeToVars(t: ThemeTokens): Record<string, string>;

package/lib/theme/css-vars.js

@@ -0,0 +1,64 @@
+function toRgbTriplet(color) {
+    const hex = color.trim().replace(/^#/, "");
+    const full = hex.length === 3
+        ? hex
+            .split("")
+            .map((c) => c + c)
+            .join("")
+        : hex;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = 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
+ * objeto JS (style) salen del mismo `ThemeTokens`, sin posibilidad de divergir.
+ */
+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),
+        "--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),
+        "--success-light": rgb(t.successLight),
+        "--warning-light": rgb(t.warningLight),
+        "--danger-light": rgb(t.dangerLight),
+        "--info-light": rgb(t.infoLight),
+        "--ring": rgb(t.ring),
+        "--input": rgb(t.input),
+    };
+}

package/lib/theme/default.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeTokens } from "../theme/types";
+export declare const DEFAULT_THEME: ThemeTokens;

package/lib/theme/default.js

@@ -0,0 +1,79 @@
+export const DEFAULT_THEME = {
+    name: "default",
+    primary: "#2563EB",
+    secondary: "#64748B",
+    accent: "#F59E0B",
+    bg: {
+        page: "#F9FAFB",
+        card: "#FFFFFF",
+        popover: "#FFFFFF",
+        muted: "#F3F4F6",
+        accent: "#EFF6FF",
+        hover: "#F3F4F6",
+        disabled: "#F3F4F6",
+    },
+    text: {
+        primary: "#0F172A",
+        secondary: "#475569",
+        tertiary: "#94A3B8",
+        muted: "#64748B",
+        accent: "#1E40AF",
+        inverse: "#FFFFFF",
+        disabled: "#94A3B8",
+        onPrimary: "#FFFFFF",
+        onSecondary: "#FFFFFF",
+        onAccent: "#FFFFFF",
+        onDanger: "#FFFFFF",
+        onSuccess: "#FFFFFF",
+    },
+    icon: {
+        primary: "#0F172A",
+        secondary: "#64748B",
+        tertiary: "#94A3B8",
+        inverse: "#FFFFFF",
+        disabled: "#CBD5E1",
+    },
+    border: {
+        default: "#E5E7EB",
+        light: "#F3F4F6",
+        strong: "#D1D5DB",
+        focus: "#2563EB",
+    },
+    success: "#16A34A",
+    warning: "#F59E0B",
+    danger: "#DC2626",
+    info: "#2563EB",
+    successLight: "#DCFCE7",
+    warningLight: "#FEF3C7",
+    dangerLight: "#FEE2E2",
+    infoLight: "#DBEAFE",
+    ring: "#2563EB",
+    input: "#E5E7EB",
+    gradient: {
+        primary: ["#2563EB", "#1E40AF"],
+        accent: ["#F59E0B", "#D97706"],
+    },
+    shadow: {
+        sm: {
+            shadowColor: "#000000",
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.05,
+            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.1,
+            shadowRadius: 15,
+            elevation: 5,
+        },
+    },
+};

package/lib/theme/define.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeTokens } from "../theme/types";
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends readonly unknown[] ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+/**
+ * Define un theme completo y tipado (API potente: el framework parametriza
+ * todos los tokens explícitamente).
+ */
+export declare function defineTheme(tokens: ThemeTokens): ThemeTokens;
+/**
+ * Combina un theme base con overrides parciales (deep merge tipado). Primitiva
+ * para construir APIs simples encima (ej. createTheme del core).
+ */
+export declare function mergeTheme(base: ThemeTokens, overrides?: DeepPartial<ThemeTokens>): ThemeTokens;
+/**
+ * Theme por defecto + overrides parciales en un solo paso.
+ */
+export declare function extendTheme(overrides?: DeepPartial<ThemeTokens>): ThemeTokens;

package/lib/theme/define.js

@@ -0,0 +1,34 @@
+import { DEFAULT_THEME } from "../theme/default";
+function isPlainObject(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;
+}
+/**
+ * Define un theme completo y tipado (API potente: el framework parametriza
+ * todos los tokens explícitamente).
+ */
+export function defineTheme(tokens) {
+    return tokens;
+}
+/**
+ * Combina un theme base con overrides parciales (deep merge tipado). Primitiva
+ * para construir APIs simples encima (ej. createTheme del core).
+ */
+export function mergeTheme(base, overrides = {}) {
+    return deepMerge(base, overrides);
+}
+/**
+ * Theme por defecto + overrides parciales en un solo paso.
+ */
+export function extendTheme(overrides = {}) {
+    return deepMerge(DEFAULT_THEME, overrides);
+}

package/lib/theme/index.d.ts

@@ -0,0 +1,7 @@
+export { getActiveTheme, setActiveTheme } from "../theme/active";
+export { ThemedActivityIndicator } from "../theme/components";
+export { themeToVars } from "../theme/css-vars";
+export { DEFAULT_THEME } from "../theme/default";
+export { type DeepPartial, defineTheme, extendTheme, mergeTheme, } from "../theme/define";
+export { theme } from "../theme/theme";
+export type { ShadowStyle, ThemeTokens } from "../theme/types";

package/lib/theme/index.js

@@ -0,0 +1,6 @@
+export { getActiveTheme, setActiveTheme } from "../theme/active";
+export { ThemedActivityIndicator } from "../theme/components";
+export { themeToVars } from "../theme/css-vars";
+export { DEFAULT_THEME } from "../theme/default";
+export { defineTheme, extendTheme, mergeTheme, } from "../theme/define";
+export { theme } from "../theme/theme";

package/lib/theme/theme.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ============================================================================
+ * THEME CONSTANT - Acceso directo al theme activo
+ * ============================================================================
+ *
+ * Constante que resuelve automáticamente el theme según el dominio activo.
+ * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
+ *
+ * @example
+ * import { theme } from "../theme";
+ * const color = theme.primary;
+ */
+export declare const theme: import("./types").ThemeTokens;

package/lib/theme/theme.js

@@ -0,0 +1,14 @@
+/**
+ * ============================================================================
+ * THEME CONSTANT - Acceso directo al theme activo
+ * ============================================================================
+ *
+ * Constante que resuelve automáticamente el theme según el dominio activo.
+ * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
+ *
+ * @example
+ * import { theme } from "../theme";
+ * const color = theme.primary;
+ */
+import { getActiveTheme } from "../theme/active";
+export const theme = getActiveTheme();

package/lib/theme/tw.d.ts

@@ -0,0 +1,10 @@
+import { type ClassValue } from "clsx";
+/**
+ * Utility function to merge Tailwind classes with proper precedence.
+ * Uses clsx for conditional classes and tailwind-merge to resolve conflicts.
+ *
+ * @example
+ * cn('px-4 py-2', isActive && 'bg-primary', className)
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+export { tv, type VariantProps } from "tailwind-variants";

package/lib/theme/tw.js

@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Utility function to merge Tailwind classes with proper precedence.
+ * Uses clsx for conditional classes and tailwind-merge to resolve conflicts.
+ *
+ * @example
+ * cn('px-4 py-2', isActive && 'bg-primary', className)
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+// Re-export tailwind-variants for component variants
+export { tv } from "tailwind-variants";

package/lib/theme/types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * ============================================================================
+ * THEME SYSTEM - SIMPLE & SEMANTIC
+ * ============================================================================
+ *
+ * Sistema simplificado de theming sin hooks ni context.
+ * Importación directa de tokens según dominio activo.
+ */
+export interface ShadowStyle {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+export interface ThemeTokens {
+    /** Nombre del theme */
+    name: string;
+    /** Color primario - botones principales, links, estados activos */
+    primary: string;
+    /** Color secundario - botones secundarios, elementos de bajo perfil (gris) */
+    secondary: string;
+    /** Color de acento - highlights, badges importantes, CTAs secundarios (naranja/indigo) */
+    accent: string;
+    /** Fondos */
+    bg: {
+        page: string;
+        card: string;
+        popover: string;
+        muted: string;
+        accent: string;
+        hover: string;
+        disabled: string;
+    };
+    /** Textos */
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        muted: string;
+        accent: string;
+        inverse: string;
+        disabled: string;
+        onPrimary: string;
+        onSecondary: string;
+        onAccent: string;
+        onDanger: string;
+        onSuccess: string;
+    };
+    /** Iconos */
+    icon: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        inverse: string;
+        disabled: string;
+    };
+    /** Bordes */
+    border: {
+        default: string;
+        light: string;
+        strong: string;
+        focus: string;
+    };
+    /** Estados semánticos */
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    /** Estados semánticos - Versiones claras */
+    successLight: string;
+    warningLight: string;
+    dangerLight: string;
+    infoLight: string;
+    /** Focus & Input */
+    ring: string;
+    input: string;
+    /** Gradientes (para LinearGradient) */
+    gradient: {
+        primary: readonly [string, string];
+        accent: readonly [string, string];
+    };
+    /** Sombras (React Native) */
+    shadow: {
+        sm: ShadowStyle;
+        md: ShadowStyle;
+        lg: ShadowStyle;
+    };
+}

package/lib/theme/types.js

@@ -0,0 +1,9 @@
+/**
+ * ============================================================================
+ * THEME SYSTEM - SIMPLE & SEMANTIC
+ * ============================================================================
+ *
+ * Sistema simplificado de theming sin hooks ni context.
+ * Importación directa de tokens según dominio activo.
+ */
+export {};