@mrmeg/expo-ui 0.7.2 → 0.8.0

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/Select.d.ts

@@ -14,7 +14,7 @@ type SelectTriggerProps = SelectPrimitive.TriggerProps & {
     size?: SelectSize;
     error?: boolean;
 };
-declare function SelectTrigger({ size, error, children, style: styleOverride, disabled, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ size, error, children, style: styleOverride, disabled, ...props }: SelectTriggerProps): React.JSX.Element;
 /**
  * SelectValue Component
  * Displays the selected value text or placeholder
@@ -22,7 +22,7 @@ declare function SelectTrigger({ size, error, children, style: styleOverride, di
 type SelectValueProps = SelectPrimitive.ValueProps & {
     size?: SelectSize;
 };
-declare function SelectValue({ size, placeholder, style: styleOverride, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ size, placeholder, style: styleOverride, ...props }: SelectValueProps): React.JSX.Element;
 /**
  * SelectContent Component
  * Dropdown overlay following the DropdownMenu.Content pattern
@@ -31,32 +31,32 @@ declare function SelectValue({ size, placeholder, style: styleOverride, ...props
 type SelectContentProps = SelectPrimitive.ContentProps & {
     portalHost?: string;
 };
-declare function SelectContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: SelectContentProps): React.JSX.Element;
 /**
  * SelectItem Component
  * Individual option in the select dropdown
  * Shows a check icon on the left when selected
  */
 type SelectItemProps = SelectPrimitive.ItemProps;
-declare function SelectItem({ children, style: styleOverride, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ children, style: styleOverride, ...props }: SelectItemProps): React.JSX.Element;
 /**
  * SelectGroup Component
  * Groups related select items together
  */
 type SelectGroupProps = SelectPrimitive.GroupProps;
-declare function SelectGroup({ style: styleOverride, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ style: styleOverride, ...props }: SelectGroupProps): React.JSX.Element;
 /**
  * SelectLabel Component
  * Label for a group of select items
  */
 type SelectLabelProps = SelectPrimitive.LabelProps;
-declare function SelectLabel({ style: styleOverride, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ style: styleOverride, ...props }: SelectLabelProps): React.JSX.Element;
 /**
  * SelectSeparator Component
  * Visual divider between select item groups
  */
 type SelectSeparatorProps = SelectPrimitive.SeparatorProps;
-declare function SelectSeparator({ style: styleOverride, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ style: styleOverride, ...props }: SelectSeparatorProps): React.JSX.Element;
 /**
  * Select Component with Sub-components
  * Properly typed interface for dot notation access (e.g., Select.Trigger)

package/dist/components/Separator.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import * as SeparatorPrimitive from "@rn-primitives/separator";
 /**
@@ -79,5 +80,5 @@ export interface SeparatorProps extends Omit<SeparatorPrimitive.RootProps, "styl
  * <Separator style={{ opacity: 0.5 }} />
  * ```
  */
