@ozen-ui/kit 0.8.0 → 0.9.0

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 (171) hide show
  1. package/FieldControl/package.json +5 -0
  2. package/FieldInput/package.json +5 -0
  3. package/Fieldset/package.json +5 -0
  4. package/__inner__/cjs/components/Backdrop/Backdrop.d.ts +2 -2
  5. package/__inner__/cjs/components/Breadcrumbs/types.d.ts +2 -2
  6. package/__inner__/cjs/components/DataList/DataList.d.ts +1 -1
  7. package/__inner__/cjs/components/DataList/DataListProvider.d.ts +5 -5
  8. package/__inner__/cjs/components/FieldControl/FieldControl.css +135 -0
  9. package/__inner__/cjs/components/FieldControl/FieldControl.d.ts +13 -0
  10. package/__inner__/cjs/components/FieldControl/FieldControl.js +82 -0
  11. package/__inner__/cjs/components/FieldControl/FieldControlContext.d.ts +15 -0
  12. package/__inner__/cjs/components/FieldControl/FieldControlContext.js +6 -0
  13. package/__inner__/cjs/components/FieldControl/index.d.ts +2 -0
  14. package/__inner__/cjs/components/FieldControl/index.js +5 -0
  15. package/__inner__/cjs/components/FieldHint/FieldHint.d.ts +6 -9
  16. package/__inner__/cjs/components/FieldHint/FieldHint.js +24 -4
  17. package/__inner__/cjs/components/FieldIcon/FieldIcon.css +1 -21
  18. package/__inner__/cjs/components/FieldIcon/FieldIcon.d.ts +8 -12
  19. package/__inner__/cjs/components/FieldIcon/FieldIcon.js +15 -4
  20. package/__inner__/cjs/components/FieldInput/FieldInput.d.ts +11 -0
  21. package/__inner__/cjs/components/FieldInput/FieldInput.js +54 -0
  22. package/__inner__/cjs/components/FieldInput/index.d.ts +1 -0
  23. package/__inner__/cjs/components/FieldInput/index.js +4 -0
  24. package/__inner__/cjs/components/FieldLabel/FieldLabel.d.ts +7 -5
  25. package/__inner__/cjs/components/FieldLabel/FieldLabel.js +39 -10
  26. package/__inner__/cjs/components/Fieldset/Fieldset.css +13 -0
  27. package/__inner__/cjs/components/Fieldset/Fieldset.d.ts +10 -0
  28. package/__inner__/cjs/components/Fieldset/Fieldset.js +15 -0
  29. package/__inner__/cjs/components/Fieldset/index.d.ts +1 -0
  30. package/__inner__/cjs/components/Fieldset/index.js +4 -0
  31. package/__inner__/cjs/components/FilePicker/FilePicker.css +48 -59
  32. package/__inner__/cjs/components/FilePicker/FilePicker.js +2 -1
  33. package/__inner__/cjs/components/Input/Input.css +9 -121
  34. package/__inner__/cjs/components/Input/Input.d.ts +1 -62
  35. package/__inner__/cjs/components/Input/Input.js +32 -53
  36. package/__inner__/cjs/components/Input/constants.d.ts +1 -0
  37. package/__inner__/cjs/components/Input/constants.js +4 -0
  38. package/__inner__/cjs/components/Input/index.d.ts +1 -0
  39. package/__inner__/cjs/components/Input/index.js +1 -0
  40. package/__inner__/cjs/components/Input/types.d.ts +71 -0
  41. package/__inner__/cjs/components/Input/types.js +13 -0
  42. package/__inner__/cjs/components/InputNumber/InputNumber.css +60 -74
  43. package/__inner__/cjs/components/InputNumber/InputNumber.js +2 -1
  44. package/__inner__/cjs/components/InputNumber/utils.d.ts +2 -2
  45. package/__inner__/cjs/components/Link/Link.d.ts +1 -1
  46. package/__inner__/cjs/components/List/components/ListItem/ListItem.d.ts +1 -2
  47. package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts +1 -2
  48. package/__inner__/cjs/components/List/types.d.ts +3 -3
  49. package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.d.ts +1 -1
  50. package/__inner__/cjs/components/Menu/components/MenuList/MenuList.d.ts +1 -1
  51. package/__inner__/cjs/components/Modal/Modal.d.ts +1 -1
  52. package/__inner__/cjs/components/Modal/Modal.js +1 -1
  53. package/__inner__/cjs/components/Modal/components/ModalConsumer.d.ts +2 -2
  54. package/__inner__/cjs/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts +1 -1
  55. package/__inner__/cjs/components/Pagination/types.d.ts +5 -5
  56. package/__inner__/cjs/components/Popover/types.d.ts +4 -5
  57. package/__inner__/cjs/components/ProgressBar/ProgressBar.d.ts +2 -2
  58. package/__inner__/cjs/components/Select/Select.css +5 -16
  59. package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js +2 -1
  60. package/__inner__/cjs/components/Select/types.d.ts +3 -4
  61. package/__inner__/cjs/components/Slider/types.d.ts +1 -1
  62. package/__inner__/cjs/components/Snackbar/types.d.ts +1 -1
  63. package/__inner__/cjs/components/Tag/components/RemoveButton/RemoveButton.d.ts +1 -1
  64. package/__inner__/cjs/components/Textarea/Textarea.css +3 -107
  65. package/__inner__/cjs/components/Textarea/Textarea.d.ts +1 -59
  66. package/__inner__/cjs/components/Textarea/Textarea.js +8 -62
  67. package/__inner__/cjs/components/Textarea/components/TextareaConsumer.d.ts +3 -0
  68. package/__inner__/cjs/components/Textarea/components/TextareaConsumer.js +36 -0
  69. package/__inner__/cjs/components/Textarea/components/TextareaCounter.d.ts +7 -0
  70. package/__inner__/cjs/components/Textarea/components/TextareaCounter.js +25 -0
  71. package/__inner__/cjs/components/Textarea/components/index.d.ts +2 -0
  72. package/__inner__/cjs/components/Textarea/components/index.js +5 -0
  73. package/__inner__/cjs/components/Textarea/constants.d.ts +1 -0
  74. package/__inner__/cjs/components/Textarea/constants.js +4 -0
  75. package/__inner__/cjs/components/Textarea/index.d.ts +1 -0
  76. package/__inner__/cjs/components/Textarea/index.js +1 -0
  77. package/__inner__/cjs/components/Textarea/types.d.ts +69 -0
  78. package/__inner__/cjs/components/Textarea/types.js +4 -0
  79. package/__inner__/cjs/components/ThemeProvider/ThemeProvider.d.ts +2 -1
  80. package/__inner__/cjs/components/ThemeProvider/types.d.ts +2 -0
  81. package/__inner__/cjs/components/Tooltip/types.d.ts +1 -1
  82. package/__inner__/cjs/hooks/useMultiRef/useMultiRef.d.ts +2 -3
  83. package/__inner__/cjs/types/ResponsiveValue.d.ts +1 -1
  84. package/__inner__/cjs/utils/isKey.d.ts +2 -2
  85. package/__inner__/cjs/utils/polymorphicComponentWithRef.d.ts +0 -1
  86. package/__inner__/esm/components/Backdrop/Backdrop.d.ts +2 -2
  87. package/__inner__/esm/components/Backdrop/Backdrop.js +1 -1
  88. package/__inner__/esm/components/Breadcrumbs/types.d.ts +2 -2
  89. package/__inner__/esm/components/DataList/DataList.d.ts +1 -1
  90. package/__inner__/esm/components/DataList/DataListProvider.d.ts +5 -5
  91. package/__inner__/esm/components/FieldControl/FieldControl.css +135 -0
  92. package/__inner__/esm/components/FieldControl/FieldControl.d.ts +13 -0
  93. package/__inner__/esm/components/FieldControl/FieldControl.js +79 -0
  94. package/__inner__/esm/components/FieldControl/FieldControlContext.d.ts +15 -0
  95. package/__inner__/esm/components/FieldControl/FieldControlContext.js +2 -0
  96. package/__inner__/esm/components/FieldControl/index.d.ts +2 -0
  97. package/__inner__/esm/components/FieldControl/index.js +2 -0
  98. package/__inner__/esm/components/FieldHint/FieldHint.d.ts +6 -9
  99. package/__inner__/esm/components/FieldHint/FieldHint.js +25 -5
  100. package/__inner__/esm/components/FieldIcon/FieldIcon.css +1 -21
  101. package/__inner__/esm/components/FieldIcon/FieldIcon.d.ts +8 -12
  102. package/__inner__/esm/components/FieldIcon/FieldIcon.js +16 -5
  103. package/__inner__/esm/components/FieldInput/FieldInput.d.ts +11 -0
  104. package/__inner__/esm/components/FieldInput/FieldInput.js +51 -0
  105. package/__inner__/esm/components/FieldInput/index.d.ts +1 -0
  106. package/__inner__/esm/components/FieldInput/index.js +1 -0
  107. package/__inner__/esm/components/FieldLabel/FieldLabel.d.ts +7 -5
  108. package/__inner__/esm/components/FieldLabel/FieldLabel.js +38 -8
  109. package/__inner__/esm/components/Fieldset/Fieldset.css +13 -0
  110. package/__inner__/esm/components/Fieldset/Fieldset.d.ts +10 -0
  111. package/__inner__/esm/components/Fieldset/Fieldset.js +12 -0
  112. package/__inner__/esm/components/Fieldset/index.d.ts +1 -0
  113. package/__inner__/esm/components/Fieldset/index.js +1 -0
  114. package/__inner__/esm/components/FilePicker/FilePicker.css +48 -59
  115. package/__inner__/esm/components/FilePicker/FilePicker.js +2 -1
  116. package/__inner__/esm/components/Input/Input.css +9 -121
  117. package/__inner__/esm/components/Input/Input.d.ts +1 -62
  118. package/__inner__/esm/components/Input/Input.js +33 -54
  119. package/__inner__/esm/components/Input/constants.d.ts +1 -0
  120. package/__inner__/esm/components/Input/constants.js +1 -0
  121. package/__inner__/esm/components/Input/index.d.ts +1 -0
  122. package/__inner__/esm/components/Input/index.js +1 -0
  123. package/__inner__/esm/components/Input/types.d.ts +71 -0
  124. package/__inner__/esm/components/Input/types.js +10 -0
  125. package/__inner__/esm/components/InputNumber/InputNumber.css +60 -74
  126. package/__inner__/esm/components/InputNumber/InputNumber.js +2 -1
  127. package/__inner__/esm/components/InputNumber/utils.d.ts +2 -2
  128. package/__inner__/esm/components/Link/Link.d.ts +1 -1
  129. package/__inner__/esm/components/List/components/ListItem/ListItem.d.ts +1 -2
  130. package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.d.ts +1 -2
  131. package/__inner__/esm/components/List/types.d.ts +3 -3
  132. package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.d.ts +1 -1
  133. package/__inner__/esm/components/Menu/components/MenuList/MenuList.d.ts +1 -1
  134. package/__inner__/esm/components/Modal/Modal.d.ts +1 -1
  135. package/__inner__/esm/components/Modal/Modal.js +1 -1
  136. package/__inner__/esm/components/Modal/components/ModalConsumer.d.ts +2 -2
  137. package/__inner__/esm/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts +1 -1
  138. package/__inner__/esm/components/Pagination/types.d.ts +5 -5
  139. package/__inner__/esm/components/Popover/types.d.ts +4 -5
  140. package/__inner__/esm/components/ProgressBar/ProgressBar.d.ts +2 -2
  141. package/__inner__/esm/components/ProgressBar/ProgressBar.js +1 -1
  142. package/__inner__/esm/components/Select/Select.css +5 -16
  143. package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js +2 -1
  144. package/__inner__/esm/components/Select/types.d.ts +3 -4
  145. package/__inner__/esm/components/Slider/types.d.ts +1 -1
  146. package/__inner__/esm/components/Snackbar/types.d.ts +1 -1
  147. package/__inner__/esm/components/Tag/components/RemoveButton/RemoveButton.d.ts +1 -1
  148. package/__inner__/esm/components/Textarea/Textarea.css +3 -107
  149. package/__inner__/esm/components/Textarea/Textarea.d.ts +1 -59
  150. package/__inner__/esm/components/Textarea/Textarea.js +9 -63
  151. package/__inner__/esm/components/Textarea/components/TextareaConsumer.d.ts +3 -0
  152. package/__inner__/esm/components/Textarea/components/TextareaConsumer.js +32 -0
  153. package/__inner__/esm/components/Textarea/components/TextareaCounter.d.ts +7 -0
  154. package/__inner__/esm/components/Textarea/components/TextareaCounter.js +21 -0
  155. package/__inner__/esm/components/Textarea/components/index.d.ts +2 -0
  156. package/__inner__/esm/components/Textarea/components/index.js +2 -0
  157. package/__inner__/esm/components/Textarea/constants.d.ts +1 -0
  158. package/__inner__/esm/components/Textarea/constants.js +1 -0
  159. package/__inner__/esm/components/Textarea/index.d.ts +1 -0
  160. package/__inner__/esm/components/Textarea/index.js +1 -0
  161. package/__inner__/esm/components/Textarea/types.d.ts +69 -0
  162. package/__inner__/esm/components/Textarea/types.js +1 -0
  163. package/__inner__/esm/components/ThemeProvider/ThemeProvider.d.ts +2 -1
  164. package/__inner__/esm/components/ThemeProvider/types.d.ts +2 -0
  165. package/__inner__/esm/components/Tooltip/Tooltip.js +1 -1
  166. package/__inner__/esm/components/Tooltip/types.d.ts +1 -1
  167. package/__inner__/esm/hooks/useMultiRef/useMultiRef.d.ts +2 -3
  168. package/__inner__/esm/types/ResponsiveValue.d.ts +1 -1
  169. package/__inner__/esm/utils/isKey.d.ts +2 -2
  170. package/__inner__/esm/utils/polymorphicComponentWithRef.d.ts +0 -1
  171. package/package.json +1 -1
