@sincpro/mobile-ui 0.7.2 → 1.1.0

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

@@ -1,67 +1,70 @@
-import { type VariantProps } from "../theme/tw";
-import { IconType } from "../utils/icon";
+import { type VariantProps } from "../theme/tw.js";
+import { IconType } from "../utils/icon.js";
+import type { AccessibilityProps } from "react-native";
 declare const iconButton: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        ghost: string;
+        primary: "bg-primary";
+        secondary: "bg-bg-card border border-primary";
+        tertiary: "bg-accent";
+        ghost: "bg-transparent";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
     };
     rounded: {
-        true: string;
+        true: "rounded-full";
     };
     disabled: {
-        true: string;
+        true: "opacity-50";
     };
 }, undefined, "rounded-lg items-center justify-center", {
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        ghost: string;
+        primary: "bg-primary";
+        secondary: "bg-bg-card border border-primary";
+        tertiary: "bg-accent";
+        ghost: "bg-transparent";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
     };
     rounded: {
-        true: string;
+        true: "rounded-full";
     };
     disabled: {
-        true: string;
+        true: "opacity-50";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        ghost: string;
+        primary: "bg-primary";
+        secondary: "bg-bg-card border border-primary";
+        tertiary: "bg-accent";
+        ghost: "bg-transparent";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
     };
     rounded: {
-        true: string;
+        true: "rounded-full";
     };
     disabled: {
-        true: string;
+        true: "opacity-50";
     };