-declare function Separator({ orientation, decorative, size, variant, style: styleOverride, margin, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function Separator({ orientation, decorative, size, variant, style: styleOverride, margin, ...props }: SeparatorProps): React.JSX.Element;
 export { Separator };

package/dist/components/Skeleton.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 export interface SkeletonProps {
     /** Width of the skeleton element */
@@ -23,7 +24,7 @@ export interface SkeletonProps {
  * <Skeleton width={40} height={40} circle />
  * ```
  */
-export declare function Skeleton({ width, height, borderRadius, circle, style, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ width, height, borderRadius, circle, style, }: SkeletonProps): React.JSX.Element;
 export interface SkeletonTextProps {
     /** Number of text lines to render */
     lines?: number;
@@ -38,7 +39,7 @@ export interface SkeletonTextProps {
  * SkeletonText renders N horizontal bars simulating text.
  * The last line is rendered at 60% width for a natural look.
  */
-export declare function SkeletonText({ lines, lineHeight, gap, style, }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonText({ lines, lineHeight, gap, style, }: SkeletonTextProps): React.JSX.Element;
 export interface SkeletonAvatarProps {
     /** Diameter of the circular avatar placeholder */
     size?: number;
@@ -48,7 +49,7 @@ export interface SkeletonAvatarProps {
 /**
  * SkeletonAvatar is a circular skeleton shorthand.
  */
-export declare function SkeletonAvatar({ size, style }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonAvatar({ size, style }: SkeletonAvatarProps): React.JSX.Element;
 export interface SkeletonCardProps {
     /** Whether to show an image placeholder area */
     showImage?: boolean;
@@ -65,4 +66,4 @@ export interface SkeletonCardProps {
  * SkeletonCard composes an image placeholder, optional avatar row,
  * and text lines in a Card-styled wrapper.
  */
-export declare function SkeletonCard({ showImage, imageHeight, showAvatar, textLines, style, }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonCard({ showImage, imageHeight, showAvatar, textLines, style, }: SkeletonCardProps): React.JSX.Element;

package/dist/components/Slider.d.ts

@@ -1,4 +1,25 @@
+import React from "react";
 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 +32,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): React.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/StatusBar.d.ts

@@ -1 +1 @@
-export declare const StatusBar: () => import("react/jsx-runtime").JSX.Element;
+export declare const StatusBar: () => import("react").JSX.Element;

package/dist/components/StyledText.d.ts

@@ -69,53 +69,53 @@ export type TextProps = RNTextProps & {
  *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
-export declare function StyledText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function StyledText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Text Component
  * Uses serif font family (DM Serif Display)
  */
-export declare function SerifText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Text Component
  * Uses sans-serif font family (DM Sans)
  */
-export declare function SansSerifText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SansSerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Bold Text Component
  * Uses serif font family — DM Serif Display only has regular weight
  */
-export declare function SerifBoldText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Bold Text Component
  * Uses sans-serif font family with semibold weight (DM Sans 600)
  */
-export declare function SansSerifBoldText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SansSerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Display Text Component
  * Uses DM Serif Display at display size — for hero text and splash screens
  */
-export declare function DisplayText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function DisplayText(props: TextProps): import("react").JSX.Element;
 /**
  * Title Text - Large semibold text for page titles
  */
-export declare function TitleText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function TitleText(props: TextProps): import("react").JSX.Element;
 /**
  * Heading Text - Section heading text
  */
-export declare function HeadingText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeadingText(props: TextProps): import("react").JSX.Element;
 /**
  * Subheading Text - Subsection heading text
  */
-export declare function SubheadingText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubheadingText(props: TextProps): import("react").JSX.Element;
 /**
  * Body Text - Default text for paragraphs and content
  */
-export declare function BodyText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function BodyText(props: TextProps): import("react").JSX.Element;
 /**
  * Caption Text - Small text for captions and secondary content
  */
-export declare function CaptionText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function CaptionText(props: TextProps): import("react").JSX.Element;
 /**
  * Label Text - Medium weight text for form labels
  */
-export declare function LabelText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function LabelText(props: TextProps): import("react").JSX.Element;

package/dist/components/Switch.d.ts

@@ -1,4 +1,5 @@
 import * as SwitchPrimitives from "@rn-primitives/switch";
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 /**
  * Switch variant styles
@@ -40,5 +41,5 @@ interface SwitchProps extends Omit<SwitchPrimitives.RootProps, "style"> {
      */
     style?: StyleProp<ViewStyle>;
 }
-declare function Switch({ variant, labelOn, labelOff, size, thumbSize, loading, style: styleOverride, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare function Switch({ variant, labelOn, labelOff, size, thumbSize, loading, style: styleOverride, ...props }: SwitchProps): React.JSX.Element;
 export { Switch };

package/dist/components/Tabs.d.ts

@@ -9,16 +9,16 @@ export interface TabsProps extends TabsPrimitive.RootProps {
     variant?: TabsVariant;
     size?: TabsSize;
 }
-declare function TabsRoot({ variant, size, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsRoot({ variant, size, children, ...props }: TabsProps): React.JSX.Element;
 export interface TabsListProps extends TabsPrimitive.ListProps {
     style?: StyleProp<ViewStyle>;
 }
-declare function TabsList({ style, children, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ style, children, ...props }: TabsListProps): React.JSX.Element;
 export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {
     icon?: IconName;
     style?: StyleProp<ViewStyle>;
 }
-declare function TabsTriggerInner({ icon, style, children, value, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsTriggerInner({ icon, style, children, value, ...props }: TabsTriggerProps): React.JSX.Element;
 /**
  * TabsTrigger.Text
  * Label text for a TabsTrigger. Reads the tab size from context and applies the
@@ -32,11 +32,11 @@ 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>): React.JSX.Element;
 export interface TabsContentProps extends TabsPrimitive.ContentProps {
     style?: StyleProp<ViewStyle>;
 }
-declare function TabsContent({ style, children, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ style, children, ...props }: TabsContentProps): React.JSX.Element;
 declare const TabsTriggerCompound: typeof TabsTriggerInner & {
     Text: typeof TabsTriggerText;
 };

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.Element;
 export {};