@sincpro/mobile-ui 0.7.2 → 1.0.1

package/dist/Display/Display.Pattern.js

@@ -1,27 +1,73 @@
 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";
+import { getBrandingMesh, getBrandingMeshSize } from "../branding.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Image as RNImage, StyleSheet, View, } from "react-native";
+import Svg, { Circle, Defs, FeColorMatrix, Filter, Image as SvgImage, Line, Pattern as SvgPattern, Rect, } from "react-native-svg";
+const BUNDLED_MESH = require("../../assets/brand-mesh.png");
+function resolveMesh(propOverride) {
+    if (propOverride)
+        return propOverride;
+    const branded = getBrandingMesh();
+    if (branded)
+        return branded;
+    return BUNDLED_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`.
+ */
+const MESH_PRESETS = {
+    "light-pattern": { opacity: 0.2, invert: false, size: 56 },
+    "dark-pattern": { opacity: 0.25, invert: true, size: 56 },
+    "dark-full": { opacity: 0.55, invert: true, size: 56 },
+};
 /**
- * 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`.
  */
-function Pattern({ kind = "dots", color = "#FFFFFF", opacity = 0.12, size = 22, absoluteFill = true, className, style, testID, }) {
-    const id = `pat-${kind}-${size}`;
+function Pattern({ kind = "dots", color = "#FFFFFF", mode, opacity, size, invert, meshSrc, absoluteFill = true, className, style, testID, }) {
+    const isMesh = kind === "mesh";
+    const fromTheme = isMesh ? theme.pattern : undefined;
+    const brandedSize = isMesh ? getBrandingMeshSize() : undefined;
+    const resolvedMode = mode ?? fromTheme?.mode ?? "light-pattern";
+    const preset = MESH_PRESETS[resolvedMode];
+    const resolvedSize = size ?? brandedSize ?? (isMesh ? (fromTheme?.size ?? preset.size) : 22);
+    const resolvedOpacity = opacity ?? (isMesh ? preset.opacity : 0.12);
+    const resolvedInvert = invert ?? (isMesh ? preset.invert : false);
+    const resolvedMeshSrc = isMesh ? resolveMesh(meshSrc ?? fromTheme?.source) : undefined;
+    const id = `pat-${kind}-${resolvedSize}-${resolvedInvert ? "inv" : "norm"}`;
+    const filterId = `${id}-filter`;
     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 })] }));
+                return (_jsxs(_Fragment, { children: [_jsx(Line, { stroke: color, strokeWidth: 1, x1: 0, x2: resolvedSize, y1: 0, y2: 0 }), _jsx(Line, { stroke: color, strokeWidth: 1, x1: 0, x2: 0, y1: 0, y2: resolvedSize })] }));
             case "diagonals":
-                return _jsx(Line, { stroke: color, strokeWidth: 1.5, x1: 0, x2: size, y1: size, y2: 0 });
+                return (_jsx(Line, { stroke: color, strokeWidth: 1.5, x1: 0, x2: resolvedSize, y1: resolvedSize, y2: 0 }));
+            case "mesh": {
+                if (!resolvedMeshSrc)
+                    return null;
+                const mesh = RNImage.resolveAssetSource(resolvedMeshSrc);
+                if (!mesh)
+                    return null;
+                return (_jsx(SvgImage, { height: resolvedSize, href: mesh.uri, preserveAspectRatio: "xMidYMid meet", width: resolvedSize, x: 0, y: 0 }));
+            }
             case "dots":
             default:
