@ermis-network/ermis-chat-react 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/index.cjs +2501 -1249
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1231 -134
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.mts +306 -2
  6. package/dist/index.d.ts +306 -2
  7. package/dist/index.mjs +2427 -1181
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +2 -2
  10. package/src/components/ChannelHeader.tsx +50 -9
  11. package/src/components/ChannelInfo/AddMemberModal.tsx +48 -174
  12. package/src/components/ChannelList.tsx +9 -3
  13. package/src/components/CreateChannelModal.tsx +274 -0
  14. package/src/components/ErmisCallProvider.tsx +279 -0
  15. package/src/components/ErmisCallUI.tsx +634 -0
  16. package/src/components/MessageRenderers.tsx +37 -10
  17. package/src/components/Modal.tsx +2 -1
  18. package/src/components/UserPicker.tsx +377 -0
  19. package/src/context/ChatProvider.tsx +49 -1
  20. package/src/context/ErmisCallContext.tsx +37 -0
  21. package/src/hooks/useCallContext.ts +10 -0
  22. package/src/index.ts +27 -0
  23. package/src/styles/_add-member-modal.css +12 -29
  24. package/src/styles/_call-ui.css +743 -0
  25. package/src/styles/_channel-info.css +34 -34
  26. package/src/styles/_channel-list.css +7 -7
  27. package/src/styles/_create-channel-modal.css +183 -0
  28. package/src/styles/_message-bubble.css +108 -16
  29. package/src/styles/_message-input.css +4 -4
  30. package/src/styles/_message-list.css +11 -11
  31. package/src/styles/_modal.css +23 -36
  32. package/src/styles/_panel.css +1 -1
  33. package/src/styles/_search-panel.css +9 -9
  34. package/src/styles/_tokens.css +42 -0
  35. package/src/styles/_typing-indicator.css +15 -2
  36. package/src/styles/_user-picker.css +268 -0
  37. package/src/styles/index.css +3 -0
  38. package/src/types.ts +293 -1
package/src/styles/_add-member-modal.css CHANGED
@@ -8,7 +8,7 @@
8
8
  .ermis-modal-search svg {
9
9
  position: absolute;
10
10
  left: 12px;
11
- color: var(--ermis-text-secondary, #666666);
11
+ color: var(--ermis-text-secondary);
12
12
  pointer-events: none;
13
13
  }
14
14
 
@@ -16,23 +16,17 @@
16
16
  width: 100%;
17
17
  padding: 10px 12px 10px 36px;
18
18
  border-radius: 8px;
19
- border: 1px solid var(--ermis-border-color, #cccccc);
20
- background-color: var(--ermis-bg-base, #f9f9f9);
21
- color: var(--ermis-text-primary, #000000);
19
+ border: 1px solid var(--ermis-border);
20
+ background-color: var(--ermis-bg-secondary);
21
+ color: var(--ermis-text-primary);
22
22
  font-size: 14px;
23
23
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
24
24
  outline: none;
25
25
  }
26
26
 
27
- [data-theme='dark'] .ermis-modal-search input {
28
- background-color: var(--ermis-bg-base, #121212);
29
- border: 1px solid var(--ermis-border-color, #444444);
30
- color: var(--ermis-text-primary, #ffffff);
31
- }
32
-
33
27
  .ermis-modal-search input:focus {
34
- border-color: var(--ermis-primary-color, #005fff);
35
- box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.2);
28
+ border-color: var(--ermis-accent);
29
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
36
30
  }
37
31
 
38
32
  .ermis-modal-user-list {
@@ -52,17 +46,14 @@
52
46
  background: transparent;
53
47
  }
54
48
  .ermis-modal-user-list::-webkit-scrollbar-thumb {
55
- background-color: var(--ermis-border-color, #cccccc);
49
+ background-color: var(--ermis-border);
56
50
  border-radius: 3px;
57
51
  }
58
- [data-theme='dark'] .ermis-modal-user-list::-webkit-scrollbar-thumb {
59
- background-color: var(--ermis-border-color, #444444);
60
- }
61
52
 
62
53
  .ermis-modal-loading,
63
54
  .ermis-modal-empty {
64
55
  text-align: center;
65
- color: var(--ermis-text-secondary, #666666);
56
+ color: var(--ermis-text-secondary);
66
57
  padding: 32px 0;
67
58
  font-size: 14px;
68
59
  }
@@ -76,11 +67,7 @@
76
67
  }
77
68
 
78
69
  .ermis-modal-user-item:hover {
79
- background-color: var(--ermis-bg-hover, #f0f0f0);
80
- }
81
-
82
- [data-theme='dark'] .ermis-modal-user-item:hover {
83
- background-color: var(--ermis-bg-hover, #2a2a2a);
70
+ background-color: var(--ermis-bg-hover);
84
71
  }
85
72
 
86
73
  .ermis-modal-user-info {
@@ -93,15 +80,11 @@
93
80
  .ermis-modal-user-name {
94
81
  font-size: 14px;
95
82
  font-weight: 500;
96
- color: var(--ermis-text-primary, #000000);
97
- }
98
-
99
- [data-theme='dark'] .ermis-modal-user-name {
100
- color: var(--ermis-text-primary, #ffffff);
83
+ color: var(--ermis-text-primary);
101
84
  }
102
85
 
103
86
  .ermis-modal-add-btn {
104
- background-color: var(--ermis-primary-color, #005fff);
87
+ background-color: var(--ermis-accent);
105
88
  color: #ffffff;
106
89
  border: none;
107
90
  border-radius: 6px;
@@ -113,7 +96,7 @@
113
96
  }
114
97
 
115
98
  .ermis-modal-add-btn:hover:not(:disabled) {
116
- background-color: var(--ermis-primary-hover, #004ecc);
99
+ background-color: var(--ermis-accent-hover);
117
100
  }
118
101
 
119
102
  .ermis-modal-add-btn:disabled {