@mrmeg/expo-ui 0.1.5 → 0.1.7

package/LLM_USAGE.md

@@ -86,6 +86,8 @@ configureExpoUiI18n((key, options) => i18n.t(key, options));
 - Use `useTheme()` and semantic tokens instead of hardcoded colors.
 - Use `StyledText` or its semantic aliases instead of raw `Text` for app UI.
 - Use `Button.preset`, not `variant`, for buttons.
+- Button visible heights are compact: `sm` 28px, `md` 32px, and `lg` 40px.
+- Use `Button size="sm"` for compact popover, tooltip, and toolbar triggers; nested `StyledText` inherits the selected Button size.
 - Use `globalUIStore` plus root-mounted `UIProvider` for transient global feedback.
 - Keep app monitoring, auth, API, and domain behavior outside this package.
 
@@ -95,7 +97,10 @@ Useful theme tokens include:
 theme.colors.background;
 theme.colors.foreground;
 theme.colors.card;
+theme.colors.popover;
 theme.colors.border;
+theme.colors.input;
+theme.colors.ring;
 theme.colors.primary;
 theme.colors.secondary;
 theme.colors.accent;
@@ -110,6 +115,29 @@ Token intent:
 - `primary`: neutral action color
 - `secondary`: neutral secondary surface
 - `accent`: teal highlight color
+- `input`: form-control border color
+- `ring`: focus outline color
+- `popover`: elevated overlay surface
+
+Use `getShadowStyle()` for package surfaces that need elevation. It supports
+`base`, `soft`, `sharp`, `subtle`, `elevated`, `glow`, `glass`, `card`,
+`cardHover`, and `cardSubtle`, returning native shadow/elevation off web and
+CSS `boxShadow` on web. Use `getFocusRingStyle()` for web focus styling. Keep
+web controls compact, but preserve mobile tap comfort with package controls
+that already provide native hit slop or 44px touch rows.
+
+Use `useStyles()` for memoized theme-aware local styles. Its factory receives
+`{ theme, spacing, withAlpha }`, so components can derive alpha-adjusted
+semantic colors without destructuring `withAlpha` outside the factory:
+
+```tsx
+const { styles } = useStyles(({ theme, spacing, withAlpha }) => ({
+  card: {
+    backgroundColor: withAlpha(theme.colors.primary, 0.08),
+    padding: spacing.md,
+  },
+}));
+```
 
 ## Component Use-Case Index
 

package/README.md

