@mrmeg/expo-ui 0.1.2 → 0.1.4

package/LLM_USAGE.md

@@ -0,0 +1,214 @@
+# @mrmeg/expo-ui LLM Usage Guide
+
+This file ships in the npm package. In a consumer repo, read it from
+`node_modules/@mrmeg/expo-ui/LLM_USAGE.md` before building app UI.
+
+## First Rule
+
+Do not recreate primitives that this package already provides. Import from
+`@mrmeg/expo-ui` and compose the exported components in the app.
+
+## Stable Import Paths
+
+```tsx
+import { Button, StyledText, UIProvider } from "@mrmeg/expo-ui/components";
+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 { configureExpoUiI18n, hapticLight } from "@mrmeg/expo-ui/lib";
+```
+
+The root barrel also exports the public surface:
+
+```tsx
+import { Button, UIProvider, colors, useTheme } from "@mrmeg/expo-ui";
+```
+
+Use only exported package paths: root, `components`, `components/*`,
+`constants`, `constants/*`, `hooks`, `hooks/*`, `state`, and `lib`. Do not
+import from `@mrmeg/expo-ui/dist/*` or from a source checkout path.
+
+## Required App Setup
+
+Call `useResources()` once near the Expo app root. Mount `UIProvider` once
+near the root when the app uses package feedback or overlay components.
+`UIProvider` owns the package `Notification`, `StatusBar`, and default
+`@rn-primitives` portal host.
+
+```tsx
+import { ThemeProvider } from "@react-navigation/native";
+import { UIProvider } from "@mrmeg/expo-ui/components";
+import { colors } from "@mrmeg/expo-ui/constants";
+import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
+
+export function RootLayout() {
+  const { scheme } = useTheme();
+  const { loaded } = useResources();
+
+  if (!loaded) return null;
+
+  return (
+    <ThemeProvider
+      value={{
+        dark: colors[scheme ?? "light"].dark,
+        colors: colors[scheme ?? "light"].navigation,
+        fonts: colors[scheme ?? "light"].fonts,
+      }}
+    >
+      <UIProvider>
+        {/* App navigation goes here. */}
+      </UIProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+`UIProvider` mounts the default portal host required before using `Dialog`,
+`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 the key until the consumer opts in with a package-local
+translator:
+
+```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.
+- Use `StyledText` or its semantic aliases instead of raw `Text` for app UI.
+- Use `Button.preset`, not `variant`, for buttons.
+- Use `globalUIStore` plus root-mounted `UIProvider` for transient global feedback.
+- Keep app monitoring, auth, API, and domain behavior outside this package.
+
+Useful theme tokens include:
+
+```tsx
+theme.colors.background;
+theme.colors.foreground;
+theme.colors.card;
+theme.colors.border;
+theme.colors.primary;
+theme.colors.secondary;
+theme.colors.accent;
+theme.colors.mutedForeground;
+theme.colors.destructive;
+theme.colors.success;
+theme.colors.warning;
+```
+
+Token intent:
+
+- `primary`: neutral action color
+- `secondary`: neutral secondary surface
+- `accent`: teal highlight color
+
+## Component Use-Case Index
+
+Use this table before creating a new app-local primitive.
+
+| Component | Use For | Prefer It Instead Of | Common Example Use Cases |
+|-----------|---------|----------------------|--------------------------|
+| `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | Multi-section disclosure | Custom FAQ/settings expanders | FAQ lists, grouped settings, help sections |
+| `Alert` | Cross-platform imperative alerts | Direct `window.alert` or duplicated RN/web branching | Confirm destructive actions, native alert dialogs |
+| `AnimatedView` | Entrance and visibility animation | Hand-rolled Reanimated wrappers | Staggered list rows, revealed panels, animated empty states |
+| `Badge` | Short status labels | Custom pill `View` + `Text` | Draft/active states, counts, plan labels, role tags |
+| `BottomSheet` | Mobile-first modal sheets | Custom absolute-position sheets | Action pickers, mobile filters, quick edit forms |
+| `Button` | Commands and CTAs | Pressable plus custom text styling | Submit, save, cancel, delete, navigation CTAs |
+| `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` | Framed content groups | Ad hoc bordered panels | List items, pricing plans, settings sections, summaries |
+| `Checkbox` | Boolean selection | Custom checkmark controls | Terms consent, checklist items, multi-select filters |
+| `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | One-off disclosure | Local animated height wrappers | Advanced settings, hidden helper text |
+| `Dialog`, `AlertDialog` | Modal decisions and custom modal content | Custom modal overlays | Confirm delete, edit profile, invite user |
+| `DismissKeyboard` | Tap-away keyboard dismissal | Screen-level keyboard handling | Forms, search screens, sign-in screens |
+| `Drawer` | Side panels and drawer navigation | Custom sliding panels | Filter drawer, app navigation drawer, inspector panel |
+| `DropdownMenu` | Menus and command lists | Homemade popover menus | Row actions, account menu, sort menu |
+| `EmptyState` | No-data or recoverable error regions | One-off empty placeholders | Empty inbox, no search results, failed list load |
+| `ErrorBoundary` | React render error fallback | Unhandled screen crashes | Route-level fallback, feature boundary |
+| `Icon` | Feather or custom icons with theme tokens | Raw vector icons with hardcoded colors | Button accessories, empty-state icons, menu icons |
+| `InputOTP` | Verification code entry | Multiple manually managed text inputs | Email codes, SMS codes, MFA, invite codes |
+| `Label` | Accessible form labels | Plain styled text labels | Required labels, disabled labels, field group labels |
+| `MaxWidthContainer` | Centered responsive width | Per-screen max-width wrappers | Web pages, tablet layouts, settings forms |
+| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, bottom-position alerts |
+| `Popover` | Anchored contextual content | Custom anchored views | Inline help, quick previews, contextual controls |
+| `Progress` | Determinate or indeterminate progress | Layout-shifting spinners for progress regions | Upload progress, onboarding completion |
+| `RadioGroup`, `RadioGroupItem` | Mutually exclusive choices | Custom radio rows | Plan interval, visibility choice, survey answer |
+| `Select` | Option menus | Custom dropdowns | Country picker, category selector, status selector |
+| `Separator` | Horizontal or vertical dividers | Border-only spacer views | Menu dividers, section dividers, card dividers |
+| `Skeleton`, `SkeletonText`, `SkeletonAvatar`, `SkeletonCard` | Loading placeholders | Blank space or generic spinners | List loading, profile card loading, dashboard placeholders |
+| `Slider` | Numeric value selection | Custom pan gesture track | Volume, percentage, rating, threshold settings |
+| `StatusBar` | Theme-aware native status bar | Per-screen status-bar duplication | Root layout status styling |
+| `StyledText` and text aliases | Theme-aware typography | Raw `Text` with hardcoded styles | Titles, headings, labels, body copy, captions |
+| `Switch` | Binary settings | Custom toggle switches | Enable notifications, privacy setting, feature toggles |
+| `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | In-page tabbed views | Custom segmented/tab controls | Profile sections, report views, settings categories |
+| `TextInput` | Text entry | Raw `TextInput` with repeated label/error code | Email/password, search, numeric input, multiline notes |
+| `Toggle`, `ToggleIcon` | Pressed/unpressed control | Button with local selected styling | Favorite, mute, bold/italic, view mode button |
+| `ToggleGroup`, `ToggleGroupItem`, `ToggleGroupIcon` | Single or multi toggle groups | Custom segmented controls | Alignment, formatting toolbar, filter chips |
+| `Tooltip` | Short hover/focus help | Persistent helper text or custom hover cards | Icon button labels, field hints, disabled action explanations |
+
+## Component Selection Rules
+
+- Use `Button` for commands, `Toggle` for one pressed state, `ToggleGroup` for related pressed states, and `Switch` for binary settings.
+- Use `RadioGroup` for small mutually exclusive choices and `Select` for longer option sets.
+- Use `Dialog` for blocking decisions, `Popover` for contextual controls, `Tooltip` for short explanations, and `DropdownMenu` for action lists.
+- Use `Card` for individual repeated or framed items, not as a wrapper around full page sections.
+- Use `EmptyState` for no-data or recoverable error regions.
+- Use `Skeleton` for loading content with stable layout.
+- Use `Progress` for real progress or indeterminate long-running work.
+
+## Minimal Examples
+
+```tsx
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@mrmeg/expo-ui/components";
+
+<Card variant="outline">
+  <CardHeader>
+    <CardTitle>Subscription</CardTitle>
+    <Badge variant="secondary">Active</Badge>
+  </CardHeader>
+  <CardContent>
+    <Button preset="default" fullWidth>
+      Manage billing
+    </Button>
+  </CardContent>
+</Card>
+```
+
+```tsx
+import { Button, Switch, TextInput } from "@mrmeg/expo-ui/components";
+
+<TextInput
+  label="Email"
+  placeholder="you@example.com"
+  autoCapitalize="none"
+  keyboardType="email-address"
+  errorText={emailError}
+/>
+
+<Switch checked={enabled} onCheckedChange={setEnabled} variant="ios" />
+
+<Button preset="default" size="lg" fullWidth loading={isSubmitting}>
+  Continue
+</Button>
+```
+
+```tsx
+import { EmptyState, Progress, SkeletonCard } from "@mrmeg/expo-ui/components";
+import { globalUIStore } from "@mrmeg/expo-ui/state";
+
+{isLoading ? <SkeletonCard /> : null}
+<Progress value={65} variant="accent" />
+<EmptyState icon="inbox" title="No messages" description="New messages will appear here." />
+
+globalUIStore.getState().show({
+  type: "success",
+  title: "Saved",
+  messages: ["Your changes were saved."],
+});
+```

