@sincpro/mobile-ui 1.0.1 → 1.1.0

package/dist/Actions/Actions.Button.d.ts

@@ -1,5 +1,6 @@
 import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
+import type { AccessibilityProps } from "react-native";
 declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: "bg-accent";
@@ -128,7 +129,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
         true: "opacity-70";
     };
 }, undefined>>;
-export interface ButtonProps extends VariantProps<typeof button> {
+export interface ButtonProps extends VariantProps<typeof button>, AccessibilityProps {
     title: string;
     onPress?: () => void;
     confirm?: string;
@@ -136,14 +137,18 @@ export interface ButtonProps extends VariantProps<typeof button> {
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;
+    testID?: string;
+    accessibleSizing?: boolean;
 }
-export interface ButtonIconProps extends VariantProps<typeof buttonIcon> {
+export interface ButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
     icon: string;
     onPress?: () => void;
     confirm?: string;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
+    testID?: string;
+    accessibleSizing?: boolean;
 }
 declare const ButtonWithIcon: React.FC<ButtonProps> & {
     Icon: React.FC<ButtonIconProps>;

package/dist/Actions/Actions.Button.js

@@ -6,7 +6,6 @@ import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useCallback } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import { runOnJS } from "react-native-reanimated";
 // ─── Style variants ───────────────────────────────────────────────────────────
 const button = tv({
     base: "rounded-md items-center justify-center flex-row min-h-[44px]",
@@ -152,7 +151,7 @@ const textVariantMap = {
     medium: "button",
     large: "buttonLarge",
 };
-const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibleSizing = false, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const textColorClass = textColor({ variant: variant, disabled });
     const loadingColorValue = getLoadingColor(variant);
@@ -166,22 +165,32 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
                 cancelText: "Cancelar",
                 onConfirm: () => {
                     hide();
-                    runOnJS(onPress)();
+                    onPress();
                 },
                 onCancel: () => hide(),
             });
         }
         else if (onPress) {
-            runOnJS(onPress)();
+            onPress();
         }
     }, [onPress, confirm, show, hide]);
     if (variant === "link") {
-        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
+        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+                ...accessibilityState,
+                disabled: disabled || loading,
+                busy: loading,
+            }, style: accessibleSizing
+                ? { minHeight: 48, minWidth: 48, justifyContent: "center" }
+                : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
     }
     const emphasize = variant === "primary" || variant === "cta";
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, semibold: emphasize, variant: textVariantValue, children: title })] })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: accessibleSizing, className: textColorClass, ellipsizeMode: "tail", numberOfLines: accessibleSizing ? undefined : 1, semibold: emphasize, variant: textVariantValue, children: title })] })) }));
 };
-const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibleSizing = false, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const iconColorValue = getIconColor(variant, disabled);
     const iconSizeValue = iconSizeMap[size] ?? 20;
@@ -195,16 +204,20 @@ const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "mediu
                 cancelText: "Cancelar",
                 onConfirm: () => {
                     hide();
-                    runOnJS(onPress)();
+                    onPress();
                 },
                 onCancel: () => hide(),
             });
         }
         else if (onPress) {
-            runOnJS(onPress)();
+            onPress();
         }
     }, [onPress, confirm, show, hide]);
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 const ButtonWithIcon = Object.assign(Button, { Icon: ButtonIcon });
 export default ButtonWithIcon;

package/dist/Actions/Actions.FAB.d.ts

@@ -5,6 +5,8 @@ export interface FABProps {
     position?: "bottom-right" | "bottom-left";
     className?: string;
     testID?: string;
+    accessibilityLabel?: string;
+    accessibleSizing?: boolean;
 }
-declare function FAB({ icon, onPress, label, position, className, testID, }: FABProps): import("react").JSX.Element;
+declare function FAB({ icon, onPress, label, position, className, testID, accessibilityLabel, accessibleSizing, }: FABProps): import("react").JSX.Element;
 export default FAB;

package/dist/Actions/Actions.FAB.js

