@koobiq/react-components 0.0.1 → 0.1.1

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 (59) hide show
  1. package/dist/components/Button/types.d.ts +0 -10
  2. package/dist/components/Calendar/types.d.ts +3 -41
  3. package/dist/components/Checkbox/Checkbox.d.ts +10 -9
  4. package/dist/components/Checkbox/types.d.ts +4 -33
  5. package/dist/components/Checkbox/types.js +1 -0
  6. package/dist/components/DateInput/DateInput.js +2 -2
  7. package/dist/components/DateSegment/DateSegment.d.ts +7 -0
  8. package/dist/components/DateSegment/DateSegment.js +34 -0
  9. package/dist/components/DateSegment/DateSegment.module.css.js +17 -0
  10. package/dist/components/DateSegment/index.d.ts +1 -0
  11. package/dist/components/DateSegment/intl.json.js +7 -0
  12. package/dist/components/DateSegment/utils.d.ts +3 -0
  13. package/dist/components/DateSegment/utils.js +6 -0
  14. package/dist/components/Dialog/components/DialogCloseButton.d.ts +1 -3
  15. package/dist/components/Divider/types.d.ts +4 -9
  16. package/dist/components/Divider/types.js +1 -3
  17. package/dist/components/IconButton/types.d.ts +1 -6
  18. package/dist/components/Input/Input.d.ts +1 -10
  19. package/dist/components/Input/types.d.ts +1 -31
  20. package/dist/components/InputNumber/InputNumber.d.ts +2 -6
  21. package/dist/components/InputNumber/types.d.ts +4 -21
  22. package/dist/components/Link/types.d.ts +2 -7
  23. package/dist/components/List/List.d.ts +2 -2
  24. package/dist/components/List/types.d.ts +5 -39
  25. package/dist/components/Menu/components/MenuInner/MenuInner.d.ts +1 -1
  26. package/dist/components/Menu/types.d.ts +13 -36
  27. package/dist/components/Popover/types.d.ts +2 -3
  28. package/dist/components/ProgressBar/ProgressBar.js +5 -5
  29. package/dist/components/ProgressBar/types.d.ts +8 -20
  30. package/dist/components/ProgressSpinner/ProgressSpinner.js +5 -5
  31. package/dist/components/ProgressSpinner/types.d.ts +8 -20
  32. package/dist/components/Select/types.d.ts +7 -46
  33. package/dist/components/SkeletonBlock/SkeletonBlock.d.ts +3 -1
  34. package/dist/components/SkeletonTypography/SkeletonTypography.d.ts +3 -1
  35. package/dist/components/Table/types.d.ts +3 -25
  36. package/dist/components/TagGroup/types.d.ts +4 -15
  37. package/dist/components/Textarea/Textarea.d.ts +1 -6
  38. package/dist/components/Textarea/types.d.ts +1 -23
  39. package/dist/components/TimePicker/TimePicker.d.ts +5 -0
  40. package/dist/components/TimePicker/TimePicker.js +112 -0
  41. package/dist/components/TimePicker/TimePicker.module.css.js +11 -0
  42. package/dist/components/TimePicker/index.d.ts +2 -0
  43. package/dist/components/TimePicker/types.d.ts +46 -0
  44. package/dist/components/Toggle/Toggle.d.ts +9 -8
  45. package/dist/components/Toggle/types.d.ts +7 -23
  46. package/dist/components/Tooltip/Tooltip.d.ts +4 -6
  47. package/dist/components/Tooltip/types.d.ts +5 -19
  48. package/dist/components/index.d.ts +2 -1
  49. package/dist/index.js +4 -6
  50. package/dist/style.css +47 -39
  51. package/dist/styles/utility.d.ts +1 -0
  52. package/package.json +5 -5
  53. package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.d.ts +0 -7
  54. package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.js +0 -27
  55. package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.module.css.js +0 -17
  56. package/dist/components/DateInput/components/DateInputSegment/index.d.ts +0 -1
  57. package/dist/components/DateInput/components/index.d.ts +0 -1
  58. package/dist/components/List/types.js +0 -4
  59. package/dist/components/Menu/types.js +0 -4
