@x-plat/design-system 0.5.10 → 0.5.12

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 (24) hide show
  1. package/dist/components/Chart/index.cjs +67 -48
  2. package/dist/components/Chart/index.js +68 -49
  3. package/dist/components/DatePicker/index.cjs +401 -379
  4. package/dist/components/DatePicker/index.js +388 -366
  5. package/dist/components/Dropdown/index.cjs +55 -27
  6. package/dist/components/Dropdown/index.css +10 -10
  7. package/dist/components/Dropdown/index.js +54 -26
  8. package/dist/components/Modal/index.cjs +29 -9
  9. package/dist/components/Modal/index.d.cts +0 -3
  10. package/dist/components/Modal/index.d.ts +0 -3
  11. package/dist/components/Modal/index.js +28 -8
  12. package/dist/components/PopOver/index.cjs +50 -22
  13. package/dist/components/PopOver/index.css +7 -10
  14. package/dist/components/PopOver/index.js +49 -21
  15. package/dist/components/Select/index.cjs +369 -341
  16. package/dist/components/Select/index.css +13 -23
  17. package/dist/components/Select/index.js +368 -340
  18. package/dist/components/index.cjs +503 -451
  19. package/dist/components/index.css +30 -43
  20. package/dist/components/index.js +459 -407
  21. package/dist/index.cjs +527 -475
  22. package/dist/index.css +30 -43
  23. package/dist/index.js +481 -429
  24. package/package.json +1 -1
package/dist/components/index.css CHANGED
@@ -2604,9 +2604,9 @@
2604
2604
  .lib-xplat-dropdown .dropdown-trigger {
2605
2605
  cursor: pointer;
2606
2606
  }