@@ -5,13 +5,17 @@ import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function FAB({ icon, onPress, label, position = "bottom-right", className, testID, }) {
+function FAB({ icon, onPress, label, position = "bottom-right", className, testID, accessibilityLabel, accessibleSizing = false, }) {
     const insets = useSafeAreaInsets();
-    return (_jsxs(Pressable, { accessibilityLabel: label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label ? "h-14 px-5 gap-2" : "w-14 h-14", className), onPress: onPress, style: {
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label
+            ? accessibleSizing
+                ? "min-h-14 px-5 py-3 gap-2"
+                : "h-14 px-5 gap-2"
+            : "w-14 h-14", className), onPress: onPress, style: {
             bottom: insets.bottom + 16,
             right: position === "bottom-right" ? 16 : undefined,
             left: position === "bottom-left" ? 16 : undefined,
             ...theme.shadow.lg,
-        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", children: label })) : null] }));
+        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", style: accessibleSizing ? { flexShrink: 1 } : undefined, children: label })) : null] }));
 }
 export default FAB;

package/dist/Actions/Actions.FilterButton.d.ts

@@ -3,8 +3,16 @@ export interface FilterButtonProps {
     title: string;
     active: boolean;
     onPress: () => void;
+    variant?: "default" | "mobile";
+    disabled?: boolean;
+    className?: string;
+    testID?: string;
 }
 export declare const FilterButton: FC<FilterButtonProps>;
-export declare function FilterButtonGroup({ children }: {
+export interface FilterButtonGroupProps {
     children: ReactNode;
-}): import("react").JSX.Element;
+    layout?: "row" | "scroll" | "wrap";
+    className?: string;
+    testID?: string;
+}
+export declare function FilterButtonGroup({ children, layout, className, testID, }: FilterButtonGroupProps): import("react").JSX.Element;

package/dist/Actions/Actions.FilterButton.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw.js";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { TouchableOpacity, View } from "react-native";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 const filterButton = tv({
     base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
     variants: {
@@ -22,7 +25,19 @@ const filterText = tv({
     },
     defaultVariants: { active: false },
 });
-export const FilterButton = ({ title, active, onPress }) => (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: filterButton({ active }), onPress: onPress, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
-export function FilterButtonGroup({ children }) {
-    return _jsx(View, { className: "flex-row gap-2 p-3", children: children });
+export const FilterButton = ({ title, active, onPress, variant = "default", disabled = false, className, testID, }) => {
+    const theme = useTheme();
+    if (variant === "mobile") {
+        return (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 1 - theme.state.press, className: cn("flex-row items-center self-start rounded-full px-3 py-2 gap-2 max-w-full", active ? "bg-container-primary" : "bg-bg-muted", className), disabled: disabled, onPress: onPress, style: {
+                minHeight: 48,
+                minWidth: 48,
+            }, testID: testID, children: [active ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.container.onPrimary, name: "checkmark", size: 18 }) })) : null, _jsx(Typography.Text, { className: cn("flex-shrink", active ? "text-container-on-primary" : "text-text-primary"), variant: "bodyLarge", children: title })] }));
+    }
+    return (_jsx(TouchableOpacity, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 0.8, className: filterButton({ active, className }), disabled: disabled, onPress: onPress, testID: testID, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
+};
+export function FilterButtonGroup({ children, layout = "row", className, testID, }) {
+    if (layout === "scroll") {
+        return (_jsx(ScrollView, { className: cn("py-1", className), contentContainerStyle: { gap: 8 }, horizontal: true, keyboardShouldPersistTaps: "handled", showsHorizontalScrollIndicator: false, testID: testID, children: children }));
+    }
+    return (_jsx(View, { className: cn("flex-row gap-2 p-3", layout === "wrap" && "flex-wrap", className), testID: testID, children: children }));
 }

package/dist/Actions/Actions.IconButton.d.ts

@@ -1,5 +1,6 @@
 import { type VariantProps } from "../theme/tw.js";
 import { IconType } from "../utils/icon.js";
+import type { AccessibilityProps } from "react-native";
 declare const iconButton: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: "bg-primary";
@@ -55,13 +56,15 @@ declare const iconButton: import("tailwind-variants").TVReturnType<{
         true: "opacity-50";
     };
 }, undefined>>;
-export interface IconButtonProps extends VariantProps<typeof iconButton> {
+export interface IconButtonProps extends VariantProps<typeof iconButton>, AccessibilityProps {
     icon?: string;
     type?: IconType;
     onPress: () => void;
     loading?: boolean;
     iconColor?: string;
     className?: string;
+    testID?: string;
+    accessibleSizing?: boolean;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibleSizing, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;

package/dist/Actions/Actions.IconButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Display } from "../Display/index.js";
+import Icon from "../Display/Display.Icon.js";
 import { theme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { ActivityIndicator, TouchableOpacity } from "react-native";
@@ -31,8 +31,12 @@ const iconButton = tv({
         disabled: false,
     },
 });
-function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, }) {
+function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, accessibleSizing = false, accessibilityState, ...accessibilityProps }) {
     const resolvedColor = iconColor ?? theme.text.accent;
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Display.Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
 }
 export default IconButton;

