colibri-ui 0.7.95 → 0.7.97

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 (90) hide show
  1. package/Badge/Control/index.d.ts +2 -2
  2. package/Badge/Control/index.props.d.ts +0 -2
  3. package/Badge/index.d.ts +2 -2
  4. package/Badge/index.props.d.ts +0 -2
  5. package/Chip/index.d.ts +3 -3
  6. package/Chip/index.props.d.ts +1 -3
  7. package/ClickOutside/index.d.ts +3 -4
  8. package/Dropdown/index.d.ts +2 -2
  9. package/Dropdown/index.props.d.ts +0 -1
  10. package/Grid/Item/index.d.ts +2 -2
  11. package/Grid/Item/index.props.d.ts +1 -2
  12. package/Grid/index.d.ts +2 -2
  13. package/Grid/index.props.d.ts +0 -2
  14. package/Menu/components/MenuItem/index.d.ts +3 -1
  15. package/Menu/components/MenuItem/index.props.d.ts +1 -2
  16. package/Modal/components/Content/index.d.ts +2 -4
  17. package/Modal/components/Title/index.d.ts +2 -4
  18. package/Modal/index.d.ts +2 -2
  19. package/Modal/index.props.d.ts +0 -2
  20. package/Portal/index.d.ts +3 -4
  21. package/README.md +2 -1
  22. package/Select/components/MenuOverlayItem/index.d.ts +1 -0
  23. package/Select/components/MenuOverlayItem/index.js +2 -1
  24. package/Select/index.js +4 -2
  25. package/Select/index.props.d.ts +1 -0
  26. package/Status/index.d.ts +2 -1
  27. package/Status/index.module.css +8 -8
  28. package/Status/index.props.d.ts +0 -1
  29. package/TextArea/TextArea.module.css +6 -6
  30. package/Theme/colors/theme_buenos_aires.js +2 -2
  31. package/TimeSelect/helpers.d.ts +1 -0
  32. package/TimeSelect/helpers.js +4 -0
  33. package/TimeSelect/index.d.ts +1 -0
  34. package/TimeSelect/index.js +4 -2
  35. package/Tooltip/index.d.ts +2 -2
  36. package/Tooltip/index.props.d.ts +0 -1
  37. package/Typography/Typography.module.css +20 -20
  38. package/Typography/index.d.ts +2 -2
  39. package/Typography/index.props.d.ts +1 -2
  40. package/base/FormField/index.d.ts +3 -1
  41. package/base/FormField/index.props.d.ts +0 -1
  42. package/base/InputRoot/InputRoot.module.css +1 -1
  43. package/base/InputRoot/index.d.ts +3 -1
  44. package/base/InputRoot/index.props.d.ts +0 -1
  45. package/esm/Badge/Control/index.d.ts +2 -2
  46. package/esm/Badge/Control/index.props.d.ts +0 -2
  47. package/esm/Badge/index.d.ts +2 -2
  48. package/esm/Badge/index.props.d.ts +0 -2
  49. package/esm/Chip/index.d.ts +3 -3
  50. package/esm/Chip/index.props.d.ts +1 -3
  51. package/esm/ClickOutside/index.d.ts +3 -4
  52. package/esm/Dropdown/index.d.ts +2 -2
  53. package/esm/Dropdown/index.props.d.ts +0 -1
  54. package/esm/Grid/Item/index.d.ts +2 -2
  55. package/esm/Grid/Item/index.props.d.ts +1 -2
  56. package/esm/Grid/index.d.ts +2 -2
  57. package/esm/Grid/index.props.d.ts +0 -2
  58. package/esm/Menu/components/MenuItem/index.d.ts +3 -1
  59. package/esm/Menu/components/MenuItem/index.props.d.ts +1 -2
  60. package/esm/Modal/components/Content/index.d.ts +2 -4
  61. package/esm/Modal/components/Title/index.d.ts +2 -4
  62. package/esm/Modal/index.d.ts +2 -2
  63. package/esm/Modal/index.props.d.ts +0 -2
  64. package/esm/Portal/index.d.ts +3 -4
  65. package/esm/Select/components/MenuOverlayItem/index.d.ts +1 -0
  66. package/esm/Select/components/MenuOverlayItem/index.js +2 -1
  67. package/esm/Select/index.js +4 -2
  68. package/esm/Select/index.props.d.ts +1 -0
  69. package/esm/Status/index.d.ts +2 -1
  70. package/esm/Status/index.module.css +8 -8
  71. package/esm/Status/index.props.d.ts +0 -1
  72. package/esm/TextArea/TextArea.module.css +6 -6
  73. package/esm/Theme/colors/theme_buenos_aires.js +2 -2
  74. package/esm/TimeSelect/helpers.d.ts +1 -0
  75. package/esm/TimeSelect/helpers.js +5 -2
  76. package/esm/TimeSelect/index.d.ts +1 -0
  77. package/esm/TimeSelect/index.js +5 -3
  78. package/esm/Tooltip/index.d.ts +2 -2
  79. package/esm/Tooltip/index.props.d.ts +0 -1
  80. package/esm/Typography/Typography.module.css +20 -20
  81. package/esm/Typography/index.d.ts +2 -2
  82. package/esm/Typography/index.props.d.ts +1 -2
  83. package/esm/base/FormField/index.d.ts +3 -1
  84. package/esm/base/FormField/index.props.d.ts +0 -1
  85. package/esm/base/InputRoot/InputRoot.module.css +1 -1
  86. package/esm/base/InputRoot/index.d.ts +3 -1
  87. package/esm/base/InputRoot/index.props.d.ts +0 -1
  88. package/esm/theme_ba_variables.css +2 -2
  89. package/package.json +1 -1
  90. package/theme_ba_variables.css +2 -2
