@mantine/code-highlight 7.0.0-alpha.2 → 7.0.0-alpha.21

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 (55) hide show
  1. package/cjs/CodeHighlight.js +1 -20
  2. package/cjs/CodeHighlight.js.map +1 -1
  3. package/cjs/CodeHighlight.module.css.js +1 -1
  4. package/cjs/CodeHighlight.theme.module.css.js +1 -1
  5. package/cjs/CodeHighlightTabs.js +41 -50
  6. package/cjs/CodeHighlightTabs.js.map +1 -1
  7. package/cjs/CopyIcon.js +14 -24
  8. package/cjs/CopyIcon.js.map +1 -1
  9. package/cjs/ExpandIcon.js +14 -38
  10. package/cjs/ExpandIcon.js.map +1 -1
  11. package/cjs/FileIcon.js +3 -3
  12. package/cjs/FileIcon.js.map +1 -1
  13. package/cjs/InlineCodeHighlight.js +9 -6
  14. package/cjs/InlineCodeHighlight.js.map +1 -1
  15. package/cjs/index.css +91 -127
  16. package/cjs/index.js +1 -0
  17. package/cjs/index.js.map +1 -1
  18. package/cjs/use-highlight.js +3 -1
  19. package/cjs/use-highlight.js.map +1 -1
  20. package/esm/CodeHighlight.js +1 -20
  21. package/esm/CodeHighlight.js.map +1 -1
  22. package/esm/CodeHighlight.module.css.js +1 -1
  23. package/esm/CodeHighlight.theme.module.css.js +1 -1
  24. package/esm/CodeHighlightTabs.js +42 -51
  25. package/esm/CodeHighlightTabs.js.map +1 -1
  26. package/esm/CopyIcon.js +14 -24
  27. package/esm/CopyIcon.js.map +1 -1
  28. package/esm/ExpandIcon.js +14 -38
  29. package/esm/ExpandIcon.js.map +1 -1
  30. package/esm/FileIcon.js +3 -3
  31. package/esm/FileIcon.js.map +1 -1
  32. package/esm/InlineCodeHighlight.js +9 -6
  33. package/esm/InlineCodeHighlight.js.map +1 -1
  34. package/esm/index.css +91 -127
  35. package/esm/index.js +1 -0
  36. package/esm/index.js.map +1 -1
  37. package/esm/use-highlight.js +3 -1
  38. package/esm/use-highlight.js.map +1 -1
  39. package/lib/CodeHighlight.d.ts +0 -3
  40. package/lib/CodeHighlightTabs.d.ts +2 -3
  41. package/lib/CopyIcon.d.ts +1 -1
  42. package/lib/ExpandIcon.d.ts +1 -1
  43. package/lib/FileIcon.d.ts +3 -1
  44. package/lib/InlineCodeHighlight.d.ts +0 -1
  45. package/lib/index.d.ts +3 -3
  46. package/package.json +18 -10
  47. package/src/CodeHighlight.module.css +14 -0
  48. package/src/CodeHighlight.story.tsx +6 -0
  49. package/src/CodeHighlight.tsx +1 -3
  50. package/src/CodeHighlightTabs.tsx +10 -5
  51. package/src/FileIcon.tsx +13 -3
  52. package/src/InlineCodeHighlight.tsx +0 -1
  53. package/src/index.ts +0 -3
  54. package/tsconfig.build.tsbuildinfo +1 -1
  55. package/styles.css +0 -326
package/cjs/index.css CHANGED
@@ -1,33 +1,33 @@
1
- .mantine-XIBJZDt {
1
+ .m-5caae6d3 {
2
2
  display: inline-block;
3
- padding: 0.0625rem 0.1875rem;
4
- font-size: 0.8125rem;
3
+ padding: calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale));
4
+ font-size: calc(0.8125rem * var(--mantine-scale));
5
5
  border-radius: var(--mantine-radius-xs);
6
6
  line-height: var(--_code-line-height, var(--mantine-line-height));
7
7
  font-family: var(--mantine-font-family-monospace);
8
8
  }
9
9
 
