@pandacss/config 0.3.1 → 0.4.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.
@@ -1,2306 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- default: () => src_default,
24
- preset: () => preset
25
- });
26
- module.exports = __toCommonJS(src_exports);
27
-
28
- // src/conditions.ts
29
- var conditions = {
30
- hover: "&:where(:hover, [data-hover])",
31
- focus: "&:where(:focus, [data-focus])",
32
- focusWithin: "&:focus-within",
33
- focusVisible: "&:where(:focus-visible, [data-focus-visible])",
34
- disabled: "&:where(:disabled, [disabled], [data-disabled])",
35
- active: "&:where(:active, [data-active])",
36
- visited: "&:visited",
37
- target: "&:target",
38
- readOnly: "&:where(:read-only, [data-read-only])",
39
- readWrite: "&:read-write",
40
- empty: "&:where(:empty, [data-empty])",
41
- checked: "&:where(:checked, [data-checked], [aria-checked=true])",
42
- enabled: "&:enabled",
43
- expanded: "&:where([aria-expanded=true], [data-expanded])",
44
- highlighted: "&[data-highlighted]",
45
- before: "&::before",
46
- after: "&::after",
47
- firstLetter: "&::first-letter",
48
- firstLine: "&::first-line",
49
- marker: "&::marker",
50
- selection: "&::selection",
51
- file: "&::file-selector-button",
52
- backdrop: "&::backdrop",
53
- first: "&:first-child",
54
- last: "&:last-child",
55
- only: "&:only-child",
56
- even: "&:even",
57
- odd: "&:odd",
58
- firstOfType: "&:first-of-type",
59
- lastOfType: "&:last-of-type",
60
- onlyOfType: "&:only-of-type",
61
- peerFocus: ".peer:where(:focus, [data-focus]) ~ &",
62
- peerHover: ".peer:where(:hover, [data-hover]) ~ &",
63
- peerActive: ".peer:where(:active, [data-active]) ~ &",
64
- peerFocusWithin: ".peer:focus-within ~ &",
65
- peerFocusVisible: ".peer:where(:focus-visible, [data-focus-visible]) ~ &",
66
- peerDisabled: ".peer:where(:disabled, [disabled], [data-disabled]) ~ &",
67
- peerChecked: ".peer:where(:checked, [data-checked], [aria-checked=true]) ~ &",
68
- peerInvalid: ".peer:where(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
69
- peerExpanded: ".peer:where([aria-expanded=true], [data-expanded]) ~ &",
70
- peerPlaceholderShown: ".peer:placeholder-shown ~ &",
71
- groupFocus: ".group:where(:focus, [data-focus]) &",
72
- groupHover: ".group:where(:hover, [data-hover]) &",
73
- groupActive: ".group:where(:active, [data-active]) &",
74
- groupFocusWithin: ".group:focus-within &",
75
- groupFocusVisible: ".group:where(:focus-visible, [data-focus-visible]) &",
76
- groupDisabled: ".group:where(:disabled, [disabled], [data-disabled]) &",
77
- groupChecked: ".group:where(:checked, [data-checked], [aria-checked=true]) &",
78
- groupExpanded: ".group:where([aria-expanded=true], [data-expanded]) &",
79
- groupInvalid: ".group:invalid &",
80
- indeterminate: "&:where(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
81
- required: "&:required",
82
- valid: "&:where(:valid, [data-valid])",
83
- invalid: "&:where(:invalid, [data-invalid])",
84
- autofill: "&:autofill",
85
- inRange: "&:in-range",
86
- outOfRange: "&:out-of-range",
87
- placeholder: "&:placeholder",
88
- placeholderShown: "&:placeholder-shown",
89
- pressed: "&:where([aria-pressed=true], [data-pressed])",
90
- selected: "&:where([aria-selected=true], [data-selected])",
91
- default: "&:default",
92
- optional: "&:optional",
93
- open: "&[open]",
94
- fullscreen: "&:fullscreen",
95
- loading: "&:where([data-loading], [aria-busy=true])",
96
- currentPage: "&[aria-current=page]",
97
- currentStep: "&[aria-current=step]",
98
- motionReduce: "@media (prefers-reduced-motion: reduce)",
99
- motionSafe: "@media (prefers-reduced-motion: no-preference)",
100
- print: "@media print",
101
- landscape: "@media (orientation: landscape)",
102
- portrait: "@media (orientation: portrait)",
103
- dark: " &.dark, .dark &",
104
- light: " &.light, .light &",
105
- osDark: "@media (prefers-color-scheme: dark)",
106
- osLight: "@media (prefers-color-scheme: light)",
107
- highConstrast: "@media (forced-colors: active)",
108
- lessContrast: "@media (prefers-contrast: less)",
109
- moreContrast: "@media (prefers-contrast: more)",
110
- ltr: "[dir=ltr] &",
111
- rtl: "[dir=rtl] &",
112
- scrollbar: "&::-webkit-scrollbar",
113
- scrollbarThumb: "&::-webkit-scrollbar-thumb",
114
- scrollbarTrack: "&::-webkit-scrollbar-track",
115
- horizontal: "&[data-orientation=horizontal]",
116
- vertical: "&[data-orientation=vertical]"
117
- };
118
-
119
- // src/utilities/background.ts
120
- var background = {
121
- backgroundPosition: {
122
- shorthand: "bgPosition",
123
- className: "bg"
124
- },
125
- backgroundPositionX: {
126
- shorthand: "bgPositionX",
127
- className: "bg-x"
128
- },
129
- backgroundPositionY: {
130
- shorthand: "bgPositionY",
131
- className: "bg-y"
132
- },
133
- backgroundAttachment: {
134
- shorthand: "bgAttachment",
135
- className: "bg"
136
- },
137
- backgroundClip: {
138
- shorthand: "bgClip",
139
- className: "bg-clip"
140
- },
141
- background: {
142
- shorthand: "bg",
143
- className: "bg",
144
- values: "colors"
145
- },
146
- backgroundColor: {
147
- shorthand: "bgColor",
148
- className: "bg",
149
- values: "colors"
150
- },
151
- backgroundOrigin: {
152
- shorthand: "bgOrigin",
153
- className: "bg-origin"
154
- },
155
- backgroundImage: {
156
- shorthand: "bgImage",
157
- className: "bg-img",
158
- values: "assets"
159
- },
160
- backgroundRepeat: {
161
- shorthand: "bgRepeat",
162
- className: "bg-repeat"
163
- },
164
- backgroundBlendMode: {
165
- shorthand: "bgBlendMode",
166
- className: "bg-blend"
167
- },
168
- backgroundSize: {
169
- shorthand: "bgSize",
170
- className: "bg"
171
- },
172
- backgroundGradient: {
173
- shorthand: "bgGradient",
174
- className: "bg-gradient",
175
- values(theme) {
176
- return {
177
- ...theme("gradients"),
178
- "to-t": "linear-gradient(to top, var(--gradient))",
179
- "to-tr": "linear-gradient(to top right, var(--gradient))",
180
- "to-r": "linear-gradient(to right, var(--gradient))",
181
- "to-br": "linear-gradient(to bottom right, var(--gradient))",
182
- "to-b": "linear-gradient(to bottom, var(--gradient))",
183
- "to-bl": "linear-gradient(to bottom left, var(--gradient))",
184
- "to-l": "linear-gradient(to left, var(--gradient))",
185
- "to-tl": "linear-gradient(to top left, var(--gradient))"
186
- };
187
- },
188
- transform(value) {
189
- return {
190
- "--gradient-stops": "var(--gradient-from), var(--gradient-to)",
191
- "--gradient": "var(--gradient-via-stops, var(--gradient-stops))",
192
- backgroundImage: value
193
- };
194
- }
195
- },
196
- textGradient: {
197
- className: "text-gradient",
198
- values(theme) {
199
- return {
200
- ...theme("gradients"),
201
- "to-t": "linear-gradient(to top, var(--gradient))",
202
- "to-tr": "linear-gradient(to top right, var(--gradient))",
203
- "to-r": "linear-gradient(to right, var(--gradient))",
204
- "to-br": "linear-gradient(to bottom right, var(--gradient))",
205
- "to-b": "linear-gradient(to bottom, var(--gradient))",
206
- "to-bl": "linear-gradient(to bottom left, var(--gradient))",
207
- "to-l": "linear-gradient(to left, var(--gradient))",
208
- "to-tl": "linear-gradient(to top left, var(--gradient))"
209
- };
210
- },
211
- transform(value) {
212
- return {
213
- "--gradient-stops": "var(--gradient-from), var(--gradient-to)",
214
- "--gradient": "var(--gradient-via-stops, var(--gradient-stops))",
215
- backgroundImage: value,
216
- backgroundClip: "text",
217
- color: "transparent"
218
- };
219
- }
220
- },
221
- gradientFrom: {
222
- className: "from",
223
- values: "colors",
224
- transform(value) {
225
- return {
226
- "--gradient-from": value
227
- };
228
- }
229
- },
230
- gradientTo: {
231
- className: "to",
232
- values: "colors",
233
- transform(value) {
234
- return {
235
- "--gradient-to": value
236
- };
237
- }
238
- },
239
- gradientVia: {
240
- className: "via",
241
- values: "colors",
242
- transform(value) {
243
- return {
244
- "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)",
245
- "--gradient-via": value
246
- };
247
- }
248
- }
249
- };
250
-
251
- // src/utilities/border.ts
252
- var border = {
253
- borderRadius: {
254
- className: "rounded",
255
- shorthand: "rounded",
256
- values: "radii"
257
- },
258
- borderTopLeftRadius: {
259
- className: "rounded-tl",
260
- shorthand: "roundedTopLeft",
261
- values: "radii"
262
- },
263
- borderTopRightRadius: {
264
- className: "rounded-tr",
265
- shorthand: "roundedTopRight",
266
- values: "radii"
267
- },
268
- borderBottomRightRadius: {
269
- className: "rounded-br",
270
- shorthand: "roundedBottomRight",
271
- values: "radii"
272
- },
273
- borderBottomLeftRadius: {
274
- className: "rounded-bl",
275
- shorthand: "roundedBottomLeft",
276
- values: "radii"
277
- },
278
- borderTopRadius: {
279
- className: "rounded-t",
280
- shorthand: "roundedTop",
281
- property: "borderRadius",
282
- values: "radii",
283
- transform(value) {
284
- return {
285
- borderTopLeftRadius: value,
286
- borderTopRightRadius: value
287
- };
288
- }
289
- },
290
- borderRightRadius: {
291
- className: "rounded-r",
292
- shorthand: "roundedRight",
293
- property: "borderRadius",
294
- values: "radii",
295
- transform(value) {
296
- return {
297
- borderTopRightRadius: value,
298
- borderBottomRightRadius: value
299
- };
300
- }
301
- },
302
- borderBottomRadius: {
303
- className: "rounded-b",
304
- shorthand: "roundedBottom",
305
- property: "borderRadius",
306
- values: "radii",
307
- transform(value) {
308
- return {
309
- borderBottomLeftRadius: value,
310
- borderBottomRightRadius: value
311
- };
312
- }
313
- },
314
- borderLeftRadius: {
315
- className: "rounded-l",
316
- shorthand: "roundedLeft",
317
- values: "radii",
318
- property: "borderRadius",
319
- transform(value) {
320
- return {
321
- borderTopLeftRadius: value,
322
- borderBottomLeftRadius: value
323
- };
324
- }
325
- },
326
- borderStartStartRadius: {
327
- className: "rounded-ss",
328
- shorthand: "roundedStartStart",
329
- values: "radii"
330
- },
331
- borderStartEndRadius: {
332
- className: "rounded-se",
333
- shorthand: "roundedStartEnd",
334
- values: "radii"
335
- },
336
- borderStartRadius: {
337
- className: "rounded-s",
338
- values: "radii",
339
- property: "borderRadius",
340
- shorthand: "roundedStart",
341
- transform(value) {
342
- return {
343
- borderStartStartRadius: value,
344
- borderEndStartRadius: value
345
- };
346
- }
347
- },
348
- borderEndStartRadius: {
349
- className: "rounded-es",
350
- shorthand: "roundedEndStart",
351
- values: "radii"
352
- },
353
- borderEndEndRadius: {
354
- className: "rounded-ee",
355
- shorthand: "roundedEndEnd",
356
- values: "radii"
357
- },
358
- borderEndRadius: {
359
- className: "rounded-e",
360
- shorthand: "roundedEnd",
361
- property: "borderRadius",
362
- values: "radii",
363
- transform(value) {
364
- return {
365
- borderStartEndRadius: value,
366
- borderEndEndRadius: value
367
- };
368
- }
369
- },
370
- border: {
371
- className: "border",
372
- values: "borders"
373
- },
374
- borderColor: {
375
- className: "border",
376
- values: "colors"
377
- },
378
- borderInline: {
379
- className: "border-x",
380
- values: "borders",
381
- shorthand: "borderX"
382
- },
383
- borderInlineWidth: {
384
- className: "border-x",
385
- values: "borderWidths",
386
- shorthand: "borderXWidth"
387
- },
388
- borderInlineColor: {
389
- className: "border-x",
390
- values: "colors",
391
- shorthand: "borderXColor"
392
- },
393
- borderBlock: {
394
- className: "border-y",
395
- values: "borders",
396
- shorthand: "borderY"
397
- },
398
- borderBlockWidth: {
399
- className: "border-y",
400
- values: "borderWidths",
401
- shorthand: "borderYWidth"
402
- },
403
- borderBlockColor: {
404
- className: "border-y",
405
- values: "colors",
406
- shorthand: "borderYColor"
407
- },
408
- borderLeft: {
409
- className: "border-l",
410
- values: "borders"
411
- },
412
- borderLeftColor: {
413
- className: "border-l",
414
- values: "colors"
415
- },
416
- borderInlineStart: {
417
- className: "border-s",
418
- values: "borders",
419
- shorthand: "borderStart"
420
- },
421
- borderInlineStartColor: {
422
- className: "border-s",
423
- values: "colors",
424
- shorthand: "borderStartColor"
425
- },
426
- borderRight: {
427
- className: "border-r",
428
- values: "borders"
429
- },
430
- borderRightColor: {
431
- className: "border-r",
432
- values: "colors"
433
- },
434
- borderInlineEnd: {
435
- className: "border-e",
436
- values: "borders",
437
- shorthand: "borderEnd"
438
- },
439
- borderInlineEndColor: {
440
- className: "border-e",
441
- values: "colors",
442
- shorthand: "borderEndColor"
443
- },
444
- borderTop: {
445
- className: "border-t",
446
- values: "borders"
447
- },
448
- borderTopColor: {
449
- className: "border-t",
450
- values: "colors"
451
- },
452
- borderBottom: {
453
- className: "border-b",
454
- values: "borders"
455
- },
456
- borderBottomColor: {
457
- className: "border-b",
458
- values: "colors"
459
- },
460
- borderBlockEnd: {
461
- className: "border-be",
462
- values: "borders"
463
- },
464
- borderBlockEndColor: {
465
- className: "border-be",
466
- values: "colors"
467
- },
468
- borderBlockStart: {
469
- className: "border-bs",
470
- values: "borders"
471
- },
472
- borderBlockStartColor: {
473
- className: "border-bs",
474
- values: "colors"
475
- }
476
- };
477
-
478
- // src/utilities/display.ts
479
- var display = {
480
- display: {
481
- className: "d"
482
- },
483
- hideFrom: {
484
- className: "hide",
485
- values: "breakpoints",
486
- transform(value, { raw }) {
487
- return {
488
- [`@breakpoint ${raw}`]: {
489
- display: "none"
490
- }
491
- };
492
- }
493
- },
494
- hideBelow: {
495
- className: "show",
496
- values: "breakpoints",
497
- transform(value, { raw }) {
498
- return {
499
- [`@breakpoint ${raw}Down`]: {
500
- display: "none"
501
- }
502
- };
503
- }
504
- }
505
- };
506
-
507
- // src/utilities/divide.ts
508
- var divide = {
509
- divideX: {
510
- className: "divide-x",
511
- values: { type: "string" },
512
- transform(value) {
513
- return {
514
- "& > :not([hidden]) ~ :not([hidden])": {
515
- borderInlineStartWidth: value,
516
- borderInlineEndWidth: "0px"
517
- }
518
- };
519
- }
520
- },
521
- divideY: {
522
- className: "divide-y",
523
- values: { type: "string" },
524
- transform(value) {
525
- return {
526
- "& > :not([hidden]) ~ :not([hidden])": {
527
- borderTopWidth: value,
528
- borderBottomWidth: "0px"
529
- }
530
- };
531
- }
532
- },
533
- divideColor: {
534
- className: "divide",
535
- values: "colors",
536
- transform(value) {
537
- return {
538
- "& > :not([hidden]) ~ :not([hidden])": {
539
- borderColor: value
540
- }
541
- };
542
- }
543
- },
544
- divideStyle: {
545
- className: "divide",
546
- property: "borderStyle",
547
- transform(value) {
548
- return {
549
- "& > :not([hidden]) ~ :not([hidden])": {
550
- borderStyle: value
551
- }
552
- };
553
- }
554
- }
555
- };
556
-
557
- // src/utilities/effects.ts
558
- var effects = {
559
- boxShadow: {
560
- shorthand: "shadow",
561
- className: "shadow",
562
- values: "shadows"
563
- },
564
- boxShadowColor: {
565
- shorthand: "shadowColor",
566
- className: "shadow",
567
- values: "colors",
568
- transform(value) {
569
- return {
570
- "--shadow-color": value
571
- };
572
- }
573
- },
574
- mixBlendMode: {
575
- className: "mix-blend"
576
- },
577
- filter: {
578
- className: "filter",
579
- values: {
580
- auto: [
581
- "var(--blur)",
582
- "var(--brightness)",
583
- "var(--contrast)",
584
- "var(--grayscale)",
585
- "var(--hue-rotate)",
586
- "var(--invert)",
587
- "var(--saturate)",
588
- "var(--sepia)",
589
- "var(--drop-shadow)"
590
- ].join(" ")
591
- }
592
- },
593
- brightness: {
594
- className: "brightness",
595
- transform(value) {
596
- return {
597
- "--brightness": `brightness(${value})`
598
- };
599
- }
600
- },
601
- contrast: {
602
- className: "contrast",
603
- transform(value) {
604
- return {
605
- "--contrast": `constrast(${value})`
606
- };
607
- }
608
- },
609
- grayscale: {
610
- className: "grayscale",
611
- transform(value) {
612
- return {
613
- "--grayscale": `grayscale(${value})`
614
- };
615
- }
616
- },
617
- hueRotate: {
618
- className: "hue-rotate",
619
- transform(value) {
620
- return {
621
- "--hue-rotate": `hue-rotate(${value})`
622
- };
623
- }
624
- },
625
- invert: {
626
- className: "invert",
627
- transform(value) {
628
- return {
629
- "--invert": `invert(${value})`
630
- };
631
- }
632
- },
633
- saturate: {
634
- className: "saturate",
635
- transform(value) {
636
- return {
637
- "--saturate": `saturate(${value})`
638
- };
639
- }
640
- },
641
- sepia: {
642
- className: "sepia",
643
- transform(value) {
644
- return {
645
- "--sepia": `sepia(${value})`
646
- };
647
- }
648
- },
649
- dropShadow: {
650
- className: "drop-shadow",
651
- values: "dropShadows",
652
- transform(value) {
653
- return {
654
- "--drop-shadow": value
655
- };
656
- }
657
- },
658
- blur: {
659
- className: "blur",
660
- values: "blurs",
661
- transform(value) {
662
- return {
663
- "--blur": `blur(${value})`
664
- };
665
- }
666
- },
667
- backdropFilter: {
668
- className: "backdrop",
669
- values: {
670
- auto: [
671
- "var(--backdrop-blur)",
672
- "var(--backdrop-brightness)",
673
- "var(--backdrop-contrast)",
674
- "var(--backdrop-grayscale)",
675
- "var(--backdrop-hue-rotate)",
676
- "var(--backdrop-invert)",
677
- "var(--backdrop-saturate)",
678
- "var(--backdrop-sepia)"
679
- ].join(" ")
680
- }
681
- },
682
- backdropBlur: {
683
- className: "backdrop-blur",
684
- values: "blurs",
685
- transform(value) {
686
- return {
687
- "--backdrop-blur": `blur(${value})`
688
- };
689
- }
690
- },
691
- backdropBrightness: {
692
- className: "backdrop-brightness",
693
- transform(value) {
694
- return {
695
- "--backdrop-brightness": `brightness(${value})`
696
- };
697
- }
698
- },
699
- backdropContrast: {
700
- className: "backdrop-contrast",
701
- transform(value) {
702
- return {
703
- "--backdrop-contrast": `constrast(${value})`
704
- };
705
- }
706
- },
707
- backdropGrayscale: {
708
- className: "backdrop-grayscale",
709
- transform(value) {
710
- return {
711
- "--backdrop-grayscale": `grayscale(${value})`
712
- };
713
- }
714
- },
715
- backdropHueRotate: {
716
- className: "backdrop-hue-rotate",
717
- transform(value) {
718
- return {
719
- "--backdrop-hue-rotate": `hue-rotate(${value})`
720
- };
721
- }
722
- },
723
- backdropInvert: {
724
- className: "backdrop-invert",
725
- transform(value) {
726
- return {
727
- "--backdrop-invert": `invert(${value})`
728
- };
729
- }
730
- },
731
- backdropOpacity: {
732
- className: "backdrop-opacity",
733
- transform(value) {
734
- return {
735
- "--backdrop-opacity": value
736
- };
737
- }
738
- },
739
- backdropSaturate: {
740
- className: "backdrop-saturate",
741
- transform(value) {
742
- return {
743
- "--backdrop-saturate": `saturate(${value})`
744
- };
745
- }
746
- },
747
- backdropSepia: {
748
- className: "backdrop-sepia",
749
- transform(value) {
750
- return {
751
- "--backdrop-sepia": `sepia(${value})`
752
- };
753
- }
754
- }
755
- };
756
-
757
- // src/utilities/flex-and-grid.ts
758
- var flexGrid = {
759
- flexBasis: {
760
- className: "basis",
761
- values(theme) {
762
- return {
763
- ...theme("spacing"),
764
- "1/2": "50%",
765
- "1/3": "33.333333%",
766
- "2/3": "66.666667%",
767
- "1/4": "25%",
768
- "2/4": "50%",
769
- "3/4": "75%",
770
- "1/5": "20%",
771
- "2/5": "40%",
772
- "3/5": "60%",
773
- "4/5": "80%",
774
- "1/6": "16.666667%",
775
- "2/6": "33.333333%",
776
- "3/6": "50%",
777
- "4/6": "66.666667%",
778
- "5/6": "83.333333%",
779
- "1/12": "8.333333%",
780
- "2/12": "16.666667%",
781
- "3/12": "25%",
782
- "4/12": "33.333333%",
783
- "5/12": "41.666667%",
784
- "6/12": "50%",
785
- "7/12": "58.333333%",
786
- "8/12": "66.666667%",
787
- "9/12": "75%",
788
- "10/12": "83.333333%",
789
- "11/12": "91.666667%",
790
- full: "100%"
791
- };
792
- }
793
- },
794
- flex: {
795
- className: "flex",
796
- values: {
797
- "1": "1 1 0%",
798
- auto: "1 1 auto",
799
- initial: "0 1 auto",
800
- none: "none"
801
- }
802
- },
803
- flexDirection: {
804
- className: "flex",
805
- shorthand: "flexDir"
806
- },
807
- flexGrow: {
808
- className: "grow"
809
- },
810
- flexShrink: {
811
- className: "shrink"
812
- },
813
- gridTemplateColumns: {
814
- className: "grid-cols",
815
- values: {
816
- "1": "repeat(1, minmax(0, 1fr))",
817
- "2": "repeat(2, minmax(0, 1fr))",
818
- "3": "repeat(3, minmax(0, 1fr))",
819
- "4": "repeat(4, minmax(0, 1fr))",
820
- "5": "repeat(5, minmax(0, 1fr))",
821
- "6": "repeat(6, minmax(0, 1fr))",
822
- "7": "repeat(7, minmax(0, 1fr))",
823
- "8": "repeat(8, minmax(0, 1fr))",
824
- "9": "repeat(9, minmax(0, 1fr))",
825
- "10": "repeat(10, minmax(0, 1fr))",
826
- "11": "repeat(11, minmax(0, 1fr))",
827
- "12": "repeat(12, minmax(0, 1fr))"
828
- }
829
- },
830
- gridTemplateRows: {
831
- className: "grid-cols",
832
- values: {
833
- "1": "repeat(1, minmax(0, 1fr))",
834
- "2": "repeat(2, minmax(0, 1fr))",
835
- "3": "repeat(3, minmax(0, 1fr))",
836
- "4": "repeat(4, minmax(0, 1fr))",
837
- "5": "repeat(5, minmax(0, 1fr))",
838
- "6": "repeat(6, minmax(0, 1fr))",
839
- "7": "repeat(7, minmax(0, 1fr))",
840
- "8": "repeat(8, minmax(0, 1fr))",
841
- "9": "repeat(9, minmax(0, 1fr))",
842
- "10": "repeat(10, minmax(0, 1fr))",
843
- "11": "repeat(11, minmax(0, 1fr))",
844
- "12": "repeat(12, minmax(0, 1fr))"
845
- }
846
- },
847
- gridColumn: {
848
- className: "col-span",
849
- values: {
850
- full: "1 / -1",
851
- "1": "span 1 / span 1",
852
- "2": "span 2 / span 2",
853
- "3": "span 3 / span 3",
854
- "4": "span 4 / span 4",
855
- "5": "span 5 / span 5",
856
- "6": "span 6 / span 6",
857
- "7": "span 7 / span 7",
858
- "8": "span 8 / span 8",
859
- "9": "span 9 / span 9",
860
- "10": "span 10 / span 10",
861
- "11": "span 11 / span 11",
862
- "12": "span 12 / span 12"
863
- }
864
- },
865
- gridRow: {
866
- className: "row-span",
867
- values: {
868
- full: "1 / -1",
869
- "1": "span 1 / span 1",
870
- "2": "span 2 / span 2",
871
- "3": "span 3 / span 3",
872
- "4": "span 4 / span 4",
873
- "5": "span 5 / span 5",
874
- "6": "span 6 / span 6",
875
- "7": "span 7 / span 7",
876
- "8": "span 8 / span 8",
877
- "9": "span 9 / span 9",
878
- "10": "span 10 / span 10",
879
- "11": "span 11 / span 11",
880
- "12": "span 12 / span 12"
881
- }
882
- },
883
- gridColumnStart: {
884
- className: "col-start"
885
- },
886
- gridColumnEnd: {
887
- className: "col-end"
888
- },
889
- gridAutoFlow: {
890
- className: "grid-flow"
891
- },
892
- gridAutoColumns: {
893
- className: "auto-cols",
894
- values: {
895
- min: "min-content",
896
- max: "max-content",
897
- fr: "minmax(0, 1fr)"
898
- }
899
- },
900
- gridAutoRows: {
901
- className: "auto-rows",
902
- values: {
903
- min: "min-content",
904
- max: "max-content",
905
- fr: "minmax(0, 1fr)"
906
- }
907
- },
908
- gap: {
909
- className: "gap",
910
- values: "spacing"
911
- },
912
- gridGap: {
913
- className: "gap",
914
- values: "spacing"
915
- },
916
- gridRowGap: {
917
- className: "gap-x",
918
- values: "spacing"
919
- },
920
- gridColumnGap: {
921
- className: "gap-y",
922
- values: "spacing"
923
- },
924
- rowGap: {
925
- className: "gap-x",
926
- values: "spacing"
927
- },
928
- columnGap: {
929
- className: "gap-y",
930
- values: "spacing"
931
- },
932
- justifyContent: {
933
- className: "justify"
934
- },
935
- alignContent: {
936
- className: "content"
937
- },
938
- alignItems: {
939
- className: "items"
940
- },
941
- alignSelf: {
942
- className: "self"
943
- }
944
- };
945
-
946
- // src/utilities/helpers.ts
947
- var srMapping = {
948
- true: {
949
- position: "absolute",
950
- width: "1px",
951
- height: "1px",
952
- padding: "0",
953
- margin: "-1px",
954
- overflow: "hidden",
955
- clip: "rect(0, 0, 0, 0)",
956
- whiteSpace: "nowrap",
957
- borderWidth: "0"
958
- },
959
- false: {
960
- position: "static",
961
- width: "auto",
962
- height: "auto",
963
- padding: "0",
964
- margin: "0",
965
- overflow: "visible",
966
- clip: "auto",
967
- whiteSpace: "normal"
968
- }
969
- };
970
- var helpers = {
971
- srOnly: {
972
- className: "sr",
973
- values: { type: "boolean" },
974
- transform(value) {
975
- return srMapping[value] || {};
976
- }
977
- },
978
- debug: {
979
- className: "debug",
980
- values: { type: "boolean" },
981
- transform(value) {
982
- if (!value)
983
- return {};
984
- return {
985
- outline: "1px solid blue !important",
986
- "&>*": {
987
- outline: "1px solid red !important"
988
- }
989
- };
990
- }
991
- }
992
- };
993
-
994
- // src/utilities/interactivity.ts
995
- var interactivity = {
996
- accentColor: {
997
- className: "accent",
998
- values: "colors"
999
- },
1000
- caretColor: {
1001
- className: "caret",
1002
- values: "colors"
1003
- },
1004
- scrollBehavior: {
1005
- className: "scroll"
1006
- },
1007
- scrollbar: {
1008
- className: "scrollbar",
1009
- values: ["visible", "hidden"],
1010
- transform(value) {
1011
- if (value === "visible") {
1012
- return {
1013
- msOverflowStyle: "auto",
1014
- scrollbarWidth: "auto",
1015
- "&::-webkit-scrollbar": {
1016
- display: "block"
1017
- }
1018
- };
1019
- }
1020
- if (value === "hidden") {
1021
- return {
1022
- msOverflowStyle: "none",
1023
- scrollbarWidth: "none",
1024
- "&::-webkit-scrollbar": {
1025
- display: "none"
1026
- }
1027
- };
1028
- }
1029
- }
1030
- },
1031
- scrollMargin: {
1032
- className: "scroll-m",
1033
- values: "spacing"
1034
- },
1035
- scrollMarginX: {
1036
- className: "scroll-mx",
1037
- values: "spacing",
1038
- property: "scrollMarginInline",
1039
- transform(value) {
1040
- return {
1041
- scrollMarginInline: value
1042
- };
1043
- }
1044
- },
1045
- scrollMarginY: {
1046
- className: "scroll-my",
1047
- values: "spacing",
1048
- property: "scrollMarginBlock",
1049
- transform(value) {
1050
- return {
1051
- scrollMarginBlock: value
1052
- };
1053
- }
1054
- },
1055
- scrollMarginLeft: {
1056
- className: "scroll-ml",
1057
- values: "spacing"
1058
- },
1059
- scrollMarginRight: {
1060
- className: "scroll-mr",
1061
- values: "spacing"
1062
- },
1063
- scrollMarginTop: {
1064
- className: "scroll-mt",
1065
- values: "spacing"
1066
- },
1067
- scrollMarginBottom: {
1068
- className: "scroll-mb",
1069
- values: "spacing"
1070
- },
1071
- scrollMarginBlock: {
1072
- className: "scroll-my",
1073
- values: "spacing"
1074
- },
1075
- scrollMarginBlockEnd: {
1076
- className: "scroll-mb",
1077
- values: "spacing"
1078
- },
1079
- scrollMarginBlockStart: {
1080
- className: "scroll-mt",
1081
- values: "spacing"
1082
- },
1083
- scrollMarginInline: {
1084
- className: "scroll-mx",
1085
- values: "spacing"
1086
- },
1087
- scrollMarginInlineEnd: {
1088
- className: "scroll-me",
1089
- values: "spacing"
1090
- },
1091
- scrollMarginInlineStart: {
1092
- className: "scroll-ms",
1093
- values: "spacing"
1094
- },
1095
- scrollPadding: {
1096
- className: "scroll-p",
1097
- values: "spacing"
1098
- },
1099
- scrollPaddingBlock: {
1100
- className: "scroll-pb",
1101
- values: "spacing"
1102
- },
1103
- scrollPaddingBlockStart: {
1104
- className: "scroll-pt",
1105
- values: "spacing"
1106
- },
1107
- scrollPaddingBlockEnd: {
1108
- className: "scroll-pb",
1109
- values: "spacing"
1110
- },
1111
- scrollPaddingInline: {
1112
- className: "scroll-px",
1113
- values: "spacing"
1114
- },
1115
- scrollPaddingInlineEnd: {
1116
- className: "scroll-pe",
1117
- values: "spacing"
1118
- },
1119
- scrollPaddingInlineStart: {
1120
- className: "scroll-ps",
1121
- values: "spacing"
1122
- },
1123
- scrollPaddingX: {
1124
- className: "scroll-px",
1125
- values: "spacing",
1126
- property: "scrollPaddingInline",
1127
- transform(value) {
1128
- return {
1129
- scrollPaddingInline: value
1130
- };
1131
- }
1132
- },
1133
- scrollPaddingY: {
1134
- className: "scroll-py",
1135
- values: "spacing",
1136
- property: "scrollPaddingBlock",
1137
- transform(value) {
1138
- return {
1139
- scrollPaddingBlock: value
1140
- };
1141
- }
1142
- },
1143
- scrollPaddingLeft: {
1144
- className: "scroll-pl",
1145
- values: "spacing"
1146
- },
1147
- scrollPaddingRight: {
1148
- className: "scroll-pr",
1149
- values: "spacing"
1150
- },
1151
- scrollPaddingTop: {
1152
- className: "scroll-pt",
1153
- values: "spacing"
1154
- },
1155
- scrollPaddingBottom: {
1156
- className: "scroll-pb",
1157
- values: "spacing"
1158
- },
1159
- scrollSnapAlign: {
1160
- className: "snap"
1161
- },
1162
- scrollSnapStop: {
1163
- className: "snap"
1164
- },
1165
- scrollSnapType: {
1166
- className: "snap",
1167
- values: {
1168
- none: "none",
1169
- x: "x var(--scroll-snap-strictness)",
1170
- y: "y var(--scroll-snap-strictness)",
1171
- both: "both var(--scroll-snap-strictness)"
1172
- }
1173
- },
1174
- scrollSnapStrictness: {
1175
- className: "strictness",
1176
- values: ["mandatory", "proximity"],
1177
- transform(value) {
1178
- return {
1179
- "--scroll-snap-strictness": value
1180
- };
1181
- }
1182
- },
1183
- scrollSnapMargin: {
1184
- className: "snap-m",
1185
- values: "spacing"
1186
- },
1187
- scrollSnapMarginTop: {
1188
- className: "snap-mt",
1189
- values: "spacing"
1190
- },
1191
- scrollSnapMarginBottom: {
1192
- className: "snap-mb",
1193
- values: "spacing"
1194
- },
1195
- scrollSnapMarginLeft: {
1196
- className: "snap-ml",
1197
- values: "spacing"
1198
- },
1199
- scrollSnapMarginRight: {
1200
- className: "snap-mr",
1201
- values: "spacing"
1202
- },
1203
- touchAction: {
1204
- className: "touch"
1205
- },
1206
- userSelect: {
1207
- className: "select"
1208
- }
1209
- };
1210
-
1211
- // src/utilities/layout.ts
1212
- var layout = {
1213
- aspectRatio: {
1214
- className: "aspect",
1215
- values: {
1216
- square: "1 / 1",
1217
- landscape: "4 / 3",
1218
- portrait: "3 / 4",
1219
- wide: "16 / 9",
1220
- ultrawide: "18 / 5",
1221
- golden: "1.618 / 1"
1222
- }
1223
- },
1224
- boxDecorationBreak: {
1225
- className: "decoration"
1226
- },
1227
- zIndex: {
1228
- className: "z"
1229
- },
1230
- boxSizing: {
1231
- className: "box"
1232
- },
1233
- objectPosition: {
1234
- className: "object"
1235
- },
1236
- objectFit: {
1237
- className: "object"
1238
- },
1239
- overscrollBehavior: {
1240
- className: "overscroll"
1241
- },
1242
- overscrollBehaviorX: {
1243
- className: "overscroll-x"
1244
- },
1245
- overscrollBehaviorY: {
1246
- className: "overscroll-y"
1247
- },
1248
- position: {
1249
- className: "pos",
1250
- shorthand: "pos"
1251
- },
1252
- top: {
1253
- className: "top",
1254
- values: "spacing"
1255
- },
1256
- left: {
1257
- className: "left",
1258
- values: "spacing"
1259
- },
1260
- insetInline: {
1261
- className: "inset-x",
1262
- values: "spacing"
1263
- },
1264
- insetBlock: {
1265
- className: "inset-y",
1266
- values: "spacing"
1267
- },
1268
- inset: {
1269
- className: "inset",
1270
- values: "spacing"
1271
- },
1272
- insetBlockEnd: {
1273
- className: "inset-b",
1274
- values: "spacing"
1275
- },
1276
- insetBlockStart: {
1277
- className: "inset-t",
1278
- values: "spacing"
1279
- },
1280
- insetInlineEnd: {
1281
- className: "end",
1282
- values: "spacing",
1283
- shorthand: ["insetEnd", "end"]
1284
- },
1285
- insetInlineStart: {
1286
- className: "start",
1287
- values: "spacing",
1288
- shorthand: ["insetStart", "start"]
1289
- },
1290
- right: {
1291
- className: "right",
1292
- values: "spacing"
1293
- },
1294
- bottom: {
1295
- className: "bottom",
1296
- values: "spacing"
1297
- },
1298
- insetX: {
1299
- className: "inset-x",
1300
- values: "spacing",
1301
- property: "insetInline",
1302
- transform(value) {
1303
- return {
1304
- insetInline: value
1305
- };
1306
- }
1307
- },
1308
- insetY: {
1309
- className: "inset-y",
1310
- values: "spacing",
1311
- property: "insetBlock",
1312
- transform(value) {
1313
- return {
1314
- insetBlock: value
1315
- };
1316
- }
1317
- },
1318
- float: {
1319
- className: "float",
1320
- values: ["left", "right", "start", "end"],
1321
- transform(value) {
1322
- if (value === "start") {
1323
- return {
1324
- float: "left",
1325
- '[dir="rtl"] &': {
1326
- float: "right"
1327
- }
1328
- };
1329
- }
1330
- if (value === "end") {
1331
- return {
1332
- float: "right",
1333
- '[dir="rtl"] &': {
1334
- float: "left"
1335
- }
1336
- };
1337
- }
1338
- return {
1339
- float: value
1340
- };
1341
- }
1342
- },
1343
- visibility: {
1344
- className: "vis"
1345
- }
1346
- };
1347
-
1348
- // src/utilities/list.ts
1349
- var list = {
1350
- listStyleType: {
1351
- className: "list"
1352
- },
1353
- listStylePosition: {
1354
- className: "list"
1355
- },
1356
- listStyleImage: {
1357
- className: "list-img",
1358
- values: "assets"
1359
- }
1360
- };
1361
-
1362
- // src/utilities/outline.ts
1363
- var outline = {
1364
- outlineWidth: {
1365
- className: "ring",
1366
- shorthand: "ringWidth"
1367
- },
1368
- outlineColor: {
1369
- className: "ring",
1370
- values: "colors",
1371
- shorthand: "ringColor"
1372
- },
1373
- outline: {
1374
- className: "ring",
1375
- shorthand: "ring",
1376
- values: "borders",
1377
- transform(value) {
1378
- if (value === "none") {
1379
- return { outline: "2px solid transparent", outlineOffset: "2px" };
1380
- }
1381
- return { outline: value };
1382
- }
1383
- },
1384
- outlineOffset: {
1385
- className: "ring",
1386
- shorthand: "ringOffset",
1387
- values: "spacing"
1388
- }
1389
- };
1390
-
1391
- // src/utilities/sizing.ts
1392
- var widthValues = (theme) => ({
1393
- ...theme("sizes"),
1394
- "1/2": "50%",
1395
- "1/3": "33.333333%",
1396
- "2/3": "66.666667%",
1397
- "1/4": "25%",
1398
- "2/4": "50%",
1399
- "3/4": "75%",
1400
- "1/5": "20%",
1401
- "2/5": "40%",
1402
- "3/5": "60%",
1403
- "4/5": "80%",
1404
- "1/6": "16.666667%",
1405
- "2/6": "33.333333%",
1406
- "3/6": "50%",
1407
- "4/6": "66.666667%",
1408
- "5/6": "83.333333%",
1409
- "1/12": "8.333333%",
1410
- "2/12": "16.666667%",
1411
- "3/12": "25%",
1412
- "4/12": "33.333333%",
1413
- "5/12": "41.666667%",
1414
- "6/12": "50%",
1415
- "7/12": "58.333333%",
1416
- "8/12": "66.666667%",
1417
- "9/12": "75%",
1418
- "10/12": "83.333333%",
1419
- "11/12": "91.666667%",
1420
- screen: "100vw"
1421
- });
1422
- var heightValues = (theme) => ({
1423
- ...theme("sizes"),
1424
- svh: "100svh",
1425
- lvh: "100lvh",
1426
- dvh: "100dvh",
1427
- screen: "100vh",
1428
- "1/2": "50%",
1429
- "1/3": "33.333333%",
1430
- "2/3": "66.666667%",
1431
- "1/4": "25%",
1432
- "2/4": "50%",
1433
- "3/4": "75%",
1434
- "1/5": "20%",
1435
- "2/5": "40%",
1436
- "3/5": "60%",
1437
- "4/5": "80%",
1438
- "1/6": "16.666667%",
1439
- "2/6": "33.333333%",
1440
- "3/6": "50%",
1441
- "4/6": "66.666667%",
1442
- "5/6": "83.333333%"
1443
- });
1444
- var sizing = {
1445
- width: {
1446
- shorthand: "w",
1447
- className: "w",
1448
- values: widthValues
1449
- },
1450
- inlineSize: {
1451
- className: "w",
1452
- values: widthValues
1453
- },
1454
- minWidth: {
1455
- shorthand: "minW",
1456
- className: "min-w",
1457
- values: widthValues
1458
- },
1459
- minInlineSize: {
1460
- className: "min-w",
1461
- values: widthValues
1462
- },
1463
- maxWidth: {
1464
- shorthand: "maxW",
1465
- className: "max-w",
1466
- values: widthValues
1467
- },
1468
- maxInlineSize: {
1469
- className: "max-w",
1470
- values: widthValues
1471
- },
1472
- height: {
1473
- shorthand: "h",
1474
- className: "h",
1475
- values: heightValues
1476
- },
1477
- blockSize: {
1478
- className: "h",
1479
- values: heightValues
1480
- },
1481
- minHeight: {
1482
- shorthand: "minH",
1483
- className: "min-h",
1484
- values: heightValues
1485
- },
1486
- minBlockSize: {
1487
- className: "min-h",
1488
- values: heightValues
1489
- },
1490
- maxHeight: {
1491
- shorthand: "maxH",
1492
- className: "max-h",
1493
- values: heightValues
1494
- },
1495
- maxBlockSize: {
1496
- className: "max-b",
1497
- values: heightValues
1498
- }
1499
- };
1500
-
1501
- // src/utilities/spacing.ts
1502
- var spacing = {
1503
- padding: {
1504
- className: "p",
1505
- shorthand: "p",
1506
- values: "spacing"
1507
- },
1508
- paddingLeft: {
1509
- className: "pl",
1510
- shorthand: "pl",
1511
- values: "spacing"
1512
- },
1513
- paddingRight: {
1514
- className: "pr",
1515
- shorthand: "pr",
1516
- values: "spacing"
1517
- },
1518
- paddingTop: {
1519
- className: "pt",
1520
- shorthand: "pt",
1521
- values: "spacing"
1522
- },
1523
- paddingBottom: {
1524
- className: "pb",
1525
- shorthand: "pb",
1526
- values: "spacing"
1527
- },
1528
- paddingBlock: {
1529
- className: "py",
1530
- values: "spacing",
1531
- shorthand: ["py", "paddingY"]
1532
- },
1533
- paddingBlockEnd: {
1534
- className: "pb",
1535
- values: "spacing"
1536
- },
1537
- paddingBlockStart: {
1538
- className: "pt",
1539
- values: "spacing"
1540
- },
1541
- paddingInline: {
1542
- className: "px",
1543
- values: "spacing",
1544
- shorthand: ["paddingX", "px"]
1545
- },
1546
- paddingInlineEnd: {
1547
- className: "pe",
1548
- shorthand: ["pe", "paddingEnd"],
1549
- values: "spacing"
1550
- },
1551
- paddingInlineStart: {
1552
- className: "ps",
1553
- shorthand: ["ps", "paddingStart"],
1554
- values: "spacing"
1555
- },
1556
- marginLeft: {
1557
- className: "ml",
1558
- shorthand: "ml",
1559
- values: "spacing"
1560
- },
1561
- marginRight: {
1562
- className: "mr",
1563
- shorthand: "mr",
1564
- values: "spacing"
1565
- },
1566
- marginTop: {
1567
- className: "mt",
1568
- shorthand: "mt",
1569
- values: "spacing"
1570
- },
1571
- marginBottom: {
1572
- className: "mb",
1573
- shorthand: "mb",
1574
- values: "spacing"
1575
- },
1576
- margin: {
1577
- className: "m",
1578
- shorthand: "m",
1579
- values: "spacing"
1580
- },
1581
- marginBlock: {
1582
- className: "my",
1583
- values: "spacing",
1584
- shorthand: ["my", "marginY"]
1585
- },
1586
- marginBlockEnd: {
1587
- className: "mb",
1588
- values: "spacing"
1589
- },
1590
- marginBlockStart: {
1591
- className: "mt",
1592
- values: "spacing"
1593
- },
1594
- marginInline: {
1595
- className: "mx",
1596
- values: "spacing",
1597
- shorthand: ["mx", "marginX"]
1598
- },
1599
- marginInlineEnd: {
1600
- className: "me",
1601
- shorthand: ["me", "marginEnd"],
1602
- values: "spacing"
1603
- },
1604
- marginInlineStart: {
1605
- className: "ms",
1606
- shorthand: ["ms", "marginStart"],
1607
- values: "spacing"
1608
- }
1609
- };
1610
-
1611
- // src/utilities/svg.ts
1612
- var svg = {
1613
- fill: {
1614
- className: "fill",
1615
- values: "colors"
1616
- },
1617
- stroke: {
1618
- className: "stroke",
1619
- values: "colors"
1620
- }
1621
- };
1622
-
1623
- // src/utilities/tables.ts
1624
- var tables = {
1625
- borderCollapse: {
1626
- className: "border"
1627
- },
1628
- borderSpacing: {
1629
- className: "border-spacing",
1630
- values: "spacing"
1631
- },
1632
- borderSpacingX: {
1633
- className: "border-spacing-x",
1634
- values: "spacing",
1635
- transform(value) {
1636
- return {
1637
- borderSpacing: `${value} var(--border-spacing-y)`
1638
- };
1639
- }
1640
- },
1641
- borderSpacingY: {
1642
- className: "border-spacing-y",
1643
- values: "spacing",
1644
- transform(value) {
1645
- return {
1646
- borderSpacing: `var(--border-spacing-x) ${value}`
1647
- };
1648
- }
1649
- },
1650
- tableLayout: {
1651
- className: "table"
1652
- }
1653
- };
1654
-
1655
- // src/utilities/transforms.ts
1656
- var transforms = {
1657
- transformOrigin: {
1658
- className: "origin"
1659
- },
1660
- scale: {
1661
- className: "scale",
1662
- property: "scale",
1663
- values: {
1664
- auto: "var(--scale-x) var(--scale-y)"
1665
- }
1666
- },
1667
- scaleX: {
1668
- className: "scale-x",
1669
- transform(value) {
1670
- return {
1671
- "--scale-x": value
1672
- };
1673
- }
1674
- },
1675
- scaleY: {
1676
- className: "scale-y",
1677
- transform(value) {
1678
- return {
1679
- "--scale-y": value
1680
- };
1681
- }
1682
- },
1683
- translate: {
1684
- className: "translate",
1685
- property: "translate",
1686
- values: {
1687
- auto: "var(--translate-x) var(--translate-y)"
1688
- }
1689
- },
1690
- translateX: {
1691
- shorthand: "x",
1692
- className: "translate-x",
1693
- values(theme) {
1694
- return {
1695
- ...theme("spacing"),
1696
- "1/2": "50%",
1697
- "1/3": "33.333333%",
1698
- "2/3": "66.666667%",
1699
- "1/4": "25%",
1700
- "2/4": "50%",
1701
- "3/4": "75%",
1702
- full: "100%"
1703
- };
1704
- },
1705
- transform(value) {
1706
- return {
1707
- "--translate-x": value
1708
- };
1709
- }
1710
- },
1711
- translateY: {
1712
- shorthand: "y",
1713
- className: "translate-y",
1714
- values(theme) {
1715
- return {
1716
- ...theme("spacing"),
1717
- "1/2": "50%",
1718
- "1/3": "33.333333%",
1719
- "2/3": "66.666667%",
1720
- "1/4": "25%",
1721
- "2/4": "50%",
1722
- "3/4": "75%",
1723
- full: "100%"
1724
- };
1725
- },
1726
- transform(value) {
1727
- return {
1728
- "--translate-y": value
1729
- };
1730
- }
1731
- }
1732
- };
1733
-
1734
- // src/utilities/transitions.ts
1735
- var transitions = {
1736
- transitionTimingFunction: {
1737
- className: "ease",
1738
- values: "easings"
1739
- },
1740
- transitionDelay: {
1741
- className: "delay",
1742
- values: "durations"
1743
- },
1744
- transitionDuration: {
1745
- className: "duration",
1746
- values: "durations"
1747
- },
1748
- transitionProperty: {
1749
- className: "transition",
1750
- values: {
1751
- all: "all",
1752
- none: "none",
1753
- opacity: "opacity",
1754
- shadow: "box-shadow",
1755
- transform: "transform",
1756
- base: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
1757
- background: "background, background-color",
1758
- colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"
1759
- }
1760
- },
1761
- animation: {
1762
- className: "animation",
1763
- values: "animations"
1764
- },
1765
- animationDelay: {
1766
- className: "animation-delay",
1767
- values: "durations"
1768
- }
1769
- };
1770
-
1771
- // src/utilities/typography.ts
1772
- var typography = {
1773
- color: {
1774
- className: "text",
1775
- values: "colors"
1776
- },
1777
- fontFamily: {
1778
- className: "font",
1779
- values: "fonts"
1780
- },
1781
- fontSize: {
1782
- className: "fs",
1783
- values: "fontSizes"
1784
- },
1785
- fontWeight: {
1786
- className: "font",
1787
- values: "fontWeights"
1788
- },
1789
- fontSmoothing: {
1790
- className: "smoothing",
1791
- values: {
1792
- antialiased: "antialiased",
1793
- "subpixel-antialiased": "auto"
1794
- },
1795
- transform(value) {
1796
- return {
1797
- WebkitFontSmoothing: value
1798
- };
1799
- }
1800
- },
1801
- fontVariantNumeric: {
1802
- className: "numeric"
1803
- },
1804
- letterSpacing: {
1805
- className: "tracking",
1806
- values: "letterSpacings"
1807
- },
1808
- lineHeight: {
1809
- className: "leading",
1810
- values: "lineHeights"
1811
- },
1812
- textAlign: {
1813
- className: "text"
1814
- },
1815
- textDecoration: {
1816
- className: "text-decor"
1817
- },
1818
- textDecorationColor: {
1819
- className: "text-decor",
1820
- values: "colors"
1821
- },
1822
- textEmphasisColor: {
1823
- className: "text-emphasis",
1824
- values: "colors"
1825
- },
1826
- textDecorationStyle: {
1827
- className: "decoration"
1828
- },
1829
- textDecorationThickness: {
1830
- className: "decoration"
1831
- },
1832
- textUnderlineOffset: {
1833
- className: "underline-offset"
1834
- },
1835
- textTransform: {
1836
- className: "text"
1837
- },
1838
- textIndent: {
1839
- className: "indent",
1840
- values: "spacing"
1841
- },
1842
- textShadow: {
1843
- className: "text-shadow",
1844
- values: "shadows"
1845
- },
1846
- textOverflow: {
1847
- className: "text"
1848
- },
1849
- verticalAlign: {
1850
- className: "align"
1851
- },
1852
- wordBreak: {
1853
- className: "break"
1854
- },
1855
- textWrap: {
1856
- className: "text",
1857
- values: ["wrap", "balance", "nowrap"],
1858
- transform(value) {
1859
- return { textWrap: value };
1860
- }
1861
- },
1862
- truncate: {
1863
- className: "truncate",
1864
- values: { type: "boolean" },
1865
- transform(value) {
1866
- if (!value)
1867
- return {};
1868
- return {
1869
- overflow: "hidden",
1870
- textOverflow: "ellipsis",
1871
- whiteSpace: "nowrap"
1872
- };
1873
- }
1874
- },
1875
- lineClamp: {
1876
- className: "clamp",
1877
- transform(value) {
1878
- if (value === "none") {
1879
- return {
1880
- WebkitLineClamp: "unset"
1881
- };
1882
- }
1883
- return {
1884
- overflow: "hidden",
1885
- display: "-webkit-box",
1886
- WebkitLineClamp: value,
1887
- WebkitBoxOrient: "vertical"
1888
- };
1889
- }
1890
- }
1891
- };
1892
-
1893
- // src/utilities/index.ts
1894
- var utilities = Object.assign(
1895
- {},
1896
- layout,
1897
- display,
1898
- flexGrid,
1899
- spacing,
1900
- outline,
1901
- divide,
1902
- sizing,
1903
- typography,
1904
- list,
1905
- background,
1906
- border,
1907
- effects,
1908
- tables,
1909
- transitions,
1910
- transforms,
1911
- interactivity,
1912
- svg,
1913
- helpers
1914
- );
1915
-
1916
- // src/patterns.ts
1917
- function definePattern(config) {
1918
- return config;
1919
- }
1920
- var box = definePattern({
1921
- properties: {},
1922
- transform(props) {
1923
- return props;
1924
- }
1925
- });
1926
- var flex = definePattern({
1927
- properties: {
1928
- align: { type: "property", value: "alignItems" },
1929
- justify: { type: "property", value: "justifyContent" },
1930
- direction: { type: "property", value: "flexDirection" },
1931
- wrap: { type: "property", value: "flexWrap" },
1932
- basis: { type: "property", value: "flexBasis" },
1933
- grow: { type: "property", value: "flexGrow" },
1934
- shrink: { type: "property", value: "flexShrink" }
1935
- },
1936
- transform(props) {
1937
- const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
1938
- return {
1939
- display: "flex",
1940
- flexDirection: direction,
1941
- alignItems: align,
1942
- justifyContent: justify,
1943
- flexWrap: wrap2,
1944
- flexBasis: basis,
1945
- flexGrow: grow,
1946
- flexShrink: shrink,
1947
- ...rest
1948
- };
1949
- }
1950
- });
1951
- var stack = definePattern({
1952
- properties: {
1953
- align: { type: "property", value: "alignItems" },
1954
- justify: { type: "property", value: "justifyContent" },
1955
- direction: { type: "property", value: "flexDirection" },
1956
- gap: { type: "property", value: "gap" }
1957
- },
1958
- transform(props) {
1959
- const { align, justify, direction = "column", gap = "10px", ...rest } = props;
1960
- return {
1961
- display: "flex",
1962
- flexDirection: direction,
1963
- alignItems: align,
1964
- justifyContent: justify,
1965
- gap,
1966
- ...rest
1967
- };
1968
- }
1969
- });
1970
- var vstack = definePattern({
1971
- jsx: "VStack",
1972
- properties: {
1973
- justify: { type: "property", value: "justifyContent" },
1974
- gap: { type: "property", value: "gap" }
1975
- },
1976
- transform(props) {
1977
- const { justify, gap = "10px", ...rest } = props;
1978
- return {
1979
- display: "flex",
1980
- alignItems: "center",
1981
- justifyContent: justify,
1982
- gap,
1983
- flexDirection: "column",
1984
- ...rest
1985
- };
1986
- }
1987
- });
1988
- var hstack = definePattern({
1989
- jsx: "HStack",
1990
- properties: {
1991
- justify: { type: "property", value: "justifyContent" },
1992
- gap: { type: "property", value: "gap" }
1993
- },
1994
- transform(props) {
1995
- const { justify, gap = "10px", ...rest } = props;
1996
- return {
1997
- display: "flex",
1998
- alignItems: "center",
1999
- justifyContent: justify,
2000
- gap,
2001
- flexDirection: "row",
2002
- ...rest
2003
- };
2004
- }
2005
- });
2006
- var spacer = definePattern({
2007
- properties: {
2008
- size: { type: "token", value: "spacing" }
2009
- },
2010
- transform(props, { map }) {
2011
- const { size, ...rest } = props;
2012
- return {
2013
- alignSelf: "stretch",
2014
- justifySelf: "stretch",
2015
- flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
2016
- ...rest
2017
- };
2018
- }
2019
- });
2020
- var circle = definePattern({
2021
- properties: {
2022
- size: { type: "property", value: "width" }
2023
- },
2024
- transform(props) {
2025
- const { size, ...rest } = props;
2026
- return {
2027
- display: "flex",
2028
- alignItems: "center",
2029
- justifyContent: "center",
2030
- flex: "0 0 auto",
2031
- width: size,
2032
- height: size,
2033
- borderRadius: "9999px",
2034
- ...rest
2035
- };
2036
- }
2037
- });
2038
- var square = definePattern({
2039
- properties: {
2040
- size: { type: "property", value: "width" }
2041
- },
2042
- transform(props) {
2043
- const { size, ...rest } = props;
2044
- return {
2045
- display: "flex",
2046
- alignItems: "center",
2047
- justifyContent: "center",
2048
- flex: "0 0 auto",
2049
- width: size,
2050
- height: size,
2051
- ...rest
2052
- };
2053
- }
2054
- });
2055
- var grid = definePattern({
2056
- properties: {
2057
- gap: { type: "property", value: "gap" },
2058
- columnGap: { type: "property", value: "gap" },
2059
- rowGap: { type: "property", value: "gap" },
2060
- columns: { type: "number" },
2061
- minChildWidth: { type: "token", value: "sizes", property: "width" }
2062
- },
2063
- transform(props, { map }) {
2064
- const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
2065
- return {
2066
- display: "grid",
2067
- gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0,
2068
- gap,
2069
- columnGap,
2070
- rowGap,
2071
- ...rest
2072
- };
2073
- }
2074
- });
2075
- var gridItem = definePattern({
2076
- properties: {
2077
- colSpan: { type: "number" },
2078
- rowSpan: { type: "number" },
2079
- colStart: { type: "number" },
2080
- rowStart: { type: "number" },
2081
- colEnd: { type: "number" },
2082
- rowEnd: { type: "number" }
2083
- },
2084
- transform(props, { map }) {
2085
- const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
2086
- const spanFn = (v) => v === "auto" ? v : `span ${v}`;
2087
- return {
2088
- gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
2089
- gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
2090
- gridColumnEnd: colEnd,
2091
- gridRowEnd: rowEnd,
2092
- ...rest
2093
- };
2094
- }
2095
- });
2096
- var wrap = definePattern({
2097
- properties: {
2098
- gap: { type: "property", value: "gap" },
2099
- rowGap: { type: "property", value: "gap" },
2100
- columnGap: { type: "property", value: "gap" },
2101
- align: { type: "property", value: "alignItems" },
2102
- justify: { type: "property", value: "justifyContent" }
2103
- },
2104
- transform(props) {
2105
- const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
2106
- return {
2107
- display: "flex",
2108
- flexWrap: "wrap",
2109
- alignItems: align,
2110
- justifyContent: justify,
2111
- gap,
2112
- columnGap,
2113
- rowGap,
2114
- ...rest
2115
- };
2116
- }
2117
- });
2118
- var container = definePattern({
2119
- properties: {},
2120
- transform(props) {
2121
- return {
2122
- position: "relative",
2123
- maxWidth: "8xl",
2124
- mx: "auto",
2125
- px: { base: "4", md: "6", lg: "8" },
2126
- ...props
2127
- };
2128
- }
2129
- });
2130
- var center = definePattern({
2131
- properties: {
2132
- inline: { type: "boolean" }
2133
- },
2134
- transform(props) {
2135
- const { inline, ...rest } = props;
2136
- return {
2137
- display: inline ? "inline-flex" : "flex",
2138
- alignItems: "center",
2139
- justifyContent: "center",
2140
- ...rest
2141
- };
2142
- }
2143
- });
2144
- var aspectRatio = definePattern({
2145
- properties: {
2146
- ratio: { type: "number" }
2147
- },
2148
- blocklist: ["aspectRatio"],
2149
- transform(props) {
2150
- const { ratio, ...rest } = props;
2151
- return {
2152
- aspectRatio: ratio,
2153
- overflow: "hidden",
2154
- display: "flex",
2155
- justifyContent: "center",
2156
- alignItems: "center",
2157
- "&>img, &>video": {
2158
- width: "100%",
2159
- height: "100%",
2160
- objectFit: "cover"
2161
- },
2162
- ...rest
2163
- };
2164
- }
2165
- });
2166
- var divider = definePattern({
2167
- properties: {
2168
- orientation: { type: "enum", value: ["horizontal", "vertical"] },
2169
- thickness: { type: "token", value: "sizes", property: "borderWidth" },
2170
- color: { type: "token", value: "colors", property: "borderColor" }
2171
- },
2172
- transform(props, { map }) {
2173
- const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
2174
- return {
2175
- "--thickness": thickness,
2176
- width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
2177
- height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
2178
- borderInlineStartWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
2179
- borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
2180
- borderColor: color,
2181
- ...rest
2182
- };
2183
- }
2184
- });
2185
- var linkBox = definePattern({
2186
- properties: {},
2187
- transform(props) {
2188
- return {
2189
- position: "relative",
2190
- "& :where(a, abbr)": {
2191
- position: "relative",
2192
- zIndex: "1"
2193
- },
2194
- ...props
2195
- };
2196
- }
2197
- });
2198
- var linkOverlay = definePattern({
2199
- jsxElement: "a",
2200
- properties: {},
2201
- transform(props) {
2202
- return {
2203
- position: "static",
2204
- _before: {
2205
- content: '""',
2206
- display: "block",
2207
- position: "absolute",
2208
- cursor: "inherit",
2209
- inset: "0",
2210
- zIndex: "0",
2211
- ...props["_before"]
2212
- },
2213
- ...props
2214
- };
2215
- }
2216
- });
2217
- var float = definePattern({
2218
- properties: {
2219
- offsetX: { type: "token", value: "spacing", property: "left" },
2220
- offsetY: { type: "token", value: "spacing", property: "top" },
2221
- offset: { type: "token", value: "spacing", property: "top" },
2222
- placement: {
2223
- type: "enum",
2224
- value: [
2225
- "bottom-end",
2226
- "bottom-start",
2227
- "top-end",
2228
- "top-start",
2229
- "bottom-center",
2230
- "top-center",
2231
- "middle-center",
2232
- "middle-end",
2233
- "middle-start"
2234
- ]
2235
- }
2236
- },
2237
- transform(props, { map }) {
2238
- const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
2239
- return {
2240
- display: "inline-flex",
2241
- justifyContent: "center",
2242
- alignItems: "center",
2243
- position: "absolute",
2244
- insetBlockStart: map(placement, (v) => {
2245
- const [side] = v.split("-");
2246
- const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
2247
- return map2[side];
2248
- }),
2249
- insetBlockEnd: map(placement, (v) => {
2250
- const [side] = v.split("-");
2251
- const map2 = { top: "auto", middle: "50%", bottom: offsetY };
2252
- return map2[side];
2253
- }),
2254
- insetInlineStart: map(placement, (v) => {
2255
- const [, align] = v.split("-");
2256
- const map2 = { start: offsetX, center: "50%", end: "auto" };
2257
- return map2[align];
2258
- }),
2259
- insetInlineEnd: map(placement, (v) => {
2260
- const [, align] = v.split("-");
2261
- const map2 = { start: "auto", center: "50%", end: offsetX };
2262
- return map2[align];
2263
- }),
2264
- translate: map(placement, (v) => {
2265
- const [side, align] = v.split("-");
2266
- const mapX = { start: "-50%", center: "-50%", end: "50%" };
2267
- const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
2268
- return `${mapX[align]} ${mapY[side]}`;
2269
- }),
2270
- ...rest
2271
- };
2272
- }
2273
- });
2274
- var patterns = {
2275
- box,
2276
- flex,
2277
- stack,
2278
- vstack,
2279
- hstack,
2280
- spacer,
2281
- square,
2282
- circle,
2283
- center,
2284
- linkBox,
2285
- linkOverlay,
2286
- aspectRatio,
2287
- grid,
2288
- gridItem,
2289
- wrap,
2290
- container,
2291
- divider,
2292
- float
2293
- };
2294
-
2295
- // src/index.ts
2296
- var definePreset = (preset2) => preset2;
2297
- var preset = definePreset({
2298
- conditions,
2299
- utilities,
2300
- patterns
2301
- });
2302
- var src_default = preset;
2303
- // Annotate the CommonJS export names for ESM import in node:
2304
- 0 && (module.exports = {
2305
- preset
2306
- });