@@ -24,15 +24,15 @@ Install from npm after publishing:
 bun add @mrmeg/expo-ui
 ```
 
-Consumers must also install the peer dependencies listed in `package.json`.
-The tested baseline is Expo SDK 55 with React 19.2, React Native 0.83,
-React Native Web 0.21, Reanimated 4.2, Worklets 0.7, and
-`@rn-primitives/*` 1.4. `@rn-primitives/portal` is package-managed because
-`UIProvider` mounts the portal host used by package overlays. i18n setup is
-optional; plain text and children render without `i18next` or
-`react-i18next`. Start consumer apps from the same Expo SDK family or update
-the package and peer ranges deliberately. Keep npm auth tokens in developer or
-CI configuration, not in this repository.
+Consumers must also install the native and Expo peer dependencies listed in
+`package.json`. The tested baseline is Expo SDK 55 with React 19.2, React
+Native 0.83, React Native Web 0.21, Reanimated 4.2, and Worklets 0.7.
+`@rn-primitives/*` packages are managed by `@mrmeg/expo-ui` because they are
+implementation details of the exported UI components. i18n setup is optional;
+plain text and children render without `i18next` or `react-i18next`. Start
+consumer apps from the same Expo SDK family or update the package and peer
+ranges deliberately. Keep npm auth tokens in developer or CI configuration,
+not in this repository.
 
 ## Imports
 
@@ -95,7 +95,21 @@ const styles = StyleSheet.create({
 });
 ```
 
-`useTheme()` returns the active `theme`, resolved `scheme`, persisted `currentTheme`, `setTheme`, `toggleTheme`, shadow helpers, contrast helpers, and `withAlpha`. Use semantic tokens such as `theme.colors.background`, `foreground`, `card`, `border`, `primary`, `secondary`, `accent`, `mutedForeground`, `destructive`, `success`, and `warning`. `primary` is the neutral action color, `secondary` is a neutral secondary surface, and `accent` is the teal highlight color.
+`useTheme()` returns the active `theme`, resolved `scheme`, persisted `currentTheme`, `setTheme`, `toggleTheme`, cross-platform shadow helpers, a web focus-ring helper, contrast helpers, and `withAlpha`. `getShadowStyle(type)` supports `base`, `soft`, `sharp`, `subtle`, `elevated`, `glow`, `glass`, `card`, `cardHover`, and `cardSubtle`. Use semantic tokens such as `theme.colors.background`, `foreground`, `card`, `popover`, `border`, `input`, `ring`, `primary`, `secondary`, `accent`, `mutedForeground`, `destructive`, `success`, and `warning`. `primary` is the neutral action color, `secondary` is a neutral secondary surface, `accent` is the teal highlight color, `input` is the default form-control border, and `ring` is the focus outline color.
+
+Use `useStyles()` when a component needs memoized theme-aware styles. The style factory receives `{ theme, spacing, withAlpha }`, and the returned hook value also includes the normal `useTheme()` helpers.
+
+```tsx
+import { useStyles } from "@mrmeg/expo-ui/hooks";
+
+const { styles } = useStyles(({ theme, spacing, withAlpha }) => ({
+  card: {
+    backgroundColor: withAlpha(theme.colors.primary, 0.08),
+    borderRadius: spacing.radiusMd,
+    padding: spacing.md,
+  },
+}));
+```
 
 Use `StyledText` for theme-aware text:
 
@@ -115,6 +129,9 @@ Useful `StyledText` props:
 - `fontWeight`: `light`, `regular`, `medium`, `semibold`, `bold`
 - `variant`: `sansSerif`, `serif`
 - `align`, `tx`, `txOptions`
+- `selectable`: defaults to `true` for readable copy; package controls disable
+  selection for labels and other interactive chrome where accidental drag
+  selection would feel broken.
 
 `tx` support is opt-in. Without a configured translator, `tx` renders its
 fallback text when provided and otherwise renders the key; package-owned
@@ -141,7 +158,7 @@ All components are exported from `@mrmeg/expo-ui/components`; direct imports suc
 | `AnimatedView` | Entrance and visibility animation | Hand-rolled Reanimated wrappers | Staggered list rows, revealed panels, animated empty states |
 | `Badge` | Short status labels | Custom pill `View` + `Text` | Draft/active states, counts, plan labels, role tags |
 | `BottomSheet` | Mobile-first modal sheets | Custom absolute-position sheets | Action pickers, mobile filters, quick edit forms, contextual details |
-| `Button` | Commands and CTAs | Pressable plus custom text styling | Submit, save, cancel, delete, navigation CTAs, icon-accessory buttons |
+| `Button` | Commands and CTAs | Pressable plus custom text styling | Submit, save, cancel, delete, navigation CTAs, icon-accessory buttons; loading state preserves resting width |
 | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` | Framed content groups | Ad hoc bordered panels | List items, pricing plans, settings sections, summaries, dashboards |
 | `Checkbox` | Boolean selection | Custom checkmark controls | Terms consent, checklist items, multi-select filters, notification opt-ins |
 | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | One-off disclosure | Local animated height wrappers | Advanced settings, hidden helper text, optional details |
@@ -159,13 +176,13 @@ All components are exported from `@mrmeg/expo-ui/components`; direct imports suc
 | `Popover` | Anchored contextual content | Custom anchored views | Inline help, quick previews, contextual controls, small forms |
 | `Progress` | Determinate or indeterminate progress | Layout-shifting spinners for progress regions | Upload progress, onboarding completion, long-running task state |
 | `RadioGroup`, `RadioGroupItem` | Mutually exclusive choices | Custom radio rows | Plan interval, visibility choice, survey answer, preference setting |
-| `Select` | Option menus | Custom dropdowns | Country picker, category selector, status selector, compact form choice |
+| `Select` | Option menus | Custom dropdowns | Country picker, category selector, status selector, compact form choice; `label` drives default item text and overlay text uses popover foreground tokens |
 | `Separator` | Horizontal or vertical dividers | Border-only spacer views | Menu dividers, section dividers, card dividers |
 | `Skeleton`, `SkeletonText`, `SkeletonAvatar`, `SkeletonCard` | Loading placeholders | Blank space or generic spinners | List loading, profile card loading, dashboard placeholders |
-| `Slider` | Numeric value selection | Custom pan gesture track | Volume, percentage, rating, threshold, range-like settings |
+| `Slider` | Numeric value selection | Custom pan gesture track | Volume, percentage, rating, threshold, range-like settings; accent active track and thumb affordance |
 | `StatusBar` | Theme-aware native status bar | Per-screen status-bar duplication | Root layout status styling, dark/light mode updates |
 | `StyledText` and text aliases | Theme-aware typography | Raw `Text` with hardcoded styles | Titles, headings, labels, body copy, captions, translated text |
-| `Switch` | Binary settings | Custom toggle switches | Enable notifications, privacy setting, feature toggles |
+| `Switch` | Binary settings | Custom toggle switches | Enable notifications, privacy setting, feature toggles; accent checked track with softened thumb border |
 | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | In-page tabbed views | Custom segmented/tab controls | Profile sections, report views, settings categories |
 | `TextInput` | Text entry | Raw `TextInput` with repeated label/error code | Email/password, search, numeric input, multiline notes |
 | `Toggle`, `ToggleIcon` | Pressed/unpressed control | Button with local selected styling | Favorite, mute, bold/italic, view mode button |
@@ -195,11 +212,11 @@ Most compound components support both direct named imports and dot notation on t
 | `ToggleGroup` | `ToggleGroupItem`, `ToggleGroupIcon` |
 | `Tooltip` | `TooltipTrigger`, `TooltipContent`, `TooltipBody` |
 
-Text aliases are exported for common semantic typography: `SerifText`, `SansSerifText`, `SerifBoldText`, `SansSerifBoldText`, `DisplayText`, `TitleText`, `HeadingText`, `SubheadingText`, `BodyText`, `CaptionText`, and `LabelText`. `TextClassContext` and `TextColorContext` are advanced context exports used by package controls to pass nested text styling.
+Text aliases are exported for common semantic typography: `SerifText`, `SansSerifText`, `SerifBoldText`, `SansSerifBoldText`, `DisplayText`, `TitleText`, `HeadingText`, `SubheadingText`, `BodyText`, `CaptionText`, and `LabelText`. `TextClassContext`, `TextColorContext`, `TextStyleContext`, and `TextSelectabilityContext` are advanced context exports used by package controls to pass nested text styling and control-label selectability.
 
 ### Common Patterns
 
-Use `Button.preset`, not `variant`. `default` is the neutral primary action, `secondary` is a neutral secondary surface, `outline` is for lower-emphasis actions, `ghost` is for compact toolbars, `link` is for text-like commands, and `destructive` is for dangerous actions.
+Use `Button.preset`, not `variant`. `default` is the neutral primary action, `secondary` is a neutral secondary surface, `outline` is for lower-emphasis actions, `ghost` is for compact toolbars, `link` is for text-like commands, and `destructive` is for dangerous actions. Button visible heights are compact: `sm` 28px, `md` 32px, and `lg` 40px. Native Button targets preserve tap comfort with computed hit slop up to 44px. Nested `StyledText` children inherit the selected Button size, so use `size="sm"` for compact popover, tooltip, and toolbar triggers.
 
 Use `StyledText` or its aliases instead of raw `Text` whenever the text is part of app UI. Use `TextInput` for labeled fields because it already owns label, helper text, error text, clear buttons, password visibility, numeric filtering, and left/right elements.
 
@@ -322,7 +339,7 @@ On web, `useResources()` injects the Google Fonts Lato stylesheet after hydratio
 />
 ```
 
-On native, the package uses platform sans-serif fallbacks. `useResources()` still loads `Feather.font` from the consumer app's `@expo/vector-icons` peer dependency for icon rendering.
+On native, the package uses platform sans-serif fallbacks. `useResources()` still loads `Feather.font` from the package-managed `@expo/vector-icons` dependency for icon rendering.
 
 ## Package Checks
 

package/dist/components/Accordion.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { Platform, Pressable, View } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
 import { Icon } from "./Icon.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 AccordionPrimitive from "@rn-primitives/accordion";
@@ -114,21 +114,24 @@ function AccordionTrigger({ children, style: styleOverride, ...props }) {
     const chevronStyle = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotation.value * 180}deg` }],
     }));
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(AccordionPrimitive.Header, { children: _jsx(AccordionPrimitive.Trigger, { ...props, asChild: true, children: _jsxs(Trigger, { style: [
-                        {
-                            flexDirection: "row",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            gap: spacing.md,
-                            borderRadius: spacing.radiusMd,
-                            paddingVertical: spacing.md,
-                            ...(Platform.OS === "web" && { cursor: "pointer" }),
-                        },
-                        // Spread array styles from primitives to prevent nested arrays on web
-                        ...(styleOverride && typeof styleOverride !== "function"
-                            ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
-                            : []),
-                    ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(AccordionPrimitive.Trigger, { ...props, asChild: true, children: _jsxs(Trigger, { style: [
+                            {
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: spacing.md,
+                                borderRadius: spacing.radiusMd,
+                                paddingVertical: spacing.md,
+                                ...(Platform.OS === "web" && {
+                                    cursor: "pointer",
+                                    userSelect: "none",
+                                }),
+                            },
+                            // Spread array styles from primitives to prevent nested arrays on web
+                            ...(styleOverride && typeof styleOverride !== "function"
+                                ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                                : []),
+                        ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }) }));
 }
 /**
  * Accordion Content Component

package/dist/components/Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
@@ -19,7 +19,7 @@ import { StyledText } from "./StyledText.js";
  */
 function Badge({ children, variant = "default", style: styleOverride }) {
     const { theme } = useTheme();
-    const styles = createStyles(theme);
+    const styles = useMemo(() => createStyles(theme), [theme]);
     const textStyle = [
         styles.text,
         variant === "default" && { color: theme.colors.primaryForeground },
@@ -29,9 +29,9 @@ function Badge({ children, variant = "default", style: styleOverride }) {
     ];
     const normalizedChildren = React.Children.toArray(children);
     const hasOnlyTextChildren = normalizedChildren.every((child) => typeof child === "string" || typeof child === "number");
-    const content = hasOnlyTextChildren ? (_jsx(StyledText, { style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(children, (child) => {
+    const content = hasOnlyTextChildren ? (_jsx(StyledText, { selectable: false, style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(children, (child) => {
         if (typeof child === "string" || typeof child === "number") {
-            return _jsx(StyledText, { style: textStyle, children: child });
+            return _jsx(StyledText, { selectable: false, style: textStyle, children: child });
         }
         return child;
     }));
@@ -69,6 +69,7 @@ const createStyles = (theme) => StyleSheet.create({
         fontSize: 12,
         fontWeight: "500",
         lineHeight: 18,
+        userSelect: "none",
     },
 });
 export { Badge };

package/dist/components/Button.js

@@ -1,33 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Pressable, StyleSheet, View, Platform, ActivityIndicator, } from "react-native";
 import Animated from "react-native-reanimated";
 import { spacing } from "../constants/spacing.js";
-import { StyledText, TextColorContext } from "./StyledText.js";
+import { StyledText, TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.js";
 import { fontFamilies } from "../constants/fonts.js";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 const SIZE_CONFIGS = {
     sm: {
-        paddingVertical: spacing.xs,
-        paddingHorizontal: 12,
+        paddingVertical: spacing.xxs,
+        paddingHorizontal: 10,
         fontSize: 12,
-        height: 32,
+        height: 28,
     },
     md: {
-        paddingVertical: spacing.sm,
-        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.xs,
+        paddingHorizontal: 12,
         fontSize: 14,
-        height: 36,
+        height: 32,
     },
     lg: {
-        paddingVertical: 10,
-        paddingHorizontal: spacing.lg,
-        fontSize: 16,
-        height: 44,
+        paddingVertical: 6,
+        paddingHorizontal: spacing.md,
+        fontSize: 15,
+        height: 40,
     },
 };
+const getNativeHitSlop = (sizeConfig) => Math.ceil(Math.max(0, spacing.touchTarget - sizeConfig.height) / 2);
 /**
  * Enhanced Button Component
  *
@@ -65,10 +66,11 @@ const SIZE_CONFIGS = {
  */
 export function Button(props) {
     const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow = false, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
-    const { theme, getContrastingColor, getShadowStyle } = useTheme();
-    const styles = createStyles(theme, size);
+    const { theme, getContrastingColor, getFocusRingStyle, getShadowStyle } = useTheme();
+    const styles = useMemo(() => createStyles(theme, size), [theme, size]);
     const shadowStyle = getShadowStyle("base");
     const sizeConfig = SIZE_CONFIGS[size];
+    const focusRingStyle = getFocusRingStyle();
     // Pre-compute background color for contrast calculation
     // Always flatten to handle both array styles (from Slot) and RegisteredStyle
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
@@ -106,6 +108,7 @@ export function Button(props) {
                         ? theme.colors.secondaryForeground
                         : getContrastingColor(backgroundColor, palette.white, palette.black);
     const [focused, setFocused] = useState(false);
+    const [restingWidth, setRestingWidth] = useState();
     const isDisabled = disabled || loading;
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!isDisabled,
@@ -128,45 +131,60 @@ export function Button(props) {
         pressHandlers.onPressOut();
         onPressOut?.(event);
     };
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: handleFocus, onBlur: handleBlur, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
-                        styles.button,
-                        preset === "default" && styles.buttonDefault,
-                        preset === "outline" && styles.buttonOutline,
-                        preset === "ghost" && styles.buttonGhost,
-                        preset === "link" && styles.buttonLink,
-                        preset === "destructive" && styles.buttonDestructive,
-                        preset === "secondary" && styles.buttonSecondary,
-                        fullWidth && styles.fullWidth,
-                        withShadow && !isDisabled && shadowStyle,
-                        state.pressed && styles.pressed,
-                        state.pressed && pressedStyleOverride,
-                        isDisabled && styles.disabled,
-                        isDisabled && disabledStyleOverride,
-                        Platform.OS === "web" && focused && !isDisabled && {
-                            boxShadow: `0 0 0 2px ${theme.colors.background}, 0 0 0 4px ${theme.colors.accent}`,
-                        },
-                        // Spread array styles from Slot to prevent nested arrays on web
-                        ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
-                    ], children: [!!LeftAccessory && !loading && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), loading && (_jsx(ActivityIndicator, { size: "small", color: textColor, style: styles.loader })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
-                                styles.text,
-                                state.pressed && styles.pressedText,
-                                state.pressed && pressedTextStyleOverride,
-                                isDisabled && disabledTextStyleOverride,
-                                textStyleOverride,
-                            ] })) : !loading && children ? (
-                        // Wrap string children in StyledText to apply TextColorContext
-                        typeof children === "string" ? (_jsx(StyledText, { style: [
-                                styles.text,
-                                state.pressed && styles.pressedText,
-                                state.pressed && pressedTextStyleOverride,
-                                isDisabled && disabledTextStyleOverride,
-                                textStyleOverride,
-                            ], children: children })) : (children)) : null, !!RightAccessory && !loading && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] }) })) }) }));
+    const handleButtonLayout = useCallback((event) => {
+        if (loading || fullWidth)
+            return;
+        const nextWidth = event.nativeEvent.layout.width;
+        if (nextWidth <= 0)
+            return;
+        setRestingWidth((currentWidth) => {
+            if (currentWidth !== undefined && Math.abs(currentWidth - nextWidth) < 0.5) {
+                return currentWidth;
+            }
+            return nextWidth;
+        });
+    }, [fullWidth, loading]);
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: styles.text, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: handleFocus, onBlur: handleBlur, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
+                                styles.button,
+                                preset === "default" && styles.buttonDefault,
+                                preset === "outline" && styles.buttonOutline,
+                                preset === "ghost" && styles.buttonGhost,
+                                preset === "link" && styles.buttonLink,
+                                preset === "destructive" && styles.buttonDestructive,
+                                preset === "secondary" && styles.buttonSecondary,
+                                fullWidth && styles.fullWidth,
+                                withShadow && !isDisabled && shadowStyle,
+                                state.pressed && preset === "outline" && styles.pressedMuted,
+                                state.pressed && preset === "ghost" && styles.pressedMuted,
+                                state.pressed && styles.pressed,
+                                state.pressed && pressedStyleOverride,
+                                isDisabled && styles.disabled,
+                                isDisabled && disabledStyleOverride,
+                                focused && !isDisabled && focusRingStyle,
+                                loading && restingWidth !== undefined && !fullWidth && { width: restingWidth },
+                                // Spread array styles from Slot to prevent nested arrays on web
+                                ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
+                            ], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: styles.loaderOverlay, pointerEvents: "none", children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { style: [styles.content, loading && styles.loadingContent], pointerEvents: loading ? "none" : "auto", children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
+                                                styles.text,
+                                                state.pressed && styles.pressedText,
+                                                state.pressed && pressedTextStyleOverride,
+                                                isDisabled && disabledTextStyleOverride,
+                                                textStyleOverride,
+                                            ] })) : children ? (
+                                        // Wrap string children in StyledText to apply control typography.
+                                        typeof children === "string" ? (_jsx(StyledText, { style: [
+                                                styles.text,
+                                                state.pressed && styles.pressedText,
+                                                state.pressed && pressedTextStyleOverride,
+                                                isDisabled && disabledTextStyleOverride,
+                                                textStyleOverride,
+                                            ], children: children })) : (children)) : (null), !!RightAccessory && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] })] }) })) }) }) }) }));
 }
 const createStyles = (theme, size) => {
     const sizeConfig = SIZE_CONFIGS[size];
     return StyleSheet.create({
         button: {
+            position: "relative",
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "center",
@@ -177,6 +195,15 @@ const createStyles = (theme, size) => {
             flexShrink: 0,
             ...(Platform.OS === "web" && { cursor: "pointer" }),
         },
+        content: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+        },
+        loadingContent: {
+            opacity: 0,
+        },
         buttonDefault: {
             backgroundColor: theme.colors.primary,
         },
@@ -189,7 +216,7 @@ const createStyles = (theme, size) => {
         buttonOutline: {
             backgroundColor: "transparent",
             borderWidth: 1,
-            borderColor: theme.colors.border,
+            borderColor: theme.colors.input,
         },
         buttonGhost: {
             backgroundColor: "transparent",
@@ -209,10 +236,14 @@ const createStyles = (theme, size) => {
             textAlign: "center",
             lineHeight: sizeConfig.fontSize * 1.4,
             flexShrink: 0,
+            userSelect: "none",
         },
         pressed: {
             opacity: 0.9,
         },
+        pressedMuted: {
+            backgroundColor: theme.colors.muted,
+        },
         pressedText: {
             opacity: 0.9,
         },
@@ -225,8 +256,10 @@ const createStyles = (theme, size) => {
         rightAccessory: {
             marginLeft: spacing.sm,
         },
-        loader: {
-            marginRight: spacing.sm,
+        loaderOverlay: {
+            ...StyleSheet.absoluteFillObject,
+            alignItems: "center",
+            justifyContent: "center",
         },
     });
 };

package/dist/components/Card.js

@@ -39,8 +39,9 @@ function useCardContext() {
     return ctx;
 }
 function Card({ children, style: styleOverride, variant = "default", onPress, disabled }) {
-    const { theme } = useTheme();
+    const { theme, getShadowStyle } = useTheme();
     const styles = createCardStyles(theme);
+    const shadowStyle = getShadowStyle("subtle");
     const ctx = { theme, styles };
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !onPress || !!disabled,
@@ -50,6 +51,7 @@ function Card({ children, style: styleOverride, variant = "default", onPress, di
     const cardContent = (_jsx(View, { style: [
             styles.card,
             variant === "default" && styles.cardDefault,
+            variant === "default" && shadowStyle,
             variant === "outline" && styles.cardOutline,
             variant === "ghost" && styles.cardGhost,
             styleOverride,
@@ -82,7 +84,6 @@ function CardDescription({ children, style: styleOverride, ...props }) {
 const createCardStyles = (theme) => StyleSheet.create({
     card: {
         borderRadius: spacing.radiusLg,
-        overflow: "hidden",
     },
     cardDefault: {
         backgroundColor: theme.colors.card,
@@ -116,7 +117,7 @@ const createCardStyles = (theme) => StyleSheet.create({
     title: {
         fontSize: 18,
         lineHeight: 24,
-        letterSpacing: -0.3,
+        letterSpacing: 0,
     },
     description: {
         fontSize: 14,

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { Icon } from "./Icon.js";
 import { StyledText } from "./StyledText.js";
@@ -43,7 +43,7 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     const checkboxElement = (_jsx(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, style: {
             borderColor,
-            backgroundColor: checked || indeterminate ? theme.colors.primary : "transparent",
+            backgroundColor: checked || indeterminate ? theme.colors.primary : theme.colors.background,
             borderRadius: spacing.radiusSm,
             borderWidth: 1,
             width: sizeConfig.size,
@@ -51,6 +51,7 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
             justifyContent: "center",
             alignItems: "center",
             opacity: disabled ? 0.5 : 1,
+            ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
             ...(flattenedStyle || {}),
         }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "checkbox", accessibilityState: {
             checked: indeterminate ? "mixed" : checked,
@@ -67,18 +68,19 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     return (_jsxs(Pressable, { onPress: () => !disabled && wrappedOnCheckedChange(!checked), style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "checkbox", accessibilityState: {
             checked: indeterminate ? "mixed" : checked,
             disabled: !!disabled,
-        }, accessibilityLabel: label, children: [checkboxElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { style: [
+        }, accessibilityLabel: label, children: [checkboxElement, _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,

package/dist/components/Collapsible.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Animated, Platform, StyleSheet, View } from "react-native";
-import { TextClassContext } from "./StyledText.js";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.js";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
@@ -10,19 +10,20 @@ function Collapsible({ children, ...props }) {
 }
 function CollapsibleTrigger({ style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(CollapsiblePrimitive.Trigger, { ...props, style: {
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-                paddingVertical: spacing.sm,
-                ...(Platform.OS === "web" && {
-                    cursor: "pointer",
-                    outlineStyle: "none",
-                }),
-                ...(styleOverride && typeof styleOverride !== "function"
-                    ? StyleSheet.flatten(styleOverride)
-                    : {}),
-            } }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(CollapsiblePrimitive.Trigger, { ...props, style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    paddingVertical: spacing.sm,
+                    ...(Platform.OS === "web" && {
+                        cursor: "pointer",
+                        outlineStyle: "none",
+                        userSelect: "none",
+                    }),
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? StyleSheet.flatten(styleOverride)
+                        : {}),
+                } }) }) }));
 }
 function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }) {
     const { theme } = useTheme();