@mrmeg/expo-ui 0.1.7 → 0.1.9

package/LLM_USAGE.md

@@ -139,6 +139,11 @@ const { styles } = useStyles(({ theme, spacing, withAlpha }) => ({
 }));
 ```
 
+When the saved theme preference is `system`, the package theme store owns the
+OS color-scheme subscription, including web `prefers-color-scheme`. Do not add
+app-local Appearance or `matchMedia` listeners for package components; import
+`useTheme()`, `useStyles()`, and `useThemeStore` from `@mrmeg/expo-ui`.
+
 ## Component Use-Case Index
 
 Use this table before creating a new app-local primitive.

package/README.md

@@ -11,10 +11,13 @@ 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.
+`node_modules/@mrmeg/expo-ui/llms.txt` first, then
+`node_modules/@mrmeg/expo-ui/LLM_USAGE.md` or
+`node_modules/@mrmeg/expo-ui/llms-full.md` before creating app-local UI
+primitives. Those files are shipped in the npm package and give the short
+component-selection rules, import paths, setup requirements, component catalog,
+and examples that help agents choose existing package components instead of
+rebuilding them.
 
 ## Install
 
@@ -97,6 +100,11 @@ const styles = StyleSheet.create({
 
 `useTheme()` returns the active `theme`, resolved `scheme`, persisted `currentTheme`, `setTheme`, `toggleTheme`, cross-platform shadow helpers, a web focus-ring helper, contrast helpers, and `withAlpha`. `getShadowStyle(type)` supports `base`, `soft`, `sharp`, `subtle`, `elevated`, `glow`, `glass`, `card`, `cardHover`, and `cardSubtle`. Use semantic tokens such as `theme.colors.background`, `foreground`, `card`, `popover`, `border`, `input`, `ring`, `primary`, `secondary`, `accent`, `mutedForeground`, `destructive`, `success`, and `warning`. `primary` is the neutral action color, `secondary` is a neutral secondary surface, `accent` is the teal highlight color, `input` is the default form-control border, and `ring` is the focus outline color.
 
+When `currentTheme` is `"system"`, the package tracks the OS color scheme and
+updates all `useTheme()` and `useStyles()` consumers through the package theme
+store. Apps should not add their own Appearance or `matchMedia` listeners just
+to make package components follow system light/dark changes.
+
 Use `useStyles()` when a component needs memoized theme-aware styles. The style factory receives `{ theme, spacing, withAlpha }`, and the returned hook value also includes the normal `useTheme()` helpers.
 
 ```tsx

package/dist/components/Checkbox.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { View, StyleSheet, Pressable, Platform } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
 import { Icon } from "./Icon.js";
@@ -19,6 +20,15 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     const sizeConfig = SIZE_CONFIGS[size];
     // Simple fast opacity for the checkmark icon
     const checkOpacity = useSharedValue(checked || indeterminate ? 1 : 0);