-}, undefined, "rounded-lg items-center justify-center", unknown, unknown, undefined>>;
-export interface IconButtonProps extends VariantProps<typeof iconButton> {
+}, undefined>>;
+export interface IconButtonProps extends VariantProps<typeof iconButton>, AccessibilityProps {
     icon?: string;
     type?: IconType;
     onPress: () => void;
     loading?: boolean;
     iconColor?: string;
     className?: string;
+    testID?: string;
+    accessibleSizing?: boolean;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibleSizing, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;

package/dist/Actions/Actions.IconButton.js

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

package/dist/Actions/index.d.ts

@@ -1,22 +1,22 @@
-import FAB from "../Actions/Actions.FAB";
-import { FilterButtonGroup } from "../Actions/Actions.FilterButton";
-import IconButton from "../Actions/Actions.IconButton";
+import FAB from "./Actions.FAB.js";
+import { FilterButtonGroup } from "./Actions.FilterButton.js";
+import IconButton from "./Actions.IconButton.js";
 export declare const Actions: {
-    /** Primary action button — gradient, outline, flat, link variants. Supports confirm dialog. */
-    Button: import("react").FC<import("../Actions/Actions.Button").ButtonProps> & {
-        Icon: import("react").FC<import("../Actions/Actions.Button").ButtonIconProps>;
+    /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
+    Button: import("react").FC<import("./Actions.Button.js").ButtonProps> & {
+        Icon: import("react").FC<import("./Actions.Button.js").ButtonIconProps>;
     };
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton: typeof IconButton;
     /** Floating Action Button — fixed bottom-right/left, label-optional. */
     FAB: typeof FAB;
     /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
-    FilterButton: import("react").FC<import("../Actions/Actions.FilterButton").FilterButtonProps>;
-    /** Horizontal scroll container for `Actions.FilterButton` chips. */
+    FilterButton: import("react").FC<import("./Actions.FilterButton.js").FilterButtonProps>;
+    /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
     FilterButtonGroup: typeof FilterButtonGroup;
 };
-export type { ButtonIconProps, ButtonProps } from "../Actions/Actions.Button";
-export type { FABProps } from "../Actions/Actions.FAB";
-export type { FilterButtonProps } from "../Actions/Actions.FilterButton";
-export type { IconButtonProps } from "../Actions/Actions.IconButton";
+export type { ButtonIconProps, ButtonProps } from "./Actions.Button.js";
+export type { FABProps } from "./Actions.FAB.js";
+export type { FilterButtonGroupProps, FilterButtonProps, } from "./Actions.FilterButton.js";
+export type { IconButtonProps } from "./Actions.IconButton.js";
 export default Actions;

package/dist/Actions/index.js

@@ -1,9 +1,9 @@
-import ButtonWithIcon from "../Actions/Actions.Button";
-import FAB from "../Actions/Actions.FAB";
-import { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton";
-import IconButton from "../Actions/Actions.IconButton";
+import ButtonWithIcon from "./Actions.Button.js";
+import FAB from "./Actions.FAB.js";
+import { FilterButton, FilterButtonGroup, } from "./Actions.FilterButton.js";
+import IconButton from "./Actions.IconButton.js";
 export const Actions = {
-    /** Primary action button — gradient, outline, flat, link variants. Supports confirm dialog. */
+    /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
     Button: ButtonWithIcon,
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton,
@@ -11,7 +11,7 @@ export const Actions = {
     FAB,
     /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
     FilterButton,
-    /** Horizontal scroll container for `Actions.FilterButton` chips. */
+    /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
     FilterButtonGroup,
 };
 export default Actions;

package/dist/Dialog/BottomSheet/BottomSheet.Root.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 /* eslint-disable react-hooks/refs */
-import { theme } from "../../theme";
+import { theme } from "../../theme/index.js";
 import { createContext, useContext, useEffect, useRef } from "react";
 import { Animated, Dimensions, Modal, PanResponder, Pressable, ScrollView, Text, View, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

package/dist/Dialog/BottomSheet/index.d.ts

@@ -1 +1 @@
-export { BottomSheet } from "../../Dialog/BottomSheet/BottomSheet.Root";
+export { BottomSheet } from "./BottomSheet.Root.js";

package/dist/Dialog/BottomSheet/index.js

@@ -1 +1 @@
-export { BottomSheet } from "../../Dialog/BottomSheet/BottomSheet.Root";
+export { BottomSheet } from "./BottomSheet.Root.js";

package/dist/Dialog/Confirmation.context.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { BottomSheet } from "../Dialog/BottomSheet";
-import ConfirmationDialog from "../Dialog/Dialog.Confirmation";
-import { BaseButton } from "../primitives/BaseButton";
+import { BottomSheet } from "./BottomSheet/index.js";
+import ConfirmationDialog from "./Dialog.Confirmation.js";
+import { BaseButton } from "../primitives/BaseButton.js";
 import { createContext, useCallback, useContext, useMemo, useState, } from "react";
 const DEFAULT_STATE = {
     isVisible: false,

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

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

package/dist/Dialog/Dialog.ActionSheet.js

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

package/dist/Dialog/Dialog.Confirmation.js

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

package/dist/Dialog/Dialog.EditValue.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useEffect, useRef } from "react";
-import { FlatList, Modal, TextInput, TouchableOpacity, View } from "react-native";
+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);
     useEffect(() => {
@@ -11,6 +11,6 @@ function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, o
             return () => clearTimeout(t);
         }
     }, [visible, autoFocus]);
-    return (_jsx(Modal, { animationType: "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, { className: "p-4", style: { borderRadius: 22, 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, { className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, ref: inputRef, returnKeyType: "done", 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 }) })] })] }) }) }));
+    return (_jsx(Modal, { animationType: "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, { className: "p-4", 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, { 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 }) })] })] }) }) }));
 }
 export default EditableValueModal;

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

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

package/dist/Dialog/Dialog.NativeSheet.js

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

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

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

package/dist/Dialog/Dialog.Sheet.js

@@ -1,6 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+/* 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 Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { vars } from "nativewind";
 import { useEffect, useRef, useState } from "react";
 import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -16,11 +22,11 @@ export function SheetProvider({ children }) {
  * **swipe-down to close** (handle only). By default it does NOT close on backdrop tap
  * (`dismissOnBackdrop`). No provider or native deps. Import via subpath `Dialog/Sheet`.
  */
-function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, testID, }) {
+function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, showCloseButton = false, accessibleSizing = false, testID, }) {
+    const theme = useTheme();
     const insets = useSafeAreaInsets();
     const translateY = useRef(new Animated.Value(800)).current;
     const onCloseRef = useRef(onClose);
-    // eslint-disable-next-line react-hooks/refs
     onCloseRef.current = onClose;
     useEffect(() => {
         if (visible) {
@@ -35,7 +41,6 @@ function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismis
             translateY.setValue(800);
         }
     }, [visible, translateY]);
-    // eslint-disable-next-line react-hooks/refs
     const [pan] = useState(() => PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, g) => g.dy > 2,
@@ -56,11 +61,14 @@ function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismis
             }
         },
     }));
-    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { className: "rounded-t-3xl", style: {
-                        backgroundColor: theme.bg.card,
-                        paddingBottom: insets.bottom + 12,
-                        maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
-                        transform: [{ translateY }],
-                    }, children: [_jsx(View, { className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 pb-1", semibold: true, variant: "subtitle", children: title })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4 }, children: children })] })] }) }));
+    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: onClose, style: [
+                        vars(themeToVars(theme)),
+                        {
+                            backgroundColor: theme.bg.card,
+                            paddingBottom: insets.bottom + 12,
+                            maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
+                            transform: [{ translateY }],
+                        },
+                    ], children: [_jsx(View, { accessibilityElementsHidden: true, className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title || showCloseButton ? (_jsxs(View, { className: "flex-row items-center px-4 pb-1", children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary", semibold: true, variant: "subtitle", children: title })) : null, showCloseButton ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", className: "items-center justify-center rounded-lg", hitSlop: 8, onPress: onClose, style: accessibleSizing ? { minWidth: 48, minHeight: 48 } : undefined, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })) : null] })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4 }, children: children })] })] }) }));
 }
 export default Sheet;

