@assistant-ui/react-markdown 0.1.1 → 0.1.2

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 (2) hide show
  1. package/dist/styles/markdown.css +224 -23
  2. package/package.json +7 -2
package/dist/styles/markdown.css CHANGED
@@ -1,73 +1,274 @@
1
1
  /* src/styles/tailwindcss/markdown.css */
2
+ @keyframes aui-pulse {
3
+ 50% {
4
+ opacity: .5;
5
+ }
6
+ }
2
7
  .aui-md-in-progress:where(:empty)::after,
3
8
  .aui-md-in-progress:where(> :not(ol):not(ul):not(pre):last-child)::after,
4
9
  .aui-md-in-progress:where(> pre:last-child code)::after,
5
10
  .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child:not(:has(* > li)))::after,
6
11
  .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child:not(:has(* > li)))::after,
7
12
  .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child)::after {
8
- @apply animate-pulse font-sans content-["\25cf"] ltr:ml-1 rtl:mr-1;
13
+ animation: aui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
14
+ font-family:
15
+ ui-sans-serif,
16
+ system-ui,
17
+ sans-serif,
18
+ "Apple Color Emoji",
19
+ "Segoe UI Emoji",
20
+ "Segoe UI Symbol",
21
+ "Noto Color Emoji";
22
+ --aui-content: "\25cf";
23
+ content: var(--aui-content);
24
+ }
25
+ .aui-md-in-progress:where(:empty):where([dir=ltr], [dir=ltr] *)::after,
26
+ .aui-md-in-progress:where(> :not(ol):not(ul):not(pre):last-child):where([dir=ltr], [dir=ltr] *)::after,
27
+ .aui-md-in-progress:where(> pre:last-child code):where([dir=ltr], [dir=ltr] *)::after,
28
+ .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child:not(:has(* > li))):where([dir=ltr], [dir=ltr] *)::after,
29
+ .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child:not(:has(* > li))):where([dir=ltr], [dir=ltr] *)::after,
30
+ .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child):where([dir=ltr], [dir=ltr] *)::after {
31
+ margin-left: 0.25rem;
32
+ }
33
+ .aui-md-in-progress:where(:empty):where([dir=rtl], [dir=rtl] *)::after,
34
+ .aui-md-in-progress:where(> :not(ol):not(ul):not(pre):last-child):where([dir=rtl], [dir=rtl] *)::after,
35
+ .aui-md-in-progress:where(> pre:last-child code):where([dir=rtl], [dir=rtl] *)::after,
36
+ .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child:not(:has(* > li))):where([dir=rtl], [dir=rtl] *)::after,
37
+ .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child:not(:has(* > li))):where([dir=rtl], [dir=rtl] *)::after,
38
+ .aui-md-in-progress:where(> :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child > :is(ol, ul):last-child > li:last-child):where([dir=rtl], [dir=rtl] *)::after {
39
+ margin-right: 0.25rem;
9
40
  }
10
41
  :where(.aui-md-root) h1 {
11
- @apply mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0;
42
+ margin-bottom: 2rem;
43
+ scroll-margin: 5rem;
44
+ font-size: 2.25rem;
45
+ line-height: 2.5rem;
46
+ font-weight: 800;
47
+ letter-spacing: -0.025em;
48
+ }
49
+ :where(.aui-md-root) h1:last-child {
50
+ margin-bottom: 0px;
12
51
  }
13
52
  :where(.aui-md-root) h2 {
14
- @apply mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0;
53
+ margin-bottom: 1rem;
54
+ margin-top: 2rem;
55
+ scroll-margin: 5rem;
56
+ font-size: 1.875rem;
57
+ line-height: 2.25rem;
58
+ font-weight: 600;
59
+ letter-spacing: -0.025em;
60
+ }
61
+ :where(.aui-md-root) h2:first-child {
62
+ margin-top: 0px;
63
+ }
64
+ :where(.aui-md-root) h2:last-child {
65
+ margin-bottom: 0px;
15
66
  }
16
67
  :where(.aui-md-root) h3 {
17
- @apply mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0;
68
+ margin-bottom: 1rem;
69
+ margin-top: 1.5rem;
70
+ scroll-margin: 5rem;
71
+ font-size: 1.5rem;
72
+ line-height: 2rem;
73
+ font-weight: 600;
74
+ letter-spacing: -0.025em;
75
+ }
76
+ :where(.aui-md-root) h3:first-child {
77
+ margin-top: 0px;
78
+ }
79
+ :where(.aui-md-root) h3:last-child {
80
+ margin-bottom: 0px;
18
81
  }
