@sincpro/mobile-ui 0.3.0 → 0.4.1

package/dist/Dialog/BottomSheet/BottomSheet.Root.d.ts

@@ -251,7 +251,7 @@ export interface FooterProps {
  * @example Status footer
  * ```tsx
  * <BottomSheet.Footer>
- *   <Text className="text-gray-500 text-sm">
+ *   <Text className="text-text-secondary text-sm">
  *     Last updated: 5 minutes ago
  *   </Text>
  * </BottomSheet.Footer>
@@ -262,7 +262,7 @@ export interface FooterProps {
  * <BottomSheet.Footer>
  *   <View className="flex-row items-center">
  *     <Icon name="info" size={16} />
- *     <Text className="ml-2 text-gray-600">Swipe down to dismiss</Text>
+ *     <Text className="ml-2 text-text-secondary">Swipe down to dismiss</Text>
  *   </View>
  * </BottomSheet.Footer>
  * ```

package/dist/Dialog/BottomSheet/BottomSheet.Root.js

@@ -310,7 +310,7 @@ function Actions({ children, layout = "auto" }) {
  * @example Status footer
  * ```tsx
  * <BottomSheet.Footer>
- *   <Text className="text-gray-500 text-sm">
+ *   <Text className="text-text-secondary text-sm">
  *     Last updated: 5 minutes ago
  *   </Text>
  * </BottomSheet.Footer>
@@ -321,7 +321,7 @@ function Actions({ children, layout = "auto" }) {
  * <BottomSheet.Footer>
  *   <View className="flex-row items-center">
  *     <Icon name="info" size={16} />
- *     <Text className="ml-2 text-gray-600">Swipe down to dismiss</Text>
+ *     <Text className="ml-2 text-text-secondary">Swipe down to dismiss</Text>
  *   </View>
  * </BottomSheet.Footer>
  * ```

package/dist/Dialog/Dialog.Confirmation.js

@@ -4,6 +4,10 @@ import { theme } from "../theme";
 import Typography from "../Typography/Typography.Text";
 import { Modal, TouchableWithoutFeedback, View } from "react-native";
 const ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "cambios", subtitle = "¿Estás seguro de que quieres descartar los cambios realizados?", confirmButtonText = "Sí", cancelButtonText = "No, continuar aquí", }) => {
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: "rounded-xl p-3 w-full max-w-xs mx-auto", style: { backgroundColor: theme.bg.popover, ...theme.shadow.md }, children: [_jsx(Typography, { className: "mb-1.5 text-sm", variant: "body", children: _jsx(Typography, { semibold: true, variant: "body", children: auxTitle }) }), _jsx(Typography, { className: "mb-3 text-xs leading-tight", variant: "body", children: subtitle }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(BaseButton, { className: "flex-1", onPress: onCancel, size: "small", title: cancelButtonText, variant: "outlineBlack" }), _jsx(BaseButton, { className: "flex-1", onPress: onConfirm, size: "small", title: confirmButtonText, variant: "primary" })] })] }) }) }) }) }));
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: "p-3 w-full max-w-xs mx-auto", style: {
+                            borderRadius: 22,
+                            backgroundColor: theme.bg.popover,
+                            ...theme.shadow.md,
+                        }, children: [_jsx(Typography, { className: "mb-1.5 text-sm", variant: "body", children: _jsx(Typography, { semibold: true, variant: "body", children: auxTitle }) }), _jsx(Typography, { className: "mb-3 text-xs leading-tight", variant: "body", children: subtitle }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(BaseButton, { className: "flex-1", onPress: onCancel, size: "small", title: cancelButtonText, variant: "outlineBlack" }), _jsx(BaseButton, { className: "flex-1", onPress: onConfirm, size: "small", title: confirmButtonText, variant: "primary" })] })] }) }) }) }) }));
 };
 export default ConfirmationDialog;

package/dist/Dialog/Dialog.EditValue.js

