@mrmeg/expo-ui 0.1.3 → 0.1.5

package/LLM_USAGE.md

@@ -16,7 +16,7 @@ import { Button as ButtonDirect } from "@mrmeg/expo-ui/components/Button";
 import { colors, spacing, typography } from "@mrmeg/expo-ui/constants";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
 import { globalUIStore, useThemeStore } from "@mrmeg/expo-ui/state";
-import { hapticLight } from "@mrmeg/expo-ui/lib";
+import { configureExpoUiI18n, hapticLight } from "@mrmeg/expo-ui/lib";
 ```
 
 The root barrel also exports the public surface:
@@ -68,6 +68,19 @@ export function RootLayout() {
 `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`,
 `SelectContent`, or `Tooltip`.
 
+i18n is optional. Do not add app-level i18n setup just to use this package.
+Plain children and `text` props work without `i18next` or `react-i18next`.
+`tx` props render fallback text when provided and otherwise render the key
+until the consumer opts in with a package-local translator. Package-owned
+defaults such as notification titles stay human-readable without app i18n:
+
+```tsx
+import { configureExpoUiI18n } from "@mrmeg/expo-ui/lib";
+import { i18n } from "./i18n";
+
+configureExpoUiI18n((key, options) => i18n.t(key, options));
+```
+
 ## Theme And Text Rules
 
 - Use `useTheme()` and semantic tokens instead of hardcoded colors.

package/README.md

@@ -28,11 +28,11 @@ Consumers must also install the peer dependencies listed in `package.json`.
 The tested baseline is Expo SDK 55 with React 19.2, React Native 0.83,
 React Native Web 0.21, Reanimated 4.2, Worklets 0.7, and
 `@rn-primitives/*` 1.4. `@rn-primitives/portal` is package-managed because
-`UIProvider` mounts the portal host used by package overlays. `i18next` and
-`react-i18next` are runtime peers because `StyledText` and `Notification`
-support translated text keys. Start consumer apps from the same Expo SDK
-family or update the package and peer ranges deliberately. Keep npm auth tokens
-in developer or CI configuration, not in this repository.
+`UIProvider` mounts the portal host used by package overlays. i18n setup is
+optional; plain text and children render without `i18next` or
+`react-i18next`. Start consumer apps from the same Expo SDK family or update
+the package and peer ranges deliberately. Keep npm auth tokens in developer or
+CI configuration, not in this repository.
 
 ## Imports
 
@@ -44,7 +44,7 @@ import { colors as colorsDirect } from "@mrmeg/expo-ui/constants/colors";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
 import { useTheme as useThemeDirect } from "@mrmeg/expo-ui/hooks/useTheme";
 import { globalUIStore, useThemeStore } from "@mrmeg/expo-ui/state";
-import { hapticLight } from "@mrmeg/expo-ui/lib";
+import { configureExpoUiI18n, hapticLight } from "@mrmeg/expo-ui/lib";
 ```
 
 The root barrel also exports the public surface:
@@ -116,6 +116,18 @@ Useful `StyledText` props:
 - `variant`: `sansSerif`, `serif`
 - `align`, `tx`, `txOptions`
 
+`tx` support is opt-in. Without a configured translator, `tx` renders its
+fallback text when provided and otherwise renders the key; package-owned
+defaults such as notification titles use readable fallback text. Consumers
+that already use i18n can connect it once near app startup:
+
+```tsx
+import { configureExpoUiI18n } from "@mrmeg/expo-ui/lib";
+import { i18n } from "./i18n";
+
+configureExpoUiI18n((key, options) => i18n.t(key, options));
+```
+
 ## Component Guide
 
 All components are exported from `@mrmeg/expo-ui/components`; direct imports such as `@mrmeg/expo-ui/components/Button` are supported. Use this table as the first stop before building a new primitive in a consumer app.
@@ -336,13 +348,14 @@ publishing instead:
 1. In npm package settings for `@mrmeg/expo-ui`, add a trusted publisher:
    GitHub Actions, owner `mrmeg`, repository `expo-template`, workflow
    filename `publish-ui.yml`.
-2. In GitHub Actions, run the `Publish UI Package` workflow with `version=patch`
-   and `ref=dev`.
+2. Bump `packages/ui/package.json` in a commit and push it to `main`.
 
-The workflow uses npm OIDC, not a checked-in token or local npm login. It bumps
-the package version, updates `bun.lock`, runs the package gates, lets npm CLI
-use the GitHub Actions OIDC environment, commits the version bump, and publishes
-from `packages/ui`.
+The workflow uses npm OIDC, not a checked-in token or local npm login. On push,
+it reads the committed package version, skips cleanly if that version is already
+published, otherwise runs the package gates and publishes from `packages/ui`.
+The workflow can also be run manually with `version=patch` and `ref=main`; manual
+runs bump the package version, update `bun.lock`, run the package gates, commit
+the version bump, and publish.
 
 Keep `repository.url` in `package.json` as
 `git+https://github.com/mrmeg/expo-template.git`. npm trusted publishing checks
@@ -353,9 +366,9 @@ If npm trusted publishing is blocked by package settings, add an npm automation
 or granular publish token to GitHub Actions secrets as `NPM_TOKEN` and rerun the
 same workflow. The token is used only for the publish step.
 
-If the workflow fails after the version is already bumped, rerun it with the
-exact current package version, for example `version=0.1.2`. Exact-version reruns
-do not bump again.
+If the manual workflow fails after the version is already bumped, rerun it with
+the exact current package version, for example `version=0.1.3`. Exact-version
+reruns do not bump again.
 
 Manual package checks:
 

package/dist/components/Button.d.ts

@@ -20,7 +20,7 @@ export interface ButtonProps extends PressableProps {
      */
     tx?: TextProps["tx"];
     /**
-     * The text to display if not using `tx` or nested components.
+     * The text to display directly, or as fallback text when `tx` is provided.
      */
     text?: TextProps["text"];
     /**

package/dist/components/Button.js

@@ -147,13 +147,13 @@ export function Button(props) {
                         },
                         // Spread array styles from Slot to prevent nested arrays on web
                         ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
-                    ], children: [!!LeftAccessory && !loading && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), loading && (_jsx(ActivityIndicator, { size: "small", color: textColor, style: styles.loader })), (tx || text) ? (_jsx(StyledText, { style: [
+                    ], children: [!!LeftAccessory && !loading && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), loading && (_jsx(ActivityIndicator, { size: "small", color: textColor, style: styles.loader })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
                                 styles.text,
                                 state.pressed && styles.pressedText,
                                 state.pressed && pressedTextStyleOverride,
                                 isDisabled && disabledTextStyleOverride,
                                 textStyleOverride,
-                            ], children: tx || text })) : !loading && children ? (
+                            ] })) : !loading && children ? (
                         // Wrap string children in StyledText to apply TextColorContext
                         typeof children === "string" ? (_jsx(StyledText, { style: [
                                 styles.text,

package/dist/components/Notification.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useRef } from "react";
 import { StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, useReducedMotion, Easing, } from "react-native-reanimated";
-import { useTranslation } from "react-i18next";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { fontFamilies } from "../constants/fonts.js";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
+import { translateText } from "../lib/i18n.js";
 import { globalUIStore } from "../state/globalUIStore.js";
 /**
  * Notification
@@ -36,7 +36,6 @@ import { globalUIStore } from "../state/globalUIStore.js";
  * ```
  */
 export const Notification = () => {
-    const { t } = useTranslation();
     const { theme, getShadowStyle } = useTheme();
     const reduceMotion = useReducedMotion();
     const insets = useContext(SafeAreaInsetsContext);
@@ -140,11 +139,11 @@ export const Notification = () => {
             return alert.title;
         switch (alert?.type) {
             case "error":
-                return t("notification.error");
+                return translateText("notification.error", "Error");
             case "success":
-                return t("notification.success");
+                return translateText("notification.success", "Success");
             case "warning":
-                return t("notification.warning");
+                return translateText("notification.warning", "Warning");
             case "info":
                 return "";
             default:

package/dist/components/StyledText.d.ts

@@ -53,7 +53,7 @@ export type TextProps = RNTextProps & {
      */
     tx?: string;
     /**
-     * The text to display if not using `tx` or nested components.
+     * The text to display directly, or as fallback text when `tx` is provided.
      */
     text?: string;
     /**
@@ -101,7 +101,7 @@ export declare const StyledText: React.ForwardRefExoticComponent<RNTextProps & {
      */
     tx?: string;
     /**
-     * The text to display if not using `tx` or nested components.
+     * The text to display directly, or as fallback text when `tx` is provided.
      */
     text?: string;
     /**

package/dist/components/StyledText.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import { Text as RNText, StyleSheet } from "react-native";
-import { useTranslation } from "react-i18next";
 import { useTheme } from "../hooks/useTheme.js";
 import { fontFamilies } from "../constants/fonts.js";
+import { translateText } from "../lib/i18n.js";
 /**
  * TextClassContext provides className context for nested text components
  * Used by @rn-primitives to apply consistent styling through the component tree
@@ -75,7 +75,6 @@ const getFontFamilyWeight = (weight) => {
 export const StyledText = forwardRef((props, ref) => {
     const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, children, ...otherProps } = props;
     const { theme } = useTheme();
-    const { t } = useTranslation();
     // Check if there's a color override from parent context (e.g., Button)
     const contextColor = React.useContext(TextColorContext);
     // Use context color if provided, otherwise use theme default
@@ -100,7 +99,7 @@ export const StyledText = forwardRef((props, ref) => {
     const styleHasFontSize = flatStyle && "fontSize" in flatStyle;
     const styleHasLineHeight = flatStyle && "lineHeight" in flatStyle;
     const resolvedLineHeight = styleHasFontSize && !styleHasLineHeight ? undefined : lineHeight;
-    const i18nText = tx ? String(t(tx, txOptions)) : text;
+    const i18nText = translateText(tx, text, txOptions);
     const content = i18nText || children;
     return (_jsx(RNText, { ref: ref, style: [
             {

package/dist/lib/i18n.d.ts

@@ -0,0 +1,3 @@
+export type TranslateFn = (key: string, options?: object) => string | undefined;
+export declare function configureExpoUiI18n(fn: TranslateFn | null): void;
+export declare function translateText(key?: string, fallbackText?: string, options?: object): string | undefined;

package/dist/lib/i18n.js

@@ -0,0 +1,11 @@
+let translate = null;
+export function configureExpoUiI18n(fn) {
+    translate = fn;
+}
+export function translateText(key, fallbackText, options) {
+    if (!key)
+        return fallbackText;
+    if (!translate)
+        return fallbackText ?? key;
+    return translate(key, options) ?? fallbackText ?? key;
+}

package/dist/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./animations";
 export * from "./haptics";
+export * from "./i18n";

package/dist/lib/index.js

@@ -1,2 +1,3 @@
 export * from "./animations.js";
 export * from "./haptics.js";
+export * from "./i18n.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -105,9 +105,7 @@
     "expo": "~55.0.0",
     "expo-font": "~55.0.0",
     "expo-haptics": "~55.0.0",
-    "i18next": ">=25.0.0 <27.0.0",
     "react": ">=19.2.0 <20.0.0",
-    "react-i18next": ">=15.0.0 <18.0.0",
     "react-native": ">=0.83.0 <0.84.0",
     "react-native-gesture-handler": "~2.30.0",
     "react-native-reanimated": "~4.2.0",