@@ -27,16 +27,6 @@ export type ButtonBaseProps = ExtendableProps<{
27
27
  * @default 'contrast-filled'
28
28
  */
29
29
  variant?: ButtonPropVariant;
30
- /**
31
- * If `true`, the progress indicator is shown and the button becomes disabled.
32
- * @default false
33
- */
34
- isLoading?: boolean;
35
- /**
36
- * If `true`, the component is disabled.
37
- * @default false
38
- */
39
- isDisabled?: boolean;
40
30
  /**
41
31
  * If `true`, only the icon is shown, and the button has same sides.
42
32
  * @default false
@@ -1,51 +1,13 @@
1
1
  import type { ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
2
+ import type { ExtendableProps } from '@koobiq/react-core';
2
3
  import type { AriaCalendarProps, DateValue } from '@koobiq/react-primitives';
3
- type CalendarPropMinValue<T extends DateValue> = AriaCalendarProps<T>['minValue'];
4
- type CalendarPropMaxValue<T extends DateValue> = AriaCalendarProps<T>['maxValue'];
5
- type CalendarPropValue<T extends DateValue> = AriaCalendarProps<T>['value'];
6
- type CalendarPropDefaultValue<T extends DateValue> = AriaCalendarProps<T>['defaultValue'];
7
- type CalendarPropOnChange<T extends DateValue> = AriaCalendarProps<T>['onChange'];
8
- type CalendarPropIsDisabled<T extends DateValue> = AriaCalendarProps<T>['isDisabled'];
9
- type CalendarPropFirstDayOfWeek<T extends DateValue> = AriaCalendarProps<T>['firstDayOfWeek'];
10
- type CalendarPropIsDateUnavailable<T extends DateValue> = AriaCalendarProps<T>['isDateUnavailable'];
11
- type CalendarPropFocusedValue<T extends DateValue> = AriaCalendarProps<T>['focusedValue'];
12
- type CalendarPropDefaultFocusedValue<T extends DateValue> = AriaCalendarProps<T>['defaultFocusedValue'];
13
- type CalendarPropOnFocusChange<T extends DateValue> = AriaCalendarProps<T>['onFocusChange'];
14
- export type CalendarProps<T extends DateValue> = {
4
+ export type CalendarProps<T extends DateValue> = ExtendableProps<{
15
5
  /** Ref to the root container. */
16
6
  ref?: Ref<HTMLDivElement>;
17
7
  /** Additional CSS-classes. */
18
8
  className?: string;
19
9
  /** Inline styles. */
20
10
  style?: CSSProperties;
21
- /** The minimum allowed date that a user may select. */
22
- minValue?: CalendarPropMinValue<T>;
23
- /** The maximum allowed date that a user may select. */
24
- maxValue?: CalendarPropMaxValue<T>;
25
- /** The current value (controlled). */
26
- value?: CalendarPropValue<T>;
27
- /** The default value (uncontrolled). */
28
- defaultValue?: CalendarPropDefaultValue<T>;
29
- /** Handler that is called when the value changes. */
30
- onChange?: CalendarPropOnChange<T>;
31
- /**
32
- * Whether the calendar is disabled.
33
- * @default false
34
- */
35
- isDisabled?: CalendarPropIsDisabled<T>;
36
- /**
37
- * The day that starts the week.
38
- */
39
- firstDayOfWeek?: CalendarPropFirstDayOfWeek<T>;
40
- /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
41
- isDateUnavailable?: CalendarPropIsDateUnavailable<T>;
42
- /** Controls the currently focused date within the calendar. */
43
- focusedValue?: CalendarPropFocusedValue<T>;
44
- /** The date that is focused when the calendar first mounts (uncountrolled). */
45
- defaultFocusedValue?: CalendarPropDefaultFocusedValue<T>;
46
- /** Handler that is called when the focused date changes. */
47
- onFocusChange?: CalendarPropOnFocusChange<T>;
48
- };
11
+ }, Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>>;
49
12
  export type CalendarComponent = <T extends DateValue>(props: CalendarProps<T>) => ReactElement | null;
50
13
  export type CalendarRef = ComponentRef<'div'>;