@@ -11,6 +11,6 @@ function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, o
             return () => clearTimeout(t);
         }
     }, [visible, autoFocus]);
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { className: "rounded-xl p-4", style: { backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, ref: inputRef, returnKeyType: "done", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { className: "p-4", style: { borderRadius: 22, backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, ref: inputRef, returnKeyType: "done", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
 }
 export default EditableValueModal;

package/dist/Display/Display.GradientSurface.d.ts

@@ -0,0 +1,116 @@
+import { type VariantProps } from "../theme/tw";
+import { type LinearGradientPoint } from "expo-linear-gradient";
+import type { ReactNode } from "react";
+import { type ViewStyle } from "react-native";
+/**
+ * Decorative gradient presets (2026 art direction). `brand` is themeable (reads
+ * `theme.gradient.primary`); the rest are intentional design constants for heroes/splash.
+ * Each is [from, …, to].
+ */
+declare const GRADIENT_PRESETS: {
+    readonly "neon-teal": {
+        readonly colors: readonly ["#22E584", "#0FB8A0"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+    readonly "night-green": {
+        readonly colors: readonly ["#0B1410", "#0E2A1E", "#08120D"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+    readonly mesh: {
+        readonly colors: readonly ["#0B1410", "#10B981", "#0B1410", "#1E1B8A"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+    readonly emerald: {
+        readonly colors: readonly ["#00C357", "#00A862"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+};
+export type GradientPreset = keyof typeof GRADIENT_PRESETS | "brand";
+declare const surface: import("tailwind-variants").TVReturnType<{
+    radius: {
+        none: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, undefined, {
+    radius: {
+        none: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    radius: {
+        none: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+export interface GradientSurfaceProps extends VariantProps<typeof surface> {
+    /** Named brand preset. Ignored if `colors` is provided. */
+    preset?: GradientPreset;
+    /** Custom gradient stops (overrides `preset`). */
+    colors?: readonly [string, string, ...string[]];
+    start?: LinearGradientPoint;
+    end?: LinearGradientPoint;
+    children?: ReactNode;
+    className?: string;
+    style?: ViewStyle;
+    testID?: string;
+}
+/**
+ * Modern gradient surface (delivery/fintech 2026 look). Wraps `expo-linear-gradient` with
+ * named brand presets + tokenized radius/padding. iOS + Android (no native dep beyond the
+ * already-peer `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
+ */
+declare function GradientSurface({ preset, colors, start, end, radius, padding, children, className, style, testID, }: GradientSurfaceProps): import("react").JSX.Element;
+export default GradientSurface;
+export { GRADIENT_PRESETS, GradientSurface };

package/dist/Display/Display.GradientSurface.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+import { LinearGradient } from "expo-linear-gradient";
+import { View } from "react-native";
+/**
+ * Decorative gradient presets (2026 art direction). `brand` is themeable (reads
+ * `theme.gradient.primary`); the rest are intentional design constants for heroes/splash.
+ * Each is [from, …, to].
+ */
+const GRADIENT_PRESETS = {
+    "neon-teal": {
+        colors: ["#22E584", "#0FB8A0"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+    "night-green": {
+        colors: ["#0B1410", "#0E2A1E", "#08120D"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+    mesh: {
+        colors: ["#0B1410", "#10B981", "#0B1410", "#1E1B8A"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+    emerald: {
+        colors: ["#00C357", "#00A862"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+};
+const surface = tv({
+    variants: {
+        radius: {
+            none: "rounded-none",
+            md: "rounded-xl",
+            lg: "rounded-2xl",
+            full: "rounded-full",
+        },
+        padding: {
+            none: "p-0",
+            sm: "p-3",
+            md: "p-4",
+            lg: "p-6",
+        },
+    },
+    defaultVariants: { radius: "lg", padding: "none" },
+});
+/**
+ * Modern gradient surface (delivery/fintech 2026 look). Wraps `expo-linear-gradient` with
+ * named brand presets + tokenized radius/padding. iOS + Android (no native dep beyond the
+ * already-peer `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
+ */
+function GradientSurface({ preset = "neon-teal", colors, start, end, radius, padding, children, className, style, testID, }) {
+    const p = preset === "brand" ? GRADIENT_PRESETS["neon-teal"] : GRADIENT_PRESETS[preset];
+    const presetColors = preset === "brand" ? theme.gradient.primary : p.colors;
+    const resolvedColors = (colors ?? presetColors);
+    return (_jsxs(View, { className: cn("overflow-hidden", surface({ radius })), style: style, testID: testID, children: [_jsx(LinearGradient, { colors: [...resolvedColors], end: end ?? p.end, start: start ?? p.start, style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } }), _jsx(View, { className: cn(surface({ padding }), className), children: children })] }));
+}
+export default GradientSurface;
+export { GRADIENT_PRESETS, GradientSurface };

package/dist/Display/Display.KeyValue.js

@@ -4,6 +4,6 @@ import { Typography } from "../Typography";
 import { View } from "react-native";
 function KeyValue({ label, value, align = "row", className, testID }) {
     const isRow = align === "row";
-    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, children: value })) : (value)] }));
+    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, children: value })) : (value)] }));
 }
 export default KeyValue;

package/dist/Display/Display.ListItem.d.ts

@@ -2,12 +2,16 @@ import type { ReactNode } from "react";
 export interface ListItemProps {
     title: string;
     subtitle?: string;
+    /** Leading slot — icon, avatar, status dot. */
     leading?: ReactNode;
+    /** Trailing slot — value text, toggle, badge. Overrides the auto `chevron`. */
     trailing?: ReactNode;
+    /** Show a forward chevron on the right (navigational row). Ignored if `trailing` is set. */
+    chevron?: boolean;
     onPress?: () => void;
     showDivider?: boolean;
     className?: string;
     testID?: string;
 }
-declare function ListItem({ title, subtitle, leading, trailing, onPress, showDivider, className, testID, }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, }: ListItemProps): import("react").JSX.Element;
 export default ListItem;

package/dist/Display/Display.ListItem.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
 import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { View } from "react-native";
-function ListItem({ title, subtitle, leading, trailing, onPress, showDivider = true, className, testID, }) {
-    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: "flex-1 gap-0.5", children: [_jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "body", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, variant: "bodySmall", children: subtitle })) : null] }), trailing ? _jsx(View, { className: "ml-3 justify-center", children: trailing }) : null] }));
+function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider = true, className, testID, }) {
+    const right = trailing ??
+        (chevron ? _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) : null);
+    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: "flex-1 gap-0.5", children: [_jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "body", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, variant: "bodySmall", children: subtitle })) : null] }), right ? _jsx(View, { className: "ml-3 justify-center", children: right }) : null] }));
     const base = cn("flex-row items-center py-3 px-4 bg-bg-card", showDivider && "border-b border-border-default", className);
     if (onPress) {
         return (_jsx(Pressable, { className: base, onPress: onPress, testID: testID, children: content }));

package/dist/Display/Display.Monetary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Typography } from "../Typography";
 import { formatTwoDecimals } from "../utils/monetary";