package/README.md

@@ -8,6 +8,14 @@ package, not a generally supported open-source UI library. The package is
 published as `UNLICENSED`; use outside MrMeg projects requires explicit
 permission.
 
+## For LLMs And Coding Agents
+
+When this package is installed from npm, read
+`node_modules/@mrmeg/expo-ui/LLM_USAGE.md` before creating app-local UI
+primitives. That file is shipped in the npm package and gives the short
+component-selection rules, import paths, setup requirements, and examples that
+help agents choose existing package components instead of rebuilding them.
+
 ## Install
 
 Install from npm after publishing:
@@ -19,29 +27,30 @@ bun add @mrmeg/expo-ui
 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. `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.
+`@rn-primitives/*` 1.4. `@rn-primitives/portal` is package-managed because
+`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
 
 ```tsx
-import { Button, StyledText } from "@mrmeg/expo-ui/components";
+import { Button, StyledText, UIProvider } from "@mrmeg/expo-ui/components";
 import { Button as ButtonDirect } from "@mrmeg/expo-ui/components/Button";
 import { colors, spacing, typography } from "@mrmeg/expo-ui/constants";
 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:
 
 ```tsx
-import { Button, colors, useTheme } from "@mrmeg/expo-ui";
+import { Button, UIProvider, colors, useTheme } from "@mrmeg/expo-ui";
 ```
 
 ## Theme System
@@ -107,6 +116,17 @@ Useful `StyledText` props:
 - `variant`: `sansSerif`, `serif`
 - `align`, `tx`, `txOptions`
 
+`tx` support is opt-in. Without a configured translator, `tx` renders the key
+and `text` renders as provided. 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.
@@ -182,7 +202,7 @@ Use `Button.preset`, not `variant`. `default` is the neutral primary action, `se
 
 Use `StyledText` or its aliases instead of raw `Text` whenever the text is part of app UI. Use `TextInput` for labeled fields because it already owns label, helper text, error text, clear buttons, password visibility, numeric filtering, and left/right elements.
 
-Mount `PortalHost` once before using `Dialog`, `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`, or `Tooltip`. Mount `Notification` once near the root and trigger it from `globalUIStore`.
+Mount `UIProvider` once near the root before using `Dialog`, `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`, `Tooltip`, or package notifications. Trigger transient feedback from `globalUIStore`.
 
 Use `Skeleton` components for loading content with stable dimensions, `EmptyState` for no-data/recoverable errors, `Alert` for blocking confirm/alert dialogs, and `Notification` for transient global feedback.
 
@@ -250,7 +270,7 @@ LLM rules:
 - Prefer `StyledText` semantic variants over raw `Text`.
 - Use `useTheme()` and semantic tokens instead of hardcoded colors.
 - Use `Button.preset`, not `variant`, for buttons.
-- Mount `PortalHost` before using overlays, menus, select content, popovers, or tooltips.
+- Mount `UIProvider` before using overlays, menus, select content, popovers, tooltips, or package notifications.
 - Import from package exports, not `packages/ui/src/*`.
 
 ## App Startup
@@ -261,8 +281,7 @@ Call `useResources()` once near the Expo app root before hiding the splash scree
 import { ThemeProvider } from "@react-navigation/native";
 import { colors } from "@mrmeg/expo-ui/constants";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
-import { Notification, StatusBar } from "@mrmeg/expo-ui/components";
-import { PortalHost } from "@rn-primitives/portal";
+import { UIProvider } from "@mrmeg/expo-ui/components";
 
 export default function RootLayout() {
   const { scheme } = useTheme();
@@ -278,10 +297,9 @@ export default function RootLayout() {
         fonts: colors[scheme ?? "light"].fonts,
       }}
     >
-      {/* App navigation goes here. */}
-      <Notification />
-      <PortalHost />
-      <StatusBar />
+      <UIProvider>
+        {/* App navigation goes here. */}
+      </UIProvider>
     </ThemeProvider>
   );
 }
