@mrmeg/expo-ui 0.9.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/Drawer.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
 import { ViewProps, StyleProp, ViewStyle } from "react-native";
 type DrawerSide = "left" | "right";
+/**
+ * Drawer presentation mode.
+ * - `"overlay"` (default): modal drawer that slides in over content with a backdrop.
+ * - `"rail"`: docked, always-mounted collapsible sidebar (icon strip that expands to
+ *   a labeled panel). It is in-flow and pushes sibling content as it grows.
+ */
+type DrawerVariant = "overlay" | "rail";
 interface DrawerProps {
     /** Controlled open state */
     open?: boolean;
@@ -10,10 +17,30 @@ interface DrawerProps {
     defaultOpen?: boolean;
     /** Which side the drawer appears from */
     side?: DrawerSide;
-    /** Drawer width in pixels or percentage string */
+    /** Drawer width in pixels or percentage string (overlay mode only) */
     width?: number | `${number}%`;
     /** Whether to close when backdrop is pressed */
     closeOnBackdropPress?: boolean;
+    /**
+     * Presentation mode. `"overlay"` (default) is the classic modal drawer;
+     * `"rail"` is a docked collapsible sidebar. See {@link DrawerVariant}.
+     */
+    variant?: DrawerVariant;
+    /** Collapsed (icon-strip) width in pixels for rail mode. @default 72 */
+    collapsedWidth?: number;
+    /** Expanded (labeled-panel) width in pixels for rail mode. @default 240 */
+    expandedWidth?: number;
+    /**
+     * Whether the rail expands on hover (web only — native has no hover).
+     * @default true on web, false on native
+     */
+    expandOnHover?: boolean;
+    /** Default expanded state for uncontrolled rail mode. @default false */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state for rail mode */
+    expanded?: boolean;
+    /** Callback when rail expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
     /** Children components */
     children: React.ReactNode;
 }
@@ -46,9 +73,28 @@ interface DrawerBodyProps extends ViewProps {
 interface DrawerFooterProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, children, }: DrawerProps): React.JSX.Element;
+declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, variant, collapsedWidth, expandedWidth, expandOnHover, defaultExpanded, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }: DrawerProps): React.JSX.Element;
 declare function DrawerTrigger({ asChild, children, style: styleOverride }: DrawerTriggerProps): React.JSX.Element;
-declare function DrawerContent({ swipeEnabled, swipeThreshold, velocityThreshold, style: styleOverride, children, ...props }: DrawerContentProps): React.JSX.Element | null;
+interface DrawerToggleCollapseProps {
+    /** Use child component as the toggle */
+    asChild?: boolean;
+    /** Children components */
+    children: React.ReactNode;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Toggles the rail's expanded state. Native has no hover, so a rail needs an
+ * explicit expand/collapse control; this provides it. On web it works too and
+ * coexists with `expandOnHover`.
+ */
+declare function DrawerToggleCollapse({ asChild, children, style: styleOverride }: DrawerToggleCollapseProps): React.JSX.Element;
+/**
+ * DrawerContent dispatches to the overlay or rail implementation based on the
+ * `variant` set on the Drawer root. Both implementations are separate components
+ * so their hooks never run conditionally.
+ */
+declare function DrawerContent(props: DrawerContentProps): React.JSX.Element;
 declare function DrawerHeader({ children, style, ...props }: DrawerHeaderProps): React.JSX.Element;
 declare function DrawerBody({ children, style, ...props }: DrawerBodyProps): React.JSX.Element;
 declare function DrawerFooter({ children, style, ...props }: DrawerFooterProps): React.JSX.Element;
@@ -69,6 +115,7 @@ declare const Drawer: typeof DrawerRoot & {
     Body: typeof DrawerBody;
     Footer: typeof DrawerFooter;
     Close: typeof DrawerClose;
+    ToggleCollapse: typeof DrawerToggleCollapse;
 };
-export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, useDrawerClose, };
-export type { DrawerProps, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseProps, };
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, DrawerToggleCollapse, useDrawerClose, };
+export type { DrawerProps, DrawerVariant, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseProps, DrawerToggleCollapseProps, };

