@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Display/Display.ListItem.js

@@ -1,35 +1,331 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import Icon from "./Display.Icon.js";
+import { c as _c } from "react/compiler-runtime";
+import { Chevron } from "./chevron.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { Pressable as NativePressable, useWindowDimensions, View, } from "react-native";
-function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider, className, testID, accessibilityLabel, accessibilityHint, disabled = false, variant = "default", value, layout = "auto", density = "compact", style, titleTextProps, subtitleTextProps, valueTextProps, }) {
-    const theme = useTheme();
-    const { width, fontScale } = useWindowDimensions();
-    const mobile = variant === "mobile";
-    const comfortable = mobile && density === "comfortable";
-    const stacked = mobile &&
-        (value !== undefined || trailing != null) &&
-        (layout === "stacked" || (layout === "auto" && (fontScale > 1.3 || width < 360)));
-    const right = trailing ??
-        (value || chevron ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [value ? (_jsx(Typography.Text, { className: "text-text-secondary flex-shrink", variant: comfortable ? "bodyReadable" : "body", ...valueTextProps, children: value })) : null, chevron ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.icon.tertiary, name: "next", size: 18 }) })) : null] })) : null);
-    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: cn("flex-1", mobile ? "min-w-0 gap-1" : "gap-0.5"), children: [_jsx(Typography.Text, { className: mobile && disabled ? "text-text-disabled" : "text-text-primary", semibold: !mobile || comfortable, variant: comfortable ? "bodyReadable" : "body", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: comfortable ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null, stacked && right ? _jsx(View, { className: "self-start mt-1", children: right }) : null] }), !stacked && right ? (_jsx(View, { className: cn("ml-3 justify-center", mobile && "flex-shrink"), style: mobile ? { maxWidth: "45%" } : undefined, children: right })) : null] }));
-    const base = cn("flex-row items-center px-4", mobile && !comfortable ? "py-2" : "py-3", !mobile && "bg-bg-card", (showDivider ?? !mobile) && "border-b border-border-default", disabled && !mobile && "opacity-50", className);
-    if (onPress) {
-        if (mobile) {
-            return (_jsx(NativePressable, { accessibilityHint: accessibilityHint ?? subtitle, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: value !== undefined ? { text: value } : undefined, className: base, disabled: disabled, onPress: onPress, style: ({ pressed }) => [
-                    {
-                        minHeight: 48,
-                        minWidth: 48,
-                        backgroundColor: pressed ? theme.bg.hover : undefined,
-                    },
-                    style,
-                ], testID: testID, children: content }));
-        }
-        return (_jsx(Pressable, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, className: base, disabled: disabled, onPress: onPress, style: [{ minHeight: 48, minWidth: 48 }, style], testID: testID, children: content }));
+import { Pressable as NativePressable, useWindowDimensions, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+const TOUCH_TARGET = {
+  minHeight: 48,
+  minWidth: 48
+};
+function ListItem(t0) {
+  const $ = _c(74);
+  const {
+    title,
+    subtitle,
+    leading,
+    trailing,
+    chevron: t1,
+    onPress,
+    showDivider,
+    className,
+    testID,
+    accessibilityLabel,
+    accessibilityHint,
+    disabled: t2,
+    variant: t3,
+    value,
+    layout: t4,
+    density: t5,
+    style,
+    titleTextProps,
+    subtitleTextProps,
+    valueTextProps
+  } = t0;
+  const chevron = t1 === undefined ? false : t1;
+  const disabled = t2 === undefined ? false : t2;
+  const variant = t3 === undefined ? "default" : t3;
+  const layout = t4 === undefined ? "auto" : t4;
+  const density = t5 === undefined ? "compact" : t5;
+  const theme = useTheme();
+  const {
+    width,
+    fontScale
+  } = useWindowDimensions();
+  const mobile = variant === "mobile";
+  const comfortable = mobile && density === "comfortable";
+  const stacked = mobile && (value !== undefined || trailing != null) && (layout === "stacked" || layout === "auto" && (fontScale > 1.3 || width < 360));
+  let t6;
+  if ($[0] !== chevron || $[1] !== trailing || $[2] !== value || $[3] !== valueTextProps) {
+    t6 = trailing ?? (value || chevron ? _jsxs(View, {
+      className: "flex-row items-center gap-2",
+      children: [value ? _jsx(Typography.Text, {
+        className: "text-text-secondary flex-shrink",
+        variant: "body",
+        ...valueTextProps,
+        children: value
+      }) : null, chevron ? _jsx(Chevron, {}) : null]
+    }) : null);
+    $[0] = chevron;
+    $[1] = trailing;
+    $[2] = value;
+    $[3] = valueTextProps;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  const right = t6;
+  let t7;
+  if ($[5] !== leading) {
+    t7 = leading ? _jsx(View, {
+      className: "mr-3 justify-center",
+      children: leading
+    }) : null;
+    $[5] = leading;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  const t8 = mobile ? "min-w-0 gap-1" : "gap-0.5";
+  let t9;
+  if ($[7] !== t8) {
+    t9 = cn("flex-1", t8);
+    $[7] = t8;
+    $[8] = t9;
+  } else {
+    t9 = $[8];
+  }
+  const t10 = mobile && disabled ? "text-text-disabled" : "text-text-primary";
+  const t11 = !mobile || comfortable;
+  let t12;
+  if ($[9] !== t10 || $[10] !== t11 || $[11] !== title || $[12] !== titleTextProps) {
+    t12 = _jsx(Typography.Text, {
+      className: t10,
+      semibold: t11,
+      variant: "body",
+      ...titleTextProps,
+      children: title
+    });
+    $[9] = t10;
+    $[10] = t11;
+    $[11] = title;
+    $[12] = titleTextProps;
+    $[13] = t12;
+  } else {
+    t12 = $[13];
+  }
+  let t13;
+  if ($[14] !== subtitle || $[15] !== subtitleTextProps) {
+    t13 = subtitle ? _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      ...subtitleTextProps,
+      children: subtitle
+    }) : null;
+    $[14] = subtitle;
+    $[15] = subtitleTextProps;
+    $[16] = t13;
+  } else {
+    t13 = $[16];
+  }
+  let t14;
+  if ($[17] !== right || $[18] !== stacked) {
+    t14 = stacked && right ? _jsx(View, {
+      className: "self-start mt-1",
+      children: right
+    }) : null;
+    $[17] = right;
+    $[18] = stacked;
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  let t15;
+  if ($[20] !== t12 || $[21] !== t13 || $[22] !== t14 || $[23] !== t9) {
+    t15 = _jsxs(View, {
+      className: t9,
+      children: [t12, t13, t14]
+    });
+    $[20] = t12;
+    $[21] = t13;
+    $[22] = t14;
+    $[23] = t9;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  let t16;
+  if ($[25] !== mobile || $[26] !== right || $[27] !== stacked) {
+    t16 = !stacked && right ? _jsx(View, {
+      className: cn("ml-3 justify-center", mobile && "flex-shrink"),
+      style: mobile ? {
+        maxWidth: "45%"
+      } : undefined,
+      children: right
+    }) : null;
+    $[25] = mobile;
+    $[26] = right;
+    $[27] = stacked;
+    $[28] = t16;
+  } else {
+    t16 = $[28];
+  }
+  let t17;
+  if ($[29] !== t15 || $[30] !== t16 || $[31] !== t7) {
+    t17 = _jsxs(_Fragment, {
+      children: [t7, t15, t16]
+    });
+    $[29] = t15;
+    $[30] = t16;
+    $[31] = t7;
+    $[32] = t17;
+  } else {
+    t17 = $[32];
+  }
+  const content = t17;
+  const t18 = mobile && !comfortable ? "py-2" : "py-3";
+  const t19 = !mobile && "bg-bg-card";
+  const t20 = (showDivider ?? !mobile) && "border-b border-border-default";
+  const t21 = disabled && !mobile && "opacity-50";
+  let t22;
+  if ($[33] !== className || $[34] !== t18 || $[35] !== t19 || $[36] !== t20 || $[37] !== t21) {
+    t22 = cn("flex-row items-center px-4", t18, t19, t20, t21, className);
+    $[33] = className;
+    $[34] = t18;
+    $[35] = t19;
+    $[36] = t20;
+    $[37] = t21;
+    $[38] = t22;
+  } else {
+    t22 = $[38];
+  }
+  const base = t22;
+  if (onPress) {
+    if (mobile) {
+      const t23 = accessibilityHint ?? subtitle;
+      const t24 = accessibilityLabel ?? title;
+      let t25;
+      if ($[39] !== disabled) {
+        t25 = {
+          disabled
+        };
+        $[39] = disabled;
+        $[40] = t25;
+      } else {
+        t25 = $[40];
+      }
+      let t26;
+      if ($[41] !== value) {
+        t26 = value !== undefined ? {
+          text: value
+        } : undefined;
+        $[41] = value;
+        $[42] = t26;
+      } else {
+        t26 = $[42];
+      }
+      let t27;
+      if ($[43] !== base || $[44] !== content || $[45] !== style || $[46] !== theme) {
+        t27 = t28 => {
+          const {
+            pressed
+          } = t28;
+          return _jsx(View, {
+            className: base,
+            style: [TOUCH_TARGET, pressed && {
+              backgroundColor: theme.bg.hover
+            }, style],
+            children: content
+          });
+        };
+        $[43] = base;
+        $[44] = content;
+        $[45] = style;
+        $[46] = theme;
+        $[47] = t27;
+      } else {
+        t27 = $[47];
+      }
+      let t28;
+      if ($[48] !== disabled || $[49] !== onPress || $[50] !== t23 || $[51] !== t24 || $[52] !== t25 || $[53] !== t26 || $[54] !== t27 || $[55] !== testID) {
+        t28 = _jsx(NativePressable, {
+          accessibilityHint: t23,
+          accessibilityLabel: t24,
+          accessibilityRole: "button",
+          accessibilityState: t25,
+          accessibilityValue: t26,
+          disabled: disabled,
+          onPress: onPress,
+          style: TOUCH_TARGET,
+          testID: testID,
+          children: t27
+        });
+        $[48] = disabled;
+        $[49] = onPress;
+        $[50] = t23;
+        $[51] = t24;
+        $[52] = t25;
+        $[53] = t26;
+        $[54] = t27;
+        $[55] = testID;
+        $[56] = t28;
+      } else {
+        t28 = $[56];
+      }
+      return t28;
+    }
+    let t23;
+    if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+      t23 = {
+        minHeight: 48,
+        minWidth: 48
+      };
+      $[57] = t23;
+    } else {
+      t23 = $[57];
+    }
+    let t24;
+    if ($[58] !== style) {
+      t24 = [t23, style];
+      $[58] = style;
+      $[59] = t24;
+    } else {
+      t24 = $[59];
+    }
+    let t25;
+    if ($[60] !== accessibilityHint || $[61] !== accessibilityLabel || $[62] !== base || $[63] !== content || $[64] !== disabled || $[65] !== onPress || $[66] !== t24 || $[67] !== testID) {
+      t25 = _jsx(Pressable, {
+        accessibilityHint: accessibilityHint,
+        accessibilityLabel: accessibilityLabel,
+        className: base,
+        disabled: disabled,
+        onPress: onPress,
+        style: t24,
+        testID: testID,
+        children: content
+      });
+      $[60] = accessibilityHint;
+      $[61] = accessibilityLabel;
+      $[62] = base;
+      $[63] = content;
+      $[64] = disabled;
+      $[65] = onPress;
+      $[66] = t24;
+      $[67] = testID;
+      $[68] = t25;
+    } else {
+      t25 = $[68];
     }
-    return (_jsx(View, { className: base, style: style, testID: testID, children: content }));
+    return t25;
+  }
+  let t23;
+  if ($[69] !== base || $[70] !== content || $[71] !== style || $[72] !== testID) {
+    t23 = _jsx(View, {
+      className: base,
+      style: style,
+      testID: testID,
+      children: content
+    });
+    $[69] = base;
+    $[70] = content;
+    $[71] = style;
+    $[72] = testID;
+    $[73] = t23;
+  } else {
+    t23 = $[73];
+  }
+  return t23;
 }
 export default ListItem;

package/dist/Display/Display.Logo.js

@@ -1,39 +1,94 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { getBrandingLogo } from "../branding.js";
 import ExpoImage from "./Display.ExpoImage.js";
 import { tv } from "../theme/tw.js";
 import { View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const logo = tv({
-    slots: {
-        container: "items-center justify-center",
-        image: "",
-    },
-    variants: {
-        size: {
-            small: {
-                image: "w-[120px] h-[80px]",
-            },
-            medium: {
-                image: "w-[180px] h-[100px]",
-            },
-            large: {
-                image: "w-[250px] h-[250px]",
-            },
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-    },
+  slots: {
+    container: "items-center justify-center",
+    image: ""
+  },
+  variants: {
+    size: {
+      small: {
+        image: "w-[120px] h-[80px]"
+      },
+      medium: {
+        image: "w-[180px] h-[100px]"
+      },
+      large: {
+        image: "w-[250px] h-[250px]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
 });
 function renderImage(imageClassName, source) {
-    if (!source) {
-        return null;
-    }
-    return _jsx(ExpoImage, { className: imageClassName, contentFit: "contain", source: source });
+  if (!source) {
+    return null;
+  }
+  return _jsx(ExpoImage, {
+    className: imageClassName,
+    contentFit: "contain",
+    source: source
+  });
 }
-const Logo = ({ source, size = "medium", className }) => {
-    const styles = logo({ size });
-    const resolvedSource = source ?? getBrandingLogo();
-    return (_jsx(View, { className: styles.container({ className }), children: renderImage(styles.image(), resolvedSource) }));
+const Logo = t0 => {
+  const $ = _c(12);
+  const {
+    source,
+    size: t1,
+    className
+  } = t0;
+  const size = t1 === undefined ? "medium" : t1;
+  let T0;
+  let t2;
+  let t3;
+  if ($[0] !== className || $[1] !== size || $[2] !== source) {
+    const styles = logo({
+      size
+    });
+    let t4;
+    if ($[6] !== source) {
+      t4 = source ?? getBrandingLogo();
+      $[6] = source;
+      $[7] = t4;
+    } else {
+      t4 = $[7];
+    }
+    const resolvedSource = t4;
+    T0 = View;
+    t2 = styles.container({
+      className
+    });
+    t3 = renderImage(styles.image(), resolvedSource);
+    $[0] = className;
+    $[1] = size;
+    $[2] = source;
+    $[3] = T0;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    T0 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+  }
+  let t4;
+  if ($[8] !== T0 || $[9] !== t2 || $[10] !== t3) {
+    t4 = _jsx(T0, {
+      className: t2,
+      children: t3
+    });
+    $[8] = T0;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
 };
 export default Logo;

package/dist/Display/Display.MediaCard.js

@@ -1,12 +1,133 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import DisplayImage from "./Display.Image.js";
 import Pressable from "../primitives/Pressable.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 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] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const LANDSCAPE = 16 / 9;
+function MediaCard(t0) {
+  const $ = _c(26);
+  const {
+    image,
+    title,
+    subtitle,
+    badge,
+    overlay,
+    aspectRatio: t1,
+    height,
+    radius: t2,
+    onPress,
+    className,
+    testID
+  } = t0;
+  const aspectRatio = t1 === undefined ? LANDSCAPE : t1;
+  const radius = t2 === undefined ? 16 : t2;
+  const Wrapper = onPress ? Pressable : View;
+  const t3 = onPress ? "button" : undefined;
+  let t4;
+  if ($[0] !== className) {
+    t4 = cn("overflow-hidden", className);
+    $[0] = className;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== radius) {
+    t5 = {
+      borderRadius: radius
+    };
+    $[2] = radius;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const t6 = height ? undefined : aspectRatio;
+  let t7;
+  if ($[4] !== height || $[5] !== image || $[6] !== radius || $[7] !== t6) {
+    t7 = _jsx(DisplayImage, {
+      aspectRatio: t6,
+      height: height,
+      radius: radius,
+      source: image
+    });
+    $[4] = height;
+    $[5] = image;
+    $[6] = radius;
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== badge) {
+    t8 = badge ? _jsx(View, {
+      className: "absolute top-3 left-3",
+      children: badge
+    }) : null;
+    $[9] = badge;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== overlay || $[12] !== subtitle || $[13] !== title) {
+    t9 = 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;
+    $[11] = overlay;
+    $[12] = subtitle;
+    $[13] = title;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== Wrapper || $[16] !== onPress || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t7 || $[21] !== t8 || $[22] !== t9 || $[23] !== testID || $[24] !== title) {
+    t10 = _jsxs(Wrapper, {
+      accessibilityLabel: title,
+      accessibilityRole: t3,
+      className: t4,
+      onPress: onPress,
+      style: t5,
+      testID: testID,
+      children: [t7, t8, t9]
+    });
+    $[15] = Wrapper;
+    $[16] = onPress;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+    $[23] = testID;
+    $[24] = title;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  return t10;
 }
 export default MediaCard;

package/dist/Display/Display.MediaEmbed.d.ts

@@ -10,10 +10,5 @@ export interface MediaEmbedProps {
     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;