@thewhileloop/whileui 4.2.1 → 4.2.3

package/dist/blocks/layout/sheet.js

@@ -79,7 +79,7 @@ export function Sheet({ open, onOpenChange, children, maxHeight = 'full', maxWid
         widthStyle,
         frostedSurface.surfaceStyle,
     ];
-    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: onClose, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(Animated.View, { style: [
+    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: open ? onClose : undefined, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(Animated.View, { style: [
                         StyleSheet.absoluteFill,
                         { backgroundColor: frosted ? 'transparent' : colors.overlay },
                         backdropStyle,

package/dist/blocks/navigation/drawer-menu.js

@@ -125,5 +125,5 @@ export function DrawerMenu({ visible, onClose, sections, activeKey, onSelect, he
                     frostedSurface.surfaceStyle,
                     style,
                 ], className: drawerPanelClassName(frosted, className), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-1 pb-8", style: { paddingTop: contentTopPadding }, children: [header && _jsx(View, { className: "px-5 pb-4 mb-2 border-b border-border", children: header }), _jsx(DrawerSectionList, { sections: sections, activeKey: activeKey, onSelect: handleItemPress, interaction: interaction, visual: visual }), footer && _jsx(View, { className: "px-5 py-4 mt-auto border-t border-border", children: footer })] })] })] }));
-    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: onClose, children: drawerTree }));
+    return (_jsx(OverlayHost, { open: mounted, animationType: "none", onRequestClose: visible ? onClose : undefined, children: drawerTree }));
 }

package/dist/lib/theme-colors.d.ts

@@ -1,8 +1,7 @@
 import { type ThemeColors } from './theme-contract';
 export type { ThemeColors } from './theme-contract';
 export declare function useThemeColors(): ThemeColors;
-/** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
-export declare function useIconColors(): {
+export interface IconColors {
     foreground: string;
     muted: string;
     primary: string;
@@ -12,6 +11,8 @@ export declare function useIconColors(): {
     success: string;
     info: string;
     destructive: string;
-};
+}
+/** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
+export declare function useIconColors(): IconColors;
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export declare const useThemeTokens: typeof useThemeColors;

package/dist/lib/theme-colors.js

@@ -41,10 +41,29 @@ function resolveThemeToken(cssValue, appValue) {
     }
     return parseThemeColor(cssValue) ?? parseThemeColor(appValue);
 }
+// Every themed component calls this hook on every render, and parsing 104 colour
+// strings plus deriving the palette cost about 0.16 ms per call in Node, several times
+// that under Hermes. The inputs only change with the theme, so the result is derived
+// once per distinct snapshot and shared: the same object comes back until the CSS
+// variables change, which also keeps it stable for downstream memoisation.
+const resolvedThemeColors = new Map();
+const RESOLVED_THEME_LIMIT = 8;
 export function useThemeColors() {
     const { theme } = useUniwind();
     const values = useCSSVariable(THEME_TOKEN_VARIABLES);
     const scheme = theme === 'dark' ? 'dark' : 'light';
+    const key = `${scheme}\u0001${values.join('\u0001')}`;
+    const cached = resolvedThemeColors.get(key);
+    if (cached)
+        return cached;
+    const resolved = resolveThemeColors(values, scheme);
+    if (resolvedThemeColors.size >= RESOLVED_THEME_LIMIT) {
+        resolvedThemeColors.delete(resolvedThemeColors.keys().next().value);
+    }
+    resolvedThemeColors.set(key, resolved);
+    return resolved;
+}
+function resolveThemeColors(values, scheme) {
     const fallbackPalette = scheme === 'dark' ? WHILEUI_DARK_THEME_COLORS : WHILEUI_LIGHT_THEME_COLORS;
     const defined = {};
     let index = 0;
@@ -61,10 +80,14 @@ export function useThemeColors() {
     const derived = deriveThemeColors(base, scheme);
     return { ...derived, ...defined, placeholder: derived.placeholder };
 }
+const iconColorsByTheme = new WeakMap();
 /** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
 export function useIconColors() {
     const c = useThemeColors();
-    return {
+    const cached = iconColorsByTheme.get(c);
+    if (cached)
+        return cached;
+    const icons = {
         foreground: c.foreground,
         muted: c.mutedForeground,
         primary: c.primary,
@@ -75,6 +98,8 @@ export function useIconColors() {
         info: c.info,
         destructive: c.destructive,
     };
+    iconColorsByTheme.set(c, icons);
+    return icons;
 }
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export const useThemeTokens = useThemeColors;

package/dist/lib/visual-tokens.js

@@ -28,11 +28,24 @@ function resolveVisualToken(spec, value) {
     }
     return parseRatio(value, spec.fallback, spec.min ?? 0, spec.max ?? 1);
 }
+// Resolved once per distinct CSS snapshot and shared, for the same reason as
+// `useThemeColors`: 83 parses per component per render add up on a list screen, and a
+// stable object lets callers memoise on it.
+const resolvedVisualTokens = new Map();
+const RESOLVED_VISUAL_LIMIT = 8;
 export function useVisualTokens() {
     const values = useCSSVariable(VISUAL_TOKEN_VARIABLES);
+    const key = values.join('\u0001');
+    const cached = resolvedVisualTokens.get(key);
+    if (cached)
+        return cached;
     const resolved = {};
     VISUAL_TOKEN_SPECS.forEach((spec, index) => {
         resolved[spec.key] = resolveVisualToken(spec, values[index]);
     });
+    if (resolvedVisualTokens.size >= RESOLVED_VISUAL_LIMIT) {
+        resolvedVisualTokens.delete(resolvedVisualTokens.keys().next().value);
+    }
+    resolvedVisualTokens.set(key, resolved);
     return resolved;
 }

package/dist/metro.cjs

@@ -12,6 +12,11 @@ const { withUniwindConfig } = require('uniwind/metro');
 const NEEDS_REAL_REACT_NATIVE = ['expo-asset', 'expo-font', '@expo/vector-icons'];
 
 function withWhileUIMetro(config, options) {
+  if (!options || typeof options.cssEntryFile !== 'string') {
+    throw new Error(
+      "withWhileUIMetro(config, options): pass Uniwind's options, at least { cssEntryFile: './global.css' }"
+    );
+  }
   const { exemptFromUniwindRewrite = [], ...uniwindOptions } = options;
   const wrapped = withUniwindConfig(config, uniwindOptions);
   const exempt = [...NEEDS_REAL_REACT_NATIVE, ...exemptFromUniwindRewrite];
@@ -19,7 +24,8 @@ function withWhileUIMetro(config, options) {
 
   wrapped.resolver.resolveRequest = (context, moduleName, platform) => {
     if (moduleName === 'react-native') {
-      const origin = context.originModulePath ?? '';
+      // Metro reports Windows paths with backslashes; match either separator.
+      const origin = (context.originModulePath ?? '').replace(/\\/g, '/');
       if (exempt.some((pkg) => origin.includes(`node_modules/${pkg}/`))) {
         return context.resolveRequest(context, moduleName, platform);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhileloop/whileui",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "WhileUI Native — Copy-paste components for React Native. You own the code.",
   "license": "MIT",
   "repository": {