@koobiq/react-components 0.7.1 → 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/dist/components/Alert/Alert.js +5 -3
- package/dist/components/Alert/types.d.ts +0 -3
- package/dist/components/Backdrop/Backdrop.js +1 -1
- package/dist/components/Backdrop/types.d.ts +4 -1
- package/dist/components/Button/Button.js +7 -7
- package/dist/components/Button/types.d.ts +0 -4
- package/dist/components/ButtonToggleGroup/ButtonToggleGroup.js +6 -6
- package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js +6 -6
- package/dist/components/ButtonToggleGroup/components/ButtonToggle/types.d.ts +0 -1
- package/dist/components/ButtonToggleGroup/types.d.ts +0 -3
- package/dist/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/components/Checkbox/Checkbox.js +6 -6
- package/dist/components/Checkbox/types.d.ts +0 -5
- package/dist/components/Container/Container.js +2 -2
- package/dist/components/Container/types.d.ts +0 -2
- package/dist/components/DateInput/DateInput.js +27 -17
- package/dist/components/DateInput/types.d.ts +20 -6
- package/dist/components/DateInput/types.js +5 -0
- package/dist/components/DatePicker/DatePicker.js +5 -1
- package/dist/components/DatePicker/types.d.ts +14 -3
- package/dist/components/Dialog/Dialog.js +1 -1
- package/dist/components/Dialog/components/DialogCloseButton.d.ts +2 -2
- package/dist/components/Dialog/types.d.ts +0 -1
- package/dist/components/Divider/Divider.js +5 -4
- package/dist/components/Divider/types.d.ts +0 -2
- package/dist/components/FieldComponents/Field/Field.d.ts +4 -0
- package/dist/components/FieldComponents/Field/Field.js +10 -0
- package/dist/components/FieldComponents/Field/Field.module.css.js +8 -0
- package/dist/components/FieldComponents/Field/index.d.ts +2 -0
- package/dist/components/FieldComponents/Field/types.d.ts +4 -0
- package/dist/components/FieldComponents/FieldAddon/FieldAddon.js +4 -4
- package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js +2 -2
- package/dist/components/FieldComponents/FieldError/FieldError.d.ts +4 -2
- package/dist/components/FieldComponents/FieldError/FieldError.js +6 -8
- package/dist/components/FieldComponents/FieldInput/FieldInput.js +3 -3
- package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.js +2 -2
- package/dist/components/FieldComponents/FieldSelect/FieldSelect.js +3 -3
- package/dist/components/FieldComponents/index.d.ts +1 -2
- package/dist/components/FormControl/FormControl.d.ts +4 -0
- package/dist/components/FormControl/FormControl.js +33 -0
- package/dist/components/FormControl/FormControl.module.css.js +17 -0
- package/dist/components/FormControl/index.d.ts +2 -0
- package/dist/components/FormControl/types.d.ts +19 -0
- package/dist/components/FormControl/types.js +6 -0
- package/dist/components/FormControlLabel/FormControlLabel.d.ts +4 -2
- package/dist/components/{FieldComponents/FieldLabel/FieldLabel.js → FormControlLabel/FormControlLabel.js} +7 -7
- package/dist/components/FormControlLabel/FormControlLabel.module.css.js +14 -0
- package/dist/components/FormControlLabel/types.d.ts +6 -31
- package/dist/components/IconButton/IconButton.js +4 -4
- package/dist/components/IconButton/types.d.ts +0 -3
- package/dist/components/Input/Input.d.ts +8 -5
- package/dist/components/Input/Input.js +25 -15
- package/dist/components/Input/Input.module.css.js +4 -0
- package/dist/components/Input/types.d.ts +20 -13
- package/dist/components/Input/types.js +5 -0
- package/dist/components/InputNumber/InputNumber.d.ts +8 -5
- package/dist/components/InputNumber/InputNumber.js +21 -15
- package/dist/components/InputNumber/types.d.ts +19 -12
- package/dist/components/InputNumber/types.js +5 -0
- package/dist/components/Link/Link.js +3 -3
- package/dist/components/Link/types.d.ts +0 -5
- package/dist/components/List/components/ListOption/ListOption.js +5 -5
- package/dist/components/List/components/ListSection/ListSection.js +1 -1
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/Modal/types.d.ts +1 -5
- package/dist/components/Popover/PopoverInner.js +2 -2
- package/dist/components/Popover/types.d.ts +0 -4
- package/dist/components/RadioGroup/RadioGroup.js +73 -23
- package/dist/components/RadioGroup/RadioGroup.module.css.js +8 -0
- package/dist/components/RadioGroup/components/Radio/Radio.d.ts +1 -1
- package/dist/components/RadioGroup/components/Radio/types.d.ts +0 -1
- package/dist/components/RadioGroup/components/index.d.ts +0 -2
- package/dist/components/RadioGroup/types.d.ts +38 -10
- package/dist/components/RadioGroup/types.js +5 -0
- package/dist/components/SearchInput/SearchInput.d.ts +8 -5
- package/dist/components/SearchInput/SearchInput.js +26 -19
- package/dist/components/SearchInput/types.d.ts +20 -8
- package/dist/components/SearchInput/types.js +5 -0
- package/dist/components/Select/Select.js +30 -26
- package/dist/components/Select/Select.module.css.js +0 -6
- package/dist/components/Select/components/SelectOption/SelectOption.js +5 -5
- package/dist/components/Select/types.d.ts +22 -8
- package/dist/components/Select/types.js +5 -0
- package/dist/components/SidePanel/SidePanel.js +1 -1
- package/dist/components/SidePanel/types.d.ts +0 -5
- package/dist/components/Table/Table.js +4 -4
- package/dist/components/Table/components/TableRow/TableRow.js +5 -5
- package/dist/components/Table/types.d.ts +0 -2
- package/dist/components/TagGroup/components/Tag/Tag.js +6 -6
- package/dist/components/Textarea/Textarea.d.ts +4 -3
- package/dist/components/Textarea/Textarea.js +13 -10
- package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts +1 -1
- package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js +10 -10
- package/dist/components/Textarea/types.d.ts +19 -12
- package/dist/components/Textarea/types.js +5 -0
- package/dist/components/TimePicker/TimePicker.d.ts +1 -1
- package/dist/components/TimePicker/TimePicker.js +34 -24
- package/dist/components/TimePicker/types.d.ts +19 -5
- package/dist/components/TimePicker/types.js +7 -0
- package/dist/components/Toggle/Toggle.d.ts +1 -1
- package/dist/components/Toggle/Toggle.js +3 -3
- package/dist/components/Toggle/types.d.ts +0 -3
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.js +9 -9
- package/dist/components/Tooltip/types.d.ts +0 -3
- package/dist/components/index.d.ts +2 -0
- package/dist/index.js +31 -11
- package/dist/style.css +103 -80
- package/package.json +5 -5
- package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts +0 -8
- package/dist/components/FieldComponents/FieldControl/FieldControl.js +0 -17
- package/dist/components/FieldComponents/FieldControl/FieldControl.module.css.js +0 -11
- package/dist/components/FieldComponents/FieldControl/index.d.ts +0 -1
- package/dist/components/FieldComponents/FieldLabel/FieldLabel.d.ts +0 -9
- package/dist/components/FieldComponents/FieldLabel/FieldLabel.module.css.js +0 -14
- package/dist/components/FieldComponents/FieldLabel/index.d.ts +0 -1
- package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.d.ts +0 -7
- package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.js +0 -21
- package/dist/components/RadioGroup/components/RadioGroupDescription/index.d.ts +0 -1
- package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.d.ts +0 -6
- package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.js +0 -14
- package/dist/components/RadioGroup/components/RadioGroupLabel/index.d.ts +0 -1
package/dist/index.js
CHANGED
|
@@ -8,6 +8,9 @@ import { BreakpointsContext, useBreakpoints, useMatchedBreakpoints } from "./com
|
|
|
8
8
|
import { FlexBox } from "./components/FlexBox/FlexBox.js";
|
|
9
9
|
import { Container } from "./components/Container/Container.js";
|
|
10
10
|
import { containerMarginsProp, containerPositionProp } from "./components/Container/types.js";
|
|
11
|
+
import { FormControl } from "./components/FormControl/FormControl.js";
|
|
12
|
+
import { formControlPropLabelAlign, formControlPropLabelPlacement } from "./components/FormControl/types.js";
|
|
13
|
+
import { FormControlLabel } from "./components/FormControlLabel/FormControlLabel.js";
|
|
11
14
|
import { Alert } from "./components/Alert/Alert.js";
|
|
12
15
|
import { alertPropStatus } from "./components/Alert/types.js";
|
|
13
16
|
import { Button } from "./components/Button/Button.js";
|
|
@@ -22,18 +25,16 @@ import { Link } from "./components/Link/Link.js";
|
|
|
22
25
|
import { Badge } from "./components/Badge/Badge.js";
|
|
23
26
|
import { badgePropSize, badgePropVariant } from "./components/Badge/types.js";
|
|
24
27
|
import { Input } from "./components/Input/Input.js";
|
|
25
|
-
import { inputPropVariant } from "./components/Input/types.js";
|
|
28
|
+
import { inputPropLabelAlign, inputPropLabelPlacement, inputPropVariant } from "./components/Input/types.js";
|
|
26
29
|
import { Textarea } from "./components/Textarea/Textarea.js";
|
|
27
|
-
import { textareaPropExpand, textareaPropVariant } from "./components/Textarea/types.js";
|
|
30
|
+
import { textareaPropExpand, textareaPropLabelAlign, textareaPropLabelPlacement, textareaPropVariant } from "./components/Textarea/types.js";
|
|
28
31
|
import { InputNumber } from "./components/InputNumber/InputNumber.js";
|
|
29
|
-
import { inputNumberPropVariant } from "./components/InputNumber/types.js";
|
|
32
|
+
import { inputNumberPropLabelAlign, inputNumberPropLabelPlacement, inputNumberPropVariant } from "./components/InputNumber/types.js";
|
|
30
33
|
import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
|
|
31
34
|
import { RadioGroupContext, useRadioGroupState } from "./components/RadioGroup/RadioContext.js";
|
|
32
35
|
import { Radio } from "./components/RadioGroup/components/Radio/Radio.js";
|
|
33
36
|
import { radioPropLabelPlacement, radioPropSize } from "./components/RadioGroup/components/Radio/types.js";
|
|
34
|
-
import {
|
|
35
|
-
import { RadioGroupDescription } from "./components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.js";
|
|
36
|
-
import { radioGroupPropOrientation, radioGroupPropSize } from "./components/RadioGroup/types.js";
|
|
37
|
+
import { radioGroupPropLabelAlign, radioGroupPropLabelPlacement, radioGroupPropOrientation, radioGroupPropSize } from "./components/RadioGroup/types.js";
|
|
37
38
|
import { Toggle } from "./components/Toggle/Toggle.js";
|
|
38
39
|
import { togglePropLabelPlacement, togglePropSize } from "./components/Toggle/types.js";
|
|
39
40
|
import { ProgressBar } from "./components/ProgressBar/ProgressBar.js";
|
|
@@ -62,7 +63,7 @@ import { List, ListInner } from "./components/List/List.js";
|
|
|
62
63
|
import { ListItemText } from "./components/List/components/ListItemText/ListItemText.js";
|
|
63
64
|
import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
|
|
64
65
|
import { Select } from "./components/Select/Select.js";
|
|
65
|
-
import { selectPropSelectedTagsOverflow } from "./components/Select/types.js";
|
|
66
|
+
import { selectPropLabelAlign, selectPropLabelPlacement, selectPropSelectedTagsOverflow } from "./components/Select/types.js";
|
|
66
67
|
import { Divider } from "./components/Divider/Divider.js";
|
|
67
68
|
import { dividerPropDisplay } from "./components/Divider/types.js";
|
|
68
69
|
import { Menu } from "./components/Menu/Menu.js";
|
|
@@ -75,11 +76,12 @@ import { Table } from "./components/Table/Table.js";
|
|
|
75
76
|
import { TableContainer } from "./components/Table/components/TableContainer/TableContainer.js";
|
|
76
77
|
import { Calendar } from "./components/Calendar/Calendar.js";
|
|
77
78
|
import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
|
|
78
|
-
import { dateInputPropVariant } from "./components/DateInput/types.js";
|
|
79
|
+
import { dateInputPropLabelAlign, dateInputPropLabelPlacement, dateInputPropVariant } from "./components/DateInput/types.js";
|
|
79
80
|
import { DatePicker, DatePickerRender } from "./components/DatePicker/DatePicker.js";
|
|
80
81
|
import { TimePicker, TimePickerRender } from "./components/TimePicker/TimePicker.js";
|
|
82
|
+
import { timePickerPropLabelAlign, timePickerPropLabelPlacement } from "./components/TimePicker/types.js";
|
|
81
83
|
import { SearchInput } from "./components/SearchInput/SearchInput.js";
|
|
82
|
-
import { searchInputPropVariant } from "./components/SearchInput/types.js";
|
|
84
|
+
import { searchInputPropLabelAlign, searchInputPropLabelPlacement, searchInputPropVariant } from "./components/SearchInput/types.js";
|
|
83
85
|
import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
|
|
84
86
|
import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
|
|
85
87
|
export {
|
|
@@ -100,6 +102,8 @@ export {
|
|
|
100
102
|
DatePickerRender,
|
|
101
103
|
Divider,
|
|
102
104
|
FlexBox,
|
|
105
|
+
FormControl,
|
|
106
|
+
FormControlLabel,
|
|
103
107
|
Grid,
|
|
104
108
|
GridItem,
|
|
105
109
|
IconButton,
|
|
@@ -127,8 +131,6 @@ export {
|
|
|
127
131
|
Radio,
|
|
128
132
|
RadioGroup,
|
|
129
133
|
RadioGroupContext,
|
|
130
|
-
RadioGroupDescription,
|
|
131
|
-
RadioGroupLabel,
|
|
132
134
|
RouterProvider,
|
|
133
135
|
SearchInput,
|
|
134
136
|
Select,
|
|
@@ -156,6 +158,8 @@ export {
|
|
|
156
158
|
checkboxPropSize,
|
|
157
159
|
containerMarginsProp,
|
|
158
160
|
containerPositionProp,
|
|
161
|
+
dateInputPropLabelAlign,
|
|
162
|
+
dateInputPropLabelPlacement,
|
|
159
163
|
dateInputPropVariant,
|
|
160
164
|
defaultBreakpoints,
|
|
161
165
|
dividerPropDisplay,
|
|
@@ -167,10 +171,16 @@ export {
|
|
|
167
171
|
flexPropJustifyContent,
|
|
168
172
|
flexPropOrder,
|
|
169
173
|
flexPropWrap,
|
|
174
|
+
formControlPropLabelAlign,
|
|
175
|
+
formControlPropLabelPlacement,
|
|
170
176
|
gridPropGap,
|
|
171
177
|
iconButtonPropSize,
|
|
172
178
|
iconButtonPropVariant,
|
|
179
|
+
inputNumberPropLabelAlign,
|
|
180
|
+
inputNumberPropLabelPlacement,
|
|
173
181
|
inputNumberPropVariant,
|
|
182
|
+
inputPropLabelAlign,
|
|
183
|
+
inputPropLabelPlacement,
|
|
174
184
|
inputPropVariant,
|
|
175
185
|
modalPropSize,
|
|
176
186
|
popoverPropPlacement,
|
|
@@ -179,11 +189,17 @@ export {
|
|
|
179
189
|
progressBarPropVariant,
|
|
180
190
|
progressSpinnerPropSize,
|
|
181
191
|
progressSpinnerPropVariant,
|
|
192
|
+
radioGroupPropLabelAlign,
|
|
193
|
+
radioGroupPropLabelPlacement,
|
|
182
194
|
radioGroupPropOrientation,
|
|
183
195
|
radioGroupPropSize,
|
|
184
196
|
radioPropLabelPlacement,
|
|
185
197
|
radioPropSize,
|
|
198
|
+
searchInputPropLabelAlign,
|
|
199
|
+
searchInputPropLabelPlacement,
|
|
186
200
|
searchInputPropVariant,
|
|
201
|
+
selectPropLabelAlign,
|
|
202
|
+
selectPropLabelPlacement,
|
|
187
203
|
selectPropSelectedTagsOverflow,
|
|
188
204
|
sidePanelPropPlacement,
|
|
189
205
|
sidePanelPropPosition,
|
|
@@ -192,7 +208,11 @@ export {
|
|
|
192
208
|
spacingGap,
|
|
193
209
|
tagGroupPropVariant,
|
|
194
210
|
textareaPropExpand,
|
|
211
|
+
textareaPropLabelAlign,
|
|
212
|
+
textareaPropLabelPlacement,
|
|
195
213
|
textareaPropVariant,
|
|
214
|
+
timePickerPropLabelAlign,
|
|
215
|
+
timePickerPropLabelPlacement,
|
|
196
216
|
togglePropLabelPlacement,
|
|
197
217
|
togglePropSize,
|
|
198
218
|
tooltipPropPlacement,
|
package/dist/style.css
CHANGED
|
@@ -238,6 +238,86 @@
|
|
|
238
238
|
margin-inline: var(--container-position);
|
|
239
239
|
padding: 0 var(--container-margins);
|
|
240
240
|
}
|
|
241
|
+
.kbq-formcontrol-dbb0e4 {
|
|
242
|
+
flex-direction: column;
|
|
243
|
+
justify-content: center;
|
|
244
|
+
align-items: flex-start;
|
|
245
|
+
display: inline-flex;
|
|
246
|
+
position: relative;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.kbq-formcontrol-fullWidth-b3e32c {
|
|
250
|
+
inline-size: 100%;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.kbq-formcontrol-top-17ba41 {
|
|
254
|
+
flex-direction: column;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.kbq-formcontrol-side-3e528f {
|
|
258
|
+
flex-direction: row;
|
|
259
|
+
}
|
|
260
|
+
.kbq-formcontrollabel-f90f77 {
|
|
261
|
+
font-size: var(--kbq-typography-text-normal-font-size);
|
|
262
|
+
font-weight: var(--kbq-typography-text-normal-font-weight);
|
|
263
|
+
line-height: var(--kbq-typography-text-normal-line-height);
|
|
264
|
+
font-family: var(--kbq-typography-text-normal-font-family);
|
|
265
|
+
font-style: var(--kbq-typography-text-normal-font-style);
|
|
266
|
+
text-transform: var(--kbq-typography-text-normal-text-transform);
|
|
267
|
+
font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
|
|
268
|
+
letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
|
|
269
|
+
text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height) - var(--kbq-typography-text-normal-font-size)) / 2);
|
|
270
|
+
color: var(--kbq-foreground-contrast);
|
|
271
|
+
vertical-align: top;
|
|
272
|
+
box-sizing: border-box;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.kbq-formcontrollabel-hidden-b6c00b {
|
|
276
|
+
clip: rect(0, 0, 0, 0);
|
|
277
|
+
clip-path: inset(50%);
|
|
278
|
+
white-space: nowrap;
|
|
279
|
+
border: 0;
|
|
280
|
+
block-size: 1px;
|
|
281
|
+
inline-size: 1px;
|
|
282
|
+
margin: -1px;
|
|
283
|
+
padding: 0;
|
|
284
|
+
position: absolute;
|
|
285
|
+
overflow: hidden;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.kbq-formcontrollabel-sup-08dbc0 {
|
|
289
|
+
color: var(--kbq-foreground-error);
|
|
290
|
+
vertical-align: baseline;
|
|
291
|
+
line-height: 0;
|
|
292
|
+
font-size: var(--kbq-typography-text-normal-font-size);
|
|
293
|
+
font-weight: var(--kbq-typography-text-normal-font-weight);
|
|
294
|
+
line-height: var(--kbq-typography-text-normal-line-height);
|
|
295
|
+
font-family: var(--kbq-typography-text-normal-font-family);
|
|
296
|
+
font-style: var(--kbq-typography-text-normal-font-style);
|
|
297
|
+
text-transform: var(--kbq-typography-text-normal-text-transform);
|
|
298
|
+
font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
|
|
299
|
+
letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
|
|
300
|
+
text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height) - var(--kbq-typography-text-normal-font-size)) / 2);
|
|
301
|
+
position: relative;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
[data-label-placement="top"] .kbq-formcontrollabel-f90f77 {
|
|
305
|
+
padding-block-end: var(--kbq-size-xs);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
[data-label-placement="side"] .kbq-formcontrollabel-f90f77 {
|
|
309
|
+
padding-block-start: var(--kbq-size-xs);
|
|
310
|
+
padding-inline-end: var(--kbq-size-l);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
[data-label-align="start"] .kbq-formcontrollabel-f90f77 {
|
|
314
|
+
text-align: start;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
[data-label-align="end"] .kbq-formcontrollabel-f90f77 {
|
|
318
|
+
text-align: end;
|
|
319
|
+
justify-content: flex-end;
|
|
320
|
+
}
|
|
241
321
|
.kbq-alert-bc5d04 {
|
|
242
322
|
--alert-padding: 0 var(--kbq-size-s) 0 var(--kbq-size-s);
|
|
243
323
|
--alert-content-padding: var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-m);
|
|
@@ -1916,64 +1996,30 @@
|
|
|
1916
1996
|
--badge-bg-color: ;
|
|
1917
1997
|
--badge-color: var(--kbq-foreground-contrast);
|
|
1918
1998
|
}
|
|
1919
|
-
.kbq-
|
|
1920
|
-
--field-
|
|
1999
|
+
.kbq-input-hasStartAddon-fac70d {
|
|
2000
|
+
--field-padding-inline-start: 36px;
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
.kbq-input-hasEndAddon-12fbf6 {
|
|
2004
|
+
--field-padding-inline-end: 36px;
|
|
2005
|
+
}
|
|
2006
|
+
.kbq-field-25e8f8 {
|
|
2007
|
+
--field-size-height: 32px;
|
|
1921
2008
|
--field-input-padding-inline-start: var(--kbq-size-m);
|
|
1922
2009
|
--field-input-padding-inline-end: var(--kbq-size-m);
|
|
1923
2010
|
--field-input-padding-block-start: var(--kbq-size-xs);
|
|
1924
2011
|
--field-input-padding-block-end: var(--kbq-size-xs);
|
|
1925
|
-
flex-direction: column;
|
|
1926
|
-
justify-content: center;
|
|
1927
|
-
align-items: flex-start;
|
|
1928
|
-
display: inline-flex;
|
|
1929
|
-
position: relative;
|
|
1930
|
-
}
|
|
1931
|
-
|
|
1932
|
-
.kbq-fieldcontrol-fullWidth-44b574 {
|
|
1933
|
-
inline-size: 100%;
|
|
1934
|
-
}
|
|
1935
|
-
.kbq-fieldlabel-141082 {
|
|
1936
2012
|
inline-size: 100%;
|
|
1937
|
-
font-size: var(--kbq-typography-text-normal-font-size);
|
|
1938
|
-
font-weight: var(--kbq-typography-text-normal-font-weight);
|
|
1939
|
-
line-height: var(--kbq-typography-text-normal-line-height);
|
|
1940
|
-
font-family: var(--kbq-typography-text-normal-font-family);
|
|
1941
|
-
font-style: var(--kbq-typography-text-normal-font-style);
|
|
1942
|
-
text-transform: var(--kbq-typography-text-normal-text-transform);
|
|
1943
|
-
font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
|
|
1944
|
-
letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
|
|
1945
|
-
text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height) - var(--kbq-typography-text-normal-font-size)) / 2);
|
|
1946
|
-
color: var(--kbq-foreground-contrast);
|
|
1947
|
-
margin-block-end: var(--kbq-size-xs);
|
|
1948
2013
|
}
|
|
1949
2014
|
|
|
1950
|
-
.kbq-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
white-space: nowrap;
|
|
1954
|
-
border: 0;
|
|
1955
|
-
block-size: 1px;
|
|
1956
|
-
inline-size: 1px;
|
|
1957
|
-
margin: -1px;
|
|
1958
|
-
padding: 0;
|
|
1959
|
-
position: absolute;
|
|
1960
|
-
overflow: hidden;
|
|
2015
|
+
.kbq-field-25e8f8 > :first-child + * {
|
|
2016
|
+
margin: 0;
|
|
2017
|
+
margin-block-start: var(--kbq-size-xs);
|
|
1961
2018
|
}
|
|
1962
2019
|
|
|
1963
|
-
.kbq-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
line-height: 0;
|
|
1967
|
-
font-size: var(--kbq-typography-text-normal-font-size);
|
|
1968
|
-
font-weight: var(--kbq-typography-text-normal-font-weight);
|
|
1969
|
-
line-height: var(--kbq-typography-text-normal-line-height);
|
|
1970
|
-
font-family: var(--kbq-typography-text-normal-font-family);
|
|
1971
|
-
font-style: var(--kbq-typography-text-normal-font-style);
|
|
1972
|
-
text-transform: var(--kbq-typography-text-normal-text-transform);
|
|
1973
|
-
font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
|
|
1974
|
-
letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
|
|
1975
|
-
text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height) - var(--kbq-typography-text-normal-font-size)) / 2);
|
|
1976
|
-
position: relative;
|
|
2020
|
+
.kbq-field-25e8f8 > :first-child + * + * {
|
|
2021
|
+
margin: 0;
|
|
2022
|
+
margin-block-start: var(--kbq-size-xxs);
|
|
1977
2023
|
}
|
|
1978
2024
|
.kbq-fieldcontentgroup-d85be3 {
|
|
1979
2025
|
--field-content-border-color: ;
|
|
@@ -2014,16 +2060,6 @@
|
|
|
2014
2060
|
inset: 0;
|
|
2015
2061
|
}
|
|
2016
2062
|
|
|
2017
|
-
.kbq-fieldcontentgroup-d85be3 + * {
|
|
2018
|
-
margin: 0;
|
|
2019
|
-
margin-block-start: var(--kbq-size-xs);
|
|
2020
|
-
}
|
|
2021
|
-
|
|
2022
|
-
.kbq-fieldcontentgroup-d85be3 + * + * {
|
|
2023
|
-
margin: 0;
|
|
2024
|
-
margin-block-start: var(--kbq-size-xxs);
|
|
2025
|
-
}
|
|
2026
|
-
|
|
2027
2063
|
.kbq-fieldcontentgroup-hasStartAddon-62fb80 {
|
|
2028
2064
|
--field-control-start-addon-inline-size: 36px;
|
|
2029
2065
|
}
|
|
@@ -2063,7 +2099,7 @@
|
|
|
2063
2099
|
--field-addon-color: var(--kbq-icon-contrast-fade);
|
|
2064
2100
|
z-index: 1;
|
|
2065
2101
|
color: var(--field-addon-color);
|
|
2066
|
-
block-size: var(--field-
|
|
2102
|
+
block-size: var(--field-size-height);
|
|
2067
2103
|
transition: color var(--kbq-transition-default);
|
|
2068
2104
|
justify-content: center;
|
|
2069
2105
|
align-items: center;
|
|
@@ -2122,11 +2158,11 @@
|
|
|
2122
2158
|
}
|
|
2123
2159
|
|
|
2124
2160
|
.kbq-fieldinput-77b90b:where(input) {
|
|
2125
|
-
block-size: var(--field-
|
|
2161
|
+
block-size: var(--field-size-height);
|
|
2126
2162
|
}
|
|
2127
2163
|
|
|
2128
2164
|
.kbq-fieldinput-77b90b:where(textarea) {
|
|
2129
|
-
min-block-size: var(--field-
|
|
2165
|
+
min-block-size: var(--field-size-height);
|
|
2130
2166
|
resize: none;
|
|
2131
2167
|
}
|
|
2132
2168
|
|
|
@@ -2219,6 +2255,9 @@
|
|
|
2219
2255
|
.kbq-inputnumbercountercontrols-decrement-fbd37a > svg {
|
|
2220
2256
|
margin-block-start: calc(-1 * var(--kbq-size-3xs));
|
|
2221
2257
|
}
|
|
2258
|
+
[data-label-placement="side"] .kbq-radiogroup-label-750809 {
|
|
2259
|
+
padding-block-start: 0;
|
|
2260
|
+
}
|
|
2222
2261
|
.kbq-radio-c3ed31 {
|
|
2223
2262
|
--radio-size: ;
|
|
2224
2263
|
--radio-opacity: 0;
|
|
@@ -3148,22 +3187,6 @@
|
|
|
3148
3187
|
[data-slot="select-value"] .kbq-listitemtext-caption-ae96af {
|
|
3149
3188
|
display: none;
|
|
3150
3189
|
}
|
|
3151
|
-
.kbq-select-6d31ad {
|
|
3152
|
-
--field-input-padding-inline-start: var(--kbq-size-m);
|
|
3153
|
-
--field-input-padding-inline-end: var(--kbq-size-m);
|
|
3154
|
-
--field-input-padding-block-start: var(--kbq-size-xs);
|
|
3155
|
-
--field-input-padding-block-end: var(--kbq-size-xs);
|
|
3156
|
-
flex-direction: column;
|
|
3157
|
-
justify-content: center;
|
|
3158
|
-
align-items: flex-start;
|
|
3159
|
-
display: inline-flex;
|
|
3160
|
-
position: relative;
|
|
3161
|
-
}
|
|
3162
|
-
|
|
3163
|
-
.kbq-select-fullWidth-1dfc13 {
|
|
3164
|
-
inline-size: 100%;
|
|
3165
|
-
}
|
|
3166
|
-
|
|
3167
3190
|
.kbq-select-addon-cbc524 {
|
|
3168
3191
|
pointer-events: none;
|
|
3169
3192
|
}
|
|
@@ -3222,7 +3245,7 @@
|
|
|
3222
3245
|
inline-size: 100%;
|
|
3223
3246
|
color: var(--field-input-color);
|
|
3224
3247
|
background: var(--field-input-bg-color);
|
|
3225
|
-
min-block-size: var(--field-
|
|
3248
|
+
min-block-size: var(--field-size-height);
|
|
3226
3249
|
padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
|
|
3227
3250
|
transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
|
|
3228
3251
|
font-size: var(--kbq-typography-text-normal-font-size);
|
|
@@ -4006,7 +4029,7 @@
|
|
|
4006
4029
|
cursor: pointer;
|
|
4007
4030
|
box-sizing: border-box;
|
|
4008
4031
|
inline-size: 100%;
|
|
4009
|
-
block-size: var(--field-
|
|
4032
|
+
block-size: var(--field-size-height);
|
|
4010
4033
|
border-radius: inherit;
|
|
4011
4034
|
color: var(--field-input-color);
|
|
4012
4035
|
background: var(--field-input-bg-color);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@koobiq/react-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"@koobiq/design-tokens": "^3.14.0",
|
|
29
29
|
"@types/react-transition-group": "^4.4.12",
|
|
30
30
|
"react-transition-group": "^4.4.5",
|
|
31
|
-
"@koobiq/logger": "0.
|
|
32
|
-
"@koobiq/react-core": "0.
|
|
33
|
-
"@koobiq/react-
|
|
34
|
-
"@koobiq/react-
|
|
31
|
+
"@koobiq/logger": "0.9.0",
|
|
32
|
+
"@koobiq/react-core": "0.9.0",
|
|
33
|
+
"@koobiq/react-icons": "0.9.0",
|
|
34
|
+
"@koobiq/react-primitives": "0.9.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"@koobiq/design-tokens": "^3.14.0",
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { ComponentPropsWithRef, ElementType } from 'react';
|
|
2
|
-
import { type DataAttributeProps } from '@koobiq/react-core';
|
|
3
|
-
export type FieldControlBaseProps = {
|
|
4
|
-
fullWidth?: boolean;
|
|
5
|
-
className?: string;
|
|
6
|
-
} & DataAttributeProps;
|
|
7
|
-
export declare const FieldControl: import("@koobiq/react-core").PolyForwardComponent<"div", FieldControlBaseProps, ElementType>;
|
|
8
|
-
export type FieldControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldControl<As>>;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
|
|
3
|
-
import s from "./FieldControl.module.css.js";
|
|
4
|
-
const FieldControl = polymorphicForwardRef(
|
|
5
|
-
({ fullWidth = false, className, as: Tag = "div", ...other }, ref) => /* @__PURE__ */ jsx(
|
|
6
|
-
Tag,
|
|
7
|
-
{
|
|
8
|
-
className: clsx(s.base, fullWidth && s.fullWidth, className),
|
|
9
|
-
...other,
|
|
10
|
-
ref
|
|
11
|
-
}
|
|
12
|
-
)
|
|
13
|
-
);
|
|
14
|
-
FieldControl.displayName = "FieldControl";
|
|
15
|
-
export {
|
|
16
|
-
FieldControl
|
|
17
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './FieldControl';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
|
|
3
|
-
export type FieldLabelProps = ExtendableComponentPropsWithRef<{
|
|
4
|
-
isHidden?: boolean;
|
|
5
|
-
className?: string;
|
|
6
|
-
isRequired?: boolean;
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
}, 'label'>;
|
|
9
|
-
export declare const FieldLabel: import("react").ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './FieldLabel';
|
package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type TypographyProps } from '../../../Typography';
|
|
2
|
-
export type RadioGroupDescriptionProps = TypographyProps;
|
|
3
|
-
export declare const RadioGroupDescription: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
4
|
-
ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
|
|
5
|
-
}, "as" | keyof import("../../..").TypographyBaseProps> & import("../../..").TypographyBaseProps & {
|
|
6
|
-
as?: "p" | undefined;
|
|
7
|
-
}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
|
package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from "react";
|
|
3
|
-
import { isNotNil } from "@koobiq/react-core";
|
|
4
|
-
import { Typography } from "../../../Typography/Typography.js";
|
|
5
|
-
const RadioGroupDescription = forwardRef(
|
|
6
|
-
({ children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
|
|
7
|
-
Typography,
|
|
8
|
-
{
|
|
9
|
-
variant: "text-compact",
|
|
10
|
-
slot: "description",
|
|
11
|
-
color: "contrast-secondary",
|
|
12
|
-
...other,
|
|
13
|
-
ref,
|
|
14
|
-
children
|
|
15
|
-
}
|
|
16
|
-
) : null
|
|
17
|
-
);
|
|
18
|
-
RadioGroupDescription.displayName = "RadioGroupDescription";
|
|
19
|
-
export {
|
|
20
|
-
RadioGroupDescription
|
|
21
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './RadioGroupDescription';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
import { type TypographyProps } from '../../../Typography';
|
|
3
|
-
export type RadioGroupLabelProps = TypographyProps<'span'> & {
|
|
4
|
-
children?: ReactNode;
|
|
5
|
-
};
|
|
6
|
-
export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<Omit<RadioGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from "react";
|
|
3
|
-
import { isNotNil } from "@koobiq/react-core";
|
|
4
|
-
import { Label } from "@koobiq/react-primitives";
|
|
5
|
-
import { Typography } from "../../../Typography/Typography.js";
|
|
6
|
-
const RadioGroupLabelTypography = forwardRef((props, ref) => /* @__PURE__ */ jsx(Typography, { as: "span", ...props, ref }));
|
|
7
|
-
RadioGroupLabelTypography.displayName = "RadioGroupLabelTypography";
|
|
8
|
-
const RadioGroupLabel = forwardRef(
|
|
9
|
-
({ children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(Label, { as: RadioGroupLabelTypography, ...other, ref, children }) : null
|
|
10
|
-
);
|
|
11
|
-
RadioGroupLabel.displayName = "RadioGroupLabel";
|
|
12
|
-
export {
|
|
13
|
-
RadioGroupLabel
|
|
14
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './RadioGroupLabel';
|