@sincpro/mobile-ui 0.6.0 → 0.7.0

package/dist/Dialog/Confirmation.context.js

@@ -56,12 +56,7 @@ export function ConfirmationProvider({ children }) {
 export function useConfirmationContext() {
     const context = useContext(ConfirmationContext);
     if (!context) {
-        // Return no-op functions during initial mount to avoid timing issues
-        console.warn("useConfirmationContext called before ConfirmationProvider mounted");
-        return {
-            show: () => { },
-            hide: () => { },
-        };
+        return { show: () => { }, hide: () => { } };
     }
     return context;
 }

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

@@ -1,15 +1,11 @@
+import { type SpinnerVariant } from "../Feedback/Feedback.Spinner";
 import type React from "react";
 interface LoadingStateProps {
     message?: string;
     size?: "small" | "large";
+    variant?: SpinnerVariant;
     style?: object;
     className?: string;
 }
-/**
- * Full-screen centered loading state. Thin layout convenience over `Spinner` (the atom):
- * `Spinner` is the inline indicator (ActivityIndicator + optional text); `LoadingState`
- * is `Spinner` centered with `flex-1` for an empty screen/section. Use `Spinner` directly
- * when you need an inline/footer indicator (e.g. pagination), `LoadingState` for a blank view.
- */
-declare function LoadingState({ message, size, style, className, }: LoadingStateProps): React.JSX.Element;
+declare function LoadingState({ message, size, variant, style, className, }: LoadingStateProps): React.JSX.Element;
 export default LoadingState;

package/dist/Feedback/Feedback.Loading.js

@@ -2,13 +2,7 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import Spinner from "../Feedback/Feedback.Spinner";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
-/**
- * Full-screen centered loading state. Thin layout convenience over `Spinner` (the atom):
- * `Spinner` is the inline indicator (ActivityIndicator + optional text); `LoadingState`
- * is `Spinner` centered with `flex-1` for an empty screen/section. Use `Spinner` directly
- * when you need an inline/footer indicator (e.g. pagination), `LoadingState` for a blank view.
- */
-function LoadingState({ message = "Cargando…", size = "small", 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 }) }));
+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 }) }));
 }
 export default LoadingState;

package/dist/Feedback/Feedback.Spinner.d.ts

@@ -1,6 +1,9 @@
 import type React from "react";
 import { type ViewStyle } from "react-native";
+export type SpinnerVariant = "spinner" | "dots" | "ripple";
 export interface SpinnerProps {
+    /** Visual style of the loading indicator. Defaults to `"spinner"`. */
+    variant?: SpinnerVariant;
     size?: "small" | "large";
     color?: string;
     text?: string;

package/dist/Feedback/Feedback.Spinner.js

@@ -2,8 +2,58 @@ 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 { useEffect } from "react";
 import { ActivityIndicator, View } from "react-native";
-const Spinner = ({ size = "large", color = theme.primary, text, style, className, }) => {
-    return (_jsxs(View, { className: cn("items-center justify-center", className), style: style, children: [_jsx(ActivityIndicator, { color: color, size: size }), text && (_jsx(Typography.Text, { className: "mt-2.5 text-base", variant: "body", children: text }))] }));
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming, } from "react-native-reanimated";
+function DotsLoader({ color, size }) {
+    const dotSize = size === "large" ? 11 : 8;
+    const bounce = size === "large" ? 13 : 9;
+    const dot = {
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        backgroundColor: color,
+    };
+    const y1 = useSharedValue(0);
+    const y2 = useSharedValue(0);
+    const y3 = useSharedValue(0);
+    useEffect(() => {
+        const seq = withRepeat(withSequence(withTiming(-bounce, { duration: 280, easing: Easing.out(Easing.quad) }), withTiming(0, { duration: 280, easing: Easing.in(Easing.quad) }), withTiming(0, { duration: 200 })), -1, false);
+        y1.value = withDelay(0, seq);
+        y2.value = withDelay(160, seq);
+        y3.value = withDelay(320, seq);
+    }, []);
+    const s1 = useAnimatedStyle(() => ({ transform: [{ translateY: y1.value }] }));
+    const s2 = useAnimatedStyle(() => ({ transform: [{ translateY: y2.value }] }));
+    const s3 = useAnimatedStyle(() => ({ transform: [{ translateY: y3.value }] }));
+    return (_jsxs(View, { style: { flexDirection: "row", gap: 10, alignItems: "center" }, children: [_jsx(Animated.View, { style: [dot, s1] }), _jsx(Animated.View, { style: [dot, s2] }), _jsx(Animated.View, { style: [dot, s3] })] }));
+}
+function RippleLoader({ color, size }) {
+    const base = size === "large" ? 48 : 32;
+    const scale = useSharedValue(0.2);
+    const opacity = useSharedValue(0.85);
+    useEffect(() => {
+        scale.value = withRepeat(withTiming(2.6, { duration: 1400, easing: Easing.out(Easing.quad) }), -1, false);
+        opacity.value = withRepeat(withTiming(0, { duration: 1400, easing: Easing.in(Easing.quad) }), -1, false);
+    }, []);
+    const animStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+        opacity: opacity.value,
+    }));
+    return (_jsx(View, { style: { width: base, height: base, alignItems: "center", justifyContent: "center" }, children: _jsx(Animated.View, { style: [
+                {
+                    width: base,
+                    height: base,
+                    borderRadius: base / 2,
+                    borderWidth: 2.5,
+                    borderColor: color,
+                    position: "absolute",
+                },
+                animStyle,
+            ] }) }));
+}
+const Spinner = ({ variant = "spinner", size = "large", color = theme.primary, text, style, className, }) => {
+    const indicator = variant === "dots" ? (_jsx(DotsLoader, { color: color, size: size })) : variant === "ripple" ? (_jsx(RippleLoader, { color: color, size: size })) : (_jsx(ActivityIndicator, { color: color, size: size }));
+    return (_jsxs(View, { className: cn("items-center justify-center", className), style: style, children: [indicator, text && (_jsx(Typography.Text, { className: "mt-2.5 text-base", variant: "body", children: text }))] }));
 };
 export default Spinner;

package/dist/Feedback/index.d.ts

@@ -1,5 +1,4 @@
 import Banner from "../Feedback/Feedback.Banner";
-import DomainSplashScreen from "../Feedback/Feedback.DomainSplashScreen";
 import Empty from "../Feedback/Feedback.Empty";
 import EmptyState from "../Feedback/Feedback.EmptyState";
 import Error from "../Feedback/Feedback.Error";
@@ -23,6 +22,5 @@ export declare const Feedback: {
     EmptyState: typeof EmptyState;
     Error: typeof Error;
     SplashScreen: typeof SplashScreen;
-    DomainSplashScreen: typeof DomainSplashScreen;
 };
 export default Feedback;

package/dist/Feedback/index.js

@@ -1,5 +1,4 @@
 import Banner from "../Feedback/Feedback.Banner";
-import DomainSplashScreen from "../Feedback/Feedback.DomainSplashScreen";
 import Empty from "../Feedback/Feedback.Empty";
 import EmptyState from "../Feedback/Feedback.EmptyState";
 import Error from "../Feedback/Feedback.Error";
@@ -24,6 +23,5 @@ export const Feedback = {
     EmptyState,
     Error,
     SplashScreen,
-    DomainSplashScreen,
 };
 export default Feedback;

package/dist/Form/Form.PasswordInput.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Ionicons } from "@expo/vector-icons";
+import { Display } from "../Display";
 import InputField from "../Form/Form.InputField";
+import { useTheme } from "../theme";
 import { useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 const PasswordField = ({ label, error, inputProps }) => {
+    const theme = useTheme();
     const [showPassword, setShowPassword] = useState(false);
     return (_jsxs(View, { className: "mb-4 relative", children: [_jsx(InputField, { error: error, inputProps: {
                     ...inputProps,
                     secureTextEntry: !showPassword,
                     autoComplete: "off",
                     importantForAutofill: "no",
-                }, label: label }), _jsx(TouchableOpacity, { className: "absolute right-3 bottom-[25px]", onPress: () => setShowPassword(!showPassword), children: _jsx(Ionicons, { className: "text-text-primary", name: showPassword ? "eye-off-outline" : "eye-outline", size: 24 }) })] }));
+                }, label: label }), _jsx(TouchableOpacity, { className: "absolute right-3 bottom-[25px]", hitSlop: 8, onPress: () => setShowPassword(!showPassword), children: _jsx(Display.Icon, { color: theme.text.primary, name: showPassword ? "eye-off-outline" : "eye-outline", size: 22, type: "ionicons" }) })] }));
 };
 export default PasswordField;

package/dist/layouts/AuthContainer.d.ts

@@ -1,9 +1,12 @@
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
 import { ReactNode } from "react";
 interface AuthContainerProps {
     header: ReactNode;
     children: ReactNode;
     onBackPress?: () => void;
     className?: string;
+    /** Gradient + pattern surface for the header area. Defaults to `night-green` preset. */
+    background?: AppBarBackground;
 }
-declare function AuthContainer({ header, children, onBackPress, className }: AuthContainerProps): import("react").JSX.Element;
+declare function AuthContainer({ header, children, onBackPress, background, className, }: AuthContainerProps): import("react").JSX.Element;
 export default AuthContainer;

package/dist/layouts/AuthContainer.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import GradientSurface from "../Display/Display.GradientSurface";
-import { theme } from "../theme";
+import { Pattern } from "../Display/Display.Pattern";
+import { useTheme } from "../theme";
 import { cn } from "../theme/tw";
-import { Dimensions, Keyboard, TouchableOpacity, TouchableWithoutFeedback, View, } from "react-native";
+import { Keyboard, TouchableOpacity, TouchableWithoutFeedback, useWindowDimensions, View, } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { SafeAreaView } from "react-native-safe-area-context";
-function AuthContainer({ header, children, onBackPress, className }) {
-    const screenHeight = Dimensions.get("window").height;
-    return (_jsx(GradientSurface, { className: cn("flex-1", className), preset: "night-green", radius: "none", style: { flex: 1 }, children: _jsx(SafeAreaView, { className: "flex-1", edges: ["top"], children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: screenHeight * 0.3 }, children: [onBackPress && (_jsx(TouchableOpacity, { className: "absolute top-4 left-4 p-2 z-[1]", onPress: onBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "arrow-back", size: 24, type: "ionicons" }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", style: { minHeight: screenHeight * 0.7 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: _jsx(View, { className: "p-4", children: children }) }) })] }) }) }));
+function AuthContainer({ header, children, onBackPress, background, className, }) {
+    const { height: screenHeight } = useWindowDimensions();
+    const theme = useTheme();
+    return (_jsxs(GradientSurface, { className: cn("flex-1", className), colors: background?.colors, end: background?.end ?? (background?.colors ? { x: 0, y: 1 } : undefined), preset: background?.surface ?? "night-green", radius: "none", start: background?.start ?? (background?.colors ? { x: 0, y: 0 } : undefined), style: { flex: 1 }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsx(SafeAreaView, { className: "flex-1", edges: ["top"], children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: screenHeight * 0.3 }, children: [onBackPress && (_jsx(TouchableOpacity, { className: "absolute top-4 left-4 p-2 z-[1]", onPress: onBackPress, children: _jsx(Display.Icon, { color: background?.textColor ?? theme.text.inverse, name: "arrow-back", size: 24, type: "ionicons" }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", style: { minHeight: screenHeight * 0.7 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: _jsx(View, { className: "p-4", children: children }) }) })] }) })] }));
 }
 export default AuthContainer;

package/dist/views/AppSplashView.d.ts

@@ -0,0 +1,18 @@
+import { type SpinnerVariant } from "../Feedback/Feedback.Spinner";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+import type { ReactNode } from "react";
+import { type ImageSourcePropType, type ViewStyle } from "react-native";
+export interface AppSplashViewProps {
+    /** Gradient + pattern background. Defaults to `night-green` preset. */
+    background?: AppBarBackground;
+    /** App logo shown centered above the loading indicator. */
+    logo?: ImageSourcePropType;
+    /** Built-in loading animation variant. Ignored when `loader` is provided. Defaults to `"dots"`. */
+    loadingVariant?: SpinnerVariant;
+    /** Fully custom loading element. Takes precedence over `loadingVariant`. */
+    loader?: ReactNode;
+    /** Override the outer container style. */
+    style?: ViewStyle;
+}
+export declare function AppSplashView({ background, logo, loadingVariant, loader, style, }: AppSplashViewProps): import("react").JSX.Element;
+export default AppSplashView;

package/dist/views/AppSplashView.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import GradientSurface from "../Display/Display.GradientSurface";
+import { Pattern } from "../Display/Display.Pattern";
+import Spinner from "../Feedback/Feedback.Spinner";
+import { Image, View } from "react-native";
+export function AppSplashView({ background, logo, loadingVariant = "dots", loader, style, }) {
+    return (_jsxs(GradientSurface, { className: "flex-1", colors: background?.colors, end: background?.end, padding: "none", preset: background?.surface ?? "night-green", radius: "none", start: background?.start, style: { flex: 1, ...style }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsxs(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: [logo ? (_jsx(Image, { source: logo, style: { width: 140, height: 140, resizeMode: "contain", marginBottom: 40 } })) : null, loader ?? (_jsx(Spinner, { color: "rgba(255,255,255,0.9)", size: "large", variant: loadingVariant }))] })] }));
+}
+export default AppSplashView;

package/dist/views/AuthFormView.d.ts

@@ -1,3 +1,4 @@
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
 import { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface AuthFormProps {
@@ -6,6 +7,7 @@ interface AuthFormProps {
     logoSource?: ImageSourcePropType;
     onBack?: () => void;
     FormNode: ReactNode;
+    background?: AppBarBackground;
 }
-declare function AuthFormView({ title, description, logoSource, onBack, FormNode }: AuthFormProps): import("react").JSX.Element;
+declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, }: AuthFormProps): import("react").JSX.Element;
 export default AuthFormView;

package/dist/views/AuthFormView.js

@@ -5,7 +5,7 @@ import { Typography } from "../Typography";
 import { View } from "react-native";
 const Logo = Display.Logo;
 const Text = Typography.Text;
-function AuthFormView({ title, description, logoSource, onBack, FormNode }) {
+function AuthFormView({ title, description, logoSource, onBack, FormNode, background, }) {
     const renderTitle = () => {
         if (!title)
             return null;
@@ -16,6 +16,6 @@ function AuthFormView({ title, description, logoSource, onBack, FormNode }) {
             return null;
         return _jsx(Text, { variant: "body", children: description });
     };
-    return (_jsx(AuthContainer, { header: _jsx(Logo, { size: "large", source: logoSource }), onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
+    return (_jsx(AuthContainer, { background: background, header: _jsx(Logo, { size: "large", source: logoSource }), onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
 }
 export default AuthFormView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",