51
- export {};
@@ -1,17 +1,18 @@
1
- export declare const Checkbox: import("react").ForwardRefExoticComponent<{
1
+ import { type CheckboxProps as CheckboxPropsPrimitive } from '@koobiq/react-primitives';
2
+ export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<CheckboxPropsPrimitive, "validationState" | "inputRef">, "children" | "style" | "className" | "size" | "slotProps" | "data-testid" | "labelPlacement" | keyof {
3
+ disabled?: boolean;
4
+ error?: boolean;
5
+ checked?: boolean;
6
+ readonly?: boolean;
7
+ required?: boolean;
8
+ indeterminate?: boolean;
9
+ defaultChecked?: boolean;
10
+ }> & {
2
11
  children?: import("react").ReactNode;
3
12
  className?: string;
4
13
  style?: import("react").CSSProperties;
5
14
  size?: import("./types").CheckboxPropSize;
6
15
  labelPlacement?: import("./types").CheckboxPropLabelPlacement;
7
- isInvalid?: boolean;
8
- isSelected?: boolean;
9
- isReadOnly?: boolean;
10
- isDisabled?: boolean;
11
- isRequired?: boolean;
12
- isIndeterminate?: boolean;
13
- defaultSelected?: boolean;
14
- onChange?: import("./types").CheckboxPropOnChange;
15
16
  slotProps?: {
16
17
  box?: import("react").ComponentPropsWithRef<"span">;
17
18
  label?: import("react").ComponentPropsWithRef<"span">;
@@ -1,4 +1,6 @@
1
1
  import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
2
+ import type { ExtendableProps } from '@koobiq/react-core';
3
+ import { type CheckboxProps as CheckboxPropsPrimitive } from '@koobiq/react-primitives';
2
4
  export declare const checkboxPropSize: readonly ["normal", "big"];
3
5
  export type CheckboxPropSize = (typeof checkboxPropSize)[number];
4
6
  export declare const checkboxPropLabelPlacement: readonly ["start", "end"];
@@ -53,7 +55,7 @@ type CheckboxDeprecatedProps = {
53
55
  */
54
56
  defaultChecked?: boolean;
55
57
  };
56
- export type CheckboxProps = {
58
+ export type CheckboxProps = ExtendableProps<{
57
59
  /** The content of the component. */
58
60
  children?: ReactNode;
59
61
  /** Additional CSS-classes. */
@@ -70,37 +72,6 @@ export type CheckboxProps = {
70
72
  * @default 'end'
71
73
  */
72
74
  labelPlacement?: CheckboxPropLabelPlacement;
73
- /**
74
- * If `true`, the component will indicate an error.
75
- * @default false
76
- */
77
- isInvalid?: boolean;
78
- /** If `true`, the component is checked. */
79
- isSelected?: boolean;
80
- /**
81
- * It prevents the user from changing the value of the checkbox.
82
- * @default false
83
- */
84
- isReadOnly?: boolean;
85
- /**
86
- * If `true`, the component is disabled.
87
- * @default false
88
- */
89
- isDisabled?: boolean;
90
- /**
91
- * If `true`, the input element is required.
92
- * @default false
93
- */
94
- isRequired?: boolean;
95
- /**
96
- * If `true`, the component appears indeterminate.
97
- * @default false
98
- */
99
- isIndeterminate?: boolean;
100
- /** The default checked state. Use when the component is not controlled. */
101
- defaultSelected?: boolean;
102
- /** Callback fired when the state is changed. */
103
- onChange?: CheckboxPropOnChange;
104
75
  /** The props used for each slot inside. */
105
76
  slotProps?: {
106
77
  box?: ComponentPropsWithRef<'span'>;
@@ -108,5 +79,5 @@ export type CheckboxProps = {
108
79
  };
109
80
  /** Unique identifier for testing purposes. */
110
81
  'data-testid'?: string | number;
111
- } & CheckboxDeprecatedProps;
82
+ } & CheckboxDeprecatedProps, Omit<CheckboxPropsPrimitive, 'inputRef' | 'validationState'>>;
112
83
  export {};
@@ -1,3 +1,4 @@
1
+ import "@koobiq/react-primitives";
1
2
  const checkboxPropSize = ["normal", "big"];
2
3
  const checkboxPropLabelPlacement = ["start", "end"];
3
4
  export {
@@ -6,7 +6,7 @@ import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
6
6
  import { useDateFieldState, removeDataAttributes, useDateField } from "@koobiq/react-primitives";
7
7
  import s from "./DateInput.module.css.js";
8
8
  import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
9
- import { DateInputSegment } from "./components/DateInputSegment/DateInputSegment.js";
9
+ import { DateSegment } from "../DateSegment/DateSegment.js";
10
10
  import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
11
11
  import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
12
12
  import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
@@ -93,7 +93,7 @@ function DateInputRender(props, ref) {
93
93
  );
94
94
  return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
95
95
  /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
96
- /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateInputSegment, { segment, state }, i)) }) }),
96
+ /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) }) }),
97
97
  /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
