@pandacss/preset-base 2.1.0 → 2.1.2

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.mjs DELETED
@@ -1,3583 +0,0 @@
1
- // src/conditions.ts
2
- var conditions = {
3
- hover: "&:is(:hover, [data-hover])",
4
- focus: "&:is(:focus, [data-focus])",
5
- focusWithin: "&:focus-within",
6
- focusVisible: "&:is(:focus-visible, [data-focus-visible])",
7
- disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
8
- active: "&:is(:active, [data-active])",
9
- visited: "&:visited",
10
- target: "&:target",
11
- readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
12
- readWrite: "&:read-write",
13
- empty: "&:is(:empty, [data-empty])",
14
- checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
15
- enabled: "&:enabled",
16
- expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
17
- highlighted: "&[data-highlighted]",
18
- complete: "&[data-complete]",
19
- incomplete: "&[data-incomplete]",
20
- dragging: "&[data-dragging]",
21
- before: "&::before",
22
- after: "&::after",
23
- firstLetter: "&::first-letter",
24
- firstLine: "&::first-line",
25
- marker: "&::marker, &::-webkit-details-marker",
26
- selection: "&::selection",
27
- file: "&::file-selector-button",
28
- backdrop: "&::backdrop",
29
- first: "&:first-child",
30
- last: "&:last-child",
31
- only: "&:only-child",
32
- even: "&:nth-child(even)",
33
- odd: "&:nth-child(odd)",
34
- firstOfType: "&:first-of-type",
35
- lastOfType: "&:last-of-type",
36
- onlyOfType: "&:only-of-type",
37
- peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
38
- peerHover: ".peer:is(:hover, [data-hover]) ~ &",
39
- peerActive: ".peer:is(:active, [data-active]) ~ &",
40
- peerFocusWithin: ".peer:focus-within ~ &",
41
- peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
42
- peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
43
- peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
44
- peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
45
- peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
46
- peerPlaceholderShown: ".peer:placeholder-shown ~ &",
47
- groupFocus: ".group:is(:focus, [data-focus]) &",
48
- groupHover: ".group:is(:hover, [data-hover]) &",
49
- groupActive: ".group:is(:active, [data-active]) &",
50
- groupFocusWithin: ".group:focus-within &",
51
- groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
52
- groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
53
- groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
54
- groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
55
- groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
56
- indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
57
- required: "&:is(:required, [data-required], [aria-required=true])",
58
- valid: "&:is(:valid, [data-valid])",
59
- invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
60
- userValid: "&:is(:user-valid, [data-user-valid])",
61
- userInvalid: "&:is(:user-invalid, [data-user-invalid])",
62
- autofill: "&:autofill",
63
- inRange: "&:is(:in-range, [data-in-range])",
64
- outOfRange: "&:is(:out-of-range, [data-outside-range])",
65
- placeholder: "&::placeholder, &[data-placeholder]",
66
- placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
67
- pressed: "&:is([aria-pressed=true], [data-pressed])",
68
- selected: "&:is([aria-selected=true], [data-selected])",
69
- grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
70
- underValue: "&[data-state=under-value]",
71
- overValue: "&[data-state=over-value]",
72
- atValue: "&[data-state=at-value]",
73
- default: "&:default",
74
- optional: "&:optional",
75
- open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
76
- closed: '&:is([closed], [data-closed], [data-state="closed"])',
77
- fullscreen: "&:is(:fullscreen, [data-fullscreen])",
78
- loading: "&:is([data-loading], [aria-busy=true])",
79
- hidden: "&:is([hidden], [data-hidden])",
80
- inert: "&:is([inert], [data-inert])",
81
- current: "&:is([aria-current=true], [data-current])",
82
- currentPage: "&[aria-current=page]",
83
- currentStep: "&[aria-current=step]",
84
- today: "&[data-today]",
85
- unavailable: "&[data-unavailable]",
86
- rangeStart: "&[data-range-start]",
87
- rangeEnd: "&[data-range-end]",
88
- now: "&[data-now]",
89
- topmost: "&[data-topmost]",
90
- motionReduce: "@media (prefers-reduced-motion: reduce)",
91
- motionSafe: "@media (prefers-reduced-motion: no-preference)",
92
- print: "@media print",
93
- landscape: "@media (orientation: landscape)",
94
- portrait: "@media (orientation: portrait)",
95
- dark: ".dark &",
96
- light: ".light &",
97
- osDark: "@media (prefers-color-scheme: dark)",
98
- osLight: "@media (prefers-color-scheme: light)",
99
- highContrast: "@media (forced-colors: active)",
100
- lessContrast: "@media (prefers-contrast: less)",
101
- moreContrast: "@media (prefers-contrast: more)",
102
- ltr: ":where([dir=ltr], :dir(ltr)) &",
103
- rtl: ":where([dir=rtl], :dir(rtl)) &",
104
- scrollbar: "&::-webkit-scrollbar",
105
- scrollbarThumb: "&::-webkit-scrollbar-thumb",
106
- scrollbarTrack: "&::-webkit-scrollbar-track",
107
- horizontal: "&[data-orientation=horizontal]",
108
- vertical: "&[data-orientation=vertical]",
109
- icon: "& :where(svg)",
110
- starting: "@starting-style",
111
- noscript: "@media (scripting: none)",
112
- invertedColors: "@media (inverted-colors: inverted)",
113
- pointerFine: "@media (pointer: fine)",
114
- pointerCoarse: "@media (pointer: coarse)",
115
- pointerNone: "@media (pointer: none)",
116
- anyPointerFine: "@media (any-pointer: fine)",
117
- anyPointerCoarse: "@media (any-pointer: coarse)",
118
- anyPointerNone: "@media (any-pointer: none)"
119
- };
120
-
121
- // src/patterns.ts
122
- function definePattern(config) {
123
- return config;
124
- }
125
- var box = definePattern({
126
- transform(props) {
127
- return props;
128
- }
129
- });
130
- var flex = definePattern({
131
- properties: {
132
- align: { type: "property", value: "alignItems" },
133
- justify: { type: "property", value: "justifyContent" },
134
- direction: { type: "property", value: "flexDirection" },
135
- wrap: { type: "property", value: "flexWrap" },
136
- basis: { type: "property", value: "flexBasis" },
137
- grow: { type: "property", value: "flexGrow" },
138
- shrink: { type: "property", value: "flexShrink" }
139
- },
140
- transform(props) {
141
- const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
142
- return {
143
- display: "flex",
144
- flexDirection: direction,
145
- alignItems: align,
146
- justifyContent: justify,
147
- flexWrap: wrap2,
148
- flexBasis: basis,
149
- flexGrow: grow,
150
- flexShrink: shrink,
151
- ...rest
152
- };
153
- }
154
- });
155
- var stack = definePattern({
156
- properties: {
157
- align: { type: "property", value: "alignItems" },
158
- justify: { type: "property", value: "justifyContent" },
159
- direction: { type: "property", value: "flexDirection" },
160
- gap: { type: "property", value: "gap" }
161
- },
162
- defaultValues: {
163
- direction: "column",
164
- gap: "8px"
165
- },
166
- transform(props) {
167
- const { align, justify, direction, gap, ...rest } = props;
168
- return {
169
- display: "flex",
170
- flexDirection: direction,
171
- alignItems: align,
172
- justifyContent: justify,
173
- gap,
174
- ...rest
175
- };
176
- }
177
- });
178
- var vstack = definePattern({
179
- jsxName: "VStack",
180
- properties: {
181
- justify: { type: "property", value: "justifyContent" },
182
- gap: { type: "property", value: "gap" }
183
- },
184
- defaultValues: {
185
- gap: "8px"
186
- },
187
- transform(props) {
188
- const { justify, gap, ...rest } = props;
189
- return {
190
- display: "flex",
191
- alignItems: "center",
192
- justifyContent: justify,
193
- gap,
194
- flexDirection: "column",
195
- ...rest
196
- };
197
- }
198
- });
199
- var hstack = definePattern({
200
- jsxName: "HStack",
201
- properties: {
202
- justify: { type: "property", value: "justifyContent" },
203
- gap: { type: "property", value: "gap" }
204
- },
205
- defaultValues: {
206
- gap: "8px"
207
- },
208
- transform(props) {
209
- const { justify, gap, ...rest } = props;
210
- return {
211
- display: "flex",
212
- alignItems: "center",
213
- justifyContent: justify,
214
- gap,
215
- flexDirection: "row",
216
- ...rest
217
- };
218
- }
219
- });
220
- var spacer = definePattern({
221
- properties: {
222
- size: { type: "token", value: "spacing" }
223
- },
224
- transform(props, { map, isCssUnit, isCssVar }) {
225
- const { size, ...rest } = props;
226
- return {
227
- alignSelf: "stretch",
228
- justifySelf: "stretch",
229
- flex: map(size, (v) => {
230
- if (v == null) return "1";
231
- const val = isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
232
- return `0 0 ${val}`;
233
- }),
234
- ...rest
235
- };
236
- }
237
- });
238
- var circle = definePattern({
239
- properties: {
240
- size: { type: "property", value: "width" }
241
- },
242
- transform(props) {
243
- const { size, ...rest } = props;
244
- return {
245
- display: "flex",
246
- alignItems: "center",
247
- justifyContent: "center",
248
- flex: "0 0 auto",
249
- width: size,
250
- height: size,
251
- borderRadius: "9999px",
252
- ...rest
253
- };
254
- }
255
- });
256
- var square = definePattern({
257
- properties: {
258
- size: { type: "property", value: "width" }
259
- },
260
- transform(props) {
261
- const { size, ...rest } = props;
262
- return {
263
- display: "flex",
264
- alignItems: "center",
265
- justifyContent: "center",
266
- flex: "0 0 auto",
267
- width: size,
268
- height: size,
269
- ...rest
270
- };
271
- }
272
- });
273
- var grid = definePattern({
274
- properties: {
275
- gap: { type: "property", value: "gap" },
276
- columnGap: { type: "property", value: "gap" },
277
- rowGap: { type: "property", value: "gap" },
278
- columns: { type: "number" },
279
- minChildWidth: { type: "token", value: "sizes", property: "width" }
280
- },
281
- defaultValues(props) {
282
- return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
283
- },
284
- transform(props, { map, isCssUnit }) {
285
- const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
286
- const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
287
- return {
288
- display: "grid",
289
- gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
290
- gap,
291
- columnGap,
292
- rowGap,
293
- ...rest
294
- };
295
- }
296
- });
297
- var gridItem = definePattern({
298
- properties: {
299
- colSpan: { type: "number" },
300
- rowSpan: { type: "number" },
301
- colStart: { type: "number" },
302
- rowStart: { type: "number" },
303
- colEnd: { type: "number" },
304
- rowEnd: { type: "number" }
305
- },
306
- transform(props, { map }) {
307
- const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
308
- const spanFn = (v) => v === "auto" ? v : `span ${v}`;
309
- return {
310
- gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
311
- gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
312
- gridColumnStart: colStart,
313
- gridColumnEnd: colEnd,
314
- gridRowStart: rowStart,
315
- gridRowEnd: rowEnd,
316
- ...rest
317
- };
318
- }
319
- });
320
- var wrap = definePattern({
321
- properties: {
322
- gap: { type: "property", value: "gap" },
323
- rowGap: { type: "property", value: "gap" },
324
- columnGap: { type: "property", value: "gap" },
325
- align: { type: "property", value: "alignItems" },
326
- justify: { type: "property", value: "justifyContent" }
327
- },
328
- transform(props) {
329
- const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
330
- return {
331
- display: "flex",
332
- flexWrap: "wrap",
333
- alignItems: align,
334
- justifyContent: justify,
335
- gap,
336
- columnGap,
337
- rowGap,
338
- ...rest
339
- };
340
- }
341
- });
342
- var container = definePattern({
343
- transform(props) {
344
- return {
345
- position: "relative",
346
- maxWidth: "8xl",
347
- mx: "auto",
348
- px: { base: "4", md: "6", lg: "8" },
349
- ...props
350
- };
351
- }
352
- });
353
- var center = definePattern({
354
- properties: {
355
- inline: { type: "boolean" }
356
- },
357
- transform(props) {
358
- const { inline, ...rest } = props;
359
- return {
360
- display: inline ? "inline-flex" : "flex",
361
- alignItems: "center",
362
- justifyContent: "center",
363
- ...rest
364
- };
365
- }
366
- });
367
- var aspectRatio = definePattern({
368
- properties: {
369
- ratio: { type: "number" }
370
- },
371
- blocklist: ["aspectRatio"],
372
- transform(props, { map }) {
373
- const { ratio = 4 / 3, ...rest } = props;
374
- return {
375
- position: "relative",
376
- _before: {
377
- content: `""`,
378
- display: "block",
379
- height: "0",
380
- paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
381
- },
382
- "&>*": {
383
- display: "flex",
384
- justifyContent: "center",
385
- alignItems: "center",
386
- overflow: "hidden",
387
- position: "absolute",
388
- inset: "0",
389
- width: "100%",
390
- height: "100%"
391
- },
392
- "&>img, &>video": {
393
- objectFit: "cover"
394
- },
395
- ...rest
396
- };
397
- }
398
- });
399
- var divider = definePattern({
400
- properties: {
401
- orientation: { type: "enum", value: ["horizontal", "vertical"] },
402
- thickness: { type: "token", value: "sizes", property: "borderWidth" },
403
- color: { type: "token", value: "colors", property: "borderColor" }
404
- },
405
- defaultValues: {
406
- orientation: "horizontal",
407
- thickness: "1px"
408
- },
409
- transform(props, { map }) {
410
- const { orientation, thickness, color: color2, ...rest } = props;
411
- return {
412
- "--thickness": thickness,
413
- width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
414
- height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
415
- borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
416
- borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
417
- borderColor: color2,
418
- ...rest
419
- };
420
- }
421
- });
422
- var linkOverlay = definePattern({
423
- jsxElement: "a",
424
- transform(props) {
425
- return {
426
- _before: {
427
- content: '""',
428
- position: "absolute",
429
- inset: "0",
430
- zIndex: "0",
431
- ...props["_before"]
432
- },
433
- ...props
434
- };
435
- }
436
- });
437
- var float = definePattern({
438
- properties: {
439
- offsetX: { type: "token", value: "spacing", property: "left" },
440
- offsetY: { type: "token", value: "spacing", property: "top" },
441
- offset: { type: "token", value: "spacing", property: "top" },
442
- placement: {
443
- type: "enum",
444
- value: [
445
- "bottom-end",
446
- "bottom-start",
447
- "top-end",
448
- "top-start",
449
- "bottom-center",
450
- "top-center",
451
- "middle-center",
452
- "middle-end",
453
- "middle-start"
454
- ]
455
- }
456
- },
457
- defaultValues(props) {
458
- const offset = props.offset || "0";
459
- return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
460
- },
461
- transform(props, { map }) {
462
- const { offset, offsetX, offsetY, placement, ...rest } = props;
463
- return {
464
- display: "inline-flex",
465
- justifyContent: "center",
466
- alignItems: "center",
467
- position: "absolute",
468
- insetBlockStart: map(placement, (v) => {
469
- const [side] = v.split("-");
470
- const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
471
- return map2[side];
472
- }),
473
- insetBlockEnd: map(placement, (v) => {
474
- const [side] = v.split("-");
475
- const map2 = { top: "auto", middle: "50%", bottom: offsetY };
476
- return map2[side];
477
- }),
478
- insetInlineStart: map(placement, (v) => {
479
- const [, align] = v.split("-");
480
- const map2 = { start: offsetX, center: "50%", end: "auto" };
481
- return map2[align];
482
- }),
483
- insetInlineEnd: map(placement, (v) => {
484
- const [, align] = v.split("-");
485
- const map2 = { start: "auto", center: "50%", end: offsetX };
486
- return map2[align];
487
- }),
488
- translate: map(placement, (v) => {
489
- const [side, align] = v.split("-");
490
- const mapX = { start: "-50%", center: "-50%", end: "50%" };
491
- const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
492
- return `${mapX[align]} ${mapY[side]}`;
493
- }),
494
- ...rest
495
- };
496
- }
497
- });
498
- var bleed = definePattern({
499
- properties: {
500
- inline: { type: "property", value: "marginInline" },
501
- block: { type: "property", value: "marginBlock" }
502
- },
503
- defaultValues: {
504
- inline: "0",
505
- block: "0"
506
- },
507
- transform(props, { map, isCssUnit, isCssVar }) {
508
- const { inline, block, ...rest } = props;
509
- const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
510
- return {
511
- "--bleed-x": map(inline, valueFn),
512
- "--bleed-y": map(block, valueFn),
513
- marginInline: "calc(var(--bleed-x, 0) * -1)",
514
- marginBlock: "calc(var(--bleed-y, 0) * -1)",
515
- ...rest
516
- };
517
- }
518
- });
519
- var visuallyHidden = definePattern({
520
- transform(props) {
521
- return {
522
- srOnly: true,
523
- ...props
524
- };
525
- }
526
- });
527
- var cq = definePattern({
528
- properties: {
529
- name: { type: "token", value: "containerNames", property: "containerName" },
530
- type: { type: "property", value: "containerType" }
531
- },
532
- defaultValues: {
533
- type: "inline-size"
534
- },
535
- transform(props) {
536
- const { name, type, ...rest } = props;
537
- return {
538
- containerType: type,
539
- containerName: name,
540
- ...rest
541
- };
542
- }
543
- });
544
- var patterns = {
545
- box,
546
- flex,
547
- stack,
548
- vstack,
549
- hstack,
550
- spacer,
551
- square,
552
- circle,
553
- center,
554
- linkOverlay,
555
- aspectRatio,
556
- grid,
557
- gridItem,
558
- wrap,
559
- container,
560
- divider,
561
- float,
562
- bleed,
563
- visuallyHidden,
564
- cq
565
- };
566
-
567
- // src/color-mix-transform.ts
568
- var createColorMixTransform = (prop) => {
569
- return (value, args) => {
570
- const mix = args.utils.colorMix(value);
571
- if (mix.invalid) return { [prop]: value };
572
- return { [prop]: mix.value };
573
- };
574
- };
575
-
576
- // src/utilities/background.ts
577
- var background = {
578
- backgroundPosition: {
579
- shorthand: "bgPosition",
580
- className: "bg-p",
581
- group: "Background"
582
- },
583
- backgroundPositionX: {
584
- shorthand: "bgPositionX",
585
- className: "bg-p-x",
586
- group: "Background"
587
- },
588
- backgroundPositionY: {
589
- shorthand: "bgPositionY",
590
- className: "bg-p-y",
591
- group: "Background"
592
- },
593
- backgroundAttachment: {
594
- shorthand: "bgAttachment",
595
- className: "bg-a",
596
- group: "Background"
597
- },
598
- backgroundClip: {
599
- shorthand: "bgClip",
600
- className: "bg-cp",
601
- group: "Background",
602
- transform(value) {
603
- return {
604
- WebkitBackgroundClip: value,
605
- backgroundClip: value
606
- };
607
- }
608
- },
609
- background: {
610
- shorthand: "bg",
611
- className: "bg",
612
- values: "colors",
613
- group: "Background",
614
- transform: createColorMixTransform("background")
615
- },
616
- backgroundColor: {
617
- shorthand: "bgColor",
618
- className: "bg-c",
619
- values: "colors",
620
- group: "Background",
621
- transform: createColorMixTransform("backgroundColor")
622
- },
623
- backgroundOrigin: {
624
- shorthand: "bgOrigin",
625
- className: "bg-o",
626
- group: "Background"
627
- },
628
- backgroundImage: {
629
- shorthand: "bgImage",
630
- className: "bg-i",
631
- values: "assets",
632
- group: "Background"
633
- },
634
- backgroundRepeat: {
635
- shorthand: "bgRepeat",
636
- className: "bg-r",
637
- group: "Background"
638
- },
639
- backgroundBlendMode: {
640
- shorthand: "bgBlendMode",
641
- className: "bg-bm",
642
- group: "Background"
643
- },
644
- backgroundSize: {
645
- shorthand: "bgSize",
646
- className: "bg-s",
647
- group: "Background"
648
- }
649
- };
650
-
651
- // src/utilities/border.ts
652
- var border = {
653
- // Border Radius
654
- borderRadius: {
655
- className: "bdr",
656
- shorthand: "rounded",
657
- values: "radii",
658
- group: "Border Radius"
659
- },
660
- borderTopLeftRadius: {
661
- className: "bdr-tl",
662
- shorthand: "roundedTopLeft",
663
- values: "radii",
664
- group: "Border Radius"
665
- },
666
- borderTopRightRadius: {
667
- className: "bdr-tr",
668
- shorthand: "roundedTopRight",
669
- values: "radii",
670
- group: "Border Radius"
671
- },
672
- borderBottomRightRadius: {
673
- className: "bdr-br",
674
- shorthand: "roundedBottomRight",
675
- values: "radii",
676
- group: "Border Radius"
677
- },
678
- borderBottomLeftRadius: {
679
- className: "bdr-bl",
680
- shorthand: "roundedBottomLeft",
681
- values: "radii",
682
- group: "Border Radius"
683
- },
684
- borderTopRadius: {
685
- className: "bdr-t",
686
- shorthand: "roundedTop",
687
- property: "borderRadius",
688
- values: "radii",
689
- group: "Border Radius",
690
- transform(value) {
691
- return {
692
- borderTopLeftRadius: value,
693
- borderTopRightRadius: value
694
- };
695
- }
696
- },
697
- borderRightRadius: {
698
- className: "bdr-r",
699
- shorthand: "roundedRight",
700
- property: "borderRadius",
701
- values: "radii",
702
- group: "Border Radius",
703
- transform(value) {
704
- return {
705
- borderTopRightRadius: value,
706
- borderBottomRightRadius: value
707
- };
708
- }
709
- },
710
- borderBottomRadius: {
711
- className: "bdr-b",
712
- shorthand: "roundedBottom",
713
- property: "borderRadius",
714
- values: "radii",
715
- group: "Border Radius",
716
- transform(value) {
717
- return {
718
- borderBottomLeftRadius: value,
719
- borderBottomRightRadius: value
720
- };
721
- }
722
- },
723
- borderLeftRadius: {
724
- className: "bdr-l",
725
- shorthand: "roundedLeft",
726
- values: "radii",
727
- property: "borderRadius",
728
- group: "Border Radius",
729
- transform(value) {
730
- return {
731
- borderTopLeftRadius: value,
732
- borderBottomLeftRadius: value
733
- };
734
- }
735
- },
736
- borderStartStartRadius: {
737
- className: "bdr-ss",
738
- shorthand: "roundedStartStart",
739
- values: "radii",
740
- group: "Border Radius"
741
- },
742
- borderStartEndRadius: {
743
- className: "bdr-se",
744
- shorthand: "roundedStartEnd",
745
- values: "radii",
746
- group: "Border Radius"
747
- },
748
- borderStartRadius: {
749
- className: "bdr-s",
750
- values: "radii",
751
- property: "borderRadius",
752
- shorthand: "roundedStart",
753
- group: "Border Radius",
754
- transform(value) {
755
- return {
756
- borderStartStartRadius: value,
757
- borderEndStartRadius: value
758
- };
759
- }
760
- },
761
- borderEndStartRadius: {
762
- className: "bdr-es",
763
- shorthand: "roundedEndStart",
764
- values: "radii",
765
- group: "Border Radius"
766
- },
767
- borderEndEndRadius: {
768
- className: "bdr-ee",
769
- shorthand: "roundedEndEnd",
770
- values: "radii",
771
- group: "Border Radius"
772
- },
773
- borderEndRadius: {
774
- className: "bdr-e",
775
- shorthand: "roundedEnd",
776
- property: "borderRadius",
777
- values: "radii",
778
- group: "Border Radius",
779
- transform(value) {
780
- return {
781
- borderStartEndRadius: value,
782
- borderEndEndRadius: value
783
- };
784
- }
785
- },
786
- // Border
787
- border: {
788
- className: "bd",
789
- values: "borders",
790
- group: "Border"
791
- },
792
- borderWidth: {
793
- className: "bd-w",
794
- values: "borderWidths",
795
- group: "Border Radius"
796
- },
797
- borderTopWidth: {
798
- className: "bd-t-w",
799
- values: "borderWidths",
800
- group: "Border"
801
- },
802
- borderLeftWidth: {
803
- className: "bd-l-w",
804
- values: "borderWidths",
805
- group: "Border"
806
- },
807
- borderRightWidth: {
808
- className: "bd-r-w",
809
- values: "borderWidths",
810
- group: "Border"
811
- },
812
- borderBottomWidth: {
813
- className: "bd-b-w",
814
- values: "borderWidths",
815
- group: "Border"
816
- },
817
- borderBlockStartWidth: {
818
- className: "bd-bs-w",
819
- values: "borderWidths",
820
- group: "Border Radius"
821
- },
822
- borderBlockEndWidth: {
823
- className: "bd-be-w",
824
- values: "borderWidths",
825
- group: "Border Radius"
826
- },
827
- borderColor: {
828
- className: "bd-c",
829
- values: "colors",
830
- group: "Border",
831
- transform: createColorMixTransform("borderColor")
832
- },
833
- borderInline: {
834
- className: "bd-x",
835
- values: "borders",
836
- group: "Border",
837
- shorthand: "borderX"
838
- },
839
- borderInlineWidth: {
840
- className: "bd-x-w",
841
- values: "borderWidths",
842
- group: "Border",
843
- shorthand: "borderXWidth"
844
- },
845
- borderInlineColor: {
846
- className: "bd-x-c",
847
- values: "colors",
848
- group: "Border",
849
- shorthand: "borderXColor",
850
- transform: createColorMixTransform("borderInlineColor")
851
- },
852
- borderBlock: {
853
- className: "bd-y",
854
- values: "borders",
855
- group: "Border",
856
- shorthand: "borderY"
857
- },
858
- borderBlockWidth: {
859
- className: "bd-y-w",
860
- values: "borderWidths",
861
- group: "Border",
862
- shorthand: "borderYWidth"
863
- },
864
- borderBlockColor: {
865
- className: "bd-y-c",
866
- values: "colors",
867
- group: "Border",
868
- shorthand: "borderYColor",
869
- transform: createColorMixTransform("borderBlockColor")
870
- },
871
- borderLeft: {
872
- className: "bd-l",
873
- values: "borders",
874
- group: "Border"
875
- },
876
- borderLeftColor: {
877
- className: "bd-l-c",
878
- values: "colors",
879
- group: "Border",
880
- transform: createColorMixTransform("borderLeftColor")
881
- },
882
- borderInlineStart: {
883
- className: "bd-s",
884
- values: "borders",
885
- group: "Border",
886
- shorthand: "borderStart"
887
- },
888
- borderInlineStartWidth: {
889
- className: "bd-s-w",
890
- values: "borderWidths",
891
- group: "Border",
892
- shorthand: "borderStartWidth"
893
- },
894
- borderInlineStartColor: {
895
- className: "bd-s-c",
896
- values: "colors",
897
- group: "Border",
898
- shorthand: "borderStartColor",
899
- transform: createColorMixTransform("borderInlineStartColor")
900
- },
901
- borderRight: {
902
- className: "bd-r",
903
- values: "borders",
904
- group: "Border"
905
- },
906
- borderRightColor: {
907
- className: "bd-r-c",
908
- values: "colors",
909
- group: "Border",
910
- transform: createColorMixTransform("borderRightColor")
911
- },
912
- borderInlineEnd: {
913
- className: "bd-e",
914
- values: "borders",
915
- group: "Border",
916
- shorthand: "borderEnd"
917
- },
918
- borderInlineEndWidth: {
919
- className: "bd-e-w",
920
- values: "borderWidths",
921
- group: "Border",
922
- shorthand: "borderEndWidth"
923
- },
924
- borderInlineEndColor: {
925
- className: "bd-e-c",
926
- values: "colors",
927
- group: "Border",
928
- shorthand: "borderEndColor",
929
- transform: createColorMixTransform("borderInlineEndColor")
930
- },
931
- borderTop: {
932
- className: "bd-t",
933
- values: "borders",
934
- group: "Border"
935
- },
936
- borderTopColor: {
937
- className: "bd-t-c",
938
- values: "colors",
939
- group: "Border",
940
- transform: createColorMixTransform("borderTopColor")
941
- },
942
- borderBottom: {
943
- className: "bd-b",
944
- values: "borders",
945
- group: "Border"
946
- },
947
- borderBottomColor: {
948
- className: "bd-b-c",
949
- values: "colors",
950
- group: "Border",
951
- transform: createColorMixTransform("borderBottomColor")
952
- },
953
- borderBlockEnd: {
954
- className: "bd-be",
955
- values: "borders",
956
- group: "Border"
957
- },
958
- borderBlockEndColor: {
959
- className: "bd-be-c",
960
- values: "colors",
961
- group: "Border",
962
- transform: createColorMixTransform("borderBlockEndColor")
963
- },
964
- borderBlockStart: {
965
- className: "bd-bs",
966
- values: "borders",
967
- group: "Border"
968
- },
969
- borderBlockStartColor: {
970
- className: "bd-bs-c",
971
- values: "colors",
972
- group: "Border",
973
- transform: createColorMixTransform("borderBlockStartColor")
974
- }
975
- };
976
-
977
- // src/utilities/container.ts
978
- var container2 = {
979
- container: {
980
- className: "cq",
981
- group: "Container"
982
- },
983
- containerName: {
984
- className: "cq-n",
985
- property: "containerName",
986
- values: "containerNames",
987
- group: "Container"
988
- },
989
- containerType: {
990
- className: "cq-t",
991
- group: "Container"
992
- }
993
- };
994
-
995
- // src/utilities/cursor.ts
996
- var cursor = {
997
- cursor: {
998
- className: "cursor",
999
- values: "cursor",
1000
- group: "System"
1001
- }
1002
- };
1003
-
1004
- // src/utilities/display.ts
1005
- var display = {
1006
- display: {
1007
- className: "d",
1008
- group: "Display"
1009
- },
1010
- hideFrom: {
1011
- className: "hide",
1012
- values: "breakpoints",
1013
- group: "Display",
1014
- transform(value, { raw, token }) {
1015
- const bp = token.raw(`breakpoints.${raw}`);
1016
- const media = bp ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`;
1017
- return {
1018
- [media]: {
1019
- display: "none"
1020
- }
1021
- };
1022
- }
1023
- },
1024
- hideBelow: {
1025
- className: "show",
1026
- values: "breakpoints",
1027
- group: "Display",
1028
- transform(value, { raw, token }) {
1029
- const bp = token.raw(`breakpoints.${raw}`);
1030
- const media = bp ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`;
1031
- return {
1032
- [media]: {
1033
- display: "none"
1034
- }
1035
- };
1036
- }
1037
- }
1038
- };
1039
-
1040
- // src/utilities/divide.ts
1041
- var divideColor = createColorMixTransform("borderColor");
1042
- var divide = {
1043
- divideX: {
1044
- className: "dvd-x",
1045
- values: "borderWidths",
1046
- group: "Border",
1047
- transform(value) {
1048
- return {
1049
- "& > :not([hidden]) ~ :not([hidden])": {
1050
- borderInlineStartWidth: value,
1051
- borderInlineEndWidth: "0px"
1052
- }
1053
- };
1054
- }
1055
- },
1056
- divideY: {
1057
- className: "dvd-y",
1058
- values: "borderWidths",
1059
- group: "Border",
1060
- transform(value) {
1061
- return {
1062
- "& > :not([hidden]) ~ :not([hidden])": {
1063
- borderTopWidth: value,
1064
- borderBottomWidth: "0px"
1065
- }
1066
- };
1067
- }
1068
- },
1069
- divideColor: {
1070
- className: "dvd-c",
1071
- values: "colors",
1072
- group: "Border",
1073
- transform(value, args) {
1074
- return {
1075
- "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
1076
- };
1077
- }
1078
- },
1079
- divideStyle: {
1080
- className: "dvd-s",
1081
- property: "borderStyle",
1082
- group: "Border",
1083
- transform(value) {
1084
- return {
1085
- "& > :not([hidden]) ~ :not([hidden])": {
1086
- borderStyle: value
1087
- }
1088
- };
1089
- }
1090
- }
1091
- };
1092
-
1093
- // src/css-var.ts
1094
- function cssVar(syntax, initialValue) {
1095
- return initialValue === void 0 ? { syntax, inherits: false } : { syntax, inherits: false, initialValue };
1096
- }
1097
- function anyVar(initialValue) {
1098
- return cssVar("*", initialValue);
1099
- }
1100
-
1101
- // src/utilities/effects.ts
1102
- var effects = {
1103
- opacity: {
1104
- className: "op",
1105
- values: "opacity",
1106
- group: "Background"
1107
- },
1108
- boxShadow: {
1109
- shorthand: "shadow",
1110
- className: "bx-sh",
1111
- values: "shadows",
1112
- group: "Shadow"
1113
- },
1114
- boxShadowColor: {
1115
- shorthand: "shadowColor",
1116
- className: "bx-sh-c",
1117
- values: "colors",
1118
- transform: createColorMixTransform("--shadow-color"),
1119
- group: "Color"
1120
- },
1121
- mixBlendMode: {
1122
- className: "mix-bm",
1123
- group: "Effect"
1124
- },
1125
- filter: {
1126
- className: "filter",
1127
- group: "Effect",
1128
- values: {
1129
- auto: "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )"
1130
- }
1131
- },
1132
- brightness: {
1133
- className: "brightness",
1134
- group: "Effect",
1135
- globalVars: { "--brightness": anyVar() },
1136
- transform(value) {
1137
- return {
1138
- "--brightness": `brightness(${value})`
1139
- };
1140
- }
1141
- },
1142
- contrast: {
1143
- className: "contrast",
1144
- group: "Effect",
1145
- globalVars: { "--contrast": anyVar() },
1146
- transform(value) {
1147
- return {
1148
- "--contrast": `contrast(${value})`
1149
- };
1150
- }
1151
- },
1152
- grayscale: {
1153
- className: "grayscale",
1154
- group: "Effect",
1155
- globalVars: { "--grayscale": anyVar() },
1156
- transform(value) {
1157
- return {
1158
- "--grayscale": `grayscale(${value})`
1159
- };
1160
- }
1161
- },
1162
- hueRotate: {
1163
- className: "hue-rotate",
1164
- group: "Effect",
1165
- globalVars: { "--hue-rotate": anyVar() },
1166
- transform(value) {
1167
- return {
1168
- "--hue-rotate": `hue-rotate(${value})`
1169
- };
1170
- }
1171
- },
1172
- invert: {
1173
- className: "invert",
1174
- group: "Effect",
1175
- globalVars: { "--invert": anyVar() },
1176
- transform(value) {
1177
- return {
1178
- "--invert": `invert(${value})`
1179
- };
1180
- }
1181
- },
1182
- saturate: {
1183
- className: "saturate",
1184
- group: "Effect",
1185
- globalVars: { "--saturate": anyVar() },
1186
- transform(value) {
1187
- return {
1188
- "--saturate": `saturate(${value})`
1189
- };
1190
- }
1191
- },
1192
- sepia: {
1193
- className: "sepia",
1194
- group: "Effect",
1195
- globalVars: { "--sepia": anyVar() },
1196
- transform(value) {
1197
- return {
1198
- "--sepia": `sepia(${value})`
1199
- };
1200
- }
1201
- },
1202
- dropShadow: {
1203
- className: "drop-shadow",
1204
- group: "Effect",
1205
- values: "dropShadows",
1206
- globalVars: { "--drop-shadow": anyVar() },
1207
- transform(value) {
1208
- return {
1209
- "--drop-shadow": value
1210
- };
1211
- }
1212
- },
1213
- blur: {
1214
- className: "blur",
1215
- group: "Effect",
1216
- values: "blurs",
1217
- globalVars: { "--blur": anyVar() },
1218
- transform(value) {
1219
- return {
1220
- "--blur": `blur(${value})`
1221
- };
1222
- }
1223
- },
1224
- backdropFilter: {
1225
- className: "bkdp",
1226
- group: "Effect",
1227
- values: {
1228
- auto: "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )"
1229
- },
1230
- transform(value) {
1231
- return {
1232
- WebkitBackdropFilter: value,
1233
- backdropFilter: value
1234
- };
1235
- }
1236
- },
1237
- backdropBlur: {
1238
- className: "bkdp-blur",
1239
- group: "Effect",
1240
- values: "blurs",
1241
- globalVars: { "--backdrop-blur": anyVar() },
1242
- transform(value) {
1243
- return {
1244
- "--backdrop-blur": `blur(${value})`
1245
- };
1246
- }
1247
- },
1248
- backdropBrightness: {
1249
- className: "bkdp-brightness",
1250
- group: "Effect",
1251
- globalVars: { "--backdrop-brightness": anyVar() },
1252
- transform(value) {
1253
- return {
1254
- "--backdrop-brightness": `brightness(${value})`
1255
- };
1256
- }
1257
- },
1258
- backdropContrast: {
1259
- className: "bkdp-contrast",
1260
- group: "Effect",
1261
- globalVars: { "--backdrop-contrast": anyVar() },
1262
- transform(value) {
1263
- return {
1264
- "--backdrop-contrast": `contrast(${value})`
1265
- };
1266
- }
1267
- },
1268
- backdropGrayscale: {
1269
- className: "bkdp-grayscale",
1270
- group: "Effect",
1271
- globalVars: { "--backdrop-grayscale": anyVar() },
1272
- transform(value) {
1273
- return {
1274
- "--backdrop-grayscale": `grayscale(${value})`
1275
- };
1276
- }
1277
- },
1278
- backdropHueRotate: {
1279
- className: "bkdp-hue-rotate",
1280
- group: "Effect",
1281
- globalVars: { "--backdrop-hue-rotate": anyVar() },
1282
- transform(value) {
1283
- return {
1284
- "--backdrop-hue-rotate": `hue-rotate(${value})`
1285
- };
1286
- }
1287
- },
1288
- backdropInvert: {
1289
- className: "bkdp-invert",
1290
- group: "Effect",
1291
- globalVars: { "--backdrop-invert": anyVar() },
1292
- transform(value) {
1293
- return {
1294
- "--backdrop-invert": `invert(${value})`
1295
- };
1296
- }
1297
- },
1298
- backdropOpacity: {
1299
- className: "bkdp-opacity",
1300
- group: "Effect",
1301
- globalVars: { "--backdrop-opacity": anyVar() },
1302
- transform(value) {
1303
- return {
1304
- "--backdrop-opacity": value
1305
- };
1306
- }
1307
- },
1308
- backdropSaturate: {
1309
- className: "bkdp-saturate",
1310
- group: "Effect",
1311
- globalVars: { "--backdrop-saturate": anyVar() },
1312
- transform(value) {
1313
- return {
1314
- "--backdrop-saturate": `saturate(${value})`
1315
- };
1316
- }
1317
- },
1318
- backdropSepia: {
1319
- className: "bkdp-sepia",
1320
- group: "Effect",
1321
- globalVars: { "--backdrop-sepia": anyVar() },
1322
- transform(value) {
1323
- return {
1324
- "--backdrop-sepia": `sepia(${value})`
1325
- };
1326
- }
1327
- }
1328
- };
1329
-
1330
- // src/utilities/flex-and-grid.ts
1331
- var flexGrid = {
1332
- flexBasis: {
1333
- className: "flex-b",
1334
- group: "Flex Layout",
1335
- values(theme) {
1336
- return {
1337
- ...theme("sizes"),
1338
- "1/2": "50%",
1339
- "1/3": "33.333333%",
1340
- "2/3": "66.666667%",
1341
- "1/4": "25%",
1342
- "2/4": "50%",
1343
- "3/4": "75%",
1344
- "1/5": "20%",
1345
- "2/5": "40%",
1346
- "3/5": "60%",
1347
- "4/5": "80%",
1348
- "1/6": "16.666667%",
1349
- "2/6": "33.333333%",
1350
- "3/6": "50%",
1351
- "4/6": "66.666667%",
1352
- "5/6": "83.333333%",
1353
- "1/12": "8.333333%",
1354
- "2/12": "16.666667%",
1355
- "3/12": "25%",
1356
- "4/12": "33.333333%",
1357
- "5/12": "41.666667%",
1358
- "6/12": "50%",
1359
- "7/12": "58.333333%",
1360
- "8/12": "66.666667%",
1361
- "9/12": "75%",
1362
- "10/12": "83.333333%",
1363
- "11/12": "91.666667%",
1364
- full: "100%"
1365
- };
1366
- }
1367
- },
1368
- flex: {
1369
- className: "flex",
1370
- group: "Flex Layout",
1371
- values: {
1372
- "1": "1 1 0%",
1373
- auto: "1 1 auto",
1374
- initial: "0 1 auto",
1375
- none: "none"
1376
- }
1377
- },
1378
- flexDirection: {
1379
- className: "flex-d",
1380
- group: "Flex Layout",
1381
- shorthand: "flexDir"
1382
- },
1383
- flexGrow: {
1384
- className: "flex-g",
1385
- group: "Flex Layout"
1386
- },
1387
- flexShrink: {
1388
- className: "flex-sh",
1389
- group: "Flex Layout"
1390
- },
1391
- gridTemplateColumns: {
1392
- className: "grid-tc",
1393
- group: "Grid Layout"
1394
- },
1395
- gridTemplateRows: {
1396
- className: "grid-tr",
1397
- group: "Grid Layout"
1398
- },
1399
- gridColumn: {
1400
- className: "grid-c",
1401
- group: "Grid Layout"
1402
- },
1403
- gridRow: {
1404
- className: "grid-r",
1405
- group: "Grid Layout"
1406
- },
1407
- gridColumnStart: {
1408
- className: "grid-cs",
1409
- group: "Grid Layout"
1410
- },
1411
- gridColumnEnd: {
1412
- className: "grid-ce",
1413
- group: "Grid Layout"
1414
- },
1415
- gridAutoFlow: {
1416
- className: "grid-af",
1417
- group: "Grid Layout"
1418
- },
1419
- gridAutoColumns: {
1420
- className: "grid-ac",
1421
- group: "Grid Layout",
1422
- values: {
1423
- min: "min-content",
1424
- max: "max-content",
1425
- fr: "minmax(0, 1fr)"
1426
- }
1427
- },
1428
- gridAutoRows: {
1429
- className: "grid-ar",
1430
- group: "Grid Layout",
1431
- values: {
1432
- min: "min-content",
1433
- max: "max-content",
1434
- fr: "minmax(0, 1fr)"
1435
- }
1436
- },
1437
- gap: {
1438
- className: "gap",
1439
- group: "Flex Layout",
1440
- values: "spacing"
1441
- },
1442
- gridGap: {
1443
- className: "grid-g",
1444
- group: "Grid Layout",
1445
- values: "spacing"
1446
- },
1447
- gridRowGap: {
1448
- className: "grid-rg",
1449
- group: "Grid Layout",
1450
- values: "spacing"
1451
- },
1452
- gridColumnGap: {
1453
- className: "grid-cg",
1454
- group: "Grid Layout",
1455
- values: "spacing"
1456
- },
1457
- rowGap: {
1458
- className: "rg",
1459
- group: "Grid Layout",
1460
- values: "spacing"
1461
- },
1462
- columnGap: {
1463
- className: "cg",
1464
- group: "Grid Layout",
1465
- values: "spacing"
1466
- },
1467
- justifyContent: {
1468
- className: "jc",
1469
- group: "Flex Layout"
1470
- },
1471
- alignContent: {
1472
- className: "ac",
1473
- group: "Flex Layout"
1474
- },
1475
- alignItems: {
1476
- className: "ai",
1477
- group: "Flex Layout"
1478
- },
1479
- alignSelf: {
1480
- className: "as",
1481
- group: "Flex Layout"
1482
- }
1483
- };
1484
-
1485
- // src/utilities/focus-ring.ts
1486
- function createFocusRing(selector, className) {
1487
- return {
1488
- className,
1489
- group: "Focus Ring",
1490
- values: ["outside", "inside", "mixed", "none"],
1491
- transform(value) {
1492
- const fallback = "var(--global-color-focus-ring, #005FCC)";
1493
- const focusRingColor = `var(--focus-ring-color-prop, ${fallback})`;
1494
- switch (value) {
1495
- case "inside":
1496
- return {
1497
- "--focus-ring-color": focusRingColor,
1498
- [selector]: {
1499
- outlineOffset: "0px",
1500
- outlineWidth: "var(--focus-ring-width, 1px)",
1501
- outlineColor: "var(--focus-ring-color)",
1502
- outlineStyle: "var(--focus-ring-style, solid)",
1503
- borderColor: "var(--focus-ring-color)"
1504
- }
1505
- };
1506
- case "outside":
1507
- return {
1508
- "--focus-ring-color": focusRingColor,
1509
- [selector]: {
1510
- outlineWidth: "var(--focus-ring-width, 2px)",
1511
- outlineOffset: "var(--focus-ring-offset, 2px)",
1512
- outlineStyle: "var(--focus-ring-style, solid)",
1513
- outlineColor: "var(--focus-ring-color)"
1514
- }
1515
- };
1516
- case "mixed":
1517
- return {
1518
- "--focus-ring-color": focusRingColor,
1519
- [selector]: {
1520
- outlineOffset: "0px",
1521
- outlineWidth: "var(--focus-ring-width, 3px)",
1522
- outlineStyle: "var(--focus-ring-style, solid)",
1523
- outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
1524
- borderColor: "var(--focus-ring-color)"
1525
- }
1526
- };
1527
- case "none":
1528
- return {
1529
- "--focus-ring-color": focusRingColor,
1530
- [selector]: {
1531
- outline: "none"
1532
- }
1533
- };
1534
- default:
1535
- return {};
1536
- }
1537
- }
1538
- };
1539
- }
1540
- var focusRing = {
1541
- focusRing: createFocusRing("&:is(:focus, [data-focus])", "focus-ring"),
1542
- focusVisibleRing: createFocusRing("&:is(:focus-visible, [data-focus-visible])", "focus-v-ring"),
1543
- focusRingColor: {
1544
- className: "focus-ring-c",
1545
- values: "colors",
1546
- group: "Focus Ring",
1547
- transform: createColorMixTransform("--focus-ring-color-prop")
1548
- },
1549
- focusRingOffset: {
1550
- className: "focus-ring-o",
1551
- values: "spacing",
1552
- group: "Focus Ring",
1553
- transform: (v) => ({ "--focus-ring-offset": v })
1554
- },
1555
- focusRingWidth: {
1556
- className: "focus-ring-w",
1557
- values: "borderWidths",
1558
- property: "outlineWidth",
1559
- group: "Focus Ring",
1560
- transform: (v) => ({ "--focus-ring-width": v })
1561
- },
1562
- focusRingStyle: {
1563
- className: "focus-ring-s",
1564
- values: "borderStyles",
1565
- property: "outlineStyle",
1566
- group: "Focus Ring",
1567
- transform: (v) => ({ "--focus-ring-style": v })
1568
- }
1569
- };
1570
-
1571
- // src/utilities/gradient.ts
1572
- var stopColor = () => cssVar("<color>", "#0000");
1573
- var composed = {
1574
- "--gradient-position": anyVar(),
1575
- "--gradient-stops": anyVar(),
1576
- "--gradient-via-stops": anyVar()
1577
- };
1578
- var gradientVia = createColorMixTransform("--gradient-via");
1579
- var linearGradientDirectionMap = /* @__PURE__ */ new Map([
1580
- ["to-t", "to top"],
1581
- ["to-tr", "to top right"],
1582
- ["to-r", "to right"],
1583
- ["to-br", "to bottom right"],
1584
- ["to-b", "to bottom"],
1585
- ["to-bl", "to bottom left"],
1586
- ["to-l", "to left"],
1587
- ["to-tl", "to top left"]
1588
- ]);
1589
- var isGradientShortcut = (value) => linearGradientDirectionMap.has(value);
1590
- var linearGradientValues = (theme) => {
1591
- return {
1592
- ...theme("gradients"),
1593
- ...Object.fromEntries(linearGradientDirectionMap.entries())
1594
- };
1595
- };
1596
- var gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
1597
- var gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
1598
- var backgroundGradients = {
1599
- backgroundGradient: {
1600
- shorthand: "bgGradient",
1601
- className: "bg-grad",
1602
- group: "Background Gradient",
1603
- globalVars: composed,
1604
- values: linearGradientValues,
1605
- transform(value, { raw, token }) {
1606
- const tokenValue = token(`gradients.${raw}`);
1607
- if (tokenValue) {
1608
- return { backgroundImage: tokenValue };
1609
- }
1610
- if (!isGradientShortcut(raw)) {
1611
- return { backgroundImage: value };
1612
- }
1613
- return {
1614
- "--gradient-stops": gradientStops,
1615
- "--gradient-position": linearGradientDirectionMap.get(raw),
1616
- backgroundImage: `linear-gradient(var(--gradient-stops))`
1617
- };
1618
- }
1619
- },
1620
- backgroundLinear: {
1621
- shorthand: "bgLinear",
1622
- className: "bg-linear",
1623
- group: "Background Gradient",
1624
- globalVars: composed,
1625
- values: linearGradientValues,
1626
- transform(value, { raw, token }) {
1627
- const tokenValue = token(`gradients.${raw}`);
1628
- if (tokenValue) {
1629
- return { backgroundImage: tokenValue };
1630
- }
1631
- if (!isGradientShortcut(raw)) {
1632
- return { backgroundImage: value };
1633
- }
1634
- return {
1635
- "--gradient-stops": gradientStops,
1636
- "--gradient-position": linearGradientDirectionMap.get(raw),
1637
- backgroundImage: `linear-gradient(var(--gradient-stops))`
1638
- };
1639
- }
1640
- },
1641
- backgroundRadial: {
1642
- shorthand: "bgRadial",
1643
- className: "bg-radial",
1644
- group: "Background Gradient",
1645
- globalVars: composed,
1646
- values: "gradients",
1647
- transform(value, { raw, token }) {
1648
- const tokenValue = token(`gradients.${raw}`);
1649
- if (tokenValue) {
1650
- return { backgroundImage: tokenValue };
1651
- }
1652
- return {
1653
- "--gradient-stops": gradientStops,
1654
- "--gradient-position": value,
1655
- backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
1656
- };
1657
- }
1658
- },
1659
- backgroundConic: {
1660
- shorthand: "bgConic",
1661
- className: "bg-conic",
1662
- group: "Background Gradient",
1663
- globalVars: composed,
1664
- transform(value) {
1665
- return {
1666
- "--gradient-stops": gradientStops,
1667
- "--gradient-position": value,
1668
- backgroundImage: `conic-gradient(var(--gradient-stops))`
1669
- };
1670
- }
1671
- },
1672
- textGradient: {
1673
- className: "txt-grad",
1674
- group: "Background Gradient",
1675
- globalVars: composed,
1676
- values: linearGradientValues,
1677
- transform(value, { raw, token }) {
1678
- const tokenValue = token(`gradients.${raw}`);
1679
- if (tokenValue) {
1680
- return {
1681
- backgroundImage: tokenValue,
1682
- WebkitBackgroundClip: "text",
1683
- color: "transparent"
1684
- };
1685
- }
1686
- if (!isGradientShortcut(raw)) {
1687
- return {
1688
- backgroundImage: value,
1689
- WebkitBackgroundClip: "text",
1690
- color: "transparent"
1691
- };
1692
- }
1693
- return {
1694
- "--gradient-stops": gradientStops,
1695
- "--gradient-position": linearGradientDirectionMap.get(raw),
1696
- backgroundImage: `linear-gradient(var(--gradient-stops))`,
1697
- WebkitBackgroundClip: "text",
1698
- color: "transparent"
1699
- };
1700
- }
1701
- },
1702
- gradientFromPosition: {
1703
- className: "grad-from-pos",
1704
- group: "Background Gradient",
1705
- globalVars: { "--gradient-from-position": cssVar("<length-percentage>", "0%") },
1706
- transform(value) {
1707
- return {
1708
- "--gradient-from-position": value
1709
- };
1710
- }
1711
- },
1712
- gradientToPosition: {
1713
- className: "grad-to-pos",
1714
- group: "Background Gradient",
1715
- globalVars: { "--gradient-to-position": cssVar("<length-percentage>", "100%") },
1716
- transform(value) {
1717
- return {
1718
- "--gradient-to-position": value
1719
- };
1720
- }
1721
- },
1722
- gradientFrom: {
1723
- className: "grad-from",
1724
- values: "colors",
1725
- group: "Background Gradient",
1726
- globalVars: { "--gradient-from": stopColor() },
1727
- transform: createColorMixTransform("--gradient-from")
1728
- },
1729
- gradientTo: {
1730
- className: "grad-to",
1731
- values: "colors",
1732
- group: "Background Gradient",
1733
- globalVars: { "--gradient-to": stopColor() },
1734
- transform: createColorMixTransform("--gradient-to")
1735
- },
1736
- gradientVia: {
1737
- className: "grad-via",
1738
- values: "colors",
1739
- group: "Background Gradient",
1740
- globalVars: { "--gradient-via": stopColor() },
1741
- transform(value, args) {
1742
- const transformed = gradientVia(value, args);
1743
- return {
1744
- ...transformed,
1745
- "--gradient-stops": "var(--gradient-via-stops)",
1746
- "--gradient-via-stops": gradientViaStops
1747
- };
1748
- }
1749
- },
1750
- gradientViaPosition: {
1751
- className: "grad-via-pos",
1752
- group: "Background Gradient",
1753
- globalVars: { "--gradient-via-position": cssVar("<length-percentage>", "50%") },
1754
- transform(value) {
1755
- return {
1756
- "--gradient-via-position": value
1757
- };
1758
- }
1759
- }
1760
- };
1761
-
1762
- // src/utilities/helpers.ts
1763
- var srMapping = {
1764
- true: {
1765
- position: "absolute",
1766
- width: "1px",
1767
- height: "1px",
1768
- padding: "0",
1769
- margin: "-1px",
1770
- overflow: "hidden",
1771
- clip: "rect(0, 0, 0, 0)",
1772
- whiteSpace: "nowrap",
1773
- borderWidth: "0"
1774
- },
1775
- false: {
1776
- position: "static",
1777
- width: "auto",
1778
- height: "auto",
1779
- padding: "0",
1780
- margin: "0",
1781
- overflow: "visible",
1782
- clip: "auto",
1783
- whiteSpace: "normal"
1784
- }
1785
- };
1786
- var helpers = {
1787
- srOnly: {
1788
- className: "sr",
1789
- values: { type: "boolean" },
1790
- group: "Other",
1791
- transform(value) {
1792
- return srMapping[value] || {};
1793
- }
1794
- },
1795
- debug: {
1796
- className: "debug",
1797
- values: { type: "boolean" },
1798
- group: "Other",
1799
- transform(value) {
1800
- if (!value) return {};
1801
- return {
1802
- outline: "1px solid blue !important",
1803
- "&>*": {
1804
- outline: "1px solid red !important"
1805
- }
1806
- };
1807
- }
1808
- }
1809
- };
1810
-
1811
- // src/utilities/interactivity.ts
1812
- var SCROLLBAR_COLOR = "var(--scrollbar-thumb, currentColor) var(--scrollbar-track, transparent)";
1813
- function scrollbarColorStyles(colorVars) {
1814
- return {
1815
- ...colorVars,
1816
- scrollbarColor: SCROLLBAR_COLOR,
1817
- "&::-webkit-scrollbar-thumb": {
1818
- backgroundColor: "var(--scrollbar-thumb, currentColor)"
1819
- },
1820
- "&::-webkit-scrollbar-track": {
1821
- backgroundColor: "var(--scrollbar-track, transparent)"
1822
- }
1823
- };
1824
- }
1825
- var interactivity = {
1826
- accentColor: {
1827
- className: "ac-c",
1828
- values: "colors",
1829
- transform: createColorMixTransform("accentColor"),
1830
- group: "Color"
1831
- },
1832
- caretColor: {
1833
- className: "ca-c",
1834
- values: "colors",
1835
- group: "Color",
1836
- transform: createColorMixTransform("caretColor")
1837
- },
1838
- scrollBehavior: {
1839
- className: "scr-bhv",
1840
- group: "Scroll"
1841
- },
1842
- // Scroll bar
1843
- scrollbar: {
1844
- className: "scr-bar",
1845
- values: ["visible", "hidden"],
1846
- group: "Scroll",
1847
- transform(value) {
1848
- if (value === "visible") {
1849
- return {
1850
- msOverflowStyle: "auto",
1851
- scrollbarWidth: "auto",
1852
- "&::-webkit-scrollbar": {
1853
- display: "block"
1854
- }
1855
- };
1856
- }
1857
- if (value === "hidden") {
1858
- return {
1859
- msOverflowStyle: "none",
1860
- scrollbarWidth: "none",
1861
- "&::-webkit-scrollbar": {
1862
- display: "none"
1863
- }
1864
- };
1865
- }
1866
- }
1867
- },
1868
- scrollbarColor: {
1869
- className: "scr-bar-c",
1870
- group: "Scroll"
1871
- },
1872
- scrollbarThumb: {
1873
- className: "scr-bar-th",
1874
- values: "colors",
1875
- group: "Scroll",
1876
- globalVars: { "--scrollbar-thumb": cssVar("<color>") },
1877
- transform(value, args) {
1878
- return scrollbarColorStyles(createColorMixTransform("--scrollbar-thumb")(value, args));
1879
- }
1880
- },
1881
- scrollbarTrack: {
1882
- className: "scr-bar-tk",
1883
- values: "colors",
1884
- group: "Scroll",
1885
- globalVars: { "--scrollbar-track": cssVar("<color>") },
1886
- transform(value, args) {
1887
- return scrollbarColorStyles(createColorMixTransform("--scrollbar-track")(value, args));
1888
- }
1889
- },
1890
- scrollbarGutter: {
1891
- className: "scr-bar-g",
1892
- group: "Scroll"
1893
- },
1894
- scrollbarWidth: {
1895
- className: "scr-bar-w",
1896
- group: "Scroll"
1897
- },
1898
- // Scroll Margin
1899
- scrollMargin: {
1900
- className: "scr-m",
1901
- values: "spacing",
1902
- group: "Scroll"
1903
- },
1904
- scrollMarginLeft: {
1905
- className: "scr-ml",
1906
- values: "spacing",
1907
- group: "Scroll"
1908
- },
1909
- scrollMarginRight: {
1910
- className: "scr-mr",
1911
- values: "spacing",
1912
- group: "Scroll"
1913
- },
1914
- scrollMarginTop: {
1915
- className: "scr-mt",
1916
- values: "spacing",
1917
- group: "Scroll"
1918
- },
1919
- scrollMarginBottom: {
1920
- className: "scr-mb",
1921
- values: "spacing",
1922
- group: "Scroll"
1923
- },
1924
- scrollMarginBlock: {
1925
- className: "scr-my",
1926
- values: "spacing",
1927
- group: "Scroll",
1928
- shorthand: ["scrollMarginY"]
1929
- },
1930
- scrollMarginBlockEnd: {
1931
- className: "scr-mbe",
1932
- values: "spacing",
1933
- group: "Scroll"
1934
- },
1935
- scrollMarginBlockStart: {
1936
- className: "scr-mbt",
1937
- values: "spacing",
1938
- group: "Scroll"
1939
- },
1940
- scrollMarginInline: {
1941
- className: "scr-mx",
1942
- values: "spacing",
1943
- group: "Scroll",
1944
- shorthand: ["scrollMarginX"]
1945
- },
1946
- scrollMarginInlineEnd: {
1947
- className: "scr-me",
1948
- values: "spacing",
1949
- group: "Scroll"
1950
- },
1951
- scrollMarginInlineStart: {
1952
- className: "scr-ms",
1953
- values: "spacing",
1954
- group: "Scroll"
1955
- },
1956
- // Scroll Padding
1957
- scrollPadding: {
1958
- className: "scr-p",
1959
- values: "spacing",
1960
- group: "Scroll"
1961
- },
1962
- scrollPaddingBlock: {
1963
- className: "scr-py",
1964
- values: "spacing",
1965
- group: "Scroll",
1966
- shorthand: ["scrollPaddingY"]
1967
- },
1968
- scrollPaddingBlockStart: {
1969
- className: "scr-pbs",
1970
- values: "spacing",
1971
- group: "Scroll"
1972
- },
1973
- scrollPaddingBlockEnd: {
1974
- className: "scr-pbe",
1975
- values: "spacing",
1976
- group: "Scroll"
1977
- },
1978
- scrollPaddingInline: {
1979
- className: "scr-px",
1980
- values: "spacing",
1981
- group: "Scroll",
1982
- shorthand: ["scrollPaddingX"]
1983
- },
1984
- scrollPaddingInlineEnd: {
1985
- className: "scr-pe",
1986
- values: "spacing",
1987
- group: "Scroll"
1988
- },
1989
- scrollPaddingInlineStart: {
1990
- className: "scr-ps",
1991
- values: "spacing",
1992
- group: "Scroll"
1993
- },
1994
- scrollPaddingLeft: {
1995
- className: "scr-pl",
1996
- values: "spacing",
1997
- group: "Scroll"
1998
- },
1999
- scrollPaddingRight: {
2000
- className: "scr-pr",
2001
- values: "spacing",
2002
- group: "Scroll"
2003
- },
2004
- scrollPaddingTop: {
2005
- className: "scr-pt",
2006
- values: "spacing",
2007
- group: "Scroll"
2008
- },
2009
- scrollPaddingBottom: {
2010
- className: "scr-pb",
2011
- values: "spacing",
2012
- group: "Scroll"
2013
- },
2014
- // Scroll Snap
2015
- scrollSnapAlign: {
2016
- className: "scr-sa",
2017
- group: "Scroll"
2018
- },
2019
- scrollSnapStop: {
2020
- className: "scrs-s",
2021
- group: "Scroll"
2022
- },
2023
- scrollSnapType: {
2024
- className: "scrs-t",
2025
- group: "Scroll",
2026
- values: {
2027
- none: "none",
2028
- x: "x var(--scroll-snap-strictness)",
2029
- y: "y var(--scroll-snap-strictness)",
2030
- both: "both var(--scroll-snap-strictness)"
2031
- }
2032
- },
2033
- scrollSnapStrictness: {
2034
- className: "scrs-strt",
2035
- values: ["mandatory", "proximity"],
2036
- group: "Scroll",
2037
- globalVars: { "--scroll-snap-strictness": anyVar("proximity") },
2038
- transform(value) {
2039
- return {
2040
- "--scroll-snap-strictness": value
2041
- };
2042
- }
2043
- },
2044
- scrollSnapMargin: {
2045
- className: "scrs-m",
2046
- values: "spacing",
2047
- group: "Scroll"
2048
- },
2049
- scrollSnapMarginTop: {
2050
- className: "scrs-mt",
2051
- values: "spacing",
2052
- group: "Scroll"
2053
- },
2054
- scrollSnapMarginBottom: {
2055
- className: "scrs-mb",
2056
- values: "spacing",
2057
- group: "Scroll"
2058
- },
2059
- scrollSnapMarginLeft: {
2060
- className: "scrs-ml",
2061
- values: "spacing",
2062
- group: "Scroll"
2063
- },
2064
- scrollSnapMarginRight: {
2065
- className: "scrs-mr",
2066
- values: "spacing",
2067
- group: "Scroll"
2068
- },
2069
- scrollSnapCoordinate: {
2070
- className: "scrs-c",
2071
- group: "Scroll"
2072
- },
2073
- scrollSnapDestination: {
2074
- className: "scrs-d",
2075
- group: "Scroll"
2076
- },
2077
- scrollSnapPointsX: {
2078
- className: "scrs-px",
2079
- group: "Scroll"
2080
- },
2081
- scrollSnapPointsY: {
2082
- className: "scrs-py",
2083
- group: "Scroll"
2084
- },
2085
- scrollSnapTypeX: {
2086
- className: "scrs-tx",
2087
- group: "Scroll"
2088
- },
2089
- scrollSnapTypeY: {
2090
- className: "scrs-ty",
2091
- group: "Scroll"
2092
- },
2093
- // Scroll Timeline
2094
- scrollTimeline: {
2095
- className: "scrtl",
2096
- group: "Scroll"
2097
- },
2098
- scrollTimelineAxis: {
2099
- className: "scrtl-a",
2100
- group: "Scroll"
2101
- },
2102
- scrollTimelineName: {
2103
- className: "scrtl-n",
2104
- group: "Scroll"
2105
- },
2106
- touchAction: {
2107
- className: "tch-a",
2108
- group: "Interactivity"
2109
- },
2110
- userSelect: {
2111
- className: "us",
2112
- group: "Interactivity",
2113
- transform(value) {
2114
- return {
2115
- WebkitUserSelect: value,
2116
- userSelect: value
2117
- };
2118
- }
2119
- },
2120
- // Overflow
2121
- overflow: {
2122
- className: "ov",
2123
- group: "Scroll"
2124
- },
2125
- overflowWrap: {
2126
- className: "ov-wrap",
2127
- group: "Scroll"
2128
- },
2129
- overflowX: {
2130
- className: "ov-x",
2131
- group: "Scroll"
2132
- },
2133
- overflowY: {
2134
- className: "ov-y",
2135
- group: "Scroll"
2136
- },
2137
- overflowAnchor: {
2138
- className: "ov-a",
2139
- group: "Scroll"
2140
- },
2141
- overflowBlock: {
2142
- className: "ov-b",
2143
- group: "Scroll"
2144
- },
2145
- overflowInline: {
2146
- className: "ov-i",
2147
- group: "Scroll"
2148
- },
2149
- overflowClipBox: {
2150
- className: "ovcp-bx",
2151
- group: "Scroll"
2152
- },
2153
- overflowClipMargin: {
2154
- className: "ovcp-m",
2155
- group: "Scroll"
2156
- },
2157
- overscrollBehavior: {
2158
- className: "ovs-b",
2159
- group: "Scroll"
2160
- },
2161
- overscrollBehaviorX: {
2162
- className: "ovs-bx",
2163
- group: "Scroll"
2164
- },
2165
- overscrollBehaviorY: {
2166
- className: "ovs-by",
2167
- group: "Scroll"
2168
- },
2169
- overscrollBehaviorBlock: {
2170
- className: "ovs-bb",
2171
- group: "Scroll"
2172
- },
2173
- overscrollBehaviorInline: {
2174
- className: "ovs-bi",
2175
- group: "Scroll"
2176
- }
2177
- };
2178
-
2179
- // src/utilities/layout.ts
2180
- var layout = {
2181
- aspectRatio: {
2182
- className: "asp",
2183
- values: "aspectRatios",
2184
- group: "Layout"
2185
- },
2186
- boxDecorationBreak: {
2187
- className: "bx-db",
2188
- group: "Layout",
2189
- transform(value) {
2190
- return {
2191
- WebkitBoxDecorationBreak: value,
2192
- boxDecorationBreak: value
2193
- };
2194
- }
2195
- },
2196
- zIndex: {
2197
- className: "z",
2198
- values: "zIndex",
2199
- group: "Visibility"
2200
- },
2201
- boxSizing: {
2202
- className: "bx-s",
2203
- group: "System"
2204
- },
2205
- objectPosition: {
2206
- className: "obj-p",
2207
- group: "Layout"
2208
- },
2209
- objectFit: {
2210
- className: "obj-f",
2211
- group: "Layout"
2212
- },
2213
- overscrollBehavior: {
2214
- className: "ovscl",
2215
- group: "Scroll"
2216
- },
2217
- overscrollBehaviorX: {
2218
- className: "ovscl-x",
2219
- group: "Scroll"
2220
- },
2221
- overscrollBehaviorY: {
2222
- className: "ovscl-y",
2223
- group: "Scroll"
2224
- },
2225
- position: {
2226
- className: "pos",
2227
- shorthand: "pos",
2228
- group: "Position"
2229
- },
2230
- top: {
2231
- className: "top",
2232
- values: "spacing",
2233
- group: "Position"
2234
- },
2235
- left: {
2236
- className: "left",
2237
- values: "spacing",
2238
- group: "Position"
2239
- },
2240
- inset: {
2241
- className: "inset",
2242
- group: "Position",
2243
- values: (theme) => ({
2244
- auto: "auto",
2245
- ...theme("spacing")
2246
- })
2247
- },
2248
- insetInline: {
2249
- className: "inset-x",
2250
- values: "spacing",
2251
- group: "Position",
2252
- shorthand: ["insetX"]
2253
- },
2254
- insetBlock: {
2255
- className: "inset-y",
2256
- values: "spacing",
2257
- group: "Position",
2258
- shorthand: ["insetY"]
2259
- },
2260
- insetBlockEnd: {
2261
- className: "inset-be",
2262
- values: "spacing",
2263
- group: "Position"
2264
- },
2265
- insetBlockStart: {
2266
- className: "inset-bs",
2267
- values: "spacing",
2268
- group: "Position"
2269
- },
2270
- insetInlineEnd: {
2271
- className: "inset-e",
2272
- values: "spacing",
2273
- group: "Position",
2274
- shorthand: ["insetEnd", "end"]
2275
- },
2276
- insetInlineStart: {
2277
- className: "inset-s",
2278
- values: "spacing",
2279
- group: "Position",
2280
- shorthand: ["insetStart", "start"]
2281
- },
2282
- right: {
2283
- className: "right",
2284
- values: "spacing",
2285
- group: "Position"
2286
- },
2287
- bottom: {
2288
- className: "bottom",
2289
- values: "spacing",
2290
- group: "Position"
2291
- },
2292
- float: {
2293
- className: "float",
2294
- values: ["start", "end"],
2295
- property: "float",
2296
- group: "Position",
2297
- transform(value) {
2298
- if (value === "start") {
2299
- return {
2300
- float: "left",
2301
- '[dir="rtl"] &': {
2302
- float: "right"
2303
- }
2304
- };
2305
- }
2306
- if (value === "end") {
2307
- return {
2308
- float: "right",
2309
- '[dir="rtl"] &': {
2310
- float: "left"
2311
- }
2312
- };
2313
- }
2314
- return {
2315
- float: value
2316
- };
2317
- }
2318
- },
2319
- visibility: {
2320
- className: "vis",
2321
- group: "Visibility"
2322
- }
2323
- };
2324
-
2325
- // src/utilities/list.ts
2326
- var list = {
2327
- listStyleType: {
2328
- className: "li-t",
2329
- group: "List"
2330
- },
2331
- listStylePosition: {
2332
- className: "li-pos",
2333
- group: "List"
2334
- },
2335
- listStyleImage: {
2336
- className: "li-img",
2337
- group: "List",
2338
- values: "assets"
2339
- },
2340
- listStyle: {
2341
- className: "li-s",
2342
- group: "List"
2343
- }
2344
- };
2345
-
2346
- // src/utilities/mask.ts
2347
- var IDENTITY = "linear-gradient(#fff, #fff)";
2348
- var maskVar = (name) => `var(--mask-${name})`;
2349
- var LAYERS = ["linear", "radial", "conic"];
2350
- var EDGES = ["left", "right", "bottom", "top"];
2351
- var MASK_IMAGE = LAYERS.map(maskVar).join(", ");
2352
- var MASK_EDGES = EDGES.map(maskVar).join(", ");
2353
- var image = { syntax: "*", inherits: false, initialValue: IDENTITY };
2354
- var composedList = { syntax: "*", inherits: false };
2355
- var keyword = (initialValue) => ({ syntax: "*", inherits: false, initialValue });
2356
- var color = (initialValue) => ({ syntax: "<color>", inherits: false, initialValue });
2357
- var position = (initialValue) => ({
2358
- syntax: "<length-percentage>",
2359
- inherits: false,
2360
- initialValue
2361
- });
2362
- function gradientVars(name) {
2363
- return {
2364
- [`--mask-${name}`]: image,
2365
- [`--mask-${name}-from-color`]: color("black"),
2366
- [`--mask-${name}-to-color`]: color("transparent"),
2367
- [`--mask-${name}-from-position`]: position("0%"),
2368
- [`--mask-${name}-to-position`]: position("100%")
2369
- };
2370
- }
2371
- var maskVars = Object.assign(
2372
- {},
2373
- ...[...LAYERS, ...EDGES].map(gradientVars),
2374
- ...LAYERS.map((layer) => ({ [`--mask-${layer}-stops`]: composedList })),
2375
- {
2376
- // `to bottom` is as valid here as `45deg`.
2377
- "--mask-linear-position": keyword("0deg"),
2378
- "--mask-conic-position": keyword("0deg"),
2379
- "--mask-radial-position": keyword("center"),
2380
- "--mask-radial-shape": keyword("ellipse"),
2381
- "--mask-radial-size": keyword("farthest-corner"),
2382
- "--mask-composite": keyword("intersect"),
2383
- "--mask-composite-webkit": keyword("source-in")
2384
- }
2385
- );
2386
- function cssProps(styles) {
2387
- return styles;
2388
- }
2389
- function maskLayers(layers) {
2390
- return {
2391
- WebkitMaskImage: MASK_IMAGE,
2392
- maskImage: MASK_IMAGE,
2393
- WebkitMaskComposite: maskVar("composite-webkit"),
2394
- maskComposite: maskVar("composite"),
2395
- ...layers
2396
- };
2397
- }
2398
- function stopList(name) {
2399
- return `${maskVar(`${name}-from-color`)} ${maskVar(`${name}-from-position`)}, ${maskVar(`${name}-to-color`)} ${maskVar(`${name}-to-position`)}`;
2400
- }
2401
- function edgeLayers(edges) {
2402
- const layers = { "--mask-linear": MASK_EDGES };
2403
- for (const edge of edges) layers[`--mask-${edge}`] = `linear-gradient(to ${edge}, ${stopList(edge)})`;
2404
- return maskLayers(layers);
2405
- }
2406
- var GEOMETRY = {
2407
- linear: { fn: "linear-gradient", head: maskVar("linear-position") },
2408
- radial: {
2409
- fn: "radial-gradient",
2410
- head: `${maskVar("radial-shape")} ${maskVar("radial-size")} at ${maskVar("radial-position")}`
2411
- },
2412
- conic: { fn: "conic-gradient", head: `from ${maskVar("conic-position")}` }
2413
- };
2414
- function gradientLayer(layer) {
2415
- const { fn, head } = GEOMETRY[layer];
2416
- return maskLayers({
2417
- [`--mask-${layer}-stops`]: `${head}, ${stopList(layer)}`,
2418
- [`--mask-${layer}`]: `${fn}(${maskVar(`${layer}-stops`)})`
2419
- });
2420
- }
2421
- function positionStop(className, vars, wiring) {
2422
- return {
2423
- className,
2424
- values: "spacing",
2425
- group: "Mask",
2426
- globalVars: maskVars,
2427
- transform(value) {
2428
- const stops = Object.fromEntries(vars.map((name) => [`--mask-${name}`, value]));
2429
- return cssProps({ ...wiring(), ...stops });
2430
- }
2431
- };
2432
- }
2433
- function colorStop(className, vars, wiring) {
2434
- return {
2435
- className,
2436
- values: "colors",
2437
- group: "Mask",
2438
- globalVars: maskVars,
2439
- transform(value, args) {
2440
- const stops = {};
2441
- for (const name of vars) Object.assign(stops, createColorMixTransform(`--mask-${name}`)(value, args));
2442
- return cssProps({ ...wiring(), ...stops });
2443
- }
2444
- };
2445
- }
2446
- function stopProps(prop, className, targets, wiring) {
2447
- const vars = (suffix) => targets.map((target) => `${target}-${suffix}`);
2448
- return {
2449
- [`${prop}From`]: positionStop(`${className}-from`, vars("from-position"), wiring),
2450
- [`${prop}To`]: positionStop(`${className}-to`, vars("to-position"), wiring),
2451
- [`${prop}FromColor`]: colorStop(`${className}-from-c`, vars("from-color"), wiring),
2452
- [`${prop}ToColor`]: colorStop(`${className}-to-c`, vars("to-color"), wiring)
2453
- };
2454
- }
2455
- var EDGE_GROUPS = [
2456
- ["Top", "t", ["top"]],
2457
- ["Right", "r", ["right"]],
2458
- ["Bottom", "b", ["bottom"]],
2459
- ["Left", "l", ["left"]],
2460
- ["X", "x", ["left", "right"]],
2461
- ["Y", "y", ["top", "bottom"]]
2462
- ];
2463
- var edgeProps = Object.assign(
2464
- {},
2465
- ...EDGE_GROUPS.map(
2466
- ([name, short, edges]) => stopProps(`mask${name}`, `msk-${short}`, edges, () => edgeLayers(edges))
2467
- )
2468
- );
2469
- var layerProps = (layer) => stopProps(`mask${layer[0].toUpperCase()}${layer.slice(1)}`, `msk-${layer}`, [layer], () => gradientLayer(layer));
2470
- function prefixed(prop, className) {
2471
- const webkit = `Webkit${prop[0].toUpperCase()}${prop.slice(1)}`;
2472
- return {
2473
- className,
2474
- group: "Mask",
2475
- transform(value) {
2476
- return cssProps({ [webkit]: value, [prop]: value });
2477
- }
2478
- };
2479
- }
2480
- var webkitMaskComposite = {
2481
- add: "source-over",
2482
- subtract: "source-out",
2483
- intersect: "source-in",
2484
- exclude: "xor"
2485
- };
2486
- var POSITION = {
2487
- center: "center",
2488
- top: "top",
2489
- bottom: "bottom",
2490
- left: "left",
2491
- right: "right"
2492
- };
2493
- var linearDirectionMap = /* @__PURE__ */ new Map([
2494
- ["to-t", "to top"],
2495
- ["to-tr", "to top right"],
2496
- ["to-r", "to right"],
2497
- ["to-br", "to bottom right"],
2498
- ["to-b", "to bottom"],
2499
- ["to-bl", "to bottom left"],
2500
- ["to-l", "to left"],
2501
- ["to-tl", "to top left"]
2502
- ]);
2503
- var maskLinearValues = () => Object.fromEntries(linearDirectionMap.entries());
2504
- function asAngle(raw, value) {
2505
- if (/^-?\d+(\.\d+)?$/.test(raw)) return `${raw}deg`;
2506
- return value;
2507
- }
2508
- var varOnly = (name, className, values) => ({
2509
- className,
2510
- group: "Mask",
2511
- globalVars: maskVars,
2512
- values,
2513
- transform: (value) => ({ [`--mask-${name}`]: value })
2514
- });
2515
- var mask = {
2516
- mask: prefixed("mask", "msk"),
2517
- maskImage: prefixed("maskImage", "msk-i"),
2518
- maskSize: prefixed("maskSize", "msk-s"),
2519
- maskPosition: prefixed("maskPosition", "msk-p"),
2520
- maskRepeat: prefixed("maskRepeat", "msk-r"),
2521
- maskClip: prefixed("maskClip", "msk-cp"),
2522
- maskOrigin: prefixed("maskOrigin", "msk-o"),
2523
- maskComposite: {
2524
- className: "msk-cmp",
2525
- group: "Mask",
2526
- globalVars: maskVars,
2527
- // Via variables so class order can't decide — every fade helper emits this same pair.
2528
- transform(value) {
2529
- return cssProps({
2530
- "--mask-composite": value,
2531
- "--mask-composite-webkit": webkitMaskComposite[value] ?? value,
2532
- WebkitMaskComposite: maskVar("composite-webkit"),
2533
- maskComposite: maskVar("composite")
2534
- });
2535
- }
2536
- },
2537
- maskMode: { className: "msk-md", group: "Mask" },
2538
- maskType: { className: "msk-t", group: "Mask" },
2539
- ...edgeProps,
2540
- maskLinear: {
2541
- className: "msk-linear",
2542
- group: "Mask",
2543
- globalVars: maskVars,
2544
- values: maskLinearValues,
2545
- transform(value, { raw }) {
2546
- const angle = linearDirectionMap.get(String(raw)) ?? asAngle(String(raw), value);
2547
- return cssProps({ ...gradientLayer("linear"), "--mask-linear-position": angle });
2548
- }
2549
- },
2550
- ...layerProps("linear"),
2551
- maskRadial: {
2552
- className: "msk-radial",
2553
- group: "Mask",
2554
- globalVars: maskVars,
2555
- transform(value) {
2556
- return cssProps({ ...gradientLayer("radial"), "--mask-radial-size": value });
2557
- }
2558
- },
2559
- ...layerProps("radial"),
2560
- maskRadialAt: varOnly("radial-position", "msk-radial-at", {
2561
- ...POSITION,
2562
- "top left": "top left",
2563
- "top right": "top right",
2564
- "bottom left": "bottom left",
2565
- "bottom right": "bottom right"
2566
- }),
2567
- maskRadialSize: varOnly("radial-size", "msk-radial-sz", {
2568
- "closest-side": "closest-side",
2569
- "closest-corner": "closest-corner",
2570
- "farthest-side": "farthest-side",
2571
- "farthest-corner": "farthest-corner"
2572
- }),
2573
- maskRadialShape: varOnly("radial-shape", "msk-radial-shape", { circle: "circle", ellipse: "ellipse" }),
2574
- maskConic: {
2575
- className: "msk-conic",
2576
- group: "Mask",
2577
- globalVars: maskVars,
2578
- transform(value, { raw }) {
2579
- return cssProps({ ...gradientLayer("conic"), "--mask-conic-position": asAngle(String(raw), value) });
2580
- }
2581
- },
2582
- ...layerProps("conic")
2583
- };
2584
-
2585
- // src/utilities/outline.ts
2586
- var outline = {
2587
- outlineWidth: {
2588
- className: "ring-w",
2589
- shorthand: "ringWidth",
2590
- values: "borderWidths",
2591
- group: "Border"
2592
- },
2593
- outlineColor: {
2594
- className: "ring-c",
2595
- values: "colors",
2596
- group: "Color",
2597
- shorthand: "ringColor",
2598
- transform: createColorMixTransform("outlineColor")
2599
- },
2600
- outline: {
2601
- className: "ring",
2602
- shorthand: "ring",
2603
- values: "borders",
2604
- group: "Border",
2605
- transform(value) {
2606
- if (value === "none") {
2607
- return { outline: "2px solid transparent", outlineOffset: "2px" };
2608
- }
2609
- return { outline: value };
2610
- }
2611
- },
2612
- outlineOffset: {
2613
- className: "ring-o",
2614
- shorthand: "ringOffset",
2615
- values: "spacing",
2616
- group: "Border"
2617
- }
2618
- };
2619
-
2620
- // src/utilities/polyfill.ts
2621
- var polyfill = {
2622
- appearance: {
2623
- className: "ap",
2624
- group: "Visibility",
2625
- transform(value) {
2626
- return { WebkitAppearance: value, appearance: value };
2627
- }
2628
- },
2629
- backfaceVisibility: {
2630
- className: "bfv",
2631
- group: "Visibility",
2632
- transform(value) {
2633
- return { WebkitBackfaceVisibility: value, backfaceVisibility: value };
2634
- }
2635
- },
2636
- clipPath: {
2637
- className: "cp-path",
2638
- group: "Other",
2639
- transform(value) {
2640
- return { WebkitClipPath: value, clipPath: value };
2641
- }
2642
- },
2643
- hyphens: {
2644
- className: "hy",
2645
- group: "Other",
2646
- transform(value) {
2647
- return { WebkitHyphens: value, hyphens: value };
2648
- }
2649
- },
2650
- textSizeAdjust: {
2651
- className: "txt-adj",
2652
- group: "Typography",
2653
- transform(value) {
2654
- return { WebkitTextSizeAdjust: value, textSizeAdjust: value };
2655
- }
2656
- }
2657
- };
2658
-
2659
- // src/utilities/sizing.ts
2660
- var widthValues = (theme) => ({
2661
- auto: "auto",
2662
- ...theme("sizes"),
2663
- "1/2": "50%",
2664
- "1/3": "33.333333%",
2665
- "2/3": "66.666667%",
2666
- "1/4": "25%",
2667
- "2/4": "50%",
2668
- "3/4": "75%",
2669
- "1/5": "20%",
2670
- "2/5": "40%",
2671
- "3/5": "60%",
2672
- "4/5": "80%",
2673
- "1/6": "16.666667%",
2674
- "2/6": "33.333333%",
2675
- "3/6": "50%",
2676
- "4/6": "66.666667%",
2677
- "5/6": "83.333333%",
2678
- "1/12": "8.333333%",
2679
- "2/12": "16.666667%",
2680
- "3/12": "25%",
2681
- "4/12": "33.333333%",
2682
- "5/12": "41.666667%",
2683
- "6/12": "50%",
2684
- "7/12": "58.333333%",
2685
- "8/12": "66.666667%",
2686
- "9/12": "75%",
2687
- "10/12": "83.333333%",
2688
- "11/12": "91.666667%",
2689
- screen: "100vw"
2690
- });
2691
- var heightValues = (theme) => ({
2692
- auto: "auto",
2693
- ...theme("sizes"),
2694
- svh: "100svh",
2695
- lvh: "100lvh",
2696
- dvh: "100dvh",
2697
- screen: "100vh",
2698
- "1/2": "50%",
2699
- "1/3": "33.333333%",
2700
- "2/3": "66.666667%",
2701
- "1/4": "25%",
2702
- "2/4": "50%",
2703
- "3/4": "75%",
2704
- "1/5": "20%",
2705
- "2/5": "40%",
2706
- "3/5": "60%",
2707
- "4/5": "80%",
2708
- "1/6": "16.666667%",
2709
- "2/6": "33.333333%",
2710
- "3/6": "50%",
2711
- "4/6": "66.666667%",
2712
- "5/6": "83.333333%"
2713
- });
2714
- var sizing = {
2715
- width: {
2716
- shorthand: "w",
2717
- className: "w",
2718
- group: "Width",
2719
- values: widthValues
2720
- },
2721
- inlineSize: {
2722
- className: "w-is",
2723
- group: "Width",
2724
- values: widthValues
2725
- },
2726
- minWidth: {
2727
- shorthand: "minW",
2728
- className: "min-w",
2729
- group: "Width",
2730
- values: widthValues
2731
- },
2732
- minInlineSize: {
2733
- className: "min-w-is",
2734
- group: "Width",
2735
- values: widthValues
2736
- },
2737
- maxWidth: {
2738
- shorthand: "maxW",
2739
- className: "max-w",
2740
- group: "Width",
2741
- values: widthValues
2742
- },
2743
- maxInlineSize: {
2744
- className: "max-w-is",
2745
- group: "Width",
2746
- values: widthValues
2747
- },
2748
- height: {
2749
- shorthand: "h",
2750
- className: "h",
2751
- group: "Height",
2752
- values: heightValues
2753
- },
2754
- blockSize: {
2755
- className: "h-bs",
2756
- group: "Height",
2757
- values: heightValues
2758
- },
2759
- minHeight: {
2760
- shorthand: "minH",
2761
- className: "min-h",
2762
- group: "Height",
2763
- values: heightValues
2764
- },
2765
- minBlockSize: {
2766
- className: "min-h-bs",
2767
- group: "Height",
2768
- values: heightValues
2769
- },
2770
- maxHeight: {
2771
- shorthand: "maxH",
2772
- className: "max-h",
2773
- group: "Height",
2774
- values: heightValues
2775
- },
2776
- maxBlockSize: {
2777
- className: "max-b",
2778
- group: "Height",
2779
- values: heightValues
2780
- },
2781
- boxSize: {
2782
- className: "size",
2783
- group: "Width",
2784
- values: widthValues,
2785
- transform(value) {
2786
- return {
2787
- width: value,
2788
- height: value
2789
- };
2790
- }
2791
- }
2792
- };
2793
-
2794
- // src/utilities/spacing.ts
2795
- var marginValues = (theme) => ({
2796
- auto: "auto",
2797
- ...theme("spacing")
2798
- });
2799
- var spacing = {
2800
- padding: {
2801
- className: "p",
2802
- shorthand: "p",
2803
- values: "spacing",
2804
- group: "Padding"
2805
- },
2806
- paddingLeft: {
2807
- className: "pl",
2808
- shorthand: "pl",
2809
- values: "spacing",
2810
- group: "Padding"
2811
- },
2812
- paddingRight: {
2813
- className: "pr",
2814
- shorthand: "pr",
2815
- values: "spacing",
2816
- group: "Padding"
2817
- },
2818
- paddingTop: {
2819
- className: "pt",
2820
- shorthand: "pt",
2821
- values: "spacing",
2822
- group: "Padding"
2823
- },
2824
- paddingBottom: {
2825
- className: "pb",
2826
- shorthand: "pb",
2827
- values: "spacing",
2828
- group: "Padding"
2829
- },
2830
- paddingBlock: {
2831
- className: "py",
2832
- values: "spacing",
2833
- group: "Padding",
2834
- shorthand: ["py", "paddingY"]
2835
- },
2836
- paddingBlockEnd: {
2837
- className: "pbe",
2838
- values: "spacing",
2839
- group: "Padding"
2840
- },
2841
- paddingBlockStart: {
2842
- className: "pbs",
2843
- values: "spacing",
2844
- group: "Padding"
2845
- },
2846
- paddingInline: {
2847
- className: "px",
2848
- values: "spacing",
2849
- group: "Padding",
2850
- shorthand: ["paddingX", "px"]
2851
- },
2852
- paddingInlineEnd: {
2853
- className: "pe",
2854
- shorthand: ["pe", "paddingEnd"],
2855
- values: "spacing",
2856
- group: "Padding"
2857
- },
2858
- paddingInlineStart: {
2859
- className: "ps",
2860
- shorthand: ["ps", "paddingStart"],
2861
- values: "spacing",
2862
- group: "Padding"
2863
- },
2864
- marginLeft: {
2865
- className: "ml",
2866
- shorthand: "ml",
2867
- values: marginValues,
2868
- group: "Margin"
2869
- },
2870
- marginRight: {
2871
- className: "mr",
2872
- shorthand: "mr",
2873
- values: marginValues,
2874
- group: "Margin"
2875
- },
2876
- marginTop: {
2877
- className: "mt",
2878
- shorthand: "mt",
2879
- values: marginValues,
2880
- group: "Margin"
2881
- },
2882
- marginBottom: {
2883
- className: "mb",
2884
- shorthand: "mb",
2885
- values: marginValues,
2886
- group: "Margin"
2887
- },
2888
- margin: {
2889
- className: "m",
2890
- shorthand: "m",
2891
- values: marginValues,
2892
- group: "Margin"
2893
- },
2894
- marginBlock: {
2895
- className: "my",
2896
- values: marginValues,
2897
- group: "Margin",
2898
- shorthand: ["my", "marginY"]
2899
- },
2900
- marginBlockEnd: {
2901
- className: "mbe",
2902
- values: marginValues,
2903
- group: "Margin"
2904
- },
2905
- marginBlockStart: {
2906
- className: "mbs",
2907
- values: marginValues,
2908
- group: "Margin"
2909
- },
2910
- marginInline: {
2911
- className: "mx",
2912
- values: marginValues,
2913
- group: "Margin",
2914
- shorthand: ["mx", "marginX"]
2915
- },
2916
- marginInlineEnd: {
2917
- className: "me",
2918
- shorthand: ["me", "marginEnd"],
2919
- values: marginValues,
2920
- group: "Margin"
2921
- },
2922
- marginInlineStart: {
2923
- className: "ms",
2924
- shorthand: ["ms", "marginStart"],
2925
- values: marginValues,
2926
- group: "Margin"
2927
- },
2928
- spaceX: {
2929
- className: "sx",
2930
- values: marginValues,
2931
- property: "marginInlineStart",
2932
- group: "Margin",
2933
- transform(value) {
2934
- return {
2935
- "& > :not([hidden]) ~ :not([hidden])": {
2936
- marginInlineStart: value,
2937
- marginInlineEnd: "0px"
2938
- }
2939
- };
2940
- }
2941
- },
2942
- spaceY: {
2943
- className: "sy",
2944
- values: marginValues,
2945
- property: "marginBlockStart",
2946
- group: "Margin",
2947
- transform(value) {
2948
- return {
2949
- "& > :not([hidden]) ~ :not([hidden])": {
2950
- marginTop: value,
2951
- marginBottom: "0px"
2952
- }
2953
- };
2954
- }
2955
- }
2956
- };
2957
-
2958
- // src/utilities/svg.ts
2959
- var svg = {
2960
- fill: {
2961
- className: "fill",
2962
- values: "colors",
2963
- group: "Color",
2964
- transform: createColorMixTransform("fill")
2965
- },
2966
- stroke: {
2967
- className: "stk",
2968
- values: "colors",
2969
- group: "Color",
2970
- transform: createColorMixTransform("stroke")
2971
- },
2972
- strokeWidth: {
2973
- className: "stk-w",
2974
- values: "borderWidths",
2975
- group: "Border"
2976
- },
2977
- strokeDasharray: {
2978
- className: "stk-dsh",
2979
- group: "Border"
2980
- },
2981
- strokeDashoffset: {
2982
- className: "stk-do",
2983
- group: "Border"
2984
- },
2985
- strokeLinecap: {
2986
- className: "stk-lc",
2987
- group: "Border"
2988
- },
2989
- strokeLinejoin: {
2990
- className: "stk-lj",
2991
- group: "Border"
2992
- },
2993
- strokeMiterlimit: {
2994
- className: "stk-ml",
2995
- group: "Border"
2996
- },
2997
- strokeOpacity: {
2998
- className: "stk-op",
2999
- group: "Border"
3000
- }
3001
- };
3002
-
3003
- // src/utilities/tables.ts
3004
- var tables = {
3005
- borderCollapse: {
3006
- className: "bd-cl",
3007
- group: "Table"
3008
- },
3009
- borderSpacing: {
3010
- className: "bd-sp",
3011
- group: "Table",
3012
- values(theme) {
3013
- return {
3014
- ...theme("spacing"),
3015
- auto: "var(--border-spacing-x) var(--border-spacing-y)"
3016
- };
3017
- }
3018
- },
3019
- borderSpacingX: {
3020
- className: "bd-sx",
3021
- values: "spacing",
3022
- group: "Table",
3023
- globalVars: { "--border-spacing-x": cssVar("<length>", "0") },
3024
- transform(value) {
3025
- return {
3026
- "--border-spacing-x": value
3027
- };
3028
- }
3029
- },
3030
- borderSpacingY: {
3031
- className: "bd-sy",
3032
- values: "spacing",
3033
- group: "Table",
3034
- globalVars: { "--border-spacing-y": cssVar("<length>", "0") },
3035
- transform(value) {
3036
- return {
3037
- "--border-spacing-y": value
3038
- };
3039
- }
3040
- },
3041
- tableLayout: {
3042
- className: "tbl",
3043
- group: "Table"
3044
- }
3045
- };
3046
-
3047
- // src/utilities/transforms.ts
3048
- var length = () => cssVar("<length-percentage>", "0");
3049
- var ROTATE_AXES = ["x", "y", "z"].map((axis) => `var(--rotate-${axis},)`).join(" ");
3050
- var positiveFractions = {
3051
- "1/2": "50%",
3052
- "1/3": "33.333333%",
3053
- "2/3": "66.666667%",
3054
- "1/4": "25%",
3055
- "2/4": "50%",
3056
- "3/4": "75%",
3057
- full: "100%"
3058
- };
3059
- var negativeFractions = Object.fromEntries(
3060
- Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`])
3061
- );
3062
- var fractions = { ...positiveFractions, ...negativeFractions };
3063
- var transforms = {
3064
- transformOrigin: {
3065
- className: "trf-o",
3066
- group: "Transform"
3067
- },
3068
- transformBox: {
3069
- className: "trf-b",
3070
- group: "Transform"
3071
- },
3072
- transformStyle: {
3073
- className: "trf-s",
3074
- group: "Transform"
3075
- },
3076
- transform: {
3077
- className: "trf",
3078
- group: "Transform"
3079
- },
3080
- rotate: {
3081
- className: "rotate",
3082
- group: "Transform",
3083
- property: "rotate",
3084
- // `auto-3d` is an alias: an unset axis contributes nothing either way.
3085
- values: { auto: "auto", "auto-3d": "auto" },
3086
- transform(value) {
3087
- return value === "auto" ? { transform: ROTATE_AXES } : { rotate: value };
3088
- }
3089
- },
3090
- rotateX: {
3091
- className: "rotate-x",
3092
- group: "Transform",
3093
- property: "rotate",
3094
- globalVars: { "--rotate-x": anyVar() },
3095
- transform(value) {
3096
- return {
3097
- "--rotate-x": `rotateX(${value})`
3098
- };
3099
- }
3100
- },
3101
- rotateY: {
3102
- className: "rotate-y",
3103
- group: "Transform",
3104
- property: "rotate",
3105
- globalVars: { "--rotate-y": anyVar() },
3106
- transform(value) {
3107
- return {
3108
- "--rotate-y": `rotateY(${value})`
3109
- };
3110
- }
3111
- },
3112
- rotateZ: {
3113
- className: "rotate-z",
3114
- group: "Transform",
3115
- property: "rotate",
3116
- globalVars: { "--rotate-z": anyVar() },
3117
- transform(value) {
3118
- return {
3119
- "--rotate-z": `rotateZ(${value})`
3120
- };
3121
- }
3122
- },
3123
- scale: {
3124
- className: "scale",
3125
- group: "Transform",
3126
- property: "scale",
3127
- values: {
3128
- auto: "var(--scale-x) var(--scale-y)"
3129
- }
3130
- },
3131
- scaleX: {
3132
- className: "scale-x",
3133
- group: "Transform",
3134
- globalVars: { "--scale-x": anyVar("1") },
3135
- transform(value) {
3136
- return {
3137
- "--scale-x": value
3138
- };
3139
- }
3140
- },
3141
- scaleY: {
3142
- className: "scale-y",
3143
- group: "Transform",
3144
- globalVars: { "--scale-y": anyVar("1") },
3145
- transform(value) {
3146
- return {
3147
- "--scale-y": value
3148
- };
3149
- }
3150
- },
3151
- translate: {
3152
- className: "translate",
3153
- group: "Transform",
3154
- property: "translate",
3155
- values: {
3156
- auto: "var(--translate-x) var(--translate-y)",
3157
- "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)"
3158
- }
3159
- },
3160
- translateX: {
3161
- shorthand: "x",
3162
- className: "translate-x",
3163
- group: "Transform",
3164
- globalVars: { "--translate-x": length() },
3165
- values(theme) {
3166
- return {
3167
- ...theme("spacing"),
3168
- ...fractions
3169
- };
3170
- },
3171
- transform(value) {
3172
- return {
3173
- "--translate-x": value
3174
- };
3175
- }
3176
- },
3177
- translateY: {
3178
- shorthand: "y",
3179
- className: "translate-y",
3180
- group: "Transform",
3181
- globalVars: { "--translate-y": length() },
3182
- values(theme) {
3183
- return {
3184
- ...theme("spacing"),
3185
- ...fractions
3186
- };
3187
- },
3188
- transform(value) {
3189
- return {
3190
- "--translate-y": value
3191
- };
3192
- }
3193
- },
3194
- translateZ: {
3195
- shorthand: "z",
3196
- className: "translate-z",
3197
- group: "Transform",
3198
- // `<length>`, not `<length-percentage>`: the third slot of `translate` rejects a
3199
- // percentage, and a stray one would take x and y down with it.
3200
- globalVars: { "--translate-z": cssVar("<length>", "0") },
3201
- values(theme) {
3202
- return theme("spacing");
3203
- },
3204
- transform(value) {
3205
- return {
3206
- "--translate-z": value
3207
- };
3208
- }
3209
- }
3210
- };
3211
-
3212
- // src/utilities/transitions.ts
3213
- var createTransition = (value) => ({
3214
- transitionProperty: `var(--transition-prop, ${value})`,
3215
- transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
3216
- transitionDuration: "var(--transition-duration, 150ms)"
3217
- });
3218
- var transitionMap = {
3219
- all: createTransition("all"),
3220
- common: createTransition(
3221
- "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
3222
- ),
3223
- size: createTransition("width, height, min-width, max-width, min-height, max-height"),
3224
- position: createTransition("left, right, top, bottom, inset, inset-inline, inset-block"),
3225
- background: createTransition("background, background-color, background-image, background-position"),
3226
- colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
3227
- opacity: createTransition("opacity"),
3228
- shadow: createTransition("box-shadow"),
3229
- transform: createTransition("transform")
3230
- };
3231
- var transitionPropertyMap = {
3232
- common: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
3233
- colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke",
3234
- size: "width, height, min-width, max-width, min-height, max-height",
3235
- position: "left, right, top, bottom, inset, inset-inline, inset-block",
3236
- background: "background, background-color, background-image, background-position"
3237
- };
3238
- var transitions = {
3239
- transitionTimingFunction: {
3240
- className: "trs-tmf",
3241
- values: "easings",
3242
- group: "Transition",
3243
- transform(value) {
3244
- return {
3245
- "--transition-easing": value,
3246
- transitionTimingFunction: value
3247
- };
3248
- }
3249
- },
3250
- transitionDelay: {
3251
- className: "trs-dly",
3252
- values: "durations",
3253
- group: "Transition"
3254
- },
3255
- transitionDuration: {
3256
- className: "trs-dur",
3257
- values: "durations",
3258
- group: "Transition",
3259
- transform(value) {
3260
- return {
3261
- "--transition-duration": value,
3262
- transitionDuration: value
3263
- };
3264
- }
3265
- },
3266
- transitionProperty: {
3267
- className: "trs-prop",
3268
- group: "Transition",
3269
- values: transitionPropertyMap,
3270
- transform(value) {
3271
- return {
3272
- "--transition-prop": value,
3273
- transitionProperty: value
3274
- };
3275
- }
3276
- },
3277
- transition: {
3278
- className: "trs",
3279
- values: Object.keys(transitionMap),
3280
- group: "Transition",
3281
- transform(value) {
3282
- return transitionMap[value] ?? { transition: value };
3283
- }
3284
- },
3285
- // Animations
3286
- animation: {
3287
- className: "anim",
3288
- values: "animations",
3289
- group: "Animation"
3290
- },
3291
- animationName: {
3292
- className: "anim-n",
3293
- values: "keyframes",
3294
- group: "Animation"
3295
- },
3296
- animationTimingFunction: {
3297
- className: "anim-tmf",
3298
- values: "easings",
3299
- group: "Animation"
3300
- },
3301
- animationDuration: {
3302
- className: "anim-dur",
3303
- values: "durations",
3304
- group: "Animation"
3305
- },
3306
- animationDelay: {
3307
- className: "anim-dly",
3308
- values: "durations",
3309
- group: "Animation"
3310
- },
3311
- animationPlayState: {
3312
- className: "anim-ps",
3313
- group: "Animation"
3314
- },
3315
- animationComposition: {
3316
- className: "anim-comp",
3317
- group: "Animation"
3318
- },
3319
- animationFillMode: {
3320
- className: "anim-fm",
3321
- group: "Animation"
3322
- },
3323
- animationDirection: {
3324
- className: "anim-dir",
3325
- group: "Animation"
3326
- },
3327
- animationIterationCount: {
3328
- className: "anim-ic",
3329
- group: "Animation"
3330
- },
3331
- animationRange: {
3332
- className: "anim-r",
3333
- group: "Animation"
3334
- },
3335
- animationState: {
3336
- className: "anim-s",
3337
- group: "Animation"
3338
- },
3339
- animationRangeStart: {
3340
- className: "anim-rs",
3341
- group: "Animation"
3342
- },
3343
- animationRangeEnd: {
3344
- className: "anim-re",
3345
- group: "Animation"
3346
- },
3347
- animationTimeline: {
3348
- className: "anim-tl",
3349
- group: "Animation"
3350
- }
3351
- };
3352
-
3353
- // src/utilities/typography.ts
3354
- var typography = {
3355
- color: {
3356
- className: "c",
3357
- values: "colors",
3358
- group: "Color",
3359
- transform: createColorMixTransform("color")
3360
- },
3361
- fontFamily: {
3362
- className: "ff",
3363
- values: "fonts",
3364
- group: "Typography"
3365
- },
3366
- fontSize: {
3367
- className: "fs",
3368
- values: "fontSizes",
3369
- group: "Typography"
3370
- },
3371
- fontSizeAdjust: {
3372
- className: "fs-a",
3373
- group: "Typography"
3374
- },
3375
- fontPalette: {
3376
- className: "fp",
3377
- group: "Typography"
3378
- },
3379
- fontKerning: {
3380
- className: "fk",
3381
- group: "Typography"
3382
- },
3383
- fontFeatureSettings: {
3384
- className: "ff-s",
3385
- group: "Typography"
3386
- },
3387
- fontWeight: {
3388
- className: "fw",
3389
- values: "fontWeights",
3390
- group: "Typography"
3391
- },
3392
- fontSmoothing: {
3393
- className: "fsmt",
3394
- group: "Typography",
3395
- values: {
3396
- antialiased: "antialiased",
3397
- "subpixel-antialiased": "auto"
3398
- },
3399
- transform(value) {
3400
- return {
3401
- WebkitFontSmoothing: value
3402
- };
3403
- }
3404
- },
3405
- fontVariant: {
3406
- className: "fv",
3407
- group: "Typography"
3408
- },
3409
- fontVariantAlternates: {
3410
- className: "fv-alt",
3411
- group: "Typography"
3412
- },
3413
- fontVariantCaps: {
3414
- className: "fv-caps",
3415
- group: "Typography"
3416
- },
3417
- fontVariationSettings: {
3418
- className: "fv-s",
3419
- group: "Typography"
3420
- },
3421
- fontVariantNumeric: {
3422
- className: "fv-num",
3423
- group: "Typography"
3424
- },
3425
- letterSpacing: {
3426
- className: "ls",
3427
- values: "letterSpacings",
3428
- group: "Typography"
3429
- },
3430
- lineHeight: {
3431
- className: "lh",
3432
- values: "lineHeights",
3433
- group: "Typography"
3434
- },
3435
- textAlign: {
3436
- className: "ta",
3437
- group: "Typography"
3438
- },
3439
- textDecoration: {
3440
- className: "td",
3441
- group: "Typography"
3442
- },
3443
- textDecorationColor: {
3444
- className: "td-c",
3445
- values: "colors",
3446
- transform: createColorMixTransform("textDecorationColor"),
3447
- group: "Typography"
3448
- },
3449
- textEmphasisColor: {
3450
- className: "te-c",
3451
- values: "colors",
3452
- transform: createColorMixTransform("textEmphasisColor"),
3453
- group: "Typography"
3454
- },
3455
- textDecorationStyle: {
3456
- className: "td-s",
3457
- group: "Typography"
3458
- },
3459
- textDecorationThickness: {
3460
- className: "td-t",
3461
- group: "Typography"
3462
- },
3463
- textUnderlineOffset: {
3464
- className: "tu-o",
3465
- group: "Typography"
3466
- },
3467
- textTransform: {
3468
- className: "tt",
3469
- group: "Typography"
3470
- },
3471
- textIndent: {
3472
- className: "ti",
3473
- group: "Typography",
3474
- values: "spacing"
3475
- },
3476
- textShadow: {
3477
- className: "tsh",
3478
- values: "shadows",
3479
- group: "Typography"
3480
- },
3481
- textShadowColor: {
3482
- shorthand: "textShadowColor",
3483
- className: "tsh-c",
3484
- values: "colors",
3485
- transform: createColorMixTransform("--text-shadow-color"),
3486
- group: "Typography"
3487
- },
3488
- WebkitTextFillColor: {
3489
- className: "wktf-c",
3490
- values: "colors",
3491
- transform: createColorMixTransform("WebkitTextFillColor"),
3492
- group: "Typography"
3493
- },
3494
- textOverflow: {
3495
- className: "tov",
3496
- group: "Typography"
3497
- },
3498
- verticalAlign: {
3499
- className: "va",
3500
- group: "Typography"
3501
- },
3502
- wordBreak: {
3503
- className: "wb",
3504
- group: "Typography"
3505
- },
3506
- textWrap: {
3507
- className: "tw",
3508
- group: "Typography"
3509
- },
3510
- truncate: {
3511
- className: "trunc",
3512
- values: { type: "boolean" },
3513
- group: "Typography",
3514
- transform(value) {
3515
- if (!value) return {};
3516
- return {
3517
- overflow: "hidden",
3518
- textOverflow: "ellipsis",
3519
- whiteSpace: "nowrap"
3520
- };
3521
- }
3522
- },
3523
- lineClamp: {
3524
- className: "lc",
3525
- group: "Typography",
3526
- transform(value) {
3527
- if (value === "none") {
3528
- return {
3529
- WebkitLineClamp: "unset"
3530
- };
3531
- }
3532
- return {
3533
- overflow: "hidden",
3534
- display: "-webkit-box",
3535
- WebkitLineClamp: value,
3536
- WebkitBoxOrient: "vertical"
3537
- };
3538
- }
3539
- }
3540
- };
3541
-
3542
- // src/utilities/index.ts
3543
- var utilities = Object.assign(
3544
- {},
3545
- layout,
3546
- mask,
3547
- display,
3548
- flexGrid,
3549
- spacing,
3550
- outline,
3551
- focusRing,
3552
- divide,
3553
- sizing,
3554
- typography,
3555
- list,
3556
- background,
3557
- backgroundGradients,
3558
- border,
3559
- effects,
3560
- tables,
3561
- transitions,
3562
- transforms,
3563
- interactivity,
3564
- svg,
3565
- helpers,
3566
- polyfill,
3567
- container2,
3568
- cursor
3569
- );
3570
-
3571
- // src/index.ts
3572
- var definePreset = (preset2) => preset2;
3573
- var preset = definePreset({
3574
- name: "@pandacss/preset-base",
3575
- conditions,
3576
- utilities,
3577
- patterns
3578
- });
3579
- var index_default = preset;
3580
- export {
3581
- index_default as default,
3582
- preset
3583
- };