@mereb/app-messaging 0.0.5 → 0.0.6

package/dist/native.js

@@ -1,23 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Text, View } from 'react-native';
+import { tokens } from '@mereb/tokens/native';
 import { createInMemoryMessagingStore } from './store.js';
 export function MessagesScreen() {
+    const { color, radius, shadow, spacing } = tokens;
     const store = useMemo(() => createInMemoryMessagingStore(), []);
     const [version, setVersion] = useState(0);
     const conversations = store.getConversations();
-    return (_jsxs(View, { style: { flex: 1, padding: 24, gap: 16 }, children: [_jsx(Text, { style: { fontWeight: '700', fontSize: 18, marginBottom: 8 }, children: "Messaging" }), conversations.map((conversation) => (_jsxs(View, { style: {
-                    padding: 12,
-                    borderRadius: 12,
+    return (_jsxs(View, { style: { flex: 1, padding: spacing.xxl, gap: spacing.lg, backgroundColor: color.surfaceAlt }, children: [_jsx(Text, { style: { fontWeight: '700', fontSize: 18, marginBottom: 8, color: color.text }, children: "Messaging" }), conversations.map((conversation) => (_jsxs(View, { style: {
+                    padding: spacing.md,
+                    borderRadius: radius.sm,
                     borderWidth: 1,
-                    borderColor: '#E2E8F0',
-                    backgroundColor: '#FFFFFF',
-                    gap: 4
-                }, children: [_jsx(Text, { style: { fontWeight: '600', fontSize: 16 }, children: conversation.title }), _jsx(Text, { style: { color: '#475569' }, children: conversation.lastMessage?.body ?? 'No messages yet' }), _jsxs(Text, { style: { color: '#94A3B8', fontSize: 12 }, children: ["Unread: ", conversation.unreadCount] })] }, conversation.id))), _jsx(Text, { onPress: () => {
+                    borderColor: color.borderStrong,
+                    backgroundColor: color.surface,
+                    gap: spacing.xxs,
+                    ...shadow.sm
+                }, children: [_jsx(Text, { style: { fontWeight: '600', fontSize: 16, color: color.text }, children: conversation.title }), _jsx(Text, { style: { color: color.textMuted }, children: conversation.lastMessage?.body ?? 'No messages yet' }), _jsxs(Text, { style: { color: color.textSubdued, fontSize: 12 }, children: ["Unread: ", conversation.unreadCount] })] }, conversation.id))), _jsx(Text, { onPress: () => {
                     store.sendMessage(conversations[0]?.id ?? 'conv-1', 'Sent from mobile preview', {
                         id: 'mobile-user',
                         name: 'You'
                     });
                     setVersion((v) => v + 1);
-                }, style: { color: '#2563EB', fontWeight: '600' }, children: "Send a quick test message" }), _jsxs(Text, { style: { color: '#94A3B8', fontSize: 12 }, children: ["Version ", version, " \u2022 This preview uses the package's local in-memory store. Web now uses the real messaging service."] })] }));
+                }, style: { color: color.primary, fontWeight: '600' }, children: "Send a quick test message" }), _jsxs(Text, { style: { color: color.textSubdued, fontSize: 12 }, children: ["Version ", version, " \u2022 This preview uses the package's local in-memory store. Web now uses the real messaging service."] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mereb/app-messaging",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Messaging experience primitives for Mereb applications",
   "type": "module",
   "main": "dist/index.js",
@@ -36,6 +36,9 @@
     "dist",
     "package.json"
   ],
+  "dependencies": {
+    "@mereb/tokens": "^0.0.8"
+  },
   "peerDependencies": {
     "expo-router": ">=3.0.0",
     "react": ">=18.2.0",