@sincpro/mobile-ui 0.7.2 → 1.1.0

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,8 +1,9 @@
 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 { useTheme } from "../theme/index.js";
 import { View } from "react-native";
 const Icon = ({ name, size = 24, color, type = "ionicons", customIcon, className, }) => {
+    const theme = useTheme();
     const iconColor = color || theme.text.primary;
     const renderIcon = () => {
         if (type === "custom" && customIcon) {

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

@@ -1,10 +1,17 @@
 import type { ReactNode } from "react";
-export interface KeyValueProps {
+interface KeyValueLayoutProps {
     label: string;
-    value?: ReactNode;
-    align?: "row" | "stacked";
+    align?: "row" | "stacked" | "auto";
     className?: string;
     testID?: string;
+    selectable?: boolean;
 }
-declare function KeyValue({ label, value, align, className, testID }: KeyValueProps): import("react").JSX.Element;
+export type KeyValueProps = KeyValueLayoutProps & ({
+    copyable: true;
+    value: string | number;
+} | {
+    copyable?: false;
+    value?: ReactNode;
+});
+declare function KeyValue({ label, value, align, className, testID, copyable, selectable, }: KeyValueProps): import("react").JSX.Element;
 export default KeyValue;

package/dist/Display/Display.KeyValue.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-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: "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)] }));
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useWindowDimensions, View } from "react-native";
+import CopyableText from "./Display.CopyableText";
+function KeyValue({ label, value, align = "row", className, testID, copyable = false, selectable = false, }) {
+    const { width, fontScale } = useWindowDimensions();
+    const isRow = align === "row" || (align === "auto" && width >= 360 && fontScale <= 1.3);
+    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(View, { className: cn("flex-shrink min-w-0", isRow && "flex-1 items-end"), children: copyable ? (_jsx(CopyableText, { accessibilityLabel: `Copiar ${label}`, selectable: selectable, value: String(value) })) : selectable ? (_jsx(Typography.SelectableText, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, style: { alignSelf: "stretch" }, value: String(value) })) : (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), selectable: selectable, semibold: isRow, children: value })) })) : (value)] }));
 }
 export default KeyValue;

package/dist/Display/Display.ListGroup.d.ts

@@ -0,0 +1,23 @@
+import { type SectionHeaderAction, type SectionHeaderProps } from "./Display.SectionHeader.js";
+import { Typography } from "../Typography/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface ListGroupProps {
+    title: string;
+    description?: string;
+    footer?: ReactNode;
+    action?: SectionHeaderAction;
+    children: ReactNode;
+    surface?: "inset" | "plain";
+    separators?: boolean;
+    className?: string;
+    contentClassName?: string;
+    testID?: string;
+    headerProps?: Omit<SectionHeaderProps, "title" | "subtitle" | "action">;
+    footerTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    separatorStyle?: StyleProp<ViewStyle>;
+}
+declare function ListGroup({ title, description, footer, action, children, surface, separators, className, contentClassName, testID, headerProps, footerTextProps, style, contentStyle, separatorStyle, }: ListGroupProps): import("react").JSX.Element;
+export default ListGroup;

