@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/Display/Display.Logo.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { getBrandingLogo } from "../branding";
 import { tv } from "../theme/tw";
 import { Image, View } from "react-native";
 const logo = tv({
@@ -31,6 +32,7 @@ function renderImage(imageClassName, source) {
 }
 const Logo = ({ source, size = "medium", className }) => {
     const styles = logo({ size });
-    return (_jsx(View, { className: styles.container({ className }), children: renderImage(styles.image(), source) }));
+    const resolvedSource = source ?? getBrandingLogo();
+    return (_jsx(View, { className: styles.container({ className }), children: renderImage(styles.image(), resolvedSource) }));
 };
 export default Logo;

package/dist/Display/Display.MediaCard.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
+export interface MediaCardProps {
+    image: ImageSourcePropType;
+    title?: string;
+    subtitle?: string;
+    badge?: ReactNode;
+    overlay?: ReactNode;
+    aspectRatio?: number;
+    height?: number;
+    radius?: number;
+    onPress?: () => void;
+    className?: string;
+    testID?: string;
+}
+declare function MediaCard({ image, title, subtitle, badge, overlay, aspectRatio, height, radius, onPress, className, testID, }: MediaCardProps): import("react").JSX.Element;
+export default MediaCard;

package/dist/Display/Display.MediaCard.js

@@ -0,0 +1,12 @@
+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 { 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, }) {
+    const Wrapper = onPress ? Pressable : View;
+    return (_jsxs(Wrapper, { accessibilityLabel: title, accessibilityRole: onPress ? "button" : undefined, className: cn("overflow-hidden", className), onPress: onPress, style: { borderRadius: radius }, testID: testID, children: [_jsx(DisplayImage, { aspectRatio: height ? undefined : aspectRatio, height: height, radius: radius, source: image }), badge ? _jsx(View, { className: "absolute top-3 left-3", children: badge }) : null, title || subtitle || overlay ? (_jsxs(LinearGradient, { colors: ["transparent", "rgba(0,0,0,0.75)"], style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: 12 }, children: [overlay, title ? (_jsx(Typography.Text, { className: "text-white", numberOfLines: 1, semibold: true, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: "text-white/80", numberOfLines: 1, variant: "bodySmall", children: subtitle })) : null] })) : null] }));
+}
+export default MediaCard;

package/dist/Display/Display.MediaEmbed.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
+export interface MediaEmbedProps {
+    thumbnail: ImageSourcePropType;
+    onPress: () => void;
+    duration?: string;
+    title?: string;
+    source?: ReactNode;
+    aspectRatio?: number;
+    className?: string;
+    testID?: string;
+}
+/**
+ * Linkable short-video card (Short/TikTok/Reel): thumbnail + play + duration.
+ * Opens the content on press (onPress). True inline embedding needs WebView (optional
+ * peer) — this is the lightweight/portable piece; wrap it with your player if needed.
+ */
+declare function MediaEmbed({ thumbnail, onPress, duration, title, source, aspectRatio, className, testID, }: MediaEmbedProps): import("react").JSX.Element;
+export default MediaEmbed;

package/dist/Display/Display.MediaEmbed.js