package/dist/components/Drawer.js

@@ -78,11 +78,31 @@ function drawerReducer(state, action) {
 // ============================================================================
 // Drawer Root Component
 // ============================================================================
-function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, side = "left", width = 300, closeOnBackdropPress = true, children, }) {
+function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, side = "left", width = 300, closeOnBackdropPress = true, variant = "overlay", collapsedWidth = 72, expandedWidth = 240, expandOnHover = Platform.OS === "web", defaultExpanded = false, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }) {
     // Use reducer for stable state management - dispatch is stable and reducer always gets current state
     const [internalOpen, dispatch] = useReducer(drawerReducer, defaultOpen);
     const isControlled = controlledOpen !== undefined;
     const open = isControlled ? controlledOpen : internalOpen;
+    // Rail expand/collapse state (mirrors the open machinery: controlled or uncontrolled)
+    const [internalExpanded, expandedDispatch] = useReducer(drawerReducer, defaultExpanded);
+    const isExpandedControlled = controlledExpanded !== undefined;
+    const expanded = isExpandedControlled ? controlledExpanded : internalExpanded;
+    const setExpanded = (newExpanded) => {
+        if (isExpandedControlled) {
+            controlledOnExpandedChange?.(newExpanded);
+        }
+        else {
+            expandedDispatch({ type: newExpanded ? "OPEN" : "CLOSE" });
+        }
+    };
+    const toggleExpanded = () => {
+        if (isExpandedControlled) {
+            controlledOnExpandedChange?.(!controlledExpanded);
+        }
+        else {
+            expandedDispatch({ type: "TOGGLE" });
+        }
+    };
     // Stable toggle function - dispatch is stable across renders
     const toggle = () => {
         if (isControlled) {
@@ -113,6 +133,13 @@ function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange
         side,
         width: parsedWidth,
         closeOnBackdropPress,
+        variant,
+        expanded,
+        setExpanded,
+        toggleExpanded,
+        collapsedWidth,
+        expandedWidth,
+        expandOnHover,
     };
     return (_jsx(DrawerContext.Provider, { value: contextValue, children: children }));
 }
@@ -142,10 +169,50 @@ function DrawerTrigger({ asChild, children, style: styleOverride }) {
             styleOverride,
         ], children: children }));
 }
+/**
+ * Toggles the rail's expanded state. Native has no hover, so a rail needs an
+ * explicit expand/collapse control; this provides it. On web it works too and
+ * coexists with `expandOnHover`.
+ */
+function DrawerToggleCollapse({ asChild, children, style: styleOverride }) {
+    const { expanded, toggleExpanded } = useDrawerContext();
+    const accessibilityLabel = expanded ? "Collapse sidebar" : "Expand sidebar";
+    const handlePress = () => {
+        toggleExpanded();
+    };
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            onPress: handlePress,
+            accessibilityRole: "button",
+            accessibilityLabel,
+            style: [
+                children.props.style,
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ],
+        });
+    }
+    return (_jsx(Pressable, { onPress: handlePress, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, style: [
+            Platform.OS === "web" && { cursor: "pointer" },
+            styleOverride,
+        ], children: children }));
+}
 // ============================================================================
 // Drawer Content Component
 // ============================================================================
-function DrawerContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThreshold = 500, style: styleOverride, children, ...props }) {
+/**
+ * DrawerContent dispatches to the overlay or rail implementation based on the
+ * `variant` set on the Drawer root. Both implementations are separate components
+ * so their hooks never run conditionally.
+ */
+function DrawerContent(props) {
+    const { variant } = useDrawerContext();
+    if (variant === "rail") {
+        return _jsx(DrawerRailContent, { ...props });
+    }
+    return _jsx(DrawerOverlayContent, { ...props });
+}
+function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThreshold = 500, style: styleOverride, children, ...props }) {
     const drawerContext = useDrawerContext();
     const { open, onOpenChange, side, width, closeOnBackdropPress } = drawerContext;
     const { theme, getShadowStyle } = useTheme();
@@ -358,6 +425,115 @@ function DrawerContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThre
     return contentElement;
 }
 // ============================================================================
