@mrmeg/expo-ui 0.1.5 → 0.1.6

package/dist/components/Select.js

@@ -3,10 +3,9 @@ import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
-import { palette } from "../constants/colors.js";
 import * as SelectPrimitive from "@rn-primitives/select";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -37,7 +36,7 @@ const SIZE_CONFIGS = {
 function SelectTrigger({ size = "md", error = false, children, style: styleOverride, disabled, ...props }) {
     const { theme } = useTheme();
     const sizeConfig = SIZE_CONFIGS[size];
-    return (_jsxs(SelectPrimitive.Trigger, { disabled: disabled, ...props, style: {
+    return (_jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, style: {
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
@@ -50,12 +49,13 @@ function SelectTrigger({ size = "md", error = false, children, style: styleOverr
             ...(Platform.OS === "web" && {
                 cursor: disabled ? "not-allowed" : "pointer",
                 outlineStyle: "none",
+                userSelect: "none",
             }),
             ...(disabled && { opacity: 0.5 }),
             ...(styleOverride && typeof styleOverride !== "function"
                 ? StyleSheet.flatten(styleOverride)
                 : {}),
-        }, children: [typeof children === "function" ? null : children, _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.mutedForeground })] }));
+        }, children: _jsx(TextColorContext.Provider, { value: theme.colors.text, children: _jsxs(TextSelectabilityContext.Provider, { value: false, children: [typeof children === "function" ? null : children, _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.mutedForeground })] }) }) }));
 }
 function SelectValue({ size = "md", placeholder, style: styleOverride, ...props }) {
     const { theme } = useTheme();
@@ -64,39 +64,43 @@ function SelectValue({ size = "md", placeholder, style: styleOverride, ...props
             fontSize: sizeConfig.fontSize,
             color: theme.colors.text,
             flex: 1,
+            userSelect: "none",
             ...(styleOverride && typeof styleOverride !== "function"
                 ? StyleSheet.flatten(styleOverride)
                 : {}),
         } }));
 }
 function SelectContent({ side, align = "start", sideOffset = 4, portalHost, style: styleOverride, ...props }) {
-    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const { theme, getShadowStyle } = useTheme();
     const shadowStyle = StyleSheet.flatten(getShadowStyle("soft"));
     const insets = useSafeAreaInsets();
-    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
     return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({
                     native: StyleSheet.absoluteFill,
                     default: undefined,
-                }), children: _jsx(AnimatedView, { type: "fade", children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(SelectPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
-                                    backgroundColor: theme.colors.background,
-                                    borderWidth: 1,
-                                    borderColor: theme.colors.border,
-                                    borderRadius: spacing.radiusSm,
-                                    padding: spacing.xs,
-                                    minWidth: 128,
-                                    overflow: "hidden",
-                                    ...shadowStyle,
-                                    ...(Platform.OS === "web" && {
-                                        zIndex: 50,
-                                        cursor: "default",
-                                    }),
-                                    ...(styleOverride && typeof styleOverride !== "function"
-                                        ? StyleSheet.flatten(styleOverride)
-                                        : {}),
-                                } }) }) }) }) }) }) }));
+                }), children: _jsx(AnimatedView, { type: "fade", children: _jsx(TextColorContext.Provider, { value: theme.colors.popoverForeground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(SelectPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                                        backgroundColor: theme.colors.popover,
+                                        borderWidth: 1,
+                                        borderColor: theme.colors.border,
+                                        borderRadius: spacing.radiusSm,
+                                        padding: spacing.xs,
+                                        minWidth: 128,
+                                        overflow: "hidden",
+                                        ...shadowStyle,
+                                        ...(Platform.OS === "web" && {
+                                            zIndex: 50,
+                                            cursor: "default",
+                                            userSelect: "none",
+                                        }),
+                                        ...(styleOverride && typeof styleOverride !== "function"
+                                            ? StyleSheet.flatten(styleOverride)
+                                            : {}),
+                                    } }) }) }) }) }) }) }) }));
 }
 function SelectItem({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
+    const shouldRenderDefaultText = children == null ||
+        typeof children === "string" ||
+        typeof children === "number";
     return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(SelectPrimitive.Item, { ...props, style: {
                 position: "relative",
                 flexDirection: "row",
@@ -110,6 +114,7 @@ function SelectItem({ children, style: styleOverride, ...props }) {
                 ...(Platform.OS === "web" && {
                     cursor: props.disabled ? "not-allowed" : "pointer",
                     outlineStyle: "none",
+                    userSelect: "none",
                 }),
                 ...(props.disabled && { opacity: 0.5 }),
                 ...(styleOverride && typeof styleOverride !== "function"
@@ -122,7 +127,11 @@ function SelectItem({ children, style: styleOverride, ...props }) {
                         width: 14,
                         alignItems: "center",
                         justifyContent: "center",
-                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.text, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(SelectPrimitive.ItemText, {}), typeof children === "function" ? null : children] }) }));
+                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.accent, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(TextSelectabilityContext.Provider, { value: false, children: shouldRenderDefaultText ? (_jsx(SelectPrimitive.ItemText, { style: {
+                            color: theme.colors.popoverForeground,
+                            fontSize: 14,
+                            lineHeight: 20,
+                        } })) : typeof children === "function" ? null : (children) })] }) }));
 }
 function SelectGroup({ style: styleOverride, ...props }) {
     return (_jsx(SelectPrimitive.Group, { ...props, style: {
@@ -138,7 +147,8 @@ function SelectLabel({ style: styleOverride, ...props }) {
             paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
             fontSize: 14,
             fontWeight: "500",
-            color: theme.colors.text,
+            color: theme.colors.popoverForeground,
+            userSelect: "none",
             ...(styleOverride && typeof styleOverride !== "function"
                 ? StyleSheet.flatten(styleOverride)
                 : {}),

package/dist/components/Slider.js

@@ -2,7 +2,7 @@ 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, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
@@ -18,9 +18,25 @@ function clampAndSnap(raw, min, max, step) {
     // 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 } = useTheme();
+    const { theme, getShadowStyle, withAlpha } = useTheme();
     const dims = SIZES[size];
+    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
+        ? theme.dark
+            ? withAlpha(palette.white, 0.32)
+            : theme.colors.mutedForeground
+        : theme.colors.accent;
     // Track layout width captured via onLayout
     const trackWidth = useSharedValue(0);
     // Thumb position in pixels along the track
@@ -36,23 +52,23 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
     const jsHaptic = useCallback(() => {
         hapticLight();
     }, []);
-    // Sync external value prop changes with animation
-    const prevExternalValue = useRef(value);
-    if (value !== prevExternalValue.current) {
-        prevExternalValue.current = value;
-        if (trackWidth.value > 0) {
-            const ratio = (value - min) / (max - min || 1);
-            thumbX.value = withTiming(ratio * trackWidth.value, { duration: 80 });
+    // Sync external value prop changes after render. Reanimated warns when shared
+    // values are read or written while React is rendering.
+    useEffect(() => {
+        const ratio = getValueRatio(value, min, max);
+        const width = trackWidth.value;
+        if (width > 0) {
+            thumbX.value = withTiming(ratio * width, { duration: 80 });
         }
         lastSnappedValue.value = value;
-    }
+    }, [lastSnappedValue, max, min, thumbX, trackWidth, value]);
     const onTrackLayout = useCallback((e) => {
         const w = e.nativeEvent.layout.width;
         trackWidth.value = w;
         // Set initial thumb position without animation
-        const ratio = (value - min) / (max - min || 1);
+        const ratio = getValueRatio(value, min, max);
         thumbX.value = ratio * w;
-    }, [value, min, max]);
+    }, [max, min, thumbX, trackWidth, value]);
     const panGesture = Gesture.Pan()
         .enabled(!disabled)
         .onBegin((e) => {
@@ -117,7 +133,7 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
                         alignItems: "center",
                     },
                     valueLabelStyle,
-                ], pointerEvents: "none", children: _jsx(StyledText, { style: {
+                ], pointerEvents: "none", children: _jsx(StyledText, { selectable: false, style: {
                         fontSize: 11,
                         color: theme.colors.textDim,
                         userSelect: "none",
@@ -128,13 +144,13 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
                     }, onLayout: onTrackLayout, children: [_jsx(View, { style: {
                                 height: dims.track,
                                 borderRadius: dims.track / 2,
-                                backgroundColor: theme.colors.muted,
+                                backgroundColor: inactiveTrackColor,
                                 overflow: "hidden",
                             }, children: _jsx(Animated.View, { style: [
                                     {
                                         height: dims.track,
                                         borderRadius: dims.track / 2,
-                                        backgroundColor: theme.colors.primary,
+                                        backgroundColor: activeTrackColor,
                                     },
                                     fillStyle,
                                 ] }) }), _jsx(Animated.View, { style: [
@@ -145,16 +161,10 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
                                     width: dims.thumb,
                                     height: dims.thumb,
                                     borderRadius: dims.thumb / 2,
-                                    backgroundColor: palette.white,
+                                    backgroundColor: thumbBackgroundColor,
                                     borderWidth: 1,
-                                    borderColor: theme.colors.border,
-                                    ...(Platform.OS !== "web" && {
-                                        shadowColor: "#000",
-                                        shadowOffset: { width: 0, height: 1 },
-                                        shadowOpacity: 0.15,
-                                        shadowRadius: 2,
-                                        elevation: 2,
-                                    }),
+                                    borderColor: thumbBorderColor,
+                                    ...getShadowStyle("subtle"),
                                 },
                                 thumbAnimatedStyle,
                             ] })] }) })] }));

package/dist/components/StyledText.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text as RNText, TextProps as RNTextProps } from "react-native";
+import { Text as RNText, TextProps as RNTextProps, StyleProp, TextStyle } from "react-native";
 /**
  * TextClassContext provides className context for nested text components
  * Used by @rn-primitives to apply consistent styling through the component tree
@@ -10,6 +10,16 @@ export declare const TextClassContext: React.Context<string | undefined>;
  * Allows parent components (like Button) to override text color for all children
  */
 export declare const TextColorContext: React.Context<string | undefined>;