@@ -1,3 +1,3 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { ControlProps } from "./index.props";
3
- export declare const BadgeControl: FC<ControlProps>;
3
+ export declare const BadgeControl: FC<PropsWithChildren<ControlProps>>;
@@ -1,5 +1,3 @@
1
- import type { ReactNode } from "react";
2
1
  export interface ControlProps {
3
2
  className?: string;
4
- children: ReactNode;
5
3
  }
package/Badge/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { Props } from "./index.props";
3
- declare const Badge: FC<Props>;
3
+ declare const Badge: FC<PropsWithChildren<Props>>;
4
4
  export default Badge;
@@ -1,11 +1,9 @@
1
- import type { ReactNode } from "react";
2
1
  import type { ControlProps } from "./Control/index.props";
3
2
  export interface Props extends ControlProps {
4
3
  className?: string;
5
4
  color?: string;
6
5
  background?: string;
7
6
  content?: number;
8
- children: ReactNode;
9
7
  invisible?: boolean;
10
8
  max?: number;
11
9
  showZero?: boolean;
package/Chip/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Props } from "./index.props";
2
- import type { FC } from "react";
3
- declare const Chip: FC<Props>;
1
+ import type { ChipProps } from "./index.props";
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Chip: FC<PropsWithChildren<ChipProps>>;
4
4
  export default Chip;
@@ -1,12 +1,10 @@
1
- import type { ReactNode } from "react";
2
1
  type Size = "s" | "m" | "l";