@@ -1,9 +1,10 @@
1
1
  /* stylelint-disable */
2
2
  .InputNumber {
3
- --number-input-color: var(--color-content-primary);
4
- --number-input-background-color: var(--color-background-primary);
5
- --number-input-border-width: var(--border-width-s);
6
- --number-input-border-color: var(--color-border-main);
3
+ --textfield-color: var(--color-content-primary);
4
+ --textfield-background-color: var(--color-background-primary);
5
+ --textfield-border-width: var(--border-width-s);
6
+ --textfield-border-color: var(--color-border-main);
7
+ font: var(--textfield-input-font);
7
8
  cursor: text;
8
9
  display: inline-flex;
9
10
  vertical-align: top;
@@ -12,31 +13,17 @@
12
13
  .InputNumber > * {
13
14
  cursor: text;
14
15
  }
15
- .InputNumber-Fieldset {
16
- position: absolute;
17
- inset-block-end: 0;
18
- inset-inline-end: 0;
19
- inset-block-start: 0;
20
- inset-inline-start: 0;
21
- margin: 0;
22
- padding: 0;
23
- pointer-events: none;
24
- border-radius: var(--border-radius-xs);
25
- border: var(--number-input-border-width) solid
26
- var(--number-input-border-color);
27
- transition: border var(--transition-default);
28
- }
29
16
  .InputNumber-Body {
30
17
  position: relative;
31
18
  display: flex;
32
- -moz-column-gap: var(--number-input-input-gap);
33
- column-gap: var(--number-input-input-gap);
19
+ -moz-column-gap: var(--textfield-input-gap);
20
+ column-gap: var(--textfield-input-gap);
34
21
  align-items: center;
35
22
  box-sizing: border-box;
36
- padding: 0 4px 0 var(--number-input-gutter-x);
37
- background-color: var(--number-input-background-color);
23
+ padding: 0 4px 0 var(--textfield-gutter-x);
24
+ background-color: var(--textfield-background-color);
38
25
  transition: background-color var(--transition-slow);
39
- color: var(--number-input-color);
26
+ color: var(--textfield-color);
40
27
  border-radius: var(--border-radius-xs);
41
28
  }
42
29
  .InputNumber-FieldContainer {
@@ -53,10 +40,9 @@
53
40
  inline-size: 100%;
54
41
  padding: 0;
55
42
  background: none;
56
- color: var(--number-input-color);
43
+ color: var(--textfield-color);
57
44
  box-sizing: border-box;
58
- block-size: var(--number-input-input-height);
59
- font: var(--number-input-input-font);
45
+ block-size: var(--textfield-input-height);
60
46
  }
61
47
  .InputNumber-Field::placeholder {
62
48
  opacity: 1;
@@ -65,7 +51,7 @@
65
51
  .InputNumber-Field:-webkit-autofill,
66
52
  .InputNumber-Field:-webkit-autofill:hover,
67
53
  .InputNumber-Field:-webkit-autofill:focus {
68
- box-shadow: 0 0 0 1000px var(--number-input-background-color) inset !important;
54
+ box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
69
55
  background-color: transparent !important;
70
56
  -webkit-text-fill-color: var(--color-content-info-dark);
71
57
  }
@@ -80,59 +66,59 @@
80
66
  flex-direction: column;
81
67
  }
82
68
  .InputNumber_size_2xs {
83
- --number-input-gutter-x: 12px;
84
- --number-input-input-height: 40px;
85
- --number-input-input-padding: 4px 0 4px;
86
- --number-input-input-font: var(--typography-text-2xs-font);
87
- --number-input-input-gap: var(--space-s);
88
- --number-input-button-width: 24px;
89
- --number-input-button-height: 16px;
69
+ --textfield-gutter-x: 12px;
70
+ --textfield-input-height: 40px;
71
+ --textfield-input-padding: 4px 0 4px;
72
+ --textfield-input-font: var(--typography-text-2xs-font);
73
+ --textfield-input-gap: var(--space-s);
74
+ --textfield-button-width: 24px;
75
+ --textfield-button-height: 16px;
90
76
  }
91
77
  .InputNumber_size_2xs .FieldLabel_size_2xs {
92
78
  --field-label-top: 12px;
93
79
  }
94
80
  .InputNumber_size_xs {
95
- --number-input-gutter-x: 12px;
96
- --number-input-input-height: 40px;
97
- --number-input-input-font: var(--typography-text-xs-font);
98
- --number-input-input-padding: 19px 0 4px;
99
- --number-input-input-gap: var(--space-s);
100
- --number-input-button-width: 28px;
101
- --number-input-button-height: 16px;
81
+ --textfield-gutter-x: 12px;
82
+ --textfield-input-height: 40px;
83
+ --textfield-input-font: var(--typography-text-xs-font);
84
+ --textfield-input-padding: 19px 0 4px;
85
+ --textfield-input-gap: var(--space-s);
86
+ --textfield-button-width: 28px;
87
+ --textfield-button-height: 16px;
102
88
  }
103
89
  .InputNumber_size_s {
104
- --number-input-gutter-x: 16px;
105
- --number-input-input-height: 48px;
106
- --number-input-input-font: var(--typography-text-s-font);
107
- --number-input-input-padding: 21px 0 6px;
108
- --number-input-input-gap: var(--space-m);
109
- --number-input-button-width: 32px;
110
- --number-input-button-height: 20px;
90
+ --textfield-gutter-x: 16px;
91
+ --textfield-input-height: 48px;
92
+ --textfield-input-font: var(--typography-text-s-font);
93
+ --textfield-input-padding: 21px 0 6px;
94
+ --textfield-input-gap: var(--space-m);
95
+ --textfield-button-width: 32px;
96
+ --textfield-button-height: 20px;
111
97
  }
112
98
  .InputNumber_size_m {
113
- --number-input-gutter-x: 20px;
114
- --number-input-input-height: 56px;
115
- --number-input-input-font: var(--typography-text-m-font);
116
- --number-input-input-padding: 24px 0 6px;
117
- --number-input-input-gap: var(--space-m);
118
- --number-input-button-width: 40px;
119
- --number-input-button-height: 24px;
99
+ --textfield-gutter-x: 20px;
100
+ --textfield-input-height: 56px;
101
+ --textfield-input-font: var(--typography-text-m-font);
102
+ --textfield-input-padding: 24px 0 6px;
103
+ --textfield-input-gap: var(--space-m);
104
+ --textfield-button-width: 40px;
105
+ --textfield-button-height: 24px;
120
106
  }
121
107
  .InputNumber_size_l {
122
- --number-input-gutter-x: 24px;
123
- --number-input-input-height: 64px;
124
- --number-input-input-font: var(--typography-text-l-font);
125
- --number-input-input-padding: 26px 0 6px;
126
- --number-input-input-gap: var(--space-l);
127
- --number-input-button-width: 48px;
128
- --number-input-button-height: 28px;
108
+ --textfield-gutter-x: 24px;
109
+ --textfield-input-height: 64px;
110
+ --textfield-input-font: var(--typography-text-l-font);
111
+ --textfield-input-padding: 26px 0 6px;
112
+ --textfield-input-gap: var(--space-l);
113
+ --textfield-button-width: 48px;
114
+ --textfield-button-height: 28px;
129
115
  }
130
116
  .InputNumber_fullWidth {
131
117
  inline-size: 100%;
132
118
  }
133
119
  .InputNumber_hasLabel .InputNumber-Field {
134
- padding: var(--number-input-input-padding);
135
- font: var(--number-input-input-font);
120
+ padding: var(--textfield-input-padding);
121
+ font: var(--textfield-input-font);
136
122
  }
137
123
  .InputNumber_hasLabel .InputNumber-Field::placeholder {
138
124
  opacity: 0;
@@ -141,31 +127,31 @@
141
127
  opacity: 1;
142
128
  }
143
129
  .InputNumber:hover {
144
- --number-input-border-color: var(--color-border-main-hover);
130
+ --textfield-border-color: var(--color-border-main-hover);
145
131
  }
146
132
  .InputNumber_focused,
147
133
  .InputNumber_focused:hover {
148
- --number-input-border-width: var(--border-width-m);
149
- --number-input-background-color: var(--color-background-main);
150
- --number-input-border-color: var(--color-border-action);
134
+ --textfield-border-width: var(--border-width-m);
135
+ --textfield-background-color: var(--color-background-main);
136
+ --textfield-border-color: var(--color-border-action);
151
137
  }
152
138
  .InputNumber_error,
153
139
  .InputNumber_error.InputNumber:hover,
154
140
  .InputNumber_error.InputNumber_focused,
155
141
  .InputNumber_error.InputNumber_focused:hover {
156
- --number-input-border-color: var(--color-border-error);
142
+ --textfield-border-color: var(--color-border-error);
157
143
  }
158
144
  .InputNumber_disabled {
159
- --number-input-border-color: var(--color-border-disabled);
160
- --number-input-background-color: var(--color-background-disabled);
161
- --number-input-color: var(--color-content-secondary);
145
+ --textfield-border-color: var(--color-border-disabled);
146
+ --textfield-background-color: var(--color-background-disabled);
147
+ --textfield-color: var(--color-content-secondary);
162
148
  pointer-events: none;
163
149
  cursor: default;
164
150
  }
165
151
  .IconButton.InputNumber-Increment,
166
152
  .IconButton.InputNumber-Decrement {
167
- inline-size: var(--number-input-button-width);
168
- block-size: var(--number-input-button-height);
153
+ inline-size: var(--textfield-button-width);
154
+ block-size: var(--textfield-button-height);
169
155
  }
170
156
  .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
171
157
  pointer-events: none;
@@ -11,6 +11,7 @@ import { cn } from '../../utils/classname';
11
11
  import { FieldHint } from '../FieldHint';
12
12
  import { FieldIcon } from '../FieldIcon';
13
13
  import { FieldLabel } from '../FieldLabel';
14
+ import { Fieldset } from '../Fieldset';
14
15
  import { IconButton } from '../IconButton';
15
16
  import { INPUT_NUMBER_DEFAULT_STEP, INPUT_NUMBER_DEFAULT_SIZE, INPUT_NUMBER_DEFAULT_AUTO_FOCUS, INPUT_NUMBER_DEFAULT_ERROR, INPUT_NUMBER_DEFAULT_REQUIRED, INPUT_NUMBER_DEFAULT_DISABLED, INPUT_NUMBER_DEFAULT_FULL_WIDTH, INPUT_NUMBER_DEFAULT_VALUE, INPUT_NUMBER_DEFAULT_MIN, INPUT_NUMBER_DEFAULT_MAX, } from './constants';
16
17
  import { getValue, isInputInvalid, isValidValue } from './utils';
@@ -142,7 +143,7 @@ export var InputNumber = forwardRef(function (inProps, ref) {
142
143
  React.createElement("span", { className: cnInputNumber('Controls') },
143
144
  React.createElement(IconButton, { tabIndex: -1, size: size, className: cnInputNumber('Increment'), icon: SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", variant: "ghost" }),
144
145
  React.createElement(IconButton, { tabIndex: -1, size: size, icon: SortDownIcon, className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", variant: "ghost" })),
145
- React.createElement("fieldset", { className: cnInputNumber('Fieldset') })),
146
+ React.createElement(Fieldset, { className: cnInputNumber('Fieldset') })),
146
147
  React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
147
148
  });
148
149
  InputNumber.displayName = 'InputNumber';
@@ -1,5 +1,5 @@
1
- import { KeyboardEvent } from 'react';
2
- import { InputNumberValue, InputNumberCountDirection } from './types';
1
+ import type { KeyboardEvent } from 'react';
2
+ import type { InputNumberValue, InputNumberCountDirection } from './types';
3
3
  export declare const isValidValue: (value?: InputNumberValue) => boolean;
4
4
  export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
5
5
  export declare const getValue: ({ value, step, min, max, countDirection, }: {
@@ -1,5 +1,5 @@
1
1
  import './Link.css';
2
- import { ElementType } from 'react';
2
+ import type { ElementType } from 'react';
3
3
  import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
4
4
  import { type TypographyBaseProps } from '../Typography';
5
5
  export type LinkBaseProps = Pick<TypographyBaseProps, 'variant' | 'display' | 'defaultMargin' | 'children' | 'noWrap' | 'align'>;
@@ -1,6 +1,5 @@
1
1
  import './ListItem.css';
2
- import { ElementType } from 'react';
3
- import type { ReactNode } from 'react';
2
+ import type { ReactNode, ElementType } from 'react';
4
3
  import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
5
4
  import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
6
5
  export declare const cnListItem: import("@bem-react/classname").ClassNameFormatter;
@@ -1,6 +1,5 @@
1
1
  import './ListItemButton.css';
2
- import { ElementType } from 'react';
3
- import type { ReactNode } from 'react';
2
+ import type { ReactNode, ElementType } from 'react';
4
3
  import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
5
4
  import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
6
5
  export declare const cnListItemButton: import("@bem-react/classname").ClassNameFormatter;
@@ -1,7 +1,7 @@
1
1
  import type { ElementType, ReactNode } from 'react';
2
- import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
3
- import { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
4
- import { LIST_DEFAULT_TAG } from './constants';
2
+ import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
3
+ import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
4
+ import type { LIST_DEFAULT_TAG } from './constants';
5
5
  export type ListSizeVariant = FormElementSizeVariant;
6
6
  export type ListContextValue = {
7
7
  size: ListSizeVariant;
@@ -1,4 +1,4 @@
1
- import { ElementType } from 'react';
1
+ import type { ElementType } from 'react';
2
2
  import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
3
3
  import { type ListItemButtonBaseProps } from '../../../List';
4
4
  import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ListProps } from '../../../List';
2
+ import type { ListProps } from '../../../List';
3
3
  export type MenuListProps = {
4
4
  /** Если {true} устанавливает автофокус на первый или выбранный элемент в списке */
5
5
  autoFocus?: boolean;
@@ -1,7 +1,7 @@
1
1
  import './Modal.css';
2
2
  import React from 'react';
3
3
  import type { ReactNode, RefObject } from 'react';
4
- import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
4
+ import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
5
5
  import { type BackdropProps } from '../Backdrop';
6
6
  import { type PaperProps } from '../Paper';
7
7
  import { type PortalProps, type PortalRef } from '../Portal';
@@ -69,7 +69,7 @@ export var Modal = forwardRef(function (_a, ref) {
69
69
  });
70
70
  return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
71
71
  React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
72
- !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1, onClick: onClose }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
72
+ !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
73
73
  React.createElement(ModalConsumer, __assign({}, windowProps, { open: openState && !disableScrollLock, ref: useMultiRef([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
74
74
  });
75
75
  Modal.displayName = 'Modal';
@@ -1,5 +1,5 @@
1
- import { FC } from 'react';
2
- import { PaperProps } from '../../Paper';
1
+ import type { FC } from 'react';
2
+ import type { PaperProps } from '../../Paper';
3
3
  export declare const ModalConsumer: FC<PaperProps & {
4
4
  open: boolean;
5
5
  }>;
@@ -1,5 +1,5 @@
1
1
  import type { PaginationBaseProps } from '../../index';
2
- import { EllipsisType } from '../../types';
2
+ import type { EllipsisType } from '../../types';
3
3
  type Params = Required<Pick<PaginationBaseProps, 'page' | 'pageSize' | 'totalCount' | 'siblingCount'>>;
4
4
  export declare const createPaginationRange: ({ page, pageSize, totalCount, siblingCount, }: Params) => (number | EllipsisType)[];
5
5
  export {};
@@ -1,7 +1,7 @@
1
- import React, { HTMLAttributes } from 'react';
2
- import { PaginationItemProps } from './components';
3
- import { ELLIPSIS, NEXT, PREVIOUS } from './constants';
4
- import { GetItemAriaLabel } from './helpers/getItemAriaLabel';
1
+ import type { HTMLAttributes, ReactNode } from 'react';
2
+ import type { PaginationItemProps } from './components';
3
+ import type { ELLIPSIS, NEXT, PREVIOUS } from './constants';
4
+ import type { GetItemAriaLabel } from './helpers/getItemAriaLabel';
5
5
  export type EllipsisType = typeof ELLIPSIS;
6
6
  export type PreviousType = typeof PREVIOUS;
7
7
  export type NextType = typeof NEXT;
@@ -33,6 +33,6 @@ export type PaginationBaseProps = {
33
33
  /** Функция форматирования атрибута aria-label. */
34
34
  getItemAriaLabel?: GetItemAriaLabel;
35
35
  /** Рендер функция, для отображения кнопок пагинации. */
36
- renderComponent?: (PagItemProps: PaginationItemProps) => React.ReactNode;
36
+ renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
37
37
  };
38
38
  export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;
@@ -1,11 +1,10 @@
1
- import React, { ComponentRef, ElementType } from 'react';
2
- import type { RefObject } from 'react';
3
- import PopperJS from '@popperjs/core';
1
+ import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
2
+ import type PopperJS from '@popperjs/core';
4
3
  import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
5
4
  import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
6
5
  import type { PortalProps } from '../Portal';
7
6
  import type { PopoverArrowProps } from './components';
8
- import { POPOVER_DEFAULT_TAG } from './constants';
7
+ import type { POPOVER_DEFAULT_TAG } from './constants';
9
8
  export type VirtualElement = {
10
9
  getBoundingClientRect: () => DOMRect;
11
10
  contextElement?: Element;
@@ -25,7 +24,7 @@ export type PopoverBaseProps = {
25
24
  y: number;
26
25
  };
27
26
  /** Контент поповера */
28
- children?: React.ReactNode;
27
+ children?: ReactNode;
29
28
  /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
30
29
  onClose?: () => void;
31
30
  /** Функция обратного вызова которая будет вызвана до начала
@@ -1,6 +1,6 @@
1
1
  import './ProgressBar.css';
2
- import { type ElementType } from 'react';
3
- import { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
2
+ import type { ElementType } from 'react';
3
+ import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
4
4
  import { PROGRESSBAR_DEFAULT_TAG } from './constants';
5
5
  export declare const cnProgressBar: import("@bem-react/classname").ClassNameFormatter;
6
6
  export type ProgressBarBaseProps = {
@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
2
2
  import './ProgressBar.css';
3
3
  import React from 'react';
4
4
  import { cn } from '../../utils/classname';
5
- import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
5
+ import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
6
6
  import { PROGRESSBAR_DEFAULT_TAG } from './constants';
7
7
  export var cnProgressBar = cn('ProgressBar');
8
8
  export var ProgressBar = polymorphicComponentWithRef(function (_a, ref) {
@@ -4,6 +4,7 @@
4
4
  --textfield-background-color: var(--color-background-primary);
5
5
  --textfield-border-width: var(--border-width-s);
6
6
  --textfield-border-color: var(--color-border-main);
7
+ font: var(--textfield-input-font);
7
8
  display: inline-flex;
8
9
  vertical-align: top;
9
10
  flex-direction: column;
@@ -21,19 +22,6 @@
21
22
  inline-size: 100%;
22
23
  box-sizing: border-box;
23
24
  }
24
- .Select-Fieldset {
25
- position: absolute;
26
- inset-block-end: 0;
27
- inset-inline-end: 0;
28
- inset-block-start: 0;
29
- inset-inline-start: 0;
30
- margin: 0;
31
- padding: 0;
32
- pointer-events: none;
33
- border-radius: var(--border-radius-xs);
34
- border: var(--textfield-border-width) solid var(--textfield-border-color);
35
- transition: border var(--transition-default);
36
- }
37
25
  .Select-Body {
38
26
  position: relative;
39
27
  display: flex;
@@ -64,7 +52,6 @@
64
52
  color: var(--textfield-color);
65
53
  box-sizing: border-box;
66
54
  block-size: var(--textfield-input-block-size);
67
- font: var(--textfield-input-font);
68
55
  align-items: center;
69
56
  }
70
57
  .Select-Field span {
@@ -176,7 +163,8 @@
176
163
  }
177
164
  .Select_animation-enter-active {
178
165
  opacity: 1;
179
- transition: opacity var(--transition-default),
166
+ transition:
167
+ opacity var(--transition-default),
180
168
  transform var(--transition-default);
181
169
  transform: translate(0);
182
170
  pointer-events: none;
@@ -192,7 +180,8 @@
192
180
  }
193
181
  .Select_animation-exit-active {
194
182
  opacity: 0;
195
- transition: opacity var(--transition-default),
183
+ transition:
184
+ opacity var(--transition-default),
196
185
  transform var(--transition-default);
197
186
  transform: translate(0, calc(var(--space-s) * -1));
198
187
  pointer-events: none;
@@ -7,6 +7,7 @@ import { useMultiRef } from '../../../../hooks/useMultiRef';
7
7
  import { FieldHint } from '../../../FieldHint';
8
8
  import { FieldIcon } from '../../../FieldIcon';
9
9
  import { FieldLabel } from '../../../FieldLabel';
10
+ import { Fieldset } from '../../../Fieldset';
10
11
  import { cnSelect } from '../../index';
11
12
  export var SelectInput = forwardRef(function (_a, ref) {
12
13
  var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.multiline, multiline = _c === void 0 ? false : _c, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, labelRef = _a.labelRef, labelProps = _a.labelProps, fieldProps = _a.fieldProps, onClick = _a.onClick, focused = _a.focused, placeholderProp = _a.placeholder, renderedValue = _a.renderedValue, bodyProps = _a.bodyProps, bodyRefProp = _a.bodyRef, open = _a.open, other = __rest(_a, ["size", "multiline", "label", "error", "id", "name", "renderLeft", "renderRight", "inputRef", "fieldRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onFocus", "onBlur", "onKeyDown", "labelRef", "labelProps", "fieldProps", "onClick", "focused", "placeholder", "renderedValue", "bodyProps", "bodyRef", "open"]);
@@ -32,7 +33,7 @@ export var SelectInput = forwardRef(function (_a, ref) {
32
33
  React.createElement("input", __assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: cnSelect('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))),
33
34
  React.createElement(FieldIcon, { className: cnSelect('RenderRight'), icon: renderRight, size: size }),
34
35
  React.createElement(FieldIcon, { className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })), icon: ChevronDownIcon, size: size }),
35
- React.createElement("fieldset", { className: cnSelect('Fieldset') })),
36
+ React.createElement(Fieldset, { className: cnSelect('Fieldset') })),
36
37
  React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
37
38
  });
38
39
  SelectInput.displayName = 'SelectInput';
@@ -1,5 +1,4 @@
1
- import React, { SyntheticEvent } from 'react';
2
- import type { HTMLAttributes } from 'react';
1
+ import type { HTMLAttributes, SyntheticEvent, ReactNode } from 'react';
3
2
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
4
3
  import type { MenuProps } from '../Menu';
5
4
  import type { SelectInputProps } from './components';
@@ -10,7 +9,7 @@ export type SelectedOptionProp = {
10
9
  label?: SelectPropLabel;
11
10
  value?: SelectPropValue;
12
11
  };
13
- export type SelectRenderValue = (option: SelectedOptionProp) => React.ReactNode | null;
12
+ export type SelectRenderValue = (option: SelectedOptionProp) => ReactNode | null;
14
13
  type SelectOpenControlledProps = {
15
14
  /** Текущее состояние списка. Если `true`, список отображается. */
16
15
  open?: boolean;
@@ -47,7 +46,7 @@ export type SelectProps = {
47
46
  /** Рендер-функция для выбранного значения */
48
47
  renderValue?: SelectRenderValue;
49
48
  /** Содержимое компонента */
50
- children?: React.ReactNode;
49
+ children?: ReactNode;
51
50
  /** Свойства компонента Menu */
52
51
  menuProps?: Omit<MenuProps, 'onClose' | 'open' | 'anchorRef'>;
53
52
  /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
@@ -1,7 +1,7 @@
1
1
  import type { ElementType, ComponentPropsWithRef, ChangeEvent } from 'react';
2
2
  import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
3
3
  import type { TooltipProps } from '../Tooltip';
4
- import { SLIDER_DEFAULT_TAG } from './constants';
4
+ import type { SLIDER_DEFAULT_TAG } from './constants';
5
5
  export declare const sliderSizeVariant: readonly ["m", "l"];
6
6
  export type SliderSizeVariant = (typeof sliderSizeVariant)[number];
7
7
  export type SliderValue = number;
@@ -1,4 +1,4 @@
1
- import { SnackbarItemProps } from './components/SnackbarItem';
1
+ import type { SnackbarItemProps } from './components/SnackbarItem';
2
2
  export declare const snackbarVerticalAlignVariant: readonly ["top", "bottom"];
3
3
  export declare const snackbarHorizontalAlignVariant: readonly ["left", "center", "right"];
4
4
  export declare const snackbarStatusVariant: readonly ["success", "info", "warning", "error"];
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import type { FC } from 'react';
2
2
  import type { IconProps } from '@ozen-ui/icons';
3
3
  export declare const removeButtonSizeVariant: readonly ["s", "xs", "2xs"];
4
4
  export type RemoveButtonSizeVariant = (typeof removeButtonSizeVariant)[number];