@dynamic-framework/ui-react 2.0.0-dev.4 → 2.0.0-dev.5

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 (30) hide show
  1. package/dist/css/dynamic-ui-non-root.css +65 -45
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +1 -1
  4. package/dist/css/dynamic-ui-root.min.css +1 -1
  5. package/dist/css/dynamic-ui.css +65 -45
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +231 -23
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +232 -22
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DButton/DButton.d.ts +7 -17
  12. package/dist/types/components/DInputCheck/DInputCheck.d.ts +2 -1
  13. package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +2 -1
  14. package/dist/types/components/DPasswordStrengthMeter/DPasswordStrengthMeter.d.ts +23 -0
  15. package/dist/types/components/DPasswordStrengthMeter/PasswordCheckItem.d.ts +7 -0
  16. package/dist/types/components/DPasswordStrengthMeter/PasswordCheckList.d.ts +14 -0
  17. package/dist/types/components/DPasswordStrengthMeter/PasswordStrength.d.ts +6 -0
  18. package/dist/types/components/DPasswordStrengthMeter/index.d.ts +3 -0
  19. package/dist/types/components/DVoucher/DVoucher.d.ts +14 -0
  20. package/dist/types/components/DVoucher/hooks/useScreenshot.d.ts +5 -0
  21. package/dist/types/components/DVoucher/hooks/useScreenshotDownload.d.ts +5 -0
  22. package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.d.ts +5 -0
  23. package/dist/types/components/DVoucher/index.d.ts +2 -0
  24. package/dist/types/components/index.d.ts +3 -0
  25. package/jest/setup.js +0 -2
  26. package/package.json +6 -4
  27. package/src/style/abstracts/variables/_buttons.scss +2 -0
  28. package/src/style/base/_buttons.scss +56 -65
  29. package/src/style/components/_+import.scss +1 -0
  30. package/src/style/components/_d-voucher.scss +30 -0