@@ -0,0 +1,39 @@
+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 { View } from "react-native";
+/**
+ * Linkable short-video card (Short/TikTok/Reel): thumbnail + play + duration.
+ * Opens the content on press (onPress). True inline embedding needs WebView (optional
+ * peer) — this is the lightweight/portable piece; wrap it with your player if needed.
+ */
+function MediaEmbed({ thumbnail, onPress, duration, title, source, aspectRatio = 9 / 16, className, testID, }) {
+    return (_jsxs(Pressable, { accessibilityLabel: title ?? "Reproducir video", accessibilityRole: "button", className: cn("overflow-hidden rounded-xl", className), onPress: onPress, testID: testID, children: [_jsx(DisplayImage, { aspectRatio: aspectRatio, radius: 12, source: thumbnail }), _jsx(View, { style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(View, { style: {
+                        width: 44,
+                        height: 44,
+                        borderRadius: 22,
+                        backgroundColor: "rgba(0,0,0,0.55)",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(Icon, { color: theme.text.inverse, name: "play", size: 22 }) }) }), duration ? (_jsx(View, { className: "rounded", style: {
+                    position: "absolute",
+                    bottom: 8,
+                    right: 8,
+                    backgroundColor: "rgba(0,0,0,0.7)",
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                }, children: _jsx(Typography.Text, { className: "text-white", variant: "caption", children: duration }) })) : null, source ? (_jsx(View, { style: { position: "absolute", top: 8, left: 8 }, children: source })) : null, title ? (_jsx(View, { style: { position: "absolute", left: 8, right: 8, bottom: 8 }, children: _jsx(Typography.Text, { className: "text-white", numberOfLines: 2, variant: "bodySmall", children: title }) })) : null] }));
+}
+export default MediaEmbed;

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

@@ -99,5 +99,5 @@ interface MenuButtonProps extends VariantProps<typeof menuButton> {
     rightComponent?: ReactNode;
     className?: string;
 }
-declare function MenuButton({ icon: Icon, label, description, onPress, rightComponent, showDivider, variant, disabled, className, }: MenuButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function MenuButton({ icon: Icon, label, description, onPress, rightComponent, showDivider, variant, disabled, className, }: MenuButtonProps): import("react").JSX.Element;
 export default MenuButton;

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

@@ -15,5 +15,5 @@ interface MonetaryFieldProps {
     bold?: boolean;
     className?: string;
 }
-declare function MonetaryField({ value, currencySymbol, prefix, color, textVariant, style, symbolColor, semibold, bold, className, }: MonetaryFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function MonetaryField({ value, currencySymbol, prefix, color, textVariant, style, symbolColor, semibold, bold, className, }: MonetaryFieldProps): import("react").JSX.Element;
 export default MonetaryField;

package/dist/Display/Display.Monetary.js

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

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

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

package/dist/Display/Display.Pattern.js

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

package/dist/Display/Display.PriceTag.d.ts

@@ -0,0 +1,10 @@
+export interface PriceTagProps {
+    amount: number;
+    originalAmount?: number;
+    currency?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    testID?: string;
+}
+declare function PriceTag({ amount, originalAmount, currency, size, className, testID, }: PriceTagProps): import("react").JSX.Element;
+export default PriceTag;

package/dist/Display/Display.PriceTag.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+const sizeMap = {
+    sm: { price: "data", original: "captionSmall" },
+    md: { price: "data", original: "caption" },
+    lg: { price: "dataLarge", original: "data" },
+};
+function format(amount, currency) {
+    const formatted = amount.toLocaleString("es-BO", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+    return `${currency} ${formatted}`;
+}
+function PriceTag({ amount, originalAmount, currency = "Bs", size = "md", className, testID, }) {
+    const variants = sizeMap[size];
+    const hasDiscount = typeof originalAmount === "number" && originalAmount > amount;
+    const off = hasDiscount ? Math.round((1 - amount / originalAmount) * 100) : 0;
+    return (_jsxs(View, { className: cn("flex-row items-baseline gap-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: variants.price, children: format(amount, currency) }), hasDiscount ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: "text-text-tertiary", style: { textDecorationLine: "line-through" }, variant: variants.original, children: format(originalAmount, currency) }), _jsx(View, { className: "bg-danger-light rounded px-1.5 py-0.5", children: _jsxs(Typography.Text, { className: "text-danger font-semibold", variant: "caption", children: ["-", off, "%"] }) })] })) : null] }));
+}
+export default PriceTag;

package/dist/Display/Display.ProductCard.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
+export interface ProductCardProps {
+    title: string;
+    image: ImageSourcePropType;
+    price: number;
+    originalPrice?: number;
+    currency?: string;
+    subtitle?: string;
+    rating?: number;
+    badge?: ReactNode;
+    onPress?: () => void;
+    className?: string;
+    testID?: string;
+}
+declare function ProductCard({ title, image, price, originalPrice, currency, subtitle, rating, badge, onPress, className, testID, }: ProductCardProps): import("react").JSX.Element;
+export default ProductCard;

package/dist/Display/Display.ProductCard.js

@@ -0,0 +1,13 @@
+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 { 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" }) })] })] }));
+}
+export default ProductCard;

package/dist/Display/Display.Rating.d.ts

@@ -0,0 +1,11 @@
+export interface RatingProps {
+    value: number;
+    max?: number;
+    size?: number;
+    onChange?: (value: number) => void;
+    readOnly?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function Rating({ value, max, size, onChange, readOnly, className, testID, }: RatingProps): import("react").JSX.Element;
+export default Rating;

package/dist/Display/Display.Rating.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { View } from "react-native";
+function Rating({ value, max = 5, size = 24, onChange, readOnly = false, className, testID, }) {
+    const interactive = !readOnly && !!onChange;
+    return (_jsx(View, { accessibilityLabel: `Calificación ${value} de ${max}`, accessibilityRole: interactive ? "adjustable" : "image", className: className, style: { flexDirection: "row", gap: 4 }, testID: testID, children: Array.from({ length: max }).map((_, index) => {
+            const filled = index < Math.round(value);
+            const star = (_jsx(Icon, { color: filled ? theme.warning : theme.icon.disabled, name: filled ? "star" : "star-outline", size: size }));
+            if (!interactive)
+                return _jsx(View, { children: star }, index);
+            return (_jsx(Pressable, { accessibilityLabel: `${index + 1} estrellas`, hitSlop: 6, onPress: () => onChange?.(index + 1), children: star }, index));
+        }) }));
+}
+export default Rating;

package/dist/Display/Display.SearchHistory.d.ts

@@ -0,0 +1,12 @@
+export interface SearchHistoryProps {
+    items: string[];
+    onSelect: (value: string) => void;
+    onRemove: (value: string) => void;
+    onClearAll?: () => void;
+    title?: string;
+    icon?: string;
+    className?: string;
+    testID?: string;
+}
+declare function SearchHistory({ items, onSelect, onRemove, onClearAll, title, icon, className, testID, }: SearchHistoryProps): import("react").JSX.Element | null;
+export default SearchHistory;

package/dist/Display/Display.SearchHistory.js

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

package/dist/Display/Display.SectionHeader.d.ts

@@ -0,0 +1,13 @@
+export interface SectionHeaderAction {
+    label: string;
+    onPress: () => void;
+}
+export interface SectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    action?: SectionHeaderAction;
+    className?: string;
+    testID?: string;
+}
+declare function SectionHeader({ title, subtitle, action, className, testID }: SectionHeaderProps): import("react").JSX.Element;
+export default SectionHeader;

package/dist/Display/Display.SectionHeader.js

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

package/dist/Display/Display.Stat.d.ts

@@ -0,0 +1,10 @@
+export interface StatProps {
+    value: string | number;
+    label: string;
+    align?: "center" | "start";
+    className?: string;
+    testID?: string;
+}
+declare function Stat({ value, label, align, className, testID }: StatProps): import("react").JSX.Element;
+export default Stat;
+export { Stat };

package/dist/Display/Display.Stat.js

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

package/dist/Display/Display.StatCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export interface StatCardProps {
+    label: string;
+    value: string | number;
+    icon?: string;
+    delta?: number;
+    deltaSuffix?: string;
+    hint?: string;
+    trailing?: ReactNode;
+    className?: string;
+    testID?: string;
+}
+declare function StatCard({ label, value, icon, delta, deltaSuffix, hint, trailing, className, testID, }: StatCardProps): import("react").JSX.Element;
+export default StatCard;

package/dist/Display/Display.StatCard.js

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

package/dist/Display/Display.StatusDot.d.ts

@@ -0,0 +1,11 @@
+export type StatusKind = "online" | "offline" | "busy" | "away";
+export interface StatusDotProps {
+    status?: StatusKind;
+    label?: string;
+    size?: number;
+    color?: string;
+    className?: string;
+    testID?: string;
+}
+declare function StatusDot({ status, label, size, color, className, testID, }: StatusDotProps): import("react").JSX.Element;
+export default StatusDot;

package/dist/Display/Display.StatusDot.js

@@ -0,0 +1,28 @@
+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 { View } from "react-native";
+const statusColor = {
+    online: theme.success,
+    offline: theme.icon.disabled,
+    busy: theme.danger,
+    away: theme.warning,
+};
+const statusLabel = {
+    online: "En línea",
+    offline: "Desconectado",
+    busy: "Ocupado",
+    away: "Ausente",
+};
+function StatusDot({ status = "online", label, size = 8, color, className, testID, }) {
+    const dotColor = color ?? statusColor[status];
+    const text = label ?? statusLabel[status];
+    return (_jsxs(View, { accessibilityLabel: text, className: cn("flex-row items-center gap-1.5", className), testID: testID, children: [_jsx(View, { style: {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    backgroundColor: dotColor,
+                } }), text ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: text })) : null] }));
+}
+export default StatusDot;

package/dist/Display/Display.Story.d.ts

@@ -0,0 +1,15 @@
+import { type ImageSourcePropType } from "react-native";
+export interface StoryProps {
+    image: ImageSourcePropType;
+    label?: string;
+    seen?: boolean;
+    variant?: "circle" | "card";
+    size?: number;
+    avatar?: ImageSourcePropType;
+    /** Mostrar el círculo del autor en la card. `false` = card de historia sin avatar. */
+    showAvatar?: boolean;
+    onPress?: () => void;
+    testID?: string;
+}
+declare function Story({ image, label, seen, variant, size, avatar, showAvatar, onPress, testID, }: StoryProps): import("react").JSX.Element;
+export default Story;

package/dist/Display/Display.Story.js

@@ -0,0 +1,43 @@
+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 { LinearGradient } from "expo-linear-gradient";
+import { Image, View } from "react-native";
+const RING = ["#F58529", "#DD2A7B"];
+function Story({ image, label, seen = false, variant = "circle", size = 68, avatar, showAvatar = true, onPress, testID, }) {
+    if (variant === "card") {
+        return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { width: size * 1.6, borderRadius: 14, overflow: "hidden" }, testID: testID, children: [_jsx(Image, { source: image, style: { width: "100%", height: size * 2.6 } }), showAvatar ? (_jsx(View, { style: {
+                        position: "absolute",
+                        top: 8,
+                        left: 8,
+                        borderRadius: 999,
+                        borderWidth: 3,
+                        borderColor: seen ? theme.border.strong : theme.primary,
+                    }, children: _jsx(Image, { source: avatar ?? image, style: { width: 34, height: 34, borderRadius: 17 } }) })) : null, label ? (_jsx(LinearGradient, { colors: ["transparent", "rgba(0,0,0,0.7)"], style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        padding: 8,
+                        paddingTop: 24,
+                    }, children: _jsx(Typography.Text, { className: "text-white", numberOfLines: 2, semibold: true, variant: "caption", children: label }) })) : null] }));
+    }
+    const ringPadding = 3;
+    const innerSize = size - ringPadding * 2 - 4;
+    return (_jsxs(Pressable, { accessibilityLabel: label, accessibilityRole: "button", onPress: onPress, style: { alignItems: "center", width: size + 8, gap: 4 }, testID: testID, children: [_jsx(LinearGradient, { colors: seen ? [theme.border.strong, theme.border.strong] : RING, style: {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(View, { style: {
+                        width: innerSize + 4,
+                        height: innerSize + 4,
+                        borderRadius: (innerSize + 4) / 2,
+                        backgroundColor: theme.bg.card,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(Image, { source: image, style: { width: innerSize, height: innerSize, borderRadius: innerSize / 2 } }) }) }), label ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: label })) : null] }));
+}
+export default Story;

