@mrmeg/expo-ui 0.7.2 → 0.7.3

package/dist/components/Dialog.js

@@ -26,16 +26,14 @@ function DialogContent({ portalHost, style, children, ...props }) {
                     StyleSheet.absoluteFill,
                     { backgroundColor: theme.colors.overlay },
                     Platform.OS === "web" && { zIndex: 50 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
                                                 padding: spacing.lg,
-                                                width: "90%",
-                                                maxWidth: 450,
-                                                maxHeight: "85%",
+                                                width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },
                                             style,
@@ -103,16 +101,14 @@ function AlertDialogContent({ portalHost, style, children, ...props }) {
                     StyleSheet.absoluteFill,
                     { backgroundColor: theme.colors.overlay },
                     Platform.OS === "web" && { zIndex: 52 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
                                                 padding: spacing.lg,
-                                                width: "90%",
-                                                maxWidth: 450,
-                                                maxHeight: "85%",
+                                                width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },
                                             style,
@@ -160,6 +156,18 @@ const overlayStyles = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center",
     },
+    // Sizes the dialog relative to the full-screen centered container. Both the
+    // width AND maxHeight must live on this wrapper (the direct flex child of the
+    // full-screen container) rather than on Content: a percentage resolves
+    // against the parent's resolved box, and this wrapper's box is the screen.
+    // Putting `maxHeight: "85%"` on Content instead resolves it against this
+    // (content-sized) wrapper — clamping the card to 85% of its own content
+    // height, so the footer spills out the bottom.
+    sizer: {
+        width: "90%",
+        maxWidth: 450,
+        maxHeight: "85%",
+    },
 });
 // ============================================================================
 // Exports

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,52 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+/**
+ * SegmentedControl — a horizontal single-select control backed by the
+ * platform's native segmented control via
+ * `@expo/ui/community/segmented-control`:
+ *
+ *   - iOS:     SwiftUI segmented `Picker` (system-styled).
+ *   - Android: a Material segmented control, accent-tinted via `tintColor`.
+ *   - Web:     the vendored `@react-native-segmented-control/segmented-control`
+ *              JS implementation, accent-tinted via `tintColor`.
+ *
+ * The API is value-based to match the rest of the design system (RadioGroup /
+ * Tabs / Select): pass the segment `values` plus a controlled `value` (or
+ * `defaultValue` for uncontrolled), and read selections back as the chosen
+ * string. A light haptic fires on each change, matching Slider / Switch.
+ *
+ * Theming: the accent color tints the selected segment on Android and web. iOS
+ * draws the system segmented control, which ignores a custom tint — pass
+ * `appearance` to force light/dark there.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   values={["Day", "Week", "Month"]}
+ *   value={range}
+ *   onValueChange={setRange}
+ * />
+ * ```
+ */
+export interface SegmentedControlProps {
+    /** Segment labels, in display order. */
+    values: string[];
+    /** Controlled selected value. Omit to use uncontrolled mode with `defaultValue`. */
+    value?: string;
+    /** Initial selected value for uncontrolled mode. Defaults to the first segment. */
+    defaultValue?: string;
+    /** Called with the selected segment's value. */
+    onValueChange?: (value: string) => void;
+    /** Disable interaction. @default false */
+    disabled?: boolean;
+    /**
+     * Accent color for the selected segment. Defaults to the theme accent.
+     * Applied on Android and web; iOS uses the system style.
+     */
+    tintColor?: string;
+    /** Force a color scheme irrespective of the system theme. */
+    appearance?: "light" | "dark";
+    /** Style override for the control. */
+    style?: StyleProp<ViewStyle>;
+}
+declare function SegmentedControl({ values, value: controlledValue, defaultValue, onValueChange, disabled, tintColor, appearance, style, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export { SegmentedControl };

package/dist/components/SegmentedControl.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useRef } from "react";
+import { SegmentedControl as NativeSegmentedControl } from "@expo/ui/community/segmented-control";
+import { useTheme } from "../hooks/useTheme.js";
+import { hapticLight } from "../lib/haptics.js";
+function SegmentedControl({ values, value: controlledValue, defaultValue, onValueChange, disabled = false, tintColor, appearance, style, }) {
+    const { theme } = useTheme();
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const selectedIndex = Math.max(0, values.indexOf(value ?? values[0]));
+    const lastIndex = useRef(selectedIndex);
+    const handleValueChange = useCallback((next) => {
+        const nextIndex = values.indexOf(next);
+        if (nextIndex !== lastIndex.current) {
+            lastIndex.current = nextIndex;
+            hapticLight();
+        }
+        if (!isControlled)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }, [isControlled, onValueChange, values]);
+    return (_jsx(NativeSegmentedControl, { values: values, selectedIndex: selectedIndex, enabled: !disabled, onValueChange: handleValueChange, tintColor: tintColor ?? theme.colors.accent, appearance: appearance ?? (theme.dark ? "dark" : "light"), style: style }));
+}
+export { SegmentedControl };

package/dist/components/Slider.d.ts

@@ -1,4 +1,24 @@
 import { StyleProp, ViewStyle } from "react-native";
+/**
+ * Slider — a themed range input backed by the platform's native slider via
+ * `@expo/ui/community/slider`:
+ *
+ *   - iOS:     SwiftUI `Slider`
+ *   - Android: Material 3 `Slider`
+ *   - Web:     native `<input type="range">` (themed via `accentColor`)
+ *
+ * The public `SliderProps` surface (value / onValueChange / min / max / step /
+ * disabled / showValue / size / style) is preserved, and the active track is
+ * themed with the design system's accent color on every platform. Thumb and
+ * inactive-track tints additionally apply on Android (iOS/web draw the system
+ * thumb). Haptic feedback fires on each step change, matching the prior
+ * hand-rolled slider.
+ *
+ * Platform-owned behaviors (props accepted for ergonomics, but the platform
+ * decides):
+ *   - `size` is accepted for call-site compatibility but has no effect — the
+ *     platform owns the track/thumb dimensions.
+ */
 export type SliderSize = "sm" | "md";
 export interface SliderProps {
     /** Current value */
@@ -11,14 +31,14 @@ export interface SliderProps {
     max?: number;
     /** Step increment @default 1 */
     step?: number;
-    /** Size variant @default "md" */
+    /** Size variant. Accepted for compatibility; the platform owns sizing. @default "md" */
     size?: SliderSize;
     /** Disable interaction @default false */
     disabled?: boolean;
-    /** Show value label above thumb @default false */
+    /** Show the current value as a label above the track @default false */
     showValue?: boolean;
     /** Style override for outer container */
     style?: StyleProp<ViewStyle>;
 }
-declare function Slider({ value, onValueChange, min, max, step, size, disabled, showValue, style: styleOverride, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+declare function Slider({ value, onValueChange, min, max, step, size: _size, disabled, showValue, style: styleOverride, }: SliderProps): import("react/jsx-runtime").JSX.Element;
 export { Slider };

package/dist/components/Slider.js

@@ -2,165 +2,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, PanResponder, Platform, StyleSheet, View } from "react-native";
+import { useCallback, useRef } from "react";
+import { View } from "react-native";
+import { Slider as NativeSlider } from "@expo/ui/community/slider";
 import { StyledText } from "./StyledText.js";
-const SIZES = {
-    sm: { track: 4, thumb: 16 },
-    md: { track: 6, thumb: 20 },
-};
-function clampAndSnap(raw, min, max, step) {
-    const clamped = Math.min(Math.max(raw, min), max);
-    const stepped = Math.round((clamped - min) / step) * step + min;
-    // Avoid floating-point drift
-    return Math.round(stepped * 1e6) / 1e6;
-}
-function getValueRatio(value, min, max) {
-    const range = max - min || 1;
-    return Math.min(Math.max((value - min) / range, 0), 1);
-}
-function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size = "md", disabled = false, showValue = false, style: styleOverride, }) {
-    const { theme, getShadowStyle, withAlpha } = useTheme();
-    const dims = SIZES[size];
+function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, 
+// Accepted for call-site compatibility; the platform owns track/thumb sizing.
+size: _size = "md", disabled = false, showValue = false, style: styleOverride, }) {
+    const { theme, withAlpha } = useTheme();
     const inactiveTrackColor = theme.dark ? withAlpha(palette.white, 0.1) : theme.colors.muted;
     const activeTrackColor = disabled
         ? theme.dark
             ? withAlpha(palette.white, 0.28)
             : theme.colors.mutedForeground
         : theme.colors.accent;
-    const thumbBackgroundColor = theme.dark ? theme.colors.card : theme.colors.background;
-    const thumbBorderColor = disabled
+    const thumbTintColor = disabled
         ? theme.dark
             ? withAlpha(palette.white, 0.32)
             : theme.colors.mutedForeground
         : theme.colors.accent;
-    const [trackWidth, setTrackWidth] = useState(0);
-    const trackWidthRef = useRef(0);
-    const thumbX = useRef(new Animated.Value(0)).current;
-    const lastSnappedValue = useRef(value);
-    const updateFromPosition = useCallback((rawX) => {
-        const width = trackWidthRef.current;
-        const x = Math.min(Math.max(rawX, 0), width);
-        thumbX.stopAnimation();
-        thumbX.setValue(x);
-        const ratio = width > 0 ? x / width : 0;
-        const raw = min + ratio * (max - min);
-        const snapped = clampAndSnap(raw, min, max, step);
-        if (snapped !== lastSnappedValue.current) {
-            lastSnappedValue.current = snapped;
+    // Fire a light haptic whenever the slider crosses a step boundary, matching
+    // the prior hand-rolled behavior. Native emits already-stepped values.
+    const lastValue = useRef(value);
+    const handleValueChange = useCallback((next) => {
+        if (next !== lastValue.current) {
+            lastValue.current = next;
             hapticLight();
         }
-        onValueChange?.(snapped);
-    }, [max, min, onValueChange, step, thumbX]);
-    const handleGesture = useCallback((event) => {
-        updateFromPosition(event.nativeEvent.locationX);
-    }, [updateFromPosition]);
-    const panResponder = useMemo(() => PanResponder.create({
-        onStartShouldSetPanResponder: () => !disabled,
-        onMoveShouldSetPanResponder: () => !disabled,
-        onPanResponderGrant: handleGesture,
-        onPanResponderMove: handleGesture,
-    }), [disabled, handleGesture]);
-    useEffect(() => {
-        const ratio = getValueRatio(value, min, max);
-        const width = trackWidthRef.current;
-        if (width > 0) {
-            Animated.timing(thumbX, {
-                toValue: ratio * width,
-                duration: 80,
-                useNativeDriver: true,
-            }).start();
-        }
-        lastSnappedValue.current = value;
-    }, [max, min, thumbX, value]);
-    const onTrackLayout = useCallback((e) => {
-        const w = e.nativeEvent.layout.width;
-        trackWidthRef.current = w;
-        setTrackWidth(w);
-        // Set initial thumb position without animation
-        const ratio = getValueRatio(value, min, max);
-        thumbX.stopAnimation();
-        thumbX.setValue(ratio * w);
-    }, [max, min, thumbX, value]);
-    const safeTrackWidth = Math.max(trackWidth, 1);
-    const fillScale = thumbX.interpolate({
-        inputRange: [0, safeTrackWidth],
-        outputRange: [0, 1],
-        extrapolate: "clamp",
-    });
-    const thumbTranslateX = thumbX.interpolate({
-        inputRange: [0, safeTrackWidth],
-        outputRange: [-dims.thumb / 2, safeTrackWidth - dims.thumb / 2],
-        extrapolate: "clamp",
-    });
-    const labelTranslateX = thumbX.interpolate({
-        inputRange: [0, safeTrackWidth],
-        outputRange: [-14, safeTrackWidth - 14],
-        extrapolate: "clamp",
-    });
-    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    // Accessibility action handler
-    const handleAccessibilityAction = useCallback((event) => {
-        const action = event.nativeEvent.actionName;
-        let next = value;
-        if (action === "increment") {
-            next = Math.min(value + step, max);
-        }
-        else if (action === "decrement") {
-            next = Math.max(value - step, min);
-        }
-        if (next !== value) {
-            onValueChange?.(next);
-        }
-    }, [value, step, min, max, onValueChange]);
-    return (_jsxs(View, { style: [{ opacity: disabled ? 0.5 : 1 }, flattenedStyle], accessibilityRole: "adjustable", accessibilityValue: { min, max, now: value }, accessibilityActions: [
-            { name: "increment", label: "Increment" },
-            { name: "decrement", label: "Decrement" },
-        ], onAccessibilityAction: handleAccessibilityAction, children: [showValue && (_jsx(Animated.View, { style: [
-                    {
-                        position: "absolute",
-                        top: -20,
-                        width: 28,
-                        alignItems: "center",
-                    },
-                    { transform: [{ translateX: labelTranslateX }] },
-                    { pointerEvents: "none" },
-                ], children: _jsx(StyledText, { selectable: false, style: {
-                        fontSize: 12,
-                        color: theme.colors.textDim,
-                        userSelect: "none",
-                    }, children: value }) })), _jsxs(View, { style: {
-                    height: dims.thumb,
-                    justifyContent: "center",
-                    ...(Platform.OS === "web" && { cursor: disabled ? "default" : "pointer" }),
-                }, onLayout: onTrackLayout, ...panResponder.panHandlers, children: [_jsx(View, { style: {
-                            height: dims.track,
-                            borderRadius: dims.track / 2,
-                            backgroundColor: inactiveTrackColor,
-                            overflow: "hidden",
-                        }, children: _jsx(Animated.View, { style: [
-                                {
-                                    width: "100%",
-                                    height: dims.track,
-                                    borderRadius: dims.track / 2,
-                                    backgroundColor: activeTrackColor,
-                                    transformOrigin: "left",
-                                },
-                                { transform: [{ scaleX: fillScale }] },
-                            ] }) }), _jsx(Animated.View, { style: [
-                            {
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                width: dims.thumb,
-                                height: dims.thumb,
-                                borderRadius: dims.thumb / 2,
-                                backgroundColor: thumbBackgroundColor,
-                                borderWidth: 1,
-                                borderColor: thumbBorderColor,
-                                ...getShadowStyle("subtle"),
-                            },
-                            { transform: [{ translateX: thumbTranslateX }] },
-                        ] })] })] }));
+        onValueChange?.(next);
+    }, [onValueChange]);
+    return (_jsxs(View, { style: [{ opacity: disabled ? 0.5 : 1, alignSelf: "stretch" }, styleOverride], children: [showValue && (_jsx(StyledText, { selectable: false, style: {
+                    fontSize: 12,
+                    color: theme.colors.textDim,
+                    marginBottom: 4,
+                    userSelect: "none",
+                }, children: value })), _jsx(NativeSlider, { value: value, minimumValue: min, maximumValue: max, step: step, disabled: disabled, onValueChange: handleValueChange, style: { width: "100%" }, 
+                // Active track — honored on iOS, Android, and web (`accentColor`).
+                minimumTrackTintColor: activeTrackColor, 
+                // Inactive track + thumb — honored on Android; system-drawn elsewhere.
+                maximumTrackTintColor: inactiveTrackColor, thumbTintColor: thumbTintColor })] }));
 }
 export { Slider };

package/dist/components/Tabs.d.ts

@@ -32,7 +32,7 @@ declare function TabsTriggerInner({ icon, style, children, value, ...props }: Ta
  * </Tabs.Trigger>
  * ```
  */
-declare function TabsTriggerText({ style, ...props }: React.ComponentProps<typeof StyledText>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTriggerText({ style, numberOfLines, ...props }: React.ComponentProps<typeof StyledText>): import("react/jsx-runtime").JSX.Element;
 export interface TabsContentProps extends TabsPrimitive.ContentProps {
     style?: StyleProp<ViewStyle>;
 }

package/dist/components/Tabs.js

@@ -79,6 +79,10 @@ function TabsTriggerInner({ icon, style, children, value, ...props }) {
             : theme.colors.mutedForeground;
     const triggerBaseStyle = {
         flex: 1,
+        // Allow the trigger to shrink below its content's intrinsic width so long
+        // labels are constrained to the trigger's flex share (and can ellipsize)
+        // instead of overflowing and clipping at the screen edge.
+        minWidth: 0,
         height: Platform.OS === "web" ? sizeConfig.height : spacing.touchTarget,
         paddingHorizontal: sizeConfig.paddingHorizontal,
         flexDirection: "row",
@@ -119,10 +123,10 @@ const TabsTrigger = TabsTriggerInner;
  * </Tabs.Trigger>
  * ```
  */
-function TabsTriggerText({ style, ...props }) {
+function TabsTriggerText({ style, numberOfLines = 1, ...props }) {
     const { size } = useTabsContext();
     const { fontSize } = SIZE_CONFIGS[size];
-    return _jsx(StyledText, { selectable: false, style: [{ fontSize }, style], ...props });
+    return (_jsx(StyledText, { selectable: false, numberOfLines: numberOfLines, style: [{ fontSize, flexShrink: 1 }, style], ...props }));
 }
 function TabsContent({ style, children, ...props }) {
     return (_jsx(TabsPrimitive.Content, { style: StyleSheet.flatten([{ marginTop: spacing.md }, style]), ...props, children: children }));
@@ -136,6 +140,10 @@ const triggerContentStyles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         gap: spacing.xs,
+        // Shrink with the trigger (paired with the trigger's minWidth:0) so a long
+        // label ellipsizes rather than forcing the trigger wider than its share.
+        flexShrink: 1,
+        minWidth: 0,
     },
 });
 // ============================================================================

package/dist/components/TextInput.d.ts

@@ -120,5 +120,5 @@ interface TextInputCustomProps extends TextInputProps {
  * />
  * ```
  */
-export declare function TextInput({ variant, size, label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable, ref, ...rest }: TextInputCustomProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextInput(props: TextInputCustomProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
+import { Host, TextInput as ExpoTextInput, useNativeState, } from "@expo/ui";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { fontFamilies } from "../constants/fonts.js";
@@ -70,7 +71,21 @@ const SIZE_CONFIGS = {
  * />
  * ```
  */
-export function TextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ref, ...rest }) {
+export function TextInput(props) {
+    // On iOS/Android, route to the native @expo/ui field for flicker-free,
+    // platform-native text editing. Web keeps the full-featured RN implementation
+    // (no flicker problem there, and it preserves every in-field affordance).
+    if (Platform.OS !== "web") {
+        return _jsx(NativeTextInput, { ...props });
+    }
+    return _jsx(WebTextInput, { ...props });
+}
+/**
+ * Web / fallback implementation — the original React Native TextInput with the
+ * complete chrome (variants, sizes, overlays, password toggle, clear button,
+ * error icon). Unchanged from the pre-native version.
+ */
+function WebTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ref, ...rest }) {
     const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
     const [focused, setFocused] = useState(false);
@@ -157,7 +172,111 @@ export function TextInput({ variant = "outline", size = "md", label, helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
 }
+/**
+ * Native (iOS / Android) implementation backed by `@expo/ui`'s TextInput, which
+ * bridges to SwiftUI's `TextField`/`SecureField` and Jetpack Compose's
+ * `TextField`. The text buffer lives natively (via `useNativeState`), so typing
+ * never round-trips through React state — eliminating the cursor flicker seen on
+ * controlled RN inputs.
+ *
+ * By design (reliability over feature-parity) this path renders the field plus
+ * sibling label / helper / error text only. The in-field overlays from the web
+ * implementation — password visibility toggle, clear button, left/right
+ * elements, and error icon — are intentionally omitted on native to avoid
+ * layering RN views over the native host view.
+ */
+function NativeTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, forceLight, inputMode, onChangeText, value, defaultValue, editable = true, multiline, secureTextEntry, showSecureEntryToggle, ref, wrapperStyle, 
+// Web-only affordances. Destructured out of `rest` so they're NOT forwarded to
+// the native field; intentionally unused on this path (see doc comment above).
+// `style` (an RN TextStyle) is likewise dropped — it doesn't map to
+// UniversalStyle and is replaced by the `boxStyle`/`textStyle` computed below.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
+    const { theme, getContrastingColor } = useTheme();
+    const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const hasError = error || !!errorText;
+    const sizeConfig = SIZE_CONFIGS[size];
+    // Password visibility toggle. Flipping `secureTextEntry` swaps SwiftUI's
+    // SecureField <-> TextField on iOS and toggles Compose's visualTransformation
+    // on Android; both bind the same `state` observable, so the text survives.
+    const hasSecureToggle = !!(secureTextEntry && showSecureEntryToggle);
+    const effectiveSecureTextEntry = secureTextEntry && !passwordVisible;
+    // Native text buffer. Seeded once; `value` changes are reconciled below.
+    const state = useNativeState(value ?? defaultValue ?? "");
+    // Reconcile controlled `value` -> native buffer WITHOUT echoing keystrokes.
+    // Only write when the parent's value genuinely diverges (resets, clears,
+    // programmatic sets); typing already updated `state` natively.
+    useEffect(() => {
+        if (value !== undefined && value !== state.value) {
+            state.value = value;
+        }
+    }, [value, state]);
+    // The inner ref is the @expo/ui handle; the outward ref is typed as
+    // RNTextInput because that's what the public TextInputCustomProps declares.
+    // We expose the subset consumers use, plus a `setNativeProps` shim so the
+    // uncontrolled AuthTextField can push corrected text into the native buffer.
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focus: () => innerRef.current?.focus(),
+        blur: () => innerRef.current?.blur(),
+        clear: () => {
+            state.value = "";
+        },
+        isFocused: () => innerRef.current?.isFocused() ?? false,
+        setNativeProps: (props) => {
+            if (typeof props?.text === "string") {
+                state.value = props.text;
+            }
+        },
+    }), [state]);
+    const backgroundColor = forceLight
+        ? palette.white
+        : variant === "filled"
+            ? theme.colors.card
+            : "transparent";
+    const borderColor = hasError
+        ? theme.colors.destructive
+        : forceLight
+            ? "#d1d5db"
+            : theme.colors.input;
+    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 = {
+        backgroundColor,
+        borderColor,
+        borderRadius: variant === "underlined" ? 0 : spacing.radiusMd,
+        borderWidth: variant === "outline" ? 1 : 0,
+        paddingHorizontal: sizeConfig.paddingHorizontal,
+        paddingVertical: sizeConfig.paddingVertical,
+        opacity: editable === false ? 0.6 : 1,
+        ...(multiline ? null : { height: sizeConfig.height }),
+    };
+    const textStyle = {
+        color: textColor,
+        fontSize: sizeConfig.fontSize,
+        fontFamily: fontFamilies.sansSerif.regular,
+    };
+    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 }))] }));
+}
 const createStyles = (theme, variant, size) => StyleSheet.create({
+    nativeHost: {
+        width: "100%",
+    },
+    nativeRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xs,
+    },
+    nativeHostFlex: {
+        flex: 1,
+    },
+    nativePasswordToggle: {
+        paddingHorizontal: spacing.xs,
+    },
     wrapper: {
         width: "100%",
         position: "relative",

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export * from "./Notification";
 export * from "./Popover";
 export * from "./Progress";
 export * from "./RadioGroup";
+export * from "./SegmentedControl";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Skeleton";

package/dist/components/index.js

@@ -21,6 +21,7 @@ export * from "./Notification.js";
 export * from "./Popover.js";
 export * from "./Progress.js";
 export * from "./RadioGroup.js";
+export * from "./SegmentedControl.js";
 export * from "./Select.js";
 export * from "./Separator.js";
 export * from "./Skeleton.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -108,6 +108,7 @@
     "@rn-primitives/tooltip": "~1.4.0"
   },
   "peerDependencies": {
+    "@expo/ui": ">=56.0.0 <57.0.0",
     "@react-native-async-storage/async-storage": ">=2.2.0 <2.3.0",
     "expo": ">=55.0.0 <57.0.0",
     "expo-font": ">=55.0.0 <57.0.0",

package/dist/components/BottomSheetKeyboard.d.ts

@@ -1,7 +0,0 @@
-import { Animated } from "react-native";
-export declare function useBottomSheetKeyboardAnimation(): {
-    height: Animated.Value;
-};
-export declare const BottomSheetKeyboardController: {
-    dismiss(): void;
-};