@sincpro/mobile-ui 2.0.1 → 3.0.1

package/README.md

@@ -11,11 +11,16 @@ This package is maintained by Sincpro as part of the mobile framework ecosystem.
 ## Quick Start
 
 ```bash
-npx expo install @sincpro/mobile-ui expo-image
+npx expo install @sincpro/mobile-ui @expo/ui expo-symbols @shopify/flash-list expo-image react-native-keyboard-controller
 ```
 
 Wire the Tailwind preset, then import by category:
 
+The SDK 58 major uses one native sheet engine, semantic SF/Material icons and FlashList
+v2. Native dependencies are required peers, not implied by installing Expo.
+See [migration contracts](docs/MIGRATIONS.md) before upgrading. NativeWind remains on
+v4 until a v5 release explicitly supports SDK 58.
+
 ```js
 // tailwind.config.js
 module.exports = {
@@ -97,7 +102,7 @@ recoverable error. It uses fictional data and local state, not persistence or a
   the Expo renderer, disk caching, automatic source recycling and Reduce Motion policy.
   `Display.ExpoImage` exposes the direct renderer; `Display.Image` adds error/retry composition.
   See the [breaking migration guide](docs/MIGRATION-V2.md).
-- `ListViewV2.Content` exposes `listProps` for virtualization, `getItemLayout`, viewability
+- `ListViewV2.Content` exposes FlashList v2 `listProps` for recycling and viewability
   and `extraData`, plus `listRef` and content styling. `Root hasMore={false}` stops
   pagination; `loadingMore` and refresh pause it. See the
   [mobile performance and usability plan](docs/MOBILE-QUALITY.md).

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

@@ -1,3 +1,4 @@
+import type { IconName } from "../Display/index.js";
 import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
 import type { AccessibilityProps } from "react-native";
@@ -140,7 +141,7 @@ export interface ButtonProps extends VariantProps<typeof button>, AccessibilityP
     testID?: string;
 }
 export interface ButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
-    icon: string;
+    icon: IconName;
     onPress?: () => void;
     confirm?: string;
     loading?: boolean;

package/dist/Actions/Actions.Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { useConfirmationContext } from "../Dialog/Confirmation.context.js";
+import { requestConfirmation } from "../Dialog/requestConfirmation.js";
 import Icon from "../Display/Display.Icon.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useCallback } from "react";
@@ -100,7 +100,7 @@ const textColor = tv({
     defaultVariants: { variant: "primary", disabled: false },
 });
 // ─── Color / size helpers ─────────────────────────────────────────────────────
-function getLoadingColor(variant) {
+function getLoadingColor(variant, theme) {
     const map = {
         primary: theme.text.onAccent,
         accent: theme.text.accent,
@@ -113,9 +113,9 @@ function getLoadingColor(variant) {
         link: theme.text.accent,
         transparent: theme.text.inverse,
     };
-    return map[variant] ?? theme.text.inverse;
+    return map[variant];
 }
-function getIconColor(variant, disabled) {
+function getIconColor(variant, disabled, theme) {
     if (disabled) {
         const map = {
             primary: theme.text.onAccent + "70",
@@ -129,7 +129,7 @@ function getIconColor(variant, disabled) {
             link: theme.icon.disabled,
             transparent: theme.icon.inverse + "70",
         };
-        return map[variant] ?? theme.icon.disabled;
+        return map[variant];
     }
     const map = {
         primary: theme.text.onAccent,
@@ -143,7 +143,7 @@ function getIconColor(variant, disabled) {
         link: theme.text.accent,
         transparent: theme.icon.inverse,
     };
-    return map[variant] ?? theme.icon.inverse;
+    return map[variant];
 }
 const iconSizeMap = { small: 16, medium: 20, large: 28 };
 const textVariantMap = {
@@ -152,28 +152,25 @@ const textVariantMap = {
     large: "buttonLarge",
 };
 const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
-    const { show, hide } = useConfirmationContext();
-    const textColorClass = textColor({ variant: variant, disabled });
-    const loadingColorValue = getLoadingColor(variant);
-    const textVariantValue = textVariantMap[size] ?? "button";
-    const handlePress = useCallback(() => {
+    const theme = useTheme();
+    const resolvedVariant = variant ?? "primary";
+    const resolvedSize = size ?? "medium";
+    const textColorClass = textColor({ variant: resolvedVariant, disabled });
+    const loadingColorValue = getLoadingColor(resolvedVariant, theme);
+    const textVariantValue = textVariantMap[resolvedSize];
+    const handlePress = useCallback(async () => {
         if (confirm && onPress) {
-            show({
+            const confirmed = await requestConfirmation({
                 title: "Confirmar acción",
                 message: confirm,
                 confirmText: "Confirmar",
                 cancelText: "Cancelar",
-                onConfirm: () => {
-                    hide();
-                    onPress();
-                },
-                onCancel: () => hide(),
             });
+            if (!confirmed)
+                return;
         }
-        else if (onPress) {
-            onPress();
-        }
-    }, [onPress, confirm, show, hide]);
+        onPress?.();
+    }, [onPress, confirm]);
     if (variant === "link") {
         return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
                 ...accessibilityState,
@@ -189,28 +186,25 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
         }, style: { minHeight: 48, minWidth: 48 }, 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: true, className: textColorClass, semibold: emphasize, style: { flexShrink: 1 }, variant: textVariantValue, children: title })] })) }));
 };
 const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibilityState, ...accessibilityProps }) => {
-    const { show, hide } = useConfirmationContext();
-    const iconColorValue = getIconColor(variant, disabled);
-    const iconSizeValue = iconSizeMap[size] ?? 20;
-    const loadingColorValue = getLoadingColor(variant);
-    const handlePress = useCallback(() => {
+    const theme = useTheme();
+    const resolvedVariant = variant ?? "primary";
+    const resolvedSize = size ?? "medium";
+    const iconColorValue = getIconColor(resolvedVariant, disabled, theme);
+    const iconSizeValue = iconSizeMap[resolvedSize];
+    const loadingColorValue = getLoadingColor(resolvedVariant, theme);
+    const handlePress = useCallback(async () => {
         if (confirm && onPress) {
-            show({
+            const confirmed = await requestConfirmation({
                 title: "Confirmar acción",
                 message: confirm,
                 confirmText: "Confirmar",
                 cancelText: "Cancelar",
-                onConfirm: () => {
-                    hide();
-                    onPress();
-                },
-                onCancel: () => hide(),
             });
+            if (!confirmed)
+                return;
         }
-        else if (onPress) {
-            onPress();
-        }
-    }, [onPress, confirm, show, hide]);
+        onPress?.();
+    }, [onPress, confirm]);
     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,

package/dist/Actions/Actions.Dock.d.ts

@@ -1,20 +1,20 @@
 import { type ReactNode } from "react";
-export interface DockProps {
+export type DockProps = {
     primaryAction: ReactNode;
     children: ReactNode;
     summary?: ReactNode;
     title?: string;
     moreLabel?: string;
     collapseLabel?: string;
-    backdropLabel?: string;
     expanded?: boolean;
     defaultExpanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
-    dismissOnBackdrop?: boolean;
-    maxExpandedHeightRatio?: number;
+    dismissible?: boolean;
+    snapPoints?: (string | number)[];
     placement?: "fixed" | "footer";
+    safeAreaBottom?: boolean;
     className?: string;
     testID?: string;
-}
-declare function Dock({ primaryAction, children, summary, title, moreLabel, collapseLabel, backdropLabel, expanded: controlledExpanded, defaultExpanded, onExpandedChange, dismissOnBackdrop, maxExpandedHeightRatio, placement, className, testID, }: DockProps): import("react").JSX.Element;
+};
+declare function Dock({ primaryAction, children, summary, title, moreLabel, collapseLabel, expanded: controlledExpanded, defaultExpanded, onExpandedChange, dismissible, snapPoints, placement, safeAreaBottom, className, testID, }: DockProps): import("react").JSX.Element;
 export default Dock;

package/dist/Actions/Actions.Dock.js

@@ -1,89 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-/* eslint-disable react-hooks/refs */
+import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { themeToVars, useTheme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { vars } from "nativewind";
-import { useEffect, useRef, useState } from "react";
-import { Animated, KeyboardAvoidingView, Modal, PanResponder, Platform, ScrollView, useWindowDimensions, View, } from "react-native";
+import { useState } from "react";
+import { View } from "react-native";
+import { KeyboardStickyView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function Dock({ primaryAction, children, summary, title = "Más opciones", moreLabel = "Más opciones", collapseLabel = "Ocultar opciones", backdropLabel = "Cerrar panel", expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, dismissOnBackdrop = true, maxExpandedHeightRatio = 0.6, placement = "fixed", className, testID, }) {
-    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
-    const expanded = controlledExpanded ?? internalExpanded;
+function Dock({ primaryAction, children, summary, title = "Más opciones", moreLabel = "Más opciones", collapseLabel = "Ocultar opciones", expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, dismissible = true, snapPoints, placement = "fixed", safeAreaBottom = placement === "fixed", className, testID, }) {
     const theme = useTheme();
-    const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
-    const { height } = useWindowDimensions();
-    const [barHeight, setBarHeight] = useState(0);
-    const translateY = useRef(new Animated.Value(0)).current;
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const expanded = controlledExpanded ?? internalExpanded;
     const requestExpanded = (next) => {
         if (next === expanded)
             return;
+        if (!next && !dismissible)
+            return;
         if (controlledExpanded === undefined)
             setInternalExpanded(next);
         onExpandedChange?.(next);
     };
-    const gestureRef = useRef({ expanded, requestExpanded, reducedMotion });
-    gestureRef.current = { expanded, requestExpanded, reducedMotion };
-    const resolvedRatio = Number.isFinite(maxExpandedHeightRatio)
-        ? Math.min(0.9, Math.max(0.1, maxExpandedHeightRatio))
-        : 0.6;
-    const maxPanelHeight = Math.max(0, Math.min(height * resolvedRatio, height - insets.top - insets.bottom - barHeight));
-    const resetDrag = () => {
-        translateY.stopAnimation();
-        if (gestureRef.current.reducedMotion) {
-            translateY.setValue(0);
-            return;
-        }
-        Animated.spring(translateY, {
-            toValue: 0,
-            useNativeDriver: true,
-            damping: 24,
-            stiffness: 260,
-        }).start();
-    };
-    useEffect(() => {
-        translateY.stopAnimation();
-        translateY.setValue(0);
-        return () => translateY.stopAnimation();
-    }, [expanded, reducedMotion, translateY]);
-    const [pan] = useState(() => PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => translateY.stopAnimation(),
-        onPanResponderTerminationRequest: () => false,
-        onPanResponderMove: (_, gesture) => {
-            if (gestureRef.current.expanded)
-                translateY.setValue(Math.max(0, gesture.dy));
-        },
-        onPanResponderRelease: (_, gesture) => {
-            const isVertical = Math.abs(gesture.dy) > Math.abs(gesture.dx);
-            const shouldChange = gestureRef.current.expanded
-                ? gesture.dy > 40 || gesture.vy > 0.5
-                : gesture.dy < -40 || gesture.vy < -0.5;
-            if (isVertical && shouldChange) {
-                gestureRef.current.requestExpanded(!gestureRef.current.expanded);
-            }
-            resetDrag();
-        },
-        onPanResponderTerminate: resetDrag,
-    }));
-    const handle = (_jsx(View, { className: "min-h-12 items-center justify-center", ...pan.panHandlers, testID: testID ? `${testID}-handle` : undefined, children: _jsx(View, { className: "h-1 w-10 rounded-full bg-border-strong" }) }));
-    const bar = (_jsxs(View, { className: cn("gap-3 border-t border-border-light bg-bg-card px-4 pb-2", className), onLayout: (event) => setBarHeight(event.nativeEvent.layout.height), testID: testID ? `${testID}-bar` : undefined, children: [!expanded ? handle : null, summary, _jsxs(View, { className: "flex-row items-center gap-3", children: [_jsxs(Pressable, { accessibilityLabel: expanded ? collapseLabel : moreLabel, accessibilityRole: "button", accessibilityState: { expanded }, className: "min-h-12 flex-1 flex-row items-center justify-center gap-1 rounded-lg bg-bg-muted px-3", onPress: () => requestExpanded(!expanded), testID: testID ? `${testID}-more` : undefined, children: [_jsx(Typography.Text, { className: "text-text-primary", variant: "buttonSmall", children: expanded ? collapseLabel : moreLabel }), _jsx(Icon, { color: theme.icon.secondary, name: expanded ? "chevron-down" : "chevron-up", size: 16 })] }), _jsx(View, { className: "flex-1", children: primaryAction })] })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(View, { className: cn(placement === "fixed" && "absolute bottom-0 left-0 right-0 z-20"), style: expanded ? { height: barHeight } : undefined, testID: testID, children: !expanded ? bar : null }), _jsx(Modal, { animationType: "none", onRequestClose: () => requestExpanded(false), presentationStyle: "overFullScreen", testID: testID ? `${testID}-modal` : undefined, transparent: true, visible: expanded, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : "height", style: { flex: 1 }, testID: testID ? `${testID}-keyboard` : undefined, children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1, justifyContent: "flex-end" }, children: [_jsx(Pressable, { accessibilityLabel: backdropLabel, accessibilityRole: "button", className: "absolute inset-0 bg-black/50", disabled: !dismissOnBackdrop, onPress: dismissOnBackdrop ? () => requestExpanded(false) : undefined, testID: testID ? `${testID}-backdrop` : undefined }), _jsxs(View, { onAccessibilityEscape: () => requestExpanded(false), style: [
-                                    vars(themeToVars(theme)),
-                                    {
-                                        paddingBottom: insets.bottom,
-                                        backgroundColor: theme.bg.card,
-                                        maxHeight: height - insets.top,
-                                        flexShrink: 1,
-                                    },
-                                ], children: [_jsx(View, { style: { overflow: "hidden", flexShrink: 1 }, children: _jsxs(Animated.View, { style: {
-                                                maxHeight: maxPanelHeight,
-                                                flexShrink: 1,
-                                                transform: [{ translateY }],
-                                            }, testID: testID ? `${testID}-expanded-content` : undefined, children: [handle, _jsxs(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, style: { flexShrink: 1 }, testID: testID ? `${testID}-scroll` : undefined, children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "pb-2 text-text-primary", semibold: true, variant: "subtitle", children: title })) : null, children] })] }) }), bar] })] }) }) })] }));
+    const bar = (_jsxs(View, { className: cn("gap-3 bg-bg-card py-2", !expanded && "border-t border-border-light px-4", className), style: { paddingBottom: !expanded && safeAreaBottom ? insets.bottom + 8 : 8 }, testID: testID ? `${testID}-bar` : undefined, children: [summary, _jsxs(View, { className: "flex-row items-center gap-3", children: [_jsxs(Pressable, { accessibilityLabel: expanded ? collapseLabel : moreLabel, accessibilityRole: "button", accessibilityState: { expanded, disabled: expanded && !dismissible }, className: "flex-1 flex-row items-center justify-center gap-2 rounded-lg bg-bg-muted px-3", disabled: expanded && !dismissible, onPress: () => requestExpanded(!expanded), style: { minWidth: 48, minHeight: 48 }, testID: testID ? `${testID}-more` : undefined, children: [_jsx(Typography.Text, { className: expanded && !dismissible ? "text-text-disabled" : "text-text-primary", variant: "buttonSmall", children: expanded ? collapseLabel : moreLabel }), _jsx(Icon, { color: expanded && !dismissible ? theme.icon.disabled : theme.icon.secondary, name: expanded ? "expand" : "collapse", size: 16 })] }), _jsx(View, { className: "flex-1", children: primaryAction })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(KeyboardStickyView, { enabled: placement === "fixed" && !expanded, offset: { opened: safeAreaBottom ? insets.bottom : 0 }, style: placement === "fixed"
+                    ? { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 20 }
+                    : undefined, testID: testID, children: !expanded ? bar : null }), _jsx(Sheet, { dismissible: dismissible, footer: expanded ? bar : undefined, onClose: () => requestExpanded(false), snapPoints: snapPoints, testID: testID ? `${testID}-sheet` : undefined, title: title, visible: expanded, children: children })] }));
 }
 export default Dock;

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

@@ -1,5 +1,6 @@
+import type { IconName } from "../Display/index.js";
 export interface FABProps {
-    icon: string;
+    icon: IconName;
     onPress: () => void;
     label?: string;
     position?: "bottom-right" | "bottom-left";

package/dist/Actions/Actions.FilterButton.js

@@ -31,7 +31,7 @@ export const FilterButton = ({ title, active, onPress, variant = "default", disa
         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 })] }));
+            }, testID: testID, children: [active ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.container.onPrimary, name: "check", 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 }) }));
 };

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

@@ -1,5 +1,5 @@
+import type { IconName } from "../Display/index.js";
 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: {
@@ -57,13 +57,12 @@ declare const iconButton: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export interface IconButtonProps extends VariantProps<typeof iconButton>, AccessibilityProps {
-    icon?: string;
-    type?: IconType;
+    icon: IconName;
     onPress: () => void;
     loading?: boolean;
     iconColor?: string;
     className?: string;
     testID?: string;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;

package/dist/Actions/Actions.IconButton.js

@@ -31,12 +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, testID, accessibilityState, ...accessibilityProps }) {
+function IconButton({ icon, onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, 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, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
             ...accessibilityState,
             disabled: disabled || loading,
             busy: loading,
-        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24 })) }));
 }
 export default IconButton;

package/dist/Dialog/Confirmation.context.d.ts

@@ -1,21 +1,12 @@
+import { type ConfirmationProps } from "./Dialog.Confirmation.js";
 import { type ReactNode } from "react";
-type ConfirmationVariant = "dialog" | "bottomSheet";
-interface IConfirmationOptions {
-    variant?: ConfirmationVariant;
-    title?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    onConfirm?: () => void | Promise<void>;
-    onCancel?: () => void | Promise<void>;
-    render?: (close: () => void) => ReactNode;
-}
+export type { NativeConfirmationOptions } from "./requestConfirmation.js";
+export { requestConfirmation } from "./requestConfirmation.js";
+export type ConfirmationOptions = Omit<ConfirmationProps, "visible" | "onClose">;
 type ConfirmationContextValue = {
-    show: (opts: IConfirmationOptions) => void;
-    hide: () => void;
+    show: (options: ConfirmationOptions) => void;
 };
 export declare function ConfirmationProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function useConfirmationContext(): ConfirmationContextValue;
-export {};

package/dist/Dialog/Confirmation.context.js

@@ -1,62 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { BottomSheet } from "./BottomSheet/index.js";
-import ConfirmationDialog from "./Dialog.Confirmation.js";
-import { BaseButton } from "../primitives/BaseButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Confirmation from "./Dialog.Confirmation.js";
 import { createContext, useCallback, useContext, useMemo, useState, } from "react";
-const DEFAULT_STATE = {
-    isVisible: false,
-    variant: "dialog",
-    title: "Confirmación",
-    message: "¿Estás seguro de que quieres continuar?",
-    confirmText: "Confirmar",
-    cancelText: "Cancelar",
-    onConfirm: undefined,
-    onCancel: undefined,
-    render: undefined,
-};
+export { requestConfirmation } from "./requestConfirmation.js";
 const ConfirmationContext = createContext(null);
 export function ConfirmationProvider({ children }) {
-    const [state, setState] = useState(DEFAULT_STATE);
-    const show = useCallback((opts) => {
-        setState((prev) => ({
-            ...prev,
-            isVisible: true,
-            variant: opts.variant ?? DEFAULT_STATE.variant,
-            title: opts.title ?? DEFAULT_STATE.title,
-            message: opts.message ?? DEFAULT_STATE.message,
-            confirmText: opts.confirmText ?? DEFAULT_STATE.confirmText,
-            cancelText: opts.cancelText ?? DEFAULT_STATE.cancelText,
-            onConfirm: opts.onConfirm,
-            onCancel: opts.onCancel,
-            render: opts.render,
-        }));
+    const [options, setOptions] = useState();
+    const [visible, setVisible] = useState(false);
+    const show = useCallback(({ title = "Confirmación", message = "¿Estás seguro de que quieres continuar?", confirmText = "Confirmar", cancelText = "Cancelar", destructive = false, ...next }) => {
+        setOptions({ title, message, confirmText, cancelText, destructive, ...next });
+        setVisible(true);
     }, []);
-    const hide = useCallback(() => {
-        setState(DEFAULT_STATE);
-    }, []);
-    const value = useMemo(() => ({ show, hide }), [show, hide]);
-    const handleConfirm = async () => {
-        try {
-            await state.onConfirm?.();
-        }
-        finally {
-            hide();
-        }
-    };
-    const handleCancel = async () => {
-        try {
-            await state.onCancel?.();
-        }
-        finally {
-            hide();
-        }
-    };
-    return (_jsxs(ConfirmationContext.Provider, { value: value, children: [children, state.variant === "dialog" && (_jsx(ConfirmationDialog, { auxTitle: state.title, cancelButtonText: state.cancelText, confirmButtonText: state.confirmText, onCancel: handleCancel, onConfirm: handleConfirm, subtitle: state.message, visible: state.isVisible })), state.variant === "bottomSheet" && (_jsx(BottomSheet.Root, { onClose: handleCancel, visible: state.isVisible, children: state.render ? (state.render(hide)) : (_jsxs(_Fragment, { children: [_jsx(BottomSheet.Header, { children: _jsx(BottomSheet.Title, { subtitle: state.message, children: state.title }) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(BaseButton, { className: "flex-1", onPress: handleCancel, title: state.cancelText ?? "", variant: "outline" }), _jsx(BaseButton, { className: "flex-1", onPress: handleConfirm, title: state.confirmText ?? "", variant: "primary" })] })] })) }))] }));
+    const value = useMemo(() => ({ show }), [show]);
+    return (_jsxs(ConfirmationContext.Provider, { value: value, children: [children, options ? (_jsx(Confirmation, { ...options, onClose: () => setVisible(false), visible: visible })) : null] }));
 }
 export function useConfirmationContext() {
     const context = useContext(ConfirmationContext);
     if (!context) {
-        return { show: () => { }, hide: () => { } };
+        throw new Error("useConfirmationContext requires ConfirmationProvider.");
     }
     return context;
 }

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

@@ -1,18 +1,19 @@
-export interface ActionSheetAction {
+import type { IconName } from "../Display/icon-map.js";
+export type ActionSheetAction = {
     label: string;
-    icon?: string;
+    icon?: IconName;
     destructive?: boolean;
     disabled?: boolean;
-    onPress: () => void;
-}
-export interface ActionSheetProps {
+    onPress: () => void | Promise<void>;
+};
+export type ActionSheetProps = {
     visible: boolean;
     onClose: () => void;
-    actions: ActionSheetAction[];
+    actions: readonly ActionSheetAction[];
     title?: string;
     message?: string;
     cancelLabel?: string;
     testID?: string;
-}
+};
 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,28 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Sheet from "./Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { themeToVars, useTheme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { useSheetTranslation } from "../utils/useSheetTranslation.js";
-import { vars } from "nativewind";
-import { Animated, Modal, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRef, useState } from "react";
+import { ActivityIndicator, View } from "react-native";
 function ActionSheet({ visible, onClose, actions, title, message, cancelLabel = "Cancelar", testID, }) {
     const theme = useTheme();
-    const insets = useSafeAreaInsets();
-    const { translateY } = useSheetTranslation(visible);
-    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();
-                                }, 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 }) })] })] }) }));
+    const saving = useRef(false);
+    const [pending, setPending] = useState();
+    const [error, setError] = useState();
+    const close = () => {
+        if (saving.current)
+            return;
+        setError(undefined);
+        onClose();
+    };
+    const choose = async (action, index) => {
+        if (action.disabled || saving.current)
+            return;
+        saving.current = true;
+        setPending(index);
+        setError(undefined);
+        try {
+            await action.onPress();
+            onClose();
+        }
+        catch (cause) {
+            setError(cause instanceof Error && cause.message.trim()
+                ? cause.message
+                : "No se pudo completar la acción. Vuelve a intentarlo.");
+        }
+        finally {
+            saving.current = false;
+            setPending(undefined);
+        }
+    };
+    return (_jsxs(Sheet, { dismissible: pending === undefined, footer: _jsx(Pressable, { accessibilityLabel: cancelLabel, accessibilityRole: "button", accessibilityState: { disabled: pending !== undefined }, disabled: pending !== undefined, onPress: close, style: { minHeight: 48, justifyContent: "center", alignItems: "center" }, children: _jsx(Typography.Text, { className: "text-text-accent", semibold: true, children: cancelLabel }) }), onClose: close, testID: testID, title: title, visible: visible, children: [message ? (_jsx(Typography.Text, { className: "pb-3 text-text-secondary", children: message })) : null, actions.map((action, index) => (_jsxs(Pressable, { accessibilityLabel: action.label, accessibilityRole: "button", accessibilityState: {
+                    disabled: !!action.disabled || pending !== undefined,
+                    busy: pending === index,
+                }, className: cn("flex-row items-center gap-3 py-3", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled || pending !== undefined, onPress: () => void choose(action, index), style: { minHeight: 48 }, children: [action.icon ? (_jsx(Icon, { color: action.disabled
+                            ? theme.icon.disabled
+                            : action.destructive
+                                ? theme.danger
+                                : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn("flex-1", action.disabled
+                            ? "text-text-disabled"
+                            : action.destructive
+                                ? "text-danger"
+                                : "text-text-primary"), semibold: true, children: action.label }), pending === index ? _jsx(ActivityIndicator, { color: theme.primary }) : null] }, `${action.label}-${index}`))), !actions.length ? (_jsx(Typography.Text, { children: "No hay acciones disponibles." })) : null, error ? (_jsx(View, { className: "pt-3", children: _jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "text-danger", selectable: true, children: error }) })) : null] }));
 }
 export default ActionSheet;

package/dist/Dialog/Dialog.Confirmation.d.ts

@@ -1,12 +1,15 @@
-import React from "react";
-export interface Props {
-    auxTitle?: string;
-    subtitle?: string;
-    confirmButtonText?: string;
-    cancelButtonText?: string;
+import { type ReactNode } from "react";
+export type ConfirmationProps = {
     visible: boolean;
-    onCancel: () => void;
-    onConfirm: () => void;
-}
-declare const ConfirmationDialog: React.FC<Props>;
-export default ConfirmationDialog;
+    onClose: () => void;
+    onConfirm: () => void | Promise<void>;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    destructive?: boolean;
+    children?: ReactNode;
+    testID?: string;
+};
+declare function Confirmation({ visible, onClose, onConfirm, title, message, confirmText, cancelText, destructive, children, testID, }: ConfirmationProps): import("react").JSX.Element;
+export default Confirmation;