package/dist/Display/Display.StoryTray.d.ts

@@ -0,0 +1,26 @@
+import { type ImageSourcePropType } from "react-native";
+export interface StoryTrayItem {
+    id: string;
+    image: ImageSourcePropType;
+    label?: string;
+    avatar?: ImageSourcePropType;
+    seen?: boolean;
+}
+export interface StoryTrayCreate {
+    label?: string;
+    image?: ImageSourcePropType;
+    onPress: () => void;
+}
+export interface StoryTrayProps {
+    stories: StoryTrayItem[];
+    onStoryPress?: (item: StoryTrayItem) => void;
+    create?: StoryTrayCreate;
+    variant?: "circle" | "card";
+    size?: number;
+    /** Mostrar el avatar del autor en cada card (solo variant="card"). */
+    showAvatar?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function StoryTray({ stories, onStoryPress, create, variant, size, showAvatar, className, testID, }: StoryTrayProps): import("react").JSX.Element;
+export default StoryTray;

package/dist/Display/Display.StoryTray.js

@@ -0,0 +1,43 @@
+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 { Image, ScrollView, View } from "react-native";
+function CreateCard({ create, size }) {
+    const w = size * 1.6;
+    return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: {
+            width: w,
+            borderRadius: 14,
+            overflow: "hidden",
+            backgroundColor: theme.bg.card,
+            borderWidth: 1,
+            borderColor: theme.border.light,
+        }, children: [create.image ? (_jsx(Image, { source: create.image, style: { width: "100%", height: size * 1.7 } })) : (_jsx(View, { style: { width: "100%", height: size * 1.7, backgroundColor: theme.bg.muted } })), _jsxs(View, { style: { alignItems: "center", paddingVertical: 14 }, children: [_jsx(View, { style: {
+                            position: "absolute",
+                            top: -16,
+                            width: 32,
+                            height: 32,
+                            borderRadius: 16,
+                            backgroundColor: theme.primary,
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderWidth: 3,
+                            borderColor: theme.bg.card,
+                        }, children: _jsx(Icon, { color: theme.text.inverse, name: "add", size: 20 }) }), _jsx(Typography.Text, { className: "text-text-primary mt-2", semibold: true, variant: "caption", children: create.label ?? "Crear historia" })] })] }));
+}
+function CreateCircle({ create, size }) {
+    return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: { alignItems: "center", width: size + 8, gap: 4 }, children: [_jsx(View, { style: {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    backgroundColor: theme.bg.muted,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(Icon, { color: theme.primary, name: "add-circle", size: size * 0.5 }) }), _jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: create.label ?? "Crear" })] }));
+}
+function StoryTray({ stories, onStoryPress, create, variant = "card", size = 68, showAvatar = true, className, testID, }) {
+    return (_jsxs(ScrollView, { className: className, contentContainerStyle: { gap: 8, paddingHorizontal: 12, paddingVertical: 4 }, horizontal: true, showsHorizontalScrollIndicator: false, testID: testID, children: [create ? (variant === "card" ? (_jsx(CreateCard, { create: create, size: size })) : (_jsx(CreateCircle, { create: create, size: size }))) : null, stories.map((item) => (_jsx(Story, { avatar: item.avatar, image: item.image, label: item.label, onPress: () => onStoryPress?.(item), seen: item.seen, showAvatar: showAvatar, size: size, variant: variant }, item.id)))] }));
+}
+export default StoryTray;

package/dist/Display/Display.StoryViewer.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
+export interface StoryViewerSlide {
+    image: ImageSourcePropType;
+}
+export interface StoryViewerProps {
+    visible: boolean;
+    slides: StoryViewerSlide[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    time?: string;
+    avatar?: ImageSourcePropType;
+    progress?: number;
+    muted?: boolean;
+    paused?: boolean;
+    onToggleMute?: () => void;
+    onTogglePause?: () => void;
+    onMore?: () => void;
+    footer?: ReactNode;
+    testID?: string;
+}
+declare function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, subtitle, time, avatar, progress, muted, paused, onToggleMute, onTogglePause, onMore, footer, testID, }: StoryViewerProps): import("react").JSX.Element | null;
+export default StoryViewer;