vunor 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/theme.d.mts +3 -4
  2. package/dist/theme.mjs +169 -135
  3. package/package.json +1 -1
package/dist/theme.d.mts CHANGED
@@ -333,6 +333,9 @@ declare const presetVunor: PresetFactory<TVunorTheme, TVunorUnoPresetOpts & {
333
333
  palette?: TVunorPaletteOptions;
334
334
  }>;
335
335
  //#endregion
336
+ //#region src/theme/shortcuts/raw.d.ts
337
+ declare const rawVunorShortcuts: TVunorShortcut[];
338
+ //#endregion
336
339
  //#region src/theme/utils/shortcut-obj.d.ts
337
340
  /**
338
341
  * Build uno shortcut from vunor shortcut object
@@ -354,10 +357,6 @@ declare const componentClasses: Record<string, string[]>;
354
357
  declare function getComponentClasses(...components: string[]): string[];
355
358
  //#endregion
356
359
  //#region src/theme.d.ts
357
- /**
358
- * Array of raw vunor shortcuts (not merged)
359
- */
360
- declare const rawVunorShortcuts: TVunorShortcut[];
361
360
  /**
362
361
  * Vunor shortcuts (merged version of rawVunorShortcuts)
363
362
  */
package/dist/theme.mjs CHANGED
@@ -358,132 +358,137 @@ const disabledSoft = defineShortcuts({ "disabled-soft": {
358
358
  "data-[disabled]:": disabledPaint
359
359
  } });
360
360
  //#endregion
