@sincpro/mobile-ui 1.0.1 → 2.0.0

package/dist/Display/Display.CopyableText.js

@@ -1,14 +1,82 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import * as Clipboard from "expo-clipboard";
-import { TouchableOpacity } from "react-native";
-function CopyableText({ value, getValue, label, className }) {
+import { useEffect, useRef, useState } from "react";
+import { AccessibilityInfo, ActivityIndicator, View } from "react-native";
+function CopyableText({ value, getValue, label, className, accessibilityLabel, testID, disabled = false, onCopied, onCopyError, selectable = false, }) {
+    const theme = useTheme();
+    const pending = useRef(false);
+    const [status, setStatus] = useState("idle");
+    const [copiedValue, setCopiedValue] = useState();
     const hasStaticValue = value !== undefined;
-    const displayText = label || value;
+    const isCopied = status === "copied" && (!hasStaticValue || copiedValue === value);
+    const displayText = label || value || "Copiar";
+    const copyLabel = accessibilityLabel ?? `Copiar ${displayText}`;
+    useEffect(() => {
+        if (status !== "copied")
+            return;
+        const timer = setTimeout(() => setStatus("idle"), 3000);
+        return () => clearTimeout(timer);
+    }, [status]);
     const handleCopy = async () => {
-        const textToCopy = hasStaticValue ? value : getValue();
-        await Clipboard.setStringAsync(textToCopy);
+        if (pending.current || disabled)
+            return;
+        pending.current = true;
+        setStatus("copying");
+        let textToCopy;
+        try {
+            textToCopy = hasStaticValue ? value : getValue();
+            const copied = await Clipboard.setStringAsync(textToCopy);
+            if (!copied)
+                throw new Error("El portapapeles no pudo copiar el texto");
+        }
+        catch (cause) {
+            const error = cause instanceof Error ? cause : new Error(String(cause));
+            setStatus("error");
+            AccessibilityInfo.announceForAccessibility("No se pudo copiar. Toca para reintentar.");
+            pending.current = false;
+            console.error("CopyableText: no se pudo copiar", error);
+            onCopyError?.(error);
+            return;
+        }
+        pending.current = false;
+        setCopiedValue(textToCopy);
+        setStatus("copied");
+        AccessibilityInfo.announceForAccessibility("Copiado");
+        onCopied?.(textToCopy);
     };
-    return (_jsx(TouchableOpacity, { onPress: handleCopy, children: _jsx(Typography.Text, { className: className || "text-text-accent", semibold: true, variant: "bodySmall", children: displayText }) }));
+    return (_jsxs(View, { children: [_jsxs(View, { style: {
+                    flexDirection: "row",
+                    alignItems: selectable ? "flex-start" : "center",
+                    gap: 8,
+                }, children: [selectable ? (_jsx(Typography.SelectableText, { className: className, style: { flex: 1 }, value: displayText, variant: "body" })) : null, _jsxs(Pressable, { accessibilityHint: selectable ? "Copia el texto completo" : "Toca para copiar", accessibilityLabel: isCopied ? `${copyLabel}. Copiado` : copyLabel, accessibilityState: {
+                            disabled: disabled || status === "copying",
+                            busy: status === "copying",
+                        }, accessibilityValue: {
+                            text: isCopied
+                                ? "Copiado"
+                                : status === "copying"
+                                    ? "Copiando"
+                                    : status === "error"
+                                        ? "Error al copiar"
+                                        : "",
+                        }, disabled: disabled || status === "copying", onPress: () => {
+                            void handleCopy();
+                        }, style: {
+                            minHeight: 48,
+                            minWidth: 48,
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: selectable ? "center" : "flex-start",
+                            gap: 8,
+                            flexShrink: selectable ? 0 : 1,
+                        }, testID: testID, children: [!selectable ? (_jsx(Typography.Text, { className: className, style: { flexShrink: 1 }, variant: "body", children: displayText })) : null, _jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { width: 24, alignItems: "center" }, children: status === "copying" ? (_jsx(ActivityIndicator, { color: theme.text.accent, size: "small" })) : (_jsx(Icon, { color: isCopied ? theme.success : theme.text.accent, name: isCopied
+                                        ? "checkmark"
+                                        : status === "error"
+                                            ? "alert-circle-outline"
+                                            : "copy-outline", size: 20 })) })] })] }), status === "error" ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", variant: "bodySmall", children: "No se pudo copiar. Toca para reintentar." })) : null] }));
 }
 export default CopyableText;

package/dist/Display/Display.ExpoImage.d.ts

@@ -0,0 +1,8 @@
+import { Image } from "expo-image";
+import type { ComponentPropsWithRef } from "react";
+export type ExpoImageProps = Omit<ComponentPropsWithRef<typeof Image>, "resizeMode" | "defaultSource" | "loadingIndicatorSource"> & {
+    className?: string;
+};
+declare function ExpoImage({ cachePolicy, transition, autoplay, sfEffect, onError, source, recyclingKey, ...props }: ExpoImageProps): import("react").JSX.Element;
+export default ExpoImage;
+export { ExpoImage };

package/dist/Display/Display.ExpoImage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { imageSourceKey } from "../utils/image.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { Image } from "expo-image";
+import { cssInterop } from "nativewind";
+const StyledImage = cssInterop(Image, { className: "style" });
+function ExpoImage({ cachePolicy = "disk", transition = 0, autoplay = true, sfEffect, onError, source, recyclingKey, ...props }) {
+    const reducedMotion = useReducedMotion();
+    return (_jsx(StyledImage, { ...props, autoplay: autoplay && !reducedMotion, cachePolicy: cachePolicy, onError: (event) => {
+            console.error("[ExpoImage] Image load failed", event.error);
+            onError?.(event);
+        }, recyclingKey: recyclingKey === undefined ? imageSourceKey(source) : recyclingKey, sfEffect: reducedMotion ? null : sfEffect, source: source, transition: reducedMotion ? 0 : transition }));
+}
+export default ExpoImage;
+export { ExpoImage };

package/dist/Display/Display.Icon.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { AntDesign, Feather, FontAwesome, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons, SimpleLineIcons, } from "@expo/vector-icons";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { View } from "react-native";
 const Icon = ({ name, size = 24, color, type = "ionicons", customIcon, className, }) => {
+    const theme = useTheme();
     const iconColor = color || theme.text.primary;
     const renderIcon = () => {
         if (type === "custom" && customIcon) {

package/dist/Display/Display.Image.d.ts

@@ -1,15 +1,19 @@
-import { type ImageResizeMode, type ImageSourcePropType, type ImageStyle } from "react-native";
-export interface DisplayImageProps {
-    source: ImageSourcePropType;
+import { type ExpoImageProps } from "./Display.ExpoImage.js";
+import { type ImageSource } from "../utils/image.js";
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface DisplayImageProps extends Omit<ExpoImageProps, "source" | "style"> {
+    source: ImageSource;
     width?: number | `${number}%`;
     height?: number;
     aspectRatio?: number;
     radius?: number;
-    resizeMode?: ImageResizeMode;
     fallbackIcon?: string;
     className?: string;
-    style?: ImageStyle;
+    style?: ExpoImageProps["style"];
+    containerStyle?: StyleProp<ViewStyle>;
+    renderError?: (retry: () => void) => ReactNode;
     testID?: string;
 }
-declare function DisplayImage({ source, width, height, aspectRatio, radius, resizeMode, fallbackIcon, className, style, testID, }: DisplayImageProps): import("react").JSX.Element;
+declare function DisplayImage(props: DisplayImageProps): import("react").JSX.Element;
 export default DisplayImage;

package/dist/Display/Display.Image.js

@@ -1,17 +1,50 @@
+import { createElement as _createElement } from "nativewind";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Skeleton from "../Feedback/Feedback.Skeleton.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
-import { useState } from "react";
-import { Image, View, } from "react-native";
-function DisplayImage({ source, width = "100%", height, aspectRatio, radius = 12, resizeMode = "cover", fallbackIcon = "image-outline", className, style, testID, }) {
+import { imageSourceKey } from "../utils/image.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { View } from "react-native";
+function ImageContent({ source, width = "100%", height, aspectRatio, radius = 12, contentFit = "cover", placeholder, fallbackIcon = "image-outline", className, style, containerStyle, renderError, testID, onError, onLoadStart, onLoadEnd, onLoad, accessibilityLabel, accessible, retry, ...imageProps }) {
+    const theme = useTheme();
     const [loading, setLoading] = useState(true);
     const [failed, setFailed] = useState(false);
+    const active = useRef(true);
+    useLayoutEffect(() => {
+        active.current = true;
+        return () => {
+            active.current = false;
+        };
+    }, []);
     const dimensions = { width, height, aspectRatio, borderRadius: radius };
-    return (_jsx(View, { className: cn("overflow-hidden bg-bg-muted", className), style: dimensions, testID: testID, children: failed ? (_jsx(View, { className: "flex-1 items-center justify-center", children: _jsx(Icon, { color: theme.icon.disabled, name: fallbackIcon, size: 32 }) })) : (_jsxs(_Fragment, { children: [_jsx(Image, { onError: () => {
+    return (_jsx(View, { className: cn("overflow-hidden bg-bg-muted", className), style: [dimensions, containerStyle], testID: testID, children: failed ? (renderError ? (renderError(retry)) : (_jsx(View, { accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}. Imagen no disponible` : undefined, accessibilityRole: "image", accessible: accessible ?? !!accessibilityLabel, className: "flex-1 items-center justify-center", children: _jsx(Icon, { color: theme.icon.disabled, name: fallbackIcon, size: 32 }) }))) : (_jsxs(_Fragment, { children: [_jsx(ExpoImage, { ...imageProps, accessibilityLabel: accessibilityLabel, accessible: accessible, contentFit: contentFit, onError: (event) => {
+                        if (!active.current)
+                            return;
                         setFailed(true);
                         setLoading(false);
-                    }, onLoadEnd: () => setLoading(false), resizeMode: resizeMode, source: source, style: [{ width: "100%", height: "100%" }, style] }), loading ? (_jsx(View, { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: _jsx(Skeleton, { height: "100%", radius: radius, width: "100%" }) })) : null] })) }));
+                        onError?.(event);
+                    }, onLoad: (event) => {
+                        if (!active.current)
+                            return;
+                        setLoading(false);
+                        onLoad?.(event);
+                    }, onLoadEnd: () => {
+                        if (!active.current)
+                            return;
+                        setLoading(false);
+                        onLoadEnd?.();
+                    }, onLoadStart: () => {
+                        if (!active.current)
+                            return;
+                        setLoading(true);
+                        onLoadStart?.();
+                    }, placeholder: placeholder, placeholderContentFit: imageProps.placeholderContentFit ?? contentFit, source: source, style: [{ width: "100%", height: "100%" }, style] }), loading && !placeholder ? (_jsx(View, { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: _jsx(Skeleton, { height: "100%", radius: radius, width: "100%" }) })) : null] })) }));
+}
+function DisplayImage(props) {
+    const [attempt, setAttempt] = useState(0);
+    return (_createElement(ImageContent, { ...props, key: `${imageSourceKey(props.source)}:${attempt}`, retry: () => setAttempt((current) => current + 1) }));
 }
 export default DisplayImage;

package/dist/Display/Display.KeyValue.d.ts

@@ -1,10 +1,17 @@
 import type { ReactNode } from "react";
-export interface KeyValueProps {
+interface KeyValueLayoutProps {
     label: string;
-    value?: ReactNode;
-    align?: "row" | "stacked";
+    align?: "row" | "stacked" | "auto";
     className?: string;
     testID?: string;
+    selectable?: boolean;
 }
-declare function KeyValue({ label, value, align, className, testID }: KeyValueProps): import("react").JSX.Element;
+export type KeyValueProps = KeyValueLayoutProps & ({
+    copyable: true;
+    value: string | number;
+} | {
+    copyable?: false;
+    value?: ReactNode;
+});
+declare function KeyValue({ label, value, align, className, testID, copyable, selectable, }: KeyValueProps): import("react").JSX.Element;
 export default KeyValue;

package/dist/Display/Display.KeyValue.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { View } from "react-native";
-function KeyValue({ label, value, align = "row", className, testID }) {
-    const isRow = align === "row";
-    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, children: value })) : (value)] }));
+import { useWindowDimensions, View } from "react-native";
+import CopyableText from "./Display.CopyableText";
+function KeyValue({ label, value, align = "row", className, testID, copyable = false, selectable = false, }) {
+    const { width, fontScale } = useWindowDimensions();
+    const isRow = align === "row" || (align === "auto" && width >= 360 && fontScale <= 1.3);
+    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(View, { className: cn("flex-shrink min-w-0", isRow && "flex-1 items-end"), children: copyable ? (_jsx(CopyableText, { accessibilityLabel: `Copiar ${label}`, selectable: selectable, value: String(value) })) : selectable ? (_jsx(Typography.SelectableText, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, style: { alignSelf: "stretch" }, value: String(value) })) : (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), selectable: selectable, semibold: isRow, children: value })) })) : (value)] }));
 }
 export default KeyValue;

package/dist/Display/Display.ListGroup.d.ts

@@ -0,0 +1,23 @@
+import { type SectionHeaderAction, type SectionHeaderProps } from "./Display.SectionHeader.js";
+import { Typography } from "../Typography/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface ListGroupProps {
+    title: string;
+    description?: string;
+    footer?: ReactNode;
+    action?: SectionHeaderAction;
+    children: ReactNode;
+    surface?: "inset" | "plain";
+    separators?: boolean;
+    className?: string;
+    contentClassName?: string;
+    testID?: string;
+    headerProps?: Omit<SectionHeaderProps, "title" | "subtitle" | "action">;
+    footerTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    separatorStyle?: StyleProp<ViewStyle>;
+}
+declare function ListGroup({ title, description, footer, action, children, surface, separators, className, contentClassName, testID, headerProps, footerTextProps, style, contentStyle, separatorStyle, }: ListGroupProps): import("react").JSX.Element;
+export default ListGroup;

package/dist/Display/Display.ListGroup.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import SectionHeader from "./Display.SectionHeader.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { Children } from "react";
+import { StyleSheet, View } from "react-native";
+function ListGroup({ title, description, footer, action, children, surface = "inset", separators = true, className, contentClassName, testID, headerProps, footerTextProps, style, contentStyle, separatorStyle, }) {
+    const rows = Children.toArray(children);
+    return (_jsxs(View, { className: cn("gap-2", className), style: style, testID: testID, children: [_jsx(SectionHeader, { ...headerProps, action: action, subtitle: description, title: title }), _jsx(View, { className: cn(surface === "inset" && "rounded-2xl bg-bg-card overflow-hidden", contentClassName), style: contentStyle, testID: testID ? `${testID}-content` : undefined, children: rows.map((row, index) => (_jsxs(View, { children: [row, separators && index < rows.length - 1 ? (_jsx(View, { accessibilityElementsHidden: true, className: "bg-border-default", importantForAccessibility: "no-hide-descendants", style: [
+                                {
+                                    height: StyleSheet.hairlineWidth,
+                                    marginHorizontal: 16,
+                                },
+                                separatorStyle,
+                            ], testID: testID ? `${testID}-separator-${index}` : undefined })) : null] }, typeof row === "object" && "key" in row ? row.key : index))) }), typeof footer === "string" ? (_jsx(Typography.Text, { className: "text-text-secondary px-4", variant: "bodySmall", ...footerTextProps, children: footer })) : (footer)] }));
+}
+export default ListGroup;

package/dist/Display/Display.ListItem.d.ts

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import { Typography } from "../Typography/index.js";
+import type { ComponentProps, ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export interface ListItemProps {
     title: string;
     subtitle?: string;
@@ -12,6 +14,17 @@ export interface ListItemProps {
     showDivider?: boolean;
     className?: string;
     testID?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    disabled?: boolean;
+    variant?: "default" | "mobile";
+    value?: string;
+    layout?: "auto" | "row" | "stacked";
+    density?: "compact" | "comfortable";
+    style?: StyleProp<ViewStyle>;
+    titleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    subtitleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    valueTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
 }
-declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, accessibilityLabel, accessibilityHint, disabled, variant, value, layout, density, style, titleTextProps, subtitleTextProps, valueTextProps, }: ListItemProps): import("react").JSX.Element;
 export default ListItem;

package/dist/Display/Display.ListItem.js

@@ -1,18 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import Icon from "./Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { View } from "react-native";
-function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider = true, className, testID, }) {
+import { Pressable as NativePressable, useWindowDimensions, View, } from "react-native";
+function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider, className, testID, accessibilityLabel, accessibilityHint, disabled = false, variant = "default", value, layout = "auto", density = "compact", style, titleTextProps, subtitleTextProps, valueTextProps, }) {
+    const theme = useTheme();
+    const { width, fontScale } = useWindowDimensions();
+    const mobile = variant === "mobile";
+    const comfortable = mobile && density === "comfortable";
+    const stacked = mobile &&
+        (value !== undefined || trailing != null) &&
+        (layout === "stacked" || (layout === "auto" && (fontScale > 1.3 || width < 360)));
     const right = trailing ??
-        (chevron ? _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) : null);
-    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: "flex-1 gap-0.5", children: [_jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "body", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, variant: "bodySmall", children: subtitle })) : null] }), right ? _jsx(View, { className: "ml-3 justify-center", children: right }) : null] }));
-    const base = cn("flex-row items-center py-3 px-4 bg-bg-card", showDivider && "border-b border-border-default", className);
+        (value || chevron ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [value ? (_jsx(Typography.Text, { className: "text-text-secondary flex-shrink", variant: comfortable ? "bodyReadable" : "body", ...valueTextProps, children: value })) : null, chevron ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) })) : null] })) : null);
+    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: cn("flex-1", mobile ? "min-w-0 gap-1" : "gap-0.5"), children: [_jsx(Typography.Text, { className: mobile && disabled ? "text-text-disabled" : "text-text-primary", semibold: !mobile || comfortable, variant: comfortable ? "bodyReadable" : "body", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: comfortable ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null, stacked && right ? _jsx(View, { className: "self-start mt-1", children: right }) : null] }), !stacked && right ? (_jsx(View, { className: cn("ml-3 justify-center", mobile && "flex-shrink"), style: mobile ? { maxWidth: "45%" } : undefined, children: right })) : null] }));
+    const base = cn("flex-row items-center px-4", mobile && !comfortable ? "py-2" : "py-3", !mobile && "bg-bg-card", (showDivider ?? !mobile) && "border-b border-border-default", disabled && !mobile && "opacity-50", className);
     if (onPress) {
-        return (_jsx(Pressable, { className: base, onPress: onPress, testID: testID, children: content }));
+        if (mobile) {
+            return (_jsx(NativePressable, { accessibilityHint: accessibilityHint ?? subtitle, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: value !== undefined ? { text: value } : undefined, className: base, disabled: disabled, onPress: onPress, style: ({ pressed }) => [
+                    {
+                        minHeight: 48,
+                        minWidth: 48,
+                        backgroundColor: pressed ? theme.bg.hover : undefined,
+                    },
+                    style,
+                ], testID: testID, children: content }));
+        }
+        return (_jsx(Pressable, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, className: base, disabled: disabled, onPress: onPress, style: [{ minHeight: 48, minWidth: 48 }, style], testID: testID, children: content }));
     }
-    return (_jsx(View, { className: base, testID: testID, children: content }));
+    return (_jsx(View, { className: base, style: style, testID: testID, children: content }));
 }
 export default ListItem;

package/dist/Display/Display.Logo.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "../theme/tw.js";
+import type { ImageSource } from "../utils/image.js";
 import { FC } from "react";
-import { type ImageSourcePropType } from "react-native";
 declare const logo: import("tailwind-variants").TVReturnType<{
     size: {
         small: {
@@ -48,7 +48,7 @@ declare const logo: import("tailwind-variants").TVReturnType<{
     image: string;
 }>>;
 export interface LogoProps extends VariantProps<typeof logo> {
-    source?: ImageSourcePropType;
+    source?: ImageSource;
     className?: string;
 }
 declare const Logo: FC<LogoProps>;

package/dist/Display/Display.Logo.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { getBrandingLogo } from "../branding.js";
+import ExpoImage from "./Display.ExpoImage.js";
 import { tv } from "../theme/tw.js";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 const logo = tv({
     slots: {
         container: "items-center justify-center",
@@ -28,7 +29,7 @@ function renderImage(imageClassName, source) {
     if (!source) {
         return null;
     }
-    return _jsx(Image, { className: imageClassName, resizeMode: "contain", source: source });
+    return _jsx(ExpoImage, { className: imageClassName, contentFit: "contain", source: source });
 }
 const Logo = ({ source, size = "medium", className }) => {
     const styles = logo({ size });

package/dist/Display/Display.MediaCard.d.ts

@@ -1,7 +1,7 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface MediaCardProps {
-    image: ImageSourcePropType;
+    image: ImageSource;
     title?: string;
     subtitle?: string;
     badge?: ReactNode;

package/dist/Display/Display.MediaEmbed.d.ts

@@ -1,7 +1,7 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface MediaEmbedProps {
-    thumbnail: ImageSourcePropType;
+    thumbnail: ImageSource;
     onPress: () => void;
     duration?: string;
     title?: string;

package/dist/Display/Display.ProductCard.d.ts

@@ -1,8 +1,8 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface ProductCardProps {
     title: string;
-    image: ImageSourcePropType;
+    image: ImageSource;
     price: number;
     originalPrice?: number;
     currency?: string;

package/dist/Display/Display.SectionHeader.d.ts

@@ -1,3 +1,6 @@
+import { Typography } from "../Typography/index.js";
+import type { ComponentProps } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export interface SectionHeaderAction {
     label: string;
     onPress: () => void;
@@ -8,6 +11,13 @@ export interface SectionHeaderProps {
     action?: SectionHeaderAction;
     className?: string;
     testID?: string;
+    variant?: "default" | "mobile";
+    titleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children" | "accessibilityRole">;
+    subtitleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    actionStyle?: StyleProp<ViewStyle>;
+    actionTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
 }
-declare function SectionHeader({ title, subtitle, action, className, testID }: SectionHeaderProps): import("react").JSX.Element;
+declare function SectionHeader({ title, subtitle, action, className, testID, variant, titleTextProps, subtitleTextProps, style, contentStyle, actionStyle, actionTextProps, }: SectionHeaderProps): import("react").JSX.Element;
 export default SectionHeader;

package/dist/Display/Display.SectionHeader.js

@@ -3,7 +3,16 @@ import Pressable from "../primitives/Pressable.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function SectionHeader({ title, subtitle, action, className, testID }) {
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), testID: testID, children: [_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", children: action.label }) })) : null] }));
+function SectionHeader({ title, subtitle, action, className, testID, variant = "default", titleTextProps, subtitleTextProps, style, contentStyle, actionStyle, actionTextProps, }) {
+    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), style: style, testID: testID, children: [_jsxs(View, { className: "flex-1", style: contentStyle, children: [_jsx(Typography.Text, { accessibilityRole: "header", className: "text-text-primary", semibold: true, variant: variant === "mobile" ? "bodyReadable" : "subtitle", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: variant === "mobile" ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityLabel: action.label, accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, style: [
+                    {
+                        minHeight: 48,
+                        minWidth: 48,
+                        justifyContent: "center",
+                        marginLeft: 12,
+                        flexShrink: 1,
+                    },
+                    actionStyle,
+                ], children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", ...actionTextProps, children: action.label }) })) : null] }));
 }
 export default SectionHeader;

package/dist/Display/Display.Story.d.ts

@@ -1,11 +1,11 @@
-import { type ImageSourcePropType } from "react-native";
+import type { ImageSource } from "../utils/image.js";
 export interface StoryProps {
-    image: ImageSourcePropType;
+    image: ImageSource;
     label?: string;
     seen?: boolean;
     variant?: "circle" | "card";
     size?: number;
-    avatar?: ImageSourcePropType;
+    avatar?: ImageSource;
     /** Mostrar el círculo del autor en la card. `false` = card de historia sin avatar. */
     showAvatar?: boolean;
     onPress?: () => void;

package/dist/Display/Display.Story.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
 import Pressable from "../primitives/Pressable.js";
 import { theme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { LinearGradient } from "expo-linear-gradient";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 const RING = ["#F58529", "#DD2A7B"];
 function Story({ image, label, seen = false, variant = "circle", size = 68, avatar, showAvatar = true, onPress, testID, }) {
     if (variant === "card") {
-        return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { width: size * 1.6, borderRadius: 14, overflow: "hidden" }, testID: testID, children: [_jsx(Image, { source: image, style: { width: "100%", height: size * 2.6 } }), showAvatar ? (_jsx(View, { style: {
+        return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { width: size * 1.6, borderRadius: 14, overflow: "hidden" }, testID: testID, children: [_jsx(ExpoImage, { source: image, style: { width: "100%", height: size * 2.6 } }), showAvatar ? (_jsx(View, { style: {
                         position: "absolute",
                         top: 8,
                         left: 8,
                         borderRadius: 999,
                         borderWidth: 3,
                         borderColor: seen ? theme.border.strong : theme.primary,
-                    }, children: _jsx(Image, { source: avatar ?? image, style: { width: 34, height: 34, borderRadius: 17 } }) })) : null, label ? (_jsx(LinearGradient, { colors: ["transparent", "rgba(0,0,0,0.7)"], style: {
+                    }, children: _jsx(ExpoImage, { source: avatar ?? image, style: { width: 34, height: 34, borderRadius: 17 } }) })) : null, label ? (_jsx(LinearGradient, { colors: ["transparent", "rgba(0,0,0,0.7)"], style: {
                         position: "absolute",
                         left: 0,
                         right: 0,
@@ -38,6 +39,6 @@ function Story({ image, label, seen = false, variant = "circle", size = 68, avat
                         backgroundColor: theme.bg.card,
                         alignItems: "center",
                         justifyContent: "center",
-                    }, children: _jsx(Image, { source: image, style: { width: innerSize, height: innerSize, borderRadius: innerSize / 2 } }) }) }), label ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: label })) : null] }));
+                    }, children: _jsx(ExpoImage, { source: image, style: { width: innerSize, height: innerSize, borderRadius: innerSize / 2 } }) }) }), label ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: label })) : null] }));
 }
 export default Story;

package/dist/Display/Display.StoryTray.d.ts

@@ -1,14 +1,14 @@
-import { type ImageSourcePropType } from "react-native";
+import type { ImageSource } from "../utils/image.js";
 export interface StoryTrayItem {
     id: string;
-    image: ImageSourcePropType;
+    image: ImageSource;
     label?: string;
-    avatar?: ImageSourcePropType;
+    avatar?: ImageSource;
     seen?: boolean;
 }
 export interface StoryTrayCreate {
     label?: string;
-    image?: ImageSourcePropType;
+    image?: ImageSource;
     onPress: () => void;
 }
 export interface StoryTrayProps {

package/dist/Display/Display.StoryTray.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Story from "./Display.Story.js";
 import Pressable from "../primitives/Pressable.js";
 import { theme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { Image, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 function CreateCard({ create, size }) {
     const w = size * 1.6;
     return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: {
@@ -14,7 +15,7 @@ function CreateCard({ create, size }) {
             backgroundColor: theme.bg.card,
             borderWidth: 1,
             borderColor: theme.border.light,
-        }, children: [create.image ? (_jsx(Image, { source: create.image, style: { width: "100%", height: size * 1.7 } })) : (_jsx(View, { style: { width: "100%", height: size * 1.7, backgroundColor: theme.bg.muted } })), _jsxs(View, { style: { alignItems: "center", paddingVertical: 14 }, children: [_jsx(View, { style: {
+        }, children: [create.image ? (_jsx(ExpoImage, { source: create.image, style: { width: "100%", height: size * 1.7 } })) : (_jsx(View, { style: { width: "100%", height: size * 1.7, backgroundColor: theme.bg.muted } })), _jsxs(View, { style: { alignItems: "center", paddingVertical: 14 }, children: [_jsx(View, { style: {
                             position: "absolute",
                             top: -16,
                             width: 32,

package/dist/Display/Display.StoryViewer.d.ts

@@ -1,7 +1,7 @@
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface StoryViewerSlide {
-    image: ImageSourcePropType;
+    image: ImageSource;
 }
 export interface StoryViewerProps {
     visible: boolean;
@@ -12,7 +12,7 @@ export interface StoryViewerProps {
     title: string;
     subtitle?: string;
     time?: string;
-    avatar?: ImageSourcePropType;
+    avatar?: ImageSource;
     progress?: number;
     muted?: boolean;
     paused?: boolean;