@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Display/Display.Date.js

@@ -1,43 +1,253 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { formatDate, formatDateWithDefaultTimezone } from "../utils/date.js";
+import { formatDate, formatDateWithDefaultTimezone, parseInstant } from "../utils/date.js";
 import { View } from "react-native";
+
+/**
+ * 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).
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 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");
+  const then = parseInstant(value)?.getTime() ?? Number.NaN;
+  if (Number.isNaN(then)) return "-";
+  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 absolute = !value
-        ? "-"
-        : timezone
-            ? formatDate(value, timezone, { showTime, locale })
-            : formatDateWithDefaultTimezone(value, { showTime, locale });
-    const formatted = value && relative ? relativeTime(value) : absolute;
-    const text = prefix ? `${prefix}${formatted}` : formatted;
-    const iconName = icon ?? (showTime && !relative ? "time" : "calendar");
-    const label = (_jsx(Typography.Text, { bold: bold, semibold: semibold && !bold, style: [{ color }, style], variant: textVariant, children: text }));
-    if (variant === "inline") {
-        return (_jsx(Typography.Text, { bold: bold, className: className, semibold: semibold && !bold, style: [{ color }, style], variant: textVariant, children: text }));
+function DateField(t0) {
+  const $ = _c(52);
+  const {
+    value,
+    format: t1,
+    prefix: t2,
+    textVariant: t3,
+    color,
+    style: t4,
+    semibold: t5,
+    bold: t6,
+    className,
+    showTime: t7,
+    timezone,
+    variant: t8,
+    icon,
+    relative: t9
+  } = t0;
+  t1 === undefined ? "short" : t1;
+  const prefix = t2 === undefined ? "" : t2;
+  const textVariant = t3 === undefined ? "body" : t3;
+  let t10;
+  if ($[0] !== t4) {
+    t10 = t4 === undefined ? {} : t4;
+    $[0] = t4;
+    $[1] = t10;
+  } else {
+    t10 = $[1];
+  }
+  const style = t10;
+  const semibold = t5 === undefined ? false : t5;
+  const bold = t6 === undefined ? false : t6;
+  const showTime = t7 === undefined ? true : t7;
+  const variant = t8 === undefined ? "inline" : t8;
+  const relative = t9 === undefined ? false : t9;
+  const theme = useTheme();
+  let t11;
+  if ($[2] !== relative || $[3] !== showTime || $[4] !== timezone || $[5] !== value) {
+    t11 = !value || relative ? "-" : timezone ? formatDate(value, timezone, {
+      showTime,
+      locale: "es-CR"
+    }) : formatDateWithDefaultTimezone(value, {
+      showTime,
+      locale: "es-CR"
+    });
+    $[2] = relative;
+    $[3] = showTime;
+    $[4] = timezone;
+    $[5] = value;
+    $[6] = t11;
+  } else {
+    t11 = $[6];
+  }
+  const absolute = t11;
+  let t12;
+  if ($[7] !== absolute || $[8] !== relative || $[9] !== value) {
+    t12 = !value ? "-" : relative ? relativeTime(value) : absolute;
+    $[7] = absolute;
+    $[8] = relative;
+    $[9] = value;
+    $[10] = t12;
+  } else {
+    t12 = $[10];
+  }
+  const formatted = t12;
+  const text = prefix ? `${prefix}${formatted}` : formatted;
+  const iconName = icon ?? (showTime && !relative ? "time" : "calendar");
+  const t13 = semibold && !bold;
+  let t14;
+  if ($[11] !== color) {
+    t14 = {
+      color
+    };
+    $[11] = color;
+    $[12] = t14;
+  } else {
+    t14 = $[12];
+  }
+  let t15;
+  if ($[13] !== style || $[14] !== t14) {
+    t15 = [t14, style];
+    $[13] = style;
+    $[14] = t14;
+    $[15] = t15;
+  } else {
+    t15 = $[15];
+  }
+  let t16;
+  if ($[16] !== bold || $[17] !== t13 || $[18] !== t15 || $[19] !== text || $[20] !== textVariant) {
+    t16 = _jsx(Typography.Text, {
+      bold: bold,
+      semibold: t13,
+      style: t15,
+      variant: textVariant,
+      children: text
+    });
+    $[16] = bold;
+    $[17] = t13;
+    $[18] = t15;
+    $[19] = text;
+    $[20] = textVariant;
+    $[21] = t16;
+  } else {
+    t16 = $[21];
+  }
+  const label = t16;
+  if (variant === "inline") {
+    const t17 = semibold && !bold;
+    let t18;
+    if ($[22] !== color) {
+      t18 = {
+        color
+      };
+      $[22] = color;
+      $[23] = t18;
+    } else {
+      t18 = $[23];
+    }
+    let t19;
+    if ($[24] !== style || $[25] !== t18) {
+      t19 = [t18, style];
+      $[24] = style;
+      $[25] = t18;
+      $[26] = t19;
+    } else {
+      t19 = $[26];
+    }
+    let t20;
+    if ($[27] !== bold || $[28] !== className || $[29] !== t17 || $[30] !== t19 || $[31] !== text || $[32] !== textVariant) {
+      t20 = _jsx(Typography.Text, {
+        bold: bold,
+        className: className,
+        semibold: t17,
+        style: t19,
+        variant: textVariant,
+        children: text
+      });
+      $[27] = bold;
+      $[28] = className;
+      $[29] = t17;
+      $[30] = t19;
+      $[31] = text;
+      $[32] = textVariant;
+      $[33] = t20;
+    } else {
+      t20 = $[33];
+    }
+    return t20;
+  }
+  if (variant === "pill") {
+    let t17;
+    if ($[34] !== className) {
+      t17 = cn("flex-row items-center self-start gap-1.5 rounded-full bg-bg-muted px-2.5 py-1", className);
+      $[34] = className;
+      $[35] = t17;
+    } else {
+      t17 = $[35];
+    }
+    const t18 = color ?? theme.icon.secondary;
+    let t19;
+    if ($[36] !== iconName || $[37] !== t18) {
+      t19 = _jsx(Icon, {
+        color: t18,
+        name: iconName,
+        size: 14
+      });
+      $[36] = iconName;
+      $[37] = t18;
+      $[38] = t19;
+    } else {
+      t19 = $[38];
     }
-    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] }));
+    let t20;
+    if ($[39] !== label || $[40] !== t17 || $[41] !== t19) {
+      t20 = _jsxs(View, {
+        className: t17,
+        children: [t19, label]
+      });
+      $[39] = label;
+      $[40] = t17;
+      $[41] = t19;
+      $[42] = t20;
+    } else {
+      t20 = $[42];
     }
-    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] }));
+    return t20;
+  }
+  let t17;
+  if ($[43] !== className) {
+    t17 = cn("flex-row items-center gap-1.5", className);
+    $[43] = className;
+    $[44] = t17;
+  } else {
+    t17 = $[44];
+  }
+  const t18 = color ?? theme.icon.secondary;
+  let t19;
+  if ($[45] !== iconName || $[46] !== t18) {
+    t19 = _jsx(Icon, {
+      color: t18,
+      name: iconName,
+      size: 16
+    });
+    $[45] = iconName;
+    $[46] = t18;
+    $[47] = t19;
+  } else {
+    t19 = $[47];
+  }
+  let t20;
+  if ($[48] !== label || $[49] !== t17 || $[50] !== t19) {
+    t20 = _jsxs(View, {
+      className: t17,
+      children: [t19, label]
+    });
+    $[48] = label;
+    $[49] = t17;
+    $[50] = t19;
+    $[51] = t20;
+  } else {
+    t20 = $[51];
+  }
+  return t20;
 }
 export default DateField;

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

@@ -7,11 +7,11 @@ declare const divider: import("tailwind-variants").TVReturnType<{
         lg: "my-3";
     };
     colorScheme: {
-        light: "bg-border-divider opacity-50";
-        default: "bg-border-divider";
-        dark: "bg-border-divider opacity-100";
+        light: "bg-border-light";
+        default: "bg-border-default";
+        dark: "bg-border-strong";
     };
-}, undefined, "w-full bg-border-divider", {
+}, undefined, "w-full bg-border-default", {
     spacing: {
         none: "my-0";
         sm: "my-1";
@@ -19,9 +19,9 @@ declare const divider: import("tailwind-variants").TVReturnType<{
         lg: "my-3";
     };
     colorScheme: {
-        light: "bg-border-divider opacity-50";
-        default: "bg-border-divider";
-        dark: "bg-border-divider opacity-100";
+        light: "bg-border-light";
+        default: "bg-border-default";
+        dark: "bg-border-strong";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     spacing: {
@@ -31,9 +31,9 @@ declare const divider: import("tailwind-variants").TVReturnType<{
         lg: "my-3";
     };
     colorScheme: {
-        light: "bg-border-divider opacity-50";
-        default: "bg-border-divider";
-        dark: "bg-border-divider opacity-100";
+        light: "bg-border-light";
+        default: "bg-border-default";
+        dark: "bg-border-strong";
     };
 }, undefined>>;
 interface DividerProps extends VariantProps<typeof divider> {

package/dist/Display/Display.Divider.js

@@ -1,27 +1,74 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn, tv } from "../theme/tw.js";
 import { View } from "react-native";
+
+// The divider names border tokens of the preset (its old color token did not exist and it
+// drew nothing). `default` is the line between list rows.
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const divider = tv({
-    base: "w-full bg-border-divider",
-    variants: {
-        spacing: {
-            none: "my-0",
-            sm: "my-1",
-            md: "my-2",
-            lg: "my-3",
-        },
-        colorScheme: {
-            light: "bg-border-divider opacity-50",
-            default: "bg-border-divider",
-            dark: "bg-border-divider opacity-100",
-        },
-    },
-    defaultVariants: {
-        spacing: "md",
-        colorScheme: "default",
+  base: "w-full bg-border-default",
+  variants: {
+    spacing: {
+      none: "my-0",
+      sm: "my-1",
+      md: "my-2",
+      lg: "my-3"
     },
+    colorScheme: {
+      light: "bg-border-light",
+      default: "bg-border-default",
+      dark: "bg-border-strong"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    colorScheme: "default"
+  }
 });
-function Divider({ thickness = 1, spacing, colorScheme, className }) {
-    return (_jsx(View, { className: cn(divider({ spacing, colorScheme }), className), style: { height: thickness } }));
+function Divider(t0) {
+  const $ = _c(9);
+  const {
+    thickness: t1,
+    spacing,
+    colorScheme,
+    className
+  } = t0;
+  const thickness = t1 === undefined ? 1 : t1;
+  let t2;
+  if ($[0] !== className || $[1] !== colorScheme || $[2] !== spacing) {
+    t2 = cn(divider({
+      spacing,
+      colorScheme
+    }), className);
+    $[0] = className;
+    $[1] = colorScheme;
+    $[2] = spacing;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== thickness) {
+    t3 = {
+      height: thickness
+    };
+    $[4] = thickness;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = _jsx(View, {
+      className: t2,
+      style: t3
+    });
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
 }
 export default Divider;

package/dist/Display/Display.ExpoImage.js

@@ -1,15 +1,104 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { imageSourceKey } from "../utils/image.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { Image } from "expo-image";
 import { cssInterop } from "nativewind";
-const StyledImage = cssInterop(Image, { className: "style" });
-function ExpoImage({ cachePolicy = "disk", transition = 0, autoplay = true, sfEffect, onError, source, recyclingKey, ...props }) {
-    const reducedMotion = useReducedMotion();
-    return (_jsx(StyledImage, { ...props, autoplay: autoplay && !reducedMotion, cachePolicy: cachePolicy, onError: (event) => {
-            console.error("[ExpoImage] Image load failed", event.error);
-            onError?.(event);
-        }, recyclingKey: recyclingKey === undefined ? imageSourceKey(source) : recyclingKey, sfEffect: reducedMotion ? null : sfEffect, source: source, transition: reducedMotion ? 0 : transition }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const StyledImage = cssInterop(Image, {
+  className: "style"
+});
+function ExpoImage(t0) {
+  const $ = _c(23);
+  let onError;
+  let props;
+  let recyclingKey;
+  let sfEffect;
+  let source;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      cachePolicy: t1,
+      transition: t2,
+      autoplay: t3,
+      sfEffect,
+      onError,
+      source,
+      recyclingKey,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = onError;
+    $[2] = props;
+    $[3] = recyclingKey;
+    $[4] = sfEffect;
+    $[5] = source;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    onError = $[1];
+    props = $[2];
+    recyclingKey = $[3];
+    sfEffect = $[4];
+    source = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+  }
+  const cachePolicy = t1 === undefined ? "disk" : t1;
+  const transition = t2 === undefined ? 0 : t2;
+  const autoplay = t3 === undefined ? true : t3;
+  const reducedMotion = useReducedMotion();
+  const t4 = autoplay && !reducedMotion;
+  let t5;
+  if ($[9] !== onError) {
+    t5 = event => {
+      console.error("[ExpoImage] Image load failed", event.error);
+      onError?.(event);
+    };
+    $[9] = onError;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== recyclingKey || $[12] !== source) {
+    t6 = recyclingKey === undefined ? imageSourceKey(source) : recyclingKey;
+    $[11] = recyclingKey;
+    $[12] = source;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  const t7 = reducedMotion ? null : sfEffect;
+  const t8 = reducedMotion ? 0 : transition;
+  let t9;
+  if ($[14] !== cachePolicy || $[15] !== props || $[16] !== source || $[17] !== t4 || $[18] !== t5 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
+    t9 = _jsx(StyledImage, {
+      ...props,
+      autoplay: t4,
+      cachePolicy: cachePolicy,
+      onError: t5,
+      recyclingKey: t6,
+      sfEffect: t7,
+      source: source,
+      transition: t8
+    });
+    $[14] = cachePolicy;
+    $[15] = props;
+    $[16] = source;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  return t9;
 }
 export default ExpoImage;
 export { ExpoImage };

package/dist/Display/Display.GradientSurface.d.ts

@@ -1,7 +1,12 @@
+import { type ThemeTokens } from "../theme/index.js";
 import { type VariantProps } from "../theme/tw.js";
-import { type LinearGradientPoint } from "expo-linear-gradient";
 import type { ReactNode } from "react";
 import { type ViewStyle } from "react-native";
+/** Gradient anchor, 0 to 1 on each axis: `{ x, y }` or `[x, y]`. */
+export type GradientPoint = {
+    x: number;
+    y: number;
+} | [x: number, y: number];
 /**
  * Decorative gradient presets. `brand` is themeable (reads `theme.gradient.primary`) —
  * use it when you want the surface to follow whatever the app's active theme defines.
@@ -110,14 +115,14 @@ export interface GradientSurfaceProps extends VariantProps<typeof surface> {
     preset?: GradientPreset;
     /** Custom gradient stops (overrides `preset`). */
     colors?: readonly [string, string, ...string[]];
-    start?: LinearGradientPoint;
-    end?: LinearGradientPoint;
+    start?: GradientPoint;
+    end?: GradientPoint;
     children?: ReactNode;
     className?: string;
     style?: ViewStyle;
     testID?: string;
 }
-export declare function resolveGradientPreset(preset?: GradientPreset): {
+export declare function resolveGradientPreset(preset?: GradientPreset, theme?: ThemeTokens): {
     colors: readonly [string, string] | readonly ["#1A1714", "#C89B3C", "#B88A2E"] | readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
     start: {
         readonly x: 0;