@sincpro/mobile-ui 0.7.2 → 1.1.0

package/dist/Feedback/ErrorBoundary.d.ts

@@ -13,6 +13,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
     handleRetry: () => void;
-    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 }
 export {};

package/dist/Feedback/ErrorBoundary.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import FeedbackError from "../Feedback/Feedback.Error";
+import FeedbackError from "./Feedback.Error.js";
 import { Component } from "react";
 export class ErrorBoundary extends Component {
     constructor(props) {

package/dist/Feedback/Feedback.Banner.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type { ReactNode } from "react";
 declare const banner: import("tailwind-variants").TVReturnType<{
     tone: {
@@ -46,7 +46,7 @@ declare const banner: import("tailwind-variants").TVReturnType<{
     root: string;
     title: string;
     message: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
         info: {
             root: string;
@@ -69,7 +69,7 @@ declare const banner: import("tailwind-variants").TVReturnType<{
     root: string;
     title: string;
     message: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface BannerProps extends VariantProps<typeof banner> {
     message: string;
     title?: string;

package/dist/Feedback/Feedback.Banner.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 { tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const banner = tv({
     slots: {
@@ -30,6 +30,6 @@ const iconByTone = {
 function Banner({ message, title, tone = "info", onClose, action, className, testID, }) {
     const styles = banner({ tone });
     const icon = iconByTone[tone ?? "info"];
-    return (_jsxs(View, { className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: icon.color, name: icon.name, size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
+    return (_jsxs(View, { accessibilityLiveRegion: tone === "danger" ? "assertive" : "polite", accessibilityRole: tone === "danger" ? "alert" : undefined, className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: icon.color, name: icon.name, size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
 }
 export default Banner;

package/dist/Feedback/Feedback.DomainSplashScreen.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import Pattern from "../Display/Display.Pattern";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import Pattern from "../Display/Display.Pattern.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useCallback, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
@@ -58,7 +59,7 @@ function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDu
     const splashStyle = useAnimatedStyle(() => ({
         opacity: opacityValue.value,
     }));
-    return (_jsxs(View, { style: styles.container, children: [children, _jsx(Animated.View, { pointerEvents: isLoading ? "auto" : "none", style: [StyleSheet.absoluteFill, splashStyle], children: _jsxs(GradientSurface, { preset: "night-green", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [_jsx(Pattern, { color: "#22E584", kind: "dots", opacity: 0.14, size: 26 }), _jsx(View, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-5", children: [_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 24, letterSpacing: 0.5 }, children: isComplete ? "¡Listo!" : `Cargando ${domainName}` }), !isComplete && (_jsx(View, { className: "w-full rounded-full h-1.5 overflow-hidden", style: { backgroundColor: "rgba(255,255,255,0.18)" }, children: _jsx(Animated.View, { className: "rounded-full h-1.5", style: [{ backgroundColor: "#22E584" }, progressBarStyle] }) })), isComplete && (_jsxs(Typography.Text, { style: { color: "rgba(255,255,255,0.8)", fontSize: 13 }, children: ["Ya puedes comenzar a usar ", domainName, "."] }))] }) })] }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [children, _jsx(Animated.View, { pointerEvents: isLoading ? "auto" : "none", style: [StyleSheet.absoluteFill, splashStyle], children: _jsxs(GradientSurface, { preset: "warm", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.14, size: 26 }), _jsx(View, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-5", children: [_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 24, letterSpacing: 0.5 }, children: isComplete ? "¡Listo!" : `Cargando ${domainName}` }), !isComplete && (_jsx(View, { className: "w-full rounded-full h-1.5 overflow-hidden", style: { backgroundColor: "rgba(255,255,255,0.18)" }, children: _jsx(Animated.View, { className: "rounded-full h-1.5", style: [{ backgroundColor: theme.primary }, progressBarStyle] }) })), isComplete && (_jsxs(Typography.Text, { style: { color: "rgba(255,255,255,0.8)", fontSize: 13 }, children: ["Ya puedes comenzar a usar ", domainName, "."] }))] }) })] }) })] }));
 }
 const styles = StyleSheet.create({
     container: {

package/dist/Feedback/Feedback.Empty.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function Empty({ handleGoHome, className }) {
     return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { name: "sad-cry", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Oops!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: "No se encontraron registros disponibles." })] }));

package/dist/Feedback/Feedback.EmptyState.d.ts

@@ -10,6 +10,7 @@ export interface EmptyStateProps {
     children?: ReactNode;
     className?: string;
     testID?: string;
+    accessibleSizing?: boolean;
 }
-declare function EmptyState({ title, description, icon, image, actionLabel, onAction, children, className, testID, }: EmptyStateProps): import("react").JSX.Element;
+declare function EmptyState({ title, description, icon, image, actionLabel, onAction, children, className, testID, accessibleSizing, }: EmptyStateProps): import("react").JSX.Element;
 export default EmptyState;

package/dist/Feedback/Feedback.EmptyState.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { BaseButton } from "../primitives/BaseButton";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import { BaseButton } from "../primitives/BaseButton.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { Image, View } from "react-native";
-function EmptyState({ title, description, icon = "file-tray-outline", image, actionLabel, onAction, children, className, testID, }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-8 gap-3", className), testID: testID, children: [image ? (_jsx(Image, { resizeMode: "contain", source: image, style: { width: 140, height: 140 } })) : (_jsx(View, { className: "w-20 h-20 rounded-full bg-bg-muted items-center justify-center", children: _jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 40 }) })), _jsx(Typography.Text, { align: "center", className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), description ? (_jsx(Typography.Text, { align: "center", className: "text-text-secondary", variant: "body", children: description })) : null, actionLabel && onAction ? (_jsx(View, { className: "mt-2", children: _jsx(BaseButton, { onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
+function EmptyState({ title, description, icon = "file-tray-outline", image, actionLabel, onAction, children, className, testID, accessibleSizing = false, }) {
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-8 gap-3", className), testID: testID, children: [image ? (_jsx(Image, { resizeMode: "contain", source: image, style: { width: 140, height: 140 } })) : (_jsx(View, { className: "w-20 h-20 rounded-full bg-bg-muted items-center justify-center", children: _jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 40 }) })), _jsx(Typography.Text, { accessibilityRole: "header", align: "center", className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), description ? (_jsx(Typography.Text, { align: "center", className: "text-text-secondary", variant: "body", children: description })) : null, actionLabel && onAction ? (_jsx(View, { className: "mt-2", children: _jsx(BaseButton, { accessibleSizing: accessibleSizing, onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
 }
 export default EmptyState;

package/dist/Feedback/Feedback.Error.d.ts

@@ -4,6 +4,8 @@ interface ErrorProps {
     onBack?: () => void;
     onHome?: () => void;
     className?: string;
+    accessibleSizing?: boolean;
+    testID?: string;
 }
-declare function Error({ message, onRetry, onBack, onHome, className }: ErrorProps): import("react").JSX.Element;
+declare function Error({ message, onRetry, onBack, onHome, className, accessibleSizing, testID, }: ErrorProps): import("react").JSX.Element;
 export default Error;

package/dist/Feedback/Feedback.Error.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Button from "../Form/Form.Button";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Button from "../primitives/BaseButton.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Error({ message, onRetry, onBack, onHome, className }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { color: "#ef4444", name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && _jsx(Button, { className: "w-full", onPress: onRetry, title: "Reintentar" }), onBack && (_jsx(Button, { className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
+function Error({ message, onRetry, onBack, onHome, className, accessibleSizing = false, testID, }) {
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), testID: testID, children: [_jsx(Icon, { color: theme.danger, name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { accessibilityRole: "header", className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && (_jsx(Button, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onRetry, title: "Reintentar" })), onBack && (_jsx(Button, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
 }
 export default Error;

package/dist/Feedback/Feedback.Loading.d.ts

@@ -1,4 +1,4 @@
-import { type SpinnerVariant } from "../Feedback/Feedback.Spinner";
+import { type SpinnerVariant } from "./Feedback.Spinner.js";
 import type React from "react";
 interface LoadingStateProps {
     message?: string;

package/dist/Feedback/Feedback.Loading.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Spinner from "../Feedback/Feedback.Spinner";
-import { cn } from "../theme/tw";
+import Spinner from "./Feedback.Spinner.js";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 function LoadingState({ message = "Cargando…", size = "small", variant = "spinner", style = {}, className, }) {
     return (_jsx(View, { className: cn("flex-1 justify-center items-center", className), style: style, children: _jsx(Spinner, { className: "mb-5", size: size, text: message, variant: variant }) }));

package/dist/Feedback/Feedback.PermissionCard.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { BaseButton } from "../primitives/BaseButton";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import { BaseButton } from "../primitives/BaseButton.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function PermissionCard({ title, description, granted = false, icon = "lock-closed", grantedLabel = "Permiso activo", deniedLabel = "Permiso inactivo", actionLabel = "Permitir", loading = false, onRequest, className, testID, }) {
     return (_jsx(View, { className: cn("bg-bg-card rounded-xl p-4 border border-border-light", className), style: theme.shadow.sm, testID: testID, children: _jsxs(View, { className: "flex-row items-start gap-3", children: [_jsx(Icon, { color: granted ? theme.success : theme.danger, name: granted ? "checkmark-circle" : icon, size: 32 }), _jsxs(View, { className: "flex-1 gap-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "body", children: title }), description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: description })) : null, _jsx(Typography.Text, { style: { color: granted ? theme.success : theme.danger }, variant: "bodySmall", children: granted ? grantedLabel : deniedLabel }), !granted && onRequest ? (_jsx(View, { className: "mt-2 self-start", children: _jsx(BaseButton, { loading: loading, onPress: onRequest, size: "small", title: actionLabel }) })) : null] })] }) }));

package/dist/Feedback/Feedback.Progress.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { motion } from "../tokens/motion";
+import { cn } from "../theme/tw.js";
+import { motion } from "../tokens/motion.js";
 import { useEffect, useRef } from "react";
 import { Animated, Easing, View } from "react-native";
 function clamp(n) {

package/dist/Feedback/Feedback.ProgressCircle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
+import { theme } from "../theme/index.js";
 import { View } from "react-native";
 import Svg, { Circle } from "react-native-svg";
 function clamp(n) {

package/dist/Feedback/Feedback.Skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { motion } from "../tokens/motion";
+import { cn } from "../theme/tw.js";
+import { motion } from "../tokens/motion.js";
 import { useEffect, useRef } from "react";
 import { Animated, Easing } from "react-native";
 function Skeleton({ width = "100%", height = 16, radius = 8, circle = false, className, style, }) {

package/dist/Feedback/Feedback.Spinner.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useEffect } from "react";
 import { ActivityIndicator, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming, } from "react-native-reanimated";

package/dist/Feedback/Feedback.Splash.d.ts

@@ -13,5 +13,5 @@ interface SplashScreenProps {
     subtitle?: string;
     children?: ReactNode;
 }
-declare function Splash({ isReady, logo, minDuration, message, variant, title, subtitle, children, }: SplashScreenProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+declare function Splash({ isReady, logo, minDuration, message, variant, title, subtitle, children, }: SplashScreenProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 export default Splash;

package/dist/Feedback/Feedback.Splash.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import Pattern from "../Display/Display.Pattern";
-import Loading from "../Feedback/Feedback.Loading";
-import GradientContainer from "../layouts/GradientContainer";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import Pattern from "../Display/Display.Pattern.js";
+import Loading from "./Feedback.Loading.js";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, Image, View } from "react-native";
 function renderLogo(logo) {
@@ -13,7 +14,7 @@ function renderLogo(logo) {
     return _jsx(Image, { className: "w-[250px] h-[200px] mb-12", resizeMode: "contain", source: logo });
 }
 function HeroSplash({ logo, message, title, subtitle, }) {
-    return (_jsxs(GradientSurface, { className: "flex-1 items-center justify-center", preset: "night-green", radius: "none", children: [_jsx(Pattern, { color: "#22E584", kind: "dots", opacity: 0.16, size: 26 }), _jsxs(View, { className: "items-center", children: [logo ? (_jsx(Image, { className: "w-28 h-28 mb-7", resizeMode: "contain", source: logo, style: { shadowColor: "#22E584", shadowOpacity: 0.7, shadowRadius: 28 } })) : null, title ? (_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 28, letterSpacing: 1 }, children: title })) : null, subtitle ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.6)", fontSize: 13, marginTop: 6 }, children: subtitle })) : null, _jsx(View, { className: "mt-10", children: _jsx(ActivityIndicator, { accessibilityLabel: message, color: "#22E584", size: "small" }) })] })] }));
+    return (_jsxs(GradientSurface, { className: "flex-1 items-center justify-center", preset: "warm", radius: "none", children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.16, size: 26 }), _jsxs(View, { className: "items-center", children: [logo ? (_jsx(Image, { className: "w-28 h-28 mb-7", resizeMode: "contain", source: logo, style: { shadowColor: theme.primary, shadowOpacity: 0.7, shadowRadius: 28 } })) : null, title ? (_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 28, letterSpacing: 1 }, children: title })) : null, subtitle ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.6)", fontSize: 13, marginTop: 6 }, children: subtitle })) : null, _jsx(View, { className: "mt-10", children: _jsx(ActivityIndicator, { accessibilityLabel: message, color: theme.primary, size: "small" }) })] })] }));
 }
 function Splash({ isReady, logo, minDuration = 800, message = "Inicializando...", variant = "default", title, subtitle, children, }) {
     const [showContent, setShowContent] = useState(false);

package/dist/Feedback/Toast.context.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 { tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
 import { ActivityIndicator, View } from "react-native";
 import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from "react-native-reanimated";
@@ -32,10 +32,10 @@ function ToastItem({ entry, onHide, position, }) {
     const exiting = position === "top" ? FadeOutUp : FadeOutDown;
     const resolvedDuration = entry.duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
     const showClose = entry.dismissible ?? resolvedDuration === 0;
-    return (_jsxs(Animated.View, { accessibilityLiveRegion: "polite", accessible: true, className: styles.root(), entering: entering.duration(220), exiting: exiting.duration(180), children: [variant === "loading" ? (_jsx(ActivityIndicator, { color: theme.primary, size: "small" })) : (_jsx(Icon, { color: iconByVariant[variant].color, name: iconByVariant[variant].name, size: 22 })), _jsxs(View, { className: "flex-1", children: [entry.title ? (_jsx(Typography.Text, { className: styles.title(), children: entry.title })) : null, _jsx(Typography.Text, { className: styles.message(), children: entry.message })] }), entry.action ? (_jsx(Pressable, { accessibilityLabel: entry.action.label, onPress: () => {
+    return (_jsxs(Animated.View, { accessibilityLiveRegion: "polite", accessible: true, className: styles.root(), entering: entering.duration(220), exiting: exiting.duration(180), children: [variant === "loading" ? (_jsx(ActivityIndicator, { color: theme.text.accent, size: "small" })) : (_jsx(Icon, { color: iconByVariant[variant].color, name: iconByVariant[variant].name, size: 22 })), _jsxs(View, { className: "flex-1", children: [entry.title ? (_jsx(Typography.Text, { className: styles.title(), children: entry.title })) : null, _jsx(Typography.Text, { className: styles.message(), children: entry.message })] }), entry.action ? (_jsx(Pressable, { accessibilityLabel: entry.action.label, onPress: () => {
                     entry.action?.onPress();
                     onHide(entry.id);
-                }, children: _jsx(Typography.Text, { className: "text-primary text-sm font-semibold", children: entry.action.label }) })) : null, showClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: () => onHide(entry.id), children: _jsx(Icon, { color: theme.text.tertiary, name: "close", size: 18 }) })) : null] }));
+                }, children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", children: entry.action.label }) })) : null, showClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: () => onHide(entry.id), children: _jsx(Icon, { color: theme.text.tertiary, name: "close", size: 18 }) })) : null] }));
 }
 export function ToastProvider({ children, position = "bottom", }) {
     const insets = useSafeAreaInsets();

package/dist/Feedback/index.d.ts

@@ -1,18 +1,18 @@
-import Banner from "../Feedback/Feedback.Banner";
-import Empty from "../Feedback/Feedback.Empty";
-import EmptyState from "../Feedback/Feedback.EmptyState";
-import Error from "../Feedback/Feedback.Error";
-import Loading from "../Feedback/Feedback.Loading";
-import PermissionCard from "../Feedback/Feedback.PermissionCard";
-import Progress from "../Feedback/Feedback.Progress";
-import ProgressCircle from "../Feedback/Feedback.ProgressCircle";
-import Skeleton from "../Feedback/Feedback.Skeleton";
-import SplashScreen from "../Feedback/Feedback.Splash";
-export { ErrorBoundary } from "../Feedback/ErrorBoundary";
-export { type ToastAction, type ToastContextValue, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastVariant, useToast, } from "../Feedback/Toast.context";
+import Banner from "./Feedback.Banner.js";
+import Empty from "./Feedback.Empty.js";
+import EmptyState from "./Feedback.EmptyState.js";
+import Error from "./Feedback.Error.js";
+import Loading from "./Feedback.Loading.js";
+import PermissionCard from "./Feedback.PermissionCard.js";
+import Progress from "./Feedback.Progress.js";
+import ProgressCircle from "./Feedback.ProgressCircle.js";
+import Skeleton from "./Feedback.Skeleton.js";
+import SplashScreen from "./Feedback.Splash.js";
+export { ErrorBoundary } from "./ErrorBoundary.js";
+export { type ToastAction, type ToastContextValue, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastVariant, useToast, } from "./Toast.context.js";
 export declare const Feedback: {
     Loading: typeof Loading;
-    Spinner: import("react").FC<import("../Feedback/Feedback.Spinner").SpinnerProps>;
+    Spinner: import("react").FC<import("./Feedback.Spinner.js").SpinnerProps>;
     Skeleton: typeof Skeleton;
     Progress: typeof Progress;
     ProgressCircle: typeof ProgressCircle;

package/dist/Feedback/index.js

@@ -1,16 +1,16 @@
-import Banner from "../Feedback/Feedback.Banner";
-import Empty from "../Feedback/Feedback.Empty";
-import EmptyState from "../Feedback/Feedback.EmptyState";
-import Error from "../Feedback/Feedback.Error";
-import Loading from "../Feedback/Feedback.Loading";
-import PermissionCard from "../Feedback/Feedback.PermissionCard";
-import Progress from "../Feedback/Feedback.Progress";
-import ProgressCircle from "../Feedback/Feedback.ProgressCircle";
-import Skeleton from "../Feedback/Feedback.Skeleton";
-import Spinner from "../Feedback/Feedback.Spinner";
-import SplashScreen from "../Feedback/Feedback.Splash";
-export { ErrorBoundary } from "../Feedback/ErrorBoundary";
-export { ToastProvider, useToast, } from "../Feedback/Toast.context";
+import Banner from "./Feedback.Banner.js";
+import Empty from "./Feedback.Empty.js";
+import EmptyState from "./Feedback.EmptyState.js";
+import Error from "./Feedback.Error.js";
+import Loading from "./Feedback.Loading.js";
+import PermissionCard from "./Feedback.PermissionCard.js";
+import Progress from "./Feedback.Progress.js";
+import ProgressCircle from "./Feedback.ProgressCircle.js";
+import Skeleton from "./Feedback.Skeleton.js";
+import Spinner from "./Feedback.Spinner.js";
+import SplashScreen from "./Feedback.Splash.js";
+export { ErrorBoundary } from "./ErrorBoundary.js";
+export { ToastProvider, useToast, } from "./Toast.context.js";
 export const Feedback = {
     Loading,
     Spinner,

package/dist/Form/Form.Button.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Use `Actions.Button` from `@sincpro/mobile-ui/Actions` instead. */
-export type { ButtonIconProps, ButtonProps } from "../Actions/Actions.Button";
-export { default as ButtonWithIcon, default, } from "../Actions/Actions.Button";
+export type { ButtonIconProps, ButtonProps } from "../Actions/Actions.Button.js";
+export { default as ButtonWithIcon, default, } from "../Actions/Actions.Button.js";

package/dist/Form/Form.Button.js

@@ -1 +1 @@
-export { default as ButtonWithIcon, default, } from "../Actions/Actions.Button";
+export { default as ButtonWithIcon, default, } from "../Actions/Actions.Button.js";

package/dist/Form/Form.Checkbox.d.ts

@@ -7,7 +7,10 @@ interface RowCheckBoxProps {
     isChecked?: boolean;
     onCheck?: (isChecked: boolean) => void;
     disabled?: boolean;
+    accessibilityLabel?: string;
+    accessibleSizing?: boolean;
     className?: string;
+    testID?: string;
 }
-declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react").JSX.Element;
+declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, accessibilityLabel, accessibleSizing, className, testID, }: RowCheckBoxProps): import("react").JSX.Element;
 export default RowCheckBox;

package/dist/Form/Form.Checkbox.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { Checkbox } from "expo-checkbox";
 import { Pressable, View } from "react-native";
-function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, className, }) {
+function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, accessibilityLabel, accessibleSizing = false, className, testID, }) {
     const handlePress = () => {
         if (!disabled) {
             onCheck(!isChecked);
@@ -25,6 +25,6 @@ function RowCheckBox({ mainText, subText, rightText, rightComponent, leftCompone
         }
         return null;
     };
-    return (_jsxs(Pressable, { className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.accent, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? [mainText, subText, rightText].filter(Boolean).join(", "), accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, style: accessibleSizing ? { minHeight: 48, paddingVertical: 8 } : undefined, testID: testID, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.primary, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
 }
 export default RowCheckBox;

package/dist/Form/Form.ControlledCheckbox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Checkbox from "../Form/Form.Checkbox";
+import Checkbox from "./Form.Checkbox.js";
 import { Controller } from "react-hook-form";
 function ControlledCheckbox({ control, name, label, subText, }) {
     return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, value } }) => (_jsx(Checkbox, { isChecked: value || false, mainText: label, onCheck: onChange, subText: subText })) }));

package/dist/Form/Form.ControlledInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Input from "../Form/Form.Input";
+import Input from "./Form.Input.js";
 import { Controller } from "react-hook-form";
 function ControlledInput({ control, name, label, placeholder, keyboardType, autoCapitalize, multiline, numberOfLines, rules, error, }) {
     return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, onBlur, value } }) => (_jsx(Input, { autoCapitalize: autoCapitalize, error: error, keyboardType: keyboardType, label: label, multiline: multiline, numberOfLines: numberOfLines, onBlur: onBlur, onChangeText: onChange, placeholder: placeholder, value: value })), rules: rules }));

package/dist/Form/Form.ControlledMonetaryInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import MonetaryInput from "../Form/Form.MonetaryInput";
+import MonetaryInput from "./Form.MonetaryInput.js";
 import { Controller } from "react-hook-form";
 function ControlledMonetaryInput({ control, name, label, placeholder, currency = "CRC", rules, error, }) {
     return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, onBlur, value } }) => (_jsx(MonetaryInput, { amount: value, currencySymbol: currency, onChange: onChange, placeholder: placeholder })), rules: rules }));

package/dist/Form/Form.ControlledRadioButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import RadioButton from "../Form/Form.RadioButton";
+import RadioButton from "./Form.RadioButton.js";
 import { Controller } from "react-hook-form";
 function ControlledRadioButton({ control, name, label, value, }) {
     return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, value: selectedValue } }) => (_jsx(RadioButton, { label: label, onPress: () => onChange(value), selected: selectedValue === value })) }));

package/dist/Form/Form.DatePicker.d.ts

@@ -8,6 +8,7 @@ export interface DatePickerProps {
     minimumDate?: Date;
     maximumDate?: Date;
     disabled?: boolean;
+    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
 }
@@ -16,5 +17,5 @@ export interface DatePickerProps {
  * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
  * Subpath `Form/DatePicker`; **optional** peer dep.
  */
-declare function DatePicker({ value, onChange, mode, label, placeholder, format, minimumDate, maximumDate, disabled, className, testID, }: DatePickerProps): import("react").JSX.Element;
+declare function DatePicker({ value, onChange, mode, label, placeholder, format, minimumDate, maximumDate, disabled, accessibleSizing, className, testID, }: DatePickerProps): import("react").JSX.Element;
 export default DatePicker;

package/dist/Form/Form.DatePicker.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import DateTimePicker from "@react-native-community/datetimepicker";
-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 { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { Platform, View } from "react-native";
 function defaultFormat(value, mode) {
@@ -24,8 +24,9 @@ const iconByMode = {
  * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
  * Subpath `Form/DatePicker`; **optional** peer dep.
  */
-function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, className, testID, }) {
+function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, accessibleSizing = false, className, testID, }) {
     const [open, setOpen] = useState(false);
+    const theme = useTheme();
     const fmt = format ?? ((d) => defaultFormat(d, mode));
     const handleValueChange = (_event, date) => {
         if (Platform.OS === "android")
@@ -33,6 +34,6 @@ function DatePicker({ value, onChange, mode = "date", label, placeholder = "Sele
         if (date)
             onChange(date);
     };
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: { text: value ? fmt(value) : placeholder }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), style: accessibleSizing ? { minHeight: 48 } : undefined, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
 }
 export default DatePicker;

package/dist/Form/Form.Dropdown.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import { Display } from "../Display/index.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
 import { tv } from "tailwind-variants";
@@ -63,13 +63,13 @@ function DropdownButton({ title, options, variant = "secondary", size = "small",
     const styles = dropdown({ variant, size });
     const textColorClass = {
         primary: "text-text-on-primary",
-        outline: "text-primary",
-        secondary: "text-primary",
+        outline: "text-text-accent",
+        secondary: "text-text-accent",
     }[variant];
     const iconColor = {
         primary: theme.text.onPrimary,
-        outline: theme.primary,
-        secondary: theme.primary,
+        outline: theme.text.accent,
+        secondary: theme.text.accent,
     }[variant];
     const textVariant = {
         large: "body",

package/dist/Form/Form.FAB.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Use `Actions.FAB` from `@sincpro/mobile-ui/Actions` instead. */
-export type { FABProps } from "../Actions/Actions.FAB";
-export { default } from "../Actions/Actions.FAB";
+export type { FABProps } from "../Actions/Actions.FAB.js";
+export { default } from "../Actions/Actions.FAB.js";

package/dist/Form/Form.FAB.js

@@ -1 +1 @@
-export { default } from "../Actions/Actions.FAB";
+export { default } from "../Actions/Actions.FAB.js";

package/dist/Form/Form.FilterButton.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Use `Actions.FilterButton` from `@sincpro/mobile-ui/Actions` instead. */
-export type { FilterButtonProps } from "../Actions/Actions.FilterButton";
-export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton";
+export type { FilterButtonGroupProps, FilterButtonProps, } from "../Actions/Actions.FilterButton.js";
+export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";

package/dist/Form/Form.FilterButton.js

@@ -1 +1 @@
-export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton";
+export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";

package/dist/Form/Form.FractionalQuantityInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Dialog } from "../Dialog";
-import { Display } from "../Display";
-import { Typography } from "../Typography";
-import { normalizeQuantity, roundTo } from "../utils/quantity";
+import { Dialog } from "../Dialog/index.js";
+import { Display } from "../Display/index.js";
+import { Typography } from "../Typography/index.js";
+import { normalizeQuantity, roundTo } from "../utils/quantity.js";
 import { useCallback, useMemo, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";