@mrmeg/expo-ui 0.14.0 → 0.16.0

package/dist/components/Drawer.js

@@ -8,6 +8,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { useDimensions } from "../hooks/useDimensions.js";
 import { shouldUseNativeDriver } from "../lib/animations.js";
 import { spacing } from "../constants/spacing.js";
+import { durations } from "../constants/motion.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { SansSerifBoldText } from "./StyledText.js";
@@ -263,12 +264,12 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
             const animation = Animated.parallel([
                 Animated.timing(translateX, {
                     toValue: 0,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
                 Animated.timing(backdropOpacity, {
                     toValue: 1,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
             ]);
@@ -284,12 +285,12 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
             const animation = Animated.parallel([
                 Animated.timing(translateX, {
                     toValue: closedPosition,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
                 Animated.timing(backdropOpacity, {
                     toValue: 0,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
             ]);
@@ -350,7 +351,7 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
                         }),
                         Animated.timing(backdropOpacity, {
                             toValue: 0,
-                            duration: 200,
+                            duration: durations.normal,
                             useNativeDriver: shouldUseNativeDriver,
                         }),
                     ]).start(() => {
@@ -369,7 +370,7 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
                         }),
                         Animated.timing(backdropOpacity, {
                             toValue: 1,
-                            duration: 150,
+                            duration: durations.fast,
                             useNativeDriver: shouldUseNativeDriver,
                         }),
                     ]).start();
@@ -488,7 +489,7 @@ swipeEnabled: _swipeEnabled, swipeThreshold: _swipeThreshold, velocityThreshold:
         if (previousExpanded !== null) {
             Animated.timing(widthAnim, {
                 toValue: targetWidth,
-                duration: 180,
+                duration: durations.normal,
                 useNativeDriver: false,
             }).start();
         }

package/dist/components/DropdownMenu.d.ts

@@ -46,7 +46,7 @@ declare const DropdownMenuRadioGroup: {
  * props over slot props), so this only fills the gap when none is set.
  */
 type DropdownMenuTriggerProps = DropdownMenuPrimitive.TriggerProps;
-declare function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps): React.JSX.Element;
+declare function DropdownMenuTrigger({ disabled, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
 /**
  * DropdownMenuSubTrigger Component
  * Trigger for sub-menus with automatic chevron icon

package/dist/components/DropdownMenu.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import { Animated, Platform, StyleSheet, Text, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -17,8 +18,13 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 // Platform-specific overlay
 const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
-function DropdownMenuTrigger({ ...props }) {
-    return _jsx(DropdownMenuPrimitive.Trigger, { accessibilityRole: "button", ...props });
+function DropdownMenuTrigger({ disabled, ...props }) {
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsx(DropdownMenuPrimitive.Trigger, { accessibilityRole: "button", disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut }) }));
 }
 function DropdownMenuSubTrigger({ inset = false, children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
@@ -90,68 +96,83 @@ function DropdownMenuContent({ side, align = "start", sideOffset = 4, portalHost
 }
 function DropdownMenuItem({ inset = false, variant = "default", style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Item, { ...props, style: {
-                    ...styles.item,
-                    ...(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)
-                        : {}),
-                } }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(DropdownMenuPrimitive.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 }),
+                        ...(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: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(DropdownMenuPrimitive.CheckboxItem, { ...props, style: {
-                    ...styles.indicatorItem,
-                    ...(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] }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(DropdownMenuPrimitive.CheckboxItem, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                        ...styles.indicatorItem,
+                        ...(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: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(DropdownMenuPrimitive.RadioItem, { ...props, style: {
-                    ...styles.indicatorItem,
-                    ...(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] }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(DropdownMenuPrimitive.RadioItem, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                        ...styles.indicatorItem,
+                        ...(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();

package/dist/components/EmptyState.d.ts

@@ -21,6 +21,12 @@ export interface EmptyStateProps {
     style?: StyleProp<ViewStyle>;
     /** Custom children below description / above action */
     children?: React.ReactNode;
+    /**
+     * Wraps the state in a dashed-border container with generous padding —
+     * the "empty slot" pattern. @default false (preserves existing call
+     * sites, which render without a border).
+     */
+    bordered?: boolean;
 }
 /**
  * EmptyState Component
@@ -39,4 +45,4 @@ export interface EmptyStateProps {
  * />
  * ```
  */
-export declare function EmptyState({ icon, iconSize, title, description, actionLabel, onAction, actionPreset, style, children, }: EmptyStateProps): React.JSX.Element;
+export declare function EmptyState({ icon, iconSize, title, description, actionLabel, onAction, actionPreset, style, children, bordered, }: EmptyStateProps): React.JSX.Element;

package/dist/components/EmptyState.js

@@ -1,11 +1,11 @@
 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";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * EmptyState Component
  *
@@ -23,11 +23,12 @@ import { spacing } from "../constants/spacing.js";
  * />
  * ```
  */
-export function EmptyState({ icon, iconSize = 48, title, description, actionLabel, onAction, actionPreset = "default", style, children, }) {
+export function EmptyState({ icon, iconSize = spacing.iconMd, title, description, actionLabel, onAction, actionPreset = "default", style, children, bordered = false, }) {
     const { theme } = useTheme();
-    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, text: actionLabel, style: styles.action }))] }));
+    const styles = themedStyles(theme);
+    return (_jsxs(View, { style: [styles.container, bordered && styles.bordered, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, size: "lg", style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, size: "base", style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
 }
+const MEDIA_SIZE = 56;
 const createStyles = (theme) => StyleSheet.create({
     container: {
         alignItems: "center",
@@ -35,19 +36,34 @@ const createStyles = (theme) => StyleSheet.create({
         paddingVertical: spacing.xxl,
         paddingHorizontal: spacing.lg,
     },
+    bordered: {
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: theme.colors.border,
+        borderRadius: spacing.radiusLg,
+        padding: spacing.xl,
+    },
     iconWrapper: {
+        width: MEDIA_SIZE,
+        height: MEDIA_SIZE,
+        // radiusMd here — the tokens/radius-rebase spec (which would bump this
+        // to radiusLg) hasn't landed on this branch.
+        borderRadius: spacing.radiusMd,
+        backgroundColor: theme.colors.muted,
+        alignItems: "center",
+        justifyContent: "center",
         marginBottom: spacing.md,
     },
     title: {
-        fontSize: 18,
-        lineHeight: 24,
+        // fontSize/lineHeight/letterSpacing now come from StyledText's "lg"
+        // token (18/27/-0.09) via the size prop below, so this picks up the
+        // shared letter-spacing scale instead of a hardcoded 0.
         color: theme.colors.foreground,
         textAlign: "center",
-        letterSpacing: 0,
     },
     description: {
-        fontSize: 14,
-        lineHeight: 20,
+        // fontSize/lineHeight/letterSpacing now come from StyledText's "base"
+        // token (14/21/0) via the size prop below.
         color: theme.colors.mutedForeground,
         textAlign: "center",
         marginTop: spacing.sm,
@@ -58,3 +74,4 @@ const createStyles = (theme) => StyleSheet.create({
         alignSelf: "center",
     },
 });
+const themedStyles = createThemedStyles(createStyles);

package/dist/components/InputOTP.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useCallback } from "react";
+import { useRef, useState, useCallback } from "react";
 import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { fontFamilies } from "../constants/fonts.js";
 import { StyledText } from "./StyledText.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 const CELL_WIDTH = 36;
 const CELL_HEIGHT = 40;
 const CELL_FONT_SIZE = 20;
@@ -30,7 +31,7 @@ function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = fa
     const { theme } = useTheme();
     const inputRef = useRef(null);
     const [focused, setFocused] = useState(false);
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const hasError = error || !!errorText;
     // Active cell index: next empty cell, or last cell when full
     const activeIndex = Math.min(value.length, length - 1);
@@ -99,8 +100,12 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPr
                 },
             ], children: _jsx(StyledText, { selectable: false, style: {
                     fontSize: CELL_FONT_SIZE,
-                    fontWeight: CELL_FONT_WEIGHT,
-                    fontFamily: fontFamilies.sansSerif.regular,
+                    // Semibold weight: the family carries it on native (a real static
+                    // Inter_600SemiBold file); web shares one "Inter" family across
+                    // weights, so it needs the numeric fontWeight to pick the right
+                    // @font-face variant (same rule as StyledText's WEB_FONT_WEIGHTS).
+                    ...(Platform.OS === "web" && { fontWeight: CELL_FONT_WEIGHT }),
+                    fontFamily: fontFamilies.sansSerif.semibold,
                     color: theme.colors.text,
                     textAlign: "center",
                     lineHeight: CELL_FONT_SIZE * 1.2,
@@ -128,4 +133,5 @@ const createStyles = (theme) => StyleSheet.create({
         marginTop: spacing.xs,
     },
 });
+const themedStyles = createThemedStyles(createStyles);
 export { InputOTP };

package/dist/components/Item.d.ts

@@ -0,0 +1,93 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { type TextProps } from "./StyledText";
+import { type IconName, type ThemeColorName } from "./Icon";
+export interface ItemProps {
+    children?: React.ReactNode;
+    /** Makes the row pressable with scale feedback (mirrors Card's pattern). */
+    onPress?: () => void;
+    /** Disables press handling when `onPress` is set. */
+    disabled?: boolean;
+    /** Renders a hairline divider below the row, inset past the media slot. */
+    separator?: boolean;
+    /** Custom style override for the row. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Item
+ *
+ * Grouped-list row container: `spacing.md` padding and gap, a comfortable
+ * 44pt min height, and an optional pressable scale interaction. Compose
+ * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
+ * `ItemActions`.
+ *
+ * @example
+ * ```tsx
+ * <Item onPress={() => {}} separator>
+ *   <ItemMedia icon="bell" />
+ *   <ItemContent>
+ *     <ItemTitle>Notifications</ItemTitle>
+ *     <ItemDescription>Push, email, and SMS alerts</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Icon name="chevron-right" size={18} color="mutedForeground" />
+ *   </ItemActions>
+ * </Item>
+ * ```
+ */
+export declare function Item({ children, onPress, disabled, separator, style }: ItemProps): React.JSX.Element;
+export interface ItemMediaProps {
+    /** Square size of the media slot in pixels. @default 40 */
+    size?: number;
+    /** Icon to center in the slot. Ignored if `children` is provided. */
+    icon?: IconName;
+    /** Icon color — theme color name or literal. @default "mutedForeground" */
+    iconColor?: string | ThemeColorName;
+    /** Icon size in pixels. @default 20 */
+    iconSize?: number;
+    /** Arbitrary content (e.g. an avatar image) rendered instead of the icon. */
+    children?: React.ReactNode;
+    /** Custom style override. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * ItemMedia
+ *
+ * Fixed-size leading slot for an `Item` row — an icon centered in a rounded
+ * square by default, or arbitrary content (e.g. an avatar) via `children`.
+ */
+export declare function ItemMedia({ size, icon, iconColor, iconSize, children, style }: ItemMediaProps): React.JSX.Element;
+export interface ItemContentProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * ItemContent
+ *
+ * Flex-1 vertical stack for an `Item` row's title/description (or any other
+ * content). Sits between `ItemMedia` and `ItemActions`.
+ */
+export declare function ItemContent({ children, style }: ItemContentProps): React.JSX.Element;
+/**
+ * ItemTitle
+ *
+ * `Item` row title — label weight (medium) at body size.
+ */
+export declare function ItemTitle({ children, style, ...props }: TextProps): React.JSX.Element;
+/**
+ * ItemDescription
+ *
+ * `Item` row secondary line — caption size in the muted `textDim` color.
+ */
+export declare function ItemDescription({ children, style, ...props }: TextProps): React.JSX.Element;
+export interface ItemActionsProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * ItemActions
+ *
+ * Trailing row for an `Item` — centers and gaps its children (a chevron
+ * icon, a `Switch`, value text, etc.).
+ */
+export declare function ItemActions({ children, style }: ItemActionsProps): React.JSX.Element;

package/dist/components/Item.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Pressable, StyleSheet, Platform, Animated, } from "react-native";
+import { StyledText, CaptionText } from "./StyledText.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { useScalePress } from "../hooks/useScalePress.js";
+import { spacing } from "../constants/spacing.js";
+// Default ItemMedia footprint (see ItemMedia's `size` prop) — used to inset
+// the optional separator past the media slot without needing a context.
+const DEFAULT_MEDIA_SIZE = 40;
+const SEPARATOR_INSET = spacing.md + DEFAULT_MEDIA_SIZE + spacing.md;
+/**
+ * Item
+ *
+ * Grouped-list row container: `spacing.md` padding and gap, a comfortable
+ * 44pt min height, and an optional pressable scale interaction. Compose
+ * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
+ * `ItemActions`.
+ *
+ * @example
+ * ```tsx
+ * <Item onPress={() => {}} separator>
+ *   <ItemMedia icon="bell" />
+ *   <ItemContent>
+ *     <ItemTitle>Notifications</ItemTitle>
+ *     <ItemDescription>Push, email, and SMS alerts</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Icon name="chevron-right" size={18} color="mutedForeground" />
+ *   </ItemActions>
+ * </Item>
+ * ```
+ */
+export function Item({ children, onPress, disabled, separator = false, style }) {
+    const { theme } = useTheme();
+    const { animatedStyle, pressHandlers } = useScalePress({
+        disabled: !onPress || !!disabled,
+        scaleTo: 0.98,
+        haptic: false,
+    });
+    const row = (_jsx(View, { style: [styles.row, style], children: children }));
+    const content = separator ? (_jsxs(View, { children: [row, _jsx(View, { style: [styles.separator, { backgroundColor: theme.colors.border }] })] })) : (row);
+    if (onPress) {
+        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, ...pressHandlers, style: Platform.OS === "web" ? { cursor: "pointer" } : undefined, children: _jsx(Animated.View, { style: animatedStyle, children: content }) }));
+    }
+    return content;
+}
+/**
+ * ItemMedia
+ *
+ * Fixed-size leading slot for an `Item` row — an icon centered in a rounded
+ * square by default, or arbitrary content (e.g. an avatar) via `children`.
+ */
+export function ItemMedia({ size = DEFAULT_MEDIA_SIZE, icon, iconColor = "mutedForeground", iconSize = 20, children, style }) {
+    const { theme } = useTheme();
+    return (_jsx(View, { style: [
+            {
+                width: size,
+                height: size,
+                borderRadius: spacing.radiusMd,
+                backgroundColor: theme.colors.muted,
+                alignItems: "center",
+                justifyContent: "center",
+            },
+            style,
+        ], children: children ?? (!!icon && _jsx(Icon, { name: icon, size: iconSize, color: iconColor, decorative: true })) }));
+}
+/**
+ * ItemContent
+ *
+ * Flex-1 vertical stack for an `Item` row's title/description (or any other
+ * content). Sits between `ItemMedia` and `ItemActions`.
+ */
+export function ItemContent({ children, style }) {
+    return _jsx(View, { style: [styles.content, style], children: children });
+}
+/**
+ * ItemTitle
+ *
+ * `Item` row title — label weight (medium) at body size.
+ */
+export function ItemTitle({ children, style, ...props }) {
+    return (_jsx(StyledText, { size: "body", fontWeight: "medium", ...props, style: style, children: children }));
+}
+/**
+ * ItemDescription
+ *
+ * `Item` row secondary line — caption size in the muted `textDim` color.
+ */
+export function ItemDescription({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(CaptionText, { ...props, style: [{ color: theme.colors.textDim }, style], children: children }));
+}
+/**
+ * ItemActions
+ *
+ * Trailing row for an `Item` — centers and gaps its children (a chevron
+ * icon, a `Switch`, value text, etc.).
+ */
+export function ItemActions({ children, style }) {
+    return _jsx(View, { style: [styles.actions, style], children: children });
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        minHeight: spacing.touchTarget,
+        padding: spacing.md,
+        gap: spacing.md,
+    },
+    content: {
+        flex: 1,
+        justifyContent: "center",
+        gap: spacing.xxs,
+    },
+    actions: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    separator: {
+        height: StyleSheet.hairlineWidth,
+        marginLeft: SEPARATOR_INSET,
+    },
+});

package/dist/components/Label.js

@@ -1,11 +1,11 @@
 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";
 import { spacing } from "../constants/spacing.js";
 import { fontFamilies } from "../constants/fonts.js";
 import { StyledText } from "./StyledText.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 const SIZE_CONFIGS = {
     sm: { fontSize: 12 },
     md: { fontSize: 14 },
@@ -37,7 +37,7 @@ const SIZE_CONFIGS = {
  */
 export function Label({ children, nativeID, required, size = "md", error, disabled, style, onPress, }) {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const sizeConfig = SIZE_CONFIGS[size];
     const textStyle = StyleSheet.flatten([
         styles.label,
@@ -56,8 +56,13 @@ const createStyles = (theme) => StyleSheet.create({
         marginBottom: spacing.xs,
     },
     label: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontWeight: "500",
+        // Medium weight: the family carries it on native (a real static
+        // Inter_500Medium file); web shares one "Inter" family across weights,
+        // so it needs the numeric fontWeight to pick the right @font-face
+        // variant. Setting fontWeight on native would faux-bold on top of the
+        // already-medium file (same rule as StyledText's WEB_FONT_WEIGHTS).
+        fontFamily: fontFamilies.sansSerif.medium,
+        ...(Platform.OS === "web" && { fontWeight: "500" }),
         color: theme.colors.text,
         userSelect: "none",
     },
@@ -73,3 +78,4 @@ const createStyles = (theme) => StyleSheet.create({
         opacity: 0.6,
     },
 });
+const themedStyles = createThemedStyles(createStyles);