10
- .mantine-RDvBcjB {
10
+ .m-2c47c4fd {
11
11
  display: block;
12
12
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
13
13
  margin: 0;
14
14
  --_code-line-height: 1.7;
15
15
  }
16
16
 
17
- .mantine-cmEtjrV {
17
+ .m-e58679f3 {
18
18
  display: flex;
19
19
  align-items: flex-start;
20
20
  justify-content: space-between;
21
21
  }
22
22
 
23
- .mantine-059sM-t {
23
+ .m-be7e9c9c {
24
24
  display: flex;
25
- margin-top: 0.4375rem;
26
- margin-right: 0.4375rem;
25
+ margin-top: calc(0.4375rem * var(--mantine-scale));
26
+ margin-right: calc(0.4375rem * var(--mantine-scale));
27
27
  }
28
28
 
29
- .mantine-tB-P5PD,
30
- .mantine-NTm-nGn {
29
+ .m-5caae85b,
30
+ .m-d498bab7 {
31
31
  background-color: transparent;
32
32
  opacity: 0.8;
33
33
  margin: 0;
@@ -35,149 +35,131 @@
35
35
 
36
36
  @media (hover: hover) {
37
37
 
38
- .mantine-tB-P5PD:hover, .mantine-NTm-nGn:hover {
38
+ .m-5caae85b:hover, .m-d498bab7:hover {
39
39
  opacity: 1;
40
40
  }
41
41
  }
42
42
 
43
43
  @media (hover: none) {
44
44
 
45
- .mantine-tB-P5PD:active, .mantine-NTm-nGn:active {
45
+ .m-5caae85b:active, .m-d498bab7:active {
46
46
  opacity: 1;
47
47
  }
48
48
  }
49
49
 
50
50
  @media (max-width: 40em) {
51
51
 
52
- .mantine-tB-P5PD,
53
- .mantine-NTm-nGn {
52
+ .m-5caae85b,
53
+ .m-d498bab7 {
54
54
  display: none
55
55
  }
56
56
  }
57
57
 
58
- .mantine-tB-P5PD {
58
+ .m-5caae85b {
59
59
  position: absolute;
60
- top: 0.3125rem;
61
- right: 0.3125rem;
60
+ top: calc(0.3125rem * var(--mantine-scale));
61
+ right: calc(0.3125rem * var(--mantine-scale));
62
62
  z-index: 1;
63
63
  }
64
64
 
65
- .mantine-PBrPXnu {
65
+ .m-5cac2e62 {
66
66
  display: flex;
67
67
  align-items: center;
68
68
  justify-content: center;
69
69
  font-size: var(--mantine-font-size-xs);
70
- gap: 0.4375rem;
71
- padding: 0.4375rem 0.75rem;
70
+ gap: calc(0.4375rem * var(--mantine-scale));
71
+ padding: calc(0.4375rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
72
72
  font-family: var(--mantine-font-family-monospace);
73
73
  font-weight: 700;
74
74
  line-height: 1;
75
75
  user-select: none;
76
76
  cursor: var(--_file-cursor);
77
- border: 0.0625rem solid var(--_file-bd);
77
+ border: calc(0.0625rem * var(--mantine-scale)) solid var(--_file-bd);
78
78
  border-top: 0;
79
79
  border-left: 0;
80
80
  color: var(--_file-color);
81
81
  opacity: var(--_file-opacity);
82
82
  background-color: var(--_file-bg);
83
+ white-space: nowrap;
83
84
  }
84
85
 
85
86
  @media (hover: hover) {
86
87
 
87
- .mantine-PBrPXnu:hover {
88
+ .m-5cac2e62:hover {
88
89
  --_file-opacity: 1;
89
90
  }
90
91
  }
91
92
 
92
93
  @media (hover: none) {
93
94
 
94
- .mantine-PBrPXnu:active {
95
+ .m-5cac2e62:active {
95
96
  --_file-opacity: 1;
96
97
  }
97
98
  }
98
99
 
99
- .mantine-PBrPXnu:last-of-type {
100
+ .m-5cac2e62:last-of-type {
100
101
  border-bottom-right-radius: var(--mantine-radius-sm);
101
102
  }
102
103
 
103
- .mantine-PBrPXnu:only-child {
104
+ .m-5cac2e62:only-child {
104
105
  --_file-cursor: default;
105
106
  }
106
107
 
107
- .mantine-PBrPXnu[data-active] {
108
+ .m-5cac2e62[data-active] {
108
109
  --_file-opacity: 1;
109
110
  --_file-color: var(--_file-active-color) !important;
110
111
  --_file-bg: var(--_file-active-bg);
111
112
  }
112
113
 
113
- .mantine-PBrPXnu {
114
+ .m-5cac2e62 {
114
115
 
115
116
  --_file-opacity: 0.8;
116
117
  --_file-cursor: pointer;
117
118
  }
118
119
 
119
- [data-mantine-color-scheme='light'] .mantine-PBrPXnu {
120
+ [data-mantine-color-scheme='light'] .m-5cac2e62 {
120
121
  --_file-color: var(--mantine-color-gray-8);
121
122
  --_file-bd: var(--mantine-color-gray-2);
122
123
  --_file-active-bg: var(--mantine-color-white);
123
124
  --_file-active-color: var(--mantine-color-black);
124
125
  }
125
126
 
126
- @media (prefers-color-scheme: light) {
127
-
128
- .mantine-PBrPXnu {
129
- --_file-color: var(--mantine-color-gray-8);
130
- --_file-bd: var(--mantine-color-gray-2);
131
- --_file-active-bg: var(--mantine-color-white);
132
- --_file-active-color: var(--mantine-color-black);
133
- }
134
- }
135
-
136
- [data-mantine-color-scheme='dark'] .mantine-PBrPXnu {
127
+ [data-mantine-color-scheme='dark'] .m-5cac2e62 {
137
128
  --_file-color: var(--mantine-color-dark-0);
138
129
  --_file-bd: var(--mantine-color-dark-4);
139
130
  --_file-active-bg: var(--mantine-color-dark-6);
140
131
  --_file-active-color: var(--mantine-color-white);
141
132
  }
142
133
 
143
- @media (prefers-color-scheme: dark) {
144
-
145
- .mantine-PBrPXnu {
146
- --_file-color: var(--mantine-color-dark-0);
147
- --_file-bd: var(--mantine-color-dark-4);
148
- --_file-active-bg: var(--mantine-color-dark-6);
149
- --_file-active-color: var(--mantine-color-white);
150
- }
151
- }
152
-
153
- .mantine-IvOddiX {
134
+ .m-38d99e51 {
154
135
  display: flex;
155
136
  }
156
137
 
157
- .mantine-YfYyOiA {
138
+ .m-9f507240 {
158
139
  max-height: var(--ch-max-collapsed-height);
159
140
  overflow: hidden;
160
141
  position: relative;
161
142
  }
162
143
 
163
- .mantine-YfYyOiA::before {
144
+ .m-9f507240::before {
164
145
  content: '';
146
+ z-index: 100;
165
147
  position: absolute;
166
148
  inset: 0;
167
149
  pointer-events: none;
168
150
  background-image: linear-gradient(0deg, var(--_background) 16%, rgba(0, 0, 0, 0) 100%);
169
- border-radius: calc(var(--mantine-radius-md) - 0.0625rem);
151
+ border-radius: calc(var(--mantine-radius-md) - calc(0.0625rem * var(--mantine-scale)));
170
152
  }
171
153
 
172
- .mantine-YfYyOiA[data-expanded] {
154
+ .m-9f507240[data-expanded] {
173
155
  max-height: none;
174
156
  }
175
157
 
176
- .mantine-YfYyOiA[data-expanded]::before {
158
+ .m-9f507240[data-expanded]::before {
177
159
  display: none;
178
160
  }
179
161
 
180
- .mantine-haNyFRC {
162
+ .m-c9378bc2 {
181
163
  position: absolute;
182
164
  bottom: 0;
183
165
  left: 50%;
@@ -186,39 +168,37 @@
186
168
  color: var(--mantine-color-anchor);
187
169
  width: 100%;
188
170
  text-align: center;
171
+ z-index: 101;
189
172
  padding-top: var(--mantine-spacing-xs);
190
173
  padding-bottom: var(--mantine-spacing-xs);
191
174
  }
192
175
 
193
- .mantine-haNyFRC[data-hidden] {
176
+ .m-c9378bc2[data-hidden] {
194
177
  display: none;
195
178
  }
196
179
 
197
- .mantine-k6OJW8l {
180
+ .m-5cb1b9c8 {
198
181
  margin-top: 0;
199
182
  position: relative;
200
183
  }
201
184
 
202
- .mantine-h-DP-Yw {
203
- color: var(--_color);
204
- background: var(--_background);
185
+ .m-b46cddfb {
186
+ display: flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ flex: 0 1;
205
190
  }
206
191
 
207
- [data-mantine-color-scheme='light'] .mantine-h-DP-Yw {
208
- --_color: var(--mantine-color-gray-7);
209
- --_background: var(--mantine-color-gray-0);
210
- --code-comment-color: var(--mantine-color-gray-6);
211
- --code-keyword-color: var(--mantine-color-violet-8);
212
- --code-tag-color: var(--mantine-color-red-9);
213
- --code-literal-color: var(--mantine-color-blue-6);
214
- --code-string-color: var(--mantine-color-blue-9);
215
- --code-variable-color: var(--mantine-color-lime-9);
216
- --code-class-color: var(--mantine-color-orange-9);
217
- }
192
+ .m-b46cddfb > svg {
193
+ display: block;
194
+ }
218
195
 
219
- @media (prefers-color-scheme: light) {
196
+ .m-1f5e827e {
197
+ color: var(--_color);
198
+ background: var(--_background);
199
+ }
220
200
 
221
- .mantine-h-DP-Yw {
201
+ [data-mantine-color-scheme='light'] .m-1f5e827e {
222
202
  --_color: var(--mantine-color-gray-7);
223
203
  --_background: var(--mantine-color-gray-0);
224
204
  --code-comment-color: var(--mantine-color-gray-6);
@@ -228,24 +208,9 @@
228
208
  --code-string-color: var(--mantine-color-blue-9);
229
209
  --code-variable-color: var(--mantine-color-lime-9);
230
210
  --code-class-color: var(--mantine-color-orange-9);
231
- }
232
- }
233
-
234
- [data-mantine-color-scheme='dark'] .mantine-h-DP-Yw {
235
- --_color: var(--mantine-color-dark-1);
236
- --_background: var(--mantine-color-dark-8);
237
- --code-comment-color: var(--mantine-color-dark-3);
238
- --code-keyword-color: var(--mantine-color-violet-3);
239
- --code-tag-color: var(--mantine-color-yellow-4);
240
- --code-literal-color: var(--mantine-color-blue-4);
241
- --code-string-color: var(--mantine-color-green-6);
242
- --code-variable-color: var(--mantine-color-blue-2);
243
- --code-class-color: var(--mantine-color-orange-5);
244
211
  }
245
212
 
246
- @media (prefers-color-scheme: dark) {
247
-
248
- .mantine-h-DP-Yw {
213
+ [data-mantine-color-scheme='dark'] .m-1f5e827e {
249
214
  --_color: var(--mantine-color-dark-1);
250
215
  --_background: var(--mantine-color-dark-8);
251
216
  --code-comment-color: var(--mantine-color-dark-3);
@@ -255,72 +220,71 @@
255
220
  --code-string-color: var(--mantine-color-green-6);
256
221
  --code-variable-color: var(--mantine-color-blue-2);
257
222
  --code-class-color: var(--mantine-color-orange-5);
258
- }
259
223
  }
260
224
 
261
- .mantine-h-DP-Yw .hljs-comment,
262
- .mantine-h-DP-Yw .hljs-quote {
225
+ .m-1f5e827e .hljs-comment,
226
+ .m-1f5e827e .hljs-quote {
263
227
  font-style: italic;
264
228
  color: var(--code-comment-color);
265
229
  }
266
230
 
267
- .mantine-h-DP-Yw .hljs-doctag,
268
- .mantine-h-DP-Yw .hljs-formula,
269
- .mantine-h-DP-Yw .hljs-keyword {
231
+ .m-1f5e827e .hljs-doctag,
232
+ .m-1f5e827e .hljs-formula,
233
+ .m-1f5e827e .hljs-keyword {
270
234
  color: var(--code-keyword-color);
271
235
  }
272
236
 
273
- .mantine-h-DP-Yw .hljs-deletion,
274
- .mantine-h-DP-Yw .hljs-name,
275
- .mantine-h-DP-Yw .hljs-section,
276
- .mantine-h-DP-Yw .hljs-selector-tag,
277
- .mantine-h-DP-Yw .hljs-subst {
237
+ .m-1f5e827e .hljs-deletion,
238
+ .m-1f5e827e .hljs-name,
239
+ .m-1f5e827e .hljs-section,
240
+ .m-1f5e827e .hljs-selector-tag,
241
+ .m-1f5e827e .hljs-subst {
278
242
  color: var(--code-tag-color);
279
243
  }
280
244
 
281
- .mantine-h-DP-Yw .hljs-literal {
245
+ .m-1f5e827e .hljs-literal {
282
246
  color: var(--code-literal-color);
283
247
  }
284
248
 
285
- .mantine-h-DP-Yw .hljs-addition,
286
- .mantine-h-DP-Yw .hljs-attribute,
287
- .mantine-h-DP-Yw .hljs-meta .hljs-string,
288
- .mantine-h-DP-Yw .hljs-regexp,
289
- .mantine-h-DP-Yw .hljs-string {
249
+ .m-1f5e827e .hljs-addition,
250
+ .m-1f5e827e .hljs-attribute,
251
+ .m-1f5e827e .hljs-meta .hljs-string,
252
+ .m-1f5e827e .hljs-regexp,
253
+ .m-1f5e827e .hljs-string {
290
254
  color: var(--code-string-color);
291
255
  }
292
256
 
293
- .mantine-h-DP-Yw .hljs-attr,
294
- .mantine-h-DP-Yw .hljs-number,
295
- .mantine-h-DP-Yw .hljs-selector-attr,
296
- .mantine-h-DP-Yw .hljs-selector-class,
297
- .mantine-h-DP-Yw .hljs-selector-pseudo,
298
- .mantine-h-DP-Yw .hljs-template-variable,
299
- .mantine-h-DP-Yw .hljs-type,
300
- .mantine-h-DP-Yw .hljs-variable {
257
+ .m-1f5e827e .hljs-attr,
258
+ .m-1f5e827e .hljs-number,
259
+ .m-1f5e827e .hljs-selector-attr,
260
+ .m-1f5e827e .hljs-selector-class,
261
+ .m-1f5e827e .hljs-selector-pseudo,
262
+ .m-1f5e827e .hljs-template-variable,
263
+ .m-1f5e827e .hljs-type,
264
+ .m-1f5e827e .hljs-variable {
301
265
  color: var(--code-variable-color);
302
266
  }
303
267
 
304
- .mantine-h-DP-Yw .hljs-bullet,
305
- .mantine-h-DP-Yw .hljs-link,
306
- .mantine-h-DP-Yw .hljs-meta,
307
- .mantine-h-DP-Yw .hljs-selector-id,
308
- .mantine-h-DP-Yw .hljs-symbol,
309
- .mantine-h-DP-Yw .hljs-title,
310
- .mantine-h-DP-Yw .hljs-built_in,
311
- .mantine-h-DP-Yw .hljs-class .hljs-title,
312
- .mantine-h-DP-Yw .hljs-title.class_ {
268
+ .m-1f5e827e .hljs-bullet,
269
+ .m-1f5e827e .hljs-link,
270
+ .m-1f5e827e .hljs-meta,
271
+ .m-1f5e827e .hljs-selector-id,
272
+ .m-1f5e827e .hljs-symbol,
273
+ .m-1f5e827e .hljs-title,
274
+ .m-1f5e827e .hljs-built_in,
275
+ .m-1f5e827e .hljs-class .hljs-title,
276
+ .m-1f5e827e .hljs-title.class_ {
313
277
  color: var(--code-class-color);
314
278
  }
315
279
 
316
- .mantine-h-DP-Yw .hljs-emphasis {
280
+ .m-1f5e827e .hljs-emphasis {
317
281
  font-style: italic;
318
282
  }
319
283
 
320
- .mantine-h-DP-Yw .hljs-strong {
284
+ .m-1f5e827e .hljs-strong {
321
285
  font-weight: 700;
322
286
  }
323
287
 
324
- .mantine-h-DP-Yw .hljs-link {
288
+ .m-1f5e827e .hljs-link {
325
289
  text-decoration: underline;
326
290
  }
package/cjs/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  'use strict';
2
3
 
3
4
  Object.defineProperty(exports, '__esModule', { value: true });
package/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
package/cjs/use-highlight.js CHANGED
@@ -12,7 +12,9 @@ var hljs__default = /*#__PURE__*/_interopDefaultLegacy(hljs);
12
12
  function useHighlight({ code, language, highlightOnClient }) {
13
13
  const getHighlightedCode = () => hljs__default.highlight(code.trim(), { language }).value;
14
14
  const [highlighted, setHighlighted] = React.useState(!highlightOnClient);
15
- const [highlightedCode, setHighlightedCode] = React.useState(highlightOnClient ? code : getHighlightedCode());
15
+ const [highlightedCode, setHighlightedCode] = React.useState(
16
+ highlightOnClient ? code : getHighlightedCode()
17
+ );
16
18
  const getCodeProps = () => highlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode } } : { children: code.trim() };
17
19
  React.useEffect(() => {
18
20
  if (highlightOnClient) {
package/cjs/use-highlight.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n return getCodeProps;\n}\n"],"names":["hljs","useState","useEffect"],"mappings":";;;;;;;;;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAMA,aAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGA,cAAQ,CAAC,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC,CAAC;AAC1G,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;;;"}
1
+ {"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n return getCodeProps;\n}\n"],"names":["hljs","useState","useEffect"],"mappings":";;;;;;;;;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAMA,aAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGA,cAAQ;AACxD,IAAI,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;;;"}
package/esm/CodeHighlight.js CHANGED
@@ -90,26 +90,7 @@ const CodeHighlight = factory((_props, ref) => {
90
90
  language,
91
91
  highlightOnClient
92
92
  });
93
- return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), {
94
- ref
95
- }), others), {
96
- dir: "ltr"
97
- }), withCopyButton && /* @__PURE__ */ React.createElement(CopyButton, {
98
- value: code.trim()
99
- }, ({ copied, copy }) => /* @__PURE__ */ React.createElement(Tooltip, {
100
- label: copied ? copiedLabel : copyLabel,
101
- fz: "sm",
102
- position: "left"
103
- }, /* @__PURE__ */ React.createElement(ActionIcon, __spreadValues({
104
- onClick: copy,
105
- variant: "none"
106
- }, getStyles("copy")), /* @__PURE__ */ React.createElement(CopyIcon, {
107
- copied
108
- })))), /* @__PURE__ */ React.createElement(ScrollArea, {
109
- type: "auto",
110
- dir: "ltr",
111
- offsetScrollbars: false
112
- }, /* @__PURE__ */ React.createElement("pre", __spreadValues({}, getStyles("pre")), /* @__PURE__ */ React.createElement("code", __spreadValues(__spreadValues({}, getStyles("code")), getCodeProps())))));
93
+ return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), { ref }), others), { dir: "ltr" }), withCopyButton && /* @__PURE__ */ React.createElement(CopyButton, { value: code.trim() }, ({ copied, copy }) => /* @__PURE__ */ React.createElement(Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left" }, /* @__PURE__ */ React.createElement(ActionIcon, __spreadValues({ onClick: copy, variant: "none" }, getStyles("copy")), /* @__PURE__ */ React.createElement(CopyIcon, { copied })))), /* @__PURE__ */ React.createElement(ScrollArea, { type: "hover", dir: "ltr", offsetScrollbars: false }, /* @__PURE__ */ React.createElement("pre", __spreadValues({}, getStyles("pre")), /* @__PURE__ */ React.createElement("code", __spreadValues(__spreadValues({}, getStyles("code")), getCodeProps())))));
113
94
  });
114
95
  CodeHighlight.displayName = "@mantine/core/CodeHighlight";
115
96
 
package/esm/CodeHighlight.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CodeHighlight.js","sources":["../src/CodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n ScrollArea,\n Factory,\n} from '@mantine/core';\nimport { useHighlight } from './use-highlight';\nimport { CopyIcon } from './CopyIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';\nexport type CodeHighlightVariant = string;\n\nexport interface CodeHighlightProps\n extends BoxProps,\n StylesApiProps<CodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n\n /** Determines whether copy button should be displayed, `true` by default */\n withCopyButton?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `false` by default */\n highlightOnClient?: boolean;\n}\n\nexport type CodeHighlightFactory = Factory<{\n props: CodeHighlightProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightStylesNames;\n variant: CodeHighlightVariant;\n}>;\n\nconst defaultProps: Partial<CodeHighlightProps> = {\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n language: 'tsx',\n withCopyButton: true,\n};\n\nexport const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {\n const props = useProps('CodeHighlight', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n copiedLabel,\n copyLabel,\n language,\n withCopyButton,\n highlightOnClient,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightFactory>({\n name: 'CodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const getCodeProps = useHighlight({\n code,\n language: language!,\n highlightOnClient,\n });\n\n return (\n <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n {withCopyButton && (\n <CopyButton value={code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon onClick={copy} variant=\"none\" {...getStyles('copy')}>\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} {...getCodeProps()} />\n </pre>\n </ScrollArea>\n </Box>\n );\n});\n\nCodeHighlight.displayName = '@mantine/core/CodeHighlight';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CodeHighlight.js","sources":["../src/CodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n ScrollArea,\n Factory,\n} from '@mantine/core';\nimport { useHighlight } from './use-highlight';\nimport { CopyIcon } from './CopyIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';\n\nexport interface CodeHighlightProps\n extends BoxProps,\n StylesApiProps<CodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n\n /** Determines whether copy button should be displayed, `true` by default */\n withCopyButton?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `false` by default */\n highlightOnClient?: boolean;\n}\n\nexport type CodeHighlightFactory = Factory<{\n props: CodeHighlightProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightProps> = {\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n language: 'tsx',\n withCopyButton: true,\n};\n\nexport const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {\n const props = useProps('CodeHighlight', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n copiedLabel,\n copyLabel,\n language,\n withCopyButton,\n highlightOnClient,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightFactory>({\n name: 'CodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const getCodeProps = useHighlight({\n code,\n language: language!,\n highlightOnClient,\n });\n\n return (\n <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n {withCopyButton && (\n <CopyButton value={code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon onClick={copy} variant=\"none\" {...getStyles('copy')}>\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n )}\n\n <ScrollArea type=\"hover\" dir=\"ltr\" offsetScrollbars={false}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} {...getCodeProps()} />\n </pre>\n </ScrollArea>\n </Box>\n );\n});\n\nCodeHighlight.displayName = '@mantine/core/CodeHighlight';\n"],"names":[],"mappings":"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"}
package/esm/CodeHighlight.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var _classes = {"code":"mantine-XIBJZDt","pre":"mantine-RDvBcjB","header":"mantine-cmEtjrV","controls":"mantine-059sM-t","copy":"mantine-tB-P5PD","control":"mantine-NTm-nGn","file":"mantine-PBrPXnu","files":"mantine-IvOddiX","codeWrapper":"mantine-YfYyOiA","showCodeButton":"mantine-haNyFRC","root":"mantine-k6OJW8l"};
1
+ var _classes = {"code":"m-5caae6d3","pre":"m-2c47c4fd","header":"m-e58679f3","controls":"m-be7e9c9c","copy":"m-5caae85b","control":"m-d498bab7","file":"m-5cac2e62","files":"m-38d99e51","codeWrapper":"m-9f507240","showCodeButton":"m-c9378bc2","root":"m-5cb1b9c8","fileIcon":"m-b46cddfb"};
2
2
 
3
3
  export default _classes;
4
4
  //# sourceMappingURL=CodeHighlight.module.css.js.map
package/esm/CodeHighlight.theme.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var themeClasses = {"theme":"mantine-h-DP-Yw"};
1
+ var themeClasses = {"theme":"m-1f5e827e"};
2
2
 
3
3
  export default themeClasses;
4
4
  //# sourceMappingURL=CodeHighlight.theme.module.css.js.map
package/esm/CodeHighlightTabs.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import hljs from 'highlight.js';
3
3
  import cx from 'clsx';
4
4
  import { useUncontrolled } from '@mantine/hooks';
5
- import { createVarsResolver, rem, factory, useProps, useStyles, UnstyledButton, Box, ScrollArea, Tooltip, ActionIcon, CopyButton } from '@mantine/core';
5
+ import { rem, createVarsResolver, factory, useProps, useStyles, UnstyledButton, Box, ScrollArea, Tooltip, ActionIcon, CopyButton } from '@mantine/core';
6
6
  import { CopyIcon } from './CopyIcon.js';
7
7
  import { FileIcon } from './FileIcon.js';
8
8
  import { ExpandIcon } from './ExpandIcon.js';
@@ -45,7 +45,7 @@ const defaultProps = {
45
45
  withHeader: true,
46
46
  copyLabel: "Copy code",
47
47
  copiedLabel: "Copied",
48
- maxCollapsedHeight: "8rem",
48
+ maxCollapsedHeight: rem("8rem"),
49
49
  expandCodeLabel: "Expand code",
50
50
  collapseCodeLabel: "Collapse code"
51
51
  };
@@ -130,55 +130,46 @@ const CodeHighlightTabs = factory((_props, ref) => {
130
130
  const highlighted = hljs.highlight(currentCode.code.trim(), {
131
131
  language: currentCode.language
132
132
  }).value;
133
- const files = nodes.map((node, index) => /* @__PURE__ */ React.createElement(UnstyledButton, __spreadProps(__spreadValues({}, getStyles("file")), {
134
- key: node.fileName,
135
- mod: { active: index === value },
136
- onClick: () => setValue(index)
137
- }), /* @__PURE__ */ React.createElement(FileIcon, {
138
- fileIcon: node.icon,
139
- getFileIcon,
140
- fileName: node.fileName
141
- }), /* @__PURE__ */ React.createElement("span", null, node.fileName)));
142
- return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), {
143
- ref
144
- }), others), {
145
- dir: "ltr"
146
- }), withHeader && /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("header")), /* @__PURE__ */ React.createElement(ScrollArea, {
147
- type: "never",
148
- dir: "ltr",
149
- offsetScrollbars: false
150
- }, /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("files")), files)), /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("controls")), withExpandButton && /* @__PURE__ */ React.createElement(Tooltip, {
151
- label: _expanded ? collapseCodeLabel : expandCodeLabel,
152
- fz: "sm",
153
- position: "left"
154
- }, /* @__PURE__ */ React.createElement(ActionIcon, __spreadValues({
155
- onClick: () => setExpanded(!_expanded),
156
- variant: "none"
157
- }, getStyles("control")), /* @__PURE__ */ React.createElement(ExpandIcon, {
158
- expanded: _expanded
159
- }))), /* @__PURE__ */ React.createElement(CopyButton, {
160
- value: currentCode.code.trim()
161
- }, ({ copied, copy }) => /* @__PURE__ */ React.createElement(Tooltip, {
162
- label: copied ? copiedLabel : copyLabel,
163
- fz: "sm",
164
- position: "left"
165
- }, /* @__PURE__ */ React.createElement(ActionIcon, __spreadValues({
166
- onClick: copy,
167
- variant: "none"
168
- }, getStyles("control")), /* @__PURE__ */ React.createElement(CopyIcon, {
169
- copied
170
- })))))), /* @__PURE__ */ React.createElement(ScrollArea, {
171
- type: "auto",
172
- dir: "ltr",
173
- offsetScrollbars: false
174
- }, /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues({}, getStyles("codeWrapper")), {
175
- mod: { expanded: _expanded }
176
- }), /* @__PURE__ */ React.createElement("pre", __spreadValues({}, getStyles("pre")), /* @__PURE__ */ React.createElement("code", __spreadProps(__spreadValues({}, getStyles("code")), {
177
- dangerouslySetInnerHTML: { __html: highlighted }
178
- }))))), /* @__PURE__ */ React.createElement(UnstyledButton, __spreadProps(__spreadValues({}, getStyles("showCodeButton")), {
179
- mod: { hidden: _expanded },
180
- onClick: () => setExpanded(true)
181
- }), "Expand code"));
133
+ const files = nodes.map((node, index) => /* @__PURE__ */ React.createElement(
134
+ UnstyledButton,
135
+ __spreadProps(__spreadValues({}, getStyles("file")), {
136
+ key: node.fileName,
137
+ mod: { active: index === value },
138
+ onClick: () => setValue(index)
139
+ }),
140
+ /* @__PURE__ */ React.createElement(
141
+ FileIcon,
142
+ __spreadValues({
143
+ fileIcon: node.icon,
144
+ getFileIcon,
145
+ fileName: node.fileName
146
+ }, getStyles("fileIcon"))
147
+ ),
148
+ /* @__PURE__ */ React.createElement("span", null, node.fileName)
149
+ ));
150
+ return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), { ref }), others), { dir: "ltr" }), withHeader && /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("header")), /* @__PURE__ */ React.createElement(ScrollArea, { type: "never", dir: "ltr", offsetScrollbars: false }, /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("files")), files)), /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("controls")), withExpandButton && /* @__PURE__ */ React.createElement(
151
+ Tooltip,
152
+ {
153
+ label: _expanded ? collapseCodeLabel : expandCodeLabel,
154
+ fz: "sm",
155
+ position: "left"
156
+ },
157
+ /* @__PURE__ */ React.createElement(
158
+ ActionIcon,
159
+ __spreadValues({
160
+ onClick: () => setExpanded(!_expanded),
161
+ variant: "none"
162
+ }, getStyles("control")),
163
+ /* @__PURE__ */ React.createElement(ExpandIcon, { expanded: _expanded })
164
+ )
165
+ ), /* @__PURE__ */ React.createElement(CopyButton, { value: currentCode.code.trim() }, ({ copied, copy }) => /* @__PURE__ */ React.createElement(Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left" }, /* @__PURE__ */ React.createElement(ActionIcon, __spreadValues({ onClick: copy, variant: "none" }, getStyles("control")), /* @__PURE__ */ React.createElement(CopyIcon, { copied })))))), /* @__PURE__ */ React.createElement(ScrollArea, { type: "auto", dir: "ltr", offsetScrollbars: false }, /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues({}, getStyles("codeWrapper")), { mod: { expanded: _expanded } }), /* @__PURE__ */ React.createElement("pre", __spreadValues({}, getStyles("pre")), /* @__PURE__ */ React.createElement("code", __spreadProps(__spreadValues({}, getStyles("code")), { dangerouslySetInnerHTML: { __html: highlighted } }))))), /* @__PURE__ */ React.createElement(
166
+ UnstyledButton,
167
+ __spreadProps(__spreadValues({}, getStyles("showCodeButton")), {
168
+ mod: { hidden: _expanded },
169
+ onClick: () => setExpanded(true)
170
+ }),
171
+ "Expand code"
172
+ ));
182
173
  });
183
174
  CodeHighlightTabs.displayName = "@mantine/core/CodeHighlightTabs";
184
175