package/dist/Dialog/index.d.ts

@@ -1,9 +1,9 @@
-import { BottomSheet } from "../Dialog/BottomSheet";
-import { ConfirmationProvider, useConfirmationContext } from "../Dialog/Confirmation.context";
-import ActionSheet from "../Dialog/Dialog.ActionSheet";
-import EditValue, { type EditableValueModalChip, type EditableValueModalProps } from "../Dialog/Dialog.EditValue";
+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";
 export declare const Dialog: {
-    Confirmation: import("react").FC<import("../Dialog/Dialog.Confirmation").Props>;
+    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;

package/dist/Dialog/index.js

@@ -1,8 +1,8 @@
-import { BottomSheet } from "../Dialog/BottomSheet";
-import { ConfirmationProvider, useConfirmationContext, } from "../Dialog/Confirmation.context";
-import ActionSheet from "../Dialog/Dialog.ActionSheet";
-import Confirmation from "../Dialog/Dialog.Confirmation";
-import EditValue from "../Dialog/Dialog.EditValue";
+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";
 export const Dialog = {
     Confirmation,
     BottomSheet,

package/dist/Display/Display.Accordion.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { LayoutAnimation, View } from "react-native";
 function AccordionItem({ title, children, defaultOpen = false, className, testID, }) {

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

@@ -1,48 +1,48 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import { FC } from "react";
 declare const avatar: import("tailwind-variants").TVReturnType<{
     size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
+        xlarge: "w-16 h-16";
     };
     colorScheme: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
+        default: "bg-bg-hover";
+        primary: "bg-primary/20";
+        secondary: "bg-secondary/20";
+        success: "bg-success-light";
+        warning: "bg-warning-light";
     };
 }, undefined, "justify-center items-center rounded-full shadow-sm", {
     size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
+        xlarge: "w-16 h-16";
     };
     colorScheme: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
+        default: "bg-bg-hover";
+        primary: "bg-primary/20";
+        secondary: "bg-secondary/20";
+        success: "bg-success-light";
+        warning: "bg-warning-light";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
+        xlarge: "w-16 h-16";
     };
     colorScheme: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
+        default: "bg-bg-hover";
+        primary: "bg-primary/20";
+        secondary: "bg-secondary/20";
+        success: "bg-success-light";
+        warning: "bg-warning-light";
     };
-}, undefined, "justify-center items-center rounded-full shadow-sm", unknown, unknown, undefined>>;
+}, undefined>>;
 export interface AvatarProps extends Omit<VariantProps<typeof avatar>, "size"> {
     initials: string;
     size?: number;

package/dist/Display/Display.Avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn, tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import { cn, tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const avatar = tv({
     base: "justify-center items-center rounded-full shadow-sm",

package/dist/Display/Display.AvatarGroup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Avatar from "../Display/Display.Avatar";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import Avatar from "./Display.Avatar.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function AvatarGroup({ items, max = 4, size = 36, className, testID }) {
     const visible = items.slice(0, max);