@frequencyads/components 0.1.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.
package/dist/index.css ADDED
@@ -0,0 +1,543 @@
1
+ /* src/AnimatedWaveform/AnimatedWaveform.module.css */
2
+ .root {
3
+ position: absolute;
4
+ top: 50%;
5
+ left: 50%;
6
+ transform: translate(-50%, -50%);
7
+ width: 100vw;
8
+ height: calc(12rem * var(--mantine-scale));
9
+ pointer-events: none;
10
+ opacity: 0.6;
11
+ }
12
+ .svg {
13
+ width: 100%;
14
+ height: 100%;
15
+ }
16
+
17
+ /* src/AudioWaveform/AudioWaveform.module.css */
18
+ .root {
19
+ position: relative;
20
+ width: 100%;
21
+ cursor: pointer;
22
+ overflow: hidden;
23
+ border-radius: 4px;
24
+ }
25
+ .progressOverlay {
26
+ position: absolute;
27
+ top: 0;
28
+ left: 0;
29
+ height: 100%;
30
+ pointer-events: none;
31
+ transition: width 0.1s linear;
32
+ border-radius: 4px;
33
+ }
34
+ .bars {
35
+ display: flex;
36
+ align-items: center;
37
+ height: 100%;
38
+ padding: 4px;
39
+ overflow: hidden;
40
+ }
41
+ .bar {
42
+ min-height: 2px;
43
+ border-radius: 1px;
44
+ transition: background-color 0.15s linear;
45
+ flex-shrink: 0;
46
+ }
47
+ .loading {
48
+ position: absolute;
49
+ inset: 0;
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ background-color: rgba(255, 255, 255, 0.9);
54
+ font-size: 14px;
55
+ color: #666;
56
+ z-index: 1;
57
+ border-radius: 4px;
58
+ backdrop-filter: blur(2px);
59
+ }
60
+
61
+ /* src/AudioPlayer/AudioPlayer.module.css */
62
+ .root {
63
+ width: 100%;
64
+ padding: 12px 16px;
65
+ background-color: var(--mantine-color-default);
66
+ border-radius: var(--mantine-radius-sm);
67
+ }
68
+ .playButton {
69
+ flex-shrink: 0;
70
+ transition: transform 0.2s ease;
71
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
72
+ }
73
+ .playButton:hover {
74
+ transform: scale(1.05);
75
+ }
76
+ .playButton:active {
77
+ transform: scale(0.95);
78
+ }
79
+ .time {
80
+ flex-shrink: 0;
81
+ min-width: 40px;
82
+ white-space: nowrap;
83
+ }
84
+ .volumeGroup {
85
+ flex-shrink: 0;
86
+ }
87
+
88
+ /* src/CodeBlock/CodeBlock.module.css */
89
+ .root {
90
+ margin: var(--mantine-spacing-lg) 0;
91
+ }
92
+ .textarea {
93
+ width: 100%;
94
+ padding: var(--mantine-spacing-md);
95
+ font-family:
96
+ ui-monospace,
97
+ SFMono-Regular,
98
+ "SF Mono",
99
+ Menlo,
100
+ Consolas,
101
+ monospace;
102
+ font-size: var(--mantine-font-size-sm);
103
+ background-color: var(--mantine-color-dark-9);
104
+ color: var(--mantine-color-gray-1);
105
+ border: 1px solid var(--mantine-color-dark-6);
106
+ border-radius: var(--mantine-radius-md);
107
+ resize: none;
108
+ }
109
+ .textarea:focus {
110
+ outline: none;
111
+ border-color: var(--mantine-color-blue-5);
112
+ }
113
+
114
+ /* src/Copyable/Copyable.module.css */
115
+ .root {
116
+ cursor: pointer;
117
+ }
118
+ .toast {
119
+ position: fixed;
120
+ bottom: calc(1.5rem * var(--mantine-scale));
121
+ left: 50%;
122
+ transform: translateX(-50%);
123
+ z-index: 9999;
124
+ animation: toast-in 0.2s ease-out;
125
+ }
126
+ @keyframes toast-in {
127
+ from {
128
+ opacity: 0;
129
+ transform: translateX(-50%) translateY(calc(0.5rem * var(--mantine-scale)));
130
+ }
131
+ to {
132
+ opacity: 1;
133
+ transform: translateX(-50%) translateY(0);
134
+ }
135
+ }
136
+
137
+ /* src/ColorPalette/ColorPalette.module.css */
138
+ .root {
139
+ margin-bottom: var(--mantine-spacing-lg);
140
+ }
141
+ .shade {
142
+ cursor: pointer;
143
+ text-align: center;
144
+ }
145
+ .color {
146
+ height: calc(3rem * var(--mantine-scale));
147
+ border-radius: var(--mantine-radius-sm);
148
+ transition: transform 150ms ease;
149
+ }
150
+ .color:hover {
151
+ transform: scale(1.05);
152
+ }
153
+ .main {
154
+ outline: 2px solid var(--mantine-color-gray-4);
155
+ outline-offset: 2px;
156
+ }
157
+
158
+ /* src/ColorSwatch/ColorSwatch.module.css */
159
+ .root {
160
+ overflow: hidden;
161
+ cursor: pointer;
162
+ transition: transform 150ms ease;
163
+ }
164
+ .root:hover {
165
+ transform: translateY(calc(-0.125rem * var(--mantine-scale)));
166
+ }
167
+ .preview {
168
+ height: calc(8rem * var(--mantine-scale));
169
+ }
170
+ .info {
171
+ padding: var(--mantine-spacing-sm);
172
+ }
173
+
174
+ /* src/DosDonts/DosDonts.module.css */
175
+ .root {
176
+ display: flex;
177
+ flex-direction: column;
178
+ gap: var(--mantine-spacing-md);
179
+ }
180
+ .dont {
181
+ background-color: var(--mantine-color-red-light);
182
+ border: 1px solid var(--mantine-color-red-outline);
183
+ }
184
+ .dontIcon,
185
+ .dontLabel {
186
+ color: var(--mantine-color-red-filled);
187
+ }
188
+ .do {
189
+ background-color: var(--mantine-color-green-light);
190
+ border: 1px solid var(--mantine-color-green-outline);
191
+ }
192
+ .doIcon,
193
+ .doLabel {
194
+ color: var(--mantine-color-green-filled);
195
+ }
196
+
197
+ /* src/ExpandableCard/ExpandableCard.module.css */
198
+ .root {
199
+ overflow: hidden;
200
+ background-color: var(--mantine-color-gray-1);
201
+ }
202
+ [data-mantine-color-scheme=dark] .root {
203
+ background-color: var(--mantine-color-dark-6);
204
+ }
205
+ .inner {
206
+ padding: var(--mantine-spacing-lg) var(--mantine-spacing-xl);
207
+ }
208
+
209
+ /* src/FadeInSection/FadeInSection.module.css */
210
+ .root {
211
+ opacity: 0;
212
+ transform: translateY(calc(2rem * var(--mantine-scale)));
213
+ transition: opacity 700ms ease-out, transform 700ms ease-out;
214
+ }
215
+ .visible {
216
+ opacity: 1;
217
+ transform: translateY(0);
218
+ }
219
+
220
+ /* src/GradientSwatch/GradientSwatch.module.css */
221
+ .root {
222
+ overflow: hidden;
223
+ cursor: pointer;
224
+ transition: transform 150ms ease;
225
+ }
226
+ .root:hover {
227
+ transform: translateY(calc(-0.125rem * var(--mantine-scale)));
228
+ }
229
+ .preview {
230
+ height: calc(5rem * var(--mantine-scale));
231
+ }
232
+ .info {
233
+ padding: var(--mantine-spacing-sm);
234
+ }
235
+
236
+ /* src/VideoBackground/VideoBackground.module.css */
237
+ .root {
238
+ position: absolute;
239
+ inset: 0;
240
+ width: 100%;
241
+ height: 100%;
242
+ object-fit: cover;
243
+ }
244
+
245
+ /* src/Hero/Hero.module.css */
246
+ .root {
247
+ position: relative;
248
+ min-height: 100vh;
249
+ display: flex;
250
+ align-items: center;
251
+ justify-content: center;
252
+ background-color: #121212;
253
+ overflow: hidden;
254
+ }
255
+ .content {
256
+ position: relative;
257
+ z-index: 2;
258
+ text-align: center;
259
+ padding: var(--mantine-spacing-xl);
260
+ }
261
+ .vignette {
262
+ position: absolute;
263
+ top: 50%;
264
+ left: 50%;
265
+ transform: translate(-50%, -50%);
266
+ width: calc(35rem * var(--mantine-scale));
267
+ height: calc(35rem * var(--mantine-scale));
268
+ background:
269
+ radial-gradient(
270
+ circle,
271
+ #121212 0%,
272
+ #121212 30%,
273
+ transparent 65%);
274
+ pointer-events: none;
275
+ z-index: 1;
276
+ }
277
+ .logoWrapper {
278
+ position: relative;
279
+ }
280
+ .logo {
281
+ position: relative;
282
+ z-index: 2;
283
+ width: calc(10rem * var(--mantine-scale));
284
+ height: calc(10rem * var(--mantine-scale));
285
+ }
286
+ @media (min-width: 48em) {
287
+ .logo {
288
+ width: calc(14rem * var(--mantine-scale));
289
+ height: calc(14rem * var(--mantine-scale));
290
+ }
291
+ }
292
+ @media (min-width: 75em) {
293
+ .logo {
294
+ width: calc(18rem * var(--mantine-scale));
295
+ height: calc(18rem * var(--mantine-scale));
296
+ }
297
+ }
298
+ .glow {
299
+ position: absolute;
300
+ inset: 0;
301
+ z-index: 0;
302
+ filter: blur(calc(3rem * var(--mantine-scale)));
303
+ opacity: 0.3;
304
+ background:
305
+ radial-gradient(
306
+ circle,
307
+ #169BDE 0%,
308
+ #7E57C2 50%,
309
+ transparent 70%);
310
+ transform: scale(1.5);
311
+ pointer-events: none;
312
+ }
313
+ .textWrapper {
314
+ position: relative;
315
+ }
316
+ .heading {
317
+ position: relative;
318
+ z-index: 2;
319
+ color: transparent;
320
+ background-clip: text;
321
+ -webkit-background-clip: text;
322
+ font-size: calc(3rem * var(--mantine-scale));
323
+ font-family: Montserrat, sans-serif;
324
+ font-weight: 700;
325
+ line-height: 1.1;
326
+ letter-spacing: -2px;
327
+ text-transform: uppercase;
328
+ }
329
+ @media (min-width: 48em) {
330
+ .heading {
331
+ font-size: calc(4rem * var(--mantine-scale));
332
+ }
333
+ }
334
+ @media (min-width: 75em) {
335
+ .heading {
336
+ font-size: calc(6rem * var(--mantine-scale));
337
+ }
338
+ }
339
+ @keyframes shimmer {
340
+ 0% {
341
+ background-position: 100% 50%;
342
+ }
343
+ 50% {
344
+ background-position: 0% 50%;
345
+ }
346
+ 100% {
347
+ background-position: 100% 50%;
348
+ }
349
+ }
350
+ .shimmer {
351
+ animation: shimmer 6s ease-in-out infinite;
352
+ }
353
+ .tagline {
354
+ color: rgba(255, 255, 255, 0.6);
355
+ font-size: var(--mantine-font-size-lg);
356
+ font-family:
357
+ "Source Sans 3",
358
+ "Source Sans Pro",
359
+ sans-serif;
360
+ max-width: calc(35rem * var(--mantine-scale));
361
+ }
362
+ @media (min-width: 48em) {
363
+ .tagline {
364
+ font-size: var(--mantine-font-size-xl);
365
+ }
366
+ }
367
+ .primaryButton {
368
+ font-family: Montserrat, sans-serif;
369
+ font-weight: 600;
370
+ }
371
+ .secondaryButton {
372
+ font-family: Montserrat, sans-serif;
373
+ font-weight: 600;
374
+ border-color: rgba(255, 255, 255, 0.2);
375
+ color: var(--mantine-color-white);
376
+ }
377
+ .secondaryButton:hover {
378
+ background-color: rgba(255, 255, 255, 0.05);
379
+ }
380
+
381
+ /* src/MiniAudioPlayer/MiniAudioPlayer.module.css */
382
+ .root {
383
+ padding: 4px 8px;
384
+ border-radius: 4px;
385
+ background-color: var(--mantine-color-default);
386
+ border: 1px solid var(--mantine-color-default-border);
387
+ width: fit-content;
388
+ min-width: 120px;
389
+ max-width: 300px;
390
+ }
391
+ .playButton {
392
+ transition: transform 0.2s ease;
393
+ }
394
+ .playButton:hover {
395
+ transform: scale(1.05);
396
+ }
397
+ .playButton:active {
398
+ transform: scale(0.95);
399
+ }
400
+
401
+ /* src/PrincipleCard/PrincipleCard.module.css */
402
+ .root {
403
+ border-left: 4px solid;
404
+ background-color: var(--mantine-color-default);
405
+ }
406
+
407
+ /* src/SpeedDial/SpeedDial.module.css */
408
+ .root {
409
+ display: inline-flex;
410
+ flex-direction: column;
411
+ align-items: center;
412
+ gap: 12px;
413
+ }
414
+ .root[data-direction=down] {
415
+ flex-direction: column-reverse;
416
+ }
417
+ .root[data-direction=left],
418
+ .root[data-direction=right] {
419
+ flex-direction: row;
420
+ gap: 12px;
421
+ }
422
+ .root[data-direction=left] {
423
+ flex-direction: row-reverse;
424
+ }
425
+ .actions {
426
+ display: flex;
427
+ flex-direction: column;
428
+ align-items: center;
429
+ gap: 8px;
430
+ }
431
+ .actions[data-direction=down] {
432
+ flex-direction: column-reverse;
433
+ }
434
+ .actions[data-direction=left],
435
+ .actions[data-direction=right] {
436
+ flex-direction: row;
437
+ gap: 8px;
438
+ }
439
+ .actions[data-direction=left] {
440
+ flex-direction: row-reverse;
441
+ }
442
+ .fab {
443
+ box-shadow: var(--mantine-shadow-md);
444
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
445
+ }
446
+ .fab:hover {
447
+ box-shadow: var(--mantine-shadow-lg);
448
+ transform: scale(1.05);
449
+ }
450
+ .fab[data-open] {
451
+ transform: rotate(45deg);
452
+ }
453
+ .fab[data-open]:hover {
454
+ transform: rotate(45deg) scale(1.05);
455
+ }
456
+ .actionButton {
457
+ box-shadow: var(--mantine-shadow-sm);
458
+ transition: transform 0.15s ease;
459
+ }
460
+ .actionButton:hover {
461
+ transform: scale(1.1);
462
+ }
463
+
464
+ /* src/SplitSection/SplitSection.module.css */
465
+ .container {
466
+ max-width: 80rem;
467
+ margin-left: auto;
468
+ margin-right: auto;
469
+ padding-left: var(--mantine-spacing-xl);
470
+ padding-right: var(--mantine-spacing-xl);
471
+ }
472
+ @media (min-width: 48em) {
473
+ .container {
474
+ padding-left: calc(var(--mantine-spacing-xl) * 1.5);
475
+ padding-right: calc(var(--mantine-spacing-xl) * 1.5);
476
+ }
477
+ }
478
+ .layout {
479
+ display: flex;
480
+ flex-direction: column;
481
+ gap: var(--mantine-spacing-xl);
482
+ }
483
+ @media (min-width: 62em) {
484
+ .layout {
485
+ flex-direction: row;
486
+ gap: calc(var(--mantine-spacing-xl) * 2);
487
+ }
488
+ }
489
+ .reversed {
490
+ flex-direction: column;
491
+ }
492
+ @media (min-width: 62em) {
493
+ .reversed {
494
+ flex-direction: row-reverse;
495
+ }
496
+ }
497
+ .headingSide {
498
+ flex-shrink: 0;
499
+ }
500
+ @media (min-width: 62em) {
501
+ .headingSide {
502
+ width: 45%;
503
+ }
504
+ }
505
+ .sticky {
506
+ }
507
+ @media (min-width: 62em) {
508
+ .sticky .stickyInner {
509
+ position: sticky;
510
+ top: 50%;
511
+ transform: translateY(-50%);
512
+ }
513
+ }
514
+ .stickyInner {
515
+ }
516
+ .contentSide {
517
+ flex: 1;
518
+ min-width: 0;
519
+ }
520
+ @media (min-width: 62em) {
521
+ .contentSide {
522
+ padding-left: var(--mantine-spacing-lg);
523
+ }
524
+ }
525
+ .title {
526
+ text-transform: uppercase;
527
+ line-height: 1.1;
528
+ letter-spacing: -0.02em;
529
+ }
530
+ .preTitle {
531
+ display: block;
532
+ font-size: clamp(1.5rem, 3vw, 2.25rem);
533
+ font-weight: 600;
534
+ }
535
+ .titleHighlight {
536
+ display: block;
537
+ font-size: clamp(2.5rem, 5vw, 3.75rem);
538
+ font-weight: 700;
539
+ letter-spacing: -0.02em;
540
+ }
541
+ .description {
542
+ max-width: 36rem;
543
+ }