package/dist/css/dynamic-ui-root.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 2.0.0-dev.4
2
+ * dynamic-framework 2.0.0-dev.5
3
3
  * bootstrap ~5.3.8
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
package/dist/css/dynamic-ui-root.min.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 2.0.0-dev.4
2
+ * dynamic-framework 2.0.0-dev.5
3
3
  * bootstrap ~5.3.8
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
package/dist/css/dynamic-ui.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 2.0.0-dev.4
2
+ * dynamic-framework 2.0.0-dev.5
3
3
  * bootstrap ~5.3.8
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
@@ -10084,6 +10084,8 @@ body {
10084
10084
  --bs-btn-sm-padding-x: 0.75rem;
10085
10085
  --bs-btn-sm-font-size: var(--bs-fs-small);
10086
10086
  --bs-btn-box-shadow: btn-box-shadow;
10087
+ --bs-btn-loading-gap: var(--bs-ref-spacer-2);
10088
+ position: relative;
10087
10089
  display: inline-flex;
10088
10090
  flex-direction: row;
10089
10091
  gap: var(--bs-btn-gap, 0.5rem);
@@ -10108,16 +10110,13 @@ body {
10108
10110
  background-color: var(--bs-btn-bg);
10109
10111
  box-shadow: var(--bs-btn-box-shadow);
10110
10112
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
10113
+ /* stylelint-disable-next-line scss/selector-no-union-class-name */
10111
10114
  }
10112
10115
  @media (prefers-reduced-motion: reduce) {
10113
10116
  .btn {
10114
10117
  transition: none;
10115
10118
  }
10116
10119
  }
10117
- .btn > span {
10118
- -webkit-text-decoration: var(--bs-btn-text-decoration);
10119
- text-decoration: var(--bs-btn-text-decoration);
10120
- }
10121
10120
  .btn.hover, .btn:hover {
10122
10121
  color: var(--bs-btn-hover-color);
10123
10122
  text-decoration: none;
@@ -10136,6 +10135,15 @@ body {
10136
10135
  outline: 0;
10137
10136
  box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
10138
10137
  }
10138
+ .btn-loading {
10139
+ position: relative;
10140
+ display: inline-flex;
10141
+ gap: var(--bs-btn-loading-gap);
10142
+ align-items: center;
10143
+ justify-content: center;
10144
+ width: 100%;
10145
+ height: 100%;
10146
+ }
10139
10147
  .btn-check.focus-visible + .btn, .btn-check:focus-visible + .btn {
10140
10148
  border-color: var(--bs-btn-hover-border-color);
10141
10149
  outline: 0;
@@ -10915,19 +10923,16 @@ body {
10915
10923
 
10916
10924
  .btn-outline-primary {
10917
10925
  --bs-btn-color: var(--bs-primary-500);
10918
- --bs-btn-hover-border-color: var(--bs-primary-700);
10919
10926
  --bs-btn-border-color: var(--bs-primary-500);
10920
- --bs-btn-active-color: var(--bs-primary-500);
10921
- --bs-btn-active-border-color: var(--bs-primary-600);
10922
- --bs-btn-hover-color: var(--bs-primary-700);
10923
- --bs-btn-focus-color: var(--bs-primary-600);
10924
- --bs-btn-active-color: var(--bs-primary-600);
10925
- --bs-btn-box-shadow: 0 0 0 transparent;
10927
+ --bs-btn-hover-color: var(--bs-primary-600);
10928
+ --bs-btn-hover-border-color: var(--bs-primary-600);
10929
+ --bs-btn-active-color: var(--bs-primary-700);
10930
+ --bs-btn-active-border-color: var(--bs-primary-700);
10931
+ --bs-btn-focus-color: var(--bs-primary-700);
10926
10932
  --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb);
10927
- }
10928
- .btn-outline-primary:disabled, .btn-outline-primary.disabled {
10929
- --bs-btn-disabled-border-color: var(--bs-primary-500);
10933
+ --bs-btn-box-shadow: 0 0 0 transparent;
10930
10934
  --bs-btn-disabled-color: var(--bs-primary-500);
10935
+ --bs-btn-disabled-border-color: var(--bs-primary-500);
10931
10936
  }
10932
10937
 
10933
10938
  .btn-outline-secondary {
@@ -10935,20 +10940,16 @@ body {
10935
10940
  --bs-btn-hover-border-color: var(--bs-secondary-400);
10936
10941
  --bs-btn-border-color: var(--bs-secondary-200);
10937
10942
  --bs-btn-active-border-color: var(--bs-secondary-400);
10938
- --bs-btn-active-color: var(--bs-secondary-700);
10939
- --bs-btn-hover-color: var(--bs-secondary-700);
10940
10943
  --bs-btn-focus-color: var(--bs-secondary-700);
10941
- --bs-btn-box-shadow: 0 0 0 transparent;
10942
10944
  --bs-btn-focus-shadow-rgb: var(--bs-btn-secondary-focus-shadow-rgb);
10943
- }
10944
- .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
10945
+ --bs-btn-box-shadow: 0 0 0 transparent;
10946
+ --bs-btn-disabled-color: var(--bs-secondary-700);
10945
10947
  --bs-btn-disabled-border-color: var(--bs-secondary-200);
10946
- --bs-btn-disabled-color: var(--bs-secondary-600);
10947
10948
  }
10948
10949
 
10949
10950
  .btn-outline-light {
10950
10951
  --bs-btn-color: var(--bs-gray-25);
10951
- --bs-btn-hover-border-color: var(--bs-gray-25);
10952
+ --bs-btn-hover-border-color: var(--bs-gray-50);
10952
10953
  --bs-btn-border-color: var(--bs-gray-25);
10953
10954
  --bs-btn-active-border-color: var(--bs-gray-50);
10954
10955
  --bs-btn-active-color: var(--bs-gray-50);
@@ -10956,8 +10957,6 @@ body {
10956
10957
  --bs-btn-focus-color: var(--bs-gray-50);
10957
10958
  --bs-btn-box-shadow: 0 0 0 transparent;
10958
10959
  --bs-btn-focus-shadow-rgb: var(--bs-btn-light-focus-shadow-rgb);
10959
- }
10960
- .btn-outline-light:disabled, .btn-outline-light.disabled {
10961
10960
  --bs-btn-disabled-border-color: var(--bs-gray-25);
10962
10961
  --bs-btn-disabled-color: var(--bs-gray-25);
10963
10962
  opacity: var(--bs-btn-disabled-opacity);
@@ -10973,8 +10972,6 @@ body {
10973
10972
  --bs-btn-focus-color: var(--bs-success-700);
10974
10973
  --bs-btn-box-shadow: 0 0 0 transparent;
10975
10974
  --bs-btn-focus-shadow-rgb: var(--bs-btn-success-focus-shadow-rgb);
10976
- }
10977
- .btn-outline-success:disabled, .btn-outline-success.disabled {
10978
10975
  --bs-btn-disabled-border-color: var(--bs-success-500);
10979
10976
  --bs-btn-disabled-color: var(--bs-success-500);
10980
10977
  }
@@ -10989,9 +10986,7 @@ body {
10989
10986
  --bs-btn-focus-color: var(--bs-danger-700);
10990
10987
  --bs-btn-box-shadow: 0 0 0 transparent;
10991
10988
  --bs-btn-focus-shadow-rgb: var(--bs-btn-danger-focus-shadow-rgb);
10992
- }
10993
- .btn-outline-danger:disabled, .btn-outline-danger.disabled {
10994
- --bs-btn-active-border-color: var(--bs-danger-500);
10989
+ --bs-btn-disabled-border-color: var(--bs-danger-500);
10995
10990
  --bs-btn-disabled-color: var(--bs-danger-500);
10996
10991
  }
10997
10992
 
@@ -11005,40 +11000,34 @@ body {
11005
11000
  --bs-btn-focus-color: var(--bs-info-700);
11006
11001
  --bs-btn-box-shadow: 0 0 0 transparent;
11007
11002
  --bs-btn-focus-shadow-rgb: var(--bs-btn-info-focus-shadow-rgb);
11008
- }
11009
- .btn-outline-info:disabled, .btn-outline-info.disabled {
11010
11003
  --bs-btn-disabled-border-color: var(--bs-info-500);
11011
11004
  --bs-btn-disabled-color: var(--bs-info-500);
11012
11005
  }
11013
11006
 
11014
11007
  .btn-outline-warning {
11015
- --bs-btn-color: var(--bs-warning-600);
11016
- --bs-btn-hover-border-color: var(--bs-warning-700);
11008
+ --bs-btn-color: var(--bs-warning-500);
11017
11009
  --bs-btn-border-color: var(--bs-warning-500);
11018
- --bs-btn-active-border-color: var(--bs-warning-600);
11010
+ --bs-btn-hover-color: var(--bs-warning-600);
11011
+ --bs-btn-hover-border-color: var(--bs-warning-600);
11019
11012
  --bs-btn-active-color: var(--bs-warning-700);
11020
- --bs-btn-hover-color: var(--bs-warning-700);
11013
+ --bs-btn-active-border-color: var(--bs-warning-700);
11021
11014
  --bs-btn-focus-color: var(--bs-warning-700);
11022
- --bs-btn-box-shadow: 0 0 0 transparent;
11023
11015
  --bs-btn-focus-shadow-rgb: var(--bs-btn-warning-focus-shadow-rgb);
11024
- }
11025
- .btn-outline-warning:disabled, .btn-outline-warning.disabled {
11016
+ --bs-btn-box-shadow: 0 0 0 transparent;
11026
11017
  --bs-btn-disabled-border-color: var(--bs-warning-500);
11027
- --bs-btn-disabled-color: var(--bs-warning-600);
11018
+ --bs-btn-disabled-color: var(--bs-warning-500);
11028
11019
  }
11029
11020
 
11030
11021
  .btn-outline-dark {
11031
11022
  --bs-btn-color: var(--bs-black);
11032
- --bs-btn-hover-border-color: var(--bs-black);
11023
+ --bs-btn-hover-border-color: var(--bs-gray-600);
11033
11024
  --bs-btn-border-color: var(--bs-black);
11034
- --bs-btn-active-border-color: var(--bs-black);
11035
- --bs-btn-active-color: var(--bs-black);
11036
- --bs-btn-hover-color: var(--bs-black);
11025
+ --bs-btn-active-border-color: var(--bs-gray-600);
11026
+ --bs-btn-active-color: var(--bs-gray-600);
11027
+ --bs-btn-hover-color: var(--bs-gray-600);
11037
11028
  --bs-btn-focus-color: var(--bs-black);
11038
11029
  --bs-btn-box-shadow: 0 0 0 transparent;
11039
11030
  --bs-btn-focus-shadow-rgb: var(--bs-btn-dark-focus-shadow-rgb);
11040
- }
11041
- .btn-outline-dark:disabled, .btn-outline-dark.disabled {
11042
11031
  --bs-btn-disabled-border-color: var(--bs-black);
11043
11032
  --bs-btn-disabled-color: var(--bs-black);
11044
11033
  }
@@ -13032,6 +13021,37 @@ react-datepicker__navigation
13032
13021
  margin: 0;
13033
13022
  }
13034
13023
 
13024
+ .d-voucher {
13025
+ --bs-voucher-header-gap: var(--bs-ref-spacer-4);
13026
+ --bs-voucher-amount-padding: var(--bs-ref-spacer-4);
13027
+ --bs-voucher-amount-background: var(--bs-secondary-50);
13028
+ --bs-voucher-amount-rounded: var(--bs-ref-spacer-4);
13029
+ --bs-voucher-footer-gap: var(--bs-ref-spacer-4);
13030
+ --bs-voucher-margin: 0 0 var(--bs-ref-spacer-4) 0;
13031
+ }
13032
+
13033
+ .d-voucher-header {
13034
+ display: flex;
13035
+ flex-direction: column;
13036
+ gap: var(--bs-voucher-header-gap);
13037
+ align-items: center;
13038
+ justify-content: center;
13039
+ margin: var(--bs-voucher-margin);
13040
+ }
13041
+
13042
+ .d-voucher-amount {
13043
+ padding: var(--bs-voucher-amount-padding);
13044
+ background: var(--bs-voucher-amount-background);
13045
+ border-radius: var(--bs-voucher-amount-rounded);
13046
+ }
13047
+
13048
+ .d-voucher-footer {
13049
+ display: flex;
13050
+ gap: var(--bs-voucher-footer-gap);
13051
+ justify-content: center;
13052
+ justify-content: flex-start;
13053
+ }
13054
+
13035
13055
  .d-close {
13036
13056
  display: flex;
13037
13057
  padding: 0;