@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Display/Display.StatCard.js

@@ -1,13 +1,137 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { 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 ? "up" : "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] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+function StatCard(t0) {
+  const $ = _c(27);
+  const {
+    label,
+    value,
+    icon,
+    delta,
+    deltaSuffix: t1,
+    hint,
+    trailing,
+    className,
+    testID
+  } = t0;
+  const deltaSuffix = t1 === undefined ? "%" : t1;
+  const theme = useTheme();
+  const hasDelta = typeof delta === "number";
+  const up = hasDelta && delta >= 0;
+  const deltaColor = up ? theme.success : theme.danger;
+  let t2;
+  if ($[0] !== className) {
+    t2 = cn("bg-bg-card rounded-lg border border-border-light p-4 gap-1", className);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== label) {
+    t3 = _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "caption",
+      children: label
+    });
+    $[2] = label;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== icon || $[5] !== theme.icon) {
+    t4 = icon ? _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: icon,
+      size: 18
+    }) : null;
+    $[4] = icon;
+    $[5] = theme.icon;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== t3 || $[8] !== t4 || $[9] !== trailing) {
+    t5 = _jsxs(View, {
+      className: "flex-row items-center justify-between",
+      children: [t3, t4, trailing]
+    });
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = trailing;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== value) {
+    t6 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      semibold: true,
+      variant: "h3",
+      children: value
+    });
+    $[11] = value;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== delta || $[14] !== deltaColor || $[15] !== deltaSuffix || $[16] !== hasDelta || $[17] !== hint || $[18] !== up) {
+    t7 = hasDelta || hint ? _jsxs(View, {
+      className: "flex-row items-center gap-1",
+      children: [hasDelta ? _jsxs(_Fragment, {
+        children: [_jsx(Icon, {
+          color: deltaColor,
+          name: up ? "up" : "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;
+    $[13] = delta;
+    $[14] = deltaColor;
+    $[15] = deltaSuffix;
+    $[16] = hasDelta;
+    $[17] = hint;
+    $[18] = up;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== t2 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== testID || $[25] !== theme.shadow.sm) {
+    t8 = _jsxs(View, {
+      className: t2,
+      style: theme.shadow.sm,
+      testID: testID,
+      children: [t5, t6, t7]
+    });
+    $[20] = t2;
+    $[21] = t5;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = testID;
+    $[25] = theme.shadow.sm;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  return t8;
 }
 export default StatCard;

package/dist/Display/Display.StatusBadge.d.ts

@@ -0,0 +1,29 @@
+import { type BadgeVariant } from "./Display.Badge.js";
+import type { IconName } from "./icon-map.js";
+export type StatusTone = NonNullable<BadgeVariant>;
+export interface StatusDefinition {
+    label: string;
+    tone: StatusTone;
+    /** For rows that show the state as an icon too. */
+    icon?: IconName;
+}
+export type StatusMap<S extends string> = Readonly<Record<S, StatusDefinition>>;
+/**
+ * One table per domain state: label, tone and icon stay together, so every
+ * badge, row icon and filter chip of that state agrees.
+ *
+ *   export const INVOICE_STATUS = defineStatuses({
+ *     draft: { label: "Borrador", tone: "info" },
+ *     paid: { label: "Pagada", tone: "success", icon: "success" },
+ *   });
+ */
+export declare function defineStatuses<S extends string>(map: Record<S, StatusDefinition>): StatusMap<S>;
+/** Unknown states render their raw value with a neutral tone and warn once in dev. */
+export declare function resolveStatus<S extends string>(statuses: StatusMap<S>, status: S | string | null | undefined): StatusDefinition;
+export interface StatusBadgeProps<S extends string> {
+    status: S | string | null | undefined;
+    statuses: StatusMap<S>;
+    className?: string;
+}
+declare function StatusBadge<S extends string>({ status, statuses, className }: StatusBadgeProps<S>): import("react").JSX.Element;
+export default StatusBadge;

package/dist/Display/Display.StatusBadge.js

@@ -0,0 +1,68 @@
+import { c as _c } from "react/compiler-runtime";
+import Badge from "./Display.Badge.js";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+/**
+ * One table per domain state: label, tone and icon stay together, so every
+ * badge, row icon and filter chip of that state agrees.
+ *
+ *   export const INVOICE_STATUS = defineStatuses({
+ *     draft: { label: "Borrador", tone: "info" },
+ *     paid: { label: "Pagada", tone: "success", icon: "success" },
+ *   });
+ */
+export function defineStatuses(map) {
+  return Object.freeze({
+    ...map
+  });
+}
+const reported = new Set();
+
+/** Unknown states render their raw value with a neutral tone and warn once in dev. */
+export function resolveStatus(statuses, status) {
+  if (status != null && Object.hasOwn(statuses, status)) {
+    return statuses[status];
+  }
+  const label = status == null || status === "" ? "—" : String(status);
+  if (__DEV__ && !reported.has(label)) {
+    reported.add(label);
+    console.warn(`[Display.StatusBadge] No definition for status "${label}".`);
+  }
+  return {
+    label,
+    tone: "info"
+  };
+}
+function StatusBadge(t0) {
+  const $ = _c(7);
+  const {
+    status,
+    statuses,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== status || $[1] !== statuses) {
+    t1 = resolveStatus(statuses, status);
+    $[0] = status;
+    $[1] = statuses;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const definition = t1;
+  let t2;
+  if ($[3] !== className || $[4] !== definition.label || $[5] !== definition.tone) {
+    t2 = _jsx(Badge, {
+      className: className,
+      label: definition.label,
+      variant: definition.tone
+    });
+    $[3] = className;
+    $[4] = definition.label;
+    $[5] = definition.tone;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+export default StatusBadge;

package/dist/Display/Display.StatusDot.js

@@ -1,28 +1,103 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { c as _c } from "react/compiler-runtime";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-const statusColor = {
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function statusColor(theme) {
+  return {
     online: theme.success,
     offline: theme.icon.disabled,
     busy: theme.danger,
-    away: theme.warning,
-};
+    away: theme.warning
+  };
+}
 const statusLabel = {
-    online: "En línea",
-    offline: "Desconectado",
-    busy: "Ocupado",
-    away: "Ausente",
+  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] }));
+function StatusDot(t0) {
+  const $ = _c(18);
+  const {
+    status: t1,
+    label,
+    size: t2,
+    color,
+    className,
+    testID
+  } = t0;
+  const status = t1 === undefined ? "online" : t1;
+  const size = t2 === undefined ? 8 : t2;
+  const theme = useTheme();
+  let t3;
+  if ($[0] !== color || $[1] !== status || $[2] !== theme) {
+    t3 = color ?? statusColor(theme)[status];
+    $[0] = color;
+    $[1] = status;
+    $[2] = theme;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const dotColor = t3;
+  const text = label ?? statusLabel[status];
+  let t4;
+  if ($[4] !== className) {
+    t4 = cn("flex-row items-center gap-1.5", className);
+    $[4] = className;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = size / 2;
+  let t6;
+  if ($[6] !== dotColor || $[7] !== size || $[8] !== t5) {
+    t6 = _jsx(View, {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: t5,
+        backgroundColor: dotColor
+      }
+    });
+    $[6] = dotColor;
+    $[7] = size;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== text) {
+    t7 = text ? _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      children: text
+    }) : null;
+    $[10] = text;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== t4 || $[13] !== t6 || $[14] !== t7 || $[15] !== testID || $[16] !== text) {
+    t8 = _jsxs(View, {
+      accessibilityLabel: text,
+      className: t4,
+      testID: testID,
+      children: [t6, t7]
+    });
+    $[12] = t4;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = testID;
+    $[16] = text;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  return t8;
 }
 export default StatusDot;

package/dist/Display/Display.Story.js

@@ -1,44 +1,294 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import ExpoImage from "./Display.ExpoImage.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { LinearGradient } from "expo-linear-gradient";
 import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 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(ExpoImage, { 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(ExpoImage, { 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] }));
+function Story(t0) {
+  const $ = _c(59);
+  const {
+    image,
+    label,
+    seen: t1,
+    variant: t2,
+    size: t3,
+    avatar,
+    showAvatar: t4,
+    onPress,
+    testID
+  } = t0;
+  const seen = t1 === undefined ? false : t1;
+  const variant = t2 === undefined ? "circle" : t2;
+  const size = t3 === undefined ? 68 : t3;
+  const showAvatar = t4 === undefined ? true : t4;
+  const theme = useTheme();
+  if (variant === "card") {
+    const t5 = size * 1.6;
+    let t6;
+    if ($[0] !== t5) {
+      t6 = {
+        width: t5,
+        borderRadius: 14,
+        overflow: "hidden"
+      };
+      $[0] = t5;
+      $[1] = t6;
+    } else {
+      t6 = $[1];
+    }
+    const t7 = size * 2.6;
+    let t8;
+    if ($[2] !== t7) {
+      t8 = {
+        width: "100%",
+        height: t7
+      };
+      $[2] = t7;
+      $[3] = t8;
+    } else {
+      t8 = $[3];
+    }
+    let t9;
+    if ($[4] !== image || $[5] !== t8) {
+      t9 = _jsx(ExpoImage, {
+        source: image,
+        style: t8
+      });
+      $[4] = image;
+      $[5] = t8;
+      $[6] = t9;
+    } else {
+      t9 = $[6];
+    }
+    let t10;
+    if ($[7] !== avatar || $[8] !== image || $[9] !== seen || $[10] !== showAvatar || $[11] !== theme) {
+      t10 = showAvatar ? _jsx(View, {
+        style: {
+          position: "absolute",
+          top: 8,
+          left: 8,
+          borderRadius: 999,
+          borderWidth: 3,
+          borderColor: seen ? theme.border.strong : theme.primary
+        },
+        children: _jsx(ExpoImage, {
+          source: avatar ?? image,
+          style: {
+            width: 34,
+            height: 34,
+            borderRadius: 17
+          }
+        })
+      }) : null;
+      $[7] = avatar;
+      $[8] = image;
+      $[9] = seen;
+      $[10] = showAvatar;
+      $[11] = theme;
+      $[12] = t10;
+    } else {
+      t10 = $[12];
+    }
+    let t11;
+    if ($[13] !== label) {
+      t11 = 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;
+      $[13] = label;
+      $[14] = t11;
+    } else {
+      t11 = $[14];
+    }
+    let t12;
+    if ($[15] !== label || $[16] !== onPress || $[17] !== t10 || $[18] !== t11 || $[19] !== t6 || $[20] !== t9 || $[21] !== testID) {
+      t12 = _jsxs(Pressable, {
+        accessibilityLabel: label,
+        accessibilityRole: "button",
+        onPress: onPress,
+        style: t6,
+        testID: testID,
+        children: [t9, t10, t11]
+      });
+      $[15] = label;
+      $[16] = onPress;
+      $[17] = t10;
+      $[18] = t11;
+      $[19] = t6;
+      $[20] = t9;
+      $[21] = testID;
+      $[22] = t12;
+    } else {
+      t12 = $[22];
     }
-    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(ExpoImage, { 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] }));
+    return t12;
+  }
+  const innerSize = size - 6 - 4;
+  const t5 = size + 8;
+  let t6;
+  if ($[23] !== t5) {
+    t6 = {
+      alignItems: "center",
+      width: t5,
+      gap: 4
+    };
+    $[23] = t5;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  let t7;
+  if ($[25] !== seen || $[26] !== theme.border) {
+    t7 = seen ? [theme.border.strong, theme.border.strong] : RING;
+    $[25] = seen;
+    $[26] = theme.border;
+    $[27] = t7;
+  } else {
+    t7 = $[27];
+  }
+  const t8 = size / 2;
+  let t9;
+  if ($[28] !== size || $[29] !== t8) {
+    t9 = {
+      width: size,
+      height: size,
+      borderRadius: t8,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[28] = size;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  const t10 = innerSize + 4;
+  const t11 = innerSize + 4;
+  const t12 = (innerSize + 4) / 2;
+  let t13;
+  if ($[31] !== t10 || $[32] !== t11 || $[33] !== t12 || $[34] !== theme.bg.card) {
+    t13 = {
+      width: t10,
+      height: t11,
+      borderRadius: t12,
+      backgroundColor: theme.bg.card,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[31] = t10;
+    $[32] = t11;
+    $[33] = t12;
+    $[34] = theme.bg.card;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  const t14 = innerSize / 2;
+  let t15;
+  if ($[36] !== innerSize || $[37] !== t14) {
+    t15 = {
+      width: innerSize,
+      height: innerSize,
+      borderRadius: t14
+    };
+    $[36] = innerSize;
+    $[37] = t14;
+    $[38] = t15;
+  } else {
+    t15 = $[38];
+  }
+  let t16;
+  if ($[39] !== image || $[40] !== t15) {
+    t16 = _jsx(ExpoImage, {
+      source: image,
+      style: t15
+    });
+    $[39] = image;
+    $[40] = t15;
+    $[41] = t16;
+  } else {
+    t16 = $[41];
+  }
+  let t17;
+  if ($[42] !== t13 || $[43] !== t16) {
+    t17 = _jsx(View, {
+      style: t13,
+      children: t16
+    });
+    $[42] = t13;
+    $[43] = t16;
+    $[44] = t17;
+  } else {
+    t17 = $[44];
+  }
+  let t18;
+  if ($[45] !== t17 || $[46] !== t7 || $[47] !== t9) {
+    t18 = _jsx(LinearGradient, {
+      colors: t7,
+      style: t9,
+      children: t17
+    });
+    $[45] = t17;
+    $[46] = t7;
+    $[47] = t9;
+    $[48] = t18;
+  } else {
+    t18 = $[48];
+  }
+  let t19;
+  if ($[49] !== label || $[50] !== size) {
+    t19 = label ? _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      numberOfLines: 1,
+      style: {
+        maxWidth: size + 6
+      },
+      variant: "caption",
+      children: label
+    }) : null;
+    $[49] = label;
+    $[50] = size;
+    $[51] = t19;
+  } else {
+    t19 = $[51];
+  }
+  let t20;
+  if ($[52] !== label || $[53] !== onPress || $[54] !== t18 || $[55] !== t19 || $[56] !== t6 || $[57] !== testID) {
+    t20 = _jsxs(Pressable, {
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      onPress: onPress,
+      style: t6,
+      testID: testID,
+      children: [t18, t19]
+    });
+    $[52] = label;
+    $[53] = onPress;
+    $[54] = t18;
+    $[55] = t19;
+    $[56] = t6;
+    $[57] = testID;
+    $[58] = t20;
+  } else {
+    t20 = $[58];
+  }
+  return t20;
 }
 export default Story;