@revikornmann/muka-ui 0.9.2 → 0.10.0

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 (21) hide show
  1. package/dist/cjs/components/ChatComposer/ChatComposer.css +52 -61
  2. package/dist/cjs/components/ChatComposer/ChatComposer.js +29 -6
  3. package/dist/cjs/components/ChatComposer/ChatComposer.js.map +1 -1
  4. package/dist/cjs/components/ChatComposer/index.js +6 -1
  5. package/dist/cjs/components/ChatComposer/index.js.map +1 -1
  6. package/dist/esm/components/ChatComposer/ChatComposer.css +52 -61
  7. package/dist/esm/components/ChatComposer/ChatComposer.js +29 -6
  8. package/dist/esm/components/ChatComposer/ChatComposer.js.map +1 -1
  9. package/dist/esm/components/ChatComposer/index.js +1 -0
  10. package/dist/esm/components/ChatComposer/index.js.map +1 -1
  11. package/dist/styles/components/ChatComposer.css +52 -61
  12. package/dist/styles/index.css +2650 -2659
  13. package/dist/styles/muka-dark.css +2650 -2659
  14. package/dist/styles/muka-light.css +2650 -2659
  15. package/dist/styles/wireframe-dark.css +2650 -2659
  16. package/dist/styles/wireframe-light.css +2650 -2659
  17. package/dist/types/components/ChatComposer/ChatComposer.d.ts +50 -18
  18. package/dist/types/components/ChatComposer/ChatComposer.d.ts.map +1 -1
  19. package/dist/types/components/ChatComposer/index.d.ts +1 -0
  20. package/dist/types/components/ChatComposer/index.d.ts.map +1 -1
  21. package/package.json +1 -1
package/dist/styles/components/ChatComposer.css CHANGED
@@ -3,15 +3,9 @@
3
3
  .muka-chat-composer {
4
4
  display: flex;
5
5
  flex-direction: column;
6
- gap: var(--spacing-2);
6
+ gap: var(--spacing-3);
7
7
  width: 100%;
8
8
  max-width: 768px;
9
- padding: var(--spacing-3);
10
- background-color: var(--color-surface-level3);
11
- border-radius: var(--radius-xl);
12
- box-shadow:
13
- 0 0 0.5px var(--color-black-alpha-5, rgba(0, 0, 0, 0.09)),
14
- 0 8px 8px var(--color-black-alpha-5, rgba(0, 0, 0, 0.09));
15
9
  }
16
10
 
17
11
  .muka-chat-composer--disabled {
@@ -19,28 +13,33 @@
19
13
  pointer-events: none;
20
14
  }
21
15
 
22
- /* ─── Staged attachments slot ──────────────────────────── */
16
+ /* ─── Input row ────────────────────────────────────────── */
23
17
 