+// Drawer Rail Content Component
+// ============================================================================
+/**
+ * Rail variant of DrawerContent: a docked, always-mounted collapsible sidebar.
+ *
+ * Native open model: the rail is always docked and collapsed; `Drawer.ToggleCollapse`
+ * (or hover on web) expands it. It is decoupled from the overlay `open` state — there
+ * is no slide-in/unmount.
+ *
+ * Layout model: the rail is **in-flow** and pushes sibling content. The panel itself
+ * occupies layout width (`collapsedWidth` → `expandedWidth`); animating that width
+ * reflows whatever renders beside it. Put the rail and the content in a
+ * `flexDirection: "row"` container so the content claims the remaining space.
+ */
+function DrawerRailContent({ 
+// Overlay-only props are accepted (shared DrawerContentProps) but ignored in rail mode.
+swipeEnabled: _swipeEnabled, swipeThreshold: _swipeThreshold, velocityThreshold: _velocityThreshold, style: styleOverride, children, ...props }) {
+    const { side, expanded, collapsedWidth, expandedWidth, expandOnHover } = useDrawerContext();
+    const { theme, getShadowStyle } = useTheme();
+    const insets = useSafeAreaInsets();
+    // Hover is a transient "peek" tracked locally; the pinned state comes from
+    // `expanded` (toggle / controlled prop). The rail is open when either is true,
+    // so hovering then leaving never clears a pin the toggle set — they don't
+    // share one piece of state. Hover is web-only (native has no pointer).
+    const [hovered, setHovered] = useState(false);
+    // If the rail is explicitly collapsed (toggle / controlled prop flips
+    // `expanded` true→false) while the pointer is still over it, the active hover
+    // would instantly re-expand it and the collapse would look like a no-op.
+    // Suppress the current hover session in that case; a fresh mouse-enter clears
+    // the suppression so peek-on-hover works again. Tracked in a ref, read during
+    // the re-render that the `expanded` change already triggers (same pattern as
+    // `lastExpandedRef` below).
+    const hoverSuppressedRef = useRef(false);
+    const prevExpandedRef = useRef(expanded);
+    if (prevExpandedRef.current !== expanded) {
+        const wasExpanded = prevExpandedRef.current;
+        prevExpandedRef.current = expanded;
+        if (wasExpanded && !expanded && hovered) {
+            hoverSuppressedRef.current = true;
+        }
+    }
+    const effectiveExpanded = expanded || (expandOnHover && hovered && !hoverSuppressedRef.current);
+    const textColor = theme.colors.foreground;
+    const targetWidth = effectiveExpanded ? expandedWidth : collapsedWidth;
+    // Native animates width via Animated.Value (layout prop → useNativeDriver: false).
+    // Web sets the width directly and lets the inline CSS `transition` animate it.
+    const widthRef = useRef(null);
+    if (widthRef.current === null) {
+        widthRef.current = new Animated.Value(targetWidth);
+    }
+    const widthAnim = widthRef.current;
+    // Trigger the native width animation during render when expansion changes,
+    // mirroring the overlay's lastOpenRef pattern above. Skip the first render:
+    // the Animated.Value is already initialized to the current target, so there is
+    // nothing to animate toward on mount.
+    const lastExpandedRef = useRef(null);
+    if (Platform.OS !== "web" && effectiveExpanded !== lastExpandedRef.current) {
+        const previousExpanded = lastExpandedRef.current;
+        lastExpandedRef.current = effectiveExpanded;
+        if (previousExpanded !== null) {
+            Animated.timing(widthAnim, {
+                toValue: targetWidth,
+                duration: 180,
+                useNativeDriver: false,
+            }).start();
+        }
+    }
+    const shadowStyle = effectiveExpanded
+        ? StyleSheet.flatten(getShadowStyle("elevated"))
+        : undefined;
+    // The rail is in-flow: its own width is what content sits beside, so growing it
+    // pushes that content. No absolute positioning, no spacer.
+    const panelStyle = {
+        width: Platform.OS === "web" ? targetWidth : widthAnim,
+        overflow: "hidden",
+        backgroundColor: theme.colors.background,
+        borderColor: theme.colors.border,
+        ...(side === "left" ? { borderRightWidth: 1 } : { borderLeftWidth: 1 }),
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        ...(Platform.OS === "web" && {
+            transition: "width 0.18s ease, box-shadow 0.18s ease",
+        }),
+    };
+    // Hover-to-expand is web-only; native relies on Drawer.ToggleCollapse. These
+    // only toggle the transient hover state — they never touch the pinned
+    // `expanded`, so leaving the rail can't collapse a toggle-pinned panel. A
+    // fresh mouse-enter clears any hover suppression left by an in-place collapse.
+    const hoverHandlers = Platform.OS === "web" && expandOnHover
+        ? {
+            onMouseEnter: () => {
+                hoverSuppressedRef.current = false;
+                setHovered(true);
+            },
+            onMouseLeave: () => {
+                hoverSuppressedRef.current = false;
+                setHovered(false);
+            },
+        }
+        : {};
+    return (_jsx(Animated.View, { style: [
+            panelStyle,
+            shadowStyle,
+            styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : undefined,
+        ], ...(Platform.OS === "web" && { role: "navigation", ...hoverHandlers }), ...props, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: children }) }) }));
+}
+// ============================================================================
 // Drawer Header Component
 // ============================================================================
 function DrawerHeader({ children, style, ...props }) {
@@ -430,5 +606,6 @@ const Drawer = Object.assign(DrawerRoot, {
     Body: DrawerBody,
     Footer: DrawerFooter,
     Close: DrawerClose,
+    ToggleCollapse: DrawerToggleCollapse,
 });
-export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, useDrawerClose, };
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, DrawerToggleCollapse, useDrawerClose, };

