@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
@@ -1,6 +1,8 @@
1
1
  import { NumberField } from '@koobiq/react-primitives';
2
- import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps } from '../FieldComponents';
3
- export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
2
+ import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
3
+ import { type FormControlProps } from '../FormControl';
4
+ import { type FormControlLabelProps } from '../FormControlLabel';
5
+ export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
4
6
  disabled?: boolean;
5
7
  error?: boolean;
6
8
  required?: boolean;
@@ -8,18 +10,19 @@ export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit
8
10
  hiddenLabel?: boolean;
9
11
  }> & {
10
12
  className?: string;
11
- errorMessage?: import("react").ReactNode;
12
13
  startAddon?: import("react").ReactNode;
13
14
  endAddon?: import("react").ReactNode;
14
15
  variant?: import("./types").InputNumberPropVariant;
15
16
  fullWidth?: boolean;
16
17
  isLabelHidden?: boolean;
18
+ labelPlacement?: import("./types").InputNumberPropLabelPlacement;
19
+ labelAlign?: import("./types").InputNumberPropLabelAlign;
17
20
  caption?: import("react").ReactNode;
18
21
  style?: import("react").CSSProperties;
19
22
  'data-testid'?: string | number;
20
23
  slotProps?: {
21
- root?: FieldControlProps<typeof NumberField>;
22
- label?: FieldLabelProps;
24
+ root?: FormControlProps<typeof NumberField>;
25
+ label?: FormControlLabelProps;
23
26
  input?: FieldInputProps;
24
27
  caption?: FieldCaptionProps;
25
28
  group?: FieldContentGroupProps;
@@ -5,8 +5,9 @@ import { deprecate } from "@koobiq/logger";
5
5
  import { useDOMRef, mergeProps } from "@koobiq/react-core";
6
6
  import { NumberField } from "@koobiq/react-primitives";
7
7
  import { InputNumberCounterControls } from "./components/InputNumberCounterControls.js";
8
- import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
9
- import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
8
+ import { FormControl } from "../FormControl/FormControl.js";
9
+ import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
10
+ import { Field } from "../FieldComponents/Field/Field.js";
10
11
  import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
11
12
  import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
12
13
  import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
@@ -15,7 +16,7 @@ const InputNumber = forwardRef(
15
16
  (props, ref) => {
16
17
  const {
17
18
  variant = "filled",
18
- fullWidth = false,
19
+ fullWidth,
19
20
  hiddenLabel,
20
21
  isLabelHidden: isLabelHiddenProp,
21
22
  disabled,
@@ -27,6 +28,8 @@ const InputNumber = forwardRef(
27
28
  readonly,
28
29
  isReadOnly: isReadOnlyProp,
29
30
  label,
31
+ labelAlign,
32
+ labelPlacement,
30
33
  startAddon,
31
34
  endAddon,
32
35
  errorMessage,
@@ -35,11 +38,11 @@ const InputNumber = forwardRef(
35
38
  ...other
36
39
  } = props;
37
40
  const inputRef = useDOMRef(ref);
38
- const isDisabled = isDisabledProp ?? disabled ?? false;
39
- const isRequired = isRequiredProp ?? required ?? false;
40
- const isReadOnly = isReadOnlyProp ?? readonly ?? false;
41
- const isInvalid = isInvalidProp ?? error ?? false;
42
- const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
41
+ const isDisabled = isDisabledProp ?? disabled;
42
+ const isRequired = isRequiredProp ?? required;
43
+ const isReadOnly = isReadOnlyProp ?? readonly;
44
+ const isInvalid = isInvalidProp ?? error;
45
+ const isLabelHidden = isLabelHiddenProp ?? hiddenLabel;
43
46
  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
44
47
  deprecate(
45
48
  'InputNumber: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
@@ -68,6 +71,8 @@ const InputNumber = forwardRef(
68
71
  const rootProps = mergeProps(
69
72
  {
70
73
  label,
74
+ labelAlign,
75
+ labelPlacement,
71
76
  fullWidth,
72
77
  isDisabled,
73
78
  isRequired,
@@ -75,12 +80,11 @@ const InputNumber = forwardRef(
75
80
  isInvalid,
76
81
  errorMessage,
77
82
  "data-variant": variant,
78
- "data-fullwidth": fullWidth,
79
83
  ...other
80
84
  },
81
85
  slotProps?.root
82
86
  );
83
- return /* @__PURE__ */ jsx(FieldControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
87
+ return /* @__PURE__ */ jsx(FormControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
84
88
  const labelProps = mergeProps(
85
89
  { isHidden: isLabelHidden, children: label, isRequired: isRequired2 },
86
90
  slotProps?.label
@@ -95,7 +99,7 @@ const InputNumber = forwardRef(
95
99
  slotProps?.input
96
100
  );
97
101
  const captionProps = mergeProps({ children: caption }, slotProps?.caption);
98
- const errorProps = mergeProps({ isInvalid: isInvalid2, children: errorMessage }, slotProps?.errorMessage);
102
+ const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage);
99
103
  const groupProps = mergeProps(
100
104
  {
101
105
  endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -110,10 +114,12 @@ const InputNumber = forwardRef(
110
114
  slotProps?.group
111
115
  );
112
116
  return /* @__PURE__ */ jsxs(Fragment, { children: [
113
- /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
114
- /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
115
- /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
116
- /* @__PURE__ */ jsx(FieldError, { ...errorProps })
117
+ /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
118
+ /* @__PURE__ */ jsxs(Field, { children: [
119
+ /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
120
+ /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
121
+ /* @__PURE__ */ jsx(FieldError, { ...errorProps })
122
+ ] })
117
123
  ] });
118
124
  } });
119
125
  }
@@ -1,41 +1,42 @@
1
1
  import type { ComponentRef, CSSProperties, ReactNode } from 'react';
2
2
  import type { ExtendableProps } from '@koobiq/react-core';
3
3
  import type { NumberField, NumberFieldProps } from '@koobiq/react-primitives';
4
- import { type FieldCaptionProps, type FieldControlProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps, type FieldLabelProps, type FieldContentGroupPropVariant } from '../FieldComponents';
4
+ import { type FieldCaptionProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps, type FieldContentGroupPropVariant } from '../FieldComponents';
5
+ import { type FormControlProps, type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
6
+ import type { FormControlLabelProps } from '../FormControlLabel';
5
7
  export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
6
8
  export type InputNumberPropVariant = FieldContentGroupPropVariant;
9
+ export declare const inputNumberPropLabelPlacement: readonly ["top", "side"];
10
+ export type InputNumberPropLabelPlacement = FormControlPropLabelPlacement;
11
+ export declare const inputNumberPropLabelAlign: readonly ["start", "end"];
12
+ export type InputNumberPropLabelAlign = FormControlPropLabelAlign;
7
13
  type InputNumberDeprecatedProps = {
8
14
  /**
9
15
  * If `true`, the component is disabled.
10
- * @default false
11
16
  * @deprecated
12
17
  * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
13
18
  */
14
19
  disabled?: boolean;
15
20
  /**
16
21
  * If `true`, the input will indicate an error.
17
- * @default false
18
22
  * @deprecated
19
23
  * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
20
24
  */
21
25
  error?: boolean;
22
26
  /**
23
27
  * If `true`, the label is displayed as required and the input element is required.
24
- * @default false
25
28
  * @deprecated
26
29
  * The "required" prop is deprecated. Use "isRequired" prop to replace it.
27
30
  */
28
31
  required?: boolean;
29
32
  /**
30
33
  * If `true`, the input can be selected but not changed by the user.
31
- * @default false
32
34
  * @deprecated
33
35
  * The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.
34
36
  */
35
37
  readonly?: boolean;
36
38
  /**
37
39
  * If `true`, the label is hidden. Be sure to add aria-label to the input element.
38
- * @default false
39
40
  * @deprecated
40
41
  * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
41
42
  */
@@ -44,8 +45,6 @@ type InputNumberDeprecatedProps = {
44
45
  export type InputNumberProps = ExtendableProps<{
45
46
  /** Additional CSS-classes. */
46
47
  className?: string;
47
- /** An error message for the field. */
48
- errorMessage?: ReactNode;
49
48
  /** Addon placed before the children. */
50
49
  startAddon?: ReactNode;
51
50
  /** Addon placed after the children. */
@@ -57,14 +56,22 @@ export type InputNumberProps = ExtendableProps<{
57
56
  variant?: InputNumberPropVariant;
58
57
  /**
59
58
  * If true, the input will take up the full width of its container.
60
- * @default false
61
59
  */
62
60
  fullWidth?: boolean;
63
61
  /**
64
62
  * If `true`, the label is hidden. Be sure to add aria-label to the input element.
65
- * @default false
66
63
  */
67
64
  isLabelHidden?: boolean;
65
+ /**
66
+ * The label's overall position relative to the element it is labeling.
67
+ * @default 'top'
68
+ */
69
+ labelPlacement?: InputNumberPropLabelPlacement;
70
+ /**
71
+ * The label's horizontal alignment relative to the element it is labeling.
72
+ * @default 'start'
73
+ */
74
+ labelAlign?: InputNumberPropLabelAlign;
68
75
  /** The helper text content. */
69
76
  caption?: ReactNode;
70
77
  /** Inline styles. */
@@ -73,8 +80,8 @@ export type InputNumberProps = ExtendableProps<{
73
80
  'data-testid'?: string | number;
74
81
  /** The props used for each slot inside. */
75
82
  slotProps?: {
76
- root?: FieldControlProps<typeof NumberField>;
77
- label?: FieldLabelProps;
83
+ root?: FormControlProps<typeof NumberField>;
84
+ label?: FormControlLabelProps;
78
85
  input?: FieldInputProps;
79
86
  caption?: FieldCaptionProps;
80
87
  group?: FieldContentGroupProps;
@@ -1,5 +1,10 @@
1
1
  import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
2
+ import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
2
3
  const inputNumberPropVariant = fieldContentGroupPropVariant;
4
+ const inputNumberPropLabelPlacement = formControlPropLabelPlacement;
5
+ const inputNumberPropLabelAlign = formControlPropLabelAlign;
3
6
  export {
7
+ inputNumberPropLabelAlign,
8
+ inputNumberPropLabelPlacement,
4
9
  inputNumberPropVariant
5
10
  };
@@ -20,9 +20,9 @@ const Link = polymorphicForwardRef((props, ref) => {
20
20
  className,
21
21
  ...other
22
22
  } = props;
23
- const allowVisited = allowVisitedProp ?? visitable ?? false;
24
- const isDisabled = isDisabledProp ?? disabled ?? false;
25
- const isPseudo = isPseudoProp ?? pseudo ?? false;
23
+ const allowVisited = allowVisitedProp ?? visitable;
24
+ const isDisabled = isDisabledProp ?? disabled;
25
+ const isPseudo = isPseudoProp ?? pseudo;
26
26
  const hasIcon = Boolean(startIcon || endIcon);
27
27
  if (process.env.NODE_ENV !== "production" && "visitable" in props) {
28
28
  deprecate(
@@ -6,21 +6,18 @@ export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 't
6
6
  type LinkDeprecatedProps = {
7
7
  /**
8
8
  * If `true`, the component is disabled.
9
- * @default false
10
9
  * @deprecated
11
10
  * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
12
11
  */
13
12
  disabled?: boolean;
14
13
  /**
15
14
  * If `true`, displays :visited CSS-state.
16
- * @default false
17
15
  * @deprecated
18
16
  * The "visitable" prop is deprecated. Use "isVisitable" prop to replace it.
19
17
  */
20
18
  visitable?: boolean;
21
19
  /**
22
20
  * If `true`, displays the link as a pseudo-link.
23
- * @default false
24
21
  * @deprecated
25
22
  * The "pseudo" prop is deprecated. Use "isPseudo" prop to replace it.
26
23
  */
@@ -37,12 +34,10 @@ export type LinkBaseProps = ExtendableProps<{
37
34
  endIcon?: ReactNode;
38
35
  /**
39
36
  * If `true`, displays :visited CSS-state.
40
- * @default false
41
37
  */
42
38
  allowVisited?: boolean;
43
39
  /**
44
40
  * If `true`, displays the link as a pseudo-link.
45
- * @default false
46
41
  */
47
42
  isPseudo?: boolean;
48
43
  /** Additional CSS-classes. */
@@ -24,11 +24,11 @@ function ListOption({ item, state }) {
24
24
  className: clsx(listItem, textVariant["text-normal"], className),
25
25
  style,
26
26
  ref,
27
- "data-hovered": isHovered,
28
- "data-pressed": isPressed,
29
- "data-disabled": isDisabled,
30
- "data-selected": isSelected,
31
- "data-focus-visible": isFocusVisible,
27
+ "data-hovered": isHovered || void 0,
28
+ "data-pressed": isPressed || void 0,
29
+ "data-disabled": isDisabled || void 0,
30
+ "data-selected": isSelected || void 0,
31
+ "data-focus-visible": isFocusVisible || void 0,
32
32
  children: item.rendered
33
33
  }
34
34
  );
@@ -2,8 +2,8 @@
2
2
  import { jsx, Fragment, jsxs } from "react/jsx-runtime";
3
3
  import { useListBoxSection } from "@koobiq/react-primitives";
4
4
  import s from "./ListSection.module.css.js";
5
- import { ListOption } from "../ListOption/ListOption.js";
6
5
  import { Typography } from "../../../Typography/Typography.js";
6
+ import { ListOption } from "../ListOption/ListOption.js";
7
7
  function ListSection({ section, state }) {
8
8
  const { itemProps, headingProps, groupProps } = useListBoxSection({
9
9
  heading: section.rendered,
@@ -11,7 +11,7 @@ import { Dialog } from "../Dialog/Dialog.js";
11
11
  const ModalComponent = forwardRef((props, ref) => {
12
12
  const {
13
13
  size = "medium",
14
- hideCloseButton = false,
14
+ hideCloseButton,
15
15
  control,
16
16
  children,
17
17
  slotProps,
@@ -32,7 +32,7 @@ export type ModalProps = {
32
32
  control?: ModalPropControl;
33
33
  /**
34
34
  * If `true`, the close button isn't shown.
35
- * @default false
35
+ * @default
36
36
  */
37
37
  hideCloseButton?: boolean;
38
38
  /** Handler that is called when the modal's open state changes. */
@@ -44,17 +44,14 @@ export type ModalProps = {
44
44
  portalContainer?: Element;
45
45
  /**
46
46
  * If `true`, the modal window won't close when clicked outside of it.
47
- * @default false
48
47
  */
49
48
  disableExitOnClickOutside?: boolean;
50
49
  /**
51
50
  * If `true`, the modal window won't close when the ESC key is pressed.
52
- * @default false
53
51
  */
54
52
  disableExitOnEscapeKeyDown?: boolean;
55
53
  /**
56
54
  * If `true`, the underlay (backdrop) under the modal window isn't shown.
57
- * @default false
58
55
  */
59
56
  hideBackdrop?: boolean;
60
57
  /** Additional CSS-classes. */
@@ -63,7 +60,6 @@ export type ModalProps = {
63
60
  'data-testid'?: string | number;
64
61
  /**
65
62
  * If `true`, the focus trap in modal window is disabled.
66
- * @default false
67
63
  */
68
64
  disableFocusManagement?: boolean;
69
65
  /**
@@ -11,12 +11,12 @@ const PopoverInner = (props) => {
11
11
  offset = 0,
12
12
  size = "medium",
13
13
  crossOffset = 0,
14
- hideArrow = false,
15
14
  containerPadding = 12,
16
15
  arrowBoundaryOffset = 20,
17
16
  placement: placementProp = "top",
18
17
  maxBlockSize = 480,
19
18
  type = "dialog",
19
+ hideArrow,
20
20
  state,
21
21
  control,
22
22
  children,
@@ -117,7 +117,7 @@ const PopoverInner = (props) => {
117
117
  {
118
118
  ref: domRef,
119
119
  "data-size": size,
120
- "data-arrow": showArrow,
120
+ "data-arrow": showArrow || void 0,
121
121
  "data-placement": placement,
122
122
  "data-transition": transition,
123
123
  className: clsx(s.base, s[size], className),
@@ -38,7 +38,6 @@ export type PopoverProps = {
38
38
  size?: PopoverPropSize;
39
39
  /**
40
40
  * If `true`, the close button isn't shown.
41
- * @default false
42
41
  */
43
42
  hideCloseButton?: boolean;
44
43
  /** Handler that is called when the modal's open state changes. */
@@ -50,7 +49,6 @@ export type PopoverProps = {
50
49
  portalContainer?: Element;
51
50
  /**
52
51
  * If `true`, the modal window won't close when the ESC key is pressed.
53
- * @default false
54
52
  */
55
53
  disableExitOnEscapeKeyDown?: boolean;
56
54
  /** Additional CSS-classes. */
@@ -61,7 +59,6 @@ export type PopoverProps = {
61
59
  'data-testid'?: string | number;
62
60
  /**
63
61
  * If `true`, the focus trap in modal window is disabled.
64
- * @default false
65
62
  */
66
63
  disableFocusManagement?: boolean;
67
64
  /**
@@ -73,7 +70,6 @@ export type PopoverProps = {
73
70
  anchorRef?: RefObject<HTMLElement | null>;
74
71
  /**
75
72
  * If `true`, the arrow isn't shown.
76
- * @default false
77
73
  */
78
74
  hideArrow?: boolean;
79
75
  /**
@@ -1,35 +1,53 @@
1
1
  "use client";
2
- import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { forwardRef } from "react";
4
4
  import { deprecate } from "@koobiq/logger";
5
- import { mergeProps, clsx } from "@koobiq/react-core";
5
+ import { mergeProps } from "@koobiq/react-core";
6
6
  import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
7
- import { RadioGroupLabel } from "./components/RadioGroupLabel/RadioGroupLabel.js";
7
+ import s from "./RadioGroup.module.css.js";
8
8
  import { RadioGroupContext } from "./RadioContext.js";
9
- import { RadioGroupDescription } from "./components/RadioGroupDescription/RadioGroupDescription.js";
10
9
  import { flex } from "../layout/flex/flex.js";
10
+ import { FormControl } from "../FormControl/FormControl.js";
11
+ import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
12
+ import { Field } from "../FieldComponents/Field/Field.js";
13
+ import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
14
+ import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
11
15
  const RadioGroup = forwardRef(
12
16
  (props, ref) => {
13
17
  const {
14
- size,
18
+ size = "normal",
15
19
  label,
16
20
  children,
17
21
  slotProps,
22
+ style,
23
+ className,
18
24
  description,
25
+ caption: captionProp,
19
26
  orientation,
20
27
  isInvalid: isInvalidProp,
21
28
  isDisabled: isDisabledProp,
22
29
  isRequired: isRequiredProp,
23
30
  isReadOnly: isReadOnlyProp,
31
+ "data-testid": testId,
32
+ errorMessage,
33
+ labelAlign,
34
+ labelPlacement,
35
+ isLabelHidden,
24
36
  disabled,
25
37
  error,
26
38
  readonly,
27
39
  required
28
40
  } = props;
29
- const isDisabled = isDisabledProp ?? disabled ?? false;
30
- const isInvalid = isInvalidProp ?? error ?? false;
31
- const isReadOnly = isReadOnlyProp ?? readonly ?? false;
32
- const isRequired = isRequiredProp ?? required ?? false;
41
+ const caption = captionProp ?? description;
42
+ const isDisabled = isDisabledProp ?? disabled;
43
+ const isInvalid = isInvalidProp ?? error;
44
+ const isReadOnly = isReadOnlyProp ?? readonly;
45
+ const isRequired = isRequiredProp ?? required;
46
+ if (process.env.NODE_ENV !== "production" && "description" in props) {
47
+ deprecate(
48
+ 'RadioGroup: the "description" prop is deprecated. Use "caption" prop to replace it.'
49
+ );
50
+ }
33
51
  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
34
52
  deprecate(
35
53
  'RadioGroup: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
@@ -50,24 +68,56 @@ const RadioGroup = forwardRef(
50
68
  'RadioGroup: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
51
69
  );
52
70
  }
53
- const commonRootProps = mergeProps(
54
- { ...props, isDisabled, isInvalid, isReadOnly, isRequired },
71
+ const rootProps = mergeProps(
55
72
  {
56
- className: clsx(
57
- flex({
58
- direction: orientation === "horizontal" ? "row" : "column",
59
- alignItems: orientation === "horizontal" ? "center" : "flex-start",
60
- gap: "m"
61
- })
62
- )
73
+ style,
74
+ labelPlacement,
75
+ className,
76
+ labelAlign,
77
+ isDisabled,
78
+ isInvalid,
79
+ isReadOnly,
80
+ isRequired,
81
+ ...props,
82
+ ref,
83
+ "data-size": size,
84
+ "data-testid": testId,
85
+ "data-orientation": orientation
63
86
  },
64
87
  slotProps?.root
65
88
  );
66
- return /* @__PURE__ */ jsxs(RadioGroup$1, { ...commonRootProps, ref, children: [
67
- /* @__PURE__ */ jsx(RadioGroupLabel, { ...slotProps?.label, children: label }),
68
- /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children }),
69
- /* @__PURE__ */ jsx(RadioGroupDescription, { ...slotProps?.description, children: description })
70
- ] });
89
+ const radioGroupProps = mergeProps(
90
+ {
91
+ className: flex({
92
+ direction: orientation === "horizontal" ? "row" : "column",
93
+ alignItems: orientation === "horizontal" ? "center" : "flex-start",
94
+ gap: "s"
95
+ })
96
+ },
97
+ slotProps?.radioGroup
98
+ );
99
+ return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(FormControl, { as: RadioGroup$1, ...rootProps, children: ({ isRequired: isRequired2 }) => {
100
+ const labelProps = mergeProps(
101
+ {
102
+ as: "span",
103
+ isRequired: isRequired2,
104
+ children: label,
105
+ className: s.label,
106
+ isHidden: isLabelHidden
107
+ },
108
+ slotProps?.label
109
+ );
110
+ const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage);
111
+ const captionProps = mergeProps({ children: caption }, slotProps?.caption);
112
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
113
+ /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
114
+ /* @__PURE__ */ jsxs(Field, { children: [
115
+ /* @__PURE__ */ jsx("div", { ...radioGroupProps, children }),
116
+ /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
117
+ /* @__PURE__ */ jsx(FieldError, { ...errorProps })
118
+ ] })
119
+ ] });
120
+ } }) });
71
121
  }
72
122
  );
73
123
  RadioGroup.displayName = "RadioGroup";
@@ -0,0 +1,8 @@
1
+ const label = "kbq-radiogroup-label-750809";
2
+ const s = {
3
+ label
4
+ };
5
+ export {
6
+ s as default,
7
+ label
8
+ };
@@ -1,5 +1,5 @@
1
1
  import { type RadioProps as RadioPropsPrimitive } from '@koobiq/react-primitives';
2
- export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "slotProps" | "data-testid" | "labelPlacement"> & {
2
+ export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "labelPlacement" | "slotProps" | "data-testid"> & {
3
3
  children?: import("react").ReactNode;
4
4
  size?: import("./types").RadioPropSize;
5
5
  labelPlacement?: import("./types").RadioPropLabelPlacement;
@@ -8,7 +8,6 @@ export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
8
8
  type RadioDeprecatedProps = {
9
9
  /**
10
10
  * If `true`, the component is disabled.
11
- * @default false
12
11
  * @deprecated
13
12
  * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
14
13
  */
@@ -1,3 +1 @@
1
1
  export * from './Radio';
2
- export * from './RadioGroupLabel';
3
- export * from './RadioGroupDescription';