@dynamic-framework/ui-react 1.35.1 → 1.36.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 (42) hide show
  1. package/dist/css/bootstrap-icons.css +31 -3
  2. package/dist/css/bootstrap-icons.json +29 -1
  3. package/dist/css/bootstrap-icons.min.css +2 -2
  4. package/dist/css/bootstrap-icons.scss +29 -1
  5. package/dist/css/dynamic-ui-non-root.css +373 -85
  6. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  7. package/dist/css/dynamic-ui-root.css +4 -1
  8. package/dist/css/dynamic-ui-root.min.css +2 -2
  9. package/dist/css/dynamic-ui.css +376 -85
  10. package/dist/css/dynamic-ui.min.css +2 -2
  11. package/dist/css/fonts/bootstrap-icons.woff +0 -0
  12. package/dist/css/fonts/bootstrap-icons.woff2 +0 -0
  13. package/dist/index.esm.js +125 -19
  14. package/dist/index.esm.js.map +1 -1
  15. package/dist/index.js +126 -18
  16. package/dist/index.js.map +1 -1
  17. package/dist/types/components/DBoxFile/useDBoxFile.d.ts +1 -1
  18. package/dist/types/components/DDatePicker/DDatePicker.d.ts +4 -3
  19. package/dist/types/components/DDatePicker/components/DDatePickerHeaderSelector.d.ts +3 -1
  20. package/dist/types/components/DDatePicker/components/DDatePickerTime.d.ts +5 -7
  21. package/dist/types/components/DInputPhone/DInputPhone.d.ts +26 -0
  22. package/dist/types/components/DInputPhone/index.d.ts +2 -0
  23. package/dist/types/components/DSelect/DSelect.d.ts +2 -1
  24. package/dist/types/components/index.d.ts +1 -0
  25. package/dist/types/utils/index.d.ts +1 -0
  26. package/dist/types/utils/validatePhoneNumber.d.ts +1 -0
  27. package/jest/setup.js +15 -0
  28. package/package.json +10 -4
  29. package/src/style/abstracts/_utilities.scss +11 -1
  30. package/src/style/abstracts/variables/_+import.scss +2 -1
  31. package/src/style/abstracts/variables/_datepicker.scss +5 -8
  32. package/src/style/abstracts/variables/_input-phone.scss +62 -0
  33. package/src/style/abstracts/variables/_navs.scss +3 -1
  34. package/src/style/abstracts/variables/_typography.scss +2 -0
  35. package/src/style/base/_form-switch.scss +1 -1
  36. package/src/style/base/_nav.scss +9 -13
  37. package/src/style/components/_+import.scss +1 -0
  38. package/src/style/components/_d-datepicker.scss +79 -152
  39. package/src/style/components/_d-input-phone.scss +286 -0
  40. package/src/style/components/_d-select.scss +22 -2
  41. package/src/style/components/_d-timepicker.scss +43 -29
  42. package/src/style/root/_root.scss +4 -0
package/src/style/components/_d-timepicker.scss CHANGED
@@ -1,37 +1,51 @@
1
- .d-datepicker-time {
1
+ // stylelint-disable
2
+
3
+ .react-datepicker__input-time-container {
2
4
  --#{$prefix}datepicker-time-input: 100%;
3
- --#{$prefix}datepicker-webkit-time-color: var(--#{$prefix}black);
5
+ --#{$prefix}datepicker-time-input-padding: var(--#{$prefix}ref-spacer-1) var(--#{$prefix}ref-spacer-4);
6
+ --#{$prefix}datepicker-webkit-time-color: var(--#{$prefix}body-color);
4
7
  --#{$prefix}datepicker-webkit-time-align: left;
5
- --#{$prefix}datepicker-webkit-edit-text-padding: 2px;
6
-
7
- --#{$prefix}datepicker-webkit-edit-ampm-padding: 0 4px;
8
- --#{$prefix}datepicker-webkit-edit-ampm-color: var(--#{$prefix}secondary-900);
9
- --#{$prefix}datepicker-webkit-edit-ampm-bg: var(--#{$prefix}secondary-100);
10
- --#{$prefix}datepicker-webkit-edit-ampm-radius: 4px;
11
-
12
8
  --#{$prefix}datepicker-calendar-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
13
9
 
14
- .d-input {
15
- width: var(--#{$prefix}datepicker-time-input);
10
+ clear: both;
11
+ width: 100%;
12
+ float: left;
13
+ margin: 8px 0px 12px 0px;
14
+ text-align: center;
15
+
16
+ .react-datepicker-time__caption {
17
+ display: inline-block;
16
18
  }
17
- // stylelint-disable selector-no-qualifying-type
18
- input[type="time"] {
19
- &::-webkit-datetime-edit {
20
- color: var(--#{$prefix}datepicker-webkit-time-color);
21
- text-align: var(--#{$prefix}datepicker-webkit-time-align);
22
- }
23
- &::-webkit-datetime-edit-text {
24
- padding-inline: var(--#{$prefix}datepicker-webkit-edit-text-padding);
25
- }
26
- &::-webkit-datetime-edit-ampm-field {
27
- padding: var(--#{$prefix}datepicker-webkit-edit-ampm-padding);
28
- color: var(--#{$prefix}datepicker-webkit-edit-ampm-color);
29
- background-color: var(--#{$prefix}datepicker-webkit-edit-ampm-bg);
30
- border-radius: var(--#{$prefix}datepicker-webkit-edit-ampm-radius);
31
- }
32
- &::-webkit-calendar-picker-indicator {
33
- background-image: var(--#{$prefix}datepicker-calendar-picker-icon);
19
+
20
+ .react-datepicker-time__input-container {
21
+ display: inline-block;
22
+
23
+ .react-datepicker-time__input {
24
+ display: inline-block;
25
+ margin-left: var(--#{$prefix}ref-spacer-2);
26
+
27
+ .d-datepicker-time {
28
+ width: var(--#{$prefix}datepicker-time-input);
29
+ // stylelint-disable selector-no-qualifying-type
30
+ input[type="time"] {
31
+ padding: var(--#{$prefix}datepicker-time-input-padding);
32
+ appearance: auto;
33
+ -moz-appearance: textfield;
34
+ &::-webkit-datetime-edit {
35
+ color: var(--#{$prefix}datepicker-webkit-time-color);
36
+ text-align: var(--#{$prefix}datepicker-webkit-time-align);
37
+ }
38
+ &::-webkit-calendar-picker-indicator {
39
+ background-image: var(--#{$prefix}datepicker-calendar-picker-icon);
40
+ }
41
+ &:is(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
42
+ -webkit-appearance: none;
43
+ margin: 0;
44
+ }
45
+ }
46
+ }
34
47
  }
35
48
  }
36
-
37
49
  }
50
+
51
+ // stylelint-enable
package/src/style/root/_root.scss CHANGED
@@ -207,6 +207,10 @@
207
207
  --#{$prefix}fw-bold: #{$font-weight-bold-value};
208
208
  --#{$prefix}fw-bolder: #{$font-weight-bolder-value};
209
209
 
210
+ --#{$prefix}lh-base: #{$line-height-base};
211
+ --#{$prefix}lh-sm: #{$line-height-sm};
212
+ --#{$prefix}lh-lg: #{$line-height-lg};
213
+
210
214
  --#{$prefix}label-padding-y: var(--#{$prefix}ref-spacer-0);
211
215
  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-0);
212
216
  --#{$prefix}label-margin-bottom: var(--#{$prefix}ref-spacer-1);