@sincpro/mobile-ui 2.0.0 → 3.0.0

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;

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 }));
     }