@mrmeg/expo-ui 0.10.0 → 0.10.1

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+All notable changes to `@mrmeg/expo-ui` are documented here. This project
+adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.10.1]
+
+### Fixed
+
+- Fix TextInput rounded-corner fill leak on New Architecture. On Fabric, the
+  `outline`/`filled` variants stroked a rounded border but painted the
+  background fill as an un-clipped rect, so the fill's square corners poked past
+  the rounded stroke (most visible on dark themes and the `filled` variant). The
+  fill, border, and radius now live on the RN wrapper `View` with
+  `overflow: "hidden"`, and the native `@expo/ui` host renders transparent inside
+  that clipped rounded surface. The `underlined` variant (bottom border only),
+  error state, `forceLight` mode, and the secure-entry eye toggle are unchanged.
+
+## [0.10.0]
+
+### Added
+
+- Drawer collapsible rail mode (`variant="rail"`, `Drawer.ToggleCollapse`).
+- Theme-aware Icon color resolution.

package/dist/components/TextInput.js

@@ -243,16 +243,26 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const textColor = forceLight
         ? "#1f2937"
         : getContrastingColor(backgroundColor === "transparent" ? theme.colors.background : backgroundColor, theme.colors.text, palette.white);
-    // Map variant/size to @expo/ui's UniversalStyle (translated to SwiftUI /
-    // Compose modifiers natively).
-    const boxStyle = {
+    // The rounded surface (fill + border + radius) lives on the RN wrapper View,
+    // NOT on the native field. On the New Architecture (Fabric), @expo/ui's host
+    // paints `backgroundColor` as an un-clipped rect and strokes the rounded border
+    // on top, so a fill handed to the host leaks square corners past the stroke.
+    // Letting the RN View own the surface (with `overflow: "hidden"`) keeps the
+    // fill clipped to `borderRadius`; the native host sits transparent inside it.
+    const surfaceStyle = {
         backgroundColor,
         borderColor,
         borderRadius: variant === "underlined" ? 0 : spacing.radiusMd,
         borderWidth: variant === "outline" ? 1 : 0,
+        opacity: editable === false ? 0.6 : 1,
+        overflow: "hidden",
+    };
+    // Native field: transparent, padding + height only. The visible surface is
+    // drawn by `surfaceStyle` on the wrapper above.
+    const boxStyle = {
+        backgroundColor: "transparent",
         paddingHorizontal: sizeConfig.paddingHorizontal,
         paddingVertical: sizeConfig.paddingVertical,
-        opacity: editable === false ? 0.6 : 1,
         ...(multiline ? null : { height: sizeConfig.height }),
     };
     // "System" is an RN-only sentinel (RCTFont resolves it to the system font).
@@ -268,7 +278,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         fontSize: sizeConfig.fontSize,
         ...(nativeFontFamily ? { fontFamily: nativeFontFamily } : null),
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: hasSecureToggle ? styles.nativeRow : undefined, children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [surfaceStyle, hasSecureToggle && styles.nativeRow], children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }
 const createStyles = (theme, variant, size) => StyleSheet.create({
     nativeHost: {

package/package.json

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