@@ -329,13 +347,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
@@ -346,9 +365,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.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");
             case "success":
-                return t("notification.success");
+                return translateText("notification.success");
             case "warning":
-                return t("notification.warning");
+                return translateText("notification.warning");
             case "info":
                 return "";
             default:

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/components/UIProvider.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface UIProviderProps {
+    children: React.ReactNode;
+    /**
+     * Mount the package notification renderer for globalUIStore feedback.
+     *
+     * @default true
+     */
+    notification?: boolean;
+    /**
+     * Mount the default @rn-primitives portal host used by package overlays.
+     *
+     * @default true
+     */
+    portalHost?: boolean;
+    /**
+     * Mount the package status bar renderer.
+     *
+     * @default true
+     */
+    statusBar?: boolean;
+}
+export declare function UIProvider({ children, notification, portalHost, statusBar, }: UIProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/UIProvider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PortalHost } from "@rn-primitives/portal";
+import { Notification } from "./Notification.js";
+import { StatusBar } from "./StatusBar.js";
+export function UIProvider({ children, notification = true, portalHost = true, statusBar = true, }) {
+    return (_jsxs(_Fragment, { children: [children, notification ? _jsx(Notification, {}) : null, portalHost ? _jsx(PortalHost, {}) : null, statusBar ? _jsx(StatusBar, {}) : null] }));
+}