98
98
  /* @__PURE__ */ jsx(FieldError, { ...errorProps })
99
99
  ] });
@@ -0,0 +1,7 @@
1
+ import type { DateSegment, DateFieldState } from '@koobiq/react-primitives';
2
+ type DateSegmentProps = {
3
+ segment: DateSegment;
4
+ state: DateFieldState;
5
+ };
6
+ export declare function DateSegment({ segment, state }: DateSegmentProps): import("react/jsx-runtime").JSX.Element;
7
+ export {};
@@ -0,0 +1,34 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useRef } from "react";
3
+ import { useLocale, useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
4
+ import { useDateSegment } from "@koobiq/react-primitives";
5
+ /* empty css */
6
+ import s from "./DateSegment.module.css.js";
7
+ import intlMessages from "./intl.json.js";
8
+ import { isTime } from "./utils.js";
9
+ function DateSegment({ segment, state }) {
10
+ const ref = useRef(null);
11
+ const { locale } = useLocale();
12
+ const { segmentProps } = useDateSegment(segment, state, ref);
13
+ const stringFormatter = useLocalizedStringFormatter(intlMessages);
14
+ const { text, type, isPlaceholder } = segment;
15
+ const hasValue = state.value !== null;
16
+ const content = isTime(type) && isPlaceholder && locale in intlMessages ? stringFormatter.format(type) : text;
17
+ return /* @__PURE__ */ jsx(
18
+ "span",
19
+ {
20
+ ...segmentProps,
21
+ ref,
22
+ className: clsx(
23
+ s.base,
24
+ s[type],
25
+ hasValue && s.hasValue,
26
+ isPlaceholder && s.placeholder
27
+ ),
28
+ children: content
29
+ }
30
+ );
31
+ }
32
+ export {
33
+ DateSegment
34
+ };
@@ -0,0 +1,17 @@
1
+ const base = "kbq-datesegment-3b7153";
2
+ const placeholder = "kbq-datesegment-placeholder-b233e5";
3
+ const literal = "kbq-datesegment-literal-a4b534";
4
+ const hasValue = "kbq-datesegment-hasValue-800714";
5
+ const s = {
6
+ base,
7
+ placeholder,
8
+ literal,
9
+ hasValue
10
+ };
11
+ export {
12
+ base,
13
+ s as default,
14
+ hasValue,
15
+ literal,
16
+ placeholder
17
+ };
@@ -0,0 +1 @@
1
+ export * from './DateSegment';
@@ -0,0 +1,7 @@
1
+ const intlMessages = {
2
+ "ru-RU": { "hour": "чч", "minute": "мм", "second": "сс" },
3
+ "en-US": { "hour": "hh", "minute": "mm", "second": "ss" }
4
+ };
5
+ export {
6
+ intlMessages as default
7
+ };
@@ -0,0 +1,3 @@
1
+ type TimeType = 'hour' | 'minute' | 'second';
2
+ export declare function isTime(t: string): t is TimeType;
3
+ export {};
@@ -0,0 +1,6 @@
1
+ function isTime(t) {
2
+ return t === "hour" || t === "minute" || t === "second";
3
+ }
4
+ export {
5
+ isTime
6
+ };
@@ -7,14 +7,12 @@ export declare const DialogCloseButton: import("react").ForwardRefExoticComponen
7
7
  }, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
8
8
  progress?: boolean;
9
9
  disabled?: boolean;
10
- }> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "isDisabled" | "isLoading" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
10
+ }> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
11
11
  progress?: boolean;
12
12
  disabled?: boolean;