19
82
  :where(.aui-md-root) h4 {
20
- @apply mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0;
83
+ margin-bottom: 1rem;
84
+ margin-top: 1.5rem;
85
+ scroll-margin: 5rem;
86
+ font-size: 1.25rem;
87
+ line-height: 1.75rem;
88
+ font-weight: 600;
89
+ letter-spacing: -0.025em;
90
+ }
91
+ :where(.aui-md-root) h4:first-child {
92
+ margin-top: 0px;
93
+ }
94
+ :where(.aui-md-root) h4:last-child {
95
+ margin-bottom: 0px;
21
96
  }
22
97
  :where(.aui-md-root) h5 {
23
- @apply my-4 text-lg font-semibold first:mt-0 last:mb-0;
98
+ margin-top: 1rem;
99
+ margin-bottom: 1rem;
100
+ font-size: 1.125rem;
101
+ line-height: 1.75rem;
102
+ font-weight: 600;
103
+ }
104
+ :where(.aui-md-root) h5:first-child {
105
+ margin-top: 0px;
106
+ }
107
+ :where(.aui-md-root) h5:last-child {
108
+ margin-bottom: 0px;
24
109
  }
25
110
  :where(.aui-md-root) h6 {
26
- @apply my-4 font-semibold first:mt-0 last:mb-0;
111
+ margin-top: 1rem;
112
+ margin-bottom: 1rem;
113
+ font-weight: 600;
114
+ }
115
+ :where(.aui-md-root) h6:first-child {
116
+ margin-top: 0px;
117
+ }
118
+ :where(.aui-md-root) h6:last-child {
119
+ margin-bottom: 0px;
27
120
  }
28
121
  :where(.aui-md-root) p {
29
- @apply mb-5 mt-5 leading-7 first:mt-0 last:mb-0;
122
+ margin-bottom: 1.25rem;
123
+ margin-top: 1.25rem;
124
+ line-height: 1.75rem;
125
+ }
126
+ :where(.aui-md-root) p:first-child {
127
+ margin-top: 0px;
128
+ }
129
+ :where(.aui-md-root) p:last-child {
130
+ margin-bottom: 0px;
30
131
  }
31
132
  :where(.aui-md-root) a {
32
- @apply text-aui-primary font-medium underline underline-offset-4;
133
+ font-weight: 500;
134
+ color: hsl(var(--aui-primary));
135
+ text-decoration-line: underline;
136
+ text-underline-offset: 4px;
33
137
  }
34
138
  :where(.aui-md-root) blockquote {
35
- @apply border-l-2 pl-6 italic;
139
+ border-left-width: 2px;
140
+ padding-left: 1.5rem;
141
+ font-style: italic;
36
142
  }
37
143
  :where(.aui-md-root) ul {
38
- @apply my-5 ml-6 list-disc [&>li]:mt-2;
144
+ margin-top: 1.25rem;
145
+ margin-bottom: 1.25rem;
146
+ margin-left: 1.5rem;
147
+ list-style-type: disc;
148
+ }
149
+ :where(.aui-md-root) ul > li {
150
+ margin-top: 0.5rem;
39
151
  }
40
152
  :where(.aui-md-root) ol {
41
- @apply my-5 ml-6 list-decimal [&>li]:mt-2;
153
+ margin-top: 1.25rem;
154
+ margin-bottom: 1.25rem;
155
+ margin-left: 1.5rem;
156
+ list-style-type: decimal;
157
+ }
158
+ :where(.aui-md-root) ol > li {
159
+ margin-top: 0.5rem;
42
160
  }
43
161
  :where(.aui-md-root) hr {
44
- @apply my-5 border-b;
162
+ margin-top: 1.25rem;
163
+ margin-bottom: 1.25rem;
164
+ border-bottom-width: 1px;
45
165
  }
46
166
  :where(.aui-md-root) table {
47
- @apply my-5 w-full border-separate border-spacing-0 overflow-y-auto;
167
+ margin-top: 1.25rem;
168
+ margin-bottom: 1.25rem;
169
+ width: 100%;
170
+ border-collapse: separate;
171
+ --aui-border-spacing-x: 0px;
172
+ --aui-border-spacing-y: 0px;
173
+ border-spacing: var(--aui-border-spacing-x) var(--aui-border-spacing-y);
174
+ overflow-y: auto;
48
175
  }
49
176
  :where(.aui-md-root) th {
50
- @apply bg-aui-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right;
177
+ background-color: hsl(var(--aui-muted));
178
+ padding-left: 1rem;
179
+ padding-right: 1rem;
180
+ padding-top: 0.5rem;
181
+ padding-bottom: 0.5rem;
182
+ text-align: left;
183
+ font-weight: 700;
184
+ }
185
+ :where(.aui-md-root) th:first-child {
186
+ border-top-left-radius: var(--aui-radius);
187
+ }
188
+ :where(.aui-md-root) th:last-child {
189
+ border-top-right-radius: var(--aui-radius);
190
+ }
191
+ :where(.aui-md-root) th[align=center] {
192
+ text-align: center;
193
+ }
194
+ :where(.aui-md-root) th[align=right] {
195
+ text-align: right;
51
196
  }