package/dist/components/index.d.ts

@@ -33,3 +33,4 @@ export * from "./TextInput";
 export * from "./Toggle";
 export * from "./ToggleGroup";
 export * from "./Tooltip";
+export * from "./UIProvider";

package/dist/components/index.js

@@ -33,3 +33,4 @@ export * from "./TextInput.js";
 export * from "./Toggle.js";
 export * from "./ToggleGroup.js";
 export * from "./Tooltip.js";
+export * from "./UIProvider.js";

package/dist/lib/i18n.d.ts

@@ -0,0 +1,3 @@
+export type TranslateFn = (key: string, options?: object) => string;
+export declare function configureExpoUiI18n(fn: TranslateFn | null): void;
+export declare function translateText(key?: string, text?: 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, text, options) {
+    if (text)
+        return text;
+    if (!key)
+        return undefined;
+    return translate ? translate(key, options) : 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.2",
+  "version": "0.1.4",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -31,7 +31,8 @@
   "files": [
     "dist",
     "package.json",
-    "README.md"
+    "README.md",
+    "LLM_USAGE.md"
   ],
   "exports": {
     ".": {
@@ -77,6 +78,9 @@
     "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-ui-package-esm.mjs",
     "publish:dry-run": "bun pm pack --dry-run"
   },
+  "dependencies": {
+    "@rn-primitives/portal": "~1.4.0"
+  },
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0 <16.0.0",
     "@react-native-async-storage/async-storage": ">=2.2.0 <2.3.0",
@@ -88,7 +92,6 @@
     "@rn-primitives/dropdown-menu": "~1.4.0",
     "@rn-primitives/label": "~1.4.0",
     "@rn-primitives/popover": "~1.4.0",
-    "@rn-primitives/portal": "~1.4.0",
     "@rn-primitives/radio-group": "~1.4.0",
     "@rn-primitives/select": "~1.4.0",
     "@rn-primitives/separator": "~1.4.0",
@@ -102,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",