13
13
  }> & {
14
14
  children?: import("react").ReactNode;
15
15
  variant?: import("../..").ButtonPropVariant;
16
- isLoading?: boolean;
17
- isDisabled?: boolean;
18
16
  onlyIcon?: boolean;
19
17
  className?: string;
20
18
  style?: import("react").CSSProperties;
@@ -1,15 +1,10 @@
1
+ import type { ExtendableProps } from '@koobiq/react-core';
2
+ import type { SeparatorProps } from '@koobiq/react-primitives';
1
3
  export declare const dividerPropDisplay: readonly ["block", "inline", "inlineBlock"];
2
- export declare const dividerPropOrientation: readonly ["horizontal", "vertical"];
3
- export type DividerPropOrientation = (typeof dividerPropOrientation)[number];
4
4
  export type DividerPropDisplay = (typeof dividerPropDisplay)[number];
5
- export type DividerBaseProps = {
5
+ export type DividerBaseProps = ExtendableProps<{
6
6
  /** Additional CSS-classes. */
7
7
  className?: string;
8
- /**
9
- * The orientation of the separator.
10
- * @default 'horizontal'
11
- */
12
- orientation?: DividerPropOrientation;
13
8
  /** Set the display for the component. */
14
9
  display?: DividerPropDisplay;
15
10
  /**
@@ -24,4 +19,4 @@ export type DividerBaseProps = {
24
19
  * @default false
25
20
  */
26
21
  disablePaddings?: boolean;
27
- };
22
+ }, Omit<SeparatorProps, 'elementType'>>;
@@ -1,6 +1,4 @@
1
1
  const dividerPropDisplay = ["block", "inline", "inlineBlock"];
2
- const dividerPropOrientation = ["horizontal", "vertical"];
3
2
  export {
4
- dividerPropDisplay,
5
- dividerPropOrientation
3
+ dividerPropDisplay
6
4
  };
@@ -29,11 +29,6 @@ export type IconButtonBaseProps = ExtendableProps<{
29
29
  * @default 'theme'
30
30
  */
31
31
  variant?: IconButtonPropVariant;
32
- /**
33
- * If `true`, the component is disabled.
34
- * @default false
35
- */
36
- isDisabled?: boolean;
37
32
  /**
38
33
  * Size of the component
39
34
  * @default 'xl'
@@ -48,5 +43,5 @@ export type IconButtonBaseProps = ExtendableProps<{
48
43
  className?: string;
49
44
  /** Inline styles. */
50
45
  style?: CSSProperties;
51
- } & IconButtonBaseDeprecatedProps, Omit<ButtonBasePrimitiveProps, 'slot'>>;
46
+ } & IconButtonBaseDeprecatedProps, Omit<ButtonBasePrimitiveProps, 'slot' | 'isLoading'>>;
52
47
  export {};
@@ -1,29 +1,20 @@
1
1
  import { TextField } from '@koobiq/react-primitives';
2
2
  import { type FieldLabelProps, type FieldInputGroupProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldControlProps } from '../FieldComponents';
3
- export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "value" | "caption" | "label" | "style" | "className" | "defaultValue" | "onChange" | "placeholder" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
3
+ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
4
4
  disabled?: boolean;
5
5
  error?: boolean;
6
6
  required?: boolean;
7
7
  readonly?: boolean;
8
8
  hiddenLabel?: boolean;