2607
- .lib-xplat-dropdown .dropdown-menu {
2608
- position: absolute;
2609
- z-index: 100;
2607
+ .lib-xplat-dropdown-menu {
2608
+ position: fixed;
2609
+ z-index: 1000;
2610
2610
  min-width: 160px;
2611
2611
  background: var(--semantic-surface-neutral-default);
2612
2612
  border: 1px solid var(--semantic-border-default);
@@ -2617,14 +2617,14 @@
2617
2617
  transform: translateY(-4px);
2618
2618
  transition: opacity 0.15s ease, transform 0.15s ease;
2619
2619
  }
2620
- .lib-xplat-dropdown .dropdown-menu.bottom {
2620
+ .lib-xplat-dropdown-menu.bottom {
2621
2621
  transform: translateY(4px);
2622
2622
  }
2623
- .lib-xplat-dropdown .dropdown-menu.visible {
2623
+ .lib-xplat-dropdown-menu.visible {
2624
2624
  opacity: 1;
2625
2625
  transform: translateY(0);
2626
2626
  }
2627
- .lib-xplat-dropdown .dropdown-item {
2627
+ .lib-xplat-dropdown-menu .dropdown-item {
2628
2628
  display: flex;
2629
2629
  align-items: center;
2630
2630
  width: 100%;
@@ -2637,16 +2637,16 @@
2637
2637
  text-align: left;
2638
2638
  transition: background-color 0.15s;
2639
2639
  }
2640
- .lib-xplat-dropdown .dropdown-item:hover:not(:disabled) {
2640
+ .lib-xplat-dropdown-menu .dropdown-item:hover:not(:disabled) {
2641
2641
  background-color: var(--semantic-surface-neutral-subtle);
2642
2642
  }
2643
- .lib-xplat-dropdown .dropdown-item.danger {
2643
+ .lib-xplat-dropdown-menu .dropdown-item.danger {
2644
2644
  color: var(--semantic-text-error);
2645
2645
  }
2646
- .lib-xplat-dropdown .dropdown-item.danger:hover:not(:disabled) {
2646
+ .lib-xplat-dropdown-menu .dropdown-item.danger:hover:not(:disabled) {
2647
2647
  background-color: var(--semantic-surface-error-subtle);
2648
2648
  }
2649
- .lib-xplat-dropdown .dropdown-item:disabled {
2649
+ .lib-xplat-dropdown-menu .dropdown-item:disabled {
2650
2650
  color: var(--semantic-text-disabled);
2651
2651
  cursor: not-allowed;
2652
2652
  }
@@ -2932,31 +2932,28 @@
2932
2932
  /* src/components/PopOver/popOver.scss */
2933
2933
  .lib-xplat-pop-over {
2934
2934
  position: relative;
2935
- z-index: 10;
2936
2935
  width: fit-content;
2937
2936
  cursor: pointer;
2938
2937
  user-select: none;
2939
2938
  }
2940
- .lib-xplat-pop-over > .content-wrap {
2941
- position: absolute;
2939
+ .lib-xplat-pop-over-content {
2940
+ position: fixed;
2941
+ z-index: 1000;
2942
2942
  cursor: default;
2943
2943
  transition: transform 0.2s ease, opacity 0.2s ease;
2944
- background: white;
2944
+ background: var(--semantic-surface-neutral-default);
2945
2945
  border-radius: var(--spacing-radius-md);
2946
2946
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2947
- z-index: 10;
2948
2947
  opacity: 0;
2949
2948
  transform: scale(0.8);
2950
2949
  }
2951
- .lib-xplat-pop-over > .content-wrap.top {
2950
+ .lib-xplat-pop-over-content.top {
2952
2951
  transform-origin: bottom;
2953
- margin-bottom: var(--spacing-space-2);
2954
2952
  }
2955
- .lib-xplat-pop-over > .content-wrap.bottom {
2953
+ .lib-xplat-pop-over-content.bottom {
2956
2954
  transform-origin: top;
2957
- margin-top: var(--spacing-space-2);
2958
2955
  }
2959
- .lib-xplat-pop-over > .content-wrap.visible {
2956
+ .lib-xplat-pop-over-content.visible {
2960
2957
  opacity: 1;
2961
2958
  transform: scale(1);
2962
2959
  }
@@ -3209,11 +3206,9 @@
3209
3206
  .lib-xplat-select .select-trigger .select-trigger-icon svg {
3210
3207
  font-size: 20px;
3211
3208
  }
3212
- .lib-xplat-select .select-content {
3213
- position: absolute;
3214
- left: 0;
3215
- right: 0;
3216
- width: 100%;
3209
+ .lib-xplat-select-content {
3210
+ position: fixed;
3211
+ z-index: 1000;
3217
3212
  padding: var(--spacing-space-1) 0;
3218
3213
  border-radius: var(--spacing-radius-md);
3219
3214
  background-color: var(--semantic-surface-neutral-default);
@@ -3224,50 +3219,42 @@
3224
3219
  opacity: 0;
3225
3220
  transition: transform 0.2s ease, opacity 0.2s ease;
3226
3221
  }
3227
- .lib-xplat-select .select-content.bottom {
3228
- top: 100%;
3229
- margin-top: var(--spacing-space-1);
3230
- margin-bottom: 0;
3222
+ .lib-xplat-select-content.bottom {
3231
3223
  transform: translateY(-8px);
3232
3224
  }
3233
- .lib-xplat-select .select-content.bottom.visible {
3225
+ .lib-xplat-select-content.bottom.visible {
3234
3226
  opacity: 1;
3235
3227
  transform: translateY(0);
3236
3228
  }
3237
- .lib-xplat-select .select-content.bottom.exit {
3229
+ .lib-xplat-select-content.bottom.exit {
3238
3230
  opacity: 0;
3239
3231
  transform: translateY(-8px);
3240
3232
  }
3241
- .lib-xplat-select .select-content {
3242
- }
3243
- .lib-xplat-select .select-content.top {
3244
- bottom: 100%;
3245
- margin-bottom: var(--spacing-space-1);
3246
- margin-top: 0;
3233
+ .lib-xplat-select-content.top {
3247
3234
  transform: translateY(8px);
3248
3235
  }
3249
- .lib-xplat-select .select-content.top.visible {
3236
+ .lib-xplat-select-content.top.visible {
3250
3237
  opacity: 1;
3251
3238
  transform: translateY(0);
3252
3239
  }
3253
- .lib-xplat-select .select-content.top.exit {
3240
+ .lib-xplat-select-content.top.exit {
3254
3241
  opacity: 0;
3255
3242
  transform: translateY(8px);
3256
3243
  }
3257
- .lib-xplat-select .select-item {
3244
+ .lib-xplat-select-content .select-item {
3258
3245
  padding: var(--spacing-space-2) var(--spacing-space-3);
3259
3246
  font-size: 14px;
3260
3247
  cursor: pointer;
3261
3248
  transition: background-color 0.15s ease;
3262
3249
  outline: none;
3263
3250
  }
3264
- .lib-xplat-select .select-item:hover:not(.disabled) {
3251
+ .lib-xplat-select-content .select-item:hover:not(.disabled) {
3265
3252
  background-color: var(--semantic-surface-neutral-subtle);
3266
3253
  }
3267
- .lib-xplat-select .select-item:focus-visible:not(.disabled) {
3254
+ .lib-xplat-select-content .select-item:focus-visible:not(.disabled) {
3268
3255
  background-color: var(--semantic-surface-neutral-subtle);
3269
3256
  }
3270
- .lib-xplat-select .select-item.disabled {
3257
+ .lib-xplat-select-content .select-item.disabled {
3271
3258
  cursor: not-allowed;
3272
3259
  color: var(--semantic-text-disabled);
3273
3260
  }