-function MonetaryField({ value, currencySymbol = "₡", prefix = "", color, textVariant = "body", style = {}, symbolColor, semibold = true, bold = false, className, }) {
+function MonetaryField({ value, currencySymbol = "₡", prefix = "", color, textVariant = "data", style = {}, symbolColor, semibold = true, bold = false, className, }) {
     const isEmptyValue = value === null || value === undefined || value === "";
     const formatted = isEmptyValue ? "0.00" : formatTwoDecimals(value);
     return (_jsxs(Typography.Text, { bold: bold, className: className, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: [_jsx(Typography.Text, { className: className, color: symbolColor || color, variant: textVariant, children: currencySymbol }), " ", prefix && `${prefix} `, formatted] }));

package/dist/Display/Display.Pattern.d.ts

@@ -0,0 +1,26 @@
+import { type ViewStyle } from "react-native";
+export type PatternKind = "dots" | "grid" | "diagonals";
+export interface PatternProps {
+    /** Texture kind (img: puntos / grilla / diagonales). */
+    kind?: PatternKind;
+    /** Line/dot color (any color string; use a token value for theming). */
+    color?: string;
+    /** Stroke/dot opacity (0–1). Default 0.12. */
+    opacity?: number;
+    /** Tile size in px (texture density). Default 22. */
+    size?: number;
+    /** Absolute-fill the parent as a background layer. Default true. */
+    absoluteFill?: boolean;
+    className?: string;
+    style?: ViewStyle;
+    testID?: string;
+}
+/**
+ * Decorative SVG texture (dots / grid / diagonals) used as a background layer behind heroes,
+ * splash, empty states. Tiles to any size via an SVG `<Pattern>`. Pure SVG — iOS + Android,
+ * no native dep beyond `react-native-svg` (already a peer). Drop inside a relative/overflow
+ * container (e.g. a `GradientSurface`).
+ */
+declare function Pattern({ kind, color, opacity, size, absoluteFill, className, style, testID, }: PatternProps): import("react").JSX.Element;
+export default Pattern;
+export { Pattern };

package/dist/Display/Display.Pattern.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { StyleSheet, View } from "react-native";
+import Svg, { Circle, Defs, Line, Pattern as SvgPattern, Rect } from "react-native-svg";
+/**
+ * Decorative SVG texture (dots / grid / diagonals) used as a background layer behind heroes,
+ * splash, empty states. Tiles to any size via an SVG `<Pattern>`. Pure SVG — iOS + Android,
+ * no native dep beyond `react-native-svg` (already a peer). Drop inside a relative/overflow
+ * container (e.g. a `GradientSurface`).
+ */
+function Pattern({ kind = "dots", color = "#FFFFFF", opacity = 0.12, size = 22, absoluteFill = true, className, style, testID, }) {
+    const id = `pat-${kind}-${size}`;
+    const tile = (() => {
+        switch (kind) {
+            case "grid":
+                return (_jsxs(_Fragment, { children: [_jsx(Line, { stroke: color, strokeWidth: 1, x1: 0, x2: size, y1: 0, y2: 0 }), _jsx(Line, { stroke: color, strokeWidth: 1, x1: 0, x2: 0, y1: 0, y2: size })] }));
+            case "diagonals":
+                return _jsx(Line, { stroke: color, strokeWidth: 1.5, x1: 0, x2: size, y1: size, y2: 0 });
+            case "dots":
+            default:
+                return _jsx(Circle, { cx: size / 2, cy: size / 2, fill: color, r: 1.4 });
+        }
+    })();
+    return (_jsx(View, { className: cn(className), pointerEvents: "none", style: [absoluteFill ? StyleSheet.absoluteFill : undefined, { opacity }, style], testID: testID, children: _jsxs(Svg, { height: "100%", width: "100%", children: [_jsx(Defs, { children: _jsx(SvgPattern, { height: size, id: id, patternUnits: "userSpaceOnUse", width: size, x: 0, y: 0, children: tile }) }), _jsx(Rect, { fill: `url(#${id})`, height: "100%", width: "100%" })] }) }));
+}
+export default Pattern;
+export { Pattern };

package/dist/Display/Display.PriceTag.js

@@ -3,9 +3,9 @@ import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { View } from "react-native";
 const sizeMap = {
-    sm: { price: "body", original: "caption" },
-    md: { price: "subtitle", original: "bodySmall" },
-    lg: { price: "h3", original: "body" },
+    sm: { price: "data", original: "captionSmall" },
+    md: { price: "data", original: "caption" },
+    lg: { price: "dataLarge", original: "data" },
 };
 function format(amount, currency) {
     const formatted = amount.toLocaleString("es-BO", {

package/dist/Display/Display.Stat.js

@@ -3,7 +3,7 @@ import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { View } from "react-native";
 function Stat({ value, label, align = "center", className, testID }) {
-    return (_jsxs(View, { className: cn(align === "center" ? "items-center" : "items-start", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "subtitle", children: value }), _jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label })] }));
+    return (_jsxs(View, { className: cn(align === "center" ? "items-center" : "items-start", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-primary", variant: "dataLarge", children: value }), _jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label })] }));
 }
 export default Stat;
 export { Stat };

package/dist/Display/Display.StatCard.js

@@ -8,6 +8,6 @@ function StatCard({ label, value, icon, delta, deltaSuffix = "%", hint, trailing
     const hasDelta = typeof delta === "number";
     const up = hasDelta && delta >= 0;
     const deltaColor = up ? theme.success : theme.danger;
-    return (_jsxs(View, { className: cn("bg-bg-card rounded-lg border border-border-light p-4 gap-1", className), style: theme.shadow.sm, testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: label }), icon ? _jsx(Icon, { color: theme.icon.secondary, name: icon, size: 18 }) : null, trailing] }), _jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "h3", children: value }), hasDelta || hint ? (_jsxs(View, { className: "flex-row items-center gap-1", children: [hasDelta ? (_jsxs(_Fragment, { children: [_jsx(Icon, { color: deltaColor, name: up ? "arrow-up" : "arrow-down", size: 14 }), _jsxs(Typography.Text, { style: { color: deltaColor }, variant: "bodySmall", children: [Math.abs(delta), deltaSuffix] })] })) : null, hint ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "bodySmall", children: hint })) : null] })) : null] }));
+    return (_jsxs(View, { className: cn("bg-bg-card rounded-lg border border-border-light p-4 gap-1", className), style: theme.shadow.sm, testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), icon ? _jsx(Icon, { color: theme.icon.secondary, name: icon, size: 18 }) : null, trailing] }), _jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "h3", children: value }), hasDelta || hint ? (_jsxs(View, { className: "flex-row items-center gap-1", children: [hasDelta ? (_jsxs(_Fragment, { children: [_jsx(Icon, { color: deltaColor, name: up ? "arrow-up" : "arrow-down", size: 14 }), _jsxs(Typography.Text, { style: { color: deltaColor }, variant: "caption", children: [Math.abs(delta), deltaSuffix] })] })) : null, hint ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: hint })) : null] })) : null] }));
 }
 export default StatCard;

