@mrmeg/expo-ui 0.14.0 → 0.16.0

package/dist/components/Notification.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback, use, useEffect, useEffectEvent, useRef } from "react";
+import { useCallback, use, useEffect, useEffectEvent, useRef } from "react";
 import { Animated, Easing, StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
-import { fontFamilies } from "../constants/fonts.js";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
+import { durations } from "../constants/motion.js";
 import { StyledText } from "./StyledText.js";
 import { palette } from "../constants/colors.js";
 import { translateText } from "../lib/i18n.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 import { globalUIStore } from "../state/globalUIStore.js";
-const timingIn = { duration: 150, easing: Easing.out(Easing.quad), useNativeDriver: true };
-const timingOut = { duration: 100, easing: Easing.in(Easing.quad), useNativeDriver: true };
+const timingIn = { duration: durations.fast, easing: Easing.out(Easing.quad), useNativeDriver: true };
+const timingOut = { duration: durations.instant, easing: Easing.in(Easing.quad), useNativeDriver: true };
 /**
  * Notification
  *
@@ -36,7 +37,7 @@ export const Notification = () => {
     const reduceMotion = useReducedMotion();
     const insets = use(SafeAreaInsetsContext);
     const { alert, hide } = globalUIStore();
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const position = alert?.position ?? "top";
     const isBottom = position === "bottom";
     // Just opacity + translateY — no scale (scale = bouncy feel)
@@ -219,14 +220,14 @@ export const Notification = () => {
                 styles.alert,
                 isBottom && styles.alertBottom,
                 getShadowStyle("elevated"),
-            ], 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: message }))] }), action && (_jsx(Pressable, { style: ({ pressed }) => [
+            ], 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, size: "base", fontWeight: "semibold", style: { color: theme.colors.foreground }, numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, size: "sm", style: { color: theme.colors.mutedForeground }, numberOfLines: 2, children: message }))] }), action && (_jsx(Pressable, { style: ({ pressed }) => [
                         styles.actionButton,
                         {
                             borderColor: theme.colors.primary + "30",
                             backgroundColor: theme.colors.primary + "10",
                         },
                         pressed && styles.actionButtonPressed,
-                    ], hitSlop: spacing.xs, onPress: handleActionPress, accessibilityLabel: action.label, accessibilityRole: "button", children: _jsx(StyledText, { selectable: false, style: [styles.actionLabel, { color: theme.colors.primary }], numberOfLines: 1, children: action.label }) })), _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 }) })] }) }));
+                    ], hitSlop: spacing.xs, onPress: handleActionPress, accessibilityLabel: action.label, accessibilityRole: "button", children: _jsx(StyledText, { selectable: false, size: "sm", fontWeight: "semibold", style: { color: theme.colors.primary }, numberOfLines: 1, children: action.label }) })), _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: {
@@ -270,17 +271,11 @@ const createStyles = (theme) => StyleSheet.create({
         justifyContent: "center",
         gap: spacing.xxs,
     },
-    alertTitle: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontWeight: "600",
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    alertDescription: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontSize: 13,
-        lineHeight: 18,
-    },
+    // alertTitle/alertDescription/actionLabel font styling (family, size,
+    // weight, lineHeight) now comes entirely from StyledText's size/fontWeight
+    // props (see JSX above) — the nearest tokens to the previous hardcoded
+    // values (14/20/600, 13/18/regular, 13/18/600) are "base"+"semibold",
+    // "sm", and "sm"+"semibold" respectively.
     actionButton: {
         minHeight: 28,
         maxWidth: 140,
@@ -295,12 +290,6 @@ const createStyles = (theme) => StyleSheet.create({
     actionButtonPressed: {
         opacity: 0.75,
     },
-    actionLabel: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontWeight: "600",
-        fontSize: 13,
-        lineHeight: 18,
-    },
     closeButton: {
         position: "absolute",
         top: spacing.sm,
@@ -313,3 +302,4 @@ const createStyles = (theme) => StyleSheet.create({
         ...(Platform.OS === "web" && { cursor: "pointer" }),
     },
 });
+const themedStyles = createThemedStyles(createStyles);

package/dist/components/Popover.d.ts

@@ -5,15 +5,8 @@ import { View, ViewProps } from "react-native";
  * Popover Trigger Component
  * The element that triggers the popover to open/close
  */
-declare const PopoverTrigger: {
-    ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
-        asChild?: boolean;
-    } & {
-        onKeyDown?: (ev: React.KeyboardEvent) => void;
-        onKeyUp?: (ev: React.KeyboardEvent) => void;
-    } & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>): React.JSX.Element;
-    displayName: string;
-};
+type PopoverTriggerProps = PopoverPrimitive.TriggerProps;
+declare function PopoverTrigger({ disabled, ...props }: PopoverTriggerProps): React.JSX.Element;
 interface PopoverContentProps extends PopoverPrimitive.ContentProps {
     /**
      * Optional portal host name for custom portal mounting
@@ -62,15 +55,7 @@ declare const Popover: {
     } & React.RefAttributes<View>): React.JSX.Element;
     displayName: string;
 } & {
-    Trigger: {
-        ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
-            asChild?: boolean;
-        } & {
-            onKeyDown?: (ev: React.KeyboardEvent) => void;
-            onKeyUp?: (ev: React.KeyboardEvent) => void;
-        } & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>): React.JSX.Element;
-        displayName: string;
-    };
+    Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;
     Header: typeof PopoverHeader;
     Body: typeof PopoverBody;

package/dist/components/Popover.js

@@ -3,16 +3,20 @@ import { AnimatedView } from "./AnimatedView.js";
 import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as PopoverPrimitive from "@rn-primitives/popover";
 import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { palette } from "../constants/colors.js";
-/**
- * Popover Trigger Component
- * The element that triggers the popover to open/close
- */
-const PopoverTrigger = PopoverPrimitive.Trigger;
+function PopoverTrigger({ disabled, ...props }) {
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsx(PopoverPrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut }) }));
+}
 /**
  * FullWindowOverlay wrapper - uses native overlay on iOS for proper z-index handling
  * On Android/Web, uses Fragment to avoid unnecessary nesting

package/dist/components/RadioGroup.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useEffect, useRef } from "react";
+import React, { createContext, use, useEffect, useRef, useState } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { hapticLight } from "../lib/haptics.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -54,10 +55,35 @@ function RadioGroupRoot({ size = "md", error = false, value, onValueChange, styl
  * Must be rendered inside a RadioGroup.
  */
 function RadioGroupItem({ label, required = false, style: styleOverride, labelStyle, value: itemValue, disabled, ...props }) {
-    const { theme, getContrastingColor } = useTheme();
+    const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     const reduceMotion = useReducedMotion();
     const { size, error, value: groupValue, onValueChange } = useRadioGroupContext();
     const sizeConfig = SIZE_CONFIGS[size];
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = useState(false);
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.92,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
     const isChecked = groupValue === itemValue;
     // Animated dot scale — follows Checkbox opacity pattern
     const dotScale = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
@@ -75,26 +101,27 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, style: {
-            ...styles.radio,
-            borderColor,
-            backgroundColor: theme.colors.background,
-            borderRadius: sizeConfig.outer / 2,
-            borderWidth: sizeConfig.borderWidth,
-            width: sizeConfig.outer,
-            height: sizeConfig.outer,
-            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: [
-                { transform: [{ scale: dotScale }] },
-                {
-                    width: sizeConfig.inner,
-                    height: sizeConfig.inner,
-                    borderRadius: sizeConfig.inner / 2,
-                    backgroundColor: theme.colors.primary,
-                },
-            ] }) }));
+    const radioElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                ...styles.radio,
+                borderColor,
+                backgroundColor: theme.colors.background,
+                borderRadius: sizeConfig.outer / 2,
+                borderWidth: sizeConfig.borderWidth,
+                width: sizeConfig.outer,
+                height: sizeConfig.outer,
+                opacity: disabled ? 0.5 : 1,
+                ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
+                ...(focused && !disabled ? focusRingStyle : null),
+                ...(flattenedStyle || {}),
+            }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
+                    { transform: [{ scale: dotScale }] },
+                    {
+                        width: sizeConfig.inner,
+                        height: sizeConfig.inner,
+                        borderRadius: sizeConfig.inner / 2,
+                        backgroundColor: theme.colors.primary,
+                    },
+                ] }) }) }));
     // If no label, return just the radio button
     if (!label) {
         return radioElement;

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import { type TextProps } from "./StyledText";
+type TextPassthroughProps = Omit<TextProps, "style" | "children"> & {
+    style?: StyleProp<TextStyle>;
+};
+export interface SectionHeaderProps {
+    /** Small uppercase label rendered above the title. */
+    eyebrow?: string;
+    /** Section title. */
+    title: string;
+    /** Supporting copy rendered below the title. */
+    description?: string;
+    /** Text alignment for the whole block. @default "leading" */
+    align?: "leading" | "center";
+    /** Custom style override for the container. */
+    style?: StyleProp<ViewStyle>;
+    /** Passthrough props for the title text. */
+    titleProps?: TextPassthroughProps;
+    /** Passthrough props for the description text. */
+    descriptionProps?: TextPassthroughProps;
+}
+/**
+ * SectionHeader
+ *
+ * Composed eyebrow -> title -> description block used to introduce a page
+ * section. Supports a leading (default) or centered alignment; centered
+ * descriptions are width-constrained so long copy doesn't stretch edge to
+ * edge.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader
+ *   eyebrow="Pricing"
+ *   title="Simple, transparent plans"
+ *   description="Pick the plan that fits your team. Upgrade or cancel anytime."
+ *   align="center"
+ * />
+ * ```
+ */
+export declare function SectionHeader({ eyebrow, title, description, align, style, titleProps, descriptionProps, }: SectionHeaderProps): React.JSX.Element;
+export {};

package/dist/components/SectionHeader.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
+import { EyebrowText, TitleText, BodyText } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+/**
+ * SectionHeader
+ *
+ * Composed eyebrow -> title -> description block used to introduce a page
+ * section. Supports a leading (default) or centered alignment; centered
+ * descriptions are width-constrained so long copy doesn't stretch edge to
+ * edge.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader
+ *   eyebrow="Pricing"
+ *   title="Simple, transparent plans"
+ *   description="Pick the plan that fits your team. Upgrade or cancel anytime."
+ *   align="center"
+ * />
+ * ```
+ */
+export function SectionHeader({ eyebrow, title, description, align = "leading", style, titleProps, descriptionProps, }) {
+    const { theme } = useTheme();
+    const isCentered = align === "center";
+    const textAlign = isCentered ? "center" : "left";
+    return (_jsxs(View, { style: [{ alignItems: isCentered ? "center" : "flex-start" }, style], children: [!!eyebrow && (_jsx(EyebrowText, { style: {
+                    color: theme.colors.accent,
+                    marginBottom: spacing.xs,
+                    textAlign,
+                }, children: eyebrow })), _jsx(TitleText, { ...titleProps, style: [
+                    { textAlign },
+                    !!description && { marginBottom: spacing.sm },
+                    titleProps?.style,
+                ], children: title }), !!description && (_jsx(BodyText, { ...descriptionProps, style: [
+                    { color: theme.colors.textDim, textAlign },
+                    isCentered && { maxWidth: 560 },
+                    descriptionProps?.style,
+                ], children: description }))] }));
+}

package/dist/components/Select.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
 import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as SelectPrimitive from "@rn-primitives/select";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -34,24 +35,50 @@ const SIZE_CONFIGS = {
     },
 };
 function SelectTrigger({ size = "md", error = false, children, style: styleOverride, disabled, ...props }) {
-    const { theme } = useTheme();
+    const { theme, getFocusRingStyle } = useTheme();
     const sizeConfig = SIZE_CONFIGS[size];
-    return (_jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, style: {
-            ...styles.trigger,
-            height: sizeConfig.height,
-            paddingHorizontal: sizeConfig.paddingHorizontal,
-            borderColor: error ? theme.colors.destructive : theme.colors.border,
-            backgroundColor: theme.colors.background,
-            ...(Platform.OS === "web" && {
-                cursor: disabled ? "not-allowed" : "pointer",
-                outlineStyle: "none",
-                userSelect: "none",
-            }),
-            ...(disabled && { opacity: 0.5 }),
-            ...(styleOverride && typeof styleOverride !== "function"
-                ? StyleSheet.flatten(styleOverride)
-                : {}),
-        }, 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 })] }) }) }));
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = React.useState(false);
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                ...styles.trigger,
+                height: sizeConfig.height,
+                paddingHorizontal: sizeConfig.paddingHorizontal,
+                borderColor: error ? theme.colors.destructive : theme.colors.border,
+                backgroundColor: theme.colors.background,
+                ...(Platform.OS === "web" && {
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    outlineStyle: "none",
+                    userSelect: "none",
+                }),
+                ...(disabled && { opacity: 0.5 }),
+                ...(focused && !disabled ? focusRingStyle : null),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            }, 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();
@@ -99,29 +126,34 @@ function SelectItem({ children, style: styleOverride, ...props }) {
     // "is this a renderable node?" keeps the API explicit without switching on the
     // primitive type of children.
     const hasCustomChildren = React.isValidElement(children) || Array.isArray(children);
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(SelectPrimitive.Item, { ...props, style: {
-                ...styles.item,
-                ...(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(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: hasCustomChildren ? (children) : (_jsx(SelectPrimitive.ItemText, { style: {
-                            color: theme.colors.popoverForeground,
-                            fontSize: 14,
-                            lineHeight: 20,
-                        } })) })] }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(SelectPrimitive.Item, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                    ...styles.item,
+                    ...(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(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: hasCustomChildren ? (children) : (_jsx(SelectPrimitive.ItemText, { style: {
+                                color: theme.colors.popoverForeground,
+                                fontSize: 14,
+                                lineHeight: 20,
+                            } })) })] }) }) }));
 }
 function SelectGroup({ style: styleOverride, ...props }) {
     return (_jsx(SelectPrimitive.Group, { ...props, style: {

package/dist/components/Skeleton.js

@@ -4,6 +4,7 @@ import { View, StyleSheet, Animated } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * Skeleton Component
  *
@@ -71,9 +72,9 @@ export function SkeletonAvatar({ size = 40, style }) {
  * and text lines in a Card-styled wrapper.
  */
 export function SkeletonCard({ showImage = true, imageHeight = 140, showAvatar = true, textLines = 3, style, }) {
-    const { theme } = useTheme();
-    const styles = createCardStyles(theme);
-    return (_jsxs(View, { style: [styles.card, style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
+    const { theme, getShadowStyle } = useTheme();
+    const styles = themedStyles(theme);
+    return (_jsxs(View, { style: [styles.card, getShadowStyle("subtle"), style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
 }
 const createCardStyles = (theme) => StyleSheet.create({
     card: {
@@ -97,3 +98,4 @@ const createCardStyles = (theme) => StyleSheet.create({
         gap: spacing.xs,
     },
 });
+const themedStyles = createThemedStyles(createCardStyles);

package/dist/components/StatCard.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { type IconName } from "./Icon";
+export type StatChangeDirection = "up" | "down" | "neutral";
+export interface StatCardChange {
+    /** Signed change text, e.g. "+12.5%" or "-3 orders". */
+    value: string;
+    /** Visual direction — drives color and (for up/down) a trend icon. */
+    direction: StatChangeDirection;
+}
+export interface StatCardProps {
+    /** Small uppercase label describing the stat. */
+    label: string;
+    /** The headline stat value. */
+    value: string | number;
+    /** Optional unit suffix rendered smaller and muted next to the value. */
+    unit?: string;
+    /** Optional signed change line below the value. */
+    change?: StatCardChange;
+    /** Optional leading icon name (Feather), rendered beside the label. */
+    icon?: IconName;
+    /** Makes the card pressable with scale feedback (delegates to Card). */
+    onPress?: () => void;
+    /** Custom style override for the outer card. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * StatCard
+ *
+ * Dashboard stat idiom: a tiny uppercase tracked label, a large
+ * tabular-nums value (with an optional muted unit suffix), and an optional
+ * signed change line (success/destructive/muted by direction). Builds on
+ * `Card` for the container, default shadow, and press feedback.
+ *
+ * @example
+ * ```tsx
+ * <StatCard
+ *   label="Revenue"
+ *   value="48.2"
+ *   unit="k"
+ *   change={{ value: "+12.5%", direction: "up" }}
+ * />
+ * ```
+ */
+export declare function StatCard({ label, value, unit, change, icon, onPress, style }: StatCardProps): React.JSX.Element;

package/dist/components/StatCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
+import { Card } from "./Card.js";
+import { CaptionText, StyledText } from "./StyledText.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+// Only "up"/"down" get a directional trend icon — "neutral" is text-only.
+const DIRECTION_ICON = {
+    up: "trending-up",
+    down: "trending-down",
+};
+/**
+ * StatCard
+ *
+ * Dashboard stat idiom: a tiny uppercase tracked label, a large
+ * tabular-nums value (with an optional muted unit suffix), and an optional
+ * signed change line (success/destructive/muted by direction). Builds on
+ * `Card` for the container, default shadow, and press feedback.
+ *
+ * @example
+ * ```tsx
+ * <StatCard
+ *   label="Revenue"
+ *   value="48.2"
+ *   unit="k"
+ *   change={{ value: "+12.5%", direction: "up" }}
+ * />
+ * ```
+ */
+export function StatCard({ label, value, unit, change, icon, onPress, style }) {
+    const { theme } = useTheme();
+    const changeColor = !change
+        ? undefined
+        : change.direction === "up"
+            ? theme.colors.success
+            : change.direction === "down"
+                ? theme.colors.destructive
+                : theme.colors.textDim;
+    return (_jsx(Card, { onPress: onPress, style: style, children: _jsxs(View, { style: { padding: spacing.lg, gap: spacing.xs }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [_jsx(CaptionText, { selectable: false, style: { color: theme.colors.textDim, textTransform: "uppercase", letterSpacing: 0.96 }, children: label }), !!icon && _jsx(Icon, { name: icon, size: spacing.iconSm, color: theme.colors.mutedForeground, decorative: true })] }), _jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end" }, children: [_jsx(StyledText, { selectable: false, size: "xxl", fontWeight: "bold", style: { color: theme.colors.foreground, fontVariant: ["tabular-nums"] }, children: value }), !!unit && (_jsx(StyledText, { selectable: false, size: "base", style: { color: theme.colors.textDim, marginLeft: spacing.xxs, marginBottom: 2 }, children: unit }))] }), !!change && (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: spacing.xxs }, children: [change.direction !== "neutral" && (_jsx(Icon, { name: DIRECTION_ICON[change.direction], size: spacing.iconXs, color: changeColor, decorative: true })), _jsx(StyledText, { selectable: false, size: "sm", style: { color: changeColor }, children: change.value })] }))] }) }));
+}