@sincpro/mobile-ui 0.7.2 → 1.0.1

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

@@ -1,15 +1,26 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 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].
+ * Decorative gradient presets. `brand` is themeable (reads `theme.gradient.primary`) —
+ * use it when you want the surface to follow whatever the app's active theme defines.
+ * Other presets are static constants for one-off uses. Each is [from, …, to].
  */
 declare const GRADIENT_PRESETS: {
+    readonly warm: {
+        readonly colors: readonly ["#1A1714", "#C89B3C", "#B88A2E"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
     readonly "neon-teal": {
-        readonly colors: readonly ["#22E584", "#0FB8A0"];
+        readonly colors: readonly ["#0F5C6E", "#5CC4D8"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -20,7 +31,7 @@ declare const GRADIENT_PRESETS: {
         };
     };
     readonly "night-green": {
-        readonly colors: readonly ["#0B1410", "#0E2A1E", "#08120D"];
+        readonly colors: readonly ["#0B101E", "#18223A"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -31,7 +42,7 @@ declare const GRADIENT_PRESETS: {
         };
     };
     readonly mesh: {
-        readonly colors: readonly ["#0B1410", "#10B981", "#0B1410", "#1E1B8A"];
+        readonly colors: readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -42,7 +53,7 @@ declare const GRADIENT_PRESETS: {
         };
     };
     readonly emerald: {
-        readonly colors: readonly ["#00C357", "#00A862"];
+        readonly colors: readonly ["#2F6B3C", "#6FCF8B"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -53,49 +64,57 @@ declare const GRADIENT_PRESETS: {
         };
     };
 };
-export type GradientPreset = keyof typeof GRADIENT_PRESETS | "brand";
+/**
+ * Aliases kept for backwards compatibility. These were the original names; the
+ * canonical ones are above. Use the canonical names in new code.
+ * @deprecated use `warm` instead of `gold-mesh`.
+ */
+declare const DEPRECATED_PRESETS: {
+    readonly "gold-mesh": "warm";
+};
+export type GradientPreset = keyof typeof GRADIENT_PRESETS | keyof typeof DEPRECATED_PRESETS | "brand";
 declare const surface: import("tailwind-variants").TVReturnType<{
     radius: {
-        none: string;
-        md: string;
-        lg: string;
-        full: string;
+        none: "rounded-none";
+        md: "rounded-xl";
+        lg: "rounded-2xl";
+        full: "rounded-full";
     };
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
 }, undefined, undefined, {
     radius: {
-        none: string;
-        md: string;
-        lg: string;
-        full: string;
+        none: "rounded-none";
+        md: "rounded-xl";
+        lg: "rounded-2xl";
+        full: "rounded-full";
     };
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     radius: {
-        none: string;
-        md: string;
-        lg: string;
-        full: string;
+        none: "rounded-none";
+        md: "rounded-xl";
+        lg: "rounded-2xl";
+        full: "rounded-full";
     };
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, undefined, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface GradientSurfaceProps extends VariantProps<typeof surface> {
-    /** Named brand preset. Ignored if `colors` is provided. */
+    /** Named gradient preset. Ignored if `colors` is provided. */
     preset?: GradientPreset;
     /** Custom gradient stops (overrides `preset`). */
     colors?: readonly [string, string, ...string[]];
@@ -107,9 +126,9 @@ export interface GradientSurfaceProps extends VariantProps<typeof surface> {
     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`.
+ * Modern gradient surface. Wraps `expo-linear-gradient` with named 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;

package/dist/Display/Display.GradientSurface.js

@@ -1,35 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
+import { theme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
 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].
+ * Decorative gradient presets. `brand` is themeable (reads `theme.gradient.primary`) —
+ * use it when you want the surface to follow whatever the app's active theme defines.
+ * Other presets are static constants for one-off uses. Each is [from, …, to].
  */
 const GRADIENT_PRESETS = {
+    warm: {
+        colors: ["#1A1714", "#C89B3C", "#B88A2E"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
     "neon-teal": {
-        colors: ["#22E584", "#0FB8A0"],
+        colors: ["#0F5C6E", "#5CC4D8"],
         start: { x: 0, y: 0 },
         end: { x: 1, y: 1 },
     },
     "night-green": {
-        colors: ["#0B1410", "#0E2A1E", "#08120D"],
+        colors: ["#0B101E", "#18223A"],
         start: { x: 0, y: 0 },
         end: { x: 1, y: 1 },
     },
     mesh: {
-        colors: ["#0B1410", "#10B981", "#0B1410", "#1E1B8A"],
+        colors: ["#1C3765", "#2A4A85", "#8FA9E8"],
         start: { x: 0, y: 0 },
         end: { x: 1, y: 1 },
     },
     emerald: {
-        colors: ["#00C357", "#00A862"],
+        colors: ["#2F6B3C", "#6FCF8B"],
         start: { x: 0, y: 0 },
         end: { x: 1, y: 1 },
     },
 };
+/**
+ * Aliases kept for backwards compatibility. These were the original names; the
+ * canonical ones are above. Use the canonical names in new code.
+ * @deprecated use `warm` instead of `gold-mesh`.
+ */
+const DEPRECATED_PRESETS = {
+    "gold-mesh": "warm",
+};
 const surface = tv({
     variants: {
         radius: {
@@ -48,13 +61,16 @@ const surface = tv({
     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`.
+ * Modern gradient surface. Wraps `expo-linear-gradient` with named 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;
+function GradientSurface({ preset = "warm", colors, start, end, radius, padding, children, className, style, testID, }) {
+    const resolvedPreset = (preset in DEPRECATED_PRESETS
+        ? DEPRECATED_PRESETS[preset]
+        : preset);
+    const p = resolvedPreset === "brand" ? GRADIENT_PRESETS.warm : GRADIENT_PRESETS[resolvedPreset];
+    const presetColors = resolvedPreset === "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 })] }));
 }

package/dist/Display/Display.Icon.d.ts

@@ -1,4 +1,4 @@
-import { IconType } from "../utils/icon";
+import { IconType } from "../utils/icon.js";
 import { ComponentType, FC } from "react";
 export interface IconProps {
     name?: any;

package/dist/Display/Display.Icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { AntDesign, Feather, FontAwesome, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons, SimpleLineIcons, } from "@expo/vector-icons";
-import { theme } from "../theme";
+import { theme } from "../theme/index.js";
 import { View } from "react-native";
 const Icon = ({ name, size = 24, color, type = "ionicons", customIcon, className, }) => {
     const iconColor = color || theme.text.primary;

package/dist/Display/Display.IconBadge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function IconBadge({ children, count, max = 99, dot = false, color, onPress, accessibilityLabel, testID, }) {
     const showCount = typeof count === "number" && count > 0;

package/dist/Display/Display.Image.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Skeleton from "../Feedback/Feedback.Skeleton";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
+import Icon from "./Display.Icon.js";
+import Skeleton from "../Feedback/Feedback.Skeleton.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { useState } from "react";
 import { Image, View, } from "react-native";
 function DisplayImage({ source, width = "100%", height, aspectRatio, radius = 12, resizeMode = "cover", fallbackIcon = "image-outline", className, style, testID, }) {

package/dist/Display/Display.KeyValue.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function KeyValue({ label, value, align = "row", className, testID }) {
     const isRow = align === "row";

package/dist/Display/Display.ListItem.js

@@ -1,9 +1,9 @@
 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 Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider = true, className, testID, }) {
     const right = trailing ??

package/dist/Display/Display.Logo.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import { FC } from "react";
 import { type ImageSourcePropType } from "react-native";
 declare const logo: import("tailwind-variants").TVReturnType<{
@@ -31,7 +31,7 @@ declare const logo: import("tailwind-variants").TVReturnType<{
 }, {
     container: string;
     image: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         small: {
             image: string;
@@ -46,7 +46,7 @@ declare const logo: import("tailwind-variants").TVReturnType<{
 }, {
     container: string;
     image: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface LogoProps extends VariantProps<typeof logo> {
     source?: ImageSourcePropType;
     className?: string;

package/dist/Display/Display.Logo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { getBrandingLogo } from "../branding";
-import { tv } from "../theme/tw";
+import { getBrandingLogo } from "../branding.js";
+import { tv } from "../theme/tw.js";
 import { Image, View } from "react-native";
 const logo = tv({
     slots: {

package/dist/Display/Display.MediaCard.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import DisplayImage from "../Display/Display.Image";
-import Pressable from "../primitives/Pressable";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import DisplayImage from "./Display.Image.js";
+import Pressable from "../primitives/Pressable.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { LinearGradient } from "expo-linear-gradient";
 import { View } from "react-native";
 function MediaCard({ image, title, subtitle, badge, overlay, aspectRatio = 16 / 9, height, radius = 16, onPress, className, testID, }) {

package/dist/Display/Display.MediaEmbed.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import DisplayImage from "../Display/Display.Image";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "./Display.Icon.js";
+import DisplayImage from "./Display.Image.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 /**
  * Linkable short-video card (Short/TikTok/Reel): thumbnail + play + duration.
@@ -23,7 +23,7 @@ function MediaEmbed({ thumbnail, onPress, duration, title, source, aspectRatio =
                 }, children: _jsx(View, { style: {
                         width: 44,
                         height: 44,
-                        borderRadius: 22,
+                        borderRadius: 16,
                         backgroundColor: "rgba(0,0,0,0.55)",
                         alignItems: "center",
                         justifyContent: "center",

package/dist/Display/Display.MenuButton.d.ts

@@ -1,5 +1,5 @@
-import { type SwipeRowAction } from "../Display/Display.SwipeableRow";
-import { type VariantProps } from "../theme/tw";
+import { type SwipeRowAction } from "./Display.SwipeableRow.js";
+import { type VariantProps } from "../theme/tw.js";
 import { ComponentType, ReactNode } from "react";
 export type MenuButtonSwipeAction = SwipeRowAction;
 /**
@@ -70,7 +70,7 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     rightContainer: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: {
             iconContainer: string;
@@ -101,7 +101,7 @@ declare const menuButton: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     rightContainer: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface MenuButtonProps extends VariantProps<typeof menuButton> {
     icon?: ComponentType<{
         size?: number;

package/dist/Display/Display.MenuButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import SwipeableRow from "../Display/Display.SwipeableRow";
-import Spinner from "../Feedback/Feedback.Spinner";
-import { useTheme } from "../theme";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import SwipeableRow from "./Display.SwipeableRow.js";
+import Spinner from "../Feedback/Feedback.Spinner.js";
+import { useTheme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { Switch, TouchableOpacity, View } from "react-native";
 function BadgeChip({ badge }) {
     const theme = useTheme();
@@ -98,7 +98,7 @@ function MenuButton({ icon: IconComp, label, description, onPress, rightComponen
         if (rightComponent)
             return rightComponent;
         if (toggle) {
-            return (_jsx(Switch, { onValueChange: toggle.onToggle, thumbColor: theme.bg.card, trackColor: { false: theme.border.strong, true: theme.accent }, value: toggle.value }));
+            return (_jsx(Switch, { onValueChange: toggle.onToggle, thumbColor: theme.bg.card, trackColor: { false: theme.border.strong, true: theme.primary }, value: toggle.value }));
         }
         const hasBadge = badge != null;
         const hasValue = !!value;

package/dist/Display/Display.MenuCard.d.ts

@@ -1,4 +1,4 @@
-import { IconType } from "../utils/icon";
+import { IconType } from "../utils/icon.js";
 import { ComponentType } from "react";
 export interface MenuCardProps {
     title: string;

package/dist/Display/Display.MenuCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import CircleButton from "../Display/Display.CircleButton";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import CircleButton from "./Display.CircleButton.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 export function MenuCard({ title, iconType = "ionicons", onPress, customIcon, size = "md", }) {
     const theme = useTheme();

package/dist/Display/Display.MenuGrid.d.ts

@@ -1,4 +1,4 @@
-import { IconType } from "../utils/icon";
+import { IconType } from "../utils/icon.js";
 import { ComponentType } from "react";
 export interface MenuGridItem {
     id: string;

package/dist/Display/Display.MenuGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import MenuCard from "../Display/Display.MenuCard";
+import MenuCard from "./Display.MenuCard.js";
 import { View } from "react-native";
 export function MenuGrid({ items, size = "md" }) {
     return (_jsx(View, { className: "flex-row flex-wrap justify-start p-2 bg-bg-page", children: items.map((item) => (_jsx(MenuCard, { customIcon: item.customIcon, iconType: item.iconType, onPress: item.onPress, size: size, title: item.title }, item.id))) }));

package/dist/Display/Display.Monetary.d.ts

@@ -1,4 +1,4 @@
-import { typographyVariants } from "../theme/typography";
+import { typographyVariants } from "../theme/typography.js";
 import type { StyleProp, TextStyle } from "react-native";
 interface MonetaryFieldProps {
     value: number | string | null | undefined;

package/dist/Display/Display.Monetary.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Typography } from "../Typography";
-import { formatTwoDecimals } from "../utils/monetary";
+import { Typography } from "../Typography/index.js";
+import { formatTwoDecimals } from "../utils/monetary.js";
 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);

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

@@ -1,14 +1,33 @@
-import { type ViewStyle } from "react-native";
-export type PatternKind = "dots" | "grid" | "diagonals";
+import { type PatternMode } from "../theme/index.js";
+import { type ImageSourcePropType, type ViewStyle } from "react-native";
+export type PatternKind = "dots" | "grid" | "diagonals" | "mesh";
+/**
+ * Resolved mesh params per mode. The bundled asset (`assets/brand-mesh.png`) is a
+ * black symbol on transparent bg, so the two dark modes flip it via SVG ColorMatrix
+ * to produce a light symbol on the dark surface. To swap the asset, pass `meshSrc` on
+ * the `<Display.Pattern />` consumer or override `theme.pattern.source`.
+ */
+declare const MESH_PRESETS: Record<PatternMode, {
+    opacity: number;
+    invert: boolean;
+    size: number;
+}>;
 export interface PatternProps {
-    /** Texture kind (img: puntos / grilla / diagonales). */
+    /** Texture kind (dots / grid / diagonals / mesh). mesh = symbol asset tiled via SVG <Image>. */
     kind?: PatternKind;
-    /** Line/dot color (any color string; use a token value for theming). */
+    /** Line/dot color (any color string; use a token value for theming). Ignored for `mesh`. */
     color?: string;
-    /** Stroke/dot opacity (0–1). Default 0.12. */
+    /** Override the `mode` for `mesh`. Defaults to `theme.pattern.mode`. */
+    mode?: PatternMode;
+    /** Override tile opacity 0–1. Defaults per `mode`. */
     opacity?: number;
-    /** Tile size in px (texture density). Default 22. */
+    /** Override tile size in px. Defaults per `mode`. */
     size?: number;
+    /** Override invert (mesh only). Defaults per `mode`. */
+    invert?: boolean;
+    /** Override the mesh asset. Resolution order: this prop → `theme.pattern.source` →
+     *  `setBranding({ mesh })` → bundled default `assets/brand-mesh.png`. */
+    meshSrc?: ImageSourcePropType;
     /** Absolute-fill the parent as a background layer. Default true. */
     absoluteFill?: boolean;
     className?: string;
@@ -16,11 +35,13 @@ export interface PatternProps {
     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`).
+ * Decorative SVG texture used as a background layer. Geometric kinds (dots / grid /
+ * diagonals) render inline SVG primitives; `mesh` tiles the symbol asset via
+ * `<Pattern>` + `<Image>`, flipping it via SVG `<feColorMatrix>` on dark variants. The
+ * three modes — `light-pattern` / `dark-pattern` / `dark-full` — are picked per screen
+ * (or via `theme.pattern.mode`); see `MESH_PRESETS` for the resolved opacity/invert.
+ * Pure SVG — iOS + Android, no native dep beyond `react-native-svg`.
  */
-declare function Pattern({ kind, color, opacity, size, absoluteFill, className, style, testID, }: PatternProps): import("react").JSX.Element;
+declare function Pattern({ kind, color, mode, opacity, size, invert, meshSrc, absoluteFill, className, style, testID, }: PatternProps): import("react").JSX.Element;
 export default Pattern;
-export { Pattern };
+export { MESH_PRESETS, Pattern };