package/dist/Actions/index.d.ts

@@ -12,11 +12,11 @@ export declare const Actions: {
     FAB: typeof FAB;
     /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
     FilterButton: import("react").FC<import("./Actions.FilterButton.js").FilterButtonProps>;
-    /** Horizontal scroll container for `Actions.FilterButton` chips. */
+    /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
     FilterButtonGroup: typeof FilterButtonGroup;
 };
 export type { ButtonIconProps, ButtonProps } from "./Actions.Button.js";
 export type { FABProps } from "./Actions.FAB.js";
-export type { FilterButtonProps } from "./Actions.FilterButton.js";
+export type { FilterButtonGroupProps, FilterButtonProps, } from "./Actions.FilterButton.js";
 export type { IconButtonProps } from "./Actions.IconButton.js";
 export default Actions;

package/dist/Actions/index.js

@@ -11,7 +11,7 @@ export const Actions = {
     FAB,
     /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
     FilterButton,
-    /** Horizontal scroll container for `Actions.FilterButton` chips. */
+    /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
     FilterButtonGroup,
 };
 export default Actions;

package/dist/Dialog/Dialog.ActionSheet.d.ts

@@ -12,6 +12,7 @@ export interface ActionSheetProps {
     title?: string;
     message?: string;
     cancelLabel?: string;
+    testID?: string;
 }
-declare function ActionSheet({ visible, onClose, actions, title, message, cancelLabel, }: ActionSheetProps): import("react").JSX.Element;
+declare function ActionSheet({ visible, onClose, actions, title, message, cancelLabel, testID, }: ActionSheetProps): import("react").JSX.Element;
 export default ActionSheet;

package/dist/Dialog/Dialog.ActionSheet.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { themeToVars, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { vars } from "nativewind";
 import { useEffect, useRef } from "react";
-import { Animated, Modal, Pressable as RNPressable, View } from "react-native";
+import { Animated, Modal, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function ActionSheet({ visible, onClose, actions, title, message, cancelLabel = "Cancelar", }) {
+function ActionSheet({ visible, onClose, actions, title, message, cancelLabel = "Cancelar", testID, }) {
+    const theme = useTheme();
     const insets = useSafeAreaInsets();
     // eslint-disable-next-line react-hooks/refs
     const translateY = useRef(new Animated.Value(800)).current;
@@ -24,9 +26,17 @@ function ActionSheet({ visible, onClose, actions, title, message, cancelLabel =
             translateY.setValue(800);
         }
     }, [visible, translateY]);
-    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: onClose, children: _jsx(Animated.View, { style: { transform: [{ translateY }] }, children: _jsxs(RNPressable, { style: { paddingHorizontal: 12, paddingBottom: insets.bottom + 12 }, children: [title || message ? (_jsxs(View, { className: "rounded-xl mb-2 px-4 py-3 items-center", style: { backgroundColor: theme.bg.card }, children: [title ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, children: title })) : null, message ? (_jsx(Typography.Text, { className: "text-text-secondary text-sm", variant: "bodySmall", children: message })) : null] })) : null, _jsx(View, { className: "rounded-xl overflow-hidden mb-2", style: { backgroundColor: theme.bg.card }, children: actions.map((action, index) => (_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: action.disabled }, className: cn("flex-row items-center justify-center gap-2 px-4 py-4", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled, onPress: () => {
+    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { accessibilityElementsHidden: true, className: "absolute inset-0 bg-black/50", importantForAccessibility: "no-hide-descendants", onResponderRelease: onClose, onStartShouldSetResponder: () => true }), _jsxs(Animated.View, { accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: [
+                        vars(themeToVars(theme)),
+                        {
+                            transform: [{ translateY }],
+                            maxHeight: "90%",
+                            paddingHorizontal: 12,
+                            paddingBottom: insets.bottom + 12,
+                        },
+                    ], children: [title || message ? (_jsxs(View, { className: "rounded-xl mb-2 px-4 py-3 items-center", style: { backgroundColor: theme.bg.card }, children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "text-text-primary", semibold: true, children: title })) : null, message ? (_jsx(Typography.Text, { className: "text-text-secondary text-sm", variant: "bodySmall", children: message })) : null] })) : null, _jsx(ScrollView, { bounces: false, className: "rounded-xl overflow-hidden mb-2", style: { backgroundColor: theme.bg.card }, children: actions.map((action, index) => (_jsxs(Pressable, { accessibilityLabel: action.label, accessibilityRole: "button", accessibilityState: { disabled: action.disabled }, className: cn("flex-row items-center justify-center gap-2 px-4 py-4", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled, onPress: () => {
                                     onClose();
                                     action.onPress();
-                                }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card }, children: _jsx(Typography.Text, { className: "text-text-accent", semibold: true, children: cancelLabel }) })] }) }) }) }));
+                                }, style: { minHeight: 48 }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityLabel: cancelLabel, accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card, minHeight: 48 }, children: _jsx(Typography.Text, { className: "text-text-accent", semibold: true, children: cancelLabel }) })] })] }) }));
 }
 export default ActionSheet;