24
- .muka-chat-composer__attachments {
18
+ .muka-chat-composer__row {
25
19
  display: flex;
26
- flex-wrap: wrap;
27
- gap: var(--spacing-2);
20
+ width: 100%;
21
+ align-items: flex-end;
22
+ gap: var(--spacing-3);
28
23
  }
29
24
 
30
- /* ─── Input row ────────────────────────────────────────── */
25
+ /* ─── Text field ───────────────────────────────────────── */
31
26
 
32
- .muka-chat-composer__row {
27
+ .muka-chat-composer__field {
33
28
  display: flex;
34
- width: 100%;
35
- align-items: stretch;
29
+ flex: 1 1 auto;
30
+ min-width: 0;
31
+ box-sizing: border-box;
32
+ align-items: center;
33
+ gap: var(--spacing-1);
34
+ min-height: var(--input-field-height-lg, 48px);
35
+ padding: 0 var(--spacing-2);
36
36
  border: var(--border-width-regular) solid var(--input-field-color-default-border);
37
37
  border-radius: var(--input-field-radius-lg);
38
38
  background-color: var(--input-field-color-default-background);
39
- padding: var(--spacing-2);
40
39
  transition: border-color 0.12s ease;
41
40
  }
42
41
 
43
- .muka-chat-composer__row:focus-within {
42
+ .muka-chat-composer__field:focus-within {
44
43
  border-color: var(--input-field-color-focus-border, var(--color-action-default));
45
44
  }
46
45
 
@@ -48,16 +47,17 @@
48
47
  flex: 1 1 auto;
49
48
  min-width: 0;
50
49
  width: 100%;
50
+ box-sizing: border-box;
51
51
  resize: none;
52
52
  border: none;
53
53
  background: transparent;
54
54
  outline: none;
55
- padding: var(--spacing-1) var(--spacing-2);
55
+ padding: 0 var(--spacing-1);
56
56
  color: var(--color-text-default-default);
57
- font-family: var(--text-body-md-regular-fontFamily);
58
- font-weight: var(--text-body-md-regular-fontWeight);
59
- font-size: var(--text-body-md-regular-fontSize);
60
- line-height: var(--text-body-md-regular-lineHeight);
57
+ font-family: var(--text-body-base-regular-fontFamily);
58
+ font-weight: var(--text-body-base-regular-fontWeight);
59
+ font-size: var(--text-body-base-regular-fontSize);
60
+ line-height: var(--text-body-base-regular-lineHeight);
61
61
  appearance: none;
62
62
  -webkit-appearance: none;
63
63
  }
@@ -66,57 +66,48 @@
66
66
  color: var(--color-text-subtle-default);
67
67
  }
68
68
 
69
- /* ─── Actions row (leading + trailing) ─────────────────── */
70
-
71
- .muka-chat-composer__actions {
72
- display: flex;
73
- align-items: center;
74
- justify-content: space-between;
75
- gap: var(--spacing-2);
69
+ /* Keep the in-field emoji button flush to the bottom-right as the field grows */
70
+ .muka-chat-composer__emoji {
71
+ flex-shrink: 0;
76
72
  }
77
73
 
78
- .muka-chat-composer__leading {
79
- display: flex;
80
- align-items: center;
81
- gap: var(--spacing-1);
82
- }
74
+ /* ─── Recording bar ────────────────────────────────────── */
83
75
 
84
- .muka-chat-composer__trailing {
76
+ .muka-chat-composer__recording {
85
77
  display: flex;
78
+ flex: 1 1 auto;
79
+ min-width: 0;
80
+ box-sizing: border-box;
86
81
  align-items: center;
87
- gap: var(--spacing-1);
88
- margin-left: auto;
82
+ min-height: var(--input-field-height-lg, 48px);
83
+ padding: var(--card-padding-sm);
84
+ border: var(--border-width-regular) solid var(--card-color-default-border);
85
+ border-radius: var(--radius-lg);
86
+ background-color: var(--card-color-default-background);
89
87
  }
90
88
 
91
- /* ─── Send button ──────────────────────────────────────── */
89
+ /* ─── Staged attachments strip ─────────────────────────── */
92
90
 
93
- .muka-chat-composer__send {
94
- display: inline-flex;
95
- align-items: center;
96
- justify-content: center;
97
- width: var(--size-3xl, 40px);
98
- height: var(--size-3xl, 40px);
99
- border: none;
100
- border-radius: var(--radius-lg);
101
- background-color: var(--button-color-primary-background-default);
102
- color: var(--button-color-primary-foreground-default);
103
- cursor: pointer;
104
- flex-shrink: 0;
105
- -webkit-tap-highlight-color: transparent;
106
- transition: background-color 0.12s ease;
91
+ .muka-chat-composer__attachments-strip {
92
+ position: relative;
93
+ width: 100%;
107
94
  }
108
95
 
109
- .muka-chat-composer__send:hover:not(:disabled) {
110
- background-color: var(--button-color-primary-background-hover, var(--button-color-primary-background-default));
96
+ .muka-chat-composer__attachments {
97
+ display: flex;
98
+ gap: var(--spacing-3);
99
+ overflow-x: auto;
100
+ scroll-behavior: smooth;
101
+ scrollbar-width: none;
111
102
  }
112
103
 
113
- .muka-chat-composer__send:disabled {
114
- background-color: var(--color-surface-level1);
115
- color: var(--color-text-subtle-default);
116
- cursor: not-allowed;
104
+ .muka-chat-composer__attachments::-webkit-scrollbar {
105
+ display: none;
117
106
  }
118
107
 
119
- .muka-chat-composer__send:focus-visible {
120
- outline: 2px solid var(--color-action-default);
121
- outline-offset: 2px;
108
+ .muka-chat-composer__overflow {
109
+ position: absolute;
110
+ top: 50%;
111
+ right: var(--spacing-2);
112
+ transform: translateY(-50%);
122
113
  }