@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Display/Display.MediaEmbed.js

@@ -1,39 +1,183 @@
-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 DisplayImage from "./Display.Image.js";
 import Pressable from "../primitives/Pressable.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";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 /**
  * 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: 16,
-                        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] }));
+const PORTRAIT = 9 / 16;
+function MediaEmbed(t0) {
+  const $ = _c(25);
+  const {
+    thumbnail,
+    onPress,
+    duration,
+    title,
+    source,
+    aspectRatio: t1,
+    className,
+    testID
+  } = t0;
+  const aspectRatio = t1 === undefined ? PORTRAIT : t1;
+  const theme = useTheme();
+  const t2 = title ?? "Reproducir video";
+  let t3;
+  if ($[0] !== className) {
+    t3 = cn("overflow-hidden rounded-xl", className);
+    $[0] = className;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== aspectRatio || $[3] !== thumbnail) {
+    t4 = _jsx(DisplayImage, {
+      aspectRatio: aspectRatio,
+      radius: 12,
+      source: thumbnail
+    });
+    $[2] = aspectRatio;
+    $[3] = thumbnail;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      width: 44,
+      height: 44,
+      borderRadius: 16,
+      backgroundColor: "rgba(0,0,0,0.55)",
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== theme.text.inverse) {
+    t7 = _jsx(View, {
+      style: t5,
+      children: _jsx(View, {
+        style: t6,
+        children: _jsx(Icon, {
+          color: theme.text.inverse,
+          name: "play",
+          size: 22
+        })
+      })
+    });
+    $[7] = theme.text.inverse;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== duration) {
+    t8 = 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;
+    $[9] = duration;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== source) {
+    t9 = source ? _jsx(View, {
+      style: {
+        position: "absolute",
+        top: 8,
+        left: 8
+      },
+      children: source
+    }) : null;
+    $[11] = source;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== title) {
+    t10 = 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;
+    $[13] = title;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  let t11;
+  if ($[15] !== onPress || $[16] !== t10 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t7 || $[21] !== t8 || $[22] !== t9 || $[23] !== testID) {
+    t11 = _jsxs(Pressable, {
+      accessibilityLabel: t2,
+      accessibilityRole: "button",
+      className: t3,
+      onPress: onPress,
+      testID: testID,
+      children: [t4, t7, t8, t9, t10]
+    });
+    $[15] = onPress;
+    $[16] = t10;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+    $[23] = testID;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  return t11;
 }
 export default MediaEmbed;

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

@@ -4,8 +4,8 @@ import { ComponentType, ReactNode } from "react";
 export type MenuButtonSwipeAction = SwipeRowAction;
 /**
  * Inline status/count badge on the right of the row.
- * Presets: `"active"` (green pill), `"inactive"` (yellow pill), `"new"` (accent pill).
- * Any string / number renders a danger count chip.
+ * Presets: `"active"` (success badge), `"inactive"` (warning badge), `"new"` (accent badge).
+ * Any other string / number renders the DS count badge.
  */
 export type MenuButtonBadge = "active" | "inactive" | "new" | string | number;
 declare const menuButton: import("tailwind-variants").TVReturnType<{