package/dist/Dialog/Dialog.Confirmation.js

@@ -3,11 +3,11 @@ import { BaseButton } from "../primitives/BaseButton.js";
 import { theme } from "../theme/index.js";
 import Typography from "../Typography/Typography.Text.js";
 import { Modal, TouchableWithoutFeedback, View } from "react-native";
-const ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "cambios", subtitle = "¿Estás seguro de que quieres descartar los cambios realizados?", confirmButtonText = "Sí", cancelButtonText = "No, continuar aquí", }) => {
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: "p-3 w-full max-w-xs mx-auto", style: {
+const ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "Descartar cambios", subtitle = "¿Quieres descartar los cambios realizados?", confirmButtonText = "Descartar cambios", cancelButtonText = "Seguir editando", }) => {
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { accessibilityViewIsModal: true, className: "p-3 w-full max-w-xs mx-auto", style: {
                             borderRadius: 16,
                             backgroundColor: theme.bg.popover,
                             ...theme.shadow.md,
-                        }, children: [_jsx(Typography, { className: "mb-1.5 text-sm", variant: "body", children: _jsx(Typography, { semibold: true, variant: "body", children: auxTitle }) }), _jsx(Typography, { className: "mb-3 text-xs leading-tight", variant: "body", children: subtitle }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(BaseButton, { className: "flex-1", onPress: onCancel, size: "small", title: cancelButtonText, variant: "outlineBlack" }), _jsx(BaseButton, { className: "flex-1", onPress: onConfirm, size: "small", title: confirmButtonText, variant: "primary" })] })] }) }) }) }) }));
+                        }, children: [_jsx(Typography, { accessibilityRole: "header", className: "mb-1.5 text-sm", variant: "body", children: _jsx(Typography, { semibold: true, variant: "body", children: auxTitle }) }), _jsx(Typography, { className: "mb-3 text-xs leading-tight", variant: "body", children: subtitle }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(BaseButton, { className: "flex-1", onPress: onCancel, size: "small", title: cancelButtonText, variant: "outlineBlack" }), _jsx(BaseButton, { className: "flex-1", onPress: onConfirm, size: "small", title: confirmButtonText, variant: "primary" })] })] }) }) }) }) }));
 };
 export default ConfirmationDialog;

package/dist/Dialog/Dialog.NativeSheet.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface NativeSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    testID?: string;
+}
+declare function NativeSheet({ visible, onClose, title, children, testID }: NativeSheetProps): import("react").JSX.Element;
+export default NativeSheet;

package/dist/Dialog/Dialog.NativeSheet.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import BottomSheet, { BottomSheetView } from "@expo/ui/community/bottom-sheet";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { vars } from "nativewind";
+import { ScrollView, View } from "react-native";
+const SNAP_POINTS = ["60%", "90%"];
+function NativeSheet({ visible, onClose, title, children, testID }) {
+    const theme = useTheme();
+    return (_jsx(BottomSheet, { backgroundStyle: { backgroundColor: theme.bg.card }, enablePanDownToClose: true, index: visible ? 0 : -1, onClose: () => {
+            if (visible)
+                onClose();
+        }, snapPoints: SNAP_POINTS, children: _jsx(BottomSheetView, { style: { flex: 1 }, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: [vars(themeToVars(theme)), { flex: 1, padding: 16 }], testID: testID, children: [_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(Typography.Heading, { className: "flex-1", variant: "h4", children: title }), _jsx(Pressable, { accessibilityLabel: "Cerrar", onPress: onClose, style: {
+                                    minHeight: 48,
+                                    minWidth: 48,
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })] }), _jsx(ScrollView, { contentContainerStyle: { paddingVertical: 12 }, keyboardShouldPersistTaps: "handled", children: children })] }) }) }));
+}
+export default NativeSheet;

