@sincpro/mobile-ui 0.2.1 → 0.3.0

package/dist/Display/Display.Chip.d.ts

@@ -0,0 +1,105 @@
+import { type VariantProps } from "../theme/tw";
+declare const chip: import("tailwind-variants").TVReturnType<{
+    tone: {
+        neutral: {
+            root: string;
+            label: string;
+        };
+        primary: {
+            root: string;
+            label: string;
+        };
+        success: {
+            root: string;
+            label: string;
+        };
+        warning: {
+            root: string;
+            label: string;
+        };
+        danger: {
+            root: string;
+            label: string;
+        };
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+}, undefined, {
+    tone: {
+        neutral: {
+            root: string;
+            label: string;
+        };
+        primary: {
+            root: string;
+            label: string;
+        };
+        success: {
+            root: string;
+            label: string;
+        };
+        warning: {
+            root: string;
+            label: string;
+        };
+        danger: {
+            root: string;
+            label: string;
+        };
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    tone: {
+        neutral: {
+            root: string;
+            label: string;
+        };
+        primary: {
+            root: string;
+            label: string;
+        };
+        success: {
+            root: string;
+            label: string;
+        };
+        warning: {
+            root: string;
+            label: string;
+        };
+        danger: {
+            root: string;
+            label: string;
+        };
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface ChipProps extends VariantProps<typeof chip> {
+    label: string;
+    onPress?: () => void;
+    onRemove?: () => void;
+    className?: string;
+    testID?: string;
+}
+declare function Chip({ label, tone, selected, onPress, onRemove, className, testID, }: ChipProps): import("react").JSX.Element;
+export default Chip;
+export { Chip };

package/dist/Display/Display.Chip.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { Text, View } from "react-native";
+const chip = tv({
+    slots: {
+        root: "flex-row items-center self-start rounded-full px-3 py-1.5 gap-1",
+        label: "text-xs font-medium",
+    },
+    variants: {
+        tone: {
+            neutral: { root: "bg-bg-muted", label: "text-text-secondary" },
+            primary: { root: "bg-bg-accent", label: "text-text-accent" },
+            success: { root: "bg-success-light", label: "text-success" },
+            warning: { root: "bg-warning-light", label: "text-warning" },
+            danger: { root: "bg-danger-light", label: "text-danger" },
+        },
+        selected: {
+            true: { root: "border border-primary" },
+        },
+    },
+    defaultVariants: {
+        tone: "neutral",
+        selected: false,
+    },
+});
+const removeIconColor = {
+    neutral: theme.text.secondary,
+    primary: theme.text.accent,
+    success: theme.success,
+    warning: theme.warning,
+    danger: theme.danger,
+};
+function Chip({ label, tone = "neutral", selected = false, onPress, onRemove, className, testID, }) {
+    const styles = chip({ tone, selected });
+    const content = (_jsxs(_Fragment, { children: [_jsx(Text, { className: styles.label(), numberOfLines: 1, children: label }), onRemove ? (_jsx(Pressable, { accessibilityLabel: `Quitar ${label}`, hitSlop: 8, onPress: onRemove, children: _jsx(Icon, { color: removeIconColor[tone ?? "neutral"], name: "close", size: 14 }) })) : null] }));
+    if (onPress) {
+        return (_jsx(Pressable, { accessibilityLabel: label, accessibilityState: { selected }, className: styles.root({ className }), onPress: onPress, testID: testID, children: content }));
+    }
+    return (_jsx(View, { className: styles.root({ className }), testID: testID, children: content }));
+}
+export default Chip;
+export { Chip };

package/dist/Display/Display.CopyableText.d.ts

@@ -9,5 +9,5 @@ type CopyableTextProps = {
     label?: string;
     className?: string;
 };
-declare function CopyableText({ value, getValue, label, className }: CopyableTextProps): import("react/jsx-runtime").JSX.Element;
+declare function CopyableText({ value, getValue, label, className }: CopyableTextProps): import("react").JSX.Element;
 export default CopyableText;

package/dist/Display/Display.CountRecords.d.ts

@@ -4,5 +4,5 @@ interface IProps {
     withPadding?: boolean;
     className?: string;
 }
-declare function CountRecords({ name, count, withPadding, className }: IProps): import("react/jsx-runtime").JSX.Element;
+declare function CountRecords({ name, count, withPadding, className }: IProps): import("react").JSX.Element;
 export default CountRecords;

package/dist/Display/Display.DataTable.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface DataTableColumn<T> {
+    key: string;
+    header: string;
+    align?: "left" | "right" | "center";
+    flex?: number;
+    render?: (row: T) => ReactNode;
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    keyExtractor: (row: T, index: number) => string;
+    footer?: ReactNode;
+    emptyText?: string;
+    className?: string;
+    testID?: string;
+}
+declare function DataTable<T>({ columns, data, keyExtractor, footer, emptyText, className, testID, }: DataTableProps<T>): import("react").JSX.Element;
+export default DataTable;

package/dist/Display/Display.DataTable.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { ScrollView, View } from "react-native";
+const alignClass = {
+    left: "text-left",
+    right: "text-right",
+    center: "text-center",
+};
+function cellValue(col, row) {
+    if (col.render)
+        return col.render(row);
+    const raw = row[col.key];
+    return raw == null ? "" : String(raw);
+}
+function DataTable({ columns, data, keyExtractor, footer, emptyText = "Sin datos", className, testID, }) {
+    return (_jsxs(View, { className: cn("bg-bg-card rounded-lg border border-border-light overflow-hidden", className), testID: testID, children: [_jsx(View, { className: "flex-row bg-bg-muted px-3 py-2.5", children: columns.map((col) => (_jsx(View, { style: { flex: col.flex ?? 1 }, children: _jsx(Typography.Text, { className: cn("text-text-secondary font-semibold", alignClass[col.align ?? "left"]), numberOfLines: 1, variant: "caption", children: col.header }) }, col.key))) }), data.length === 0 ? (_jsx(View, { className: "px-3 py-6 items-center", children: _jsx(Typography.Text, { className: "text-text-tertiary", variant: "bodySmall", children: emptyText }) })) : (_jsx(ScrollView, { children: data.map((row, index) => (_jsx(View, { className: "flex-row px-3 py-3 border-t border-border-light", children: columns.map((col) => {
+                        const content = cellValue(col, row);
+                        return (_jsx(View, { style: { flex: col.flex ?? 1 }, children: typeof content === "string" || typeof content === "number" ? (_jsx(Typography.Text, { className: cn("text-text-primary", alignClass[col.align ?? "left"]), variant: "bodySmall", children: content })) : (content) }, col.key));
+                    }) }, keyExtractor(row, index)))) })), footer ? (_jsx(View, { className: "flex-row px-3 py-3 border-t border-border-default bg-bg-muted", children: footer })) : null] }));
+}
+export default DataTable;

package/dist/Display/Display.Date.d.ts

@@ -1,6 +1,13 @@
 import { typographyVariants } from "../theme/typography";
-import type { StyleProp, TextStyle } from "react-native";
+import { type StyleProp, type TextStyle } from "react-native";
 type DateFormat = "short" | "long" | "numeric";
+/**
+ * Visual layout:
+ * - `inline` (default): plain text, backward-compatible with previous usage.
+ * - `withIcon`: leading calendar/clock icon + text — the app-like default.
+ * - `pill`: tokenized rounded chip with icon (compact metadata).
+ */
+type DateVariant = "inline" | "withIcon" | "pill";
 interface DateFieldProps {
     value: string | Date | null | undefined;
     format?: DateFormat;
@@ -13,6 +20,12 @@ interface DateFieldProps {
     className?: string;
     showTime?: boolean;
     timezone?: string;
+    /** App-like layout. Default `inline` (no visual change vs. previous version). */
+    variant?: DateVariant;
+    /** Override the leading icon (ionicons). Defaults: calendar, or clock if `showTime`. */
+    icon?: string;
+    /** Show relative time ("hace 2 h") instead of the absolute date. */
+    relative?: boolean;
 }
-declare function DateField({ value, format, prefix, textVariant, color, style, semibold, bold, className, showTime, timezone, }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function DateField({ value, format, prefix, textVariant, color, style, semibold, bold, className, showTime, timezone, variant, icon, relative, }: DateFieldProps): import("react").JSX.Element;
 export default DateField;

package/dist/Display/Display.Date.js

@@ -1,13 +1,43 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+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 { formatDate, formatDateWithDefaultTimezone } from "../utils/date";
-function DateField({ value, format = "short", prefix = "", textVariant = "body", color, style = {}, semibold = false, bold = false, className, showTime = true, timezone, }) {
+import { View } from "react-native";
+function relativeTime(value) {
+    const then = new Date(value).getTime();
+    const diffSec = Math.round((Date.now() - then) / 1000);
+    const abs = Math.abs(diffSec);
+    const fut = diffSec < 0;
+    const fmt = (n, unit) => (fut ? `en ${n} ${unit}` : `hace ${n} ${unit}`);
+    if (abs < 60)
+        return "ahora";
+    if (abs < 3600)
+        return fmt(Math.floor(abs / 60), "min");
+    if (abs < 86400)
+        return fmt(Math.floor(abs / 3600), "h");
+    if (abs < 604800)
+        return fmt(Math.floor(abs / 86400), "d");
+    return fmt(Math.floor(abs / 604800), "sem");
+}
+function DateField({ value, format = "short", prefix = "", textVariant = "body", color, style = {}, semibold = false, bold = false, className, showTime = true, timezone, variant = "inline", icon, relative = false, }) {
     const locale = "es-CR";
-    const formatted = !value
+    const absolute = !value
         ? "-"
         : timezone
             ? formatDate(value, timezone, { showTime, locale })
             : formatDateWithDefaultTimezone(value, { showTime, locale });
-    return (_jsx(Typography.Text, { bold: bold, className: className, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: prefix ? `${prefix}${formatted}` : formatted }));
+    const formatted = value && relative ? relativeTime(value) : absolute;
+    const text = prefix ? `${prefix}${formatted}` : formatted;
+    const iconName = icon ?? (showTime && !relative ? "time-outline" : "calendar-outline");
+    const label = (_jsx(Typography.Text, { bold: bold, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: text }));
+    if (variant === "inline") {
+        return (_jsx(Typography.Text, { bold: bold, className: className, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: text }));
+    }
+    if (variant === "pill") {
+        return (_jsxs(View, { className: cn("flex-row items-center self-start gap-1.5 rounded-full bg-bg-muted px-2.5 py-1", className), children: [_jsx(Icon, { color: color ?? theme.icon.secondary, name: iconName, size: 14 }), label] }));
+    }
+    return (_jsxs(View, { className: cn("flex-row items-center gap-1.5", className), children: [_jsx(Icon, { color: color ?? theme.icon.secondary, name: iconName, size: 16 }), label] }));
 }
 export default DateField;

package/dist/Display/Display.Divider.d.ts

@@ -40,5 +40,5 @@ interface DividerProps extends VariantProps<typeof divider> {
     thickness?: number;
     className?: string;
 }
-declare function Divider({ thickness, spacing, colorScheme, className }: DividerProps): import("react/jsx-runtime").JSX.Element;
+declare function Divider({ thickness, spacing, colorScheme, className }: DividerProps): import("react").JSX.Element;
 export default Divider;

package/dist/Display/Display.IconBadge.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface IconBadgeProps {
+    children: ReactNode;
+    count?: number;
+    max?: number;
+    dot?: boolean;
+    color?: string;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare function IconBadge({ children, count, max, dot, color, onPress, accessibilityLabel, testID, }: IconBadgeProps): import("react").JSX.Element;
+export default IconBadge;

package/dist/Display/Display.IconBadge.js

@@ -0,0 +1,30 @@
+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 { View } from "react-native";
+function IconBadge({ children, count, max = 99, dot = false, color, onPress, accessibilityLabel, testID, }) {
+    const showCount = typeof count === "number" && count > 0;
+    const showBadge = dot || showCount;
+    const label = showCount ? (count > max ? `${max}+` : String(count)) : "";
+    const badgeColor = color ?? theme.danger;
+    const content = (_jsxs(View, { style: { position: "relative" }, children: [children, showBadge ? (_jsx(View, { style: {
+                    position: "absolute",
+                    top: -4,
+                    right: -6,
+                    minWidth: dot ? 10 : 18,
+                    height: dot ? 10 : 18,
+                    borderRadius: 999,
+                    paddingHorizontal: dot ? 0 : 4,
+                    backgroundColor: badgeColor,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderWidth: 2,
+                    borderColor: theme.bg.card,
+                }, children: !dot && label ? (_jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 10, lineHeight: 12 }, children: label })) : null })) : null] }));
+    if (onPress) {
+        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, hitSlop: 10, onPress: onPress, testID: testID, children: content }));
+    }
+    return (_jsx(View, { accessibilityLabel: accessibilityLabel, testID: testID, children: content }));
+}
+export default IconBadge;

package/dist/Display/Display.Image.d.ts

@@ -0,0 +1,15 @@
+import { type ImageResizeMode, type ImageSourcePropType, type ImageStyle } from "react-native";
+export interface DisplayImageProps {
+    source: ImageSourcePropType;
+    width?: number | `${number}%`;
+    height?: number;
+    aspectRatio?: number;
+    radius?: number;
+    resizeMode?: ImageResizeMode;
+    fallbackIcon?: string;
+    className?: string;
+    style?: ImageStyle;
+    testID?: string;
+}
+declare function DisplayImage({ source, width, height, aspectRatio, radius, resizeMode, fallbackIcon, className, style, testID, }: DisplayImageProps): import("react").JSX.Element;
+export default DisplayImage;

package/dist/Display/Display.Image.js

@@ -0,0 +1,17 @@
+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 { 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, }) {
+    const [loading, setLoading] = useState(true);
+    const [failed, setFailed] = useState(false);
+    const dimensions = { width, height, aspectRatio, borderRadius: radius };
+    return (_jsx(View, { className: cn("overflow-hidden bg-bg-muted", className), style: dimensions, testID: testID, children: failed ? (_jsx(View, { className: "flex-1 items-center justify-center", children: _jsx(Icon, { color: theme.icon.disabled, name: fallbackIcon, size: 32 }) })) : (_jsxs(_Fragment, { children: [_jsx(Image, { onError: () => {
+                        setFailed(true);
+                        setLoading(false);
+                    }, onLoadEnd: () => setLoading(false), resizeMode: resizeMode, source: source, style: [{ width: "100%", height: "100%" }, style] }), loading ? (_jsx(View, { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: _jsx(Skeleton, { height: "100%", radius: radius, width: "100%" }) })) : null] })) }));
+}
+export default DisplayImage;

package/dist/Display/Display.KeyValue.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface KeyValueProps {
+    label: string;
+    value?: ReactNode;
+    align?: "row" | "stacked";
+    className?: string;
+    testID?: string;
+}
+declare function KeyValue({ label, value, align, className, testID }: KeyValueProps): import("react").JSX.Element;
+export default KeyValue;

package/dist/Display/Display.KeyValue.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 KeyValue({ label, value, align = "row", className, testID }) {
+    const isRow = align === "row";
+    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, children: value })) : (value)] }));
+}
+export default KeyValue;

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface ListItemProps {
+    title: string;
+    subtitle?: string;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    onPress?: () => void;
+    showDivider?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function ListItem({ title, subtitle, leading, trailing, onPress, showDivider, className, testID, }: ListItemProps): import("react").JSX.Element;
+export default ListItem;

package/dist/Display/Display.ListItem.js

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

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.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: "body", original: "caption" },
+    md: { price: "subtitle", original: "bodySmall" },
+    lg: { price: "h3", original: "body" },
+};
+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;