@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/Display/Display.Carousel.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface CarouselProps<T> {
+    data: T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    keyExtractor: (item: T, index: number) => string;
+    itemWidth: number;
+    gap?: number;
+    showDots?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function Carousel<T>({ data, renderItem, keyExtractor, itemWidth, gap, showDots, className, testID, }: CarouselProps<T>): import("react").JSX.Element;
+export default Carousel;

package/dist/Display/Display.Carousel.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { useState } from "react";
+import { ScrollView, View, } from "react-native";
+function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDots = true, className, testID, }) {
+    const [active, setActive] = useState(0);
+    const snap = itemWidth + gap;
+    const onScroll = (e) => {
+        const index = Math.round(e.nativeEvent.contentOffset.x / snap);
+        if (index !== active)
+            setActive(index);
+    };
+    return (_jsxs(View, { className: className, testID: testID, children: [_jsx(ScrollView, { decelerationRate: "fast", horizontal: true, onMomentumScrollEnd: onScroll, showsHorizontalScrollIndicator: false, snapToInterval: snap, children: data.map((item, index) => (_jsx(View, { style: { width: itemWidth, marginRight: index < data.length - 1 ? gap : 0 }, children: renderItem(item, index) }, keyExtractor(item, index)))) }), showDots && data.length > 1 ? (_jsx(View, { className: "flex-row justify-center gap-1.5 mt-3", children: data.map((item, index) => (_jsx(View, { className: cn("h-1.5 rounded-full"), style: {
+                        width: index === active ? 16 : 6,
+                        backgroundColor: index === active ? theme.primary : theme.border.strong,
+                    } }, keyExtractor(item, index)))) })) : null] }));
+}
+export default Carousel;

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

@@ -0,0 +1,116 @@
+import { type VariantProps } from "../theme/tw";
+import { type LinearGradientPoint } from "expo-linear-gradient";
+import type { ReactNode } from "react";
+import { type ViewStyle } from "react-native";
+/**
+ * Decorative gradient presets (2026 art direction). `brand` is themeable (reads
+ * `theme.gradient.primary`); the rest are intentional design constants for heroes/splash.
+ * Each is [from, …, to].
+ */
+declare const GRADIENT_PRESETS: {
+    readonly "neon-teal": {
+        readonly colors: readonly ["#22E584", "#0FB8A0"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+    readonly "night-green": {
+        readonly colors: readonly ["#0B1410", "#0E2A1E", "#08120D"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+    readonly mesh: {
+        readonly colors: readonly ["#0B1410", "#10B981", "#0B1410", "#1E1B8A"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+    readonly emerald: {
+        readonly colors: readonly ["#00C357", "#00A862"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
+};
+export type GradientPreset = keyof typeof GRADIENT_PRESETS | "brand";
+declare const surface: import("tailwind-variants").TVReturnType<{
+    radius: {
+        none: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, undefined, {
+    radius: {
+        none: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    radius: {
+        none: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+export interface GradientSurfaceProps extends VariantProps<typeof surface> {
+    /** Named brand preset. Ignored if `colors` is provided. */
+    preset?: GradientPreset;
+    /** Custom gradient stops (overrides `preset`). */
+    colors?: readonly [string, string, ...string[]];
+    start?: LinearGradientPoint;
+    end?: LinearGradientPoint;
+    children?: ReactNode;
+    className?: string;
+    style?: ViewStyle;
+    testID?: string;
+}
+/**
+ * Modern gradient surface (delivery/fintech 2026 look). Wraps `expo-linear-gradient` with
+ * named brand presets + tokenized radius/padding. iOS + Android (no native dep beyond the
+ * already-peer `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
+ */
+declare function GradientSurface({ preset, colors, start, end, radius, padding, children, className, style, testID, }: GradientSurfaceProps): import("react").JSX.Element;
+export default GradientSurface;
+export { GRADIENT_PRESETS, GradientSurface };

package/dist/Display/Display.GradientSurface.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+import { LinearGradient } from "expo-linear-gradient";
+import { View } from "react-native";
+/**
+ * Decorative gradient presets (2026 art direction). `brand` is themeable (reads
+ * `theme.gradient.primary`); the rest are intentional design constants for heroes/splash.
+ * Each is [from, …, to].
+ */
+const GRADIENT_PRESETS = {
+    "neon-teal": {
+        colors: ["#22E584", "#0FB8A0"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+    "night-green": {
+        colors: ["#0B1410", "#0E2A1E", "#08120D"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+    mesh: {
+        colors: ["#0B1410", "#10B981", "#0B1410", "#1E1B8A"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+    emerald: {
+        colors: ["#00C357", "#00A862"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+    },
+};
+const surface = tv({
+    variants: {
+        radius: {
+            none: "rounded-none",
+            md: "rounded-xl",
+            lg: "rounded-2xl",
+            full: "rounded-full",
+        },
+        padding: {
+            none: "p-0",
+            sm: "p-3",
+            md: "p-4",
+            lg: "p-6",
+        },
+    },
+    defaultVariants: { radius: "lg", padding: "none" },
+});
+/**
+ * Modern gradient surface (delivery/fintech 2026 look). Wraps `expo-linear-gradient` with
+ * named brand presets + tokenized radius/padding. iOS + Android (no native dep beyond the
+ * already-peer `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
+ */
+function GradientSurface({ preset = "neon-teal", colors, start, end, radius, padding, children, className, style, testID, }) {
+    const p = preset === "brand" ? GRADIENT_PRESETS["neon-teal"] : GRADIENT_PRESETS[preset];
+    const presetColors = preset === "brand" ? theme.gradient.primary : p.colors;
+    const resolvedColors = (colors ?? presetColors);
+    return (_jsxs(View, { className: cn("overflow-hidden", surface({ radius })), style: style, testID: testID, children: [_jsx(LinearGradient, { colors: [...resolvedColors], end: end ?? p.end, start: start ?? p.start, style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } }), _jsx(View, { className: cn(surface({ padding }), className), children: children })] }));
+}
+export default GradientSurface;
+export { GRADIENT_PRESETS, GradientSurface };

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: "caption", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, children: value })) : (value)] }));
+}
+export default KeyValue;

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface ListItemProps {
+    title: string;
+    subtitle?: string;
+    /** Leading slot — icon, avatar, status dot. */
+    leading?: ReactNode;
+    /** Trailing slot — value text, toggle, badge. Overrides the auto `chevron`. */
+    trailing?: ReactNode;
+    /** Show a forward chevron on the right (navigational row). Ignored if `trailing` is set. */
+    chevron?: boolean;
+    onPress?: () => void;
+    showDivider?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, }: ListItemProps): import("react").JSX.Element;
+export default ListItem;

package/dist/Display/Display.ListItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider = true, className, testID, }) {
+    const right = trailing ??
+        (chevron ? _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) : null);
+    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: "flex-1 gap-0.5", children: [_jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "body", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, variant: "bodySmall", children: subtitle })) : null] }), right ? _jsx(View, { className: "ml-3 justify-center", children: right }) : null] }));
+    const base = cn("flex-row items-center py-3 px-4 bg-bg-card", showDivider && "border-b border-border-default", className);
+    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;