@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.
Files changed (122) hide show
  1. package/dist/components/Alert/Alert.js +5 -3
  2. package/dist/components/Alert/types.d.ts +0 -3
  3. package/dist/components/Backdrop/Backdrop.js +1 -1
  4. package/dist/components/Backdrop/types.d.ts +4 -1
  5. package/dist/components/Button/Button.js +7 -7
  6. package/dist/components/Button/types.d.ts +0 -4
  7. package/dist/components/ButtonToggleGroup/ButtonToggleGroup.js +6 -6
  8. package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js +6 -6
  9. package/dist/components/ButtonToggleGroup/components/ButtonToggle/types.d.ts +0 -1
  10. package/dist/components/ButtonToggleGroup/types.d.ts +0 -3
  11. package/dist/components/Checkbox/Checkbox.d.ts +1 -1
  12. package/dist/components/Checkbox/Checkbox.js +6 -6
  13. package/dist/components/Checkbox/types.d.ts +0 -5
  14. package/dist/components/Container/Container.js +2 -2
  15. package/dist/components/Container/types.d.ts +0 -2
  16. package/dist/components/DateInput/DateInput.js +27 -17
  17. package/dist/components/DateInput/types.d.ts +20 -6
  18. package/dist/components/DateInput/types.js +5 -0
  19. package/dist/components/DatePicker/DatePicker.js +5 -1
  20. package/dist/components/DatePicker/types.d.ts +14 -3
  21. package/dist/components/Dialog/Dialog.js +1 -1
  22. package/dist/components/Dialog/components/DialogCloseButton.d.ts +2 -2
  23. package/dist/components/Dialog/types.d.ts +0 -1
  24. package/dist/components/Divider/Divider.js +5 -4
  25. package/dist/components/Divider/types.d.ts +0 -2
  26. package/dist/components/FieldComponents/Field/Field.d.ts +4 -0
  27. package/dist/components/FieldComponents/Field/Field.js +10 -0
  28. package/dist/components/FieldComponents/Field/Field.module.css.js +8 -0
  29. package/dist/components/FieldComponents/Field/index.d.ts +2 -0
  30. package/dist/components/FieldComponents/Field/types.d.ts +4 -0
  31. package/dist/components/FieldComponents/FieldAddon/FieldAddon.js +4 -4
  32. package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js +2 -2
  33. package/dist/components/FieldComponents/FieldError/FieldError.d.ts +4 -2
  34. package/dist/components/FieldComponents/FieldError/FieldError.js +6 -8
  35. package/dist/components/FieldComponents/FieldInput/FieldInput.js +3 -3
  36. package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.js +2 -2
  37. package/dist/components/FieldComponents/FieldSelect/FieldSelect.js +3 -3
  38. package/dist/components/FieldComponents/index.d.ts +1 -2
  39. package/dist/components/FormControl/FormControl.d.ts +4 -0
  40. package/dist/components/FormControl/FormControl.js +33 -0
  41. package/dist/components/FormControl/FormControl.module.css.js +17 -0
  42. package/dist/components/FormControl/index.d.ts +2 -0
  43. package/dist/components/FormControl/types.d.ts +19 -0
  44. package/dist/components/FormControl/types.js +6 -0
  45. package/dist/components/FormControlLabel/FormControlLabel.d.ts +4 -2
  46. package/dist/components/{FieldComponents/FieldLabel/FieldLabel.js → FormControlLabel/FormControlLabel.js} +7 -7
  47. package/dist/components/FormControlLabel/FormControlLabel.module.css.js +14 -0
  48. package/dist/components/FormControlLabel/types.d.ts +6 -31
  49. package/dist/components/IconButton/IconButton.js +4 -4
  50. package/dist/components/IconButton/types.d.ts +0 -3
  51. package/dist/components/Input/Input.d.ts +8 -5
  52. package/dist/components/Input/Input.js +25 -15
  53. package/dist/components/Input/Input.module.css.js +4 -0
  54. package/dist/components/Input/types.d.ts +20 -13
  55. package/dist/components/Input/types.js +5 -0
  56. package/dist/components/InputNumber/InputNumber.d.ts +8 -5
  57. package/dist/components/InputNumber/InputNumber.js +21 -15
  58. package/dist/components/InputNumber/types.d.ts +19 -12
  59. package/dist/components/InputNumber/types.js +5 -0
  60. package/dist/components/Link/Link.js +3 -3
  61. package/dist/components/Link/types.d.ts +0 -5
  62. package/dist/components/List/components/ListOption/ListOption.js +5 -5
  63. package/dist/components/List/components/ListSection/ListSection.js +1 -1
  64. package/dist/components/Modal/Modal.js +1 -1
  65. package/dist/components/Modal/types.d.ts +1 -5
  66. package/dist/components/Popover/PopoverInner.js +2 -2
  67. package/dist/components/Popover/types.d.ts +0 -4
  68. package/dist/components/RadioGroup/RadioGroup.js +73 -23
  69. package/dist/components/RadioGroup/RadioGroup.module.css.js +8 -0
  70. package/dist/components/RadioGroup/components/Radio/Radio.d.ts +1 -1
  71. package/dist/components/RadioGroup/components/Radio/types.d.ts +0 -1
  72. package/dist/components/RadioGroup/components/index.d.ts +0 -2
  73. package/dist/components/RadioGroup/types.d.ts +38 -10
  74. package/dist/components/RadioGroup/types.js +5 -0
  75. package/dist/components/SearchInput/SearchInput.d.ts +8 -5
  76. package/dist/components/SearchInput/SearchInput.js +26 -19
  77. package/dist/components/SearchInput/types.d.ts +20 -8
  78. package/dist/components/SearchInput/types.js +5 -0
  79. package/dist/components/Select/Select.js +30 -26
  80. package/dist/components/Select/Select.module.css.js +0 -6
  81. package/dist/components/Select/components/SelectOption/SelectOption.js +5 -5
  82. package/dist/components/Select/types.d.ts +22 -8
  83. package/dist/components/Select/types.js +5 -0
  84. package/dist/components/SidePanel/SidePanel.js +1 -1
  85. package/dist/components/SidePanel/types.d.ts +0 -5
  86. package/dist/components/Table/Table.js +4 -4
  87. package/dist/components/Table/components/TableRow/TableRow.js +5 -5
  88. package/dist/components/Table/types.d.ts +0 -2
  89. package/dist/components/TagGroup/components/Tag/Tag.js +6 -6
  90. package/dist/components/Textarea/Textarea.d.ts +4 -3
  91. package/dist/components/Textarea/Textarea.js +13 -10
  92. package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts +1 -1
  93. package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js +10 -10
  94. package/dist/components/Textarea/types.d.ts +19 -12
  95. package/dist/components/Textarea/types.js +5 -0
  96. package/dist/components/TimePicker/TimePicker.d.ts +1 -1
  97. package/dist/components/TimePicker/TimePicker.js +34 -24
  98. package/dist/components/TimePicker/types.d.ts +19 -5
  99. package/dist/components/TimePicker/types.js +7 -0
  100. package/dist/components/Toggle/Toggle.d.ts +1 -1
  101. package/dist/components/Toggle/Toggle.js +3 -3
  102. package/dist/components/Toggle/types.d.ts +0 -3
  103. package/dist/components/Tooltip/Tooltip.d.ts +1 -1
  104. package/dist/components/Tooltip/Tooltip.js +9 -9
  105. package/dist/components/Tooltip/types.d.ts +0 -3
  106. package/dist/components/index.d.ts +2 -0
  107. package/dist/index.js +31 -11
  108. package/dist/style.css +103 -80
  109. package/package.json +5 -5
  110. package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts +0 -8
  111. package/dist/components/FieldComponents/FieldControl/FieldControl.js +0 -17
  112. package/dist/components/FieldComponents/FieldControl/FieldControl.module.css.js +0 -11
  113. package/dist/components/FieldComponents/FieldControl/index.d.ts +0 -1
  114. package/dist/components/FieldComponents/FieldLabel/FieldLabel.d.ts +0 -9
  115. package/dist/components/FieldComponents/FieldLabel/FieldLabel.module.css.js +0 -14
  116. package/dist/components/FieldComponents/FieldLabel/index.d.ts +0 -1
  117. package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.d.ts +0 -7
  118. package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.js +0 -21
  119. package/dist/components/RadioGroup/components/RadioGroupDescription/index.d.ts +0 -1
  120. package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.d.ts +0 -6
  121. package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.js +0 -14
  122. 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 { RadioGroupLabel } from "./components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.js";
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-fieldcontrol-ef127a {
1920
- --field-control-size-height: 32px;
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-fieldlabel-hidden-9f53e4 {
1951
- clip: rect(0, 0, 0, 0);
1952
- clip-path: inset(50%);
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-fieldlabel-sup-23c824 {
1964
- color: var(--kbq-foreground-error);
1965
- vertical-align: baseline;
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-control-size-height);
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-control-size-height);
2161
+ block-size: var(--field-size-height);
2126
2162
  }
2127
2163
 
2128
2164
  .kbq-fieldinput-77b90b:where(textarea) {
2129
- min-block-size: var(--field-control-size-height);
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-control-size-height);
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-control-size-height);
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.7.1",
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.7.1",
32
- "@koobiq/react-core": "0.7.1",
33
- "@koobiq/react-primitives": "0.7.1",
34
- "@koobiq/react-icons": "0.7.1"
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,11 +0,0 @@
1
- const base = "kbq-fieldcontrol-ef127a";
2
- const fullWidth = "kbq-fieldcontrol-fullWidth-44b574";
3
- const s = {
4
- base,
5
- fullWidth
6
- };
7
- export {
8
- base,
9
- s as default,
10
- fullWidth
11
- };
@@ -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,14 +0,0 @@
1
- const base = "kbq-fieldlabel-141082";
2
- const hidden = "kbq-fieldlabel-hidden-9f53e4";
3
- const sup = "kbq-fieldlabel-sup-23c824";
4
- const s = {
5
- base,
6
- hidden,
7
- sup
8
- };
9
- export {
10
- base,
11
- s as default,
12
- hidden,
13
- sup
14
- };
@@ -1 +0,0 @@
1
- export * from './FieldLabel';
@@ -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>>;
@@ -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';