@sincpro/mobile-ui 0.7.1 → 1.0.1

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

@@ -1,16 +1,32 @@
 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 { Modal, Pressable as RNPressable, View } from "react-native";
+import Icon from "../Display/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 { useEffect, useRef } from "react";
+import { Animated, Modal, Pressable as RNPressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function ActionSheet({ visible, onClose, actions, title, message, cancelLabel = "Cancelar", }) {
     const insets = useSafeAreaInsets();
-    return (_jsx(Modal, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: visible, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: onClose, 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: () => {
-                                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 }) })] }) }) }));
+    // eslint-disable-next-line react-hooks/refs
+    const translateY = useRef(new Animated.Value(800)).current;
+    useEffect(() => {
+        if (visible) {
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            }).start();
+        }
+        else {
+            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: () => {
+                                    onClose();
+                                    action.onPress();
+                                }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card }, children: _jsx(Typography.Text, { className: "text-text-accent", semibold: true, children: cancelLabel }) })] }) }) }) }));
 }
 export default ActionSheet;

package/dist/Dialog/Dialog.Confirmation.js

@@ -1,11 +1,11 @@
 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, 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,
+    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: 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" })] })] }) }) }) }) }));

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, 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.Sheet.js

@@ -1,6 +1,10 @@
 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 { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useEffect, useRef, useState } from "react";
 import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -18,15 +22,22 @@ export function SheetProvider({ children }) {
  */
 function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, testID, }) {
     const insets = useSafeAreaInsets();
-    const [translateY] = useState(() => new Animated.Value(0));
+    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)
-            translateY.setValue(0);
+        if (visible) {
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            }).start();
+        }
+        else {
+            translateY.setValue(800);
+        }
     }, [visible, translateY]);
-    // eslint-disable-next-line react-hooks/refs
     const [pan] = useState(() => PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, g) => g.dy > 2,
@@ -47,7 +58,7 @@ function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismis
             }
         },
     }));