package/dist/Display/index.d.ts

@@ -7,6 +7,7 @@ import CountRecords from "../Display/Display.CountRecords";
 import DataTable from "../Display/Display.DataTable";
 import Date from "../Display/Display.Date";
 import Divider from "../Display/Display.Divider";
+import GradientSurface from "../Display/Display.GradientSurface";
 import IconBadge from "../Display/Display.IconBadge";
 import DisplayImage from "../Display/Display.Image";
 import KeyValue from "../Display/Display.KeyValue";
@@ -15,6 +16,7 @@ import MediaCard from "../Display/Display.MediaCard";
 import MediaEmbed from "../Display/Display.MediaEmbed";
 import MenuButton from "../Display/Display.MenuButton";
 import Monetary from "../Display/Display.Monetary";
+import Pattern from "../Display/Display.Pattern";
 import PriceTag from "../Display/Display.PriceTag";
 import ProductCard from "../Display/Display.ProductCard";
 import Rating from "../Display/Display.Rating";
@@ -78,11 +80,13 @@ export declare const Display: {
     CopyableText: typeof CopyableText;
     Date: typeof Date;
     Divider: typeof Divider;
+    GradientSurface: typeof GradientSurface;
     Icon: import("react").FC<import("../Display/Display.Icon").IconProps>;
     CountRecords: typeof CountRecords;
     Logo: import("react").FC<import("../Display/Display.Logo").LogoProps>;
     MenuButton: typeof MenuButton;
     Monetary: typeof Monetary;
+    Pattern: typeof Pattern;
 };
 export { type BadgeProps, BadgeVariants };
 export default Display;

