@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.
- package/FieldControl/package.json +5 -0
- package/FieldInput/package.json +5 -0
- package/Fieldset/package.json +5 -0
- package/__inner__/cjs/components/Backdrop/Backdrop.d.ts +2 -2
- package/__inner__/cjs/components/Breadcrumbs/types.d.ts +2 -2
- package/__inner__/cjs/components/DataList/DataList.d.ts +1 -1
- package/__inner__/cjs/components/DataList/DataListProvider.d.ts +5 -5
- package/__inner__/cjs/components/FieldControl/FieldControl.css +135 -0
- package/__inner__/cjs/components/FieldControl/FieldControl.d.ts +13 -0
- package/__inner__/cjs/components/FieldControl/FieldControl.js +82 -0
- package/__inner__/cjs/components/FieldControl/FieldControlContext.d.ts +15 -0
- package/__inner__/cjs/components/FieldControl/FieldControlContext.js +6 -0
- package/__inner__/cjs/components/FieldControl/index.d.ts +2 -0
- package/__inner__/cjs/components/FieldControl/index.js +5 -0
- package/__inner__/cjs/components/FieldHint/FieldHint.d.ts +6 -9
- package/__inner__/cjs/components/FieldHint/FieldHint.js +24 -4
- package/__inner__/cjs/components/FieldIcon/FieldIcon.css +1 -21
- package/__inner__/cjs/components/FieldIcon/FieldIcon.d.ts +8 -12
- package/__inner__/cjs/components/FieldIcon/FieldIcon.js +15 -4
- package/__inner__/cjs/components/FieldInput/FieldInput.d.ts +11 -0
- package/__inner__/cjs/components/FieldInput/FieldInput.js +54 -0
- package/__inner__/cjs/components/FieldInput/index.d.ts +1 -0
- package/__inner__/cjs/components/FieldInput/index.js +4 -0
- package/__inner__/cjs/components/FieldLabel/FieldLabel.d.ts +7 -5
- package/__inner__/cjs/components/FieldLabel/FieldLabel.js +39 -10
- package/__inner__/cjs/components/Fieldset/Fieldset.css +13 -0
- package/__inner__/cjs/components/Fieldset/Fieldset.d.ts +10 -0
- package/__inner__/cjs/components/Fieldset/Fieldset.js +15 -0
- package/__inner__/cjs/components/Fieldset/index.d.ts +1 -0
- package/__inner__/cjs/components/Fieldset/index.js +4 -0
- package/__inner__/cjs/components/FilePicker/FilePicker.css +48 -59
- package/__inner__/cjs/components/FilePicker/FilePicker.js +2 -1
- package/__inner__/cjs/components/Input/Input.css +9 -121
- package/__inner__/cjs/components/Input/Input.d.ts +1 -62
- package/__inner__/cjs/components/Input/Input.js +32 -53
- package/__inner__/cjs/components/Input/constants.d.ts +1 -0
- package/__inner__/cjs/components/Input/constants.js +4 -0
- package/__inner__/cjs/components/Input/index.d.ts +1 -0
- package/__inner__/cjs/components/Input/index.js +1 -0
- package/__inner__/cjs/components/Input/types.d.ts +71 -0
- package/__inner__/cjs/components/Input/types.js +13 -0
- package/__inner__/cjs/components/InputNumber/InputNumber.css +60 -74
- package/__inner__/cjs/components/InputNumber/InputNumber.js +2 -1
- package/__inner__/cjs/components/InputNumber/utils.d.ts +2 -2
- package/__inner__/cjs/components/Link/Link.d.ts +1 -1
- package/__inner__/cjs/components/List/components/ListItem/ListItem.d.ts +1 -2
- package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts +1 -2
- package/__inner__/cjs/components/List/types.d.ts +3 -3
- package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.d.ts +1 -1
- package/__inner__/cjs/components/Menu/components/MenuList/MenuList.d.ts +1 -1
- package/__inner__/cjs/components/Modal/Modal.d.ts +1 -1
- package/__inner__/cjs/components/Modal/Modal.js +1 -1
- package/__inner__/cjs/components/Modal/components/ModalConsumer.d.ts +2 -2
- package/__inner__/cjs/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts +1 -1
- package/__inner__/cjs/components/Pagination/types.d.ts +5 -5
- package/__inner__/cjs/components/Popover/types.d.ts +4 -5
- package/__inner__/cjs/components/ProgressBar/ProgressBar.d.ts +2 -2
- package/__inner__/cjs/components/Select/Select.css +5 -16
- package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js +2 -1
- package/__inner__/cjs/components/Select/types.d.ts +3 -4
- package/__inner__/cjs/components/Slider/types.d.ts +1 -1
- package/__inner__/cjs/components/Snackbar/types.d.ts +1 -1
- package/__inner__/cjs/components/Tag/components/RemoveButton/RemoveButton.d.ts +1 -1
- package/__inner__/cjs/components/Textarea/Textarea.css +3 -107
- package/__inner__/cjs/components/Textarea/Textarea.d.ts +1 -59
- package/__inner__/cjs/components/Textarea/Textarea.js +8 -62
- package/__inner__/cjs/components/Textarea/components/TextareaConsumer.d.ts +3 -0
- package/__inner__/cjs/components/Textarea/components/TextareaConsumer.js +36 -0
- package/__inner__/cjs/components/Textarea/components/TextareaCounter.d.ts +7 -0
- package/__inner__/cjs/components/Textarea/components/TextareaCounter.js +25 -0
- package/__inner__/cjs/components/Textarea/components/index.d.ts +2 -0
- package/__inner__/cjs/components/Textarea/components/index.js +5 -0
- package/__inner__/cjs/components/Textarea/constants.d.ts +1 -0
- package/__inner__/cjs/components/Textarea/constants.js +4 -0
- package/__inner__/cjs/components/Textarea/index.d.ts +1 -0
- package/__inner__/cjs/components/Textarea/index.js +1 -0
- package/__inner__/cjs/components/Textarea/types.d.ts +69 -0
- package/__inner__/cjs/components/Textarea/types.js +4 -0
- package/__inner__/cjs/components/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/__inner__/cjs/components/ThemeProvider/types.d.ts +2 -0
- package/__inner__/cjs/components/Tooltip/types.d.ts +1 -1
- package/__inner__/cjs/hooks/useMultiRef/useMultiRef.d.ts +2 -3
- package/__inner__/cjs/types/ResponsiveValue.d.ts +1 -1
- package/__inner__/cjs/utils/isKey.d.ts +2 -2
- package/__inner__/cjs/utils/polymorphicComponentWithRef.d.ts +0 -1
- package/__inner__/esm/components/Backdrop/Backdrop.d.ts +2 -2
- package/__inner__/esm/components/Backdrop/Backdrop.js +1 -1
- package/__inner__/esm/components/Breadcrumbs/types.d.ts +2 -2
- package/__inner__/esm/components/DataList/DataList.d.ts +1 -1
- package/__inner__/esm/components/DataList/DataListProvider.d.ts +5 -5
- package/__inner__/esm/components/FieldControl/FieldControl.css +135 -0
- package/__inner__/esm/components/FieldControl/FieldControl.d.ts +13 -0
- package/__inner__/esm/components/FieldControl/FieldControl.js +79 -0
- package/__inner__/esm/components/FieldControl/FieldControlContext.d.ts +15 -0
- package/__inner__/esm/components/FieldControl/FieldControlContext.js +2 -0
- package/__inner__/esm/components/FieldControl/index.d.ts +2 -0
- package/__inner__/esm/components/FieldControl/index.js +2 -0
- package/__inner__/esm/components/FieldHint/FieldHint.d.ts +6 -9
- package/__inner__/esm/components/FieldHint/FieldHint.js +25 -5
- package/__inner__/esm/components/FieldIcon/FieldIcon.css +1 -21
- package/__inner__/esm/components/FieldIcon/FieldIcon.d.ts +8 -12
- package/__inner__/esm/components/FieldIcon/FieldIcon.js +16 -5
- package/__inner__/esm/components/FieldInput/FieldInput.d.ts +11 -0
- package/__inner__/esm/components/FieldInput/FieldInput.js +51 -0
- package/__inner__/esm/components/FieldInput/index.d.ts +1 -0
- package/__inner__/esm/components/FieldInput/index.js +1 -0
- package/__inner__/esm/components/FieldLabel/FieldLabel.d.ts +7 -5
- package/__inner__/esm/components/FieldLabel/FieldLabel.js +38 -8
- package/__inner__/esm/components/Fieldset/Fieldset.css +13 -0
- package/__inner__/esm/components/Fieldset/Fieldset.d.ts +10 -0
- package/__inner__/esm/components/Fieldset/Fieldset.js +12 -0
- package/__inner__/esm/components/Fieldset/index.d.ts +1 -0
- package/__inner__/esm/components/Fieldset/index.js +1 -0
- package/__inner__/esm/components/FilePicker/FilePicker.css +48 -59
- package/__inner__/esm/components/FilePicker/FilePicker.js +2 -1
- package/__inner__/esm/components/Input/Input.css +9 -121
- package/__inner__/esm/components/Input/Input.d.ts +1 -62
- package/__inner__/esm/components/Input/Input.js +33 -54
- package/__inner__/esm/components/Input/constants.d.ts +1 -0
- package/__inner__/esm/components/Input/constants.js +1 -0
- package/__inner__/esm/components/Input/index.d.ts +1 -0
- package/__inner__/esm/components/Input/index.js +1 -0
- package/__inner__/esm/components/Input/types.d.ts +71 -0
- package/__inner__/esm/components/Input/types.js +10 -0
- package/__inner__/esm/components/InputNumber/InputNumber.css +60 -74
- package/__inner__/esm/components/InputNumber/InputNumber.js +2 -1
- package/__inner__/esm/components/InputNumber/utils.d.ts +2 -2
- package/__inner__/esm/components/Link/Link.d.ts +1 -1
- package/__inner__/esm/components/List/components/ListItem/ListItem.d.ts +1 -2
- package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.d.ts +1 -2
- package/__inner__/esm/components/List/types.d.ts +3 -3
- package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.d.ts +1 -1
- package/__inner__/esm/components/Menu/components/MenuList/MenuList.d.ts +1 -1
- package/__inner__/esm/components/Modal/Modal.d.ts +1 -1
- package/__inner__/esm/components/Modal/Modal.js +1 -1
- package/__inner__/esm/components/Modal/components/ModalConsumer.d.ts +2 -2
- package/__inner__/esm/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts +1 -1
- package/__inner__/esm/components/Pagination/types.d.ts +5 -5
- package/__inner__/esm/components/Popover/types.d.ts +4 -5
- package/__inner__/esm/components/ProgressBar/ProgressBar.d.ts +2 -2
- package/__inner__/esm/components/ProgressBar/ProgressBar.js +1 -1
- package/__inner__/esm/components/Select/Select.css +5 -16
- package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js +2 -1
- package/__inner__/esm/components/Select/types.d.ts +3 -4
- package/__inner__/esm/components/Slider/types.d.ts +1 -1
- package/__inner__/esm/components/Snackbar/types.d.ts +1 -1
- package/__inner__/esm/components/Tag/components/RemoveButton/RemoveButton.d.ts +1 -1
- package/__inner__/esm/components/Textarea/Textarea.css +3 -107
- package/__inner__/esm/components/Textarea/Textarea.d.ts +1 -59
- package/__inner__/esm/components/Textarea/Textarea.js +9 -63
- package/__inner__/esm/components/Textarea/components/TextareaConsumer.d.ts +3 -0
- package/__inner__/esm/components/Textarea/components/TextareaConsumer.js +32 -0
- package/__inner__/esm/components/Textarea/components/TextareaCounter.d.ts +7 -0
- package/__inner__/esm/components/Textarea/components/TextareaCounter.js +21 -0
- package/__inner__/esm/components/Textarea/components/index.d.ts +2 -0
- package/__inner__/esm/components/Textarea/components/index.js +2 -0
- package/__inner__/esm/components/Textarea/constants.d.ts +1 -0
- package/__inner__/esm/components/Textarea/constants.js +1 -0
- package/__inner__/esm/components/Textarea/index.d.ts +1 -0
- package/__inner__/esm/components/Textarea/index.js +1 -0
- package/__inner__/esm/components/Textarea/types.d.ts +69 -0
- package/__inner__/esm/components/Textarea/types.js +1 -0
- package/__inner__/esm/components/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/__inner__/esm/components/ThemeProvider/types.d.ts +2 -0
- package/__inner__/esm/components/Tooltip/Tooltip.js +1 -1
- package/__inner__/esm/components/Tooltip/types.d.ts +1 -1
- package/__inner__/esm/hooks/useMultiRef/useMultiRef.d.ts +2 -3
- package/__inner__/esm/types/ResponsiveValue.d.ts +1 -1
- package/__inner__/esm/utils/isKey.d.ts +2 -2
- package/__inner__/esm/utils/polymorphicComponentWithRef.d.ts +0 -1
- package/package.json +1 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/* stylelint-disable */
|
|
2
2
|
.InputNumber {
|
|
3
|
-
--
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
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(--
|
|
33
|
-
column-gap: var(--
|
|
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(--
|
|
37
|
-
background-color: var(--
|
|
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(--
|
|
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(--
|
|
43
|
+
color: var(--textfield-color);
|
|
57
44
|
box-sizing: border-box;
|
|
58
|
-
block-size: var(--
|
|
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(--
|
|
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
|
-
--
|
|
84
|
-
--
|
|
85
|
-
--
|
|
86
|
-
--
|
|
87
|
-
--
|
|
88
|
-
--
|
|
89
|
-
--
|
|
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
|
-
--
|
|
96
|
-
--
|
|
97
|
-
--
|
|
98
|
-
--
|
|
99
|
-
--
|
|
100
|
-
--
|
|
101
|
-
--
|
|
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
|
-
--
|
|
105
|
-
--
|
|
106
|
-
--
|
|
107
|
-
--
|
|
108
|
-
--
|
|
109
|
-
--
|
|
110
|
-
--
|
|
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
|
-
--
|
|
114
|
-
--
|
|
115
|
-
--
|
|
116
|
-
--
|
|
117
|
-
--
|
|
118
|
-
--
|
|
119
|
-
--
|
|
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
|
-
--
|
|
123
|
-
--
|
|
124
|
-
--
|
|
125
|
-
--
|
|
126
|
-
--
|
|
127
|
-
--
|
|
128
|
-
--
|
|
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(--
|
|
135
|
-
font: var(--
|
|
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
|
-
--
|
|
130
|
+
--textfield-border-color: var(--color-border-main-hover);
|
|
145
131
|
}
|
|
146
132
|
.InputNumber_focused,
|
|
147
133
|
.InputNumber_focused:hover {
|
|
148
|
-
--
|
|
149
|
-
--
|
|
150
|
-
--
|
|
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
|
-
--
|
|
142
|
+
--textfield-border-color: var(--color-border-error);
|
|
157
143
|
}
|
|
158
144
|
.InputNumber_disabled {
|
|
159
|
-
--
|
|
160
|
-
--
|
|
161
|
-
--
|
|
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(--
|
|
168
|
-
block-size: var(--
|
|
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(
|
|
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,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
|
|
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';
|
package/__inner__/esm/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts
CHANGED
|
@@ -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
|
|
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) =>
|
|
36
|
+
renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
|
|
37
37
|
};
|
|
38
38
|
export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type
|
|
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?:
|
|
27
|
+
children?: ReactNode;
|
|
29
28
|
/** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
|
|
30
29
|
onClose?: () => void;
|
|
31
30
|
/** Функция обратного вызова которая будет вызвана до начала
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './ProgressBar.css';
|
|
2
|
-
import {
|
|
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
|
|
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:
|
|
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:
|
|
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(
|
|
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
|
|
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) =>
|
|
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?:
|
|
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];
|