@mrmeg/expo-ui 0.4.2 → 0.5.0

package/LLM_USAGE.md

@@ -37,7 +37,7 @@ near the root when the app uses package feedback or overlay components.
 `@rn-primitives` portal host.
 
 ```tsx
-import { ThemeProvider } from "@react-navigation/native";
+import { ThemeProvider } from "expo-router";
 import { UIProvider } from "@mrmeg/expo-ui/components";
 import { colors } from "@mrmeg/expo-ui/constants";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";

package/README.md

@@ -307,7 +307,7 @@ LLM rules:
 Call `useResources()` once near the Expo app root before hiding the splash screen:
 
 ```tsx
-import { ThemeProvider } from "@react-navigation/native";
+import { ThemeProvider } from "expo-router";
 import { colors } from "@mrmeg/expo-ui/constants";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
 import { UIProvider } from "@mrmeg/expo-ui/components";

package/dist/components/Button.d.ts

@@ -1,5 +1,5 @@
 import React, { ComponentType } from "react";
-import { PressableProps, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { PressableProps, PressableStateCallbackType, DimensionValue, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { TextProps } from "./StyledText";
 /**
  * Button variants
@@ -9,9 +9,19 @@ type Presets = "default" | "outline" | "ghost" | "link" | "destructive" | "secon
  * Button size variants
  */
 export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonAccessoryStyle = Pick<ViewStyle, "margin" | "marginHorizontal" | "marginVertical" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginStart" | "marginEnd">;
+export type ButtonAccessoryStyle = {
+    margin?: DimensionValue;
+    marginHorizontal?: DimensionValue;
+    marginVertical?: DimensionValue;
+    marginTop?: DimensionValue;
+    marginRight?: DimensionValue;
+    marginBottom?: DimensionValue;
+    marginLeft?: DimensionValue;
+    marginStart?: DimensionValue;
+    marginEnd?: DimensionValue;
+};
 export interface ButtonAccessoryProps {
-    style: StyleProp<ButtonAccessoryStyle>;
+    style: ButtonAccessoryStyle;
     pressableState: PressableStateCallbackType;
     disabled?: boolean;
 }

package/dist/hooks/useTheme.js

@@ -47,9 +47,24 @@ export function useTheme() {
     const userTheme = useThemeStore((s) => s.userTheme);
     const systemTheme = useThemeStore((s) => s.systemTheme);
     const setTheme = useThemeStore((s) => s.setTheme);
+    const colorOverrides = useThemeStore((s) => s.colorOverrides);
     // Determine which theme to use (user preference or system)
     const effectiveScheme = resolveThemePreference(userTheme, systemTheme);
-    const theme = colors[effectiveScheme];
+    const base = colors[effectiveScheme];
+    // Layer any app-injected palette over the package defaults for the active
+    // scheme. When no override is present we return the base theme *by reference*
+    // so memoization and identity checks downstream stay stable (and the package
+    // behaves exactly as it did before overrides existed).
+    const override = colorOverrides[effectiveScheme];
+    const theme = useMemo(() => {
+        if (!override || Object.keys(override).length === 0) {
+            return base;
+        }
+        return {
+            ...base,
+            colors: { ...base.colors, ...override },
+        };
+    }, [base, override]);
     // Sync theme to DOM so CSS in +html.tsx follows the app's runtime theme
     useEffect(() => {
         if (Platform.OS === "web" && typeof document !== "undefined") {

package/dist/state/themeStore.d.ts

@@ -1,10 +1,40 @@
+import type { ThemeColors } from "../constants/colors";
 export type ThemePreference = "system" | "light" | "dark";
 export type ResolvedTheme = "light" | "dark";
+/**
+ * Per-scheme color overrides a host app can inject to brand the package.
+ *
+ * The package ships a neutral default palette (see `constants/colors.ts`).
+ * A consuming app almost always has its own brand palette; without a way to
+ * push it in, package components (Badge, Button, inputs, …) render with the
+ * package's colors while app-authored siblings render with the app's — the
+ * two disagree on what e.g. `primary` means, producing collisions such as
+ * white text on a white badge. `setColors` lets the app forward its palette
+ * once so every package component resolves against the same source of truth.
+ *
+ * Each scheme is `Partial<ThemeColors>`: only the keys provided are overridden,
+ * so an app can re-skin `primary`/`accent` while inheriting neutral defaults.
+ */
+export type ColorOverrides = {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+};
 export type ThemeStore = {
     userTheme: ThemePreference;
     systemTheme: ResolvedTheme;
+    /**
+     * App-injected palette overrides, applied by `useTheme` on top of the
+     * package defaults. Empty by default — zero override means the package
+     * behaves exactly as before this field existed (fully backward compatible).
+     */
+    colorOverrides: ColorOverrides;
     setTheme: (theme: ThemePreference) => void;
     setSystemTheme: (theme: ResolvedTheme) => void;
+    /**
+     * Replace the active color overrides. Pass `{}` (or omit both schemes) to
+     * clear overrides and fall back to the package defaults.
+     */
+    setColors: (overrides: ColorOverrides) => void;
     loadTheme: () => void;
 };
 export declare function resolveThemePreference(userTheme: ThemePreference, systemTheme: ResolvedTheme): ResolvedTheme;

package/dist/state/themeStore.js

@@ -16,6 +16,12 @@ export const useThemeStore = create((set) => ({
     // Always start with "light" so SSR and the first client render agree.
     // Real values are populated by `syncThemeFromEnvironment()` after mount.
     systemTheme: "light",
+    // No overrides by default: the package renders with its built-in palette
+    // until a host app calls `setColors`.
+    colorOverrides: {},
+    setColors: (overrides) => {
+        set({ colorOverrides: overrides ?? {} });
+    },
     setTheme: (theme) => {
         set({
             userTheme: theme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [