@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/Feedback/Feedback.PermissionCard.d.ts

@@ -0,0 +1,15 @@
+export interface PermissionCardProps {
+    title: string;
+    description?: string;
+    granted?: boolean;
+    icon?: string;
+    grantedLabel?: string;
+    deniedLabel?: string;
+    actionLabel?: string;
+    loading?: boolean;
+    onRequest?: () => void;
+    className?: string;
+    testID?: string;
+}
+declare function PermissionCard({ title, description, granted, icon, grantedLabel, deniedLabel, actionLabel, loading, onRequest, className, testID, }: PermissionCardProps): import("react").JSX.Element;
+export default PermissionCard;

package/dist/Feedback/Feedback.PermissionCard.js

@@ -0,0 +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 { 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] })] }) }));
+}
+export default PermissionCard;

package/dist/Feedback/Feedback.Progress.d.ts

@@ -0,0 +1,9 @@
+export interface ProgressProps {
+    value?: number;
+    indeterminate?: boolean;
+    height?: number;
+    className?: string;
+    testID?: string;
+}
+declare function Progress({ value, indeterminate, height, className, testID, }: ProgressProps): import("react").JSX.Element;
+export default Progress;

package/dist/Feedback/Feedback.Progress.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { motion } from "../tokens/motion";
+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 = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (!indeterminate)
+            return;
+        const loop = Animated.loop(Animated.timing(translate, {
+            toValue: 1,
+            duration: motion.duration.slower,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+        }));
+        loop.start();
+        return () => loop.stop();
+    }, [indeterminate, translate]);
+    return (_jsx(View, { accessibilityRole: "progressbar", accessibilityValue: indeterminate ? undefined : { now: Math.round(clamp(value) * 100), min: 0, max: 100 }, className: cn("w-full overflow-hidden rounded-full bg-bg-muted", className), style: { height }, testID: testID, children: indeterminate ? (_jsx(Animated.View, { className: "h-full rounded-full bg-primary", style: {
+                width: "40%",
+                transform: [
+                    {
+                        translateX: translate.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: ["-40%", "250%"],
+                        }),
+                    },
+                ],
+            } })) : (_jsx(View, { className: "h-full rounded-full bg-primary", style: { width: `${clamp(value) * 100}%` } })) }));
+}
+export default Progress;

package/dist/Feedback/Feedback.ProgressCircle.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface ProgressCircleProps {
+    value?: number;
+    size?: number;
+    strokeWidth?: number;
+    color?: string;
+    trackColor?: string;
+    children?: ReactNode;
+    testID?: string;
+}
+declare function ProgressCircle({ value, size, strokeWidth, color, trackColor, children, testID, }: ProgressCircleProps): import("react").JSX.Element;
+export default ProgressCircle;

package/dist/Feedback/Feedback.ProgressCircle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { View } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+function clamp(n) {
+    return Math.max(0, Math.min(1, n));
+}
+function ProgressCircle({ value = 0, size = 64, strokeWidth = 6, color, trackColor, children, testID, }) {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - clamp(value));
+    const center = size / 2;
+    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityValue: { now: Math.round(clamp(value) * 100), min: 0, max: 100 }, style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, testID: testID, children: [_jsxs(Svg, { height: size, style: { position: "absolute" }, width: size, children: [_jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: trackColor ?? theme.bg.muted, strokeWidth: strokeWidth }), _jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: color ?? theme.primary, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: offset, strokeLinecap: "round", strokeWidth: strokeWidth, transform: `rotate(-90 ${center} ${center})` })] }), children] }));
+}
+export default ProgressCircle;

package/dist/Feedback/Feedback.Skeleton.d.ts

@@ -0,0 +1,11 @@
+import { type DimensionValue, type ViewStyle } from "react-native";
+export interface SkeletonProps {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    radius?: number;
+    circle?: boolean;
+    className?: string;
+    style?: ViewStyle;
+}
+declare function Skeleton({ width, height, radius, circle, className, style, }: SkeletonProps): import("react").JSX.Element;
+export default Skeleton;

package/dist/Feedback/Feedback.Skeleton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { motion } from "../tokens/motion";
+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 = useRef(new Animated.Value(0.5)).current;
+    useEffect(() => {
+        const pulse = Animated.loop(Animated.sequence([
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: motion.duration.slow,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+                toValue: 0.5,
+                duration: motion.duration.slow,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        pulse.start();
+        return () => pulse.stop();
+    }, [opacity]);
+    const resolvedRadius = circle && typeof height === "number" ? height / 2 : radius;
+    return (_jsx(Animated.View, { accessibilityElementsHidden: true, className: cn("bg-bg-muted", className), importantForAccessibility: "no-hide-descendants", style: [{ width, height, borderRadius: resolvedRadius }, style, { opacity }] }));
+}
+export default Skeleton;

package/dist/Feedback/Feedback.Spinner.js

@@ -1,8 +1,9 @@
 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 { ActivityIndicator, View } from "react-native";
-const Spinner = ({ size = "large", color = "#FF7B0A", text, style, className, }) => {
+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 }))] }));
 };
 export default Spinner;

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

@@ -5,7 +5,13 @@ interface SplashScreenProps {
     logo?: ImageSourcePropType;
     minDuration?: number;
     message?: string;
+    /** `default` keeps the legacy look; `hero` is the modern dark gradient + dotted texture. */
+    variant?: "default" | "hero";
+    /** Brand name shown under the logo on `hero`. */
+    title?: string;
+    /** Small caption under the title on `hero` (e.g. "gestión · v2.0"). */
+    subtitle?: string;
     children?: ReactNode;
 }
-declare function Splash({ isReady, logo, minDuration, message, children, }: SplashScreenProps): string | number | bigint | boolean | import("react/jsx-runtime").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 | 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;
 export default Splash;

package/dist/Feedback/Feedback.Splash.js

@@ -1,15 +1,21 @@
 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 { useEffect, useRef, useState } from "react";
-import { Image, View } from "react-native";
+import { ActivityIndicator, Image, View } from "react-native";
 function renderLogo(logo) {
     if (!logo) {
         return null;
     }
     return _jsx(Image, { className: "w-[250px] h-[200px] mb-12", resizeMode: "contain", source: logo });
 }
-function Splash({ isReady, logo, minDuration = 800, message = "Inicializando...", children, }) {
+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" }) })] })] }));
+}
+function Splash({ isReady, logo, minDuration = 800, message = "Inicializando...", variant = "default", title, subtitle, children, }) {
     const [showContent, setShowContent] = useState(false);
     const minDurationTimeoutRef = useRef(null);
     useEffect(() => {
@@ -30,6 +36,9 @@ function Splash({ isReady, logo, minDuration = 800, message = "Inicializando..."
         };
     }, [isReady, minDuration]);
     if (!showContent) {
+        if (variant === "hero") {
+            return _jsx(HeroSplash, { logo: logo, message: message, subtitle: subtitle, title: title });
+        }
         return (_jsx(GradientContainer, { className: "flex-1", children: _jsxs(View, { className: "flex-1 justify-center items-center", children: [renderLogo(logo), _jsx(Loading, { message: message, size: "large" })] }) }));
     }
     return children;

package/dist/Feedback/Toast.context.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+export type ToastVariant = "info" | "success" | "warning" | "danger" | "loading";
+export interface ToastAction {
+    label: string;
+    onPress: () => void;
+}
+export interface ToastOptions {
+    message: string;
+    title?: string;
+    variant?: ToastVariant;
+    duration?: number;
+    action?: ToastAction;
+    /** Stable id: calling show()/info()/… again with the same id updates the existing toast
+     *  (and resets its timer) instead of stacking a duplicate. */
+    id?: string;
+    /** Render a close (✕) button. Defaults to true for persistent toasts (duration 0 / loading),
+     *  false for auto-dismissing ones. */
+    dismissible?: boolean;
+}
+type MessageOrFn<T> = string | ((value: T) => string);
+export interface ToastPromiseMessages<T> {
+    loading: string;
+    success: MessageOrFn<T>;
+    error: MessageOrFn<unknown>;
+}
+export interface ToastContextValue {
+    show: (options: ToastOptions) => string;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    hide: (id: string) => void;
+    info: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    success: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    warning: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    danger: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    loading: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>) => Promise<T>;
+}
+export declare function ToastProvider({ children, position, }: {
+    children: ReactNode;
+    position?: "top" | "bottom";
+}): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};

package/dist/Feedback/Toast.context.js

@@ -0,0 +1,121 @@
+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 { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
+import { ActivityIndicator, View } from "react-native";
+import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+const ToastContext = createContext(null);
+const DEFAULT_DURATION = 3500;
+// iOS-style card: rounded, hairline border + soft shadow, neutral surface. The variant is
+// conveyed by the colored icon (no left-accent stripe — it doesn't read well on iOS).
+const toast = tv({
+    slots: {
+        root: "flex-row items-center gap-3 rounded-2xl px-4 py-3 bg-bg-card border border-border-light shadow-lg",
+        title: "text-sm font-semibold text-text-primary",
+        message: "text-sm text-text-secondary",
+    },
+});
+const iconByVariant = {
+    info: { name: "information-circle", color: theme.info },
+    success: { name: "checkmark-circle", color: theme.success },
+    warning: { name: "warning", color: theme.warning },
+    danger: { name: "close-circle", color: theme.danger },
+};
+function ToastItem({ entry, onHide, position, }) {
+    const variant = entry.variant ?? "info";
+    const styles = toast();
+    const entering = position === "top" ? FadeInDown : FadeInUp;
+    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: () => {
+                    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] }));
+}
+export function ToastProvider({ children, position = "bottom", }) {
+    const insets = useSafeAreaInsets();
+    const [toasts, setToasts] = useState([]);
+    const counter = useRef(0);
+    const timers = useRef({});
+    const clearTimer = useCallback((id) => {
+        const timer = timers.current[id];
+        if (timer) {
+            clearTimeout(timer);
+            delete timers.current[id];
+        }
+    }, []);
+    const hide = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+        clearTimer(id);
+    }, [clearTimer]);
+    const scheduleDismiss = useCallback((id, variant, duration) => {
+        clearTimer(id);
+        const resolved = duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
+        if (resolved > 0) {
+            timers.current[id] = setTimeout(() => hide(id), resolved);
+        }
+    }, [clearTimer, hide]);
+    const show = useCallback((options) => {
+        let id = options.id;
+        if (!id) {
+            counter.current += 1;
+            id = `toast-${counter.current}`;
+        }
+        const toastId = id;
+        setToasts((prev) => prev.some((t) => t.id === toastId)
+            ? prev.map((t) => (t.id === toastId ? { ...t, ...options, id: toastId } : t))
+            : [...prev, { ...options, id: toastId }]);
+        scheduleDismiss(toastId, options.variant, options.duration);
+        return toastId;
+    }, [scheduleDismiss]);
+    const update = useCallback((id, options) => {
+        setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, ...options } : t)));
+        scheduleDismiss(id, options.variant, options.duration);
+    }, [scheduleDismiss]);
+    const value = useMemo(() => {
+        const promise = (p, messages) => {
+            const id = show({ message: messages.loading, variant: "loading", duration: 0 });
+            return p.then((result) => {
+                const msg = messages.success;
+                update(id, {
+                    message: typeof msg === "function" ? msg(result) : msg,
+                    variant: "success",
+                    duration: DEFAULT_DURATION,
+                });
+                return result;
+            }, (err) => {
+                const msg = messages.error;
+                update(id, {
+                    message: typeof msg === "function" ? msg(err) : msg,
+                    variant: "danger",
+                    duration: DEFAULT_DURATION,
+                });
+                throw err;
+            });
+        };
+        return {
+            show,
+            update,
+            hide,
+            info: (message, options) => show({ ...options, message, variant: "info" }),
+            success: (message, options) => show({ ...options, message, variant: "success" }),
+            warning: (message, options) => show({ ...options, message, variant: "warning" }),
+            danger: (message, options) => show({ ...options, message, variant: "danger" }),
+            loading: (message, options) => show({ ...options, message, variant: "loading" }),
+            promise,
+        };
+    }, [show, update, hide]);
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(View, { className: "absolute left-0 right-0 px-4 gap-2 z-toast", pointerEvents: "box-none", style: position === "top" ? { top: insets.top + 12 } : { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide, position: position }, entry.id))) })] }));
+}
+export function useToast() {
+    const ctx = useContext(ToastContext);
+    if (!ctx) {
+        throw new Error("useToast debe usarse dentro de <ToastProvider>");
+    }
+    return ctx;
+}

package/dist/Feedback/index.d.ts

@@ -1,13 +1,28 @@
+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";
 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";
 export declare const Feedback: {
     Loading: typeof Loading;
     Spinner: import("react").FC<import("../Feedback/Feedback.Spinner").SpinnerProps>;
+    Skeleton: typeof Skeleton;
+    Progress: typeof Progress;
+    ProgressCircle: typeof ProgressCircle;
+    Banner: typeof Banner;
+    PermissionCard: typeof PermissionCard;
     Empty: typeof Empty;
+    EmptyState: typeof EmptyState;
     Error: typeof Error;
+    SplashScreen: typeof SplashScreen;
     DomainSplashScreen: typeof DomainSplashScreen;
 };
 export default Feedback;

package/dist/Feedback/index.js

@@ -1,14 +1,29 @@
+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";
 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";
 export const Feedback = {
     Loading,
     Spinner,
+    Skeleton,
+    Progress,
+    ProgressCircle,
+    Banner,
+    PermissionCard,
     Empty,
+    EmptyState,
     Error,
+    SplashScreen,
     DomainSplashScreen,
 };
 export default Feedback;

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

@@ -4,6 +4,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -20,10 +21,11 @@ declare const button: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", {
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -44,6 +46,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -60,11 +63,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
 declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -81,10 +85,11 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", {
+}, undefined, "rounded-[13px] items-center justify-center aspect-square", {
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -105,6 +110,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -121,7 +127,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", unknown, unknown, undefined>>;
+}, undefined, "rounded-[13px] items-center justify-center aspect-square", unknown, unknown, undefined>>;
 export interface ButtonProps extends VariantProps<typeof button> {
     title: string;
     onPress?: () => void;

package/dist/Form/Form.Button.js

@@ -12,12 +12,13 @@ import { runOnJS } from "react-native-reanimated";
 // STYLE VARIANTS
 // ============================================================================
 const button = tv({
-    base: "rounded-lg items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-[13px] items-center justify-center flex-row min-h-[44px]",
     variants: {
         variant: {
             primary: "shadow-sm",
             accent: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            cta: "shadow-sm",
+            secondary: "bg-bg-muted",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -40,12 +41,13 @@ const button = tv({
     },
 });
 const buttonIcon = tv({
-    base: "rounded-lg items-center justify-center aspect-square",
+    base: "rounded-[13px] items-center justify-center aspect-square",
     variants: {
         variant: {
             primary: "shadow-sm",
             accent: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            cta: "shadow-sm",
+            secondary: "bg-bg-muted",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -71,8 +73,9 @@ const textColor = tv({
     variants: {
         variant: {
             primary: "text-white",
-            accent: "text-white",
-            secondary: "text-primary",
+            accent: "text-text-on-accent",
+            cta: "text-text-on-accent",
+            secondary: "text-text-primary",
             outline: "text-primary",
             outlineDanger: "text-danger",
             outlineBlack: "text-text-primary",
@@ -93,7 +96,12 @@ const textColor = tv({
         {
             variant: "accent",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-on-accent",
+        },
+        {
+            variant: "cta",
+            disabled: true,
+            className: "text-text-on-accent",
         },
         {
             variant: "transparent",
@@ -133,7 +141,8 @@ function getLoadingColorDynamic(variant) {
     const map = {
         primary: theme.text.inverse,
         accent: theme.text.inverse,
-        secondary: theme.primary,
+        cta: theme.text.inverse,
+        secondary: theme.text.primary,
         outline: theme.primary,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
@@ -147,8 +156,9 @@ function getIconColorDynamic(variant, disabled) {
     if (disabled) {
         const disabledMap = {
             primary: theme.icon.inverse + "70",
-            accent: theme.icon.inverse + "70",
-            secondary: theme.icon.disabled,
+            accent: theme.text.onAccent + "70",
+            cta: theme.text.onAccent + "70",
+            secondary: theme.text.disabled,
             outline: theme.icon.disabled,
             outlineDanger: theme.danger + "7f",
             outlineBlack: theme.text.primary + "7f",
@@ -160,8 +170,9 @@ function getIconColorDynamic(variant, disabled) {
     }
     const enabledMap = {
         primary: theme.icon.inverse,
-        accent: theme.icon.inverse,
-        secondary: theme.primary,
+        accent: theme.text.onAccent,
+        cta: theme.text.onAccent,
+        secondary: theme.text.primary,
         outline: theme.primary,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
@@ -225,10 +236,10 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
     if (variant === "link") {
         return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
     }
-    if (variant === "primary" || variant === "accent") {
+    if (variant === "primary" || variant === "accent" || variant === "cta") {
         const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
         return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                borderRadius: 8,
+                borderRadius: 13,
                 opacity: disabled ? 0.7 : 1,
             }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }) }) }));
     }
@@ -258,8 +269,8 @@ const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "mediu
         }
     }, [onPress, confirm, show, hide]);
     if (variant === "primary") {
-        return (_jsx(LinearGradient, { colors: disabled ? ["#93c5fd", "#60a5fa"] : ["#2563eb", "#1d4ed8"], end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                borderRadius: 8,
+        return (_jsx(LinearGradient, { colors: theme.gradient.primary, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
+                borderRadius: 13,
                 opacity: disabled ? 0.7 : 1,
             }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
     }

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

@@ -9,5 +9,5 @@ interface RowCheckBoxProps {
     disabled?: boolean;
     className?: string;
 }
-declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react/jsx-runtime").JSX.Element;
+declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react").JSX.Element;
 export default RowCheckBox;

package/dist/Form/Form.Checkbox.js

@@ -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.primary, 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.accent, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
 }
 export default RowCheckBox;