@particle-academy/react-fancy 5.7.0 → 5.9.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 (9) hide show
  1. package/dist/index.cjs +21 -10
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +10 -10
  4. package/dist/index.d.ts +10 -10
  5. package/dist/index.js +21 -10
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +269 -255
  8. package/dist/styles.css.map +1 -1
  9. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -1,141 +1,143 @@
1
1
  /* src/styles.css */
2
2
  @theme { --color-brand: var(--color-violet-600); --color-primary-50: var(--color-violet-50); --color-primary-100: var(--color-violet-100); --color-primary-200: var(--color-violet-200); --color-primary-300: var(--color-violet-300); --color-primary-400: var(--color-violet-400); --color-primary-500: var(--color-violet-500); --color-primary-600: var(--color-violet-600); --color-primary-700: var(--color-violet-700); --color-primary-800: var(--color-violet-800); --color-primary-900: var(--color-violet-900); --color-primary-950: var(--color-violet-950); --color-secondary-50: var(--color-zinc-50); --color-secondary-100: var(--color-zinc-100); --color-secondary-200: var(--color-zinc-200); --color-secondary-300: var(--color-zinc-300); --color-secondary-400: var(--color-zinc-400); --color-secondary-500: var(--color-zinc-500); --color-secondary-600: var(--color-zinc-600); --color-secondary-700: var(--color-zinc-700); --color-secondary-800: var(--color-zinc-800); --color-secondary-900: var(--color-zinc-900); --color-secondary-950: var(--color-zinc-950); }
