@mrmeg/expo-ui 0.1.4 → 0.1.6

package/dist/components/Dialog.js

@@ -21,14 +21,14 @@ function DialogRoot({ children, ...props }) {
 }
 function DialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
-    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
+    const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
     return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay, { style: StyleSheet.flatten([
                     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([
                                             {
-                                                backgroundColor: theme.colors.background,
+                                                backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
@@ -61,7 +61,7 @@ function DialogTitle({ children, style, ...props }) {
                 {
                     fontSize: 18,
                     lineHeight: 24,
-                    letterSpacing: -0.3,
+                    letterSpacing: 0,
                     color: theme.colors.text,
                 },
                 style,
@@ -98,14 +98,14 @@ function AlertDialogRoot({ children, ...props }) {
 }
 function AlertDialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
-    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
+    const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
     return (_jsx(AlertDialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(AlertDialogPrimitive.Overlay, { style: StyleSheet.flatten([
                     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([
                                             {
-                                                backgroundColor: theme.colors.background,
+                                                backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
@@ -124,7 +124,7 @@ function AlertDialogTitle({ children, style, ...props }) {
                 {
                     fontSize: 18,
                     lineHeight: 24,
-                    letterSpacing: -0.3,
+                    letterSpacing: 0,
                     color: theme.colors.text,
                 },
                 style,

package/dist/components/Drawer.js

@@ -70,9 +70,9 @@ function parseWidth(width) {
 }
 function drawerReducer(state, action) {
     switch (action.type) {
-        case 'OPEN': return true;
-        case 'CLOSE': return false;
-        case 'TOGGLE': return !state; // Always uses current state!
+        case "OPEN": return true;
+        case "CLOSE": return false;
+        case "TOGGLE": return !state; // Always uses current state!
     }
 }
 // ============================================================================
@@ -91,7 +91,7 @@ function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange
             controlledOnOpenChange?.(!controlledOpen);
         }
         else {
-            dispatch({ type: 'TOGGLE' });
+            dispatch({ type: "TOGGLE" });
         }
     };
     // Handler for explicit open/close actions
@@ -100,7 +100,7 @@ function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange
             controlledOnOpenChange?.(newOpen);
         }
         else {
-            dispatch({ type: newOpen ? 'OPEN' : 'CLOSE' });
+            dispatch({ type: newOpen ? "OPEN" : "CLOSE" });
         }
     };
     const parsedWidth = parseWidth(width);

package/dist/components/DropdownMenu.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext } from "./StyledText.js";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
@@ -22,28 +22,29 @@ function DropdownMenuSubTrigger({ inset = false, children, style: styleOverride,
     const { theme } = useTheme();
     const { open } = DropdownMenuPrimitive.useSubContext();
     const iconName = Platform.OS === "web" ? "chevron-right" : open ? "chevron-up" : "chevron-down";
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(DropdownMenuPrimitive.SubTrigger, { ...props, style: {
-                flexDirection: "row",
-                alignItems: "center",
-                borderRadius: spacing.radiusSm,
-                paddingHorizontal: spacing.sm,
-                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                backgroundColor: open ? theme.colors.card : "transparent",
-                ...(Platform.OS === "web" && {
-                    cursor: "pointer",
-                    outlineStyle: "none",
-                }),
-                ...(inset && { paddingLeft: spacing.xl }),
-                ...(styleOverride && typeof styleOverride !== "function"
-                    ? StyleSheet.flatten(styleOverride)
-                    : {}),
-            }, children: [typeof children === "function" ? null : children, _jsx(View, { style: { marginLeft: "auto" }, children: _jsx(Icon, { name: iconName, size: 16, color: theme.colors.text }) })] }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(DropdownMenuPrimitive.SubTrigger, { ...props, style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    borderRadius: spacing.radiusSm,
+                    paddingHorizontal: spacing.sm,
+                    paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                    backgroundColor: open ? theme.colors.muted : "transparent",
+                    ...(Platform.OS === "web" && {
+                        cursor: "pointer",
+                        outlineStyle: "none",
+                        userSelect: "none",
+                    }),
+                    ...(inset && { paddingLeft: spacing.xl }),
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? StyleSheet.flatten(styleOverride)
+                        : {}),
+                }, children: [typeof children === "function" ? null : children, _jsx(View, { style: { marginLeft: "auto" }, children: _jsx(Icon, { name: iconName, size: 16, color: theme.colors.text }) })] }) }) }));
 }
 function DropdownMenuSubContent({ style: styleOverride, ...props }) {
     const { theme, getShadowStyle } = useTheme();
     const shadowStyle = StyleSheet.flatten(getShadowStyle("soft"));
     return (_jsx(AnimatedView, { type: "fade", children: _jsx(DropdownMenuPrimitive.SubContent, { ...props, style: {
-                backgroundColor: theme.colors.background,
+                backgroundColor: theme.colors.popover,
                 borderWidth: 1,
                 borderColor: theme.colors.border,
                 borderRadius: spacing.radiusMd,
@@ -66,108 +67,112 @@ function DropdownMenuContent({ side, align = "start", sideOffset = 4, portalHost
     return (_jsx(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DropdownMenuPrimitive.Overlay, { style: Platform.select({
                     native: StyleSheet.absoluteFill,
                     default: undefined,
-                }), children: _jsx(AnimatedView, { type: "fade", children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DropdownMenuPrimitive.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(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.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 DropdownMenuItem({ inset = false, variant = "default", style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(DropdownMenuPrimitive.Item, { ...props, style: {
-                position: "relative",
-                flexDirection: "row",
-                alignItems: "center",
-                gap: spacing.sm,
-                borderRadius: spacing.radiusSm,
-                paddingHorizontal: spacing.sm,
-                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                backgroundColor: "transparent",
-                ...(Platform.OS === "web" && {
-                    cursor: props.disabled ? "not-allowed" : "pointer",
-                    outlineStyle: "none",
-                }),
-                ...(props.disabled && { opacity: 0.5 }),
-                ...(inset && { paddingLeft: spacing.xl }),
-                ...(styleOverride && typeof styleOverride !== "function"
-                    ? StyleSheet.flatten(styleOverride)
-                    : {}),
-            } }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Item, { ...props, style: {
+                    position: "relative",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: spacing.sm,
+                    borderRadius: spacing.radiusSm,
+                    paddingHorizontal: spacing.sm,
+                    paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                    backgroundColor: "transparent",
+                    ...(Platform.OS === "web" && {
+                        cursor: props.disabled ? "not-allowed" : "pointer",
+                        outlineStyle: "none",
+                        userSelect: "none",
+                    }),
+                    ...(props.disabled && { opacity: 0.5 }),
+                    ...(inset && { paddingLeft: spacing.xl }),
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? StyleSheet.flatten(styleOverride)
+                        : {}),
+                } }) }) }));
 }
 function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(DropdownMenuPrimitive.CheckboxItem, { ...props, style: {
-                position: "relative",
-                flexDirection: "row",
-                alignItems: "center",
-                gap: spacing.sm,
-                borderRadius: spacing.radiusSm,
-                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                paddingLeft: spacing.xl,
-                paddingRight: spacing.sm,
-                backgroundColor: "transparent",
-                ...(Platform.OS === "web" && {
-                    cursor: props.disabled ? "not-allowed" : "pointer",
-                    outlineStyle: "none",
-                }),
-                ...(props.disabled && { opacity: 0.5 }),
-                ...(styleOverride && typeof styleOverride !== "function"
-                    ? StyleSheet.flatten(styleOverride)
-                    : {}),
-            }, children: [_jsx(View, { style: {
-                        position: "absolute",
-                        left: spacing.sm,
-                        height: 14,
-                        width: 14,
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.text, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), typeof children === "function" ? null : children] }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(DropdownMenuPrimitive.CheckboxItem, { ...props, style: {
+                    position: "relative",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: spacing.sm,
+                    borderRadius: spacing.radiusSm,
+                    paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                    paddingLeft: spacing.xl,
+                    paddingRight: spacing.sm,
+                    backgroundColor: "transparent",
+                    ...(Platform.OS === "web" && {
+                        cursor: props.disabled ? "not-allowed" : "pointer",
+                        outlineStyle: "none",
+                        userSelect: "none",
+                    }),
+                    ...(props.disabled && { opacity: 0.5 }),
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? StyleSheet.flatten(styleOverride)
+                        : {}),
+                }, children: [_jsx(View, { style: {
+                            position: "absolute",
+                            left: spacing.sm,
+                            height: 14,
+                            width: 14,
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.text, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), typeof children === "function" ? null : children] }) }) }));
 }
 function DropdownMenuRadioItem({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(DropdownMenuPrimitive.RadioItem, { ...props, style: {
-                position: "relative",
-                flexDirection: "row",
-                alignItems: "center",
-                gap: spacing.sm,
-                borderRadius: spacing.radiusSm,
-                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                paddingLeft: spacing.xl,
-                paddingRight: spacing.sm,
-                backgroundColor: "transparent",
-                ...(Platform.OS === "web" && {
-                    cursor: props.disabled ? "not-allowed" : "pointer",
-                    outlineStyle: "none",
-                }),
-                ...(props.disabled && { opacity: 0.5 }),
-                ...(styleOverride && typeof styleOverride !== "function"
-                    ? StyleSheet.flatten(styleOverride)
-                    : {}),
-            }, children: [_jsx(View, { style: {
-                        position: "absolute",
-                        left: spacing.sm,
-                        height: 14,
-                        width: 14,
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(View, { style: {
-                                backgroundColor: theme.colors.text,
-                                height: 8,
-                                width: 8,
-                                borderRadius: 4,
-                            } }) }) }), typeof children === "function" ? null : children] }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(DropdownMenuPrimitive.RadioItem, { ...props, style: {
+                    position: "relative",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: spacing.sm,
+                    borderRadius: spacing.radiusSm,
+                    paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                    paddingLeft: spacing.xl,
+                    paddingRight: spacing.sm,
+                    backgroundColor: "transparent",
+                    ...(Platform.OS === "web" && {
+                        cursor: props.disabled ? "not-allowed" : "pointer",
+                        outlineStyle: "none",
+                        userSelect: "none",
+                    }),
+                    ...(props.disabled && { opacity: 0.5 }),
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? StyleSheet.flatten(styleOverride)
+                        : {}),
+                }, children: [_jsx(View, { style: {
+                            position: "absolute",
+                            left: spacing.sm,
+                            height: 14,
+                            width: 14,
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(View, { style: {
+                                    backgroundColor: theme.colors.text,
+                                    height: 8,
+                                    width: 8,
+                                    borderRadius: 4,
+                                } }) }) }), typeof children === "function" ? null : children] }) }) }));
 }
 function DropdownMenuLabel({ inset = false, style: styleOverride, ...props }) {
     const { theme } = useTheme();
@@ -177,6 +182,7 @@ function DropdownMenuLabel({ inset = false, style: styleOverride, ...props }) {
             fontSize: 14,
             fontWeight: "500",
             color: theme.colors.text,
+            userSelect: "none",
             ...(inset && { paddingLeft: spacing.xl }),
             ...(styleOverride && typeof styleOverride !== "function"
                 ? StyleSheet.flatten(styleOverride)
@@ -201,9 +207,10 @@ function DropdownMenuShortcut({ style: styleOverride, ...props }) {
             {
                 marginLeft: "auto",
                 fontSize: 12,
-                letterSpacing: 2,
+                letterSpacing: 0,
                 color: theme.colors.text,
                 opacity: 0.6,
+                userSelect: "none",
             },
             styleOverride,
         ] }));

package/dist/components/EmptyState.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { SansSerifBoldText, SansSerifText } from "./StyledText.js";
 import { Button } from "./Button.js";
@@ -24,8 +25,8 @@ import { spacing } from "../constants/spacing.js";
  */
 export function EmptyState({ icon, iconSize = 48, title, description, actionLabel, onAction, actionPreset = "default", style, children, }) {
     const { theme } = useTheme();
-    const styles = createStyles(theme);
-    return (_jsxs(View, { style: [styles.container, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, style: styles.action, children: actionLabel }))] }));
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    return (_jsxs(View, { style: [styles.container, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, style: styles.action, children: actionLabel }))] }));
 }
 const createStyles = (theme) => StyleSheet.create({
     container: {
@@ -42,7 +43,7 @@ const createStyles = (theme) => StyleSheet.create({
         lineHeight: 24,
         color: theme.colors.foreground,
         textAlign: "center",
-        letterSpacing: -0.3,
+        letterSpacing: 0,
     },
     description: {
         fontSize: 14,
@@ -54,5 +55,6 @@ const createStyles = (theme) => StyleSheet.create({
     },
     action: {
         marginTop: spacing.lg,
+        alignSelf: "center",
     },
 });

package/dist/components/InputOTP.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, useCallback } from "react";
+import React, { useMemo, useRef, useState, useCallback } from "react";
 import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
 import { useTheme } from "../hooks/useTheme.js";
@@ -33,7 +33,7 @@ function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = fa
     const reduceMotion = useReducedMotion();
     const inputRef = useRef(null);
     const [focused, setFocused] = useState(false);
-    const styles = createStyles(theme);
+    const styles = useMemo(() => createStyles(theme), [theme]);
     const hasError = error || !!errorText;
     // Active cell index: next empty cell, or last cell when full
     const activeIndex = Math.min(value.length, length - 1);
@@ -121,7 +121,7 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, redu
                     opacity: disabled ? 0.5 : 1,
                 },
                 animatedStyle,
-            ], children: _jsx(StyledText, { style: {
+            ], children: _jsx(StyledText, { selectable: false, style: {
                     fontSize: CELL_FONT_SIZE,
                     fontWeight: CELL_FONT_WEIGHT,
                     fontFamily: fontFamilies.sansSerif.regular,

package/dist/components/Label.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { StyleSheet, Platform } from "react-native";
 import * as LabelPrimitive from "@rn-primitives/label";
 import { useTheme } from "../hooks/useTheme.js";
@@ -36,7 +37,7 @@ const SIZE_CONFIGS = {
  */
 export function Label({ children, nativeID, required, size = "md", error, disabled, style, onPress, }) {
     const { theme } = useTheme();
-    const styles = createStyles(theme);
+    const styles = useMemo(() => createStyles(theme), [theme]);
     const sizeConfig = SIZE_CONFIGS[size];
     const textStyle = StyleSheet.flatten([
         styles.label,
@@ -48,7 +49,7 @@ export function Label({ children, nativeID, required, size = "md", error, disabl
     return (_jsx(LabelPrimitive.Root, { nativeID: nativeID, onPress: onPress, style: {
             ...styles.root,
             ...(Platform.OS === "web" && onPress && { cursor: "pointer" }),
-        }, children: _jsxs(LabelPrimitive.Text, { style: textStyle, children: [children, required && _jsx(StyledText, { style: styles.required, children: " *" })] }) }));
+        }, children: _jsxs(LabelPrimitive.Text, { style: textStyle, children: [children, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) }));
 }
 const createStyles = (theme) => StyleSheet.create({
     root: {
@@ -58,10 +59,12 @@ const createStyles = (theme) => StyleSheet.create({
         fontFamily: fontFamilies.sansSerif.regular,
         fontWeight: "500",
         color: theme.colors.text,
+        userSelect: "none",
     },
     required: {
         color: theme.colors.destructive,
         fontFamily: fontFamilies.sansSerif.bold,
+        userSelect: "none",
     },
     errorLabel: {
         color: theme.colors.destructive,

package/dist/components/Notification.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useMemo, useCallback, useContext, useEffect, useRef } from "react";
 import { StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, useReducedMotion, Easing, } from "react-native-reanimated";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
@@ -40,7 +40,7 @@ export const Notification = () => {
     const reduceMotion = useReducedMotion();
     const insets = useContext(SafeAreaInsetsContext);
     const { alert, hide } = globalUIStore();
-    const styles = createStyles(theme);
+    const styles = useMemo(() => createStyles(theme), [theme]);
     const position = alert?.position ?? "top";
     const isBottom = position === "bottom";
     // Just opacity + translateY — no scale (scale = bouncy feel)
@@ -139,11 +139,11 @@ export const Notification = () => {
             return alert.title;
         switch (alert?.type) {
             case "error":
-                return translateText("notification.error");
+                return translateText("notification.error", "Error");
             case "success":
-                return translateText("notification.success");
+                return translateText("notification.success", "Success");
             case "warning":
-                return translateText("notification.warning");
+                return translateText("notification.warning", "Warning");
             case "info":
                 return "";
             default:
@@ -164,7 +164,7 @@ export const Notification = () => {
                 styles.alert,
                 isBottom && styles.alertBottom,
                 getShadowStyle("base"),
-            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: alert.messages[0] }))] }), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
+            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: alert.messages[0] }))] }), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
 };
 const createStyles = (theme) => StyleSheet.create({
     container: {

package/dist/components/Popover.js

@@ -26,10 +26,10 @@ const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fr
 function PopoverContent({ side, align = "center", sideOffset = 4, portalHost, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
     // Calculate text color for popover content based on background
-    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
+    const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
     const contentStyle = StyleSheet.flatten([
         {
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.popover,
             borderColor: theme.colors.border,
             borderWidth: 1,
             borderRadius: spacing.radiusMd,

package/dist/components/RadioGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect } from "react";
-import { View, StyleSheet, Pressable } from "react-native";
+import { View, StyleSheet, Pressable, Platform } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
@@ -78,7 +78,7 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handlePress, style: {
             borderColor,
-            backgroundColor: "transparent",
+            backgroundColor: theme.colors.background,
             borderRadius: sizeConfig.outer / 2,
             borderWidth: sizeConfig.borderWidth,
             width: sizeConfig.outer,
@@ -86,6 +86,7 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
             justifyContent: "center",
             alignItems: "center",
             opacity: disabled ? 0.5 : 1,
+            ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
             ...(flattenedStyle || {}),
         }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
                 dotStyle,
@@ -109,18 +110,19 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
         }, style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "radio", accessibilityState: {
             checked: isChecked,
             disabled: !!disabled,
-        }, accessibilityLabel: label, children: [radioElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { style: [
+        }, accessibilityLabel: label, children: [radioElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: [
                         styles.label,
                         { color: theme.colors.text },
                         disabled && styles.disabledLabel,
                         error && { color: theme.colors.destructive },
-                    ], children: [label, required && (_jsx(StyledText, { style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
+                    ], children: [label, required && (_jsx(StyledText, { selectable: false, style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
 }
 const styles = StyleSheet.create({
     container: {
         flexDirection: "row",
         alignItems: "center",
         gap: spacing.sm,
+        minHeight: spacing.touchTarget,
     },
     labelContainer: {
         flex: 1,