+/**
+ * TextStyleContext allows controls such as Button to pass sizing typography to
+ * nested StyledText children without forcing consumers to use the `text` prop.
+ */
+export declare const TextStyleContext: React.Context<StyleProp<TextStyle>>;
+/**
+ * Allows interactive controls to disable text selection for nested StyledText
+ * without changing the package-wide default for readable content.
+ */
+export declare const TextSelectabilityContext: React.Context<boolean | undefined>;
 /**
  * Font size variants following the DM Sans / DM Serif Display scale
  */
@@ -71,7 +81,8 @@ export type TextProps = RNTextProps & {
  * - Semantic variants (title, heading, subheading, body, caption, label)
  * - Text alignment prop
  * - Font weight options (light, regular, medium, semibold, bold)
- * - Text selection enabled by default (userSelect: "auto")
+ * - Text selection enabled by default; pass `selectable={false}` for control
+ *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
 export declare const StyledText: React.ForwardRefExoticComponent<RNTextProps & {

package/dist/components/StyledText.js

@@ -14,6 +14,16 @@ export const TextClassContext = React.createContext(undefined);
  * Allows parent components (like Button) to override text color for all children
  */
 export const TextColorContext = React.createContext(undefined);
+/**
+ * TextStyleContext allows controls such as Button to pass sizing typography to
+ * nested StyledText children without forcing consumers to use the `text` prop.
+ */
+export const TextStyleContext = React.createContext(undefined);
+/**
+ * Allows interactive controls to disable text selection for nested StyledText
+ * without changing the package-wide default for readable content.
+ */
+export const TextSelectabilityContext = React.createContext(undefined);
 const FONT_SIZES = {
     xs: 11,
     sm: 12,
@@ -35,9 +45,9 @@ const LINE_HEIGHTS = {
     display: 40.8,
 };
 const LETTER_SPACING = {
-    sm: 0.5,
-    xxl: -0.3,
-    display: -0.5,
+    sm: 0,
+    xxl: 0,
+    display: 0,
 };
 const SEMANTIC_CONFIGS = {
     title: { size: "xxl", weight: "semibold" },
@@ -69,14 +79,18 @@ const getFontFamilyWeight = (weight) => {
  * - Semantic variants (title, heading, subheading, body, caption, label)
  * - Text alignment prop
  * - Font weight options (light, regular, medium, semibold, bold)
- * - Text selection enabled by default (userSelect: "auto")
+ * - Text selection enabled by default; pass `selectable={false}` for control
+ *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
 export const StyledText = forwardRef((props, ref) => {
-    const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, children, ...otherProps } = props;
+    const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, selectable, children, ...otherProps } = props;
     const { theme } = useTheme();
     // Check if there's a color override from parent context (e.g., Button)
     const contextColor = React.useContext(TextColorContext);
+    const contextTextStyle = React.useContext(TextStyleContext);
+    const contextSelectable = React.useContext(TextSelectabilityContext);
+    const resolvedSelectable = selectable ?? contextSelectable ?? true;
     // Use context color if provided, otherwise use theme default
     const color = contextColor ?? theme.colors.text;
     // If semantic variant is provided, use its config
@@ -99,6 +113,12 @@ export const StyledText = forwardRef((props, ref) => {
     const styleHasFontSize = flatStyle && "fontSize" in flatStyle;
     const styleHasLineHeight = flatStyle && "lineHeight" in flatStyle;
     const resolvedLineHeight = styleHasFontSize && !styleHasLineHeight ? undefined : lineHeight;
+    const flattenedContextTextStyle = contextTextStyle
+        ? StyleSheet.flatten(contextTextStyle)
+        : undefined;
+    const resolvedContextTextStyle = flattenedContextTextStyle && styleHasFontSize && !styleHasLineHeight
+        ? { ...flattenedContextTextStyle, lineHeight: undefined }
+        : contextTextStyle;
     const i18nText = translateText(tx, text, txOptions);
     const content = i18nText || children;
     return (_jsx(RNText, { ref: ref, style: [
@@ -107,15 +127,16 @@ export const StyledText = forwardRef((props, ref) => {
                 fontFamily,
                 fontSize,
                 ...(resolvedLineHeight !== undefined && { lineHeight: resolvedLineHeight }),
-                userSelect: "auto", // Changed from "none" to allow text selection
+                userSelect: resolvedSelectable ? "auto" : "none",
                 ...(letterSpacing !== undefined && { letterSpacing }),
                 ...(align && { textAlign: align }),
             },
+            resolvedContextTextStyle,
             style,
             // When a parent (Button, ToggleGroupItem) sets TextColorContext,
             // that color must win over any color in the style prop
             contextColor != null && { color: contextColor },
-        ], ...otherProps, children: content }));
+        ], selectable: resolvedSelectable, ...otherProps, children: content }));
 });
 StyledText.displayName = "StyledText";
 /**

package/dist/components/Switch.js

@@ -11,7 +11,7 @@ import Animated, { useSharedValue, useAnimatedStyle, withTiming, interpolate, us
 import { StyledText } from "./StyledText.js";
 const DEFAULT_HIT_SLOP = 8;
 function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, height: 24 }, thumbSize = 20, loading = false, style: styleOverride, ...props }) {
-    const { theme, getContrastingColor, withAlpha } = useTheme();
+    const { theme, getContrastingColor, getShadowStyle, withAlpha } = useTheme();
     const reduceMotion = useReducedMotion();
     const hasMounted = useRef(false);
     // Fire haptic on user-initiated toggles (skip initial mount)
@@ -34,30 +34,29 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
             progress.value = withTiming(target, { duration: 120 });
         }
     }, [props.checked, reduceMotion]);
-    // Thumb slides from left to right
-    const thumbOffset = 2;
-    const thumbEnd = size.width - thumbSize - thumbOffset;
+    // Thumb slides from left to right with equal inset on every side.
+    const thumbInset = Math.max(2, (size.height - thumbSize) / 2);
+    const thumbTravel = Math.max(0, size.width - thumbSize - thumbInset * 2);
+    const labelGap = spacing.xs;
+    const labelHorizontalInset = spacing.xs;
     const thumbAnimatedStyle = useAnimatedStyle(() => ({
         transform: [
-            { translateX: interpolate(progress.value, [0, 1], [thumbOffset, thumbEnd]) },
+            { translateX: interpolate(progress.value, [0, 1], [0, thumbTravel]) },
         ],
     }));
     const isIOS = variant === "ios";
-    // Keep the default checked state on a stable dark neutral so the white thumb
-    // stays distinct in both light and dark themes.
-    const checkedColor = isIOS ? "#34C759" : palette.gray900;
-    const uncheckedColor = theme.dark ? withAlpha(palette.white, 0.18) : palette.gray200;
+    const checkedColor = isIOS ? "#34C759" : theme.colors.accent;
+    const uncheckedColor = theme.dark ? withAlpha(palette.white, 0.12) : theme.colors.input;
     const trackBg = props.checked ? checkedColor : uncheckedColor;
     const trackBorderColor = props.checked
-        ? theme.dark
-            ? withAlpha(palette.white, 0.18)
-            : withAlpha(palette.black, 0.08)
+        ? withAlpha(checkedColor, theme.dark ? 0.55 : 0.42)
         : theme.dark
-            ? withAlpha(palette.white, 0.14)
+            ? withAlpha(palette.white, 0.16)
             : palette.gray300;
+    const thumbBackgroundColor = theme.dark ? palette.gray100 : palette.white;
     const thumbBorderColor = theme.dark
-        ? withAlpha(palette.black, 0.24)
-        : withAlpha(palette.black, 0.12);
+        ? withAlpha(palette.black, 0.36)
+        : withAlpha(palette.black, 0.1);
     const thumbIndicatorColor = props.checked ? checkedColor : theme.colors.textDim;
     // Calculate label color for ON state
     const labelOnColor = getContrastingColor(checkedColor, palette.white, palette.black);
@@ -71,7 +70,7 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
             borderRadius: size.height / 2,
             justifyContent: "center",
             opacity: props.disabled ? 0.5 : 1,
-            ...(Platform.OS === "web" && { cursor: "pointer" }),
+            ...(Platform.OS === "web" && { cursor: props.disabled ? "not-allowed" : "pointer" }),
             ...(flattenedStyle || {}),
         }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "switch", accessibilityState: {
             checked: props.checked,
@@ -85,11 +84,14 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                     borderColor: trackBorderColor,
                 }, pointerEvents: "none" }), labelOn && !isIOS && (_jsx(View, { style: {
                     position: "absolute",
-                    left: spacing.sm,
+                    top: 0,
+                    bottom: 0,
+                    left: labelHorizontalInset,
+                    right: thumbInset + thumbSize + labelGap,
                     justifyContent: "center",
                     alignItems: "center",
                     opacity: props.checked ? 1 : 0,
-                }, pointerEvents: "none", children: _jsx(StyledText, { style: {
+                }, pointerEvents: "none", children: _jsx(StyledText, { selectable: false, style: {
                         fontFamily: fontFamilies.sansSerif.bold,
                         fontSize: labelFontSize,
                         color: labelOnColor,
@@ -98,28 +100,26 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                         {
                             width: thumbSize,
                             height: thumbSize,
+                            marginLeft: thumbInset,
                             borderRadius: thumbSize / 2,
-                            backgroundColor: palette.white,
+                            backgroundColor: thumbBackgroundColor,
                             borderWidth: 1,
                             borderColor: thumbBorderColor,
                             justifyContent: "center",
                             alignItems: "center",
-                            ...(Platform.OS !== "web" && {
-                                shadowColor: "#000",
-                                shadowOffset: { width: 0, height: 1 },
-                                shadowOpacity: 0.15,
-                                shadowRadius: 2,
-                                elevation: 2,
-                            }),
+                            ...getShadowStyle("subtle"),
                         },
                         thumbAnimatedStyle,
                     ], children: loading && (_jsx(ActivityIndicator, { size: "small", color: thumbIndicatorColor })) }) }), labelOff && !isIOS && (_jsx(View, { style: {
                     position: "absolute",
-                    right: spacing.sm,
+                    top: 0,
+                    bottom: 0,
+                    left: thumbInset + thumbSize + labelGap,
+                    right: labelHorizontalInset,
                     justifyContent: "center",
                     alignItems: "center",
                     opacity: props.checked ? 0 : 1,
-                }, pointerEvents: "none", children: _jsx(StyledText, { style: {
+                }, pointerEvents: "none", children: _jsx(StyledText, { selectable: false, style: {
                         fontFamily: fontFamilies.sansSerif.bold,
                         fontSize: labelFontSize,
                         color: theme.colors.text,

package/dist/components/Tabs.js

@@ -43,6 +43,8 @@ function TabsList({ style, children, ...props }) {
             backgroundColor: theme.colors.muted,
             borderRadius: spacing.radiusMd,
             padding: 2,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
         }
         : {
             flexDirection: "row",
@@ -52,7 +54,7 @@ function TabsList({ style, children, ...props }) {
     return (_jsx(TabsPrimitive.List, { style: StyleSheet.flatten([listStyle, style]), ...props, children: children }));
 }
 function TabsTriggerInner({ icon, style, children, value, ...props }) {
-    const { theme } = useTheme();
+    const { theme, getShadowStyle } = useTheme();
     const { variant, size } = useTabsContext();
     const sizeConfig = SIZE_CONFIGS[size];
     const reduceMotion = useReducedMotion();
@@ -76,7 +78,7 @@ function TabsTriggerInner({ icon, style, children, value, ...props }) {
             : theme.colors.mutedForeground;
     const triggerBaseStyle = {
         flex: 1,
-        height: sizeConfig.height,
+        height: Platform.OS === "web" ? sizeConfig.height : spacing.touchTarget,
         paddingHorizontal: sizeConfig.paddingHorizontal,
         flexDirection: "row",
         alignItems: "center",
@@ -88,8 +90,9 @@ function TabsTriggerInner({ icon, style, children, value, ...props }) {
     const pillActiveStyle = isSelected && variant === "pill" ? {
         backgroundColor: theme.colors.background,
         borderRadius: spacing.radiusSm,
+        ...getShadowStyle("subtle"),
     } : {};
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(TabsPrimitive.Trigger, { value: value, style: StyleSheet.flatten([triggerBaseStyle, pillActiveStyle, style]), ...props, children: [_jsxs(View, { style: triggerContentStyles.container, children: [icon && (_jsx(Icon, { name: icon, size: sizeConfig.iconSize, color: textColor, decorative: true })), typeof children === "string" ? (_jsx(StyledText, { style: { fontSize: sizeConfig.fontSize }, children: children })) : children] }), variant === "underline" && (_jsx(Animated.View, { style: [
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(TabsPrimitive.Trigger, { value: value, style: StyleSheet.flatten([triggerBaseStyle, pillActiveStyle, style]), ...props, children: [_jsxs(View, { style: triggerContentStyles.container, children: [icon && (_jsx(Icon, { name: icon, size: sizeConfig.iconSize, color: textColor, decorative: true })), typeof children === "string" ? (_jsx(StyledText, { selectable: false, style: { fontSize: sizeConfig.fontSize }, children: children })) : children] }), variant === "underline" && (_jsx(Animated.View, { style: [
                             {
                                 position: "absolute",
                                 bottom: 0,

package/dist/components/TextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
@@ -71,8 +71,8 @@ const SIZE_CONFIGS = {
  * ```
  */
 export const TextInput = React.forwardRef(({ 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, ...rest }, ref) => {
-    const { theme, getContrastingColor } = useTheme();
-    const styles = createStyles(theme, variant, size);
+    const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
+    const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
     const [focused, setFocused] = useState(false);
     const [contentHeight, setContentHeight] = useState(0);
     const [passwordVisible, setPasswordVisible] = useState(false);
@@ -98,10 +98,10 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
     const borderColor = hasError
         ? theme.colors.destructive
         : focused
-            ? theme.colors.primary
+            ? theme.colors.ring
             : forceLight
                 ? "#d1d5db"
-                : theme.colors.border;
+                : theme.colors.input;
     const inputPaddingLeft = leftElement
         ? sizeConfig.paddingHorizontal + spacing.xl
         : sizeConfig.paddingHorizontal;
@@ -127,7 +127,7 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
     const togglePasswordVisible = () => {
         setPasswordVisible(v => !v);
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { style: styles.label, children: [label, required && _jsx(StyledText, { style: styles.required, children: " *" })] }) })), _jsxs(View, { style: styles.wrapper, children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: handleFocus, onBlur: handleBlur, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
+    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: [styles.wrapper, focused && getFocusRingStyle()], children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: handleFocus, onBlur: handleBlur, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
                             styles.input,
                             {
                                 backgroundColor,
@@ -143,9 +143,6 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
                             variant === "filled" && styles.filled,
                             style,
                             focused && focusedStyle,
-                            focused && Platform.OS === "web" && {
-                                boxShadow: `0 0 0 2px ${theme.colors.background}, 0 0 0 4px ${theme.colors.primary}`,
-                            },
                             isDisabled && styles.disabled,
                             hasError && styles.error,
                             Platform.OS === "web" && { fontSize: Math.max(sizeConfig.fontSize, 16) },
@@ -155,7 +152,7 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
                         }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) })), showClearButton && rightElement && !hasSecureToggle && (_jsxs(View, { style: styles.rightElements, children: [_jsx(Pressable, { onPress: () => {
                                     hapticLight();
                                     onChangeText?.("");
-                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: styles.errorIcon, accessibilityLabel: "Error", pointerEvents: "none", children: _jsx(Icon, { name: "alert-circle", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { style: [
+                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: styles.errorIcon, accessibilityLabel: "Error", pointerEvents: "none", children: _jsx(Icon, { name: "alert-circle", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [
                     styles.helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
@@ -166,6 +163,7 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
         width: "100%",
         position: "relative",
         backgroundColor: "transparent",
+        borderRadius: variant === "underlined" ? 0 : spacing.radiusMd,
         justifyContent: "center",
     },
     input: {

package/dist/components/Toggle.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as TogglePrimitive from "@rn-primitives/toggle";
@@ -100,6 +100,7 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
     // Flatten style override for web compatibility
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     const isDisabled = props.disabled || loading;
+    const children = props.children;
     return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, style: {
                     flexDirection: "row",
                     alignItems: "center",
@@ -134,6 +135,7 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
                     ...(Platform.OS === "web" && {
                         cursor: isDisabled ? "not-allowed" : "pointer",
                         transition: "all 150ms",
+                        userSelect: "none",
                     }),
                     // Apply custom style override
                     ...(flattenedStyle || {}),
@@ -141,7 +143,7 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
                     selected: props.pressed,
                     disabled: !!isDisabled,
                     busy: loading,
-                }, children: loading ? (_jsx(ActivityIndicator, { size: "small", color: textColor })) : (props.children) }) }) }));
+                }, children: loading ? (_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })) : typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
 }
 function ToggleIcon({ name, size, color }) {
     const contextColor = React.useContext(TextColorContext);