@sincpro/mobile-ui 0.7.1 → 1.0.1

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.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 { 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] }));

package/dist/Feedback/Feedback.Error.js

@@ -1,8 +1,8 @@
 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 "../Form/Form.Button.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" }))] })] }));

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,13 +1,14 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { motion } from "../tokens/motion";
-import { useEffect, useState } from "react";
+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) {
     return Math.max(0, Math.min(1, n));
 }
 function Progress({ value = 0, indeterminate = false, height = 6, className, testID, }) {
-    const [translate] = useState(() => new Animated.Value(0));
+    // eslint-disable-next-line react-hooks/refs
+    const translate = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         if (!indeterminate)
             return;
@@ -24,6 +25,7 @@ function Progress({ value = 0, indeterminate = false, height = 6, className, tes
                 width: "40%",
                 transform: [
                     {
+                        // eslint-disable-next-line react-hooks/refs
                         translateX: translate.interpolate({
                             inputRange: [0, 1],
                             outputRange: ["-40%", "250%"],

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,10 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { motion } from "../tokens/motion";
-import { useEffect, useState } from "react";
+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, }) {
-    const [opacity] = useState(() => new Animated.Value(0.5));
+    // eslint-disable-next-line react-hooks/refs
+    const opacity = useRef(new Animated.Value(0.5)).current;
     useEffect(() => {
         const pulse = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {

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

@@ -1,7 +1,7 @@
 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, }) {
@@ -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, { 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.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.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 { theme } 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) {

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",
@@ -77,7 +77,7 @@ function DropdownButton({ title, options, variant = "secondary", size = "small",
         xs: "bodySmall",
         small: "bodySmall",
     }[size];
-    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.button(), onPress: () => setIsOpen(true), children: [_jsx(Typography.Text, { className: textColorClass, variant: textVariant, children: title }), _jsx(Display.Icon, { color: iconColor, name: "chevron-down", size: 16, type: "feather" })] }), _jsx(Modal, { animationType: "fade", transparent: true, visible: isOpen, children: _jsx(TouchableWithoutFeedback, { onPress: () => setIsOpen(false), children: _jsx(View, { className: styles.overlay(), children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: styles.dropdownContainer(), style: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.button(), onPress: () => setIsOpen(true), children: [_jsx(Typography.Text, { className: textColorClass, variant: textVariant, children: title }), _jsx(Display.Icon, { color: iconColor, name: "chevron-down", size: 16, type: "feather" })] }), _jsx(Modal, { animationType: "fade", presentationStyle: "overFullScreen", transparent: true, visible: isOpen, children: _jsx(TouchableWithoutFeedback, { onPress: () => setIsOpen(false), children: _jsx(View, { className: styles.overlay(), children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: styles.dropdownContainer(), style: {
                                     backgroundColor: theme.bg.popover,
                                     ...theme.shadow.lg,
                                 }, children: [_jsxs(View, { className: styles.header(), children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "bodyLarge", children: title }), _jsx(TouchableOpacity, { onPress: () => setIsOpen(false), children: _jsx(Display.Icon, { name: "x", size: 20, type: "feather" }) })] }), _jsx(View, { className: styles.optionsList(), children: options.map((option, index) => (_jsxs(View, { children: [_jsx(TouchableOpacity, { activeOpacity: 0.7, className: dropdown({ disabled: option.disabled }).option(), disabled: option.disabled, onPress: () => handleOptionPress(option), children: _jsx(Typography.Text, { className: option.disabled ? "text-text-disabled" : "text-text-primary", variant: "body", children: option.title }) }), index < options.length - 1 && _jsx(View, { className: styles.separator() })] }, option.id))) })] }) }) }) }) })] }));

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 { 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";

package/dist/Form/Form.IconButton.d.ts

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

package/dist/Form/Form.IconButton.js

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

package/dist/Form/Form.Input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import { theme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { TextInput, View } from "react-native";
 const inputContainer = tv({
@@ -33,6 +33,6 @@ function FormInput({ label, error, tooltip, style, multiline = false, numberOfLi
             return "focused";
         return "default";
     };
-    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { className: cn("px-3 py-2.5 text-sm min-h-[44px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, textAlignVertical: multiline ? "top" : "center", ...props }) }), hasError && (_jsx(Typography.Text, { className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
+    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { className: cn("px-3 py-2.5 text-sm min-h-[44px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
 }
 export default FormInput;

package/dist/Form/Form.InputField.d.ts

@@ -1,4 +1,4 @@
-import TextInputF from "../Form/Form.TextInput";
+import TextInputF from "./Form.TextInput.js";
 import React, { FC } from "react";
 import { TextInputProps } from "react-native";
 export interface InputFieldProps extends TextInputProps {

package/dist/Form/Form.InputField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import TextInputF from "../Form/Form.TextInput";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import TextInputF from "./Form.TextInput.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { View } from "react-native";
 const inputFieldBorder = tv({

package/dist/Form/Form.MonetaryInput.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
-import { parseToMonetaryNumber } from "../utils/monetary";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { parseToMonetaryNumber } from "../utils/monetary.js";
 import { useState } from "react";
 import { View } from "react-native";
 import CurrencyInput from "react-native-currency-input";
@@ -22,6 +23,6 @@ function MonetaryInput({ amount, onChange, currencySymbol = "₡", placeholder =
         setRaw(amount);
         onChange?.(parseToMonetaryNumber(amount));
     };
-    return (_jsxs(View, { className: "flex-row", children: [_jsx(View, { className: monetaryBox({ focused: isFocused, className: "w-10 h-10" }), children: _jsx(Typography.Text, { className: "text-xl", variant: "body", children: currencySymbol }) }), _jsx(View, { className: monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" }), children: _jsx(CurrencyInput, { delimiter: ".", keyboardType: "numeric", onBlur: () => setIsFocused(false), onChangeValue: handleChange, onFocus: () => setIsFocused(true), placeholder: placeholder, separator: ",", value: raw }) })] }));
+    return (_jsxs(View, { className: "flex-row", children: [_jsx(View, { className: monetaryBox({ focused: isFocused, className: "w-10 h-10" }), children: _jsx(Typography.Text, { className: "text-xl", variant: "body", children: currencySymbol }) }), _jsx(View, { className: monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" }), children: _jsx(CurrencyInput, { delimiter: ".", keyboardType: "numeric", onBlur: () => setIsFocused(false), onChangeValue: handleChange, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, separator: ",", underlineColorAndroid: "transparent", value: raw }) })] }));
 }
 export default MonetaryInput;

package/dist/Form/Form.PasswordInput.d.ts

@@ -1,4 +1,4 @@
-import InputField from "../Form/Form.InputField";
+import InputField from "./Form.InputField.js";
 import React from "react";
 export interface PasswordFieldProps {
     label: string;

package/dist/Form/Form.PasswordInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import InputField from "../Form/Form.InputField";
-import { useTheme } from "../theme";
+import { Display } from "../Display/index.js";
+import InputField from "./Form.InputField.js";
+import { useTheme } from "../theme/index.js";
 import { useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 const PasswordField = ({ label, error, inputProps }) => {

package/dist/Form/Form.PinInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+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 { useRef } from "react";
 import { TextInput, View } from "react-native";
 function PinInput({ value, onChange, length = 6, secure = false, autoFocus = false, onComplete, className, testID, }) {
@@ -18,6 +18,6 @@ function PinInput({ value, onChange, length = 6, secure = false, autoFocus = fal
                 const filled = index < value.length;
                 const active = index === value.length;
                 return (_jsx(View, { className: "flex-1 aspect-square max-w-[52px] rounded-lg border bg-bg-card items-center justify-center", style: { borderColor: active ? theme.border.focus : theme.border.default }, children: _jsx(Typography.Text, { className: "text-text-primary", variant: "h4", children: filled ? (secure ? "•" : chars[index]) : "" }) }, index));
-            }), _jsx(TextInput, { autoFocus: autoFocus, caretHidden: true, keyboardType: "number-pad", maxLength: length, onChangeText: handleChange, ref: inputRef, style: { position: "absolute", opacity: 0, width: 1, height: 1 }, textContentType: "oneTimeCode", value: value })] }));
+            }), _jsx(TextInput, { autoFocus: autoFocus, caretHidden: true, keyboardType: "number-pad", maxLength: length, onChangeText: handleChange, ref: inputRef, selectionColor: theme.primary, style: { position: "absolute", opacity: 0, width: 1, height: 1 }, textContentType: "oneTimeCode", underlineColorAndroid: "transparent", value: value })] }));
 }
 export default PinInput;

package/dist/Form/Form.QuantitySelector.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { Typography } from "../Typography";
+import { Display } from "../Display/index.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";
 const quantitySelector = tv({
     slots: {
-        container: "flex-row items-center self-start border border-accent rounded-full px-1",
+        container: "flex-row items-center self-start border border-primary rounded-full px-1",
         button: "w-9 h-9 rounded-full justify-center items-center",
         valueContainer: "min-w-[40px] items-center px-3",
     },