package/dist/Display/index.js

@@ -10,6 +10,7 @@ import CountRecords from "../Display/Display.CountRecords";
 import DataTable from "../Display/Display.DataTable";
 import Date from "../Display/Display.Date";
 import Divider from "../Display/Display.Divider";
+import GradientSurface from "../Display/Display.GradientSurface";
 import Icon from "../Display/Display.Icon";
 import IconBadge from "../Display/Display.IconBadge";
 import DisplayImage from "../Display/Display.Image";
@@ -20,6 +21,7 @@ import MediaCard from "../Display/Display.MediaCard";
 import MediaEmbed from "../Display/Display.MediaEmbed";
 import MenuButton from "../Display/Display.MenuButton";
 import Monetary from "../Display/Display.Monetary";
+import Pattern from "../Display/Display.Pattern";
 import PriceTag from "../Display/Display.PriceTag";
 import ProductCard from "../Display/Display.ProductCard";
 import Rating from "../Display/Display.Rating";
@@ -69,11 +71,13 @@ export const Display = {
     CopyableText,
     Date,
     Divider,
+    GradientSurface,
     Icon,
     CountRecords,
     Logo,
     MenuButton,
     Monetary,
+    Pattern,
 };
 export { BadgeVariants };
 export default Display;

package/dist/Feedback/Feedback.DomainSplashScreen.js

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

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

@@ -5,5 +5,11 @@ interface LoadingStateProps {
     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;
 export default LoadingState;

package/dist/Feedback/Feedback.Loading.js

@@ -2,7 +2,13 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import Spinner from "../Feedback/Feedback.Spinner";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
-function LoadingState({ message = "Actualizando lista de órdenes", size = "small", style = {}, className, }) {
+/**
+ * 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 }) }));
 }
 export default LoadingState;

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

@@ -10,6 +10,12 @@ export interface ToastOptions {
     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> {
@@ -28,8 +34,9 @@ export interface ToastContextValue {
     loading: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
     promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>) => Promise<T>;
 }
-export declare function ToastProvider({ children }: {
+export declare function ToastProvider({ children, position, }: {
     children: ReactNode;
+    position?: "top" | "bottom";
 }): import("react").JSX.Element;
 export declare function useToast(): ToastContextValue;
 export {};