361
- //#region src/theme/shortcuts/i8.ts
362
- const i8 = defineShortcuts({
363
- "i8": {
364
- "": "h-fingertip min-w-3em flex items-center select-none relative icon-current content-box disabled-soft",
365
- "data-[type=textarea]:": "min-h-fingertip h-auto items-start",
366
- "data-[active=true]:": "icon-current-hl",
367
- "focus-within:": "icon-current-hl",
368
- "[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
369
- "[&.i8-filled]:": {
370
- "": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1 i8-apply-border",
371
- "data-[active=true]:": "current-border-hl outline i8-apply-outline",
372
- "focus-within:": "current-border-hl outline i8-apply-outline"
361
+ //#region src/theme/shortcuts/raw.ts
362
+ const rawVunorShortcuts = [
363
+ defineShortcuts({
364
+ "i8": {
365
+ "": "h-fingertip min-w-3em flex items-center select-none relative icon-current content-box disabled-soft",
366
+ "data-[type=textarea]:": "min-h-fingertip h-auto items-start",
367
+ "data-[active=true]:": "icon-current-hl",
368
+ "focus-within:": "icon-current-hl",
369
+ "[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
370
+ "[&.i8-filled]:": {
371
+ "": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1 i8-apply-border",
372
+ "data-[active=true]:": "current-border-hl outline i8-apply-outline",
373
+ "focus-within:": "current-border-hl outline i8-apply-outline"
374
+ },
375
+ "[&.i8-transparent]:": "bg-transparent!",
376
+ "[&.i8-round]:": {
377
+ "": "i8-apply-bg current-outline-hl rounded-fingertip-half i8-apply-border",
378
+ "data-[active=true]:": "current-border-hl outline i8-apply-outline",
379
+ "focus-within:": "current-border-hl outline i8-apply-outline"
380
+ },
381
+ "group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
373
382
  },
374
- "[&.i8-transparent]:": "bg-transparent!",
375
- "[&.i8-round]:": {
376
- "": "i8-apply-bg current-outline-hl rounded-fingertip-half i8-apply-border",
377
- "data-[active=true]:": "current-border-hl outline i8-apply-outline",
378
- "focus-within:": "current-border-hl outline i8-apply-outline"
383
+ "i8-bare": {
384
+ "": "i8-apply-bg i8-apply-border current-outline-hl rounded-r1 outline-none text-current placeholder:text-current/50 disabled-soft",
385
+ "hover:": "border-current-hover",
386
+ "focus:": "current-border-hl outline i8-apply-outline",
387
+ "data-[error=true]:": "current-border-error-500 current-outline-error-500 border-current"
379
388
  },
380
- "group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
381
- },
382
- "i8-bare": {
383
- "": "i8-apply-bg i8-apply-border current-outline-hl rounded-r1 outline-none text-current placeholder:text-current/50 disabled-soft",
384
- "hover:": "border-current-hover",
385
- "focus:": "current-border-hl outline i8-apply-outline",
386
- "data-[error=true]:": "current-border-error-500 current-outline-error-500 border-current"
387
- },
388
- "i8-loading": {
389
- "": "text-current-icon pl-$m",
390
- "last:": "pr-$m"
391
- },
392
- "i8-icon-wrap": "size-fingertip flex items-center justify-center",
393
- "i8-underline": {
394
- "group-[.i8-filled]/i8:": "hidden",
395
- "": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right bg-current-hl",
396
- "group-[[data-active=true]]/i8:": "left-0 right-0"
397
- },
398
- "segmented": {
399
- "": {
400
- "first-of-type:": "rounded-r-0!",
401
- "last-of-type:": "rounded-lt-0! rounded-lb-0!",
402
- "not-last-of-type:not-first-of-type:": "rounded-0!",
403
- "not-first-of-type:": "border-l-0! border-l-grey-500/20",
404
- "data-[active=true]:": "z-2"
389
+ "i8-loading": {
390
+ "": "text-current-icon pl-$m",
391
+ "last:": "pr-$m"
405
392
  },
406
- "[&.i8-flat]:": { "not-first-of-type:": "ml-$xs" }
407
- },
408
- "i8-input-wrapper": { "": "relative w-full h-full" },
409
- "i8-input": {
410
- "": "w-full outline-none h-full bg-transparent",
411
- "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
412
- "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
413
- "selection:": "bg-scope-color-500 text-white",
414
- "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
415
- "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
416
- "group-[[data-has-label]]/i8:": "pt-$m",
417
- "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
418
- "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
419
- },
420
- "i8-textarea": {
421
- "": "w-full outline-none h-full bg-transparent text-body",
422
- "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
423
- "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
424
- "selection:": "bg-scope-color-500 text-white",
425
- "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
426
- "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
427
- "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
428
- "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
429
- },
430
- "i8-ta-wrapper": {
431
- "": "w-full pt-0.75em",
432
- "group-[[data-has-label]]/i8:": "mt-$m"
433
- },
434
- "i8-label": {
435
- "": "absolute top-0 h-fingertip text-body text-grey-400 lh-fingertip transition-all transition-duration-300 truncate text-ellipsis overflow-hidden max-w-70%",
436
- "group-[:focus-within]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
437
- "group-[[data-active=true]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
438
- "group-[[data-has-placeholder]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]",
439
- "group-[[data-has-value]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]"
440
- },
441
- "i8-label-wrapper": {
442
- "": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
443
- "group-[.i8-filled]/i8:data-[has-prepend=true]": "pl-0",
444
- "group-[.i8-filled]/i8:data-[has-append=true]": "pr-0",
445
- "group-[.i8-filled]/i8:": "px-$m",
446
- "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
447
- "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
448
- "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
449
- "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
450
- },
451
- "i8-hint": { "": "text-caption pt-$xs text-grey-400 flex-1" },
452
- "i8-counter": { "": "text-caption pt-$xs text-grey-400" },
453
- "i8-hint-wrapper": {
454
- "": "relative flex justify-between",
455
- "group-[.i8-round]/i8:": "px-fingertip-half",
456
- "group-[.i8-filled]/i8:": "px-$m"
457
- },
458
- "i8-hint-wrapper-stack": { "": "relative flex justify-between" },
459
- "i8-stack-label": { "": "relative pb-$xxs" },
460
- "i8-prepend": {
461
- "": "flex items-center",
462
- "group-[[data-type=textarea]]/i8:": "my-$m"
463
- },
464
- "i8-append": {
465
- "": "flex items-center",
466
- "group-[[data-type=textarea]]/i8:": "my-$m"
467
- },
468
- "i8-before": {
469
- "": "h-fingertip flex items-center icon-current",
470
- "group-[[data-group-active=true]]/i8:": "icon-current-hl"
471
- },
472
- "i8-after": {
473
- "": "h-fingertip flex items-center icon-current",
474
- "group-[[data-group-active=true]]/i8:": "icon-current-hl"
475
- },
476
- "i8-icon-clickable": {
477
- "[&>.i8-icon-wrap]:": "cursor-pointer",
478
- "[&>.i8-icon-wrap:hover]:": "current-icon-hl icon-current"
479
- }
480
- });
481
- //#endregion
482
- //#region src/theme/shortcuts/menu.ts
483
- const menu = defineShortcuts({
484
- "menu-root": "flex flex-col overflow-hidden",
485
- "menu-item": "justify-start c8-flat gap-$m w-full fw-400"
486
- });
393
+ "i8-icon-wrap": "size-fingertip flex items-center justify-center",
394
+ "i8-underline": {
395
+ "group-[.i8-filled]/i8:": "hidden",
396
+ "": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right bg-current-hl",
397
+ "group-[[data-active=true]]/i8:": "left-0 right-0"
398
+ },
399
+ "segmented": {
400
+ "": {
401
+ "first-of-type:": "rounded-r-0!",
402
+ "last-of-type:": "rounded-lt-0! rounded-lb-0!",
403
+ "not-last-of-type:not-first-of-type:": "rounded-0!",
404
+ "not-first-of-type:": "border-l-0! border-l-grey-500/20",
405
+ "data-[active=true]:": "z-2"
406
+ },
407
+ "[&.i8-flat]:": { "not-first-of-type:": "ml-$xs" }
408
+ },
409
+ "i8-input-wrapper": { "": "relative w-full h-full" },
410
+ "i8-input": {
411
+ "": "w-full outline-none h-full bg-transparent",
412
+ "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
413
+ "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
414
+ "selection:": "bg-scope-color-500 text-white",
415
+ "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
416
+ "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
417
+ "group-[[data-has-label]]/i8:": "pt-$m",
418
+ "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
419
+ "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
420
+ },
421
+ "i8-textarea": {
422
+ "": "w-full outline-none h-full bg-transparent text-body",
423
+ "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
424
+ "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
425
+ "selection:": "bg-scope-color-500 text-white",
426
+ "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
427
+ "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
428
+ "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
429
+ "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
430
+ },
431
+ "i8-ta-wrapper": {
432
+ "": "w-full pt-0.75em",
433
+ "group-[[data-has-label]]/i8:": "mt-$m"
434
+ },
435
+ "i8-label": {
436
+ "": "absolute top-0 h-fingertip text-body text-grey-400 lh-fingertip transition-all transition-duration-300 truncate text-ellipsis overflow-hidden max-w-70%",
437
+ "group-[:focus-within]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
438
+ "group-[[data-active=true]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
439
+ "group-[[data-has-placeholder]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]",
440
+ "group-[[data-has-value]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]"
441
+ },
442
+ "i8-label-wrapper": {
443
+ "": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
444
+ "group-[.i8-filled]/i8:data-[has-prepend=true]": "pl-0",
445
+ "group-[.i8-filled]/i8:data-[has-append=true]": "pr-0",
446
+ "group-[.i8-filled]/i8:": "px-$m",
447
+ "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
448
+ "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
449
+ "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
450
+ "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
451
+ },
452
+ "i8-hint": { "": "text-caption pt-$xs text-grey-400 flex-1" },
453
+ "i8-counter": { "": "text-caption pt-$xs text-grey-400" },
454
+ "i8-hint-wrapper": {
455
+ "": "relative flex justify-between",
456
+ "group-[.i8-round]/i8:": "px-fingertip-half",
457
+ "group-[.i8-filled]/i8:": "px-$m"
458
+ },
459
+ "i8-hint-wrapper-stack": { "": "relative flex justify-between" },
460
+ "i8-stack-label": { "": "relative pb-$xxs" },
461
+ "i8-prepend": {
462
+ "": "flex items-center",
463
+ "group-[[data-type=textarea]]/i8:": "my-$m"
464
+ },
465
+ "i8-append": {
466
+ "": "flex items-center",
467
+ "group-[[data-type=textarea]]/i8:": "my-$m"
468
+ },
469
+ "i8-before": {
470
+ "": "h-fingertip flex items-center icon-current",
471
+ "group-[[data-group-active=true]]/i8:": "icon-current-hl"
472
+ },
473
+ "i8-after": {
474
+ "": "h-fingertip flex items-center icon-current",
475
+ "group-[[data-group-active=true]]/i8:": "icon-current-hl"
476
+ },
477
+ "i8-icon-clickable": {
478
+ "[&>.i8-icon-wrap]:": "cursor-pointer",
479
+ "[&>.i8-icon-wrap:hover]:": "current-icon-hl icon-current"
480
+ }
481
+ }),
482
+ c8,
483
+ btn,
484
+ defineShortcuts({
485
+ "menu-root": "flex flex-col overflow-hidden",
486
+ "menu-item": "justify-start c8-flat gap-$m w-full fw-400"
487
+ }),
488
+ popupCard,
489
+ disabledSoft,
490
+ ...shortcuts
491
+ ];
487
492
  //#endregion
488
493
  //#region src/theme/utils/shortcut-obj.ts
489
494
  /**
@@ -580,6 +585,9 @@ const componentClasses = {
580
585
  AppToasts: [
581
586
  "[grid-area:_action]",
582
587
  "[grid-area:_title]",
588
+ "btn",
589
+ "btn-icon",
590
+ "btn-label",
583
591
  "c8-flat",
584
592
  "fw-$bold",
585
593
  "icon-color",
@@ -592,18 +600,27 @@ const componentClasses = {
592
600
  "toasts-viewport"
593
601
  ],
594
602
  Button: [
603
+ "btn",
604
+ "btn-icon",
605
+ "btn-label",
595
606
  "icon-color",
596
607
  "icon-size",
597
608
  "loading-indicator",
598
609
  "loading-indicator-ring"
599
610
  ],
600
611
  ButtonBase: [
612
+ "btn",
613
+ "btn-icon",
614
+ "btn-label",
601
615
  "icon-color",
602
616
  "icon-size",
603
617
  "loading-indicator",
604
618
  "loading-indicator-ring"
605
619
  ],
606
620
  Calendar: [
621
+ "btn",
622
+ "btn-icon",
623
+ "btn-label",
607
624
  "c8-flat",
608
625
  "calendar-cell",
609
626
  "calendar-grid-row",
@@ -750,6 +767,9 @@ const componentClasses = {
750
767
  "absolute",
751
768
  "blur",
752
769
  "bottom-0",
770
+ "btn",
771
+ "btn-icon",
772
+ "btn-label",
753
773
  "c8-flat",
754
774
  "calendar-cell",
755
775
  "calendar-grid-row",
@@ -820,6 +840,9 @@ const componentClasses = {
820
840
  "absolute",
821
841
  "blur",
822
842
  "bottom-0",
843
+ "btn",
844
+ "btn-icon",
845
+ "btn-label",
823
846
  "c8-flat",
824
847
  "calendar-cell",
825
848
  "calendar-grid-row",
@@ -877,6 +900,9 @@ const componentClasses = {
877
900
  "px-0"
878
901
  ],
879
902
  DatePickerPopup: [
903
+ "btn",
904
+ "btn-icon",
905
+ "btn-label",
880
906
  "c8-flat",
881
907
  "calendar-cell",
882
908
  "calendar-grid-row",
@@ -911,6 +937,9 @@ const componentClasses = {
911
937
  "border-b",
912
938
  "border-grey-500/30",
913
939
  "border-grey-500/50",
940
+ "btn",
941
+ "btn-icon",
942
+ "btn-label",
914
943
  "c8-flat",
915
944
  "card",
916
945
  "checkbox",
@@ -1018,6 +1047,9 @@ const componentClasses = {
1018
1047
  ],
1019
1048
  Dialog: [
1020
1049
  "b",
1050
+ "btn",
1051
+ "btn-icon",
1052
+ "btn-label",
1021
1053
  "c8-filled",
1022
1054
  "c8-flat",
1023
1055
  "card",
@@ -1143,6 +1175,9 @@ const componentClasses = {
1143
1175
  "b",
1144
1176
  "blur",
1145
1177
  "bottom-0",
1178
+ "btn",
1179
+ "btn-icon",
1180
+ "btn-label",
1146
1181
  "cursor-pointer",
1147
1182
  "flex",
1148
1183
  "flex-grow",
@@ -1176,6 +1211,8 @@ const componentClasses = {
1176
1211
  "loading-indicator-ring",
1177
1212
  "max-w-100%",
1178
1213
  "mb-$s",
1214
+ "menu-item",
1215
+ "menu-root",
1179
1216
  "overflow-hidden",
1180
1217
  "overflow-x-hidden",
1181
1218
  "overflow-y-auto",
@@ -1200,14 +1237,20 @@ const componentClasses = {
1200
1237
  "whitespace-nowrap"
1201
1238
  ],
1202
1239
  MenuItem: [
1240
+ "btn",
1241
+ "btn-icon",
1242
+ "btn-label",
1203
1243
  "icon-color",
1204
1244
  "icon-size",
1205
1245
  "loading-indicator",
1206
1246
  "loading-indicator-ring",
1247
+ "menu-item",
1207
1248
  "scope-grey"
1208
1249
  ],
1209
1250
  OverflowContainer: ["flex", "whitespace-nowrap"],
1210
1251
  Pagination: [
1252
+ "btn",
1253
+ "btn-icon",
1211
1254
  "c8-flat",
1212
1255
  "flex",
1213
1256
  "gap-1",
@@ -1220,6 +1263,9 @@ const componentClasses = {
1220
1263
  "size-fingertip"
1221
1264
  ],
1222
1265
  Popover: [
1266
+ "btn",
1267
+ "btn-icon",
1268
+ "btn-label",
1223
1269
  "icon-color",
1224
1270
  "icon-size",
1225
1271
  "loading-indicator",
@@ -2372,18 +2418,6 @@ function getFixedWind() {
2372
2418
  //#endregion
2373
2419
  //#region src/theme.ts
2374
2420
  /**
2375
- * Array of raw vunor shortcuts (not merged)
2376
- */
2377
- const rawVunorShortcuts = [
2378
- i8,
2379
- c8,
2380
- btn,
2381
- menu,
2382
- popupCard,
2383
- disabledSoft,
2384
- ...shortcuts
2385
- ];
2386
- /**
2387
2421
  * Vunor shortcuts (merged version of rawVunorShortcuts)
2388
2422
  */
2389
2423
  const mergedVunorShortcuts = mergeVunorShortcuts(rawVunorShortcuts);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vunor",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "files": [
5
5
  "dist"
6
6
  ],