@sincpro/mobile-ui 2.0.1 → 3.0.1

package/dist/Dialog/Dialog.Confirmation.js

@@ -1,15 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { BaseButton } from "../primitives/BaseButton.js";
-import { theme } from "../theme/index.js";
-import Typography from "../Typography/Typography.Text.js";
-import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { Modal, TouchableWithoutFeedback, View } from "react-native";
-const ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "Descartar cambios", subtitle = "¿Quieres descartar los cambios realizados?", confirmButtonText = "Descartar cambios", cancelButtonText = "Seguir editando", }) => {
-    const reducedMotion = useReducedMotion();
-    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: [_jsx(TouchableWithoutFeedback, { accessible: false, onPress: onCancel, children: _jsx(View, { className: "absolute inset-0" }) }), _jsxs(View, { accessibilityViewIsModal: true, className: "p-3 w-full max-w-xs mx-auto", onAccessibilityEscape: onCancel, style: {
-                        borderRadius: 16,
-                        backgroundColor: theme.bg.popover,
-                        ...theme.shadow.md,
-                    }, 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;
+import { Actions } from "../Actions/index.js";
+import Sheet from "./Dialog.Sheet.js";
+import { Typography } from "../Typography/index.js";
+import { useRef, useState } from "react";
+import { View } from "react-native";
+function Confirmation({ visible, onClose, onConfirm, title = "Descartar cambios", message = "¿Quieres descartar los cambios realizados?", confirmText = "Descartar cambios", cancelText = "Seguir editando", destructive = true, children, testID, }) {
+    const saving = useRef(false);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState();
+    const close = () => {
+        if (saving.current)
+            return;
+        setError(undefined);
+        onClose();
+    };
+    const confirm = async () => {
+        if (saving.current)
+            return;
+        saving.current = true;
+        setPending(true);
+        setError(undefined);
+        try {
+            await onConfirm();
+            onClose();
+        }
+        catch (cause) {
+            setError(cause instanceof Error && cause.message.trim()
+                ? cause.message
+                : "No se pudo completar la operación. Vuelve a intentarlo.");
+        }
+        finally {
+            saving.current = false;
+            setPending(false);
+        }
+    };
+    return (_jsxs(Sheet, { dismissible: !pending, footer: _jsxs(View, { className: "gap-2", children: [_jsx(Actions.Button, { disabled: pending, onPress: close, title: cancelText, variant: "outline" }), _jsx(Actions.Button, { disabled: pending, loading: pending, onPress: () => void confirm(), title: confirmText, variant: destructive ? "outlineDanger" : "primary" })] }), onClose: close, testID: testID, title: title, visible: visible, children: [_jsx(Typography.Text, { className: "text-text-secondary", selectable: true, children: message }), children, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pt-3 text-danger", selectable: true, children: error })) : null] }));
+}
+export default Confirmation;

package/dist/Dialog/Dialog.EditValue.d.ts

@@ -1,25 +1,30 @@
-import React from "react";
-export interface EditableValueModalChip {
-    key?: string;
+import { type ReactNode } from "react";
+import { type TextInputProps } from "react-native";
+export type EditValueOption = {
+    key: string;
     label: string;
-    onPress: () => void;
-}
-export interface EditableValueModalProps {
+    value: string;
+    disabled?: boolean;
+};
+export type EditValueProps = {
     visible: boolean;
     title: string;
     value: string;
-    onChangeValue: (text: string) => void;
-    onConfirm: () => void;
-    onCancel: () => void;
+    onChange?: (value: string) => void;
+    onConfirm: (value: string) => void | Promise<void>;
+    onClose: () => void;
     placeholder?: string;
-    helperText?: string | React.ReactNode;
-    chips?: EditableValueModalChip[];
-    keyboardType?: "default" | "numeric" | "decimal-pad";
-    rightAdornment?: React.ReactNode;
+    helperText?: ReactNode;
+    options?: readonly EditValueOption[];
+    keyboardType?: TextInputProps["keyboardType"];
+    rightAdornment?: ReactNode;
+    footerAdornment?: ReactNode;
     confirmLabel?: string;
     cancelLabel?: string;
     autoFocus?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
     testID?: string;
-}
-declare function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, onCancel, placeholder, helperText, chips, keyboardType, rightAdornment, confirmLabel, cancelLabel, autoFocus, testID, }: EditableValueModalProps): React.JSX.Element;
-export default EditableValueModal;
+};
+declare function EditValue(props: EditValueProps): import("react").JSX.Element;
+export default EditValue;

package/dist/Dialog/Dialog.EditValue.js

@@ -1,18 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { FlashList } from "@shopify/flash-list";
+import { Actions } from "../Actions/index.js";
+import Sheet from "./Dialog.Sheet.js";
+import Pressable from "../primitives/Pressable.js";
+import { fontFamilies, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { useEffect, useRef } from "react";
-import { FlatList, Modal, TextInput, TouchableOpacity, View, } from "react-native";
-function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, onCancel, placeholder, helperText, chips, keyboardType = "decimal-pad", rightAdornment, confirmLabel = "Aplicar", cancelLabel = "Cancelar", autoFocus = true, testID, }) {
-    const inputRef = useRef(null);
-    const reducedMotion = useReducedMotion();
-    useEffect(() => {
-        if (visible && autoFocus) {
-            const t = setTimeout(() => inputRef.current?.focus(), 60);
-            return () => clearTimeout(t);
+import { useRef, useState } from "react";
+import { Keyboard, TextInput, View } from "react-native";
+function EditValueEditor({ title, value, onChange, onConfirm, onClose, placeholder, helperText, options = [], keyboardType = "decimal-pad", rightAdornment, footerAdornment, confirmLabel = "Aplicar", cancelLabel = "Cancelar", autoFocus = true, disabled = false, readOnly = false, onPendingChange, }) {
+    const theme = useTheme();
+    const saving = useRef(false);
+    const [localDraft, setLocalDraft] = useState(value);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState();
+    const draft = onChange ? value : localDraft;
+    const blocked = disabled || readOnly || pending;
+    const updateDraft = (next) => {
+        if (blocked || saving.current)
+            return;
+        if (onChange)
+            onChange(next);
+        else
+            setLocalDraft(next);
+        setError(undefined);
+    };
+    const close = () => {
+        if (saving.current)
+            return;
+        Keyboard.dismiss();
+        onClose();
+    };
+    const save = async () => {
+        if (disabled || readOnly || saving.current)
+            return;
+        saving.current = true;
+        setPending(true);
+        onPendingChange(true);
+        setError(undefined);
+        try {
+            await onConfirm(draft);
+            Keyboard.dismiss();
+            onClose();
         }
-    }, [visible, autoFocus]);
-    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { accessibilityViewIsModal: true, className: "p-4", onAccessibilityEscape: onCancel, style: { borderRadius: 16, backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { accessibilityLabel: title, className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, placeholderTextColor: theme.text.tertiary, ref: inputRef, returnKeyType: "done", selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
+        catch (cause) {
+            setError(cause instanceof Error && cause.message.trim()
+                ? cause.message
+                : "No se pudo guardar. Conservamos el valor para reintentar.");
+        }
+        finally {
+            saving.current = false;
+            setPending(false);
+            onPendingChange(false);
+        }
+    };
+    return (_jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(TextInput, { accessibilityLabel: title, accessibilityState: { disabled: blocked }, autoFocus: autoFocus && !blocked, className: "flex-1 border border-input rounded-lg p-3 text-text-primary", editable: !blocked, keyboardType: keyboardType, onChangeText: updateDraft, onSubmitEditing: () => void save(), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, readOnly: readOnly, returnKeyType: "done", selectionColor: theme.primary, style: { minHeight: 48, fontFamily: fontFamilies.regular, fontSize: 18 }, underlineColorAndroid: "transparent", value: draft }), rightAdornment] }), helperText ? (typeof helperText === "string" ? (_jsx(Typography.Text, { className: "pt-2 text-text-secondary", children: helperText })) : (helperText)) : null, _jsx(View, { style: { flex: 1, minHeight: 0 }, children: _jsx(FlashList, { contentContainerStyle: { paddingVertical: 12 }, data: options, keyboardShouldPersistTaps: "handled", keyExtractor: (option) => option.key, renderItem: ({ item }) => (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "radio", accessibilityState: {
+                            disabled: blocked || !!item.disabled,
+                            selected: item.value === draft,
+                        }, className: "border-b border-border-light py-3", disabled: blocked || item.disabled, onPress: () => {
+                            if (!item.disabled)
+                                updateDraft(item.value);
+                        }, style: { minWidth: 48, minHeight: 48 }, children: _jsx(Typography.Text, { className: item.disabled ? "text-text-disabled" : "text-text-primary", semibold: item.value === draft, children: item.label }) })) }) }), error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pb-3 text-danger", selectable: true, children: error })) : null, _jsxs(View, { className: "gap-2 border-t border-border-light py-3", children: [footerAdornment ? (_jsx(View, { accessibilityElementsHidden: blocked, importantForAccessibility: blocked ? "no-hide-descendants" : "auto", pointerEvents: blocked ? "none" : "auto", children: footerAdornment })) : null, _jsx(Actions.Button, { disabled: pending, onPress: close, title: cancelLabel, variant: "secondary" }), _jsx(Actions.Button, { disabled: blocked, loading: pending, onPress: () => void save(), title: confirmLabel })] })] }));
+}
+function EditValue(props) {
+    const busy = useRef(false);
+    const [pending, setPending] = useState(false);
+    return (_jsx(Sheet, { dismissible: !pending, onClose: () => {
+            if (!busy.current) {
+                Keyboard.dismiss();
+                props.onClose();
+            }
+        }, scrollable: false, testID: props.testID, title: props.title, visible: props.visible, children: props.visible ? (_jsx(EditValueEditor, { ...props, onPendingChange: (next) => {
+                busy.current = next;
+                setPending(next);
+            } })) : null }));
 }
-export default EditableValueModal;
+export default EditValue;

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

@@ -1,30 +1,14 @@
-import { type ReactNode } from "react";
-/**
- * @deprecated A provider is no longer required. `SheetProvider` is a no-op passthrough
- * kept to avoid breaking prior wiring. Remove it when you can.
- */
-export declare function SheetProvider({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-export interface SheetProps {
+import type { ReactNode } from "react";
+export type SheetProps = {
     visible: boolean;
     onClose: () => void;
+    title?: string;
     children: ReactNode;
     footer?: ReactNode;
-    footerClassName?: string;
-    title?: string;
-    /** Max sheet height (fraction of the screen). Default 0.9. */
-    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;
+    snapPoints?: (string | number)[];
+    scrollable?: boolean;
+    dismissible?: boolean;
     testID?: string;
-}
-/**
- * Bottom sheet on RN's native `Modal`: bottom-anchored, dim backdrop, handle with
- * **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, footer, footerClassName, title, maxHeightRatio, dismissOnBackdrop, showCloseButton, testID, }: SheetProps): import("react").JSX.Element;
+};
+declare function Sheet({ visible, onClose, title, children, footer, snapPoints, scrollable, dismissible, testID, }: SheetProps): import("react").JSX.Element;
 export default Sheet;

package/dist/Dialog/Dialog.Sheet.js

@@ -1,67 +1,22 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-/* eslint-disable react-hooks/refs */
-// 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 { 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 { useSheetTranslation } from "../utils/useSheetTranslation.js";
 import { vars } from "nativewind";
-import { useRef, useState } from "react";
-import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-/**
- * @deprecated A provider is no longer required. `SheetProvider` is a no-op passthrough
- * kept to avoid breaking prior wiring. Remove it when you can.
- */
-export function SheetProvider({ children }) {
-    return _jsx(_Fragment, { children: children });
-}
-/**
- * Bottom sheet on RN's native `Modal`: bottom-anchored, dim backdrop, handle with
- * **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, footer, footerClassName, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, showCloseButton = false, testID, }) {
+import { ScrollView, View } from "react-native";
+const SNAP_POINTS = ["60%", "90%"];
+function Sheet({ visible, onClose, title, children, footer, snapPoints = SNAP_POINTS, scrollable = true, dismissible = true, testID, }) {
     const theme = useTheme();
-    const insets = useSafeAreaInsets();
-    const { translateY, reducedMotion } = useSheetTranslation(visible);
-    const gesture = useRef({ onClose, reducedMotion });
-    gesture.current = { onClose, reducedMotion };
-    const [pan] = useState(() => PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: (_, g) => g.dy > 2,
-        onPanResponderGrant: () => translateY.stopAnimation(),
-        onPanResponderMove: (_, g) => {
-            if (g.dy > 0)
-                translateY.setValue(g.dy);
-        },
-        onPanResponderRelease: (_, g) => {
-            if (g.dy > 100 || g.vy > 0.5) {
-                translateY.stopAnimation();
-                gesture.current.onClose();
-            }
-            else {
-                if (gesture.current.reducedMotion)
-                    translateY.setValue(0);
-                else
-                    Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
-            }
-        },
-    }));
-    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: { minWidth: 48, minHeight: 48 }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })) : null] })) : null, _jsx(ScrollView, { contentContainerStyle: {
-                                paddingHorizontal: 16,
-                                paddingTop: 4,
-                                paddingBottom: footer ? 12 : 0,
-                            }, style: { flexShrink: 1 }, children: children }), footer ? (_jsx(View, { className: `border-t border-border-light px-4 pt-3 ${footerClassName ?? ""}`, children: footer })) : null] })] }) }));
+    const close = () => {
+        if (visible && dismissible)
+            onClose();
+    };
+    return (_jsx(BottomSheet, { backgroundStyle: { backgroundColor: theme.bg.card }, enablePanDownToClose: dismissible, index: visible ? 0 : -1, onClose: close, snapPoints: snapPoints, children: _jsx(BottomSheetView, { style: { flex: 1 }, children: _jsxs(View, { accessibilityViewIsModal: true, importantForAccessibility: "yes", onAccessibilityEscape: close, style: [vars(themeToVars(theme)), { flex: 1, minHeight: 0 }], testID: testID, children: [_jsxs(View, { className: "flex-row items-center gap-3 px-4 pb-2", children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary", semibold: true, variant: "subtitle", children: title })) : (_jsx(View, { className: "flex-1" })), _jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", accessibilityState: { disabled: !dismissible }, disabled: !dismissible, onPress: close, style: {
+                                    minHeight: 48,
+                                    minWidth: 48,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }, children: _jsx(Typography.Text, { className: dismissible ? "text-text-accent" : "text-text-disabled", variant: "bodySmall", children: "Cerrar" }) })] }), scrollable ? (_jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 16 }, keyboardDismissMode: "on-drag", keyboardShouldPersistTaps: "handled", style: { flex: 1, minHeight: 0 }, children: children })) : (_jsx(View, { style: { flex: 1, minHeight: 0, paddingHorizontal: 16 }, children: children })), footer ? (_jsx(View, { className: "border-t border-border-light px-4 py-3", children: footer })) : null] }) }) }));
 }
 export default Sheet;

package/dist/Dialog/index.d.ts

@@ -1,21 +1,21 @@
-import { BottomSheet } from "./BottomSheet/index.js";
 import { ConfirmationProvider, useConfirmationContext } from "./Confirmation.context.js";
 import ActionSheet from "./Dialog.ActionSheet.js";
-import EditValue, { type EditableValueModalChip, type EditableValueModalProps } from "./Dialog.EditValue.js";
+import Confirmation from "./Dialog.Confirmation.js";
+import EditValue from "./Dialog.EditValue.js";
+import Sheet from "./Dialog.Sheet.js";
+import { requestConfirmation } from "./requestConfirmation.js";
 export declare const Dialog: {
-    Confirmation: import("react").FC<import("./Dialog.Confirmation.js").Props>;
-    BottomSheet: {
-        Root: ({ visible, onClose, size, dismissible, children }: import("./BottomSheet/BottomSheet.Root").RootProps) => import("react").JSX.Element;
-        Handle: ({ children }: import("./BottomSheet/BottomSheet.Root").HandleProps) => import("react").JSX.Element;
-        Header: ({ children }: import("./BottomSheet/BottomSheet.Root").HeaderProps) => import("react").JSX.Element;
-        Title: ({ children, subtitle }: import("./BottomSheet/BottomSheet.Root").TitleProps) => import("react").JSX.Element;
-        Content: ({ children, scrollable }: import("./BottomSheet/BottomSheet.Root").ContentProps) => import("react").JSX.Element;
-        Actions: ({ children, layout }: import("./BottomSheet/BottomSheet.Root").ActionsProps) => import("react").JSX.Element;
-        Footer: ({ children }: import("./BottomSheet/BottomSheet.Root").FooterProps) => import("react").JSX.Element;
-        useBottomSheet: () => import("./BottomSheet/BottomSheet.Root").BottomSheetContextValue;
-    };
+    Confirmation: typeof Confirmation;
+    Sheet: typeof Sheet;
     EditValue: typeof EditValue;
     ActionSheet: typeof ActionSheet;
+    requestConfirmation: typeof requestConfirmation;
 };
-export { BottomSheet, ConfirmationProvider, type EditableValueModalChip, type EditableValueModalProps, useConfirmationContext, };
+export { ConfirmationProvider, requestConfirmation, Sheet, useConfirmationContext };
+export type { ConfirmationOptions } from "./Confirmation.context.js";
+export type { ActionSheetAction, ActionSheetProps, } from "./Dialog.ActionSheet.js";
+export type { ConfirmationProps } from "./Dialog.Confirmation.js";
+export type { EditValueOption, EditValueProps, } from "./Dialog.EditValue.js";
+export type { SheetProps } from "./Dialog.Sheet.js";
+export type { NativeConfirmationOptions } from "./requestConfirmation.js";
 export default Dialog;

package/dist/Dialog/index.js

@@ -1,13 +1,15 @@
-import { BottomSheet } from "./BottomSheet/index.js";
 import { ConfirmationProvider, useConfirmationContext, } from "./Confirmation.context.js";
 import ActionSheet from "./Dialog.ActionSheet.js";
 import Confirmation from "./Dialog.Confirmation.js";
 import EditValue from "./Dialog.EditValue.js";
+import Sheet from "./Dialog.Sheet.js";
+import { requestConfirmation } from "./requestConfirmation.js";
 export const Dialog = {
     Confirmation,
-    BottomSheet,
+    Sheet,
     EditValue,
     ActionSheet,
+    requestConfirmation,
 };
-export { BottomSheet, ConfirmationProvider, useConfirmationContext, };
+export { ConfirmationProvider, requestConfirmation, Sheet, useConfirmationContext };
 export default Dialog;

package/dist/Dialog/requestConfirmation.d.ts

@@ -0,0 +1,3 @@
+import type { ConfirmationProps } from "./Dialog.Confirmation.js";
+export type NativeConfirmationOptions = Pick<ConfirmationProps, "title" | "message" | "confirmText" | "cancelText" | "destructive">;
+export declare function requestConfirmation({ title, message, confirmText, cancelText, destructive, }?: NativeConfirmationOptions): Promise<boolean>;

package/dist/Dialog/requestConfirmation.js

@@ -0,0 +1,13 @@
+import { Alert } from "react-native";
+export function requestConfirmation({ title = "Confirmación", message = "¿Estás seguro de que quieres continuar?", confirmText = "Confirmar", cancelText = "Cancelar", destructive = false, } = {}) {
+    return new Promise((resolve) => {
+        Alert.alert(title, message, [
+            { text: cancelText, style: "cancel", onPress: () => resolve(false) },
+            {
+                text: confirmText,
+                style: destructive ? "destructive" : "default",
+                onPress: () => resolve(true),
+            },
+        ], { cancelable: true, onDismiss: () => resolve(false) });
+    });
+}

package/dist/Display/Display.Accordion.js

@@ -16,7 +16,7 @@ function AccordionItem({ title, children, defaultOpen = false, className, testID
             LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
         setOpen((prev) => !prev);
     };
-    return (_jsxs(View, { className: cn("border-b border-border-default", className), testID: testID, children: [_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { expanded: open }, className: "flex-row items-center justify-between py-3", onPress: toggle, style: { minHeight: 48 }, children: [_jsx(Typography.Text, { className: "flex-1 text-text-primary", semibold: true, children: title }), _jsx(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] }, children: _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 }) })] }), open ? _jsx(View, { className: "pb-3", children: children }) : null] }));
+    return (_jsxs(View, { className: cn("border-b border-border-default", className), testID: testID, children: [_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { expanded: open }, className: "flex-row items-center justify-between py-3", onPress: toggle, style: { minHeight: 48 }, children: [_jsx(Typography.Text, { className: "flex-1 text-text-primary", semibold: true, children: title }), _jsx(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] }, children: _jsx(Icon, { color: theme.icon.secondary, name: "expand", size: 18 }) })] }), open ? _jsx(View, { className: "pb-3", children: children }) : null] }));
 }
 function AccordionRoot({ children, className }) {
     return _jsx(View, { className: cn("bg-bg-card rounded-lg", className), children: children });

package/dist/Display/Display.Avatar.d.ts

@@ -11,8 +11,8 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         default: "bg-bg-hover";
         primary: "bg-primary/20";
         secondary: "bg-secondary/20";
-        success: "bg-success-light";
-        warning: "bg-warning-light";
+        success: "bg-container-success";
+        warning: "bg-container-warning";
     };
 }, undefined, "justify-center items-center rounded-full shadow-sm", {
     size: {
@@ -25,8 +25,8 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         default: "bg-bg-hover";
         primary: "bg-primary/20";
         secondary: "bg-secondary/20";
-        success: "bg-success-light";
-        warning: "bg-warning-light";
+        success: "bg-container-success";
+        warning: "bg-container-warning";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
@@ -39,8 +39,8 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         default: "bg-bg-hover";
         primary: "bg-primary/20";
         secondary: "bg-secondary/20";
-        success: "bg-success-light";
-        warning: "bg-warning-light";
+        success: "bg-container-success";
+        warning: "bg-container-warning";
     };
 }, undefined>>;
 export interface AvatarProps extends Omit<VariantProps<typeof avatar>, "size"> {

package/dist/Display/Display.Avatar.js

@@ -15,8 +15,8 @@ const avatar = tv({
             default: "bg-bg-hover",
             primary: "bg-primary/20",
             secondary: "bg-secondary/20",
-            success: "bg-success-light",
-            warning: "bg-warning-light",
+            success: "bg-container-success",
+            warning: "bg-container-warning",
         },
     },
     defaultVariants: {

package/dist/Display/Display.Badge.js

@@ -9,7 +9,7 @@ const badge = tv({
     variants: {
         variant: {
             info: {
-                root: "bg-info-light",
+                root: "bg-container-info",
                 text: "text-info",
             },
             infoDark: {
@@ -17,11 +17,11 @@ const badge = tv({
                 text: "text-text-on-primary",
             },
             warning: {
-                root: "bg-warning-light",
+                root: "bg-container-warning",
                 text: "text-warning",
             },
             success: {
-                root: "bg-success-light",
+                root: "bg-container-success",
                 text: "text-success",
             },
             successDark: {
@@ -29,7 +29,7 @@ const badge = tv({
                 text: "text-text-on-primary",
             },
             danger: {
-                root: "bg-danger-light",
+                root: "bg-container-danger",
                 text: "text-danger",
             },
         },

package/dist/Display/Display.Card.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
@@ -19,7 +19,10 @@ const card = tv({
     },
 });
 function Card({ padding = "md", elevation = "sm", onPress, className, children, testID, }) {
-    const shadow = elevation === "none" ? undefined : theme.shadow[elevation];
+    const theme = useTheme();
+    const shadow = elevation === "none"
+        ? { borderCurve: "continuous" }
+        : { ...theme.shadow[elevation], borderCurve: "continuous" };
     if (onPress) {
         return (_jsx(Pressable, { className: card({ padding, className }), onPress: onPress, style: shadow, testID: testID, children: children }));
     }

package/dist/Display/Display.Carousel.js

@@ -114,6 +114,6 @@ function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDot
                         },
                         dotStyle,
                         index === current ? activeDotStyle : undefined,
-                    ] }, keys[index]))) })) : null, data.length > 1 ? (renderControls ? (renderControls(controls)) : (_jsxs(View, { className: controlsClassName ?? "flex-row items-center justify-center gap-3 mt-2", children: [_jsx(IconButton, { accessibilityLabel: previousAccessibilityLabel, disabled: !controls.canPrevious, icon: "chevron-left", onPress: controls.previous }), _jsx(Typography.Text, { ...paginationTextProps, accessibilityLiveRegion: "polite", children: formatPageLabel(current, data.length) }), _jsx(IconButton, { accessibilityLabel: nextAccessibilityLabel, disabled: !controls.canNext, icon: "chevron-right", onPress: controls.next })] }))) : null] }));
+                    ] }, keys[index]))) })) : null, data.length > 1 ? (renderControls ? (renderControls(controls)) : (_jsxs(View, { className: controlsClassName ?? "flex-row items-center justify-center gap-3 mt-2", children: [_jsx(IconButton, { accessibilityLabel: previousAccessibilityLabel, disabled: !controls.canPrevious, icon: "back", onPress: controls.previous }), _jsx(Typography.Text, { ...paginationTextProps, accessibilityLiveRegion: "polite", children: formatPageLabel(current, data.length) }), _jsx(IconButton, { accessibilityLabel: nextAccessibilityLabel, disabled: !controls.canNext, icon: "next", onPress: controls.next })] }))) : null] }));
 }
 export default Carousel;

package/dist/Display/Display.CircleButton.d.ts

@@ -1,15 +1,10 @@
-import { IconType } from "../utils/icon.js";
-import { ComponentType } from "react";
+import type { IconName } from "./index.js";
 export interface CircleButtonProps {
-    iconType?: IconType;
     size?: "sm" | "md" | "lg";
     color?: string;
     variant?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
     className?: string;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
+    icon: IconName;
 }
-export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): import("react").JSX.Element;
+export declare function CircleButton({ size, color, variant, className, icon, }: CircleButtonProps): import("react").JSX.Element;
 export default CircleButton;

package/dist/Display/Display.CircleButton.js

@@ -31,9 +31,9 @@ const SIZE_MAP = {
     md: { icon: 30 },
     lg: { icon: 40 },
 };
-export function CircleButton({ iconType = "ionicons", size = "md", color, variant = "accent", className, customIcon, }) {
+export function CircleButton({ size = "md", color, variant = "accent", className, icon, }) {
     const theme = useTheme();
     const iconColor = color ?? theme.text.inverse;
-    return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Icon, { color: iconColor, customIcon: customIcon, size: SIZE_MAP[size].icon, type: iconType }) }));
+    return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Icon, { color: iconColor, name: icon, size: SIZE_MAP[size].icon }) }));
 }
 export default CircleButton;

package/dist/Display/Display.CopyableText.js

@@ -73,10 +73,6 @@ function CopyableText({ value, getValue, label, className, accessibilityLabel, t
                             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] }));
+                        }, 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 ? "check" : status === "error" ? "error" : "copy", 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.Date.d.ts

@@ -1,3 +1,4 @@
+import type { IconName } from "./index.js";
 import { typographyVariants } from "../theme/typography.js";
 import { type StyleProp, type TextStyle } from "react-native";
 type DateFormat = "short" | "long" | "numeric";
@@ -22,8 +23,8 @@ interface DateFieldProps {
     timezone?: string;
     /** App-like layout. Default `inline` (no visual change vs. previous version). */
     variant?: DateVariant;
-    /** Override the leading icon (ionicons). Defaults: calendar, or clock if `showTime`. */
-    icon?: string;
+    /** Override the semantic icon. Defaults: calendar, or time if `showTime`. */
+    icon?: IconName;
     /** Show relative time ("hace 2 h") instead of the absolute date. */
     relative?: boolean;
 }

package/dist/Display/Display.Date.js

@@ -30,10 +30,10 @@ function DateField({ value, format = "short", prefix = "", textVariant = "body",
             : formatDateWithDefaultTimezone(value, { showTime, locale });
     const formatted = value && relative ? relativeTime(value) : absolute;
     const text = prefix ? `${prefix}${formatted}` : formatted;
-    const iconName = icon ?? (showTime && !relative ? "time-outline" : "calendar-outline");
-    const label = (_jsx(Typography.Text, { bold: bold, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: text }));
+    const iconName = icon ?? (showTime && !relative ? "time" : "calendar");
+    const label = (_jsx(Typography.Text, { bold: bold, semibold: semibold && !bold, style: [{ color }, style], variant: textVariant, children: text }));
     if (variant === "inline") {
-        return (_jsx(Typography.Text, { bold: bold, className: className, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: text }));
+        return (_jsx(Typography.Text, { bold: bold, className: className, semibold: semibold && !bold, style: [{ color }, style], variant: textVariant, children: text }));
     }
     if (variant === "pill") {
         return (_jsxs(View, { className: cn("flex-row items-center self-start gap-1.5 rounded-full bg-bg-muted px-2.5 py-1", className), children: [_jsx(Icon, { color: color ?? theme.icon.secondary, name: iconName, size: 14 }), label] }));