-                return _jsx(Circle, { cx: size / 2, cy: size / 2, fill: color, r: 1.4 });
+                return _jsx(Circle, { cx: resolvedSize / 2, cy: resolvedSize / 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%" })] }) }));
+    return (_jsx(View, { className: cn(className), pointerEvents: "none", style: [
+            absoluteFill ? StyleSheet.absoluteFill : undefined,
+            { opacity: resolvedOpacity },
+            style,
+        ], testID: testID, children: _jsxs(Svg, { height: "100%", width: "100%", children: [_jsxs(Defs, { children: [resolvedInvert && isMesh && (_jsx(Filter, { id: filterId, children: _jsx(FeColorMatrix, { type: "matrix", values: "-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0" }) })), _jsx(SvgPattern, { height: resolvedSize, id: id, patternUnits: "userSpaceOnUse", width: resolvedSize, x: 0, y: 0, children: tile })] }), _jsx(Rect, { fill: `url(#${id})`, filter: resolvedInvert && isMesh ? `url(#${filterId})` : undefined, height: "100%", width: "100%" })] }) }));
 }
 export default Pattern;
-export { Pattern };
+export { MESH_PRESETS, Pattern };

package/dist/Display/Display.PriceTag.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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";
 const sizeMap = {
     sm: { price: "data", original: "captionSmall" },

package/dist/Display/Display.ProductCard.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import DisplayImage from "../Display/Display.Image";
-import PriceTag from "../Display/Display.PriceTag";
-import Rating from "../Display/Display.Rating";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import DisplayImage from "./Display.Image.js";
+import PriceTag from "./Display.PriceTag.js";
+import Rating from "./Display.Rating.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 ProductCard({ title, image, price, originalPrice, currency, subtitle, rating, badge, onPress, className, testID, }) {
     return (_jsxs(Pressable, { accessibilityLabel: title, className: cn("bg-bg-card rounded-xl overflow-hidden border border-border-light", className), onPress: onPress, style: theme.shadow.sm, testID: testID, children: [_jsxs(View, { children: [_jsx(DisplayImage, { aspectRatio: 1, radius: 0, source: image }), badge ? _jsx(View, { className: "absolute top-2 left-2", children: badge }) : null] }), _jsxs(View, { className: "p-3 gap-1", 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, typeof rating === "number" ? _jsx(Rating, { readOnly: true, size: 14, value: rating }) : null, _jsx(View, { className: "mt-1", children: _jsx(PriceTag, { amount: price, currency: currency, originalAmount: originalPrice, size: "sm" }) })] })] }));

package/dist/Display/Display.Rating.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
 import { View } from "react-native";
 function Rating({ value, max = 5, size = 24, onChange, readOnly = false, className, testID, }) {
     const interactive = !readOnly && !!onChange;

package/dist/Display/Display.SearchHistory.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { 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 SearchHistory({ items, onSelect, onRemove, onClearAll, title = "Búsquedas recientes", icon = "time-outline", className, testID, }) {
     if (items.length === 0)
         return null;
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between px-4 py-1", children: [_jsx(Typography.Text, { className: "text-text-secondary", semibold: true, variant: "bodySmall", children: title }), onClearAll ? (_jsx(Pressable, { accessibilityLabel: "Borrar todo", hitSlop: 8, onPress: onClearAll, children: _jsx(Typography.Text, { className: "text-primary", variant: "bodySmall", children: "Borrar todo" }) })) : null] }), items.map((value) => (_jsxs(Pressable, { accessibilityLabel: value, className: "flex-row items-center gap-3 px-4 py-2.5", onPress: () => onSelect(value), children: [_jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 18 }), _jsx(Typography.Text, { className: "flex-1 text-text-primary", numberOfLines: 1, children: value }), _jsx(Pressable, { accessibilityLabel: `Quitar ${value}`, hitSlop: 10, onPress: () => onRemove(value), children: _jsx(Icon, { color: theme.icon.tertiary, name: "close", size: 16 }) })] }, value)))] }));
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between px-4 py-1", children: [_jsx(Typography.Text, { className: "text-text-secondary", semibold: true, variant: "bodySmall", children: title }), onClearAll ? (_jsx(Pressable, { accessibilityLabel: "Borrar todo", hitSlop: 8, onPress: onClearAll, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Borrar todo" }) })) : null] }), items.map((value) => (_jsxs(Pressable, { accessibilityLabel: value, className: "flex-row items-center gap-3 px-4 py-2.5", onPress: () => onSelect(value), children: [_jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 18 }), _jsx(Typography.Text, { className: "flex-1 text-text-primary", numberOfLines: 1, children: value }), _jsx(Pressable, { accessibilityLabel: `Quitar ${value}`, hitSlop: 10, onPress: () => onRemove(value), children: _jsx(Icon, { color: theme.icon.tertiary, name: "close", size: 16 }) })] }, value)))] }));
 }
 export default SearchHistory;

package/dist/Display/Display.SectionHeader.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Pressable from "../primitives/Pressable";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Pressable from "../primitives/Pressable.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function SectionHeader({ title, subtitle, action, className, testID }) {
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), testID: testID, children: [_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, children: _jsx(Typography.Text, { className: "text-primary text-sm font-semibold", children: action.label }) })) : null] }));
+    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), testID: testID, children: [_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", children: action.label }) })) : null] }));
 }
 export default SectionHeader;

package/dist/Display/Display.Stat.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 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", variant: "dataLarge", children: value }), _jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label })] }));

package/dist/Display/Display.StatCard.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "./Display.Icon.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 StatCard({ label, value, icon, delta, deltaSuffix = "%", hint, trailing, className, testID, }) {
     const hasDelta = typeof delta === "number";

package/dist/Display/Display.StatusDot.js

