@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/theme/index.js

@@ -1,13 +1,14 @@
-export { getActiveTheme, setActiveTheme, subscribeTheme, } from "./active.js";
-export { buildThemeFromBrand, } from "./build.js";
-export { containerPair, hexToHsl, hexToRgb, hslToHex, mixHex, rgbToHex, shiftLightness, } from "./color.js";
+export { getActiveTheme, setActiveTheme, subscribeTheme } from "./active.js";
+export { buildThemeFromBrand } from "./build.js";
+export { containerPair, hexToHsl, hexToRgb, hslToHex, mixHex, rgbToHex, shiftLightness } from "./color.js";
 export { ThemedActivityIndicator } from "./components/index.js";
-export { contrastRatio, relativeLuminance, resolveOnColor, } from "./contrast.js";
+export { contrastRatio, relativeLuminance, resolveOnColor } from "./contrast.js";
 export { themeToVars } from "./css-vars.js";
 export { DEFAULT_DARK_THEME } from "./dark.js";
 export { DEFAULT_THEME } from "./default.js";
-export { defineTheme, extendTheme, mergeTheme, } from "./define.js";
+export { defineTheme, extendTheme, mergeTheme } from "./define.js";
 export { theme } from "./theme.js";
-export { appliedTextStyle, configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole, } from "./typography.js";
+export { appliedTextStyle, configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole } from "./typography.js";
 export { useTheme } from "./useTheme.js";
+export { useThemeVars } from "./useThemeVars.js";
 export { validateTheme } from "./validate.js";

package/dist/theme/on-dark-surface.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Ink on the fixed dark surfaces of the DS — brand gradients, splash screens, promos and media.
+ * Those surfaces keep their colors in light and dark mode, so their ink cannot come from a
+ * mode-aware token (`text.inverse` turns dark in dark mode). Values are the AppBar's.
+ */
+export declare const ON_DARK_SURFACE: {
+    readonly ink: "#FFFFFF";
+    readonly muted: "rgba(255,255,255,0.7)";
+    readonly glass: "rgba(255,255,255,0.14)";
+};
+/** Dims the screen behind a modal surface (sheets, promo modal). */
+export declare const SCRIM = "rgba(0,0,0,0.4)";

package/dist/theme/on-dark-surface.js

@@ -0,0 +1,13 @@
+/**
+ * Ink on the fixed dark surfaces of the DS — brand gradients, splash screens, promos and media.
+ * Those surfaces keep their colors in light and dark mode, so their ink cannot come from a
+ * mode-aware token (`text.inverse` turns dark in dark mode). Values are the AppBar's.
+ */
+export const ON_DARK_SURFACE = {
+  ink: "#FFFFFF",
+  muted: "rgba(255,255,255,0.7)",
+  glass: "rgba(255,255,255,0.14)"
+};
+
+/** Dims the screen behind a modal surface (sheets, promo modal). */
+export const SCRIM = "rgba(0,0,0,0.4)";

package/dist/theme/theme.js

@@ -10,5 +10,6 @@
  * import { theme } from "./index.js";
  * const color = theme.primary;
  */
+
 import { getActiveTheme } from "./active.js";
 export const theme = getActiveTheme();

package/dist/theme/tw.js

@@ -1,5 +1,6 @@
 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.
@@ -8,7 +9,8 @@ import { twMerge } from "tailwind-merge";
  * cn('px-4 py-2', isActive && 'bg-primary', className)
  */
 export function cn(...inputs) {
-    return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }
+
 // Re-export tailwind-variants for component variants
 export { tv } from "tailwind-variants";

package/dist/theme/types.js

@@ -1,19 +1 @@
-/**
- * ============================================================================
- * THEME SYSTEM — semantic + container (M3-era) tokens
- * ============================================================================
- *
- * Layers (framework contract, mid-2026):
- * 1. Semantic fills — `primary` / `accent` / `secondary` / state hues (chrome, CTAs).
- * 2. Containers — soft tonal surfaces + `on*` ink (badges, chips, tonal buttons).
- * 3. Surfaces — `bg.*` including tonal `containerLowest|container|containerHigh`.
- * 4. State layers — opacity overlays for press/hover/focus (Material state layers).
- * 5. Material — nav-chrome hints for Liquid Glass / blur peers (optional usage).
- *
- * Color roles:
- * - Fills/borders/tracks → `primary` / `accent` (never body text).
- * - Brand text/links → `text.accent` (AA on `bg.page` / `bg.card`).
- * - Ink on filled brand → `text.onPrimary` via `resolveOnColor`.
- * - Ink on soft containers → `container.onPrimary` / `container.onSuccess` / …
- */
 export {};

package/dist/theme/typography.d.ts

@@ -437,7 +437,7 @@ export declare const Typography: {
             readonly letterSpacing: 0;
         };
     };
-    readonly variantFontRole: Record<"display" | "button" | "label" | "title" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyReadable" | "bodyLarge" | "body" | "bodySmall" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
+    readonly variantFontRole: Record<"display" | "label" | "button" | "title" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyReadable" | "bodyLarge" | "body" | "bodySmall" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
     readonly createTextStyle: (variant: keyof typeof typographyVariants, overrides?: Partial<TextStyle>) => TextStyle;
     readonly createCustomTextStyle: (fontSize: keyof typeof fontSizes, fontFamily: keyof typeof fontFamilies, options?: {
         lineHeight?: keyof typeof lineHeights;