9
9
  }> & {
10
- label?: import("react").ReactNode;
11
10
  className?: string;
12
- placeholder?: import("@koobiq/react-primitives").TextFieldProps["placeholder"];
13
- value?: import("@koobiq/react-primitives").TextFieldProps["value"];
14
- defaultValue?: import("@koobiq/react-primitives").TextFieldProps["defaultValue"];
15
- onChange?: import("@koobiq/react-primitives").TextFieldProps["onChange"];
16
11
  startAddon?: import("react").ReactNode;
17
12
  endAddon?: import("react").ReactNode;
18
13
  variant?: import("./types").InputPropVariant;
19
- isInvalid?: boolean;
20
14
  errorMessage?: import("react").ReactNode;
21
15
  fullWidth?: boolean;
22
- isDisabled?: boolean;
23
- isReadOnly?: boolean;
24
16
  isLabelHidden?: boolean;
25
17
  caption?: import("react").ReactNode;
26
- isRequired?: boolean;
27
18
  style?: import("react").CSSProperties;
28
19
  'data-testid'?: string | number;
29
20
  slotProps?: {
@@ -42,18 +42,8 @@ type InputDeprecatedProps = {
42
42
  hiddenLabel?: boolean;
43
43
  };
44
44
  export type InputProps = ExtendableProps<{
45
- /** The content to display as the label. */
46
- label?: ReactNode;
47
45
  /** Additional CSS-classes. */
48
46
  className?: string;
49
- /** Temporary text that occupies the text input when it is empty. */
50
- placeholder?: TextFieldProps['placeholder'];
51
- /** The current value (controlled). */
52
- value?: TextFieldProps['value'];
53
- /** The default value (uncontrolled). */
54
- defaultValue?: TextFieldProps['defaultValue'];
55
- /** Handler that is called when the value changes. */
56
- onChange?: TextFieldProps['onChange'];
57
47
  /** Addon placed before the children. */
58
48
  startAddon?: ReactNode;
59
49
  /** Addon placed after the children. */
@@ -63,28 +53,13 @@ export type InputProps = ExtendableProps<{
63
53
  * @default 'filled'
64
54
  */
65
55
  variant?: InputPropVariant;
66
- /**
67
- * If `true`, the input will indicate an error.
68
- * @default false
69
- */
70
- isInvalid?: boolean;
71
- /** Message for the error state */
56
+ /** An error message for the field. */
72
57
  errorMessage?: ReactNode;
73
58
  /**
74
59
  * If true, the input will take up the full width of its container.
75
60
  * @default false
76
61
  */
77
62
  fullWidth?: boolean;
78
- /**
79
- * If `true`, the component is disabled.
80
- * @default false
81
- */
82
- isDisabled?: boolean;
83
- /**
84
- * If `true`, the input can be selected but not changed by the user.
85
- * @default false
86
- */
87
- isReadOnly?: boolean;
88
63
  /**
89
64
  * If `true`, the label is hidden. Be sure to add aria-label to the input element.
90
65
  * @default false
@@ -92,11 +67,6 @@ export type InputProps = ExtendableProps<{
92
67
  isLabelHidden?: boolean;
93
68
  /** The helper text content. */
94
69
  caption?: ReactNode;
95
- /**
96
- * If `true`, the label is displayed as required and the input element is required.
97
- * @default false
98
- */
99
- isRequired?: boolean;
100
70
  /** Inline styles. */
101
71
  style?: CSSProperties;
102
72
  /** Unique identifier for testing purposes. */
@@ -1,24 +1,20 @@
1
1
  import { NumberField } from '@koobiq/react-primitives';
2
2
  import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputGroupProps, type FieldInputProps } from '../FieldComponents';
3
- export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/numberfield").AriaNumberFieldProps, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "style" | "className" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
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" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
4
4
  disabled?: boolean;
5
5
  error?: boolean;
6
6
  required?: boolean;
7
7
  readonly?: boolean;
8
8
  hiddenLabel?: boolean;
9
9
  }> & {
10
- label?: import("react").ReactNode;
11
10
  className?: string;
11
+ errorMessage?: import("react").ReactNode;
12
12
  startAddon?: import("react").ReactNode;
13
13
  endAddon?: import("react").ReactNode;
14
14
  variant?: import("./types").InputNumberPropVariant;
15
- isInvalid?: boolean;
16
- errorMessage?: import("react").ReactNode;
17
15
  fullWidth?: boolean;
18
- isDisabled?: boolean;
19
16
  isLabelHidden?: boolean;
20
17
  caption?: import("react").ReactNode;
21
- isRequired?: boolean;
22
18
  style?: import("react").CSSProperties;
23
19
  'data-testid'?: string | number;
24
20
  slotProps?: {
@@ -1,6 +1,6 @@
1
1
  import type { ComponentRef, CSSProperties, ReactNode } from 'react';
2
2
  import type { ExtendableProps } from '@koobiq/react-core';
3
- import type { NumberField, UseNumberFieldProps } from '@koobiq/react-primitives';
3
+ import type { NumberField, NumberFieldProps } from '@koobiq/react-primitives';
4
4
  import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputGroupProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
5
5
  export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
6
6
  export type InputNumberPropVariant = (typeof inputNumberPropVariant)[number];
@@ -42,10 +42,10 @@ type InputNumberDeprecatedProps = {
42
42
  hiddenLabel?: boolean;
43
43
  };
44
44
  export type InputNumberProps = ExtendableProps<{
45
- /** The content to display as the label. */
46
- label?: ReactNode;
47
45
  /** Additional CSS-classes. */
48
46
  className?: string;
47
+ /** An error message for the field. */
48
+ errorMessage?: ReactNode;
49
49
  /** Addon placed before the children. */
50
50
  startAddon?: ReactNode;
51
51
  /** Addon placed after the children. */
@@ -55,23 +55,11 @@ export type InputNumberProps = ExtendableProps<{
55
55
  * @default 'filled'
56
56
  */
57
57
  variant?: InputNumberPropVariant;
58
- /**
59
- * If `true`, the input will indicate an error.
60
- * @default false
61
- */
62
- isInvalid?: boolean;
63
- /** Message for the error state. */
64
- errorMessage?: ReactNode;
65
58
  /**
66
59
  * If true, the input will take up the full width of its container.
67
60
  * @default false
68
61
  */
69
62
  fullWidth?: boolean;
70
- /**
71
- * If `true`, the component is disabled.
72
- * @default false
73
- */
74
- isDisabled?: boolean;
75
63
  /**
76
64
  * If `true`, the label is hidden. Be sure to add aria-label to the input element.
77
65
  * @default false
@@ -79,11 +67,6 @@ export type InputNumberProps = ExtendableProps<{
79
67
  isLabelHidden?: boolean;
80
68
  /** The helper text content. */
81
69
  caption?: ReactNode;
82
- /**
83
- * If `true`, the label is displayed as required and the input element is required.
84
- * @default false
85
- */
86
- isRequired?: boolean;
87
70
  /** Inline styles. */
88
71
  style?: CSSProperties;
89
72
  /** Unique identifier for testing purposes. */
@@ -97,6 +80,6 @@ export type InputNumberProps = ExtendableProps<{
97
80
  group?: FieldInputGroupProps;
98
81
  errorMessage?: FieldErrorProps;
99
82
  };
100
- } & InputNumberDeprecatedProps, Omit<UseNumberFieldProps, 'description' | 'validationBehavior' | 'validate' | 'children' | 'inputElementType'>>;
83
+ } & InputNumberDeprecatedProps, Omit<NumberFieldProps, 'description' | 'children' | 'inputElementType' | 'validationState'>>;
101
84
  export type InputNumberRef = ComponentRef<'input'>;
102
85
  export {};
@@ -1,6 +1,6 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
2
  import type { ExtendableProps } from '@koobiq/react-core';
3
- import type { UseLinkProps } from '@koobiq/react-primitives';
3
+ import type { LinkBaseProps as LinkBasePrimitiveProps } from '@koobiq/react-primitives';
4
4
  import type { TypographyPropVariant } from '../Typography';
5
5
  export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 'text-normal' | 'text-big' | 'inherit'>;
6
6
  type LinkDeprecatedProps = {
@@ -35,11 +35,6 @@ export type LinkBaseProps = ExtendableProps<{
35
35
  startIcon?: ReactNode;
36
36
  /** Icon placed after the children. */
37
37
  endIcon?: ReactNode;
38
- /**
39
- * If `true`, the component is disabled.
40
- * @default false
41
- */
42
- isDisabled?: boolean;
43
38
  /**
44
39
  * If `true`, displays :visited CSS-state.
45
40
  * @default false
@@ -54,5 +49,5 @@ export type LinkBaseProps = ExtendableProps<{
54
49
  className?: string;
55
50
  /** Inline styles */
56
51
  style?: CSSProperties;
57
- } & LinkDeprecatedProps, Omit<UseLinkProps, 'elementType'>>;
52
+ } & LinkDeprecatedProps, Omit<LinkBasePrimitiveProps, 'elementType'>>;
58
53
  export {};
@@ -2,11 +2,11 @@ import type { Ref } from 'react';
2
2
  import { type ListState } from '@koobiq/react-primitives';
3
3
  import { Item, Section } from '../Collections';
4
4
  import { ListItemText } from './components';
5
- import type { ListComponent, ListBaseProps } from './types';
5
+ import type { ListComponent, ListProps } from './types';
6
6
  export type ListInnerProps<T extends object> = {
7
7
  state: ListState<T>;
8
8
  listRef?: Ref<HTMLUListElement>;
9
- } & Omit<ListBaseProps<T>, 'ref'>;
9
+ } & Omit<ListProps<T>, 'ref'>;
10
10
  export declare function ListInner<T extends object>(props: ListInnerProps<T>): import("react/jsx-runtime").JSX.Element;
11
11
  declare const ListComponent: ListComponent;
12
12
  type CompoundedComponent = typeof ListComponent & {
@@ -1,53 +1,19 @@
1
- import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
1
+ import type { Ref, ComponentRef, ReactElement, CSSProperties, ComponentPropsWithRef } from 'react';
2
+ import type { ExtendableProps } from '@koobiq/react-core';
2
3
  import type { AriaListBoxProps } from '@koobiq/react-primitives';
3
4
  import type { TypographyProps } from '../Typography';
4
- export declare const listPropSelectionMode: readonly ["none", "single", "multiple"];
5
- export type ListPropSelectionMode = (typeof listPropSelectionMode)[number];
6
- export type ListPropItems<T extends object> = AriaListBoxProps<T>['items'];
7
- export type ListPropChildren<T extends object> = AriaListBoxProps<T>['children'];
8
- export type ListPropSelectedKeys<T extends object> = AriaListBoxProps<T>['selectedKeys'];
9
- export type ListPropDefaultSelectedKeys<T extends object> = AriaListBoxProps<T>['defaultSelectedKeys'];
10
- export type ListPropDisabledKeys<T extends object> = AriaListBoxProps<T>['disabledKeys'];
11
- export type ListPropOnSelectionChange<T extends object> = AriaListBoxProps<T>['onSelectionChange'];
12
- export type ListPropOnAction<T extends object> = AriaListBoxProps<T>['onAction'];
13
- export type ListPropSelectionBehavior<T extends object> = AriaListBoxProps<T>['selectionBehavior'];
14
- export type ListBaseProps<T extends object> = {
15
- label?: ReactNode;
5
+ export type ListProps<T> = ExtendableProps<{
16
6
  /** Additional CSS-classes. */
17
7
  className?: string;
18
8
  /** Inline styles. */
19
9
  style?: CSSProperties;
20
- /** The type of selection that is allowed in the collection. */
21
- selectionMode?: ListPropSelectionMode;
22
10
  /** Ref to the HTML ul-element. */
23
11
  ref?: Ref<HTMLElement>;
24
- /** The contents of the collection. */
25
- children?: ListPropChildren<T>;
26
- /** Item objects in the collection. */
27
- items?: ListPropItems<T>;
28
- /** The currently selected keys in the collection (controlled). */
29
- selectedKeys?: ListPropSelectedKeys<T>;
30
- /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
31
- disabledKeys?: ListPropDisabledKeys<T>;
32
- /** The initial selected keys in the collection (uncontrolled). */
33
- defaultSelectedKeys?: ListPropDefaultSelectedKeys<T>;
34
- /** Handler that is called when the selection changes. */
35
- onSelectionChange?: ListPropOnSelectionChange<T>;
36
- /**
37
- * Handler that is called when a user performs an action on an item. The exact user event depends on
38
- * the collection's `selectionBehavior` prop and the interaction modality.
39
- */
40
- onAction?: ListPropOnAction<T>;
41
- /** How multiple selection should behave in the collection. */
42
- selectionBehavior?: ListPropSelectionBehavior<T>;
43
- /** Whether to autofocus the list or an option. */
44
- autoFocus?: boolean | 'first' | 'last';
45
12
  /** The props used for each slot inside. */
46
13
  slotProps?: {
47
14
  label?: TypographyProps;
48
15
  list?: ComponentPropsWithRef<'div'>;
49
16
  };
50
- };
51
- export type ListProps<T extends object> = ListBaseProps<T>;
17
+ }, AriaListBoxProps<T>>;
52
18
  export type ListRef = ComponentRef<'ul'>;
53
- export type ListComponent = <T extends object>(props: ListProps<T>) => ReactElement | null;
19
+ export type ListComponent = <T>(props: ListProps<T>) => ReactElement | null;
@@ -1,6 +1,6 @@
1
1
  import type { ComponentRef, ReactElement } from 'react';
2
2
  import type { AriaMenuOptions } from '@koobiq/react-primitives';
3
3
  export type MenuInnerProps<T> = AriaMenuOptions<T>;
4
- export type MenuInnerComponent = <T extends object>(props: MenuInnerProps<T>) => ReactElement | null;
4
+ export type MenuInnerComponent = <T>(props: MenuInnerProps<T>) => ReactElement | null;
5
5
  export type MenuInnerRef = ComponentRef<'ul'>;
6
6
  export declare const MenuInner: MenuInnerComponent;