package/dist/Dialog/Dialog.Sheet.d.ts

@@ -15,6 +15,10 @@ export interface SheetProps {
     maxHeightRatio?: number;
     /** Allow closing by tapping the dim backdrop. Default `false` (handle/button only). */
     dismissOnBackdrop?: boolean;
+    /** Show a visible close button in the sheet header. */
+    showCloseButton?: boolean;
+    /** Increase interactive targets to 48 points. */
+    accessibleSizing?: boolean;
     testID?: string;
 }
 /**
@@ -22,5 +26,5 @@ export interface SheetProps {
  * **swipe-down to close** (handle only). By default it does NOT close on backdrop tap
  * (`dismissOnBackdrop`). No provider or native deps. Import via subpath `Dialog/Sheet`.
  */
-declare function Sheet({ visible, onClose, children, title, maxHeightRatio, dismissOnBackdrop, testID, }: SheetProps): import("react").JSX.Element;
+declare function Sheet({ visible, onClose, children, title, maxHeightRatio, dismissOnBackdrop, showCloseButton, accessibleSizing, testID, }: SheetProps): import("react").JSX.Element;
 export default Sheet;

package/dist/Dialog/Dialog.Sheet.js

@@ -3,8 +3,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "nativewind/js
 // This file uses the canonical RN patterns: useRef(new Animated.Value()).current and PanResponder
 // created inside useState. Those hooks rules warn — they're not bugs here. Documented at the
 // eslint config level (see eslint.config.js:30-33).
-import { theme } from "../theme/index.js";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
+import { vars } from "nativewind";
 import { useEffect, useRef, useState } from "react";
 import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -20,7 +22,8 @@ export function SheetProvider({ children }) {
  * **swipe-down to close** (handle only). By default it does NOT close on backdrop tap
  * (`dismissOnBackdrop`). No provider or native deps. Import via subpath `Dialog/Sheet`.
  */
-function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, testID, }) {
+function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, showCloseButton = false, accessibleSizing = false, testID, }) {
+    const theme = useTheme();
     const insets = useSafeAreaInsets();
     const translateY = useRef(new Animated.Value(800)).current;
     const onCloseRef = useRef(onClose);
@@ -58,11 +61,14 @@ function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismis
             }
         },
     }));
-    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { className: "rounded-t-3xl", style: {
-                        backgroundColor: theme.bg.card,
-                        paddingBottom: insets.bottom + 12,
-                        maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
-                        transform: [{ translateY }],
-                    }, children: [_jsx(View, { className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 pb-1", semibold: true, variant: "subtitle", children: title })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4 }, children: children })] })] }) }));
+    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: onClose, style: [
+                        vars(themeToVars(theme)),
+                        {
+                            backgroundColor: theme.bg.card,
+                            paddingBottom: insets.bottom + 12,
+                            maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
+                            transform: [{ translateY }],
+                        },
+                    ], children: [_jsx(View, { accessibilityElementsHidden: true, className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title || showCloseButton ? (_jsxs(View, { className: "flex-row items-center px-4 pb-1", children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary", semibold: true, variant: "subtitle", children: title })) : null, showCloseButton ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", className: "items-center justify-center rounded-lg", hitSlop: 8, onPress: onClose, style: accessibleSizing ? { minWidth: 48, minHeight: 48 } : undefined, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })) : null] })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4 }, children: children })] })] }) }));
 }
 export default Sheet;

package/dist/Display/Display.CopyableText.d.ts

@@ -1,4 +1,4 @@
-type CopyableTextProps = {
+export type CopyableTextProps = ({
     value: string;
     getValue?: never;
     label?: string;
@@ -8,6 +8,13 @@ type CopyableTextProps = {
     getValue: () => string;
     label?: string;
     className?: string;
+}) & {
+    accessibilityLabel?: string;
+    testID?: string;
+    disabled?: boolean;
+    onCopied?: (value: string) => void;
+    onCopyError?: (error: Error) => void;
+    selectable?: boolean;
 };
-declare function CopyableText({ value, getValue, label, className }: CopyableTextProps): import("react").JSX.Element;
+declare function CopyableText({ value, getValue, label, className, accessibilityLabel, testID, disabled, onCopied, onCopyError, selectable, }: CopyableTextProps): import("react").JSX.Element;
 export default CopyableText;

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.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.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;