52
197
  :where(.aui-md-root) td {
53
- @apply border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right;
198
+ border-bottom-width: 1px;
199
+ border-left-width: 1px;
200
+ padding-left: 1rem;
201
+ padding-right: 1rem;
202
+ padding-top: 0.5rem;
203
+ padding-bottom: 0.5rem;
204
+ text-align: left;
205
+ }
206
+ :where(.aui-md-root) td:last-child {
207
+ border-right-width: 1px;
208
+ }
209
+ :where(.aui-md-root) td[align=center] {
210
+ text-align: center;
211
+ }
212
+ :where(.aui-md-root) td[align=right] {
213
+ text-align: right;
54
214
  }
55
215
  :where(.aui-md-root) tr {
56
- @apply m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg;
216
+ margin: 0px;
217
+ border-bottom-width: 1px;
218
+ padding: 0px;
219
+ }
220
+ :where(.aui-md-root) tr:first-child {
221
+ border-top-width: 1px;
57
222
  }
58
- :where(.aui-md-root) sup {
59
- @apply [&>a]:text-xs [&>a]:no-underline;
223
+ :where(.aui-md-root) tr:last-child > td:first-child {
224
+ border-bottom-left-radius: var(--aui-radius);
225
+ }
226
+ :where(.aui-md-root) tr:last-child > td:last-child {
227
+ border-bottom-right-radius: var(--aui-radius);
228
+ }
229
+ :where(.aui-md-root) sup > a {
230
+ font-size: 0.75rem;
231
+ line-height: 1rem;
232
+ text-decoration-line: none;
60
233
  }
61
234
  :where(.aui-md-root) pre {
62
- @apply overflow-x-auto rounded-b-lg bg-black p-4 text-white;
235
+ overflow-x: auto;
236
+ border-bottom-right-radius: var(--aui-radius);
237
+ border-bottom-left-radius: var(--aui-radius);
238
+ background-color: #000;
239
+ padding: 1rem;
240
+ --aui-text-opacity: 1;
241
+ color: rgb(255 255 255 / var(--aui-text-opacity));
63
242
  }
64
243
  :where(.aui-md-root) > code,
65
244
  :where(.aui-md-root) :not(:where(pre)) code {
66
- @apply bg-aui-muted rounded border font-semibold;
245
+ border-radius: 0.25rem;
246
+ border-width: 1px;
247
+ background-color: hsl(var(--aui-muted));
248
+ font-weight: 600;
67
249
  }
68
250
  .aui-code-header-root {
69
- @apply flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white;
251
+ display: flex;
252
+ align-items: center;
253
+ justify-content: space-between;
254
+ gap: 1rem;
255
+ border-top-left-radius: var(--aui-radius);
256
+ border-top-right-radius: var(--aui-radius);
257
+ background-color: #18181b;
258
+ padding-left: 1rem;
259
+ padding-right: 1rem;
260
+ padding-top: 0.5rem;
261
+ padding-bottom: 0.5rem;
262
+ font-size: 0.875rem;
263
+ line-height: 1.25rem;
264
+ font-weight: 600;
265
+ --aui-text-opacity: 1;
266
+ color: rgb(255 255 255 / var(--aui-text-opacity));
70
267
  }
71
268
  .aui-code-header-language {
72
- @apply lowercase [&>span]:text-xs;
269
+ text-transform: lowercase;
270
+ }
271
+ .aui-code-header-language > span {
272
+ font-size: 0.75rem;
273
+ line-height: 1rem;
73
274
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@assistant-ui/react-markdown",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {
@@ -43,7 +43,7 @@
43
43
  "react-markdown": "^9.0.1"
44
44
  },
45
45
  "peerDependencies": {
46
- "@assistant-ui/react": "^0.4.4",
46
+ "@assistant-ui/react": "^0.4.6",
47
47
  "@types/react": "*",
48
48
  "react": "^18",
49
49
  "tailwindcss": "^3.4.4"
@@ -57,10 +57,15 @@
57
57
  }
58
58
  },
59
59
  "devDependencies": {
60
+ "@types/node": "^20.14.10",
61
+ "autoprefixer": "^10.4.19",
60
62
  "eslint-config-next": "14.2.5",
63
+ "postcss": "^8.4.39",
61
64
  "tailwindcss": "^3.4.4",
65
+ "tailwindcss-animate": "^1.0.7",
62
66
  "tsup": "^8.1.0",
63
67
  "tsx": "^4.16.2",
68
+ "@assistant-ui/tailwindcss-transformer": "^0.1.0",
64
69
  "@assistant-ui/tsconfig": "0.0.0"
65
70
  },
66
71
  "publishConfig": {