@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/styles.css DELETED
@@ -1,326 +0,0 @@
1
- .mantine-XIBJZDt {
2
- display: inline-block;
3
- padding: 0.0625rem 0.1875rem;
4
- font-size: 0.8125rem;
5
- border-radius: var(--mantine-radius-xs);
6
- line-height: var(--_code-line-height, var(--mantine-line-height));
7
- font-family: var(--mantine-font-family-monospace);
8
- }
9
-
10
- .mantine-RDvBcjB {
11
- display: block;
12
- padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
13
- margin: 0;
14
- --_code-line-height: 1.7;
15
- }
16
-
17
- .mantine-cmEtjrV {
18
- display: flex;
19
- align-items: flex-start;
20
- justify-content: space-between;
21
- }
22
-
23
- .mantine-059sM-t {
24
- display: flex;
25
- margin-top: 0.4375rem;
26
- margin-right: 0.4375rem;
27
- }
28
-
29
- .mantine-tB-P5PD,
30
- .mantine-NTm-nGn {
31
- background-color: transparent;
32
- opacity: 0.8;
33
- margin: 0;
34
- }
35
-
36
- @media (hover: hover) {
37
-
38
- .mantine-tB-P5PD:hover, .mantine-NTm-nGn:hover {
39
- opacity: 1;
40
- }
41
- }
42
-
43
- @media (hover: none) {
44
-
45
- .mantine-tB-P5PD:active, .mantine-NTm-nGn:active {
46
- opacity: 1;
47
- }
48
- }
49
-
50
- @media (max-width: 40em) {
51
-
52
- .mantine-tB-P5PD,
53
- .mantine-NTm-nGn {
54
- display: none
55
- }
56
- }
57
-
58
- .mantine-tB-P5PD {
59
- position: absolute;
60
- top: 0.3125rem;
61
- right: 0.3125rem;
62
- z-index: 1;
63
- }
64
-
65
- .mantine-PBrPXnu {
66
- display: flex;
67
- align-items: center;
68
- justify-content: center;
69
- font-size: var(--mantine-font-size-xs);
70
- gap: 0.4375rem;
71
- padding: 0.4375rem 0.75rem;
72
- font-family: var(--mantine-font-family-monospace);
73
- font-weight: 700;
74
- line-height: 1;
75
- user-select: none;
76
- cursor: var(--_file-cursor);
77
- border: 0.0625rem solid var(--_file-bd);
78
- border-top: 0;
79
- border-left: 0;
80
- color: var(--_file-color);
81
- opacity: var(--_file-opacity);
82
- background-color: var(--_file-bg);
83
- }
84
-
85
- @media (hover: hover) {
86
-
87
- .mantine-PBrPXnu:hover {
88
- --_file-opacity: 1;
89
- }
90
- }
91
-
92
- @media (hover: none) {
93
-
94
- .mantine-PBrPXnu:active {
95
- --_file-opacity: 1;
96
- }
97
- }
98
-
99
- .mantine-PBrPXnu:last-of-type {
100
- border-bottom-right-radius: var(--mantine-radius-sm);
101
- }
102
-
103
- .mantine-PBrPXnu:only-child {
104
- --_file-cursor: default;
105
- }
106
-
107
- .mantine-PBrPXnu[data-active] {
108
- --_file-opacity: 1;
109
- --_file-color: var(--_file-active-color) !important;
110
- --_file-bg: var(--_file-active-bg);
111
- }
112
-
113
- .mantine-PBrPXnu {
114
-
115
- --_file-opacity: 0.8;
116
- --_file-cursor: pointer;
117
- }
118
-
119
- [data-mantine-color-scheme='light'] .mantine-PBrPXnu {
120
- --_file-color: var(--mantine-color-gray-8);
121
- --_file-bd: var(--mantine-color-gray-2);
122
- --_file-active-bg: var(--mantine-color-white);
123
- --_file-active-color: var(--mantine-color-black);
124
- }
125
-
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 {
137
- --_file-color: var(--mantine-color-dark-0);
138
- --_file-bd: var(--mantine-color-dark-4);
139
- --_file-active-bg: var(--mantine-color-dark-6);
140
- --_file-active-color: var(--mantine-color-white);
141
- }
142
-
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 {
154
- display: flex;
155
- }
156
-
157
- .mantine-YfYyOiA {
158
- max-height: var(--ch-max-collapsed-height);
159
- overflow: hidden;
160
- position: relative;
161
- }
162
-
163
- .mantine-YfYyOiA::before {
164
- content: '';
165
- position: absolute;
166
- inset: 0;
167
- pointer-events: none;
168
- background-image: linear-gradient(0deg, var(--_background) 16%, rgba(0, 0, 0, 0) 100%);
169
- border-radius: calc(var(--mantine-radius-md) - 0.0625rem);
170
- }
171
-
172
- .mantine-YfYyOiA[data-expanded] {
173
- max-height: none;
174
- }
175
-
176
- .mantine-YfYyOiA[data-expanded]::before {
177
- display: none;
178
- }
179
-
180
- .mantine-haNyFRC {
181
- position: absolute;
182
- bottom: 0;
183
- left: 50%;
184
- transform: translateX(-50%);
185
- font-size: var(--mantine-font-size-sm);
186
- color: var(--mantine-color-anchor);
187
- width: 100%;
188
- text-align: center;
189
- padding-top: var(--mantine-spacing-xs);
190
- padding-bottom: var(--mantine-spacing-xs);
191
- }
192
-
193
- .mantine-haNyFRC[data-hidden] {
194
- display: none;
195
- }
196
-
197
- .mantine-k6OJW8l {
198
- margin-top: 0;
199
- position: relative;
200
- }
201
-
202
- .mantine-h-DP-Yw {
203
- color: var(--_color);
204
- background: var(--_background);
205
- }
206
-
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
- }
218
-
219
- @media (prefers-color-scheme: light) {
220
-
221
- .mantine-h-DP-Yw {
222
- --_color: var(--mantine-color-gray-7);
223
- --_background: var(--mantine-color-gray-0);
224
- --code-comment-color: var(--mantine-color-gray-6);
225
- --code-keyword-color: var(--mantine-color-violet-8);
226
- --code-tag-color: var(--mantine-color-red-9);
227
- --code-literal-color: var(--mantine-color-blue-6);
228
- --code-string-color: var(--mantine-color-blue-9);
229
- --code-variable-color: var(--mantine-color-lime-9);
230
- --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
- }
245
-
246
- @media (prefers-color-scheme: dark) {
247
-
248
- .mantine-h-DP-Yw {
249
- --_color: var(--mantine-color-dark-1);
250
- --_background: var(--mantine-color-dark-8);
251
- --code-comment-color: var(--mantine-color-dark-3);
252
- --code-keyword-color: var(--mantine-color-violet-3);
253
- --code-tag-color: var(--mantine-color-yellow-4);
254
- --code-literal-color: var(--mantine-color-blue-4);
255
- --code-string-color: var(--mantine-color-green-6);
256
- --code-variable-color: var(--mantine-color-blue-2);
257
- --code-class-color: var(--mantine-color-orange-5);
258
- }
259
- }
260
-
261
- .mantine-h-DP-Yw .hljs-comment,
262
- .mantine-h-DP-Yw .hljs-quote {
263
- font-style: italic;
264
- color: var(--code-comment-color);
265
- }
266
-
267
- .mantine-h-DP-Yw .hljs-doctag,
268
- .mantine-h-DP-Yw .hljs-formula,
269
- .mantine-h-DP-Yw .hljs-keyword {
270
- color: var(--code-keyword-color);
271
- }
272
-
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 {
278
- color: var(--code-tag-color);
279
- }
280
-
281
- .mantine-h-DP-Yw .hljs-literal {
282
- color: var(--code-literal-color);
283
- }
284
-
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 {
290
- color: var(--code-string-color);
291
- }
292
-
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 {
301
- color: var(--code-variable-color);
302
- }
303
-
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_ {
313
- color: var(--code-class-color);
314
- }
315
-
316
- .mantine-h-DP-Yw .hljs-emphasis {
317
- font-style: italic;
318
- }
319
-
320
- .mantine-h-DP-Yw .hljs-strong {
321
- font-weight: 700;
322
- }
323
-
324
- .mantine-h-DP-Yw .hljs-link {
325
- text-decoration: underline;
326
- }