package/dist/Display/Display.ListGroup.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import SectionHeader from "./Display.SectionHeader.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { Children } from "react";
+import { StyleSheet, View } from "react-native";
+function ListGroup({ title, description, footer, action, children, surface = "inset", separators = true, className, contentClassName, testID, headerProps, footerTextProps, style, contentStyle, separatorStyle, }) {
+    const rows = Children.toArray(children);
+    return (_jsxs(View, { className: cn("gap-2", className), style: style, testID: testID, children: [_jsx(SectionHeader, { ...headerProps, action: action, subtitle: description, title: title }), _jsx(View, { className: cn(surface === "inset" && "rounded-2xl bg-bg-card overflow-hidden", contentClassName), style: contentStyle, testID: testID ? `${testID}-content` : undefined, children: rows.map((row, index) => (_jsxs(View, { children: [row, separators && index < rows.length - 1 ? (_jsx(View, { accessibilityElementsHidden: true, className: "bg-border-default", importantForAccessibility: "no-hide-descendants", style: [
+                                {
+                                    height: StyleSheet.hairlineWidth,
+                                    marginHorizontal: 16,
+                                },
+                                separatorStyle,
+                            ], testID: testID ? `${testID}-separator-${index}` : undefined })) : null] }, typeof row === "object" && "key" in row ? row.key : index))) }), typeof footer === "string" ? (_jsx(Typography.Text, { className: "text-text-secondary px-4", variant: "bodySmall", ...footerTextProps, children: footer })) : (footer)] }));
+}
+export default ListGroup;

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

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import { Typography } from "../Typography/index.js";
+import type { ComponentProps, ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export interface ListItemProps {
     title: string;
     subtitle?: string;
@@ -12,6 +14,18 @@ export interface ListItemProps {
     showDivider?: boolean;
     className?: string;
     testID?: string;
+    accessibleSizing?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    disabled?: boolean;
+    variant?: "default" | "mobile";
+    value?: string;
+    layout?: "auto" | "row" | "stacked";
+    density?: "compact" | "comfortable";
+    style?: StyleProp<ViewStyle>;
+    titleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    subtitleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    valueTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
 }
-declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, accessibleSizing, accessibilityLabel, accessibilityHint, disabled, variant, value, layout, density, style, titleTextProps, subtitleTextProps, valueTextProps, }: ListItemProps): import("react").JSX.Element;
 export default ListItem;

package/dist/Display/Display.ListItem.js

@@ -1,18 +1,35 @@
 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, chevron = false, onPress, showDivider = true, className, testID, }) {
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { Pressable as NativePressable, useWindowDimensions, View, } from "react-native";
+function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider, className, testID, accessibleSizing = false, accessibilityLabel, accessibilityHint, disabled = false, variant = "default", value, layout = "auto", density = "compact", style, titleTextProps, subtitleTextProps, valueTextProps, }) {
+    const theme = useTheme();
+    const { width, fontScale } = useWindowDimensions();
+    const mobile = variant === "mobile";
+    const comfortable = mobile && density === "comfortable";
+    const stacked = mobile &&
+        (value !== undefined || trailing != null) &&
+        (layout === "stacked" || (layout === "auto" && (fontScale > 1.3 || width < 360)));
     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);
+        (value || chevron ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [value ? (_jsx(Typography.Text, { className: "text-text-secondary flex-shrink", variant: comfortable ? "bodyReadable" : "body", ...valueTextProps, children: value })) : null, chevron ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) })) : null] })) : null);
+    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: cn("flex-1", mobile ? "min-w-0 gap-1" : "gap-0.5"), children: [_jsx(Typography.Text, { className: mobile && disabled ? "text-text-disabled" : "text-text-primary", numberOfLines: mobile || accessibleSizing ? undefined : 1, semibold: !mobile || comfortable, variant: comfortable ? "bodyReadable" : "body", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: mobile || accessibleSizing ? undefined : 1, variant: comfortable ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null, stacked && right ? _jsx(View, { className: "self-start mt-1", children: right }) : null] }), !stacked && right ? (_jsx(View, { className: cn("ml-3 justify-center", mobile && "flex-shrink"), style: mobile ? { maxWidth: "45%" } : undefined, children: right })) : null] }));
+    const base = cn("flex-row items-center px-4", mobile && !comfortable ? "py-2" : "py-3", !mobile && "bg-bg-card", (showDivider ?? !mobile) && "border-b border-border-default", disabled && !mobile && "opacity-50", className);
     if (onPress) {
-        return (_jsx(Pressable, { className: base, onPress: onPress, testID: testID, children: content }));
+        if (mobile) {
+            return (_jsx(NativePressable, { accessibilityHint: accessibilityHint ?? subtitle, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: value !== undefined ? { text: value } : undefined, className: base, disabled: disabled, onPress: onPress, style: ({ pressed }) => [
+                    {
+                        minHeight: 48,
+                        minWidth: 48,
+                        backgroundColor: pressed ? theme.bg.hover : undefined,
+                    },
+                    style,
+                ], testID: testID, children: content }));
+        }
+        return (_jsx(Pressable, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, className: base, disabled: disabled, onPress: onPress, style: [accessibleSizing ? { minHeight: 48 } : undefined, style], testID: testID, children: content }));
     }
-    return (_jsx(View, { className: base, testID: testID, children: content }));
+    return (_jsx(View, { className: base, style: style, testID: testID, children: content }));
 }
 export default ListItem;

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 };