@@ -1,7 +1,7 @@
 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 { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const statusColor = {
     online: theme.success,

package/dist/Display/Display.Story.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 { LinearGradient } from "expo-linear-gradient";
 import { Image, View } from "react-native";
 const RING = ["#F58529", "#DD2A7B"];

package/dist/Display/Display.StoryTray.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Story from "../Display/Display.Story";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import Icon from "./Display.Icon.js";
+import Story from "./Display.Story.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { Image, ScrollView, View } from "react-native";
 function CreateCard({ create, size }) {
     const w = size * 1.6;

package/dist/Display/Display.StoryViewer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { LinearGradient } from "expo-linear-gradient";
 import { Image, Modal, Pressable as RNPressable, View, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

package/dist/Display/Display.SwipeableRow.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import Icon from "./Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { Swipeable } from "react-native-gesture-handler";
+import Swipeable from "react-native-gesture-handler/ReanimatedSwipeable";
 function ActionButtons({ actions, onDone, }) {
     const theme = useTheme();
     return (_jsx(View, { style: { flexDirection: "row" }, children: actions.map((action, index) => (_jsxs(TouchableOpacity, { accessibilityLabel: action.label ?? "Acción", accessibilityRole: "button", activeOpacity: 0.8, onPress: () => {

package/dist/Display/Display.Tag.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 Tag({ label, leading, dotColor, className, testID }) {
     return (_jsxs(View, { className: cn("flex-row items-center self-start rounded-full bg-bg-muted px-2.5 py-1 gap-1.5", className), testID: testID, children: [dotColor ? (_jsx(View, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: dotColor } })) : null, leading, _jsx(Typography.Text, { className: "text-text-secondary text-xs font-medium", numberOfLines: 1, children: label })] }));

package/dist/Display/Display.Timeline.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "./Display.Icon.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 Timeline({ steps, current, className, testID }) {
     return (_jsx(View, { className: className, testID: testID, children: steps.map((step, index) => {

package/dist/Display/Display.Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Pressable from "../primitives/Pressable";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { View } from "react-native";
 function resolvePosition(placement) {

package/dist/Display/index.d.ts

@@ -1,40 +1,40 @@
-import AvatarGroup from "../Display/Display.AvatarGroup";
-import Badge, { type BadgeProps, BadgeVariants } from "../Display/Display.Badge";
-import Carousel from "../Display/Display.Carousel";
-import Chip from "../Display/Display.Chip";
-import { CircleButton } from "../Display/Display.CircleButton";
-import CopyableText from "../Display/Display.CopyableText";
-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";
-import ListItem from "../Display/Display.ListItem";
-import MediaCard from "../Display/Display.MediaCard";
-import MediaEmbed from "../Display/Display.MediaEmbed";
-import MenuButton from "../Display/Display.MenuButton";
-import { MenuCard } from "../Display/Display.MenuCard";
-import { MenuGrid } from "../Display/Display.MenuGrid";
-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";
-import SearchHistory from "../Display/Display.SearchHistory";
-import SectionHeader from "../Display/Display.SectionHeader";
-import Stat from "../Display/Display.Stat";
-import StatCard from "../Display/Display.StatCard";
-import StatusDot from "../Display/Display.StatusDot";
-import Story from "../Display/Display.Story";
-import StoryTray from "../Display/Display.StoryTray";
-import StoryViewer from "../Display/Display.StoryViewer";
-import SwipeableRow from "../Display/Display.SwipeableRow";
-import Tag from "../Display/Display.Tag";
-import Timeline from "../Display/Display.Timeline";
-import Tooltip from "../Display/Display.Tooltip";
+import AvatarGroup from "./Display.AvatarGroup.js";
+import Badge, { type BadgeProps, BadgeVariants } from "./Display.Badge.js";
+import Carousel from "./Display.Carousel.js";
+import Chip from "./Display.Chip.js";
+import { CircleButton } from "./Display.CircleButton.js";
+import CopyableText from "./Display.CopyableText.js";
+import CountRecords from "./Display.CountRecords.js";
+import DataTable from "./Display.DataTable.js";
+import Date from "./Display.Date.js";
+import Divider from "./Display.Divider.js";
+import GradientSurface from "./Display.GradientSurface.js";
+import IconBadge from "./Display.IconBadge.js";
+import DisplayImage from "./Display.Image.js";
+import KeyValue from "./Display.KeyValue.js";
+import ListItem from "./Display.ListItem.js";
+import MediaCard from "./Display.MediaCard.js";
+import MediaEmbed from "./Display.MediaEmbed.js";
+import MenuButton from "./Display.MenuButton.js";
+import { MenuCard } from "./Display.MenuCard.js";
+import { MenuGrid } from "./Display.MenuGrid.js";
+import Monetary from "./Display.Monetary.js";
+import Pattern from "./Display.Pattern.js";
+import PriceTag from "./Display.PriceTag.js";
+import ProductCard from "./Display.ProductCard.js";
+import Rating from "./Display.Rating.js";
+import SearchHistory from "./Display.SearchHistory.js";
+import SectionHeader from "./Display.SectionHeader.js";
+import Stat from "./Display.Stat.js";
+import StatCard from "./Display.StatCard.js";
+import StatusDot from "./Display.StatusDot.js";
+import Story from "./Display.Story.js";
+import StoryTray from "./Display.StoryTray.js";
+import StoryViewer from "./Display.StoryViewer.js";
+import SwipeableRow from "./Display.SwipeableRow.js";
+import Tag from "./Display.Tag.js";
+import Timeline from "./Display.Timeline.js";
+import Tooltip from "./Display.Tooltip.js";
 export declare const Display: {
     Badge: typeof Badge;
     BadgeVariants: typeof BadgeVariants;
@@ -42,11 +42,11 @@ export declare const Display: {
         children: import("react").ReactNode;
         className?: string;
     }) => import("react").JSX.Element) & {
-        Item: ({ title, children, defaultOpen, className, testID, }: import("../Display/Display.Accordion").AccordionItemProps) => import("react").JSX.Element;
+        Item: ({ title, children, defaultOpen, className, testID, }: import("./Display.Accordion.js").AccordionItemProps) => import("react").JSX.Element;
     };
-    Avatar: import("react").FC<import("../Display/Display.Avatar").AvatarProps>;
+    Avatar: import("react").FC<import("./Display.Avatar.js").AvatarProps>;
     AvatarGroup: typeof AvatarGroup;
-    Card: (({ padding, elevation, onPress, className, children, testID, }: import("../Display/Display.Card").CardProps) => import("react").JSX.Element) & {
+    Card: (({ padding, elevation, onPress, className, children, testID, }: import("./Display.Card.js").CardProps) => import("react").JSX.Element) & {
         Title: ({ children, className }: {
             children: import("react").ReactNode;
             className?: string;
@@ -84,9 +84,9 @@ export declare const Display: {
     Date: typeof Date;
     Divider: typeof Divider;
     GradientSurface: typeof GradientSurface;
-    Icon: import("react").FC<import("../Display/Display.Icon").IconProps>;
+    Icon: import("react").FC<import("./Display.Icon.js").IconProps>;
     CountRecords: typeof CountRecords;
-    Logo: import("react").FC<import("../Display/Display.Logo").LogoProps>;
+    Logo: import("react").FC<import("./Display.Logo.js").LogoProps>;
     CircleButton: typeof CircleButton;
     MenuButton: typeof MenuButton;
     MenuCard: typeof MenuCard;
@@ -95,7 +95,7 @@ export declare const Display: {
     Pattern: typeof Pattern;
 };
 export { type BadgeProps, BadgeVariants };
-export type { CircleButtonProps } from "../Display/Display.CircleButton";
-export type { MenuCardProps } from "../Display/Display.MenuCard";
-export type { MenuGridItem } from "../Display/Display.MenuGrid";
+export type { CircleButtonProps } from "./Display.CircleButton.js";
+export type { MenuCardProps } from "./Display.MenuCard.js";
+export type { MenuGridItem } from "./Display.MenuGrid.js";
 export default Display;

package/dist/Display/index.js

@@ -1,45 +1,45 @@
-import Accordion from "../Display/Display.Accordion";
-import Avatar from "../Display/Display.Avatar";
-import AvatarGroup from "../Display/Display.AvatarGroup";
-import Badge, { BadgeVariants, } from "../Display/Display.Badge";
-import Card from "../Display/Display.Card";
-import Carousel from "../Display/Display.Carousel";
-import Chip from "../Display/Display.Chip";
-import { CircleButton } from "../Display/Display.CircleButton";
-import CopyableText from "../Display/Display.CopyableText";
-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";
-import KeyValue from "../Display/Display.KeyValue";
-import ListItem from "../Display/Display.ListItem";
-import Logo from "../Display/Display.Logo";
-import MediaCard from "../Display/Display.MediaCard";
-import MediaEmbed from "../Display/Display.MediaEmbed";
-import MenuButton from "../Display/Display.MenuButton";
-import { MenuCard } from "../Display/Display.MenuCard";
-import { MenuGrid } from "../Display/Display.MenuGrid";
-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";
-import SearchHistory from "../Display/Display.SearchHistory";
-import SectionHeader from "../Display/Display.SectionHeader";
-import Stat from "../Display/Display.Stat";
-import StatCard from "../Display/Display.StatCard";
-import StatusDot from "../Display/Display.StatusDot";
-import Story from "../Display/Display.Story";
-import StoryTray from "../Display/Display.StoryTray";
-import StoryViewer from "../Display/Display.StoryViewer";
-import SwipeableRow from "../Display/Display.SwipeableRow";
-import Tag from "../Display/Display.Tag";
-import Timeline from "../Display/Display.Timeline";
-import Tooltip from "../Display/Display.Tooltip";
+import Accordion from "./Display.Accordion.js";
+import Avatar from "./Display.Avatar.js";
+import AvatarGroup from "./Display.AvatarGroup.js";
+import Badge, { BadgeVariants, } from "./Display.Badge.js";
+import Card from "./Display.Card.js";
+import Carousel from "./Display.Carousel.js";
+import Chip from "./Display.Chip.js";
+import { CircleButton } from "./Display.CircleButton.js";
+import CopyableText from "./Display.CopyableText.js";
+import CountRecords from "./Display.CountRecords.js";
+import DataTable from "./Display.DataTable.js";
+import Date from "./Display.Date.js";
+import Divider from "./Display.Divider.js";
+import GradientSurface from "./Display.GradientSurface.js";
+import Icon from "./Display.Icon.js";
+import IconBadge from "./Display.IconBadge.js";
+import DisplayImage from "./Display.Image.js";
+import KeyValue from "./Display.KeyValue.js";
+import ListItem from "./Display.ListItem.js";
+import Logo from "./Display.Logo.js";
+import MediaCard from "./Display.MediaCard.js";
+import MediaEmbed from "./Display.MediaEmbed.js";
+import MenuButton from "./Display.MenuButton.js";
+import { MenuCard } from "./Display.MenuCard.js";
+import { MenuGrid } from "./Display.MenuGrid.js";
+import Monetary from "./Display.Monetary.js";
+import Pattern from "./Display.Pattern.js";
+import PriceTag from "./Display.PriceTag.js";
+import ProductCard from "./Display.ProductCard.js";
+import Rating from "./Display.Rating.js";
+import SearchHistory from "./Display.SearchHistory.js";
+import SectionHeader from "./Display.SectionHeader.js";
+import Stat from "./Display.Stat.js";
+import StatCard from "./Display.StatCard.js";
+import StatusDot from "./Display.StatusDot.js";
+import Story from "./Display.Story.js";
+import StoryTray from "./Display.StoryTray.js";
+import StoryViewer from "./Display.StoryViewer.js";
+import SwipeableRow from "./Display.SwipeableRow.js";
+import Tag from "./Display.Tag.js";
+import Timeline from "./Display.Timeline.js";
+import Tooltip from "./Display.Tooltip.js";
 export const Display = {
     Badge,
     BadgeVariants,

package/dist/Feedback/ErrorBoundary.d.ts

@@ -13,6 +13,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
     handleRetry: () => void;
-    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 }
 export {};

package/dist/Feedback/ErrorBoundary.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import FeedbackError from "../Feedback/Feedback.Error";
+import FeedbackError from "./Feedback.Error.js";
 import { Component } from "react";
 export class ErrorBoundary extends Component {
     constructor(props) {

package/dist/Feedback/Feedback.Banner.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type { ReactNode } from "react";
 declare const banner: import("tailwind-variants").TVReturnType<{
     tone: {
@@ -46,7 +46,7 @@ declare const banner: import("tailwind-variants").TVReturnType<{
     root: string;
     title: string;
     message: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
         info: {
             root: string;
@@ -69,7 +69,7 @@ declare const banner: import("tailwind-variants").TVReturnType<{
     root: string;
     title: string;
     message: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface BannerProps extends VariantProps<typeof banner> {
     message: string;
     title?: string;

package/dist/Feedback/Feedback.Banner.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const banner = tv({
     slots: {

package/dist/Feedback/Feedback.DomainSplashScreen.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import Pattern from "../Display/Display.Pattern";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import Pattern from "../Display/Display.Pattern.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useCallback, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
@@ -58,7 +59,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: _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, "."] }))] }) })] }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [children, _jsx(Animated.View, { pointerEvents: isLoading ? "auto" : "none", style: [StyleSheet.absoluteFill, splashStyle], children: _jsxs(GradientSurface, { preset: "warm", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [_jsx(Pattern, { color: theme.primary, 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: theme.primary }, 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: {