package/dist/components/Icon.d.ts

@@ -1,11 +1,14 @@
 import * as React from "react";
 import type { StyleProp, TextProps, TextStyle } from "react-native";
 import Feather from "@expo/vector-icons/Feather";
+import type { ThemeColors } from "../constants/colors";
 /**
- * Theme color names that can be used as shortcuts
- * Only includes colors that actually exist in the theme
+ * Theme color names that can be used as shortcuts.
+ *
+ * Derived from {@link ThemeColors} so it always covers every semantic token
+ * (`foreground`, `accent`, `border`, …) and can never drift from the theme.
  */
-export type ThemeColorName = "primary" | "primaryForeground" | "secondary" | "muted" | "destructive" | "success" | "warning" | "text" | "textDim";
+export type ThemeColorName = keyof ThemeColors;
 export type IconName = React.ComponentProps<typeof Feather>["name"];
 type IconBaseProps = {
     /** Size of the icon in pixels */

package/dist/components/Icon.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "../hooks/useTheme.js";
 import Feather from "@expo/vector-icons/Feather";
-const THEME_COLOR_KEYS = [
-    "primary", "primaryForeground", "secondary", "muted",
-    "destructive", "success", "warning", "text", "textDim",
-];
+/**
+ * Resolve an icon color against the active theme.
+ *
+ * A string that names an existing theme color resolves to that semantic color;
+ * anything else is treated as a literal color value (hex, `rgb()`, or a CSS
+ * named color). Checking the live theme object — rather than a hand-maintained
+ * list — means new tokens are usable as icon colors automatically, and a token
+ * name never silently falls through as an invalid literal.
+ */
 function resolveIconColor(color, themeColors) {
     if (!color)
         return themeColors.text;
-    if (THEME_COLOR_KEYS.includes(color)) {
+    if (Object.prototype.hasOwnProperty.call(themeColors, color)) {
         return themeColors[color];
     }
     return color;

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.9.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"