3
- export type Props = {
2
+ export type ChipProps = {
4
3
  size?: Size;
5
4
  testID?: string;
6
5
  isActive?: boolean;
7
6
  iconOnRight?: React.ReactNode;
8
7
  onClick?: () => void;
9
8
  onIconOnRightClick?: () => void;
10
- children?: ReactNode;
11
9
  };
12
10
  export {};
@@ -1,6 +1,5 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const ClickOutside: FC<{
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const ClickOutside: FC<PropsWithChildren<{
3
3
  onClick: (e: MouseEvent | TouchEvent) => void;
4
- children: ReactNode;
5
- }>;
4
+ }>>;
6
5
  export default ClickOutside;
@@ -1,4 +1,4 @@
1
- import React from "react";
2
1
  import type { DropdownProps } from "./index.props";
3
- declare const Dropdown: React.FC<DropdownProps>;
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
4
4
  export default Dropdown;
@@ -4,7 +4,6 @@ import type { Placement as PopperPlacement } from "@popperjs/core";
4
4
  export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end">;
5
5
  export type Trigger = "click" | "hover" | "focus";
6
6
  export type DropdownProps = {
7
- children: ReactNode;
8
7
  zIndex?: number;
9
8
  disabled?: boolean;
10
9
  onVisibleChange?: (visible: boolean) => void;
@@ -1,4 +1,4 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { GridItemProps } from "./index.props";
3
- declare const GridItem: FC<GridItemProps>;
3
+ declare const GridItem: FC<PropsWithChildren<GridItemProps>>;
4
4
  export default GridItem;
@@ -1,6 +1,5 @@
1
- import type { CSSProperties, ReactNode } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  export type GridItemProps = {
3
- children: ReactNode;
4
3
  fullWidth?: boolean;
5
4
  className?: string;
6
5
  style?: CSSProperties;
package/Grid/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { GridProps } from "./index.props";
3
- declare const Grid: React.FC<GridProps>;
3
+ declare const Grid: FC<PropsWithChildren<GridProps>>;
4
4
  export default Grid;
@@ -1,6 +1,4 @@
1
- import type { ReactNode } from "react";
2
1
  export type GridProps = {
3
- children: ReactNode;
4
2
  className?: string;
5
3
  gridRowGap?: number;
6
4
  gridColumnGap?: number;
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
2
  import type { MenuItemProps } from "./index.props";
3
- declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
3
+ declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & {
4
+ children?: React.ReactNode | undefined;
5
+ } & React.RefAttributes<HTMLLIElement>>;
4
6
  export default MenuItem;
@@ -1,7 +1,6 @@
1
- import type { ReactNode, MouseEvent } from "react";
1
+ import type { MouseEvent } from "react";
2
2
  import type { MenuVariant } from "../../index.props";
3
3
  export interface MenuItemProps {
4
- children: ReactNode;
5
4
  className?: string;
6
5
  isSelected?: boolean;
7
6
  onClick?: (e: MouseEvent) => void;
@@ -1,5 +1,3 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const Content: FC<{
3
- children: ReactNode;
4
- }>;
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const Content: FC<PropsWithChildren<{}>>;
5
3
  export default Content;
@@ -1,5 +1,3 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const Title: FC<{
3
- children: ReactNode;
4
- }>;
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const Title: FC<PropsWithChildren<{}>>;
5
3
  export default Title;
package/Modal/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { ModalProps } from "./index.props";
3
- declare const Modal: FC<ModalProps>;
3
+ declare const Modal: FC<PropsWithChildren<ModalProps>>;
4
4
  export default Modal;
@@ -1,6 +1,4 @@
1
- import type { ReactNode } from "react";
2
1
  export type ModalProps = {
3
- children: ReactNode;
4
2
  className?: string;
5
3
  onClose?: () => void;
6
4
  title?: string;
package/Portal/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const Portal: FC<{
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const Portal: FC<PropsWithChildren<{
3
3
  node?: HTMLElement | null;
4
- children: ReactNode;
5
- }>;
4
+ }>>;
6
5
  export default Portal;
package/README.md CHANGED
@@ -19,12 +19,13 @@ npm i -S colibri-ui
19
19
  ```tsx
20
20
  // app/layout.tsx
21
21
  import classNames from "classnames";
22
+ import type { ReactNode } from "react";
22
23
  import "colibri-ui/theme_default_variables.css";
23
24
 
24
25
  export default function RootLayout({
25
26
  children,
26
27
  }: Readonly<{
27
- children: React.ReactNode;
28
+ children: ReactNode;
28
29
  }>) {
29
30
  return (
30
31
  <html lang="en">
@@ -5,6 +5,7 @@ type SelectItemProps = {
5
5
  value: string;
6
6
  label: React.ReactNode;
7
7
  selected: boolean;
8
+ disabled?: boolean;
8
9
  };
9
10
  onClick?: () => void;
10
11
  setScrollView: (value: Coordinates) => void;
@@ -35,7 +35,8 @@ var SelectItem = function SelectItem(_a) {
35
35
  return /*#__PURE__*/React__default.default.createElement(index.default, {
36
36
  ref: ref,
37
37
  onClick: onClick,
38
- isSelected: option.selected
38
+ isSelected: option.selected,
39
+ disabled: option.disabled
39
40
  }, option.label, option.selected && /*#__PURE__*/React__default.default.createElement(Check.default, {
40
41
  width: 16,
41
42
  height: 16
package/Select/index.js CHANGED
@@ -38,11 +38,13 @@ var Select = function Select(_a) {
38
38
  var preparedOptions = React.useMemo(function () {
39
39
  return options.map(function (_a) {
40
40
  var lvalue = _a.value,
41
- llabel = _a.label;
41
+ llabel = _a.label,
42
+ disabled = _a.disabled;
42
43
  return {
43
44
  value: lvalue,
44
45
  label: llabel,
45
- selected: value === lvalue
46
+ selected: value === lvalue,
47
+ disabled: disabled
46
48
  };
47
49
  });
48
50
  }, [value, options]);
@@ -3,6 +3,7 @@ import type { FormFieldProps } from "../base/FormField/index.props";
3
3
  export interface IOption<T extends string> {
4
4
  value: T;
5
5
  label: ReactNode;
6
+ disabled?: boolean;
6
7
  }
7
8
  export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children"> {
8
9
  options: IOption<T>[];
package/Status/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import type { PropsWithChildren } from "react";
2
3
  import type { StatusProps } from "./index.props";
3
- declare const Status: ({ className, tag: Component, children, type, }: StatusProps) => React.JSX.Element;
4
+ declare const Status: ({ className, tag: Component, children, type, }: PropsWithChildren<StatusProps>) => React.JSX.Element;
4
5
  export default Status;
@@ -1,23 +1,23 @@
1
1
  .root {
2
- display: inline-flex;
3
2
  align-items: center;
4
- gap: 0.5rem;
5
3
  background-color: var(--status-neutral-bg);
6
- line-height: 1.5rem;
7
- padding: 0 0.5rem;
8
4
  border-radius: 6rem;
9
- inline-size: fit-content;
10
5
  box-sizing: border-box;
11
- white-space: nowrap;
6
+ display: inline-flex;
7
+ gap: 0.5rem;
8
+ inline-size: fit-content;
9
+ line-height: 1.5rem;
12
10
  overflow: hidden;
11
+ padding: 0 0.5rem;
13
12
  vertical-align: middle;
13
+ white-space: nowrap;
14
14
  }
15
15
  .root::before {
16
16
  background-color: var(--status-neutral);
17
- content: "";
18
- inline-size: 0.4rem;
19
17
  block-size: 0.4rem;
20
18
  border-radius: 100%;
19
+ content: "";
20
+ inline-size: 0.4rem;
21
21
  }
22
22
  .root_success {
23
23
  background-color: var(--status-success-bg);
@@ -8,6 +8,5 @@ export declare enum STATUS_TYPE {
8
8
  export type StatusProps = {
9
9
  className?: string;
10
10
  tag?: StatusTag;
11
- children?: string;
12
11
  type?: STATUS_TYPE;
13
12
  };
@@ -1,14 +1,14 @@
1
1
  .textarea {
2
- resize: none;
3
- font: inherit;
4
- overflow: auto;
5
- text-overflow: unset;
6
- padding: 7px 0;
7
2
  background: transparent;
8
3
  border: none;
9
- outline: none;
10
4
  flex: 1;
5
+ font: inherit;
6
+ outline: none;
7
+ overflow: auto;
11
8
  overflow: hidden;
9
+ padding: 7px 0;
10
+ resize: none;
11
+ text-overflow: unset;
12
12
  text-overflow: ellipsis;
13
13
  }
14
14
  .textarea::placeholder {
@@ -12,8 +12,8 @@ var PrimaryBA = {
12
12
  PRIMARY_BA_5: "#FFC818"
13
13
  };
14
14
  var SecondaryBA = {
15
- SECONDARY_BA_1: "#59636e",
16
- SECONDARY_BA_2: "#454c54",
15
+ SECONDARY_BA_1: "#818b98",
16
+ SECONDARY_BA_2: "#59636e",
17
17
  SECONDARY_BA_3: "#393f46",
18
18
  SECONDARY_BA_4: "#25292e",
19
19
  SECONDARY_BA_5: "#1f2328"
@@ -5,3 +5,4 @@ export declare const DEFAULT_TIME: {
5
5
  };
6
6
  export declare const formatTime: (date: Date) => string;
7
7
  export declare const generateSuggest: (interval?: number) => Timestamp[];
8
+ export declare const checkIsBeforeNow: (time: string, currentDate?: Date | null) => boolean;
@@ -22,7 +22,11 @@ var generateSuggest = function generateSuggest(interval) {
22
22
  };
23
23
  });
24
24
  };
25
+ var checkIsBeforeNow = function checkIsBeforeNow(time, currentDate) {
26
+ return currentDate ? dateFns.isBefore(dateFns.parse(time, "HH:mm", currentDate), new Date()) : false;
27
+ };
25
28
 
26
29
  exports.DEFAULT_TIME = DEFAULT_TIME;
30
+ exports.checkIsBeforeNow = checkIsBeforeNow;
27
31
  exports.formatTime = formatTime;
28
32
  exports.generateSuggest = generateSuggest;
@@ -2,6 +2,7 @@ import type { SelectProps } from "../Select/index.props";
2
2
  import type { FC } from "react";
3
3
  interface TimeSelectProps extends SelectProps<string> {
4
4
  interval?: 5 | 10 | 15 | 30;
5
+ currentDate?: Date | null;
5
6
  }
6
7
  declare const TimeSelect: FC<TimeSelectProps>;
7
8
  export default TimeSelect;
@@ -14,19 +14,21 @@ var React__default = /*#__PURE__*/_interopDefault(React);
14
14
 
15
15
  var TimeSelect = function TimeSelect(_a) {
16
16
  var value = _a.value,
17
+ currentDate = _a.currentDate,
17
18
  _b = _a.label,
18
19
  label = _b === void 0 ? "Start time" : _b,
19
20
  _c = _a.interval,
20
21
  interval = _c === void 0 ? 15 : _c,
21
22
  onChange = _a.onChange,
22
- props = tslib.__rest(_a, ["value", "label", "interval", "onChange"]);
23
+ props = tslib.__rest(_a, ["value", "currentDate", "label", "interval", "onChange"]);
23
24
  var options = React.useMemo(function () {
24
25
  return helpers.generateSuggest(interval).map(function (item) {
25
26
  return {
26
27
  value: item.time,
27
28
  label: /*#__PURE__*/React__default.default.createElement(index.default, {
28
29
  time: item.time
29
- })
30
+ }),
31
+ disabled: helpers.checkIsBeforeNow(item.time, currentDate)
30
32
  };
31
33
  });
32
34
  }, [interval]);
@@ -1,4 +1,4 @@
1
- import React from "react";
2
1
  import type { ITooltipProps } from "./index.props";
3
- declare const Tooltip: React.FC<ITooltipProps>;
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Tooltip: FC<PropsWithChildren<ITooltipProps>>;
4
4
  export default Tooltip;
@@ -3,7 +3,6 @@ import type { PositioningStrategy } from "@popperjs/core";
3
3
  import type { Placement as PopperPlacement } from "@popperjs/core";
4
4
  export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
5
5
  export interface ITooltipProps {
6
- children: ReactNode;
7
6
  content: ReactNode;
8
7
  zIndex?: number;
9
8
  placement?: Placement;
@@ -3,44 +3,44 @@
3
3
  }
4
4
 
5
5
  .size_xs {
6
- font-size: 12px;
7
- line-height: 16px;
6
+ font-size: 0.75rem;
7
+ line-height: 1.3;
8
8
  }
9
9
  .size_s {
10
- font-size: 14px;
11
- line-height: 18px;
10
+ font-size: 0.875rem;
11
+ line-height: 1.4;
12
12
  }
13
13
  .size_m {
14
- font-size: 16px;
15
- line-height: 22px;
14
+ font-size: 1rem;
15
+ line-height: 1.5;
16
16
  }
17
17
  .size_l {
18
- font-size: 18px;
19
- line-height: 28px;
18
+ font-size: 1.25rem;
19
+ line-height: 1.5;
20
20
  }
21
21
  .size_h1 {
22
- font-size: 40px;
23
- line-height: 56px;
22
+ font-size: 3rem;
23
+ line-height: 1.2;
24
24
  }
25
25
  .size_h2 {
26
- font-size: 32px;
27
- line-height: 40px;
26
+ font-size: 2.25rem;
27
+ line-height: 1.3;
28
28
  }
29
29
  .size_h3 {
30
- font-size: 24px;
31
- line-height: 32px;
30
+ font-size: 1.75rem;
31
+ line-height: 1.4;
32
32
  }
33
33
  .size_h4 {
34
- font-size: 20px;
35
- line-height: 28px;
34
+ font-size: 1.5rem;
35
+ line-height: 1.5;
36
36
  }
37
37
  .size_h5 {
38
- font-size: 16px;
39
- line-height: 24px;
38
+ font-size: 1.25rem;
39
+ line-height: 1.5;
40
40
  }
41
41
  .size_h6 {
42
- font-size: 12px;
43
- line-height: 16px;
42
+ font-size: 1rem;
43
+ line-height: 1.5;
44
44
  }
45
45
 
46
46
  .font-weight_normal {
@@ -1,4 +1,4 @@
1
1
  import { type Props } from "./index.props";
2
- import type { FC } from "react";
3
- declare const Typography: FC<Props>;
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Typography: FC<PropsWithChildren<Props>>;
4
4
  export default Typography;
@@ -1,4 +1,4 @@
1
- import type { CSSProperties, ReactNode } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "alert" | "success" | "secondary";
3
3
  export type TypographyFontWeight = "normal" | "medium" | "bold";
4
4
  export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
@@ -10,5 +10,4 @@ export type Props = {
10
10
  size?: TypographySize;
11
11
  fontWeight?: TypographyFontWeight;
12
12
  style?: CSSProperties;
13
- children?: ReactNode;
14
13
  };
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
2
  import type { FormFieldProps } from "./index.props";
3
- declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
3
+ declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & {
4
+ children?: React.ReactNode | undefined;
5
+ } & React.RefAttributes<HTMLDivElement>>;
4
6
  export default FormField;
@@ -5,5 +5,4 @@ export type FormFieldProps = {
5
5
  error?: boolean;
6
6
  required?: boolean;
7
7
  className?: string;
8
- children: ReactNode;
9
8
  };
@@ -17,7 +17,7 @@
17
17
  .root {
18
18
  align-items: center;
19
19
  background-color: var(--palette-white);
20
- border-radius: 4px;
20
+ border-radius: 0.375rem;
21
21
  border-style: solid;
22
22
  border-width: 1px;
23
23
  box-sizing: border-box;
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
2
  import type { InputProps } from "./index.props";
3
- declare const InputRoot: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
3
+ declare const InputRoot: React.ForwardRefExoticComponent<InputProps & {
4
+ children?: React.ReactNode | undefined;
5
+ } & React.RefAttributes<HTMLDivElement>>;
4
6
  export default InputRoot;
@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
2
2
  export type Size = "s" | "m" | "l";
3
3
  export type Variant = "primary";
4
4
  export type InputProps = {
5
- children: ReactNode;
6
5
  variant?: Variant;
7
6
  disabled: boolean;
8
7
  error?: boolean;
@@ -1,3 +1,3 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { ControlProps } from "./index.props";
3
- export declare const BadgeControl: FC<ControlProps>;
3
+ export declare const BadgeControl: FC<PropsWithChildren<ControlProps>>;
@@ -1,5 +1,3 @@
1
- import type { ReactNode } from "react";
2
1
  export interface ControlProps {
3
2
  className?: string;
4
- children: ReactNode;
5
3
  }
@@ -1,4 +1,4 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { Props } from "./index.props";
3
- declare const Badge: FC<Props>;
3
+ declare const Badge: FC<PropsWithChildren<Props>>;
4
4
  export default Badge;
@@ -1,11 +1,9 @@
1
- import type { ReactNode } from "react";
2
1
  import type { ControlProps } from "./Control/index.props";
3
2
  export interface Props extends ControlProps {
4
3
  className?: string;
5
4
  color?: string;
6
5
  background?: string;
7
6
  content?: number;
8
- children: ReactNode;
9
7
  invisible?: boolean;
10
8
  max?: number;
11
9
  showZero?: boolean;
@@ -1,4 +1,4 @@
1
- import type { Props } from "./index.props";
2
- import type { FC } from "react";
3
- declare const Chip: FC<Props>;
1
+ import type { ChipProps } from "./index.props";
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Chip: FC<PropsWithChildren<ChipProps>>;
4
4
  export default Chip;
@@ -1,12 +1,10 @@
1
- import type { ReactNode } from "react";
2
1
  type Size = "s" | "m" | "l";
3
- export type Props = {
2
+ export type ChipProps = {
4
3
  size?: Size;
5
4
  testID?: string;
6
5
  isActive?: boolean;
7
6
  iconOnRight?: React.ReactNode;
8
7
  onClick?: () => void;
9
8
  onIconOnRightClick?: () => void;
10
- children?: ReactNode;
11
9
  };
12
10
  export {};
@@ -1,6 +1,5 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const ClickOutside: FC<{
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const ClickOutside: FC<PropsWithChildren<{
3
3
  onClick: (e: MouseEvent | TouchEvent) => void;
4
- children: ReactNode;
5
- }>;
4
+ }>>;
6
5
  export default ClickOutside;
@@ -1,4 +1,4 @@
1
- import React from "react";
2
1
  import type { DropdownProps } from "./index.props";
3
- declare const Dropdown: React.FC<DropdownProps>;
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
4
4
  export default Dropdown;
@@ -4,7 +4,6 @@ import type { Placement as PopperPlacement } from "@popperjs/core";
4
4
  export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end">;
5
5
  export type Trigger = "click" | "hover" | "focus";
6
6
  export type DropdownProps = {
7
- children: ReactNode;
8
7
  zIndex?: number;
9
8
  disabled?: boolean;
10
9
  onVisibleChange?: (visible: boolean) => void;
@@ -1,4 +1,4 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { GridItemProps } from "./index.props";
3
- declare const GridItem: FC<GridItemProps>;
3
+ declare const GridItem: FC<PropsWithChildren<GridItemProps>>;
4
4
  export default GridItem;
@@ -1,6 +1,5 @@
1
- import type { CSSProperties, ReactNode } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  export type GridItemProps = {
3
- children: ReactNode;
4
3
  fullWidth?: boolean;
5
4
  className?: string;
6
5
  style?: CSSProperties;
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { GridProps } from "./index.props";
3
- declare const Grid: React.FC<GridProps>;
3
+ declare const Grid: FC<PropsWithChildren<GridProps>>;
4
4
  export default Grid;
@@ -1,6 +1,4 @@
1
- import type { ReactNode } from "react";
2
1
  export type GridProps = {
3
- children: ReactNode;
4
2
  className?: string;
5
3
  gridRowGap?: number;
6
4
  gridColumnGap?: number;
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
2
  import type { MenuItemProps } from "./index.props";
3
- declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
3
+ declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & {
4
+ children?: React.ReactNode | undefined;
5
+ } & React.RefAttributes<HTMLLIElement>>;
4
6
  export default MenuItem;
@@ -1,7 +1,6 @@
1
- import type { ReactNode, MouseEvent } from "react";
1
+ import type { MouseEvent } from "react";
2
2
  import type { MenuVariant } from "../../index.props";
3
3
  export interface MenuItemProps {
4
- children: ReactNode;
5
4
  className?: string;
6
5
  isSelected?: boolean;
7
6
  onClick?: (e: MouseEvent) => void;
@@ -1,5 +1,3 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const Content: FC<{
3
- children: ReactNode;
4
- }>;
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const Content: FC<PropsWithChildren<{}>>;
5
3
  export default Content;
@@ -1,5 +1,3 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const Title: FC<{
3
- children: ReactNode;
4
- }>;
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const Title: FC<PropsWithChildren<{}>>;
5
3
  export default Title;
@@ -1,4 +1,4 @@
1
- import type { FC } from "react";
1
+ import type { FC, PropsWithChildren } from "react";
2
2
  import type { ModalProps } from "./index.props";
3
- declare const Modal: FC<ModalProps>;
3
+ declare const Modal: FC<PropsWithChildren<ModalProps>>;
4
4
  export default Modal;
@@ -1,6 +1,4 @@
1
- import type { ReactNode } from "react";
2
1
  export type ModalProps = {
3
- children: ReactNode;
4
2
  className?: string;
5
3
  onClose?: () => void;
6
4
  title?: string;
@@ -1,6 +1,5 @@
1
- import type { FC, ReactNode } from "react";
2
- declare const Portal: FC<{
1
+ import type { FC, PropsWithChildren } from "react";
2
+ declare const Portal: FC<PropsWithChildren<{
3
3
  node?: HTMLElement | null;
4
- children: ReactNode;
5
- }>;
4
+ }>>;
6
5
  export default Portal;
@@ -5,6 +5,7 @@ type SelectItemProps = {
5
5
  value: string;
6
6
  label: React.ReactNode;
7
7
  selected: boolean;
8
+ disabled?: boolean;
8
9
  };
9
10
  onClick?: () => void;
10
11
  setScrollView: (value: Coordinates) => void;
@@ -27,7 +27,8 @@ var SelectItem = function SelectItem(_a) {
27
27
  return /*#__PURE__*/React__default.createElement(MenuItem, {
28
28
  ref: ref,
29
29
  onClick: onClick,
30
- isSelected: option.selected
30
+ isSelected: option.selected,
31
+ disabled: option.disabled
31
32
  }, option.label, option.selected && /*#__PURE__*/React__default.createElement(Check, {
32
33
  width: 16,
33
34
  height: 16
@@ -28,11 +28,13 @@ var Select = function Select(_a) {
28
28
  var preparedOptions = useMemo(function () {
29
29
  return options.map(function (_a) {
30
30
  var lvalue = _a.value,
31
- llabel = _a.label;
31
+ llabel = _a.label,
32
+ disabled = _a.disabled;
32
33
  return {
33
34
  value: lvalue,
34
35
  label: llabel,
35
- selected: value === lvalue
36
+ selected: value === lvalue,
37
+ disabled: disabled
36
38
  };
37
39
  });
38
40
  }, [value, options]);
@@ -3,6 +3,7 @@ import type { FormFieldProps } from "../base/FormField/index.props";
3
3
  export interface IOption<T extends string> {
4
4
  value: T;
5
5
  label: ReactNode;
6
+ disabled?: boolean;
6
7
  }
7
8
  export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children"> {
8
9
  options: IOption<T>[];
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import type { PropsWithChildren } from "react";
2
3
  import type { StatusProps } from "./index.props";
3
- declare const Status: ({ className, tag: Component, children, type, }: StatusProps) => React.JSX.Element;
4
+ declare const Status: ({ className, tag: Component, children, type, }: PropsWithChildren<StatusProps>) => React.JSX.Element;
4
5
  export default Status;
@@ -1,23 +1,23 @@
1
1
  .root {
2
- display: inline-flex;
3
2
  align-items: center;
4
- gap: 0.5rem;
5
3
  background-color: var(--status-neutral-bg);
6
- line-height: 1.5rem;
7
- padding: 0 0.5rem;
8
4
  border-radius: 6rem;
9
- inline-size: fit-content;
10
5
  box-sizing: border-box;
11
- white-space: nowrap;
6
+ display: inline-flex;
7
+ gap: 0.5rem;
8
+ inline-size: fit-content;
9
+ line-height: 1.5rem;
12
10
  overflow: hidden;
11
+ padding: 0 0.5rem;
13
12
  vertical-align: middle;
13
+ white-space: nowrap;
14
14
  }
15
15
  .root::before {
16
16
  background-color: var(--status-neutral);
17
- content: "";
18
- inline-size: 0.4rem;
19
17
  block-size: 0.4rem;
20
18
  border-radius: 100%;
19
+ content: "";
20
+ inline-size: 0.4rem;
21
21
  }
22
22
  .root_success {
23
23
  background-color: var(--status-success-bg);
@@ -8,6 +8,5 @@ export declare enum STATUS_TYPE {
8
8
  export type StatusProps = {
9
9
  className?: string;
10
10
  tag?: StatusTag;
11
- children?: string;
12
11
  type?: STATUS_TYPE;
13
12
  };
@@ -1,14 +1,14 @@
1
1
  .textarea {
2
- resize: none;
3
- font: inherit;
4
- overflow: auto;
5
- text-overflow: unset;
6
- padding: 7px 0;
7
2
  background: transparent;
8
3
  border: none;
9
- outline: none;
10
4
  flex: 1;
5
+ font: inherit;
6
+ outline: none;
7
+ overflow: auto;
11
8
  overflow: hidden;
9
+ padding: 7px 0;
10
+ resize: none;
11
+ text-overflow: unset;
12
12
  text-overflow: ellipsis;
13
13
  }
14
14
  .textarea::placeholder {
@@ -8,8 +8,8 @@ var PrimaryBA = {
8
8
  PRIMARY_BA_5: "#FFC818"
9
9
  };
10
10
  var SecondaryBA = {
11
- SECONDARY_BA_1: "#59636e",
12
- SECONDARY_BA_2: "#454c54",
11
+ SECONDARY_BA_1: "#818b98",
12
+ SECONDARY_BA_2: "#59636e",
13
13
  SECONDARY_BA_3: "#393f46",
14
14
  SECONDARY_BA_4: "#25292e",
15
15
  SECONDARY_BA_5: "#1f2328"
@@ -5,3 +5,4 @@ export declare const DEFAULT_TIME: {
5
5
  };
6
6
  export declare const formatTime: (date: Date) => string;
7
7
  export declare const generateSuggest: (interval?: number) => Timestamp[];
8
+ export declare const checkIsBeforeNow: (time: string, currentDate?: Date | null) => boolean;
@@ -1,4 +1,4 @@
1
- import { format, addMinutes } from 'date-fns';
1
+ import { format, addMinutes, isBefore, parse } from 'date-fns';
2
2
 
3
3
  var day = new Date();
4
4
  day.setHours(24, 0, 0, 0);
@@ -20,5 +20,8 @@ var generateSuggest = function generateSuggest(interval) {
20
20
  };
21
21
  });
22
22
  };
23
+ var checkIsBeforeNow = function checkIsBeforeNow(time, currentDate) {
24
+ return currentDate ? isBefore(parse(time, "HH:mm", currentDate), new Date()) : false;
25
+ };
23
26
 
24
- export { DEFAULT_TIME, formatTime, generateSuggest };
27
+ export { DEFAULT_TIME, checkIsBeforeNow, formatTime, generateSuggest };
@@ -2,6 +2,7 @@ import type { SelectProps } from "../Select/index.props";
2
2
  import type { FC } from "react";
3
3
  interface TimeSelectProps extends SelectProps<string> {
4
4
  interval?: 5 | 10 | 15 | 30;
5
+ currentDate?: Date | null;
5
6
  }
6
7
  declare const TimeSelect: FC<TimeSelectProps>;
7
8
  export default TimeSelect;
@@ -1,24 +1,26 @@
1
1
  import { __rest, __assign } from 'tslib';
2
2
  import React__default, { useMemo } from 'react';
3
3
  import Select from '../Select/index.js';
4
- import { generateSuggest } from './helpers.js';
4
+ import { generateSuggest, checkIsBeforeNow } from './helpers.js';
5
5
  import OptionLabel from './Label/index.js';
6
6
 
7
7
  var TimeSelect = function TimeSelect(_a) {
8
8
  var value = _a.value,
9
+ currentDate = _a.currentDate,
9
10
  _b = _a.label,
10
11
  label = _b === void 0 ? "Start time" : _b,
11
12
  _c = _a.interval,
12
13
  interval = _c === void 0 ? 15 : _c,
13
14
  onChange = _a.onChange,
14
- props = __rest(_a, ["value", "label", "interval", "onChange"]);
15
+ props = __rest(_a, ["value", "currentDate", "label", "interval", "onChange"]);
15
16
  var options = useMemo(function () {
16
17
  return generateSuggest(interval).map(function (item) {
17
18
  return {
18
19
  value: item.time,
19
20
  label: /*#__PURE__*/React__default.createElement(OptionLabel, {
20
21
  time: item.time
21
- })
22
+ }),
23
+ disabled: checkIsBeforeNow(item.time, currentDate)
22
24
  };
23
25
  });
24
26
  }, [interval]);
@@ -1,4 +1,4 @@
1
- import React from "react";
2
1
  import type { ITooltipProps } from "./index.props";
3
- declare const Tooltip: React.FC<ITooltipProps>;
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Tooltip: FC<PropsWithChildren<ITooltipProps>>;
4
4
  export default Tooltip;
@@ -3,7 +3,6 @@ import type { PositioningStrategy } from "@popperjs/core";
3
3
  import type { Placement as PopperPlacement } from "@popperjs/core";
4
4
  export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
5
5
  export interface ITooltipProps {
6
- children: ReactNode;
7
6
  content: ReactNode;
8
7
  zIndex?: number;
9
8
  placement?: Placement;
@@ -3,44 +3,44 @@
3
3
  }
4
4
 
5
5
  .size_xs {
6
- font-size: 12px;
7
- line-height: 16px;
6
+ font-size: 0.75rem;
7
+ line-height: 1.3;
8
8
  }
9
9
  .size_s {
10
- font-size: 14px;
11
- line-height: 18px;
10
+ font-size: 0.875rem;
11
+ line-height: 1.4;
12
12
  }
13
13
  .size_m {
14
- font-size: 16px;
15
- line-height: 22px;
14
+ font-size: 1rem;
15
+ line-height: 1.5;
16
16
  }
17
17
  .size_l {
18
- font-size: 18px;
19
- line-height: 28px;
18
+ font-size: 1.25rem;
19
+ line-height: 1.5;
20
20
  }
21
21
  .size_h1 {
22
- font-size: 40px;
23
- line-height: 56px;
22
+ font-size: 3rem;
23
+ line-height: 1.2;
24
24
  }
25
25
  .size_h2 {
26
- font-size: 32px;
27
- line-height: 40px;
26
+ font-size: 2.25rem;
27
+ line-height: 1.3;
28
28
  }
29
29
  .size_h3 {
30
- font-size: 24px;
31
- line-height: 32px;
30
+ font-size: 1.75rem;
31
+ line-height: 1.4;
32
32
  }
33
33
  .size_h4 {
34
- font-size: 20px;
35
- line-height: 28px;
34
+ font-size: 1.5rem;
35
+ line-height: 1.5;
36
36
  }
37
37
  .size_h5 {
38
- font-size: 16px;
39
- line-height: 24px;
38
+ font-size: 1.25rem;
39
+ line-height: 1.5;
40
40
  }
41
41
  .size_h6 {
42
- font-size: 12px;
43
- line-height: 16px;
42
+ font-size: 1rem;
43
+ line-height: 1.5;
44
44
  }
45
45
 
46
46
  .font-weight_normal {
@@ -1,4 +1,4 @@
1
1
  import { type Props } from "./index.props";
2
- import type { FC } from "react";
3
- declare const Typography: FC<Props>;
2
+ import type { FC, PropsWithChildren } from "react";
3
+ declare const Typography: FC<PropsWithChildren<Props>>;
4
4
  export default Typography;
@@ -1,4 +1,4 @@
1
- import type { CSSProperties, ReactNode } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "alert" | "success" | "secondary";
3
3
  export type TypographyFontWeight = "normal" | "medium" | "bold";
4
4
  export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
@@ -10,5 +10,4 @@ export type Props = {
10
10
  size?: TypographySize;
11
11
  fontWeight?: TypographyFontWeight;
12
12
  style?: CSSProperties;
13
- children?: ReactNode;
14
13
  };
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
2
  import type { FormFieldProps } from "./index.props";
3
- declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
3
+ declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & {
4
+ children?: React.ReactNode | undefined;
5
+ } & React.RefAttributes<HTMLDivElement>>;
4
6
  export default FormField;
@@ -5,5 +5,4 @@ export type FormFieldProps = {
5
5
  error?: boolean;
6
6
  required?: boolean;
7
7
  className?: string;
8
- children: ReactNode;
9
8
  };
@@ -17,7 +17,7 @@
17
17
  .root {
18
18
  align-items: center;
19
19
  background-color: var(--palette-white);
20
- border-radius: 4px;
20
+ border-radius: 0.375rem;
21
21
  border-style: solid;
22
22
  border-width: 1px;
23
23
  box-sizing: border-box;
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
2
  import type { InputProps } from "./index.props";
3
- declare const InputRoot: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
3
+ declare const InputRoot: React.ForwardRefExoticComponent<InputProps & {
4
+ children?: React.ReactNode | undefined;
5
+ } & React.RefAttributes<HTMLDivElement>>;
4
6
  export default InputRoot;
@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
2
2
  export type Size = "s" | "m" | "l";
3
3
  export type Variant = "primary";
4
4
  export type InputProps = {
5
- children: ReactNode;
6
5
  variant?: Variant;
7
6
  disabled: boolean;
8
7
  error?: boolean;
@@ -14,8 +14,8 @@
14
14
  --palette-primary-3: #FFD85A;
15
15
  --palette-primary-4: #FFCE31;
16
16
  --palette-primary-5: #FFC818;
17
- --palette-secondary-1: #59636e;
18
- --palette-secondary-2: #454c54;
17
+ --palette-secondary-1: #818b98;
18
+ --palette-secondary-2: #59636e;
19
19
  --palette-secondary-3: #393f46;
20
20
  --palette-secondary-4: #25292e;
21
21
  --palette-secondary-5: #1f2328;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.95",
3
+ "version": "0.7.97",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},
@@ -14,8 +14,8 @@
14
14
  --palette-primary-3: #FFD85A;
15
15
  --palette-primary-4: #FFCE31;
16
16
  --palette-primary-5: #FFC818;
17
- --palette-secondary-1: #59636e;
18
- --palette-secondary-2: #454c54;
17
+ --palette-secondary-1: #818b98;
18
+ --palette-secondary-2: #59636e;
19
19
  --palette-secondary-3: #393f46;
20
20
  --palette-secondary-4: #25292e;
21
21
  --palette-secondary-5: #1f2328;