+    const isVisuallyChecked = !!checked || indeterminate;
+    useEffect(() => {
+        if (reduceMotion) {
+            checkOpacity.value = withTiming(isVisuallyChecked ? 1 : 0, { duration: 0 });
+        }
+        else {
+            checkOpacity.value = withTiming(isVisuallyChecked ? 1 : 0, { duration: 60 });
+        }
+    }, [checkOpacity, isVisuallyChecked, reduceMotion]);
     const wrappedOnCheckedChange = (next) => {
         if (next)
             hapticLight();
@@ -36,14 +46,14 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     // Dynamic border color with sufficient contrast against background
     const borderColor = error
         ? theme.colors.destructive
-        : checked || indeterminate
+        : isVisuallyChecked
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     // Flatten style override for web compatibility
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     const checkboxElement = (_jsx(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, style: {
             borderColor,
-            backgroundColor: checked || indeterminate ? theme.colors.primary : theme.colors.background,
+            backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
             borderRadius: spacing.radiusSm,
             borderWidth: 1,
             width: sizeConfig.size,

package/dist/components/Notification.d.ts

@@ -23,4 +23,4 @@
  * });
  * ```
  */
-export declare const Notification: () => import("react/jsx-runtime").JSX.Element;
+export declare const Notification: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Notification.js

@@ -134,9 +134,12 @@ export const Notification = () => {
                 };
         }
     };
-    const getTitle = () => {
-        if (alert?.title)
+    const getTitle = (message) => {
+        if (alert?.title?.trim())
             return alert.title;
+        if (alert?.loading) {
+            return translateText("notification.loading", "Loading");
+        }
         switch (alert?.type) {
             case "error":
                 return translateText("notification.error", "Error");
@@ -145,14 +148,18 @@ export const Notification = () => {
             case "warning":
                 return translateText("notification.warning", "Warning");
             case "info":
-                return "";
+                return message ? "" : translateText("notification.info", "Info");
             default:
                 return "";
         }
     };
     const { icon, color: iconColor, bgColor: iconBgColor } = getIconProps();
-    const title = getTitle();
-    const hasMessage = !!alert?.messages?.[0];
+    const message = alert?.messages?.find((item) => item.trim().length > 0);
+    const title = getTitle(message);
+    const hasMessage = !!message;
+    if (!alert?.show) {
+        return null;
+    }
     return (_jsx(Animated.View, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", pointerEvents: alert?.show ? "auto" : "none", style: [
             styles.container,
             isBottom
@@ -164,7 +171,7 @@ export const Notification = () => {
                 styles.alert,
                 isBottom && styles.alertBottom,
                 getShadowStyle("base"),
-            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: alert.messages[0] }))] }), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
+            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: message }))] }), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
 };
 const createStyles = (theme) => StyleSheet.create({
     container: {

package/dist/components/StyledText.js

@@ -133,9 +133,6 @@ export const StyledText = forwardRef((props, ref) => {
             },
             resolvedContextTextStyle,
             style,
-            // When a parent (Button, ToggleGroupItem) sets TextColorContext,
-            // that color must win over any color in the style prop
-            contextColor != null && { color: contextColor },
         ], selectable: resolvedSelectable, ...otherProps, children: content }));
 });
 StyledText.displayName = "StyledText";

package/dist/hooks/useTheme.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { colors } from "../constants/colors.js";
-import { useColorScheme as useColorSchemeDefault, Platform, StyleSheet } from "react-native";
-import { useThemeStore } from "../state/themeStore.js";
+import { Platform, StyleSheet } from "react-native";
+import { resolveThemePreference, useThemeStore } from "../state/themeStore.js";
 import { spacing as spacingConstants } from "../constants/spacing.js";
 // Module-level cache for contrast calculations to avoid memory leak
 // and share across components
@@ -45,14 +45,10 @@ function getCachedOrCompute(key, compute) {
  */
 export function useTheme() {
     const userTheme = useThemeStore((s) => s.userTheme);
+    const systemTheme = useThemeStore((s) => s.systemTheme);
     const setTheme = useThemeStore((s) => s.setTheme);
-    let defaultScheme = useColorSchemeDefault();
-    // Ensure a scheme is selected, even if we fail to get one
-    if (!defaultScheme) {
-        defaultScheme = "light";
-    }
     // Determine which theme to use (user preference or system)
-    const effectiveScheme = userTheme === "system" ? defaultScheme : userTheme;
+    const effectiveScheme = resolveThemePreference(userTheme, systemTheme);
     const theme = colors[effectiveScheme];
     // Sync theme to DOM so CSS in +html.tsx follows the app's runtime theme
     useEffect(() => {

package/dist/state/themeStore.d.ts

@@ -1,6 +1,13 @@
+export type ThemePreference = "system" | "light" | "dark";
+export type ResolvedTheme = "light" | "dark";
 export type ThemeStore = {
-    userTheme: "system" | "light" | "dark";
-    setTheme: (theme: "system" | "light" | "dark") => void;
+    userTheme: ThemePreference;
+    systemTheme: ResolvedTheme;
+    setTheme: (theme: ThemePreference) => void;
+    setSystemTheme: (theme: ResolvedTheme) => void;
     loadTheme: () => void;
 };
+export declare function resolveThemePreference(userTheme: ThemePreference, systemTheme: ResolvedTheme): ResolvedTheme;
 export declare const useThemeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeStore>>;
+export declare function syncSystemTheme(): void;
+export declare function startSystemThemeListener(): () => void;

package/dist/state/themeStore.js

@@ -1,11 +1,24 @@
-import { Platform } from "react-native";
+import { Appearance, Platform } from "react-native";
 import { create } from "zustand";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 const THEME_KEY = "user-theme-preference";
+export function resolveThemePreference(userTheme, systemTheme) {
+    return userTheme === "system" ? systemTheme : userTheme;
+}
+function getSystemTheme() {
+    if (Platform.OS === "web" && typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return Appearance.getColorScheme() === "dark" ? "dark" : "light";
+}
 export const useThemeStore = create((set) => ({
     userTheme: "system",
+    systemTheme: getSystemTheme(),
     setTheme: (theme) => {
-        set({ userTheme: theme });
+        set({
+            userTheme: theme,
+            ...(theme === "system" ? { systemTheme: getSystemTheme() } : {}),
+        });
         // Save directly when setting theme
         if (Platform.OS !== "web") {
             AsyncStorage.setItem(THEME_KEY, theme).catch(() => {
@@ -16,6 +29,9 @@ export const useThemeStore = create((set) => ({
             localStorage.setItem(THEME_KEY, theme);
         }
     },
+    setSystemTheme: (theme) => {
+        set({ systemTheme: theme });
+    },
     loadTheme: () => {
         if (Platform.OS !== "web") {
             AsyncStorage.getItem(THEME_KEY).then((saved) => {
@@ -34,5 +50,45 @@ export const useThemeStore = create((set) => ({
         }
     }
 }));
+let stopSystemThemeListener = null;
+export function syncSystemTheme() {
+    useThemeStore.getState().setSystemTheme(getSystemTheme());
+}
+export function startSystemThemeListener() {
+    if (stopSystemThemeListener) {
+        return stopSystemThemeListener;
+    }
+    syncSystemTheme();
+    if (Platform.OS === "web" && typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = () => {
+            useThemeStore.getState().setSystemTheme(mediaQuery.matches ? "dark" : "light");
+        };
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", onChange);
+            stopSystemThemeListener = () => {
+                mediaQuery.removeEventListener("change", onChange);
+                stopSystemThemeListener = null;
+            };
+        }
+        else {
+            mediaQuery.addListener(onChange);
+            stopSystemThemeListener = () => {
+                mediaQuery.removeListener(onChange);
+                stopSystemThemeListener = null;
+            };
+        }
+        return stopSystemThemeListener;
+    }
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+        useThemeStore.getState().setSystemTheme(colorScheme === "dark" ? "dark" : "light");
+    });
+    stopSystemThemeListener = () => {
+        subscription.remove();
+        stopSystemThemeListener = null;
+    };
+    return stopSystemThemeListener;
+}
 // Load saved theme on store creation
 useThemeStore.getState().loadTheme();
+startSystemThemeListener();

package/llms-full.md

@@ -0,0 +1,146 @@
+# @mrmeg/expo-ui Full Contract
+
+`@mrmeg/expo-ui` packages reusable Expo and React Native UI primitives for
+MrMeg apps. It owns the shared design system, tokens, package theme store,
+resource hook, global notification store, overlay shell, and small interaction
+helpers. The consuming app owns routes, screens, feature state, auth, billing,
+media, monitoring, API calls, product copy, and app-specific layouts.
+
+## Agent Rules
+
+Do not recreate primitives that this package already provides. Import from
+`@mrmeg/expo-ui` and compose package components in the app.
+
+Use only exported package paths:
+
+- `@mrmeg/expo-ui`
+- `@mrmeg/expo-ui/components`
+- `@mrmeg/expo-ui/components/*`
+- `@mrmeg/expo-ui/constants`
+- `@mrmeg/expo-ui/constants/*`
+- `@mrmeg/expo-ui/hooks`
+- `@mrmeg/expo-ui/hooks/*`
+- `@mrmeg/expo-ui/state`
+- `@mrmeg/expo-ui/lib`
+
+Do not import from `@mrmeg/expo-ui/dist/*`, `packages/ui/src/*`, or copied
+app-local component files.
+
+## 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. Mount it before using `Dialog`, `AlertDialog`,
+`BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`,
+`Tooltip`, or `globalUIStore` notifications.
+
+i18n is optional. Plain children and `text` props work without `i18next` or
+`react-i18next`. Use `configureExpoUiI18n()` only when a consuming app wants
+package `tx` props translated by its app-owned i18n instance.
+
+## Theme Rules
+
+Use `useTheme()` and `useStyles()` from `@mrmeg/expo-ui/hooks`. Use semantic
+tokens such as `background`, `foreground`, `card`, `popover`, `border`,
+`input`, `ring`, `primary`, `secondary`, `accent`, `mutedForeground`,
+`destructive`, `success`, and `warning`.
+
+Use `StyledText` and semantic text aliases instead of raw `Text` for app UI.
+Use package controls instead of hardcoded Pressable/View/Text combinations.
+
+When the saved theme preference is `system`, the package theme store owns OS
+color-scheme sync, including web `prefers-color-scheme`. Apps should not add
+their own `Appearance` or `matchMedia` listeners just to make package
+components follow system light/dark changes.
+
+## Import Examples
+
+```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";
+```
+
+## Component Catalog
+
+Use this catalog before creating a new app-local primitive.
+
+| Component | Import | Use When | Gotchas |
+|-----------|--------|----------|---------|
+| `Accordion` | `@mrmeg/expo-ui/components` | Multi-section disclosure such as FAQ or grouped settings | Use compound parts instead of custom expanders. |
+| `Alert` | `@mrmeg/expo-ui/components` | Cross-platform imperative alerts | Avoid direct `window.alert` and duplicated native/web branching. |
+| `AnimatedView` | `@mrmeg/expo-ui/components` | Entrance and visibility animation | Keep simple reveal effects in the package wrapper. |
+| `Badge` | `@mrmeg/expo-ui/components` | Short status labels | Prefer over custom pill views. |
+| `BottomSheet` | `@mrmeg/expo-ui/components` | Mobile-first modal sheets | Requires root `UIProvider` portal setup. |
+| `Button` | `@mrmeg/expo-ui/components` | Commands and CTAs | Use `preset`, not `variant`; visible heights are compact. |
+| `Card` | `@mrmeg/expo-ui/components` | Individual framed content groups | Do not wrap whole page sections in cards. |
+| `Checkbox` | `@mrmeg/expo-ui/components` | Boolean selection in forms or lists | Prefer over custom checkmark controls. |
+| `Collapsible` | `@mrmeg/expo-ui/components` | One-off disclosure | Use for advanced settings or helper sections. |
+| `Dialog`, `AlertDialog` | `@mrmeg/expo-ui/components` | Blocking modal content or decisions | Requires root `UIProvider` portal setup. |
+| `DismissKeyboard` | `@mrmeg/expo-ui/components` | Tap-away keyboard dismissal | Prefer over screen-level keyboard wrappers. |
+| `Drawer` | `@mrmeg/expo-ui/components` | Side panels and drawer navigation | `Drawer.Content` owns safe-area top/bottom padding; do not duplicate it in children. |
+| `DropdownMenu` | `@mrmeg/expo-ui/components` | Menus and command lists | Requires root `UIProvider` portal setup. |
+| `EmptyState` | `@mrmeg/expo-ui/components` | No-data or recoverable error regions | Prefer over one-off empty placeholders. |
+| `ErrorBoundary` | `@mrmeg/expo-ui/components` | React render error fallback | Use for route or feature boundaries. |
+| `Icon` | `@mrmeg/expo-ui/components` | Feather or custom icons with theme tokens | Avoid raw vector icons with hardcoded colors. |
+| `InputOTP` | `@mrmeg/expo-ui/components` | Verification code entry | Prefer over manually managed text input groups. |
+| `Label` | `@mrmeg/expo-ui/components` | Accessible form labels | Use with package form controls. |
+| `MaxWidthContainer` | `@mrmeg/expo-ui/components` | Centered responsive width | Use for web and tablet constrained layouts. |
+| `Notification` | `@mrmeg/expo-ui/components` | Global toast surface | Trigger through `globalUIStore` with root `UIProvider`. |
+| `Popover` | `@mrmeg/expo-ui/components` | Anchored contextual content | Requires root `UIProvider` portal setup. |
+| `Progress` | `@mrmeg/expo-ui/components` | Determinate or indeterminate progress | Prefer over layout-shifting spinners for progress regions. |
+| `RadioGroup` | `@mrmeg/expo-ui/components` | Small mutually exclusive choices | Use `Select` for longer option sets. |
+| `Select` | `@mrmeg/expo-ui/components` | Option menus | `SelectContent` requires root `UIProvider` portal setup. |
+| `Separator` | `@mrmeg/expo-ui/components` | Horizontal or vertical dividers | Prefer over border-only spacer views. |
+| `Skeleton` | `@mrmeg/expo-ui/components` | Loading placeholders | Use stable dimensions to avoid layout shift. |
+| `Slider` | `@mrmeg/expo-ui/components` | Numeric value selection | Prefer over custom pan gesture tracks. |
+| `StatusBar` | `@mrmeg/expo-ui/components` | Theme-aware native status bar | Usually mounted through `UIProvider`. |
+| `StyledText` | `@mrmeg/expo-ui/components` | Theme-aware typography | Prefer semantic aliases over raw `Text`. |
+| `Switch` | `@mrmeg/expo-ui/components` | Binary settings | Prefer over custom toggles for on/off state. |
+| `Tabs` | `@mrmeg/expo-ui/components` | In-page tabbed views | Use for profile sections, report views, and settings categories. |
+| `TextInput` | `@mrmeg/expo-ui/components` | Text entry | Use built-in label and error text support. |
+| `Toggle` | `@mrmeg/expo-ui/components` | One pressed/unpressed control | Use `Button` for commands and `Switch` for settings. |
+| `ToggleGroup` | `@mrmeg/expo-ui/components` | Related pressed states | Use for segmented controls, formatting, and filter chips. |
+| `Tooltip` | `@mrmeg/expo-ui/components` | Short hover/focus help | Requires root `UIProvider` portal setup. |
+
+## 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,
+`Skeleton` for loading content with stable layout, and `Progress` for real
+progress or indeterminate long-running work.
+
+## Validation
+
+Run the UI package gates when changing package code or shipped docs:
+
+```sh
+bun run ui:typecheck
+bun run ui:test
+bun run ui:build
+bun run ui:pack
+bun run ui:consumer-smoke
+```
+
+For documentation-only package surface changes, `bun run ui:pack` is the
+minimum check that proves the new docs are included in the npm tarball.

package/llms.txt

@@ -0,0 +1,34 @@
+# @mrmeg/expo-ui
+
+Docs for agents:
+
+- README.md: install, setup, imports, theme usage, components, publishing.
+- LLM_USAGE.md: concise component-selection and implementation rules.
+- llms-full.md: expanded package contract and component catalog.
+
+Public entrypoints:
+
+- @mrmeg/expo-ui
+- @mrmeg/expo-ui/components
+- @mrmeg/expo-ui/components/*
+- @mrmeg/expo-ui/constants
+- @mrmeg/expo-ui/constants/*
+- @mrmeg/expo-ui/hooks
+- @mrmeg/expo-ui/hooks/*
+- @mrmeg/expo-ui/state
+- @mrmeg/expo-ui/lib
+
+Do not recreate primitives this package already provides. Import reusable UI
+from the package and compose it in the app.
+
+Call useResources() once near the Expo app root. Mount UIProvider once near the
+root before using package notifications or overlay primitives: Dialog,
+AlertDialog, BottomSheet, Drawer, DropdownMenu, Popover, SelectContent, or
+Tooltip.
+
+Use useTheme(), useStyles(), semantic tokens, StyledText, and package controls.
+Do not add app-local Appearance or matchMedia listeners for package theme sync.
+Do not import from dist, source checkout paths, or app-local copies.
+
+i18n is optional. Plain children and text props work without app i18n. Use
+configureExpoUiI18n() only when the app wants package tx props translated.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -32,7 +32,9 @@
     "dist",
     "package.json",
     "README.md",
-    "LLM_USAGE.md"
+    "LLM_USAGE.md",
+    "llms.txt",
+    "llms-full.md"
   ],
   "exports": {
     ".": {