3
- :where(.dark) {
4
- --color-secondary-50: var(--color-zinc-950);
5
- --color-secondary-100: var(--color-zinc-900);
6
- --color-secondary-200: var(--color-zinc-800);
7
- --color-secondary-300: var(--color-zinc-700);
8
- --color-secondary-400: var(--color-zinc-600);
9
- --color-secondary-500: var(--color-zinc-500);
10
- --color-secondary-600: var(--color-zinc-400);
11
- --color-secondary-700: var(--color-zinc-300);
12
- --color-secondary-800: var(--color-zinc-200);
13
- --color-secondary-900: var(--color-zinc-100);
14
- --color-secondary-950: var(--color-zinc-50);
15
- }
16
- [data-react-fancy-field] + [data-react-fancy-field] {
17
- margin-top: 1rem;
18
- }
19
- [data-react-fancy-input] input,
20
- [data-react-fancy-textarea],
21
- [data-react-fancy-select],
22
- [data-react-fancy-date-picker],
23
- [data-react-fancy-autocomplete] input,
24
- [data-react-fancy-pillbox],
25
- [data-react-fancy-otp-input] input,
26
- [data-react-fancy-time-picker] input,
27
- [data-react-fancy-color-picker] input {
28
- transition:
29
- border-color 0.15s ease,
30
- box-shadow 0.15s ease,
31
- background-color 0.15s ease;
32
- }
33
- :where(.dark [data-react-fancy-input] input),
34
- :where(.dark [data-react-fancy-textarea]),
35
- :where(.dark [data-react-fancy-select]),
36
- :where(.dark [data-react-fancy-date-picker]),
37
- :where(.dark [data-react-fancy-autocomplete] input),
38
- :where(.dark [data-react-fancy-pillbox]),
39
- :where(.dark [data-react-fancy-otp-input] input),
40
- :where(.dark [data-react-fancy-time-picker] input) {
41
- background-color: #1e1e24;
42
- border-color: #3f3f46;
43
- }
44
- :where(.dark [data-react-fancy-input] input:focus),
45
- :where(.dark [data-react-fancy-textarea]:focus),
46
- :where(.dark [data-react-fancy-select]:focus),
47
- :where(.dark [data-react-fancy-date-picker]:focus),
48
- :where(.dark [data-react-fancy-autocomplete] input:focus),
49
- :where(.dark [data-react-fancy-otp-input] input:focus),
50
- :where(.dark [data-react-fancy-time-picker] input:focus) {
51
- border-color: #60a5fa;
52
- box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
53
- }
54
- :where(.dark [data-react-fancy-field] > label:first-child) {
55
- color: #f4f4f5;
56
- }
57
- :where(.dark [data-react-fancy-checkbox] input),
58
- :where(.dark [data-react-fancy-radio-group] input) {
59
- background-color: #1e1e24;
60
- border-color: #3f3f46;
61
- }
62
- :where(.dark [data-react-fancy-switch] button[aria-checked=false]) {
63
- background-color: #3f3f46;
64
- }
65
- :where(.dark [data-react-fancy-input-wrapper] > span:first-child),
66
- :where(.dark [data-react-fancy-input-wrapper] > span:last-child) {
67
- border-color: #3f3f46;
68
- background-color: #27272a;
69
- }
70
- :where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {
71
- filter: invert(0.8);
72
- }
73
- :where(.dark [data-react-fancy-dropdown]),
74
- :where(.dark [data-react-fancy-menu]),
75
- :where(.dark [data-react-fancy-popover]),
76
- :where(.dark [data-react-fancy-context-menu]),
77
- :where(.dark [data-react-fancy-context-menu-sub-content]),
78
- :where(.dark [data-react-fancy-mobile-menu-flyout]),
79
- :where(.dark [data-react-fancy-modal]),
80
- :where(.dark [data-react-fancy-toast-item]) {
81
- background-color: #18181b;
82
- border-color: #3f3f46;
83
- color: #d4d4d8;
84
- }
85
- :where(.dark [data-react-fancy-dropdown-item]:hover),
86
- :where(.dark [data-react-fancy-menu-item]:hover),
87
- :where(.dark [data-react-fancy-context-menu-item]:hover) {
88
- background-color: #27272a;
89
- }
90
- :where(.dark [data-react-fancy-dropdown-separator]),
91
- :where(.dark [data-react-fancy-context-menu-separator]) {
92
- background-color: #3f3f46;
93
- }
94
- .fancy-checkerboard {
95
- background-color: #ffffff;
96
- background-image:
97
- linear-gradient(
98
- 45deg,
99
- #e5e7eb 25%,
100
- transparent 25%),
101
- linear-gradient(
102
- -45deg,
103
- #e5e7eb 25%,
104
- transparent 25%),
105
- linear-gradient(
106
- 45deg,
107
- transparent 75%,
108
- #e5e7eb 75%),
109
- linear-gradient(
110
- -45deg,
111
- transparent 75%,
112
- #e5e7eb 75%);
113
- background-size: 16px 16px;
114
- background-position:
115
- 0 0,
116
- 0 8px,
117
- 8px -8px,
118
- -8px 0;
119
- }
120
- :where(.dark) .fancy-checkerboard {
121
- background-color: #18181b;
122
- background-image:
123
- linear-gradient(
124
- 45deg,
125
- #27272a 25%,
126
- transparent 25%),
127
- linear-gradient(
128
- -45deg,
129
- #27272a 25%,
130
- transparent 25%),
131
- linear-gradient(
132
- 45deg,
133
- transparent 75%,
134
- #27272a 75%),
135
- linear-gradient(
136
- -45deg,
137
- transparent 75%,
138
- #27272a 75%);
3
+ @layer base {
4
+ :where(.dark) {
5
+ --color-secondary-50: var(--color-zinc-950);
6
+ --color-secondary-100: var(--color-zinc-900);
7
+ --color-secondary-200: var(--color-zinc-800);
8
+ --color-secondary-300: var(--color-zinc-700);
9
+ --color-secondary-400: var(--color-zinc-600);
10
+ --color-secondary-500: var(--color-zinc-500);
11
+ --color-secondary-600: var(--color-zinc-400);
12
+ --color-secondary-700: var(--color-zinc-300);
13
+ --color-secondary-800: var(--color-zinc-200);
14
+ --color-secondary-900: var(--color-zinc-100);
15
+ --color-secondary-950: var(--color-zinc-50);
16
+ }
17
+ [data-react-fancy-field] + [data-react-fancy-field] {
18
+ margin-top: 1rem;
19
+ }
20
+ [data-react-fancy-input] input,
21
+ [data-react-fancy-textarea],
22
+ [data-react-fancy-select],
23
+ [data-react-fancy-date-picker],
24
+ [data-react-fancy-autocomplete] input,
25
+ [data-react-fancy-pillbox],
26
+ [data-react-fancy-otp-input] input,
27
+ [data-react-fancy-time-picker] input,
28
+ [data-react-fancy-color-picker] input {
29
+ transition:
30
+ border-color 0.15s ease,
31
+ box-shadow 0.15s ease,
32
+ background-color 0.15s ease;
33
+ }
34
+ :where(.dark [data-react-fancy-input] input),
35
+ :where(.dark [data-react-fancy-textarea]),
36
+ :where(.dark [data-react-fancy-select]),
37
+ :where(.dark [data-react-fancy-date-picker]),
38
+ :where(.dark [data-react-fancy-autocomplete] input),
39
+ :where(.dark [data-react-fancy-pillbox]),
40
+ :where(.dark [data-react-fancy-otp-input] input),
41
+ :where(.dark [data-react-fancy-time-picker] input) {
42
+ background-color: #1e1e24;
43
+ border-color: #3f3f46;
44
+ }
45
+ :where(.dark [data-react-fancy-input] input:focus),
46
+ :where(.dark [data-react-fancy-textarea]:focus),
47
+ :where(.dark [data-react-fancy-select]:focus),
48
+ :where(.dark [data-react-fancy-date-picker]:focus),
49
+ :where(.dark [data-react-fancy-autocomplete] input:focus),
50
+ :where(.dark [data-react-fancy-otp-input] input:focus),
51
+ :where(.dark [data-react-fancy-time-picker] input:focus) {
52
+ border-color: #60a5fa;
53
+ box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
54
+ }
55
+ :where(.dark [data-react-fancy-field] > label:first-child) {
56
+ color: #f4f4f5;
57
+ }
58
+ :where(.dark [data-react-fancy-checkbox] input),
59
+ :where(.dark [data-react-fancy-radio-group] input) {
60
+ background-color: #1e1e24;
61
+ border-color: #3f3f46;
62
+ }
63
+ :where(.dark [data-react-fancy-switch] button[aria-checked=false]) {
64
+ background-color: #3f3f46;
65
+ }
66
+ :where(.dark [data-react-fancy-input-wrapper] > span:first-child),
67
+ :where(.dark [data-react-fancy-input-wrapper] > span:last-child) {
68
+ border-color: #3f3f46;
69
+ background-color: #27272a;
70
+ }
71
+ :where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {
72
+ filter: invert(0.8);
73
+ }
74
+ :where(.dark [data-react-fancy-dropdown]),
75
+ :where(.dark [data-react-fancy-menu]),
76
+ :where(.dark [data-react-fancy-popover]),
77
+ :where(.dark [data-react-fancy-context-menu]),
78
+ :where(.dark [data-react-fancy-context-menu-sub-content]),
79
+ :where(.dark [data-react-fancy-mobile-menu-flyout]),
80
+ :where(.dark [data-react-fancy-modal]),
81
+ :where(.dark [data-react-fancy-toast-item]) {
82
+ background-color: #18181b;
83
+ border-color: #3f3f46;
84
+ color: #d4d4d8;
85
+ }
86
+ :where(.dark [data-react-fancy-dropdown-item]:hover),
87
+ :where(.dark [data-react-fancy-menu-item]:hover),
88
+ :where(.dark [data-react-fancy-context-menu-item]:hover) {
89
+ background-color: #27272a;
90
+ }
91
+ :where(.dark [data-react-fancy-dropdown-separator]),
92
+ :where(.dark [data-react-fancy-context-menu-separator]) {
93
+ background-color: #3f3f46;
94
+ }
95
+ .fancy-checkerboard {
96
+ background-color: #ffffff;
97
+ background-image:
98
+ linear-gradient(
99
+ 45deg,
100
+ #e5e7eb 25%,
101
+ transparent 25%),
102
+ linear-gradient(
103
+ -45deg,
104
+ #e5e7eb 25%,
105
+ transparent 25%),
106
+ linear-gradient(
107
+ 45deg,
108
+ transparent 75%,
109
+ #e5e7eb 75%),
110
+ linear-gradient(
111
+ -45deg,
112
+ transparent 75%,
113
+ #e5e7eb 75%);
114
+ background-size: 16px 16px;
115
+ background-position:
116
+ 0 0,
117
+ 0 8px,
118
+ 8px -8px,
119
+ -8px 0;
120
+ }
121
+ :where(.dark) .fancy-checkerboard {
122
+ background-color: #18181b;
123
+ background-image:
124
+ linear-gradient(
125
+ 45deg,
126
+ #27272a 25%,
127
+ transparent 25%),
128
+ linear-gradient(
129
+ -45deg,
130
+ #27272a 25%,
131
+ transparent 25%),
132
+ linear-gradient(
133
+ 45deg,
134
+ transparent 75%,
135
+ #27272a 75%),
136
+ linear-gradient(
137
+ -45deg,
138
+ transparent 75%,
139
+ #27272a 75%);
140
+ }
139
141
  }
140
142
  @keyframes fancy-fade-in {
141
143
  from {
@@ -163,14 +165,16 @@
163
165
  transform: translateX(0);
164
166
  }
165
167
  }
166
- .fancy-fade-in {
167
- animation: fancy-fade-in 0.2s ease-out;
168
- }
169
- .fancy-slide-left {
170
- animation: fancy-slide-left 0.3s ease-out;
171
- }
172
- .fancy-slide-right {
173
- animation: fancy-slide-right 0.3s ease-out;
168
+ @layer base {
169
+ .fancy-fade-in {
170
+ animation: fancy-fade-in 0.2s ease-out;
171
+ }
172
+ .fancy-slide-left {
173
+ animation: fancy-slide-left 0.3s ease-out;
174
+ }
175
+ .fancy-slide-right {
176
+ animation: fancy-slide-right 0.3s ease-out;
177
+ }
174
178
  }
175
179
  @keyframes fancy-scale-in {
176
180
  from {
@@ -226,23 +230,25 @@
226
230
  grid-template-rows: 0fr;
227
231
  }
228
232
  }
229
- .fancy-scale-in {
230
- animation: fancy-scale-in 0.15s ease-out;
231
- }
232
- .fancy-slide-up {
233
- animation: fancy-slide-up 0.2s ease-out;
234
- }
235
- .fancy-fade-out {
236
- animation: fancy-fade-out 0.15s ease-in forwards;
237
- }
238
- .fancy-toast-in {
239
- animation: fancy-toast-in 0.3s ease-out;
240
- }
241
- .fancy-collapse-open {
242
- animation: fancy-collapse-open 0.2s ease-out forwards;
243
- }
244
- .fancy-collapse-close {
245
- animation: fancy-collapse-close 0.15s ease-in forwards;
233
+ @layer base {
234
+ .fancy-scale-in {
235
+ animation: fancy-scale-in 0.15s ease-out;
236
+ }
237
+ .fancy-slide-up {
238
+ animation: fancy-slide-up 0.2s ease-out;
239
+ }
240
+ .fancy-fade-out {
241
+ animation: fancy-fade-out 0.15s ease-in forwards;
242
+ }
243
+ .fancy-toast-in {
244
+ animation: fancy-toast-in 0.3s ease-out;
245
+ }
246
+ .fancy-collapse-open {
247
+ animation: fancy-collapse-open 0.2s ease-out forwards;
248
+ }
249
+ .fancy-collapse-close {
250
+ animation: fancy-collapse-close 0.15s ease-in forwards;
251
+ }
246
252
  }
247
253
  @keyframes fancy-slide-in-left {
248
254
  from {
@@ -282,17 +288,19 @@
282
288
  opacity: 0.9;
283
289
  }
284
290
  }
285
- .fancy-avatar-glow {
286
- position: absolute;
287
- inset: 0;
288
- border-radius: 9999px;
289
- pointer-events: none;
290
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent), 0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);
291
- animation: fancy-avatar-glow 1.6s ease-out infinite;
292
- }
293
- @media (prefers-reduced-motion: reduce) {
291
+ @layer base {
294
292
  .fancy-avatar-glow {
295
- animation: none;
293
+ position: absolute;
294
+ inset: 0;
295
+ border-radius: 9999px;
296
+ pointer-events: none;
297
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent), 0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);
298
+ animation: fancy-avatar-glow 1.6s ease-out infinite;
299
+ }
300
+ @media (prefers-reduced-motion: reduce) {
301
+ .fancy-avatar-glow {
302
+ animation: none;
303
+ }
296
304
  }
297
305
  }
298
306
  @keyframes fancy-slide-out-right {
@@ -303,17 +311,19 @@
303
311
  transform: translateX(100%);
304
312
  }
305
313
  }
306
- .fancy-slide-in-left {
307
- animation: fancy-slide-in-left 0.25s ease-out;
308
- }
309
- .fancy-slide-out-left {
310
- animation: fancy-slide-out-left 0.2s ease-in forwards;
311
- }
312
- .fancy-slide-in-right {
313
- animation: fancy-slide-in-right 0.25s ease-out;
314
- }
315
- .fancy-slide-out-right {
316
- animation: fancy-slide-out-right 0.2s ease-in forwards;
314
+ @layer base {
315
+ .fancy-slide-in-left {
316
+ animation: fancy-slide-in-left 0.25s ease-out;
317
+ }
318
+ .fancy-slide-out-left {
319
+ animation: fancy-slide-out-left 0.2s ease-in forwards;
320
+ }
321
+ .fancy-slide-in-right {
322
+ animation: fancy-slide-in-right 0.25s ease-out;
323
+ }
324
+ .fancy-slide-out-right {
325
+ animation: fancy-slide-out-right 0.2s ease-in forwards;
326
+ }
317
327
  }
318
328
  @keyframes fancy-slide-in-top {
319
329
  from {
@@ -347,78 +357,80 @@
347
357
  transform: translateY(100%);
348
358
  }
349
359
  }
350
- .fancy-slide-in-top {
351
- animation: fancy-slide-in-top 0.25s ease-out;
352
- }
353
- .fancy-slide-out-top {
354
- animation: fancy-slide-out-top 0.2s ease-in forwards;
355
- }
356
- .fancy-slide-in-bottom {
357
- animation: fancy-slide-in-bottom 0.25s ease-out;
358
- }
359
- .fancy-slide-out-bottom {
360
- animation: fancy-slide-out-bottom 0.2s ease-in forwards;
361
- }
362
- @media (prefers-reduced-motion: reduce) {
363
- .fancy-slide-in-left,
364
- .fancy-slide-out-left,
365
- .fancy-slide-in-right,
366
- .fancy-slide-out-right,
367
- .fancy-slide-in-top,
368
- .fancy-slide-out-top,
369
- .fancy-slide-in-bottom,
360
+ @layer base {
361
+ .fancy-slide-in-top {
362
+ animation: fancy-slide-in-top 0.25s ease-out;
363
+ }
364
+ .fancy-slide-out-top {
365
+ animation: fancy-slide-out-top 0.2s ease-in forwards;
366
+ }
367
+ .fancy-slide-in-bottom {
368
+ animation: fancy-slide-in-bottom 0.25s ease-out;
369
+ }
370
370
  .fancy-slide-out-bottom {
371
- animation-duration: 0.01ms;
371
+ animation: fancy-slide-out-bottom 0.2s ease-in forwards;
372
+ }
373
+ @media (prefers-reduced-motion: reduce) {
374
+ .fancy-slide-in-left,
375
+ .fancy-slide-out-left,
376
+ .fancy-slide-in-right,
377
+ .fancy-slide-out-right,
378
+ .fancy-slide-in-top,
379
+ .fancy-slide-out-top,
380
+ .fancy-slide-in-bottom,
381
+ .fancy-slide-out-bottom {
382
+ animation-duration: 0.01ms;
383
+ }
384
+ }
385
+ [data-react-fancy-marquee] {
386
+ overflow: hidden;
387
+ width: 100%;
388
+ }
389
+ .fancy-marquee--fade {
390
+ -webkit-mask-image:
391
+ linear-gradient(
392
+ to right,
393
+ transparent,
394
+ black var(--fancy-marquee-fade, 48px),
395
+ black calc(100% - var(--fancy-marquee-fade, 48px)),
396
+ transparent);
397
+ mask-image:
398
+ linear-gradient(
399
+ to right,
400
+ transparent,
401
+ black var(--fancy-marquee-fade, 48px),
402
+ black calc(100% - var(--fancy-marquee-fade, 48px)),
403
+ transparent);
404
+ }
405
+ .fancy-marquee__track {
406
+ display: flex;
407
+ width: max-content;
408
+ animation: fancy-marquee var(--fancy-marquee-duration, 40s) linear infinite;
409
+ will-change: transform;
410
+ }
411
+ [data-react-fancy-marquee][data-direction=right] .fancy-marquee__track {
412
+ animation-direction: reverse;
413
+ }
414
+ .fancy-marquee--pause-hover:hover .fancy-marquee__track,
415
+ [data-react-fancy-marquee][data-paused] .fancy-marquee__track {
416
+ animation-play-state: paused;
417
+ }
418
+ .fancy-marquee__group {
419
+ display: flex;
420
+ flex: none;
421
+ }
422
+ .fancy-marquee__unit {
423
+ display: flex;
424
+ flex: none;
425
+ align-items: center;
426
+ gap: var(--fancy-marquee-gap, 40px);
427
+ padding-inline-end: var(--fancy-marquee-gap, 40px);
428
+ white-space: nowrap;
429
+ }
430
+ .fancy-marquee__item,
431
+ .fancy-marquee__separator {
432
+ flex: none;
372
433
  }
373
- }
374
- [data-react-fancy-marquee] {
375
- overflow: hidden;
376
- width: 100%;
377
- }
378
- .fancy-marquee--fade {
379
- -webkit-mask-image:
380
- linear-gradient(
381
- to right,
382
- transparent,
383
- black var(--fancy-marquee-fade, 48px),
384
- black calc(100% - var(--fancy-marquee-fade, 48px)),
385
- transparent);
386
- mask-image:
387
- linear-gradient(
388
- to right,
389
- transparent,
390
- black var(--fancy-marquee-fade, 48px),
391
- black calc(100% - var(--fancy-marquee-fade, 48px)),
392
- transparent);
393
- }
394
- .fancy-marquee__track {
395
- display: flex;
396
- width: max-content;
397
- animation: fancy-marquee var(--fancy-marquee-duration, 40s) linear infinite;
398
- will-change: transform;
399
- }
400
- [data-react-fancy-marquee][data-direction=right] .fancy-marquee__track {
401
- animation-direction: reverse;
402
- }
403
- .fancy-marquee--pause-hover:hover .fancy-marquee__track,
404
- [data-react-fancy-marquee][data-paused] .fancy-marquee__track {
405
- animation-play-state: paused;
406
- }
407
- .fancy-marquee__group {
408
- display: flex;
409
- flex: none;
410
- }
411
- .fancy-marquee__unit {
412
- display: flex;
413
- flex: none;
414
- align-items: center;
415
- gap: var(--fancy-marquee-gap, 40px);
416
- padding-inline-end: var(--fancy-marquee-gap, 40px);
417
- white-space: nowrap;
418
- }
419
- .fancy-marquee__item,
420
- .fancy-marquee__separator {
421
- flex: none;
422
434
  }
423
435
  @keyframes fancy-marquee {
424
436
  from {
@@ -428,9 +440,11 @@
428
440
  transform: translateX(-50%);
429
441
  }
430
442
  }
431
- @media (prefers-reduced-motion: reduce) {
432
- .fancy-marquee__track {
433
- animation: none;
443
+ @layer base {
444
+ @media (prefers-reduced-motion: reduce) {
445
+ .fancy-marquee__track {
446
+ animation: none;
447
+ }
434
448
  }
435
449
  }
436
450
  /*# sourceMappingURL=styles.css.map */