-    return (_jsx(Modal, { animationType: "slide", onRequestClose: onClose, 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: {
+    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)}%`,

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

package/dist/Display/Display.Badge.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 declare const badge: import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
@@ -59,7 +59,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     text: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         info: {
             root: string;
@@ -89,7 +89,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     text: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type BadgeVariant = VariantProps<typeof badge>["variant"];
 export declare enum BadgeVariants {
     INFO = "info",

package/dist/Display/Display.Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw";
+import { tv } from "../theme/tw.js";
 import { Text, View } from "react-native";
 const badge = tv({
     slots: {

package/dist/Display/Display.Card.d.ts

@@ -1,27 +1,27 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type { ReactNode } from "react";
 declare const card: import("tailwind-variants").TVReturnType<{
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
 }, undefined, "bg-bg-card rounded-lg border border-border-light", {
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, "bg-bg-card rounded-lg border border-border-light", unknown, unknown, undefined>>;
+}, undefined>>;
 export interface CardProps extends VariantProps<typeof card> {
     elevation?: "none" | "sm" | "md" | "lg";
     onPress?: () => void;

package/dist/Display/Display.Card.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const card = tv({
     base: "bg-bg-card rounded-lg border border-border-light",

package/dist/Display/Display.Carousel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { useState } from "react";
 import { ScrollView, View, } from "react-native";
 function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDots = true, className, testID, }) {

package/dist/Display/Display.Chip.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 declare const chip: import("tailwind-variants").TVReturnType<{
     tone: {
         neutral: {
@@ -61,7 +61,7 @@ declare const chip: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
         neutral: {
             root: string;
@@ -92,7 +92,7 @@ declare const chip: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface ChipProps extends VariantProps<typeof chip> {
     label: string;
     onPress?: () => void;

package/dist/Display/Display.Chip.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { tv } from "../theme/tw";
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
 import { Text, View } from "react-native";
 const chip = tv({
     slots: {
@@ -12,10 +12,10 @@ const chip = tv({
     variants: {
         tone: {
             neutral: { root: "bg-bg-muted", label: "text-text-secondary" },
-            primary: { root: "bg-bg-accent", label: "text-text-accent" },
-            success: { root: "bg-success-light", label: "text-success" },
-            warning: { root: "bg-warning-light", label: "text-warning" },
-            danger: { root: "bg-danger-light", label: "text-danger" },
+            primary: { root: "bg-container-primary", label: "text-container-on-primary" },
+            success: { root: "bg-container-success", label: "text-container-on-success" },
+            warning: { root: "bg-container-warning", label: "text-container-on-warning" },
+            danger: { root: "bg-container-danger", label: "text-container-on-danger" },
         },
         selected: {
             true: { root: "border border-primary" },
@@ -28,10 +28,10 @@ const chip = tv({
 });
 const removeIconColor = {
     neutral: theme.text.secondary,
-    primary: theme.text.accent,
-    success: theme.success,
-    warning: theme.warning,
-    danger: theme.danger,
+    primary: theme.container.onPrimary,
+    success: theme.container.onSuccess,
+    warning: theme.container.onWarning,
+    danger: theme.container.onDanger,
 };
 function Chip({ label, tone = "neutral", selected = false, onPress, onRemove, className, testID, }) {
     const styles = chip({ tone, selected });

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

@@ -1,4 +1,4 @@
-import { IconType } from "../utils/icon";
+import { IconType } from "../utils/icon.js";
 import { ComponentType } from "react";
 export interface CircleButtonProps {
     iconType?: IconType;

package/dist/Display/Display.CircleButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { useTheme } from "../theme";
-import { cn } from "../theme/tw";
+import Icon from "./Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 import { tv } from "tailwind-variants";
 const circleButtonVariants = tv({

package/dist/Display/Display.CopyableText.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Typography } from "../Typography";
+import { Typography } from "../Typography/index.js";
 import * as Clipboard from "expo-clipboard";
 import { TouchableOpacity } from "react-native";
 function CopyableText({ value, getValue, label, className }) {
@@ -9,6 +9,6 @@ function CopyableText({ value, getValue, label, className }) {
         const textToCopy = hasStaticValue ? value : getValue();
         await Clipboard.setStringAsync(textToCopy);
     };
-    return (_jsx(TouchableOpacity, { onPress: handleCopy, children: _jsx(Typography.Text, { className: className || "text-primary", semibold: true, variant: "bodySmall", children: displayText }) }));
+    return (_jsx(TouchableOpacity, { onPress: handleCopy, children: _jsx(Typography.Text, { className: className || "text-text-accent", semibold: true, variant: "bodySmall", children: displayText }) }));
 }
 export default CopyableText;

package/dist/Display/Display.CountRecords.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function CountRecords({ name, count, withPadding = true, className }) {
     return (_jsxs(View, { className: cn("flex-row py-2", withPadding && "px-4", className), children: [_jsxs(Typography.Text, { semibold: true, variant: "bodySmall", children: ["Total ", " ", `${name || "Registros"} `] }), _jsxs(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: ["( ", count, " )"] })] }));

package/dist/Display/Display.DataTable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, View } from "react-native";
 const alignClass = {
     left: "text-left",

package/dist/Display/Display.Date.d.ts

@@ -1,4 +1,4 @@
-import { typographyVariants } from "../theme/typography";
+import { typographyVariants } from "../theme/typography.js";
 import { type StyleProp, type TextStyle } from "react-native";
 type DateFormat = "short" | "long" | "numeric";
 /**

package/dist/Display/Display.Date.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-import { formatDate, formatDateWithDefaultTimezone } from "../utils/date";
+import Icon from "./Display.Icon.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { formatDate, formatDateWithDefaultTimezone } from "../utils/date.js";
 import { View } from "react-native";
 function relativeTime(value) {
     const then = new Date(value).getTime();